Styles/Scale: style values (#829)

Author: danirabbit

demo/Views/ControlsView.vala

@@ -127,6 +127,7 @@ public class ControlsView : DemoPage {
         var scale_header = new Granite.HeaderLabel ("Scale");
 
         var hscale = new Gtk.Scale.with_range (HORIZONTAL, 0, 1, 0.01) {
+            draw_value = true,
             hexpand = true
         };
         hscale.adjustment.value = 0.5;

lib/Styles/Gtk/Scale.scss

@@ -30,6 +30,11 @@ scale {
         min-width: $trough-width;
     }
 
+    value {
+        @extend .small-label;
+        @extend .numeric;
+    }
+
     &.dragging {
         slider {
             transform: scale(1.1);
@@ -55,6 +60,41 @@ scale {
         slider {
             margin: $slider-margin -1px;
         }
+
+        value {
+            // Padding + text height + margin
+            $value-osd-height: (rem(6px) * 2) + 0.85rem + rem(6px);
+
+            &.bottom,
+            &.top {
+                @extend .osd;
+
+                opacity: 0;
+                transform: scale(0.9);
+                transition:
+                    opacity duration("in-place") easing(),
+                    transform duration("collapse") easing();
+            }
+
+            &.bottom {
+                margin-bottom: $value-osd-height * -1;
+                margin-top: rem(3px);
+            }
+
+            &.top {
+                margin-bottom: rem(3px);
+                margin-top: $value-osd-height * -1;
+            }
+        }
+
+        &.dragging value {
+            &.bottom,
+            &.top {
+                opacity: 1;
+                transform: scale(1);
+                transition: transform duration("expand") easing("ease-out-back");
+            }
+        }
     }
 
     &.vertical {

lib/Styles/_label.scss

@@ -40,7 +40,7 @@
 
 // Intended to match the Pango size of `<small>` and `size='smaller'`
 .small-label {
-    font-size: 0.85em;
+    font-size: 0.85rem;
 }
 
 .error {