[libadwaita/wip/exalm/stylesheet2: 50/103] stylesheet: Nest GtkScale style more

[Alexander Mikhaylenko <alexm src gnome org>]

commit d2dbcd1a8d3c8fbd673f76df49d2447eb44e7821
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Apr 8 22:12:32 2021 +0500

    stylesheet: Nest GtkScale style more

 src/stylesheet/_common.scss | 209 +++++++++++++++++++++-----------------------
 1 file changed, 100 insertions(+), 109 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index bef8a39..e966c76 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -2245,9 +2245,6 @@ scrollbar {
  * Switch *
  **********/
 switch {
-  font-weight: bold;
-  font-size: smaller;
-
   // similar to the .scale
   border: 1px solid $borders_color;
   border-radius: 14px;
@@ -2508,19 +2505,81 @@ scale {
 
   @include focus-ring("> trough", $offset: 10px);
 
-  // those are inside the trough node, I need them to show their own border over the trough one, so negative 
margin
   > trough {
     transition: $focus_transition;
+    @extend %scale_trough;
 
+    // those are inside the trough node, I need them to show their own border over the trough one, so 
negative margin
     > fill,
     > highlight { margin: -1px; }
 
-  // the slider is inside the trough, so to have make it bigger there's a negative margin
+    // the colored part of the backing bit
+    > highlight { @extend %scale_highlight; }
+
+    // this is another differently styled part of the backing bit, the most relevant use case is for example
+    // in media player to indicate how much video stream as been cached
+    > fill {
+      @extend %scale_trough;
+
+      &:disabled {
+        border-color: transparent;
+        background-color: transparent;
+      }
+
+      // OSD
+      .osd & {
+        background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+        &:disabled {
+         border-color: transparent;
+         background-color: transparent;
+        }
+      }
+    }
 
     > slider {
+      @include button(normal);
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100%;
+      transition: $button_transition;
+      transition-property: background, border, box-shadow;
+
+      // the slider is inside the trough, so to have make it bigger there's a negative margin
       min-height: 18px;
       min-width: 18px;
       margin: -9px;
+
+      &:hover { @include button(hover); }
+
+      &:active { border-color: $selected_borders_color; }
+
+      &:disabled { @include button(insensitive); }
+
+      // ...on selected list rows
+      row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
+
+      // OSD
+      .osd & {
+        @include button(osd);
+        border-color: darken($osd_borders_color, 3%);
+        background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+        &:hover {
+          @include button(osd-hover);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+
+        &:active {
+          @include button(osd-active);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+
+        &:disabled {
+          @include button(osd-insensitive);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+      }
     }
   }
 
@@ -2538,82 +2597,14 @@ scale {
       min-width: 16px;
     }
 
-    // to make the trough grow in fine-tune mode
-    > trough > slider { margin: -6px; }
-
-    > trough > fill,
-    > trough > highlight,
     > trough {
-      border-radius: 5px;
-    }
-  }
-
-  // the backing bit
-  > trough {
-    @extend %scale_trough;
-  }
-
-  // the colored part of the backing bit
-  > trough > highlight { @extend %scale_highlight; }
-
-  // this is another differently styled part of the backing bit, the most relevant use case is for example
-  // in media player to indicate how much video stream as been cached
-  > trough > fill {
-    @extend %scale_trough;
-
-
-    &:disabled {
-      border-color: transparent;
-      background-color: transparent;
-    }
+      // to make the trough grow in fine-tune mode
+      > slider { margin: -6px; }
 
-    // OSD
-    .osd & {
-      background-color: mix($osd_fg_color, $osd_borders_color, 25%);
-
-      &:disabled {
-       border-color: transparent;
-       background-color: transparent;
-      }
-    }
-  }
-
-  > trough > slider {
-    @include button(normal);
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 100%;
-    transition: $button_transition;
-    transition-property: background, border, box-shadow;
-
-    &:hover { @include button(hover); }
-
-    &:active { border-color: $selected_borders_color; }
-
-    &:disabled { @include button(insensitive); }
-
-    // ...on selected list rows
-    row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
-
-    // OSD
-    .osd & {
-      @include button(osd);
-      border-color: darken($osd_borders_color, 3%);
-      background-color: opacify($osd_bg_color, 1); // solid background needed here
-
-      &:hover {
-        @include button(osd-hover);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-      }
-
-      &:active {
-        @include button(osd-active);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-      }
-
-      &:disabled {
-        @include button(osd-insensitive);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
+      > fill,
+      > highlight,
+      & {
+        border-radius: 5px;
       }
     }
   }
@@ -2639,7 +2630,7 @@ scale {
     > value.left  { margin-right: 9px; }
     > value.right { margin-left: 9px; }
 
-    &.fine-tune >marks {
+    &.fine-tune > marks {
       &.top { margin-top: 3px; }
       &.bottom { margin-bottom: 3px; }
 
@@ -2663,7 +2654,7 @@ scale {
     > value.top    { margin-bottom: 9px; }
     > value.bottom { margin-top: 9px; }
 
-    &.fine-tune >marks {
+    &.fine-tune > marks {
       &.top { margin-left: 3px; }
       &.bottom { margin-right: 3px; }
 
@@ -2776,13 +2767,13 @@ scale {
         background-position: 0 -3px;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-      }
 
-      > trough > slider {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-bottom: -15px;
-            margin-top: 6px;
+        > slider {
+          &:dir(ltr), &:dir(rtl) { // specificity bump
+            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+              margin-bottom: -15px;
+              margin-top: 6px;
+            }
           }
         }
       }
@@ -2797,12 +2788,12 @@ scale {
           background-position: 3px 0;
           border-bottom-right-radius: 0;
           border-top-right-radius: 0;
-        }
 
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-left: -15px;
-            margin-right: 6px;
+          > slider {
+            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+              margin-left: -15px;
+              margin-right: 6px;
+            }
           }
         }
       }
@@ -2815,12 +2806,12 @@ scale {
           background-position: -3px 0;
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
-        }
 
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-right: -15px;
-            margin-left: 6px;
+          > slider {
+            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+              margin-right: -15px;
+              margin-left: 6px;
+            }
           }
         }
       }
@@ -2834,11 +2825,11 @@ scale {
           > trough {
             padding-bottom: 7px;
             background-position: 0 -6px;
-          }
 
-          > trough > slider {
-            margin-bottom: -15px;
-            margin-top: 6px;
+            > slider {
+              margin-bottom: -15px;
+              margin-top: 6px;
+            }
           }
         }
       }
@@ -2850,11 +2841,11 @@ scale {
           > trough {
             padding-left: 7px;
             background-position: 6px 0;
-          }
 
-          > trough > slider {
-            margin-left: -15px;
-            margin-right: 6px;
+            > slider {
+              margin-left: -15px;
+              margin-right: 6px;
+            }
           }
         }
 
@@ -2864,11 +2855,11 @@ scale {
           > trough {
             padding-right: 7px;
             background-position: -6px 0;
-          }
 
-          > trough > slider {
-            margin-right: -15px;
-            margin-left: 6px;
+            > slider {
+              margin-right: -15px;
+              margin-left: 6px;
+            }
           }
         }
       }