FLUID-5536: Removed slider specific styling from prefsFramework

fluid-project · Feb 9, 2017 · 76f0ce5 · 76f0ce5
1 parent d43104a
commit 76f0ce5
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 131 deletions.
diff --git a/examples/framework/preferences/shared/css/preferences.css b/examples/framework/preferences/shared/css/preferences.css
@@ -22,12 +22,18 @@
 .mpe-slider {
     padding: 1.5em 0;
 }
-.fl-prefsEditor .mpe-slider .fl-slider {
-    margin-top: 1em;
+
+.mpe-radioRow {
+    padding-top: 0.5rem;
+}
+
+.mpe-radioRow label {
+    display: inline;
 }
 
 .mpe-increasing-magPos {
     float: right;
+    padding-left: 1rem;
 }
 
 .mpe-speakIncrease ul.fl-inputs {

diff --git a/examples/framework/preferences/shared/html/SeparatedPanelPrefsEditorFrame.html b/examples/framework/preferences/shared/html/SeparatedPanelPrefsEditorFrame.html
@@ -9,6 +9,7 @@
         <!-- Component styles -->
         <link rel="stylesheet" type="text/css" href="../../../../../src/framework/preferences/css/PrefsEditor.css" />
         <link rel="stylesheet" type="text/css" href="../../../../../src/framework/preferences/css/SeparatedPanelPrefsEditorFrame.css" />
+        <link rel="stylesheet" type="text/css" href="../../../../../src/components/textfieldControl/css/TextfieldSlider.css" />
 
         <link rel="stylesheet" type="text/css" href="../css/preferences.css" />
 

diff --git a/examples/framework/preferences/shared/html/slider-template.html b/examples/framework/preferences/shared/html/slider-template.html
@@ -1,9 +1,7 @@
-<div class="mpe-slider">
+<div>
     <label class="mpe-slider-label"></label>
-    <div class="fl-inputs">
-        <div class="fl-force-left">
-            <input class="flc-textfieldSlider-slider fl-force-left fl-slider fl-slider-horz" />
-        </div>
-        <div class="fl-slider-input"><input id="min-val" class="flc-textfieldSlider-field" type="text" /> <span class="mpe-multiplier"></span></div>
+    <div class="mpe-slider">
+        <input aria-labelledby="text-size-label" class="flc-textfieldSlider-slider fl-slider">
+        <input aria-labelledby="text-size-label" class="flc-textfieldSlider-field fl-textfieldSlider-textField" type="text">
     </div>
 </div>
diff --git a/src/framework/preferences/css/stylus/PrefsEditor.styl b/src/framework/preferences/css/stylus/PrefsEditor.styl
@@ -105,99 +105,6 @@
         margin-left: 25px;
     }
 
-    // Sliders
-    .fl-slider {
-        float:left;
-        border: 1px solid #b3b3b3;
-        border-radius: 0.3em;
-        background-color: #dad6d3;
-        padding: 0;
-        position: relative;
-        height: 1em;
-        margin-top: 0;
-        margin-left: 0.8em;
-        margin-right: 1.8em;
-
-        a, .fl-slider-handle {
-            position:absolute;
-            display:block;
-            top:0;
-            left:0;
-            margin-top: -0.4em;
-            margin-left: -0.4em;
-            slider-thumb-common();
-
-            &:active {
-                outline: none;
-            }
-        }
-    }
-
-    // Native slider appearance
-    // based on techniques described at https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
-    // and http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
-
-    input[type=range].fl-slider {
-        -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-        // Native slider thumb appearance
-        &::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            slider-thumb-common();
-        }
-
-        &::-moz-range-thumb {
-            slider-thumb-common();
-        }
-
-        &::-ms-thumb {
-            slider-thumb-common();
-        }
-        // Native slider track appearance
-        // We hide any inherent track styling and let the styles
-        // set with the fl-slider class be used without interference
-        // from native widget styling
-
-        &::-webkit-slider-runnable-track {
-            slider-native-track-common();
-        }
-
-        &::-moz-range-track {
-            slider-native-track-common();
-        }
-
-        &::-ms-track {
-            slider-native-track-common();
-            color: transparent;
-        }
-
-        &::-ms-fill-lower {
-            background: none;
-            background-color: transparent;
-            border: 0;
-        }
-
-        &::-ms-fill-upper {
-            background: none;
-            background-color: transparent;
-            border: 0;
-        }
-
-    }
-
-    .fl-slider-horz {
-        width: 8.8em;
-    }
-
-    .fl-slider-input {
-        margin-left: 1em;
-        float:left;
-    }
-
-    .fl-slider-range {
-        background-color: #62bb3d;
-        height: 100%;
-    }
-
     .fl-inputs div[class*='fl-icon-'] {
         font-size: 1.5em;
         margin-top: -0.15em;

diff --git a/src/framework/preferences/css/stylus/utils/Themes.styl b/src/framework/preferences/css/stylus/utils/Themes.styl
@@ -24,12 +24,6 @@ themes = {
     }
 }
 
-slider-thumb-common-contrastTheme() {
-    background: none;
-    background-color: fColor;
-    box-shadow: none !important;
-}
-
 build-themes-prefsEditor(contrastThemes) {
 
     for themeName in contrastThemes {
@@ -39,30 +33,6 @@ build-themes-prefsEditor(contrastThemes) {
 
         {themeName} {
             .fl-prefsEditor {
-                // slider
-                & .fl-slider {
-                    background: none;
-                    background-color: fColor;
-
-                    a, a:hover,
-                    .fl-slider-handle, .fl-slider-handle:hover {
-                        slider-thumb-common-contrastTheme();
-                    }
-                }
-
-                input[type=range].fl-slider {
-                    background: none;
-                    background-color: fColor;
-                    &::-webkit-slider-thumb {
-                        slider-thumb-common-contrastTheme();
-                    }
-                    &::-moz-range-thumb {
-                        slider-thumb-common-contrastTheme();
-                    }
-                    &::-ms-thumb {
-                        slider-thumb-common-contrastTheme();
-                    }
-                }
 
                 // ON/OFF switch
                 .fl-prefsEditor-switch,