add: multiple switch colors

Borderliner · Jul 26, 2024 · 0054a83 · 0054a83
1 parent 7ff1248
commit 0054a83
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 37 deletions.
diff --git a/src/scss/components/form.scss b/src/scss/components/form.scss
@@ -162,48 +162,86 @@ label.checkbox, label.radio {
   display: inline-block;
   width: 2.90em;
   height: 1.5em;
+
+  /* Hide default HTML checkbox */
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    border: 2px solid $text-color;
+    border-radius: 8px;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    width: 2.7em;
+
+    &:before {
+      position: absolute;
+      content: "";
+      height: 1.1em;
+      width: 1.1em;
+      left: 1px;
+      bottom: 0.1em;
+      background-color: $text-color;
+      border-radius: 6px;
+      transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
+    }
+  }
 }
 
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+.switch input:checked + .slider:before {
+  transform: translateX(1.45em);
 }
 
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  border: 2px solid $text-color;
-  border-radius: 8px;
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.switch input:checked + .slider {
+  box-shadow: 0 0 10px $button-color-simple;
+  border: 2px solid $button-color-simple;
 }
 
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 1.1em;
-  width: 1.1em;
-  left: 1px;
-  bottom: 0.1em;
-  background-color: $text-color;
-  border-radius: 6px;
-  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
+.switch input:checked + .slider:before {
+  background-color: $button-color-simple;
 }
 
-.switch input:checked + .slider {
+// Colors
+.switch.blue input:checked + .slider {
   box-shadow: 0 0 10px rgba(9, 117, 241, 0.8);
   border: 2px solid #0974f1;
 }
 
-.switch input:checked + .slider:before {
+.switch.blue input:checked + .slider:before {
   background-color: #0974f1;
 }
 
-.switch input:checked + .slider:before {
-  transform: translateX(1.45em);
+.switch.green input:checked + .slider {
+  box-shadow: 0 0 10px #2ecc70d0;
+  border: 2px solid #2ecc71;
+}
+
+.switch.green input:checked + .slider:before {
+  background-color: #2ecc71;
+}
+
+.switch.orange input:checked + .slider {
+  box-shadow: 0 0 10px #e67d22d2;
+  border: 2px solid #e67e22;
+}
+
+.switch.orange input:checked + .slider:before {
+  background-color: #e67e22;
+}
+
+.switch.red input:checked + .slider {
+  box-shadow: 0 0 10px #e74d3ccc;
+  border: 2px solid #e74c3c;
+}
+
+.switch.red input:checked + .slider:before {
+  background-color: #e74c3c;
 }
 
 // Range
@@ -273,6 +311,12 @@ input[type='range'] {
     transition: .3s;
   }
 
+  &::-moz-range-thumb:hover {
+    background-color: #0974f1;
+    border-color: #0974f1;
+    transition: .3s;
+  }
+
   &::-moz-range-thumb:hover:active, &::-moz-range-thumb:active {
     background-color: #0b60c2;
     border-color: #0b60c2;

diff --git a/src/scss/plugins/light-mode/_colors.scss b/src/scss/plugins/light-mode/_colors.scss
@@ -28,7 +28,7 @@ $lm-sidenav-color-links-hover:              #000000;
 $lm-sidenav-color-overlay:            #000;
 
 // Button Colors //================================
-$lm-button-color-simple:              rgb(58, 58, 58);
+$lm-button-color-simple:              rgb(85, 85, 85);
 $lm-button-color-simple-active:       rgb(39, 39, 39);
 
 // Form Colors //================================

diff --git a/src/scss/plugins/light-mode/main.scss b/src/scss/plugins/light-mode/main.scss
@@ -190,6 +190,7 @@ html.light-mode {
   @include button-mixin(':active') {
     background-color: $lm-button-color-simple-active;
     border-color: $lm-button-color-simple-active;
+    color: $lm-meshki-white;
   }
 
   // Extra colors
@@ -252,17 +253,38 @@ html.light-mode {
   }
 
   /* Switch */
-  .slider {
-    border: 2px solid $lm-text-color;
-  }
+  .switch {
+    .slider {
+      border: 2px solid $lm-text-color;
+    }
 
-  .slider:before {
-    background-color: $lm-text-color;
-  }
+    .slider:before {
+      background-color: $lm-text-color;
+    }
+
+    & input:checked+.slider {
+      box-shadow: 0 0 10px #222222b9;
+    }
+
+    &.blue input:checked+.slider {
+      box-shadow: 0 0 10px rgba(9, 117, 241, 0.8);
+      border: 2px solid #0974f1;
+    }
+
+    &.green input:checked+.slider {
+      box-shadow: 0 0 10px #2ecc70d0;
+      border: 2px solid #2ecc71;
+    }
+
+    &.orange input:checked+.slider {
+      box-shadow: 0 0 10px #e67d22d2;
+      border: 2px solid #e67e22;
+    }
 
-  .switch input:checked+.slider {
-    box-shadow: 0 0 10px rgba(9, 117, 241, 0.8);
-    border: 2px solid #0974f1;
+    &.red input:checked+.slider {
+      box-shadow: 0 0 10px #e74d3ccc;
+      border: 2px solid #e74c3c;
+    }
   }
 
   input[type='range'] {