fix stylelint issues

YuraVolk · Sep 12, 2023 · 5aff32c · 5aff32c
1 parent 97bd118
commit 5aff32c
Show file tree

Hide file tree

Showing 11 changed files with 894 additions and 919 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -11,6 +11,8 @@
             }
         ],
         "media-feature-range-notation": "prefix",
-        "selector-class-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$"
+        "selector-class-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$",
+        "scss/percent-placeholder-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$",
+        "selector-id-pattern": ".*"
     }
 }
diff --git a/docs/betting-template/src/style.scss b/docs/betting-template/src/style.scss
@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:list";
+@use "sass:color";
 
 @font-face {
     font-family: Latinaires;
@@ -33,7 +35,7 @@
 }
 
 %font-icon {
-    font-family: Icons !important;
+    font-family: Icons, system-ui !important;
     speak: never;
     font-style: normal;
     font-weight: normal;
@@ -58,7 +60,7 @@
 
     @for $i from $from through $stroke {
         @for $j from $from through $stroke {
-            $shadow: append($shadow, $i * $step $j * $step 0 $color, comma);
+            $shadow: list.append($shadow, $i * $step $j * $step 0 $color, comma);
         }
     }
 
@@ -69,7 +71,7 @@ body {
     margin: 0;
     padding: 0;
     border-top: 1px solid #080539;
-    font-family: Latinaires;
+    font-family: Latinaires, sans-serif;
 }
 
 %icon-arrow-up::before {
@@ -108,11 +110,11 @@ body {
     content: "\ea95";
 }
 
-$skewDeg: 168deg;
+$skew-deg: 168deg;
 
 .header {
     padding-bottom: obtain-viewport-width(360px);
-    transform: skewY($skewDeg * -1);
+    transform: skewY($skew-deg * -1);
 
     &::before {
         position: absolute;
@@ -124,7 +126,7 @@ $skewDeg: 168deg;
     }
 
     & > * {
-        transform: skewY($skewDeg);
+        transform: skewY($skew-deg);
     }
 
     &-navigation {
@@ -221,15 +223,15 @@ main {
 .intro {
     position: relative;
     padding: obtain-viewport-width(24px) 0 obtain-viewport-width(180px) 0;
-    transform: skewY($skewDeg * -1);
+    transform: skewY($skew-deg * -1);
     overflow: hidden;
     background-color: #fff;
 
     &::before {
         position: absolute;
         left: 0;
         bottom: obtain-viewport-width(-70px);
-        transform: skewY($skewDeg);
+        transform: skewY($skew-deg);
         width: obtain-viewport-width(650px);
         height: obtain-viewport-width(712px);
         background-image: url("./img/section-image.jpg");
@@ -239,13 +241,13 @@ main {
     }
 
     & > * {
-        transform: skewY($skewDeg);
+        transform: skewY($skew-deg);
     }
 
     &__number {
         display: block;
         font-weight: 700;
-        transform: skewY($skewDeg) translateY(-50%);
+        transform: skewY($skew-deg) translateY(-50%);
         font-size: obtain-viewport-width(80px);
         color: #dedede;
         margin-left: obtain-viewport-width(579px);
@@ -526,9 +528,9 @@ main {
     flex-grow: 1;
 }
 
-@mixin footerButton($color) {
+@mixin footer-button($color) {
     position: relative;
-    border: 1px solid lighten($color: $color, $amount: 1);
+    border: 1px solid color.adjust($color: $color, $lightness: 1);
     border-radius: 3px;
     padding: obtain-viewport-width(4px) obtain-viewport-width(12px);
     font-size: obtain-viewport-width(14px);
@@ -537,7 +539,7 @@ main {
 }
 
 .contact-us-button {
-    @include footerButton(#029ae6);
+    @include footer-button(#029ae6);
 
     &::before {
         position: relative;
@@ -566,7 +568,7 @@ main {
 }
 
 .go-up-button {
-    @include footerButton(#f04b1e);
+    @include footer-button(#f04b1e);
     @extend %icon-arrow-up;
 
     align-self: stretch;

diff --git a/docs/headphones/src/style.scss b/docs/headphones/src/style.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:list";
 
 @font-face {
     font-family: Latinaires;
@@ -33,7 +34,7 @@
 }
 
 %font-icon {
-    font-family: Icons !important;
+    font-family: Icons, system-ui !important;
     speak: never;
     font-style: normal;
     font-weight: normal;
@@ -118,7 +119,7 @@
 
     @for $i from $from through $stroke {
         @for $j from $from through $stroke {
-            $shadow: append($shadow, $i * $step $j * $step 0 $color, comma);
+            $shadow: list.append($shadow, $i * $step $j * $step 0 $color, comma);
         }
     }
 
@@ -134,7 +135,7 @@
     color: $color; 
 }
 
-@mixin slideButton($size, $activeColor) {
+@mixin slide-button($size, $activeColor) {
     width: obtain-viewport-width($size);
     height: obtain-viewport-width($size);
     border-radius: 50%;
@@ -165,7 +166,7 @@
     }
 }
 
-@mixin featuresHeader($vertical) {
+@mixin features-header($vertical) {
     @if  $vertical {
         @include aliasedtext-stroke($stroke: 2, $color: rgba(#000, 0.7), $step: 0.7px);
 
@@ -352,7 +353,7 @@ button {
         list-style-type: none;
 
         &__button {
-            @include slideButton($size: 8px, $activeColor: #300800);
+            @include slide-button($size: 8px, $activeColor: #300800);
         }
     }
 
@@ -556,7 +557,7 @@ button {
     color: #737373;
 
     &__heading {
-        @include featuresHeader($vertical: true);
+        @include features-header($vertical: true);
     }
 
     &__paragraph {
@@ -594,14 +595,6 @@ button {
                 cursor: pointer;
                 transition: all 0.3s ease;
 
-                &:hover {
-                    color: #f85908;
-
-                    &::after {
-                        border-color: #f85908;
-                    }
-                }
-
                 &::after {
                     position: absolute;
                     top: 50%;
@@ -613,7 +606,15 @@ button {
                     border-radius: 50%;
                     content: "";
                 }
-
+
+                &:hover {
+                    color: #f85908;
+
+                    &::after {
+                        border-color: #f85908;
+                    }
+                }
+
                 &--phone {
                     @extend %icon-phone1;
                 }
@@ -664,7 +665,7 @@ button {
     overflow: hidden;
 
     &-description {
-        @include featuresHeader($vertical: false);
+        @include features-header($vertical: false);
 
         width: 0;
         flex: 0 0 obtain-viewport-width(252px);
@@ -789,7 +790,7 @@ button {
     }
 
     &-description {
-        @include featuresHeader($vertical: false);
+        @include features-header($vertical: false);
 
         &__paragraph {
             max-width: obtain-viewport-width(360px);
@@ -807,7 +808,7 @@ button {
         margin: 0;
 
         &__button {
-            @include slideButton($activeColor: #303030, $size: 10px);
+            @include slide-button($activeColor: #303030, $size: 10px);
 
             background-color: transparent;
             border: obtain-viewport-width(2px) solid #fff;
@@ -816,14 +817,14 @@ button {
 }
 
 .map-section {
-    @include featuresHeader($vertical: false);
+    @include features-header($vertical: false);
 
     padding-top: obtain-viewport-width(55px);
     text-align: center;
     background-color: #1f1f1f;
 
     &__heading {
-        @include featuresHeader($vertical: true);
+        @include features-header($vertical: true);
 
         display: block;
         z-index: 1;