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

Fix style linting issues

parent 0e000ffd
{ {
"extends": ["stylelint-config-pubsweet", "stylelint-config-prettier"] "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 { .fragment {
margin-left: auto;
margin-right: auto;
@media (min-width: 768px) { @media (min-width: 768px) {
width: 750px; width: 750px;
} }
...@@ -7,11 +10,7 @@ ...@@ -7,11 +10,7 @@
width: 970px; width: 970px;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
width: 1170px; width: 1170px;
} }
margin-right: auto;
margin-left: auto;
} }
.button { .button {
margin-top: 10px !important; margin-bottom: 14px !important;
margin-bottom: 14px !important; margin-top: 10px !important;
} }
$fa-font-path: "~font-awesome/fonts"; $fa-font-path: '~font-awesome/fonts';
@import "~font-awesome/scss/font-awesome.scss";
@import '~font-awesome/scss/font-awesome.scss';
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
.bootstrap { .bootstrap {
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss'; @import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
} }
$fa-font-path: "~font-awesome/fonts"; $fa-font-path: '~font-awesome/fonts';
@import "~font-awesome/scss/font-awesome.scss";
@import '~font-awesome/scss/font-awesome.scss';
.md-RichEditor-root { .md-RichEditor-root {
margin-left: auto;
margin-right: auto;
@media (min-width: 768px) { @media (min-width: 768px) {
width: 750px; width: 750px;
} }
...@@ -10,10 +14,7 @@ $fa-font-path: "~font-awesome/fonts"; ...@@ -10,10 +14,7 @@ $fa-font-path: "~font-awesome/fonts";
width: 970px; width: 970px;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
width: 1170px; 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 { .hero {
text-align: center; border-bottom: 4px $pink solid;
margin-top: 40px; /* stylelint-disable */
margin-bottom: 50px; margin-bottom: 50px;
margin-left: 10px !important; margin-left: 10px !important;
margin-right: 10px !important; margin-right: 10px !important;
margin-top: 40px;
/* stylelint-enable */
padding-bottom: 40px; padding-bottom: 40px;
border-bottom: 4px $pink solid; text-align: center;
} }
.heroBackground { .heroBackground {
...@@ -15,12 +17,12 @@ ...@@ -15,12 +17,12 @@
} }
.blogContainer { .blogContainer {
border-right: 4px solid $teal; border-left: 4px solid $brand-primary;
border-left: 4px solid $brand-primary; border-right: 4px solid $teal;
padding: 0 30px; padding: 0 30px;
} }
.blogFooter { .blogFooter {
text-align: center; padding-top: 50px;
padding-top: 50px; text-align: center;
} }
\ No newline at end of file
@import "../main.scss" @import '../main.scss';
\ No newline at end of file
@import "../variables"; @import '../variables';
.loginLogo{
margin-top: 30px; .loginLogo {
margin-bottom: 30px; display: block;
display: block; margin-bottom: 30px;
img{ margin-top: 30px;
width: 100%;
} 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{ .login {
margin-left: -25px; border-left: 4px solid $brand-primary;
padding-bottom: 20px; border-right: 4px solid $teal;
} padding-left: 40px !important;
padding-right: 40px !important;
button{ h1,
margin-bottom: 20px !important; legend {
} margin-left: -25px;
} padding-bottom: 20px;
\ No newline at end of file }
button {
margin-bottom: 20px !important;
}
}
@import "../main.scss" @import '../main.scss';
\ No newline at end of file
$roundDiameter: 36px; $roundDiameter: 36px;
.button { .button {
border-radius: $roundDiameter/2 !important;//the styles created this way often go down in the styles chain. border-radius: $roundDiameter/2 !important;
width: $roundDiameter;
height: $roundDiameter; height: $roundDiameter;
i{ width: $roundDiameter; //the styles created this way often go down in the styles chain.
i {
font-size: 20px; font-size: 20px;
margin-left: -5px; margin-left: -5px;
} }
......
@import "../variables"; @import '../variables';
.container{ .container {
.dataset{ .dataset {
padding-right: 2em; padding-right: 2em;
} }
table{
table {
margin-left: 3em; margin-left: 3em;
label{
label {
color: black; color: black;
} }
} }
} }
\ No newline at end of file
//overwrite bootstrap variables //overwrite bootstrap variables
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
$font-family-default: 'karmillaregular', Helvetica, Arial, sans-serif; $font-family-default: 'karmillaregular', Helvetica, Arial, sans-serif;
$font-family-base: $font-family-default; $font-family-base: $font-family-default;
$border-radius-base: 0 !default; $border-radius-base: 0 !default;
$brand-primary: #844D9F;// purple $brand-primary: #844d9f; // purple
$link-color: $brand-primary; $link-color: $brand-primary;
//custom variables //custom variables
$pink: #E50C79; $pink: #e50c79;
$teal: #51C2BD; $teal: #51c2bd;
\ No newline at end of file
@font-face { @font-face {
font-family: 'karmillaregular'; 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-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-face {
font-family: 'karmillabold'; 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-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; font-family: 'karmillaregular', Helvetica, Arial, sans-serif;
} }
...@@ -38,199 +45,227 @@ body, html { ...@@ -38,199 +45,227 @@ body, html {
//$link-color: $brand-primary; //$link-color: $brand-primary;
//$pink: #E50C79; //$pink: #E50C79;
//$teal: #51C2BD; //$teal: #51C2BD;
@import "variables"; @import 'variables';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss'; @import '~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss'; @import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
a{ a {
color: $pink;//pink color: $pink;
text-decoration: underline; text-decoration: underline; //pink
} }
h1, h2, h3{
font-family: 'karmillaregular'; h1,
h2,
h3 {
color: $teal !important; color: $teal !important;
margin-top: 5px; font-family: 'karmillaregular', sans-serif;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px;
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
} }
h2{
font-weight: bold; h2 {
font-size: 25px; font-size: 25px;
font-weight: bold;
} }
h3{
h3 {
color: lighten($teal, 10%) !important; color: lighten($teal, 10%) !important;
font-size: 20px; font-size: 20px;
} }
.alert.alert-warning{
background-color: #EFD2DF; .alert.alert-warning {
margin-top: 50px; background-color: #efd2df;
border: 0; border: 0;
color: black; color: black;
margin-top: 50px;
} }
//form //form
legend{ legend {
//color: #43B1A9;//
color: $teal;//teal
border: 0; border: 0;
font-weight: bold; //color: #43B1A9;//
color: $teal;
font-weight: bold; //teal
} }
label{
color: #844D9F; label {
color: #844d9f;
font-weight: lighter; font-weight: lighter;
} }
input[type="text"], input[type="text"].form-control, input[type='text'],
input[type="password"].form-control{ input[type='text'].form-control,
border: 2px solid #BAB8B8; input[type='password'].form-control {
border: 2px solid #bab8b8;
&.error{ &.error {
border-right: 4px solid $pink; border-right: 4px solid $pink;
} }
&.success{ &.success {
border-right: 4px solid $brand-primary; border-right: 4px solid $brand-primary;
} }
} }
.form-group{ .form-group {
margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 15px;
} }
.btn-primary{ .btn-primary {
background-color: $brand-primary; background-color: $brand-primary;
border-color: transparent; border-color: transparent;
} }
@media (min-width: 768px){ @media (min-width: 768px) {
.navbar-nav { .navbar-nav {
margin: 10px; margin: 10px;
} }
.navbar-nav > li > a { .navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 20px;
} }
} }
.navbar-default{ .navbar-default {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
font-weight: bold; font-weight: bold;
.container-fluid{
.container-fluid {
border-bottom: 4px $teal solid; border-bottom: 4px $teal solid;
margin-right: 15px;
margin-left: 15px; margin-left: 15px;
margin-right: 15px;
padding-right: 65px; padding-right: 65px;
} }
.navbar-brand { .navbar-brand {
height: 65px; height: 65px;
padding: 0 30px 5px 15px;
margin-top: 10px; margin-top: 10px;
img{ padding: 0 30px 5px 15px;
img {
height: 100%; height: 100%;
} }
} }
.navbar-nav{
> .active{ .navbar-nav {
> a{ > li {
color: $pink; > a {
background-color: transparent; color: $brand-primary;
text-decoration: none; text-decoration: none;
}
}
> .active {
> a {
background-color: transparent;
color: $pink;
font-weight: bold; font-weight: bold;
text-decoration: none;
} }
:hover { :hover {
background-color: transparent; background-color: transparent;
} }
} }
> li {
> a{ .logout a {
color: $brand-primary;
text-decoration: none;
}
}
.logout a{
color: $teal; color: $teal;
} }
} }
} }
.table{ .table {
margin-bottom: 10px; margin-bottom: 10px;
> thead{
> tr{ > thead {
> th{ > tr {
> th {
background-color: transparent;
border: 0; border: 0;
color: $brand-primary; color: $brand-primary;
text-align: left; text-align: left;
background-color: transparent;
} }
} }
} }
> tbody{
> tr:first-child{ > tbody {
> td{ > tr {
> td {
border: 0; border: 0;
border-top: 1px $brand-primary solid;
padding-bottom: 20px;
padding-top: 20px;
} }
} }
> tr{
> td{ > tr:first-child {
> td {
border: 0; border: 0;
border-top: 1px $brand-primary solid;
padding-top: 20px;
padding-bottom: 20px;
} }
} }
} }
td.index, th.index{
td.index,
th.index {
width: 5%; width: 5%;
} }
td.main, th.main{
td.main,
th.main {
width: 50%; width: 50%;
} }
.btn-primary{
.btn-primary {
background-color: $teal; background-color: $teal;
border: 0; border: 0;
margin-left: 5px; margin-left: 5px;
i{
i {
margin-left: -2px; margin-left: -2px;
margin-top: 2px; margin-top: 2px;
} }
} }
.btn-success{
background-color: #4B8AC9; .btn-success {
background-color: #4b8ac9;
border: 0; border: 0;
margin-left: 5px; margin-left: 5px;
} }
.btn-danger{
background-color: #D13689; .btn-danger {
background-color: #d13689;
border: 0; border: 0;
margin-left: 5px; margin-left: 5px;
i{
i {
margin-left: -1px; margin-left: -1px;
} }
} }
.btn-warning { .btn-warning {
margin-left: 5px;
border: 0; border: 0;
margin-left: 5px;
} }
} }
//custom elements //custom elements
.btn-wide{ .btn-wide {
font-family: 'karmillaregular'; font-family: 'karmillaregular', sans-serif;
font-size: 21px; font-size: 21px;
padding: 5px 50px; padding: 5px 50px;
} }
.published .fa-circle{