Fixed float labels for all HTML5 input elements plus Selectize inputs

dpgmediamagazines · Feb 26, 2018 · 862932f · 862932f
1 parent 459e0fb
commit 862932f
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 83 deletions.
diff --git a/arctic/static/arctic/dist/assets/css/arctic.css b/arctic/static/arctic/dist/assets/css/arctic.css
diff --git a/arctic/static/arctic/dist/assets/js/app.js b/arctic/static/arctic/dist/assets/js/app.js
diff --git a/arctic/static/arctic/src/assets/js/components/float_label.js b/arctic/static/arctic/src/assets/js/components/float_label.js
@@ -21,27 +21,13 @@ $(document).ready(function() {
     $('.float-label .selectize-input.has-items').each(function() {
         // Check if float label input is not empty, if so then add some CSS
             $(this).css({
-                paddingTop: '1.2rem',
-                paddingBottom: '.4rem'
+                paddingTop: '1.1rem',
+                paddingBottom: '.1rem'
             });
 
             $(this).parent().next('label').css({
                 top: '.3rem',
                 fontSize: '75%'
             });
     });
-    $('.float-label .selectize-input.has-items').blur(function() {
-        // Check if float label input is not empty, if so then add some CSS
-        if ($(this).val().length > 0) {
-            $(this).css({
-                paddingTop: '1.2rem',
-                paddingBottom: '.4rem'
-            });
-
-            $(this).next('label').css({
-                top: '.3rem',
-                fontSize: '75%'
-            });
-        }
-    });
 });
diff --git a/arctic/static/arctic/src/assets/js/components/widgets.js b/arctic/static/arctic/src/assets/js/components/widgets.js
@@ -36,7 +36,18 @@ $(document).ready(function() {
         $(this).selectize({
             allowEmptyOption: true,
             highlight: false,
-            plugins: ['remove_button']
+            plugins: ['remove_button'],
+            onFocus: function() {
+                $(instance).next().next().css({
+                    top: '.3rem',
+                    fontSize: '75%'
+                });
+            },
+            onBlur: function() {
+                if ($(instance).next().find('.item').length == 0) {
+                    $(instance).next().next().removeAttr('style');
+                }
+            }
         });
     });
 
@@ -46,22 +57,15 @@ $(document).ready(function() {
             delimiter: ',',
             persist: false,
             plugins: ['remove_button'],
-            onDropdownOpen: function($dropdown) {
-                if ( $('form').hasClass('float-label') ) {
-                    $dropdown.parent().next('label').css({
-                        top: '.3rem',
-                        fontSize: '75%'
-                    });
-                }
+            onFocus: function() {
+                $(instance).next().next().css({
+                    top: '.3rem',
+                    fontSize: '75%'
+                });
             },
-            onDropdownClose: function($dropdown) {
-                if ( $('form').hasClass('float-label') ) {
-                    if (!$(instance).find('.has-items')) {
-                        $dropdown.parent().next('label').css({
-                            top: '.75rem',
-                            fontSize: '100%'
-                        });
-                    }
+            onBlur: function() {
+                if ($(instance).next().find('.item').length == 0) {
+                    $(instance).next().next().removeAttr('style');
                 }
             },
             create: function(input) {
@@ -95,18 +99,14 @@ $(document).ready(function() {
                 });
             },
             onFocus: function() {
-                //alert($(instance).next('label'));
-                $(instance).next('label').css({
+                $(instance).next().next().css({
                     top: '.3rem',
                     fontSize: '75%'
                 });
             },
             onBlur: function() {
-                if ( $(instance).find('.item').length == 0 ) {
-                    $(instance).next('label').css({
-                        top: '.75rem',
-                        fontSize: '100%'
-                    });
+                if ($(instance).next().find('.item').length == 0) {
+                    $(instance).next().next().removeAttr('style');
                 }
             },
         });

diff --git a/arctic/static/arctic/src/assets/scss/partials/_float-label.scss b/arctic/static/arctic/src/assets/scss/partials/_float-label.scss
@@ -56,6 +56,15 @@
                 padding-top: 18px;
                 padding-bottom: 3px;
             }
+
+            &[type=range] {
+                padding-top: 4px;
+                margin-top: 18px;
+            }
+
+            &[type=range] + label {
+                margin-top: -18px
+            }
         }
 
         label {
@@ -110,7 +119,7 @@
             input[type=text] {
                 height: 1px;
                 padding: .8rem 0 .4rem;
-                font-size: 12px;
+                //font-size: 12px;
             }
         }
     }
@@ -121,12 +130,17 @@
     }
 
     .selectize-control.single {
-
         .item {
             padding-bottom: .2rem;
         }
     }
 
+
+    .selectize-control.single .selectize-input {
+        &:after, &.dropdown-active:after {
+            margin-top: 5px;
+        }
+    }
 
     // support for SimpleMDE editor with float labels
     .form-group div.editor-statusbar+label {

diff --git a/arctic/static/arctic/src/assets/scss/partials/_forms.scss b/arctic/static/arctic/src/assets/scss/partials/_forms.scss
@@ -183,6 +183,14 @@ label {
     }
 }
 
+.arctic_toggle_form_button {
+    &:focus, &.btn-secondary:focus {
+        outline-style:none;
+        box-shadow: none;
+        border-color:transparent;
+    }
+}
+
 // Restore default list and quote stylings in form-group to display correct
 // styling when using rich text editors.