fixed scss files

Author: coder1x

src/components/code/code.scss

@@ -42,15 +42,15 @@ $color-copy-active: #868686;
     background-color: $background-copy;
     color: $color-copy;
     cursor: pointer;
-  }
 
-  &__copy:active {
-    box-shadow: $shadow-copy-active;
-    color: $color-copy-active;
-  }
+    &:active {
+      box-shadow: $shadow-copy-active;
+      color: $color-copy-active;
+    }
 
-  &__copy:focus {
-    outline: 2px solid $color-focus;
-    outline-offset: 4px;
+    &:focus {
+      outline: 2px solid $color-focus;
+      outline-offset: 4px;
+    }
   }
 }

src/components/header/header.scss

@@ -33,24 +33,25 @@ $color-focus: rgb(167, 167, 167);
   &__download {
     color: #555;
     font-size: 24px;
-  }
-
-  &__download:hover,
-  &__download:focus {
-    color: rgb(107, 107, 107);
-  }
 
-  &__download:focus {
-    outline: 2px solid $color-focus;
-    outline-offset: 4px;
+    &:hover,
+    &:focus {
+      color: rgb(107, 107, 107);
+    }
+  
+    &:focus {
+      outline: 2px solid $color-focus;
+      outline-offset: 4px;
+    }
   }
 }
 
 .octicon {
   fill: #bb5525;
+  &:hover {
+    transition: 0.1s ease-in-out;
+    filter: drop-shadow(0 0 2px #bb5525);
+  }
 }
 
-.octicon:hover {
-  transition: 0.1s ease-in-out;
-  filter: drop-shadow(0 0 2px #bb5525);
-}
+

src/components/miscellaneous/miscellaneous.scss

@@ -68,11 +68,10 @@ $color-button-active: #868686;
     background-color: $background-button;
     color: $color-button;
     cursor: pointer;
-  }
 
-  &__reset:active,
-  &__apply:active {
-    box-shadow: $shadow-button-active;
-    color: $color-button-active;
+    &:active {
+      box-shadow: $shadow-button-active;
+      color: $color-button-active;
+    }
   }
 }

src/components/select/select.scss

@@ -33,16 +33,22 @@ $background-color-item: rgb(244, 249, 255);
     box-sizing: border-box;
     cursor: pointer;
     text-align: start;
-  }
 
-  &__displayed:hover,
-  &__displayed:focus {
-    border: 1px solid $color-border-hover;
+    &:hover,
+    &:focus {
+      border: 1px solid $color-border-hover;
+    }
+  
+    &:focus {
+      outline: 2px solid $color-focus;
+      outline-offset: 4px;
+    }
   }
 
-  &__displayed:focus {
-    outline: 2px solid $color-focus;
-    outline-offset: 4px;
+  &_visible &__displayed {
+    border-color: $color-border-show;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
   }
 
   &__tip {
@@ -54,6 +60,10 @@ $background-color-item: rgb(244, 249, 255);
     transition: transform 0.5s;
   }
 
+  &_visible &__tip {
+    transform: rotate(180deg);
+  }
+
   &__options {
     width: calc(100% - 2px);
     background: $color-background;
@@ -66,19 +76,23 @@ $background-color-item: rgb(244, 249, 255);
     top: 43px;
   }
 
+  &_visible &__options {
+    display: block;
+  }
+
   &__item {
     padding: 5px 15px 5px 15px;
     cursor: pointer;
     font-size: 14px;
-  }
-
-  &__item:hover {
-    background-color: $background-color-item;
-  }
 
-  &__item:focus {
-    outline: 2px solid $color-focus;
-    outline-offset: 4px;
+    &:hover {
+      background-color: $background-color-item;
+    }
+  
+    &:focus {
+      outline: 2px solid $color-focus;
+      outline-offset: 4px;
+    }
   }
 
   &__input {
@@ -95,18 +109,4 @@ $background-color-item: rgb(244, 249, 255);
     clip: rect(0 0 0 0);
     overflow: hidden;
   }
-
-  &_visible &__options {
-    display: block;
-  }
-
-  &_visible &__tip {
-    transform: rotate(180deg);
-  }
-
-  &_visible &__displayed {
-    border-color: $color-border-show;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-  }
 }

src/components/text-field/text-field.scss

@@ -11,15 +11,6 @@
     color: $color-label;
   }
 
-  &__input::placeholder {
-    color: $style-text;
-  }
-
-  &__input:hover,
-  &__input:focus {
-    border: 1px solid $color-border-hover;
-  }
-
   &__input {
     margin-top: 5px;
     width: 100%;
@@ -36,5 +27,14 @@
     font-size: 14px;
     line-height: 24px;
     box-sizing: border-box;
+
+    &::placeholder {
+      color: $style-text;
+    }
+  
+    &:hover,
+    &:focus {
+      border: 1px solid $color-border-hover;
+    }
   }
 }

src/components/toggle/toggle.scss

@@ -32,11 +32,18 @@ $before-background-checked: #b5cf9a;
     z-index: 0;
     border: 0;
     padding: 0;
+
+    &:focus {
+      outline: 2px solid $color-focus;
+      outline-offset: 12px;
+    }
   }
 
-  &__input:focus {
-    outline: 2px solid $color-focus;
-    outline-offset: 12px;
+  &__input:checked + &__before {
+    background-color: $before-background-checked;
+  }
+  &__input:checked + &__before:after {
+    left: 22px;
   }
 
   &__wrapper {
@@ -59,25 +66,18 @@ $before-background-checked: #b5cf9a;
     border-radius: 10px;
     transition: 0.2s;
     box-sizing: border-box;
-  }
-
-  &__before:after {
-    content: "";
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 12px;
-    height: 12px;
-    border-radius: 10px;
-    background: $color-background;
-    cursor: pointer;
-    transition: 0.2s;
-  }
 
-  &__input:checked + &__before {
-    background-color: $before-background-checked;
-  }
-  &__input:checked + &__before:after {
-    left: 22px;
+    &:after {
+      content: "";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      width: 12px;
+      height: 12px;
+      border-radius: 10px;
+      background: $color-background;
+      cursor: pointer;
+      transition: 0.2s;
+    }
   }
 }