fix(limel-slider): use floating label styles

Lundalogik · Sep 10, 2019 · 511d099 · 511d099
1 parent d3acdcc
commit 511d099
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
@@ -1,4 +1,5 @@
 @import '@lime-material/slider/mdc-slider';
+@import "@lime-material/floating-label/mdc-floating-label";
 
 $colorGrey: #999999;
 
@@ -22,12 +23,7 @@ $colorGrey: #999999;
 
 
 .slider__label {
-    color: $colorGrey;
-    display: inline-block;
-    font-size: 1.2rem;
-    overflow: hidden;
-    text-overflow: clip;
-    width: 100%;
+    padding-left: 2rem;
 }
 
 .slider__content {

diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
@@ -60,7 +60,9 @@ export class Slider {
     public render() {
         return (
             <div class="slider">
-                <label class="slider__label">{this.label}</label>
+                <label class="slider__label mdc-floating-label mdc-floating-label--float-above">
+                    {this.label}
+                </label>
                 <div class="slider__content">
                     <div class="slider__content-range-container">
                         <span class="slider__content-min-label">