SPA: correct linting outputs

src/Web/WebSPA/eShopOnContainers.WebSPA/.sass-lint.yml

@@ -40,7 +40,7 @@
   no-universal-selectors: 0
   no-url-domains: 0
   no-url-protocols: 0
-  no-vendor-prefixes: 2
+  no-vendor-prefixes: 0
   no-warn: 2
   property-units: 0
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss

@@ -1,25 +1,27 @@
-@import './modules/_variables.scss';
+@import './modules/variables';
 
 $dist: './fonts/Montserrat-Regular';
+
 @font-face {
     font-family: Montserrat;
     font-weight: 400;
-    src: url("./fonts/Montserrat-Regular.eot?") format("eot"),url("./fonts/Montserrat-Regular.woff") format("woff"),url("./fonts/Montserrat-Regular.ttf") format("truetype"),url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg")
+    src: url('./fonts/Montserrat-Regular.eot?') format('eot'), url('./fonts/Montserrat-Regular.woff') format('woff'), url('./fonts/Montserrat-Regular.ttf') format('truetype'), url('./fonts/Montserrat-Regular.svg#Montserrat') format('svg');
 }
 
 @font-face {
     font-family: Montserrat;
     font-weight: 700;
-    src: url("./fonts/Montserrat-Bold.eot?") format("eot"),url("./fonts/Montserrat-Bold.woff") format("woff"),url("./fonts/Montserrat-Bold.ttf") format("truetype"),url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg")
+    src: url('./fonts/Montserrat-Bold.eot?') format('eot'), url('./fonts/Montserrat-Bold.woff') format('woff'), url('./fonts/Montserrat-Bold.ttf') format('truetype'), url('./fonts/Montserrat-Bold.svg#Montserrat') format('svg');
 }
 
 html,
 body {
-    font-family: Montserrat,sans-serif;
+    font-family: Montserrat, sans-serif;
     font-size: 16px;
     font-weight: $font-weight-normal;
     z-index: 10;
 }
