From 991fa4c5200ea6927520e38524ff774a1830d066 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Mon, 7 Dec 2015 11:40:42 -0600 Subject: [PATCH] #755 checkpoint reviewing form inputs --- js/src/autofill.js | 6 +- js/src/baseInput.js | 6 +- js/src/baseToggle.js | 4 +- js/src/bootstrapMaterialDesign.js | 23 +- js/src/checkbox.js | 6 +- js/src/checkboxInline.js | 6 +- js/src/file.js | 6 +- js/src/old/es6Template.js | 6 +- js/src/radio.js | 6 +- js/src/radioInline.js | 6 +- js/src/ripples.js | 8 +- js/src/select.js | 6 +- js/src/switch.js | 6 +- js/src/text.js | 6 +- js/src/textarea.js | 6 +- scss/includes/_bootstrap-material-design.scss | 6 +- scss/includes/_form.scss | 28 -- scss/includes/{_inputs.scss => _forms.scss} | 279 ++++++++---------- scss/includes/_input-group.scss | 33 +++ scss/includes/_navbar.scss | 4 +- scss/includes/{ripples.scss => _ripples.scss} | 2 +- scss/includes/_variables.scss | 3 +- scss/includes/mixins/_variations.scss | 2 +- scss/includes/variables/_forms.scss | 44 +++ 24 files changed, 272 insertions(+), 236 deletions(-) delete mode 100644 scss/includes/_form.scss rename scss/includes/{_inputs.scss => _forms.scss} (53%) create mode 100644 scss/includes/_input-group.scss rename scss/includes/{ripples.scss => _ripples.scss} (91%) create mode 100644 scss/includes/variables/_forms.scss diff --git a/js/src/autofill.js b/js/src/autofill.js index 88feb7bf..96ead153 100644 --- a/js/src/autofill.js +++ b/js/src/autofill.js @@ -19,8 +19,8 @@ const Autofill = (($) => { */ class Autofill { - constructor(element, config) { - this.$element = $(element) + constructor($element, config) { + this.$element = $element this.config = $.extend({}, Default, config) this._watchLoading() @@ -84,7 +84,7 @@ const Autofill = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Autofill(this, config) + data = new Autofill($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/baseInput.js b/js/src/baseInput.js index d149117b..a0967c67 100644 --- a/js/src/baseInput.js +++ b/js/src/baseInput.js @@ -45,8 +45,8 @@ const BaseInput = (($) => { * @param config * @param properties - anything that needs to be set as this[key] = value. Works around the need to call `super` before using `this` */ - constructor(element, config, properties = {}) { - this.$element = $(element) + constructor($element, config, properties = {}) { + this.$element = $element this.config = $.extend({}, Default, config) // set properties for use in the constructor initialization @@ -68,6 +68,8 @@ const BaseInput = (($) => { this.$formGroup = this.findFormGroup(this.config.formGroup.required) // Will add mdb-form-group to form-group or create an mdb-form-group + // Performance Note: for those forms that are really performance driven, create the markup with the .mdb-form-group to avoid + // rendering changes once added. this.$mdbFormGroup = this.resolveMdbFormGroup() // Signal to the mdb-form-group that a form-control-* variation is being used diff --git a/js/src/baseToggle.js b/js/src/baseToggle.js index fc8b5bed..75f6af81 100644 --- a/js/src/baseToggle.js +++ b/js/src/baseToggle.js @@ -21,12 +21,12 @@ const BaseToggle = (($) => { */ class BaseToggle extends BaseInput { - constructor(element, config, properties) { + constructor($element, config, properties) { // properties = {inputType: checkbox, outerClass: checkbox-inline} // '.checkbox|switch|radio > label > input[type=checkbox|radio]' // '.${this.outerClass} > label > input[type=${this.inputType}]' - super(element, $.extend({}, Default, config), properties) + super($element, $.extend({}, Default, config), properties) this.$element.after(this.config.template) } diff --git a/js/src/bootstrapMaterialDesign.js b/js/src/bootstrapMaterialDesign.js index f5f6eb0c..ebb8bdc3 100644 --- a/js/src/bootstrapMaterialDesign.js +++ b/js/src/bootstrapMaterialDesign.js @@ -37,13 +37,11 @@ const BootstrapMaterialDesign = (($) => { ] }, text: { - selector: ['input[type=text]'] + // omit inputs we have specialized components to handle + selector: [`input[type!='checkbox'][type!='radio'][type!='file']`] }, - textarea: { - selector: ['textarea'] - }, - select: { - selector: ['select'] + file: { + selector: 'input[type=file]' }, checkbox: { selector: '.checkbox > label > input[type=checkbox]' @@ -60,8 +58,11 @@ const BootstrapMaterialDesign = (($) => { radioInline: { selector: 'label.radio-inline > input[type=radio]' }, - file: { - selector: 'input[type=file]' + textarea: { + selector: ['textarea'] + }, + select: { + selector: ['select'] }, autofill: { selector: 'body' @@ -90,8 +91,8 @@ const BootstrapMaterialDesign = (($) => { */ class BootstrapMaterialDesign { - constructor(element, config) { - this.$element = $(element) + constructor($element, config) { + this.$element = $element this.config = $.extend({}, Default, config) let $document = $(document) @@ -149,7 +150,7 @@ const BootstrapMaterialDesign = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new BootstrapMaterialDesign(this, config) + data = new BootstrapMaterialDesign($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/checkbox.js b/js/src/checkbox.js index 88f4ee79..c4692662 100644 --- a/js/src/checkbox.js +++ b/js/src/checkbox.js @@ -29,8 +29,8 @@ const Checkbox = (($) => { */ class Checkbox extends BaseToggle { - constructor(element, config, properties = {inputType: NAME, outerClass: NAME}) { - super(element, $.extend({ + constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) { + super($element, $.extend({ invalidComponentMatches: [File, Radio, Text, Textarea, Select] }, Default, config), properties) } @@ -68,7 +68,7 @@ const Checkbox = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Checkbox(this, config) + data = new Checkbox($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/checkboxInline.js b/js/src/checkboxInline.js index d65f2181..1cc0eaa0 100644 --- a/js/src/checkboxInline.js +++ b/js/src/checkboxInline.js @@ -21,8 +21,8 @@ const CheckboxInline = (($) => { */ class CheckboxInline extends Checkbox { - constructor(element, config, properties = {inputType: 'checkbox', outerClass: 'checkbox-inline'}) { - super(element, $.extend({}, Default, config), properties) + constructor($element, config, properties = {inputType: 'checkbox', outerClass: 'checkbox-inline'}) { + super($element, $.extend({}, Default, config), properties) } dispose() { @@ -58,7 +58,7 @@ const CheckboxInline = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new CheckboxInline(this, config) + data = new CheckboxInline($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/file.js b/js/src/file.js index cf901637..8a10fe8f 100644 --- a/js/src/file.js +++ b/js/src/file.js @@ -37,8 +37,8 @@ const File = (($) => { */ class File extends BaseInput { - constructor(element, config) { - super(element, $.extend({invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, Default, config)) + constructor($element, config) { + super($element, $.extend({invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, Default, config)) this.$mdbFormGroup.addClass(ClassName.IS_FILE) } @@ -111,7 +111,7 @@ const File = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new File(this, config) + data = new File($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/old/es6Template.js b/js/src/old/es6Template.js index aed29e1e..3e7ec2c7 100644 --- a/js/src/old/es6Template.js +++ b/js/src/old/es6Template.js @@ -22,8 +22,8 @@ const Foo = (($) => { */ class Foo { - constructor(element, config) { - this.$element = $(element) + constructor($element, config) { + this.$element = $element this.config = $.extend({}, Default, config) } @@ -49,7 +49,7 @@ const Foo = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Foo(this, config) + data = new Foo($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/radio.js b/js/src/radio.js index 6812f702..141fa4ec 100644 --- a/js/src/radio.js +++ b/js/src/radio.js @@ -28,8 +28,8 @@ const Radio = (($) => { */ class Radio extends BaseToggle { - constructor(element, config, properties = {inputType: NAME, outerClass: NAME}) { - super(element, $.extend({ + constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) { + super($element, $.extend({ invalidComponentMatches: [Checkbox, File, Switch, Text] }, Default, config), properties) } @@ -64,7 +64,7 @@ const Radio = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Radio(this, config) + data = new Radio($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/radioInline.js b/js/src/radioInline.js index a71fdb2b..3272260d 100644 --- a/js/src/radioInline.js +++ b/js/src/radioInline.js @@ -21,8 +21,8 @@ const RadioInline = (($) => { */ class RadioInline extends Radio { - constructor(element, config, properties = {inputType: 'radio', outerClass: 'radio-inline'}) { - super(element, $.extend({}, Default, config), properties) + constructor($element, config, properties = {inputType: 'radio', outerClass: 'radio-inline'}) { + super($element, $.extend({}, Default, config), properties) } dispose() { @@ -46,7 +46,7 @@ const RadioInline = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new RadioInline(this, config) + data = new RadioInline($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/ripples.js b/js/src/ripples.js index daacb2a8..960259df 100644 --- a/js/src/ripples.js +++ b/js/src/ripples.js @@ -45,8 +45,10 @@ const Ripples = (($) => { */ class Ripples { - constructor(element, config) { - this.$element = $(element) + constructor($element, config) { + this.$element = $element + + console.log(`Adding ripples to ${Util.describe(this.$element)}`) // eslint-disable-line no-console this.config = $.extend({}, Default, config) // attach initial listener @@ -273,7 +275,7 @@ const Ripples = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Ripples(this, config) + data = new Ripples($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/select.js b/js/src/select.js index 104bc859..e4fedfe4 100644 --- a/js/src/select.js +++ b/js/src/select.js @@ -29,8 +29,8 @@ const Select = (($) => { */ class Select extends Text { - constructor(element, config) { - super(element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Switch, Text, Textarea]}, Default, config)) + constructor($element, config) { + super($element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Switch, Text, Textarea]}, Default, config)) } dispose() { @@ -62,7 +62,7 @@ const Select = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Select(this, config) + data = new Select($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/switch.js b/js/src/switch.js index a9548db5..bc2687ef 100644 --- a/js/src/switch.js +++ b/js/src/switch.js @@ -23,8 +23,8 @@ const Switch = (($) => { */ class Switch extends Checkbox { - constructor(element, config) { - super(element, $.extend({}, Default, config), 'checkbox', NAME) + constructor($element, config) { + super($element, $.extend({}, Default, config), 'checkbox', NAME) // selector: '.switch > label > input[type=checkbox]' } @@ -46,7 +46,7 @@ const Switch = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Switch(this, config) + data = new Switch($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/text.js b/js/src/text.js index 8af457d8..1cc8ab90 100644 --- a/js/src/text.js +++ b/js/src/text.js @@ -31,8 +31,8 @@ const Text = (($) => { */ class Text extends BaseInput { - constructor(element, config) { - super(element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Select, Switch, Textarea]}, Default, config)) + constructor($element, config) { + super($element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Select, Switch, Textarea]}, Default, config)) // Initially mark as empty if (this.isEmpty()) { @@ -72,7 +72,7 @@ const Text = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Text(this, config) + data = new Text($element, config) $element.data(DATA_KEY, data) } }) diff --git a/js/src/textarea.js b/js/src/textarea.js index 071089ca..cba01c22 100644 --- a/js/src/textarea.js +++ b/js/src/textarea.js @@ -27,8 +27,8 @@ const Textarea = (($) => { */ class Textarea extends Text { - constructor(element, config) { - super(element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Text, Select, Switch]}, Default, config)) + constructor($element, config) { + super($element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Text, Select, Switch]}, Default, config)) } dispose() { @@ -60,7 +60,7 @@ const Textarea = (($) => { let data = $element.data(DATA_KEY) if (!data) { - data = new Textarea(this, config) + data = new Textarea($element, config) $element.data(DATA_KEY, data) } }) diff --git a/scss/includes/_bootstrap-material-design.scss b/scss/includes/_bootstrap-material-design.scss index 524b447c..438e8ded 100644 --- a/scss/includes/_bootstrap-material-design.scss +++ b/scss/includes/_bootstrap-material-design.scss @@ -11,8 +11,8 @@ @import 'checkboxes'; @import 'switch'; @import 'radios'; -@import 'inputs'; -@import 'form'; +@import 'forms'; +@import 'input-group'; @import 'lists'; @import 'navbar'; @import 'alerts'; @@ -25,4 +25,6 @@ @import 'dividers'; @import 'themes'; +@import 'ripples'; + @import 'plugins'; diff --git a/scss/includes/_form.scss b/scss/includes/_form.scss deleted file mode 100644 index 4c51f756..00000000 --- a/scss/includes/_form.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -//legend { -// border-bottom: 0; -//} -// -// -//.form-horizontal { -// -// // Consistent vertical alignment of radios and checkboxes -// .radio, -// .checkbox, -// .radio-inline, -// .checkbox-inline { -// padding-top: 0; -// } -// -// .radio { -// margin-bottom: 10px; -// } -// -// label { -// text-align: right; -// } -// -// label.control-label { -// margin: 0; -// } -//} diff --git a/scss/includes/_inputs.scss b/scss/includes/_forms.scss similarity index 53% rename from scss/includes/_inputs.scss rename to scss/includes/_forms.scss index 03e87d04..9b97c515 100644 --- a/scss/includes/_inputs.scss +++ b/scss/includes/_forms.scss @@ -1,64 +1,64 @@ // label variations .label { border-radius: $border-radius-small; - @include variations(unquote(".label"), unquote(""), background-color, $grey); + //@include variations(unquote(".label"), unquote(""), background-color, $grey); } // must be broken out for reuse - webkit selector breaks firefox -@mixin label-static($label-top, $static-font-size, $static-line-height){ +@mixin label-static($label-top, $static-font-size, $static-line-height) { label.control-label { top: $label-top; left: 0; // must repeat because the selector above is more specific than the general label sizing - font-size: $static-font-size; - line-height: $static-line-height; + //font-size: $static-font-size; + //line-height: $static-line-height; } } -@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){ +@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size) { .form-control { @include material-placeholder { - font-size: $placeholder-font-size; - line-height: $line-height; - color: $mdb-input-placeholder-color; - font-weight: 400; + //font-size: $placeholder-font-size; + //line-height: $line-height; + //color: $mdb-input-placeholder-color; + //font-weight: 400; + } -} // margin-bottom must be specified to give help-block vertical space. // $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together. - margin-bottom: $vertical-padding; + //margin-bottom: $vertical-padding; } // generic labels used anywhere in the form (not control-label) .checkbox label, .radio label, label { - font-size: $placeholder-font-size; - line-height: $line-height; - color: $mdb-input-placeholder-color; - font-weight: 400; + //font-size: $placeholder-font-size; + //line-height: $line-height; + //color: $mdb-input-placeholder-color; + //font-weight: 400; } // smaller focused or static size label.control-label { - font-size: $static-font-size; - line-height: $static-line-height; - color: $mdb-input-placeholder-color; - font-weight: 400; - margin: 16px 0 0 0; // std and lg + //font-size: $static-font-size; + //line-height: $static-line-height; + //color: $mdb-input-placeholder-color; + //font-weight: 400; + //margin: 16px 0 0 0; // std and lg } .help-block { - margin-top: 0; // allow the input margin to set-off the top of the help-block - font-size: $help-block-font-size; + //margin-top: 0; // allow the input margin to set-off the top of the help-block + //font-size: $help-block-font-size; } } -@mixin form-group-validation-state($name, $color){ +@mixin mdb-form-group-validation-state($name, $color) { &.#{$name} { // e.g. has-error .form-control { - box-shadow: none; + //box-shadow: none; // replaced with variable } &.is-focused .form-control { background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); @@ -70,7 +70,7 @@ } } -@mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){ +@mixin mdb-form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim) { $static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default; $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default; @@ -85,7 +85,7 @@ @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size); } - // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg + // this is inside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg @else { #{$parent} { @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size); @@ -93,20 +93,20 @@ // form-group padding-bottom // upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom, // so the form-control margin-bottom must also be expressed as form-group padding - padding-bottom: $vertical-padding; + //padding-bottom: $vertical-padding; // FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned - //margin: ($label-top-margin + $static-font-size) 0 0 0; - padding-top: ($label-top-margin + $static-font-size); + //margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below + //padding-top: ($label-top-margin + $static-font-size); // larger labels as placeholders &.label-floating, &.label-placeholder { label.control-label { top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding - font-size: $placeholder-font-size; - line-height: $line-height; + //font-size: $placeholder-font-size; + //line-height: $line-height; } } @@ -129,37 +129,44 @@ // // Reference http://www.google.com/design/spec/components/text-fields.html // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section -.form-control, -.form-group .form-control { +.form-control //, + //.mdb-form-group .form-control +{ border: 0; + // replaced with vars + //border-radius: 0; + //box-shadow: none; + //background-color: rgba(0, 0, 0, 0); + background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); background-size: 0 2px, 100% 1px; background-repeat: no-repeat; background-position: center bottom, center calc(100% - 1px); - background-color: rgba(0, 0, 0, 0); transition: background 0s ease-out; - float: none; - box-shadow: none; - border-radius: 0; + //float: none; // why? - // Placeholders and and labels-as-placeholders should look the same - @include material-placeholder { - color: $mdb-input-placeholder-color; - font-weight: 400; - -} - - - //&:textarea { // appears to be an invalid selector + //&:textarea { // height: 40px; //} - &[readonly], - &[disabled], - fieldset[disabled] & { - background-color: rgba(0, 0, 0, 0); + .mdb-form-group.is-focused & { + outline: none; + background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); + background-size: 100% 2px, 100% 1px; + //box-shadow: none; replaced with var + transition-duration: 0.3s; + + .text-input-decorator:after { + background-color: $brand-primary; + } } + //&[readonly], + //&[disabled], + //fieldset[disabled] & { + // background-color: rgba(0, 0, 0, 0); // replaced with $input-bg-disabled + //} + &[disabled], fieldset[disabled] & { background-image: none; @@ -168,14 +175,14 @@ } // ----- -// Labels with form-group signalled state +// Labels with mdb-form-group signalled state // // Reference http://www.google.com/design/spec/components/text-fields.html // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section //.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations -.form-group { - position: relative; +.mdb-form-group { + //position: relative; // ----- // Labels with form-group signalled state @@ -186,168 +193,140 @@ &.label-placeholder, &.label-floating { label.control-label { - position: absolute; - pointer-events: none; - transition: 0.3s ease all; + //position: absolute; + //pointer-events: none; + //transition: 0.3s ease all; } } // hint to browser for optimization // TODO: evaluate effectiveness - looking for community feedback &.label-floating label.control-label { - will-change: left, top, contents; + //will-change: left, top, contents; } // hide label-placeholders when the field is not empty - &.label-placeholder:not(.is-empty){ - label.control-label{ + &.label-placeholder:not(.is-empty) { + label.control-label { display: none; } } // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good. .help-block { - position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur - display: none; + //position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur + //display: none; } // form-group is-focused display &.is-focused { - .form-control { - outline: none; - background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); - background-size: 100% 2px, 100% 1px; - box-shadow: none; - transition-duration: 0.3s; - .text-input-decorator:after { - background-color: $brand-primary; - } - } - - //.variations(unquote(".is-focused label.control-label"), color, $brand-primary); // focused label color variations label, label.control-label { color: $brand-primary; } - //.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations &.label-placeholder { label, label.control-label { - color: $mdb-input-placeholder-color; + //color: $mdb-input-placeholder-color; } } .help-block { - display: block; + //display: block; } } - @include form-group-validation-state(has-warning, $brand-warning); - @include form-group-validation-state(has-error, $brand-danger); - @include form-group-validation-state(has-success, $brand-success); - @include form-group-validation-state(has-info, $brand-info); + @include mdb-form-group-validation-state(has-warning, $brand-warning); + @include mdb-form-group-validation-state(has-error, $brand-danger); + @include mdb-form-group-validation-state(has-success, $brand-success); + @include mdb-form-group-validation-state(has-info, $brand-info); textarea { - resize: none; + //resize: none; & ~ .form-control-highlight { - margin-top: -11px; + //margin-top: -11px; } } select { - appearance: none; // Fix for OS X + //appearance: none; // Fix for OS X & ~ .text-input-decorator:after { - display: none; + //display: none; } } } // default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) -@include form-group-size-variant(null, $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base); +@include mdb-form-group-size-variant(null, $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base); // default floating size/location with a form-group (need margin etc from a default form-group) -@include form-group-size-variant(unquote(".form-group"), $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base); +@include mdb-form-group-size-variant(unquote(".mdb-form-group"), $font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base); // sm floating size/location -@include form-group-size-variant(unquote(".form-group.form-group-sm"), $font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm); +@include mdb-form-group-size-variant(unquote(".mdb-form-group.mdb-form-group-sm"), $font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm); // lg floating size/location -@include form-group-size-variant(unquote(".form-group.form-group-lg"), $font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg); - +@include mdb-form-group-size-variant(unquote(".mdb-form-group.mdb-form-group-lg"), $font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg); select.form-control { + //border: 0; + //box-shadow: none; + //border-radius: 0; - border: 0; - box-shadow: none; - border-radius: 0; - - .form-group.is-focused & { - box-shadow: none; - border-color: $mdb-input-underline-color; + .mdb-form-group.is-focused & { + //box-shadow: none; + //border-color: $mdb-input-underline-color; } &[multiple] { &, - .form-group.is-focused & { - height: 85px; + .mdb-form-group.is-focused & { + //height: 85px; } } } -@mixin input-group-button-variation($vertical-padding){ - .input-group-btn { - .btn { - margin: 0 0 $vertical-padding 0; - } - } -} - -// ---------------- -// input group/addon related styles - -// default margin - no form-group required -@include input-group-button-variation($mdb-input-padding-y-base); - -.form-group { - //.form-control { - // float: none; - //} - - // sm margin - &.form-group-sm { - @include input-group-button-variation($mdb-input-padding-y-sm); - } - - // lg margin - &.form-group-lg { - @include input-group-button-variation($mdb-input-padding-y-lg); - } -} - -.input-group { // may be in or outside of form-group - .input-group-btn { - padding: 0 12px; // match addon spacing - } - - .input-group-addon { - border: 0; - background: transparent; - } -} - // Input files - hide actual input - requires specific markup in the sample. -.form-group input[type=file] { - opacity: 0; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 100; -} +//.mdb-form-group input[type=file] { +// opacity: 0; +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// width: 100%; +// height: 100%; +// z-index: 100; +//} +// I don't think this was in use... +//legend { +// border-bottom: 0; +//} +// +// +//.form-horizontal { +// +// // Consistent vertical alignment of radios and checkboxes +// .radio, +// .checkbox, +// .radio-inline, +// .checkbox-inline { +// padding-top: 0; +// } +// +// .radio { +// margin-bottom: 10px; +// } +// +// label { +// text-align: right; +// } +// +// label.control-label { +// margin: 0; +// } +//} diff --git a/scss/includes/_input-group.scss b/scss/includes/_input-group.scss new file mode 100644 index 00000000..21e24471 --- /dev/null +++ b/scss/includes/_input-group.scss @@ -0,0 +1,33 @@ +// ----------------------------------------- +// input-group and input-group-addon styles +// note: form-groups are not required +// +@mixin input-group-button-variation($vertical-padding) { + .input-group-btn { + .btn { + //margin: 0 0 $vertical-padding 0; + } + } +} + +// default margin - no form-group required +@include input-group-button-variation($mdb-input-padding-y-base); + +&.mdb-form-group-sm { + @include input-group-button-variation($mdb-input-padding-y-sm); +} + +&.mdb-form-group-lg { + @include input-group-button-variation($mdb-input-padding-y-lg); +} + +.input-group { // may be in or outside of form-group + .input-group-btn { + //padding: 0 12px; // match addon spacing + } + + .input-group-addon { + //border: 0; + //background: transparent; + } +} diff --git a/scss/includes/_navbar.scss b/scss/includes/_navbar.scss index 64c6b5a9..a2d5e599 100644 --- a/scss/includes/_navbar.scss +++ b/scss/includes/_navbar.scss @@ -155,7 +155,7 @@ // //.navbar-form { // margin-top: 16px; - // .form-group { + // .mdb-form-group { // margin: 0; // padding: 0; // @@ -165,7 +165,7 @@ // } // } // - // .form-group .form-control, + // .mdb-form-group .form-control, // .form-control { // border-color: inherit; // color: inherit; diff --git a/scss/includes/ripples.scss b/scss/includes/_ripples.scss similarity index 91% rename from scss/includes/ripples.scss rename to scss/includes/_ripples.scss index 7d78123f..e4b77e5a 100644 --- a/scss/includes/ripples.scss +++ b/scss/includes/_ripples.scss @@ -1,5 +1,5 @@ -// marker class (used as a selector) to add ripple to something +// marker class (used as a selector for one-off elements to decorate) .ripple { position: relative; } diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss index 546cd944..65863fb9 100644 --- a/scss/includes/_variables.scss +++ b/scss/includes/_variables.scss @@ -17,6 +17,7 @@ $enable-flex: true; @import 'variables/brand'; @import 'variables/buttons'; @import 'variables/code'; +@import 'variables/forms'; @import 'variables/state'; @import 'variables/type'; @@ -43,7 +44,7 @@ $contrast-factor: 40% !default; // -------------------- // inputs -$mdb-input-placeholder-color: #BDBDBD !default; +//$mdb-input-placeholder-color: #BDBDBD !default; $mdb-input-underline-color: #D2D2D2 !default; $mdb-label-static-size-ratio: 75 / 100 !default; $mdb-help-block-size-ratio: 75 / 100 !default; diff --git a/scss/includes/mixins/_variations.scss b/scss/includes/mixins/_variations.scss index fb1dc9e1..1d7e20fc 100644 --- a/scss/includes/mixins/_variations.scss +++ b/scss/includes/mixins/_variations.scss @@ -35,7 +35,7 @@ // background-color: $variation-color; // color: $variation-color-text; // // deeply defined to override welljumbo class without !impotant need -// .navbar-form .form-group input.form-control, +// .navbar-form .mdb-form-group input.form-control, // .navbar-form input.form-control { // @include material-placeholder { // color: $variation-color-text; diff --git a/scss/includes/variables/_forms.scss b/scss/includes/variables/_forms.scss new file mode 100644 index 00000000..b486cbe0 --- /dev/null +++ b/scss/includes/variables/_forms.scss @@ -0,0 +1,44 @@ +// Forms + +//$input-padding-x: .75rem !default; +//$input-padding-y: .375rem !default; +// +$input-bg: rgba(0, 0, 0, 0) !default; // #fff !default; +$input-bg-disabled: rgba(0, 0, 0, 0) !default; // $gray-lighter !default; +// +//$input-color: $gray !default; +//$input-border-color: #ccc !default; +//$input-border-width: $border-width !default; +$input-box-shadow: none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default; +// +$input-border-radius: 0 !default; // $border-radius !default; +//$input-border-radius-lg: $border-radius-lg !default; +//$input-border-radius-sm: $border-radius-sm !default; +// +//$input-border-focus: #66afe9 !default; +$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default; +// +$input-color-placeholder: #BDBDBD !default; // #999 !default; +// +//$input-padding-x-sm: .75rem !default; +//$input-padding-y-sm: .275rem !default; +// +//$input-padding-x-lg: 1.25rem !default; +//$input-padding-y-lg: .75rem !default; +// +//$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default; +//$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; +//$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +// +//$form-group-margin-bottom: $spacer-y !default; +// +//$input-group-addon-bg: $gray-lighter !default; +//$input-group-addon-border-color: $input-border-color !default; +// +//$cursor-disabled: not-allowed !default; +// +//// Form validation icons +//$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg=="; +//$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+"; +//$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4="; +