FLUID-5536: In progress styling

fluid-project · Feb 6, 2017 · 9f02f1c · 9f02f1c
1 parent c5df0b5
commit 9f02f1c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/demos/textfieldControl/index.html b/demos/textfieldControl/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" type="text/css" href="../lib/foundation/css/foundation.css" />
     <link rel="stylesheet" type="text/css" href="../../src/framework/core/css/fluid.css" />
     <link rel="stylesheet" type="text/css" href="../../src/components/textfieldControl/css/TextfieldSlider.css" />
+    <link rel="stylesheet" type="text/css" href="../../src/components/textfieldControl/css/textfieldStepper.css" />
     <link rel="stylesheet" type="text/css" href="../../src/components/overviewPanel/css/OverviewPanel.css" />
     <link rel="stylesheet" type="text/css" href="css/textfieldControlDemo.css" />
 
@@ -65,9 +66,11 @@ <h2>Textfield Slider</h2>
 
             <h2>Textfield Stepper</h2>
             <div class="flc-textfieldStepper">
-                <button class="flc-textfieldStepper-decrease">-</button>
-                <input aria-labelledby="text-size-label" class="flc-textfieldStepper-field" type="text">
-                <button class="flc-textfieldStepper-increase">+</button>
+                <span class="demo-smallIcon">A</span>
+                <button class="flc-textfieldStepper-decrease fl-textfieldStepper-button"><span>-</span></button>
+                <input aria-labelledby="text-size-label" class="flc-textfieldStepper-field fl-textfieldStepper-textField" type="text">
+                <button class="flc-textfieldStepper-increase fl-textfieldStepper-button"><span>+</span></button>
+                <span class="demo-largeIcon">A</span>
             </div>
 
             <script type="text/javascript">
@@ -76,11 +79,11 @@ <h2>Textfield Stepper</h2>
                         "aria-label": "Textfield Stepper"
                     },
                     model: {
-                        value: 7
+                        value: 100
                     },
                     range: {
                         min: 0,
-                        max: 10
+                        max: 100
                     }
                 });
             </script>

diff --git a/src/components/textfieldControl/css/TextfieldStepper.css b/src/components/textfieldControl/css/TextfieldStepper.css
@@ -0,0 +1,34 @@
+.fl-textfieldStepper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Textfield Styling */
+
+.fl-textfieldStepper .fl-textfieldStepper-textField {
+    margin: 0 -0.5rem;
+    width: 7rem;
+    text-align: center;
+}
+
+/* Textfield Button Styling */
+
+.fl-textfieldStepper .fl-textfieldStepper-button {
+    border: 2px solid #000000;
+    border-radius: 0.4rem;
+    height: 2.4375rem;
+    width: 2.4375rem;
+    margin: 0 1rem;
+}
+
+/* enlarge text inside of button, and position in the middle */
+.fl-textfieldStepper .fl-textfieldStepper-button > * {
+    font-size: 3.5rem;
+    display: inline-block;
+    margin-top: -1rem;
+}
+
+.fl-textfieldStepper .fl-textfieldStepper-button:disabled {
+    opacity: 0.3;
+}
diff --git a/src/components/textfieldControl/js/TextfieldStepper.js b/src/components/textfieldControl/js/TextfieldStepper.js
@@ -34,6 +34,9 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
             increaseButton: ".flc-textfieldStepper-increase",
             decreaseButton: ".flc-textfieldStepper-decrease"
         },
+        styles: {
+            container: "fl-textfieldStepper fl-focus"
+        },
         components: {
             increaseButton: {
                 type: "fluid.textfieldStepper.button",
@@ -88,6 +91,13 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
                 args: ["{that}", -1]
             }
         },
+        listeners: {
+            "onCreate.addContainerStyle": {
+                "this": "{that}.container",
+                method: "addClass",
+                args: ["{that}.options.styles.container"]
+            }
+        },
         model: {
             value: null
         },