Commit 83f446be authored by Tamlyn Rhodes's avatar Tamlyn Rhodes

Fix style linting issues

parent 0e000ffd
{
"extends": ["stylelint-config-pubsweet", "stylelint-config-prettier"]
}
// This file is meant to be overridden by the styles provided by pubsweet-theme-plugin (this way of theming is deprecated)
.fragment {
margin-left: auto;
margin-right: auto;
@media (min-width: 768px) {
width: 750px;
}
......@@ -7,11 +10,7 @@
width: 970px;
}
@media (min-width: 1200px) {
@media (min-width: 1200px) {
width: 1170px;
}
margin-right: auto;
margin-left: auto;
}
.button {
margin-top: 10px !important;
margin-bottom: 14px !important;
margin-bottom: 14px !important;
margin-top: 10px !important;
}
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome.scss';
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
.bootstrap {
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
}
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome.scss';
.md-RichEditor-root {
margin-left: auto;
margin-right: auto;
@media (min-width: 768px) {
width: 750px;
}
......@@ -10,10 +14,7 @@ $fa-font-path: "~font-awesome/fonts";
width: 970px;
}
@media (min-width: 1200px) {
@media (min-width: 1200px) {
width: 1170px;
}
margin-right: auto;
margin-left: auto;
}
\ No newline at end of file
}
// This file is meant to be overridden by the styles provided by pubsweet-theme-plugin (this way of theming is deprecated)
// This file is meant to be overridden by the styles provided by pubsweet-theme-plugin (this way of theming is deprecated)
@import "../variables";
@import '../variables';
.hero {
text-align: center;
margin-top: 40px;
border-bottom: 4px $pink solid;
/* stylelint-disable */
margin-bottom: 50px;
margin-left: 10px !important;
margin-right: 10px !important;
margin-top: 40px;
/* stylelint-enable */
padding-bottom: 40px;
border-bottom: 4px $pink solid;
text-align: center;
}
.heroBackground {
......@@ -15,12 +17,12 @@
}
.blogContainer {
border-right: 4px solid $teal;
border-left: 4px solid $brand-primary;
padding: 0 30px;
border-left: 4px solid $brand-primary;
border-right: 4px solid $teal;
padding: 0 30px;
}
.blogFooter {
text-align: center;
padding-top: 50px;
}
\ No newline at end of file
padding-top: 50px;
text-align: center;
}
@import "../main.scss"
\ No newline at end of file
@import '../main.scss';
@import "../variables";
.loginLogo{
margin-top: 30px;
margin-bottom: 30px;
display: block;
img{
width: 100%;
}
@import '../variables';
.loginLogo {
display: block;
margin-bottom: 30px;
margin-top: 30px;
img {
width: 100%;
}
}
.login{
border-right: 4px solid $teal;
border-left: 4px solid $brand-primary;
padding-left: 40px !important;
padding-right: 40px !important;
h1, legend{
margin-left: -25px;
padding-bottom: 20px;
}
.login {
border-left: 4px solid $brand-primary;
border-right: 4px solid $teal;
padding-left: 40px !important;
padding-right: 40px !important;
button{
margin-bottom: 20px !important;
}
}
\ No newline at end of file
h1,
legend {
margin-left: -25px;
padding-bottom: 20px;
}
button {
margin-bottom: 20px !important;
}
}
@import "../main.scss"
\ No newline at end of file
@import '../main.scss';
$roundDiameter: 36px;
.button {
border-radius: $roundDiameter/2 !important;//the styles created this way often go down in the styles chain.
width: $roundDiameter;
border-radius: $roundDiameter/2 !important;
height: $roundDiameter;
i{
width: $roundDiameter; //the styles created this way often go down in the styles chain.
i {
font-size: 20px;
margin-left: -5px;
}
......
@import "../variables";
@import '../variables';
.container{
.dataset{
.container {
.dataset {
padding-right: 2em;
}
table{
table {
margin-left: 3em;
label{
label {
color: black;
}
}
}
\ No newline at end of file
}
//overwrite bootstrap variables
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
$font-family-default: 'karmillaregular', Helvetica, Arial, sans-serif;
$font-family-base: $font-family-default;
$border-radius-base: 0 !default;
$brand-primary: #844D9F;// purple
$link-color: $brand-primary;
$font-family-default: 'karmillaregular', Helvetica, Arial, sans-serif;
$font-family-base: $font-family-default;
$border-radius-base: 0 !default;
$brand-primary: #844d9f; // purple
$link-color: $brand-primary;
//custom variables
$pink: #E50C79;
$teal: #51C2BD;
\ No newline at end of file
$pink: #e50c79;
$teal: #51c2bd;
@font-face {
font-family: 'karmillaregular';
src: url('../fonts/karmilla-015/karmilla-regular-015-webfont.eot');
src: url('../fonts/karmilla-015/karmilla-regular-015-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.woff2') format('woff2'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.woff') format('woff'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.ttf') format('truetype'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.svg#karmillaregular') format('svg');
font-weight: normal;
font-style: normal;
font-weight: normal;
src: url('../fonts/karmilla-015/karmilla-regular-015-webfont.eot');
src: url('../fonts/karmilla-015/karmilla-regular-015-webfont.eot?#iefix')
format('embedded-opentype'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.woff2')
format('woff2'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.woff')
format('woff'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.ttf')
format('truetype'),
url('../fonts/karmilla-015/karmilla-regular-015-webfont.svg#karmillaregular')
format('svg');
}
@font-face {
font-family: 'karmillabold';
src: url('../fonts/karmilla-015/karmilla-bold-015-webfont.eot');
src: url('../fonts/karmilla-015/karmilla-bold-015-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.woff2') format('woff2'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.woff') format('woff'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.ttf') format('truetype'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.svg#karmillabold') format('svg');
font-weight: normal;
font-style: normal;
font-weight: normal;
src: url('../fonts/karmilla-015/karmilla-bold-015-webfont.eot');
src: url('../fonts/karmilla-015/karmilla-bold-015-webfont.eot?#iefix')
format('embedded-opentype'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.woff2') format('woff2'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.woff') format('woff'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.ttf')
format('truetype'),
url('../fonts/karmilla-015/karmilla-bold-015-webfont.svg#karmillabold')
format('svg');
}
body, html {
body,
html {
font-family: 'karmillaregular', Helvetica, Arial, sans-serif;
}
......@@ -38,199 +45,227 @@ body, html {
//$link-color: $brand-primary;
//$pink: #E50C79;
//$teal: #51C2BD;
@import "variables";
@import 'variables';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
a{
color: $pink;//pink
text-decoration: underline;
a {
color: $pink;
text-decoration: underline; //pink
}
h1, h2, h3{
font-family: 'karmillaregular';
h1,
h2,
h3 {
color: $teal !important;
margin-top: 5px;
font-family: 'karmillaregular', sans-serif;
margin-bottom: 5px;
margin-top: 5px;
padding-bottom: 0;
padding-top: 0;
}
h2{
font-weight: bold;
h2 {
font-size: 25px;
font-weight: bold;
}
h3{
h3 {
color: lighten($teal, 10%) !important;
font-size: 20px;
}
.alert.alert-warning{
background-color: #EFD2DF;
margin-top: 50px;
.alert.alert-warning {
background-color: #efd2df;
border: 0;
color: black;
margin-top: 50px;
}
//form
legend{
//color: #43B1A9;//
color: $teal;//teal
legend {
border: 0;
font-weight: bold;
//color: #43B1A9;//
color: $teal;
font-weight: bold; //teal
}
label{
color: #844D9F;
label {
color: #844d9f;
font-weight: lighter;
}
input[type="text"], input[type="text"].form-control,
input[type="password"].form-control{
border: 2px solid #BAB8B8;
input[type='text'],
input[type='text'].form-control,
input[type='password'].form-control {
border: 2px solid #bab8b8;
&.error{
&.error {
border-right: 4px solid $pink;
}
&.success{
&.success {
border-right: 4px solid $brand-primary;
}
}
.form-group{
margin-top: 15px;
.form-group {
margin-bottom: 15px;
margin-top: 15px;
}
.btn-primary{
.btn-primary {
background-color: $brand-primary;
border-color: transparent;
}
@media (min-width: 768px){
@media (min-width: 768px) {
.navbar-nav {
margin: 10px;
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
}
.navbar-default{
.navbar-default {
background-color: transparent;
border: 0;
font-weight: bold;
.container-fluid{
.container-fluid {
border-bottom: 4px $teal solid;
margin-right: 15px;
margin-left: 15px;
margin-right: 15px;
padding-right: 65px;
}
.navbar-brand {
height: 65px;
padding: 0 30px 5px 15px;
margin-top: 10px;
img{
padding: 0 30px 5px 15px;
img {
height: 100%;
}
}
.navbar-nav{
> .active{
> a{
color: $pink;
background-color: transparent;
.navbar-nav {
> li {
> a {
color: $brand-primary;
text-decoration: none;
}
}
> .active {
> a {
background-color: transparent;
color: $pink;
font-weight: bold;
text-decoration: none;
}
:hover {
background-color: transparent;
}
}
> li {
> a{
color: $brand-primary;
text-decoration: none;
}
}
.logout a{
.logout a {
color: $teal;
}
}
}
.table{
.table {
margin-bottom: 10px;
> thead{
> tr{
> th{
> thead {
> tr {
> th {
background-color: transparent;
border: 0;
color: $brand-primary;
text-align: left;
background-color: transparent;
}
}
}
> tbody{
> tr:first-child{
> td{
> tbody {
> tr {
> td {
border: 0;
border-top: 1px $brand-primary solid;
padding-bottom: 20px;
padding-top: 20px;
}
}
> tr{
> td{
> tr:first-child {
> td {
border: 0;
border-top: 1px $brand-primary solid;
padding-top: 20px;
padding-bottom: 20px;
}
}
}
td.index, th.index{
td.index,
th.index {
width: 5%;
}
td.main, th.main{
td.main,
th.main {
width: 50%;
}
.btn-primary{
.btn-primary {
background-color: $teal;
border: 0;
margin-left: 5px;
i{
i {
margin-left: -2px;
margin-top: 2px;
}
}
.btn-success{
background-color: #4B8AC9;
.btn-success {
background-color: #4b8ac9;
border: 0;
margin-left: 5px;
}
.btn-danger{
background-color: #D13689;
.btn-danger {
background-color: #d13689;
border: 0;
margin-left: 5px;
i{
i {
margin-left: -1px;
}
}
.btn-warning {
margin-left: 5px;
border: 0;
margin-left: 5px;
}
}
//custom elements
.btn-wide{
font-family: 'karmillaregular';
.btn-wide {
font-family: 'karmillaregular', sans-serif;
font-size: 21px;
padding: 5px 50px;
}
.published .fa-circle{
.published .fa-circle {
color: $teal;
}
.unpublished .fa-circle{
.unpublished .fa-circle {
color: $pink;
}
}
// This file is meant to be overridden by the styles provided by pubsweet-theme-plugin (this way of theming is deprecated)
:local .list {
}
:local .header {
}
// This file is meant to be overridden by the styles provided by pubsweet-theme-plugin (this way of theming is deprecated)
// This file is meant to be overridden by the styles provided by pubsweet-theme-plugin (this way of theming is deprecated)
.button {
margin-top: 22px !important;
margin-bottom: 14px !important;
margin-bottom: 14px !important;
margin-top: 22px !important;
}
......@@ -38,8 +38,8 @@
width: 9px;
}
.root input:focus + span::before,
.root:hover span::before {
.root:hover span::before,
.root input:focus + span::before {
//background-size: 100%;
background: var(--color-primary);
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
......@@ -55,4 +55,3 @@
transition: border 0.5s ease, background-size 0.3s ease;
}
}
......@@ -6,22 +6,30 @@ $color: var(--color-primary);
$color-back: white;
@mixin realBorder($color, $colorback) {
background: linear-gradient($colorback 0, $colorback 1.2em, $color 1.2em, $color 1.25em, $colorback 1.25em, $colorback 2em) no-repeat;
text-shadow: 0.05em 0.05em 0 $colorback, -0.05em -0.05em 0 $colorback, -0.05em 0.05em 0 $colorback, 0.05em -0.05em 0 $colorback;
background: linear-gradient(
$colorback 0,
$colorback 1.2em,
$color 1.2em,
$color 1.25em,
$colorback 1.25em,
$colorback 2em
)
no-repeat;
text-shadow: 0.05em 0.05em 0 $colorback, -0.05em -0.05em 0 $colorback,
-0.05em 0.05em 0 $colorback, 0.05em -0.05em 0 $colorback;
}
.root {
font-family: "Fira Sans Condensed", sans-serif;
font-family: 'Fira Sans Condensed', sans-serif;
}
.react-tags {
position: relative;
padding: 6px 0 0 6px;
font-size: 1em;
line-height: 1.2;
/* clicking anywhere will focus the input */
cursor: text;
font-size: 1em;
line-height: 1.2;
padding: 6px 0 0 6px;
position: relative;
}
.react-tags.is-focused {
......@@ -33,33 +41,34 @@ $color-back: white;
}
.react-tags__selected-tag {
font-family: "Vollkorn", serif;
display: inline-block;
box-sizing: border-box;
margin: 0 1em 1em 0;
padding: 0.1em 0.3em;
border: 0 solid transparent;
@include realBorder(#aaa, white);
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: 'Vollkorn', serif;
/* match the font styles */
font-size: inherit;
line-height: inherit;
cursor: pointer;
margin: 0 1em 1em 0;
padding: 0.1em 0.3em;
@include realBorder(#aaa, white);
}
.react-tags__selected-tag::after {
background: white;
color: #aaa;
content: '\2715';
margin-left: 8px;
padding: 3px 0 0;
// margin: 0;
display: inline-block;
width: 13px;
height: 10px;
font-size: 0.9em;
background: white;
color: #aaa;
font-weight: 600;
height: 10px;
margin-left: 8px;
padding: 3px 0 0;
text-shadow: none;