Fixed linting issues in stylesheets

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",

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;

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;

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;
 }

src/common/MainHeader.scss

@@ -18,6 +18,7 @@
   width: 20px;
   transition: transform 300ms;
 }
+
 .main-header__toggle-icon--opened {
   transform: rotate(180deg);
 }

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;

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);
+  -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
-  box-shadow: 0 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;
+  -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;
-  -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;
-  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;
 }

src/short-urls/ShortUrlVisits.scss

@@ -1,7 +1,7 @@
 @import '../utils/base';
 
 .short-url-visits__date-input {
-  @media(max-width: $smMax) {
+  @media (max-width: $smMax) {
-    margin-top: 0.5rem;
+    margin-top: .5rem;
   }
 }

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;
 }

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;
 }