style: lint css

RedHat-UX · Sep 17, 2024 · 2bce4f4 · 2bce4f4
1 parent 4b89248
commit 2bce4f4
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 71 deletions.
diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
@@ -520,23 +520,23 @@ rh-menu > button:focus {
           margin: 0 auto;
         }
       }
-    }
 
-    &.compact #toolbar {
-      padding-inline-end: var(--_player-padding);
-    }
+      & #toolbar {
+        justify-content: center;
+        width: auto;
+        padding: var(--_player-padding) calc((100% - var(--_player-width) - 2px) / 2);
+      }
 
-    &.compact-wide #toolbar {
-      justify-content: center;
-      width: auto;
-      padding: var(--_player-padding) calc((100% - var(--_player-width) - 2px) / 2);
+      & #time-tooltip,
+      & #time {
+        width: var(--_time-slider-width);
+        flex: 0 0 var(--_time-slider-width);
+        margin-inline-start: var(--rh-space-md, 8px);
+      }
     }
 
-    &.compact-wide #time-tooltip,
-    &.compact-wide #time {
-      width: var(--_time-slider-width);
-      flex: 0 0 var(--_time-slider-width);
-      margin-inline-start: var(--rh-space-md, 8px);
+    &.compact #toolbar {
+      padding-inline-end: var(--_player-padding);
     }
 
     &:not(.mini) #mute-tooltip {
@@ -602,6 +602,8 @@ rh-menu > button:focus {
         flex: 0 0 454px;
       }
 
+      /* this will complain either way */
+      /* stylelint-disable-next-line no-descending-specificity */
       & #panel {
         padding-block-start: var(--rh-length-md, 8px);
       }
@@ -694,26 +696,6 @@ rh-menu > button:focus {
       --_player-width: 712px;
       --_time-slider-base: 314px;
 
-      &.expanded {
-        & #poster {
-          display: inline-block;
-          padding-inline-end: var(--rh-length-lg, 16px);
-
-          & > img {
-            margin-inline-end: 0;
-          }
-        }
-
-        & #full-title {
-          flex: 0 0 calc(100% - 168px);
-        }
-
-        &.rtl #poster > img {
-          right: calc(-184px - var(--_player-padding));
-          left: unset;
-        }
-      }
-
       &:not(.expanded) {
         --_poster-size: 184px;
 
@@ -734,6 +716,26 @@ rh-menu > button:focus {
           }
         }
       }
+
+      &.expanded {
+        & #poster {
+          display: inline-block;
+          padding-inline-end: var(--rh-length-lg, 16px);
+
+          & > img {
+            margin-inline-end: 0;
+          }
+        }
+
+        & #full-title {
+          flex: 0 0 calc(100% - 168px);
+        }
+
+        &.rtl #poster > img {
+          right: calc(-184px - var(--_player-padding));
+          left: unset;
+        }
+      }
     }
   }
 }
diff --git a/elements/rh-switch/rh-switch.css b/elements/rh-switch/rh-switch.css
@@ -21,6 +21,43 @@
   --_switch-track-background-color: var(--rh-color-gray-60, #4d4d4d);
   --_switch-handle-color: var(--rh-color-surface-lightest, #ffffff);
 
+  #switch {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+    position: relative;
+    width: var(--_switch-width);
+    height: var(--_switch-height);
+    border-radius: var(--rh-border-radius-pill, 64px);
+
+    /* track */
+    &:before {
+      content: '';
+      display: flex;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--_switch-track-background-color);
+    }
+
+    /* handle */
+    &:after {
+      content: '';
+      height: var(--_switch-handle-size);
+      width: var(--_switch-handle-size);
+      border-radius: var(--rh-border-radius-pill, 64px);
+      transform-origin: center;
+      z-index: 0;
+      background-color: var(--_switch-handle-color);
+      margin-inline: var(--_margin-inline);
+      translate: 0%;
+      transition: translate 0.25s ease 0s;
+    }
+  }
+
   & .message {
     color: var(--rh-color-text-secondary);
   }
@@ -68,44 +105,7 @@ rh-icon {
   z-index: 1;
 }
 
-#switch {
-  align-items: center;
-  display: inline-flex;
-  flex-shrink: 0;
-  position: relative;
-  width: var(--_switch-width);
-  height: var(--_switch-height);
-  border-radius: var(--rh-border-radius-pill, 64px);
-
-  /* track */
-  &:before {
-    content: '';
-    display: flex;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--_switch-track-background-color);
-  }
-
-  /* handle */
-  &:after {
-    content: '';
-    height: var(--_switch-handle-size);
-    width: var(--_switch-handle-size);
-    border-radius: var(--rh-border-radius-pill, 64px);
-    transform-origin: center;
-    z-index: 0;
-    background-color: var(--_switch-handle-color);
-    margin-inline: var(--_margin-inline);
-    translate: 0%;
-    transition: translate 0.25s ease 0s;
-  }
-}
-
-:host(:is(:focus, :focus-within)) #switch {
+:host(:is(:focus, :focus-within)) #container #switch {
   outline: var(--rh-border-width-md, 2px) solid var(--rh-color-border-interactive);
   outline-offset: var(--rh-space-sm, 6px);
 }