+
 *,
 *::after,
 *::before {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss

@@ -1,4 +1,4 @@
-@import './_variables.scss';
+@import './variables';
 
 .esh-app {
     &-footer {
@@ -13,6 +13,7 @@
         width: 100%;
 
         $height: 50px;
+
         &-brand {
             height: $height;
             width: 230px;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss

@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import '../../variables';
 
 .esh-basketstatus {
     cursor: pointer;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss

@@ -1,4 +1,4 @@
-@import '../_variables.scss';
+@import '../variables';
 
 .esh-basket {
     min-height: 80vh;
@@ -29,6 +29,7 @@
     }
 
     $item-height: 8rem;
+
     &-item {
         font-size: $font-size-m;
         font-weight: $font-weight-semilight;
@@ -56,9 +57,9 @@
     }
 
     &-checkout {
-        border: none;
-        border-radius: 0;
         background-color: $color-secondary;
+        border: 0;
+        border-radius: 0;
         color: $color-foreground-brighter;
         display: inline-block;
         font-size: 1rem;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -25,19 +25,19 @@
     $filter-padding: .5rem;
 
     &-filter {
+        -webkit-appearance: none;
         background-color: transparent;
         border-color: $color-brand-bright;
         color: $color-foreground-brighter;
         cursor: pointer;
         margin-right: 1rem;
         margin-top: .5rem;
+        min-width: 140px;
         outline-color: $color-secondary;
         padding-bottom: 0;
         padding-left: $filter-padding;
         padding-right: $filter-padding;
         padding-top: $filter-padding * 3;
-        min-width: 140px;
-        -webkit-appearance: none;
 
         option {
             background-color: $color-brand;
@@ -53,8 +53,8 @@
             color: rgba($color-foreground-brighter, .5);
             content: attr(data-title);
             font-size: $font-size-xs;
-            margin-top: $font-size-xs;
             margin-left: $filter-padding;
+            margin-top: $font-size-xs;
             position: absolute;
             text-transform: uppercase;
             z-index: 1;
@@ -62,8 +62,8 @@
 
         &::after {
             background-image: url('../../images/arrow-down.png');
-            height: 7px; //png height
             content: '';
+            height: 7px; //png height
             position: absolute;
             right: $filter-padding * 3;
             top: $filter-padding * 5;
@@ -92,8 +92,8 @@
     }
 
     &-item {
-        text-align: center;
         margin-bottom: 1.5rem;
+        text-align: center;
         width: 33%;
 
         @media screen and (max-width: $media-screen-m) {
@@ -112,7 +112,7 @@
 
     &-button {
         background-color: $color-secondary;
-        border: none;
+        border: 0;
         color: $color-foreground-brighter;
         cursor: pointer;
         font-size: $font-size-m;
@@ -136,9 +136,9 @@
     }
 
     &-price {
-        text-align: center;
-        font-weight: 900;
         font-size: 28px;
+        font-weight: 900;
+        text-align: center;
 
         &::before {
             content: '$';

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss

@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import '../../variables';
 
 .esh-orders_detail {
     min-height: 80vh;
@@ -32,6 +32,7 @@
     }
 
     $item-height: 8rem;
+
     &-item {
         font-size: $font-size-m;
         font-weight: $font-weight-semilight;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss

@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import '../../variables';
 
 .esh-orders_new {
     min-height: 80vh;
@@ -13,8 +13,8 @@
     &-back {
         color: rgba($color-foreground-brighter, .4);
         line-height: $header-height;
-        text-transform: uppercase;
         text-decoration: none;
+        text-transform: uppercase;
         transition: color $animation-speed-default;
 
         &:hover {
@@ -32,21 +32,21 @@
     }
 
     &-placeOrder {
-        float: right;
+        background-color: #83D01B;
-        margin-top: 40px;
+        border: 0;
-        margin-bottom: 40px;
-        background-color: #83d01b;
-        color: #fff;
-        padding: 10px 20px 10px 20px;
         border-radius: 0;
-        border: none;
+        color: #FFFFFF;
-        width: 255px;
         display: inline-block;
-        text-align: center;
+        float: right;
-        text-transform: uppercase;
-        height: 45px;
         font-size: 16px;
         font-weight: normal;
+        height: 45px;
+        margin-bottom: 40px;
+        margin-top: 40px;
+        padding: 10px 20px 10px 20px;
+        text-align: center;
+        text-transform: uppercase;
+        width: 255px;
     }
 
     &-titles {
@@ -70,6 +70,7 @@
     }
 
     $item-height: 8rem;
+
     &-item {
         font-size: $font-size-m;
         font-weight: $font-weight-semilight;
@@ -95,32 +96,32 @@
 
 @media screen and (min-width: 992px) {
     .form-input {
-        width: 360px;
         max-width: 360px;
+        width: 360px;
     }
 }
 
 .form-input {
     border-radius: 0;
-    padding: 10px;
     height: 45px;
+    padding: 10px;
 }
 
 .form-input-small {
-    max-width: 100px!important;
+    max-width: 100px !important;
 }
 
 .form-input-medium {
-    width: 150px!important;
+    width: 150px !important;
 }
 
-.alert{
+.alert {
-    padding-left: 0px;
+    padding-left: 0;
 }
 
 .alert-danger {
-    background-color:transparent;
+    background-color: transparent;
-    border:none;
+    border: 0;
-    color: #fb0d0d;
+    color: #FB0D0D;
     font-size: 12px;
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss

@@ -1,10 +1,11 @@
-@import '../_variables.scss';
+@import '../variables';
 
 .esh-orders {
     min-height: 80vh;
     overflow-x: hidden;
 
     $header-height: 4rem;
+
     &-header {
         background-color: #00A69C;
         height: $header-height;
@@ -13,8 +14,8 @@
     &-back {
         color: rgba($color-foreground-brighter, .4);
         line-height: $header-height;
-        text-transform: uppercase;
         text-decoration: none;
+        text-transform: uppercase;
         transition: color $animation-speed-default;
 
         &:hover {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/header/header.scss

@@ -1,4 +1,4 @@
-@import "../../../variables";
+@import '../../../variables';
 
 .esh-header {
     $header-height: 4rem;
@@ -9,8 +9,8 @@
     &-back {
         color: rgba($color-foreground-brighter, .5);
         line-height: $header-height;
-        text-transform: uppercase;
         text-decoration: none;
+        text-transform: uppercase;
         transition: color $animation-speed-default;
 
         &:hover {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss

@@ -1,4 +1,4 @@
-@import "../../../variables";
+@import '../../../variables';
 
 .esh-identity {
     line-height: 3rem;
@@ -30,10 +30,10 @@
         background: $color-background-brighter;
         height: 0;
         min-width: 14rem;
-        right: 0;
         overflow: hidden;
         padding: .5rem;
         position: absolute;
+        right: 0;
         top: 2.5rem;
         transition: height $animation-speed-default;
     }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.scss

@@ -1,4 +1,4 @@
-@import "../../../variables";
+@import '../../../variables';
 
 .esh-pager {