Organize demo/slider.css and fix variable names

GoogleChromeLabs · Oct 5, 2023 · fea2da8 · fea2da8
1 parent 3044981
commit fea2da8
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/demo/slider.css b/demo/slider.css
@@ -8,31 +8,31 @@ dark-mode-toggle.slider::part(toggleLabel) {
   transition: 0.4s;
 }
 
+dark-mode-toggle.slider[mode="dark"]::part(toggleLabel) {
+  background-color: #4e5255;
+}
+
 dark-mode-toggle.slider::part(toggleLabel)::before {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25);
   left: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25);
-  height: calc(var(--dark-mode-toggle-icon-icon-size, 1rem) * 1.5);
-  width: calc(var(--dark-mode-toggle-icon-icon-size, 1rem) * 1.5);
+  height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
+  width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
   border-radius: 100%;
   box-shadow: 0 0.15em 0.3em rgb(0 0 0 / 15%), 0 0.2em 0.5em rgb(0 0 0 / 30%);
   background-color: #fff;
   color: #333;
   transition: 0.4s;
   content: "";
   background-position: center;
-  background-size: var(--dark-mode-toggle-icon-icon-size, 1rem);
-  background-image: var(--dark-mode-toggle-icon-light-icon, url("sun.svg"));
+  background-size: var(--dark-mode-toggle-icon-size, 1rem);
+  background-image: var(--dark-mode-toggle-light-icon, url("sun.svg"));
   box-sizing: border-box;
 }
 
-dark-mode-toggle.slider[mode="dark"]::part(toggleLabel) {
-  background-color: #4e5255;
-}
-
 dark-mode-toggle.slider[mode="dark"]::part(toggleLabel)::before {
   left: calc(100% - var(--dark-mode-toggle-icon-size, 1rem) * 1.75);
   border-color: #000;