From ed0aa6845280802867000598d54c171976d5b3f7 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 25 Aug 2018 15:59:51 +0200 Subject: [PATCH] Fixed linting issues in stylesheets --- package.json | 3 ++- src/common/AsideMenu.scss | 6 +++++- src/common/DateInput.scss | 4 +++- src/common/Home.scss | 3 ++- src/common/MainHeader.scss | 1 + src/common/MenuLayout.scss | 3 ++- src/common/react-tagsinput.scss | 14 ++++++-------- src/short-urls/ShortUrlVisits.scss | 4 ++-- src/tags/TagCard.scss | 5 ++++- src/utils/SearchField.scss | 2 ++ 10 files changed, 29 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 91ce6d22..c7c253ed 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "scripts": { "lint": "yarn lint:js && yarn lint:css", "lint:js": "eslint src test scripts config", - "lint:css": "echo \"no css linting\"", + "lint:css": "stylelint src/**/*.scss", + "lint:css:fix": "yarn lint:css --fix", "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js --env=jsdom --colors", diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss index 80f28016..0319f1fb 100644 --- a/src/common/AsideMenu.scss +++ b/src/common/AsideMenu.scss @@ -24,9 +24,10 @@ $asideMenuMobileWidth: 280px; @media (max-width: $smMax) { width: $asideMenuMobileWidth !important; - @include box-shadow(-10px 0px 50px 11px rgba(0, 0, 0, 0.55)); transition: left 300ms; top: $headerHeight - 3px; + + @include box-shadow(-10px 0 50px 11px rgba(0, 0, 0, .55)); } } @@ -46,6 +47,7 @@ $asideMenuMobileWidth: 280px; text-decoration: none !important; cursor: pointer; } + .aside-menu__item:hover { background-color: $lightHoverColor; } @@ -54,6 +56,7 @@ $asideMenuMobileWidth: 280px; color: #fff; background-color: $mainColor; } + .aside-menu__item--selected:hover { color: #fff; background-color: $mainColor; @@ -68,6 +71,7 @@ $asideMenuMobileWidth: 280px; color: $dangerColor; margin-top: auto; } + .aside-menu__item--danger:hover { color: #fff; background-color: $dangerColor; diff --git a/src/common/DateInput.scss b/src/common/DateInput.scss index ba4563d5..3c759665 100644 --- a/src/common/DateInput.scss +++ b/src/common/DateInput.scss @@ -12,16 +12,18 @@ .date-input-container__icon { @include vertical-align(); + right: .75rem; cursor: pointer; } .react-datepicker__close-icon.react-datepicker__close-icon { @include vertical-align(); + right: 0; } -.react-datepicker__close-icon.react-datepicker__close-icon::after { +.react-datepicker__close-icon.react-datepicker__close-icon:after { right: .75rem; line-height: 11px; background-color: #333; diff --git a/src/common/Home.scss b/src/common/Home.scss index 05abe512..a57f033b 100644 --- a/src/common/Home.scss +++ b/src/common/Home.scss @@ -27,10 +27,11 @@ .home__servers-item.home__servers-item { text-align: left; position: relative; - padding: .75rem 2.5rem 0.75rem 1rem; + padding: .75rem 2.5rem .75rem 1rem; } .home__servers-item-icon { @include vertical-align(); + right: 1rem; } diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss index 61ef23bb..89279c68 100644 --- a/src/common/MainHeader.scss +++ b/src/common/MainHeader.scss @@ -18,6 +18,7 @@ width: 20px; transition: transform 300ms; } + .main-header__toggle-icon--opened { transform: rotate(180deg); } diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss index 724291da..78276ea9 100644 --- a/src/common/MenuLayout.scss +++ b/src/common/MenuLayout.scss @@ -2,6 +2,7 @@ .menu-layout__swipeable { $offset: 15px; + height: 100%; margin-right: -$offset; margin-left: -$offset; @@ -21,7 +22,7 @@ z-index: 1035; font-size: 1.5rem; cursor: pointer; - color: rgba(255,255,255,.5); + color: rgba(255, 255, 255, .5); @media (max-width: $smMax) { display: inline-block; diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss index 29006fb3..cd029d09 100644 --- a/src/common/react-tagsinput.scss +++ b/src/common/react-tagsinput.scss @@ -9,13 +9,11 @@ .react-tagsinput--focused { border-color: #80bdff; - -webkit-box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); - box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); - -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; - transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; - -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; - transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; - transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; + -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); + box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); + -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; + -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; } .react-tagsinput-tag { @@ -36,7 +34,7 @@ margin-left: 8px; } -.react-tagsinput-tag span::before { +.react-tagsinput-tag span:before { content: "\2715"; color: #fff; } diff --git a/src/short-urls/ShortUrlVisits.scss b/src/short-urls/ShortUrlVisits.scss index 75aadecc..c75b3b78 100644 --- a/src/short-urls/ShortUrlVisits.scss +++ b/src/short-urls/ShortUrlVisits.scss @@ -1,7 +1,7 @@ @import '../utils/base'; .short-url-visits__date-input { - @media(max-width: $smMax) { - margin-top: 0.5rem; + @media (max-width: $smMax) { + margin-top: .5rem; } } diff --git a/src/tags/TagCard.scss b/src/tags/TagCard.scss index 3a369dda..6e2b56d7 100644 --- a/src/tags/TagCard.scss +++ b/src/tags/TagCard.scss @@ -1,7 +1,8 @@ .tag-card.tag-card { - background-color: #eeeeee; + background-color: #eee; margin-bottom: .5rem; } + .tag-card__body.tag-card__body { padding: .75rem; } @@ -17,6 +18,7 @@ .tag-card__tag-bullet { $width: 20px; + border-radius: 50%; width: $width; height: $width; @@ -28,6 +30,7 @@ .tag-card__btn { float: right; } + .tag-card__btn--last { margin-left: 3px; } diff --git a/src/utils/SearchField.scss b/src/utils/SearchField.scss index 74107ebf..6dd93bed 100644 --- a/src/utils/SearchField.scss +++ b/src/utils/SearchField.scss @@ -11,11 +11,13 @@ .search-field__icon { @include vertical-align(); + left: 15px; color: #707581; } .search-field__close { @include vertical-align(); + right: 15px; }