mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-12-01 22:13:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

#755 checkpoint reviewing form inputs

Browse Source
This commit is contained in:
Kevin Ross 2015-12-07 11:40:42 -06:00
parent 88f29e3583
commit 991fa4c520
24 changed files with 272 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/autofill.js
View File

@ -19,8 +19,8 @@ const Autofill = (($) => {
*/ */
class Autofill { class Autofill {
constructor(element, config) { constructor($element, config) {
this.$element = $(element) this.$element = $element
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
this._watchLoading() this._watchLoading()
@ -84,7 +84,7 @@ const Autofill = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Autofill(this, config) data = new Autofill($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/baseInput.js
View File

@ -45,8 +45,8 @@ const BaseInput = (($) => {
* @param config * @param config
* @param properties - anything that needs to be set as this[key] = value. Works around the need to call `super` before using `this` * @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 = {}) { constructor($element, config, properties = {}) {
this.$element = $(element) this.$element = $element
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
// set properties for use in the constructor initialization // set properties for use in the constructor initialization
@ -68,6 +68,8 @@ const BaseInput = (($) => {
this.$formGroup = this.findFormGroup(this.config.formGroup.required) this.$formGroup = this.findFormGroup(this.config.formGroup.required)
// Will add mdb-form-group to form-group or create an mdb-form-group // 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() this.$mdbFormGroup = this.resolveMdbFormGroup()
// Signal to the mdb-form-group that a form-control-* variation is being used // Signal to the mdb-form-group that a form-control-* variation is being used

4
js/src/baseToggle.js
View File

@ -21,12 +21,12 @@ const BaseToggle = (($) => {
*/ */
class BaseToggle extends BaseInput { class BaseToggle extends BaseInput {
constructor(element, config, properties) { constructor($element, config, properties) {
// properties = {inputType: checkbox, outerClass: checkbox-inline} // properties = {inputType: checkbox, outerClass: checkbox-inline}
// '.checkbox|switch|radio > label > input[type=checkbox|radio]' // '.checkbox|switch|radio > label > input[type=checkbox|radio]'
// '.${this.outerClass} > label > input[type=${this.inputType}]' // '.${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) this.$element.after(this.config.template)
} }

23
js/src/bootstrapMaterialDesign.js vendored
View File

@ -37,13 +37,11 @@ const BootstrapMaterialDesign = (($) => {
] ]
}, },
text: { text: {
selector: ['input[type=text]'] // omit inputs we have specialized components to handle
selector: [`input[type!='checkbox'][type!='radio'][type!='file']`]
}, },
textarea: { file: {
selector: ['textarea'] selector: 'input[type=file]'
},
select: {
selector: ['select']
}, },
checkbox: { checkbox: {
selector: '.checkbox > label > input[type=checkbox]' selector: '.checkbox > label > input[type=checkbox]'
@ -60,8 +58,11 @@ const BootstrapMaterialDesign = (($) => {
radioInline: { radioInline: {
selector: 'label.radio-inline > input[type=radio]' selector: 'label.radio-inline > input[type=radio]'
}, },
file: { textarea: {
selector: 'input[type=file]' selector: ['textarea']
},
select: {
selector: ['select']
}, },
autofill: { autofill: {
selector: 'body' selector: 'body'
@ -90,8 +91,8 @@ const BootstrapMaterialDesign = (($) => {
*/ */
class BootstrapMaterialDesign { class BootstrapMaterialDesign {
constructor(element, config) { constructor($element, config) {
this.$element = $(element) this.$element = $element
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
let $document = $(document) let $document = $(document)
@ -149,7 +150,7 @@ const BootstrapMaterialDesign = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new BootstrapMaterialDesign(this, config) data = new BootstrapMaterialDesign($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/checkbox.js
View File

@ -29,8 +29,8 @@ const Checkbox = (($) => {
*/ */
class Checkbox extends BaseToggle { class Checkbox extends BaseToggle {
constructor(element, config, properties = {inputType: NAME, outerClass: NAME}) { constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
super(element, $.extend({ super($element, $.extend({
invalidComponentMatches: [File, Radio, Text, Textarea, Select] invalidComponentMatches: [File, Radio, Text, Textarea, Select]
}, Default, config), properties) }, Default, config), properties)
} }
@ -68,7 +68,7 @@ const Checkbox = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Checkbox(this, config) data = new Checkbox($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/checkboxInline.js
View File

@ -21,8 +21,8 @@ const CheckboxInline = (($) => {
*/ */
class CheckboxInline extends Checkbox { class CheckboxInline extends Checkbox {
constructor(element, config, properties = {inputType: 'checkbox', outerClass: 'checkbox-inline'}) { constructor($element, config, properties = {inputType: 'checkbox', outerClass: 'checkbox-inline'}) {
super(element, $.extend({}, Default, config), properties) super($element, $.extend({}, Default, config), properties)
} }
dispose() { dispose() {
@ -58,7 +58,7 @@ const CheckboxInline = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new CheckboxInline(this, config) data = new CheckboxInline($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/file.js
View File

@ -37,8 +37,8 @@ const File = (($) => {
*/ */
class File extends BaseInput { class File extends BaseInput {
constructor(element, config) { constructor($element, config) {
super(element, $.extend({invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, Default, config)) super($element, $.extend({invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, Default, config))
this.$mdbFormGroup.addClass(ClassName.IS_FILE) this.$mdbFormGroup.addClass(ClassName.IS_FILE)
} }
@ -111,7 +111,7 @@ const File = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new File(this, config) data = new File($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/old/es6Template.js
View File

@ -22,8 +22,8 @@ const Foo = (($) => {
*/ */
class Foo { class Foo {
constructor(element, config) { constructor($element, config) {
this.$element = $(element) this.$element = $element
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
} }
@ -49,7 +49,7 @@ const Foo = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Foo(this, config) data = new Foo($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/radio.js
View File

@ -28,8 +28,8 @@ const Radio = (($) => {
*/ */
class Radio extends BaseToggle { class Radio extends BaseToggle {
constructor(element, config, properties = {inputType: NAME, outerClass: NAME}) { constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
super(element, $.extend({ super($element, $.extend({
invalidComponentMatches: [Checkbox, File, Switch, Text] invalidComponentMatches: [Checkbox, File, Switch, Text]
}, Default, config), properties) }, Default, config), properties)
} }
@ -64,7 +64,7 @@ const Radio = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Radio(this, config) data = new Radio($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/radioInline.js
View File

@ -21,8 +21,8 @@ const RadioInline = (($) => {
*/ */
class RadioInline extends Radio { class RadioInline extends Radio {
constructor(element, config, properties = {inputType: 'radio', outerClass: 'radio-inline'}) { constructor($element, config, properties = {inputType: 'radio', outerClass: 'radio-inline'}) {
super(element, $.extend({}, Default, config), properties) super($element, $.extend({}, Default, config), properties)
} }
dispose() { dispose() {
@ -46,7 +46,7 @@ const RadioInline = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new RadioInline(this, config) data = new RadioInline($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

8
js/src/ripples.js
View File

@ -45,8 +45,10 @@ const Ripples = (($) => {
*/ */
class Ripples { class Ripples {
constructor(element, config) { constructor($element, config) {
this.$element = $(element) this.$element = $element
console.log(`Adding ripples to ${Util.describe(this.$element)}`) // eslint-disable-line no-console
this.config = $.extend({}, Default, config) this.config = $.extend({}, Default, config)
// attach initial listener // attach initial listener
@ -273,7 +275,7 @@ const Ripples = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Ripples(this, config) data = new Ripples($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/select.js
View File

@ -29,8 +29,8 @@ const Select = (($) => {
*/ */
class Select extends Text { class Select extends Text {
constructor(element, config) { constructor($element, config) {
super(element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Switch, Text, Textarea]}, Default, config)) super($element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Switch, Text, Textarea]}, Default, config))
} }
dispose() { dispose() {
@ -62,7 +62,7 @@ const Select = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Select(this, config) data = new Select($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/switch.js
View File

@ -23,8 +23,8 @@ const Switch = (($) => {
*/ */
class Switch extends Checkbox { class Switch extends Checkbox {
constructor(element, config) { constructor($element, config) {
super(element, $.extend({}, Default, config), 'checkbox', NAME) super($element, $.extend({}, Default, config), 'checkbox', NAME)
// selector: '.switch > label > input[type=checkbox]' // selector: '.switch > label > input[type=checkbox]'
} }
@ -46,7 +46,7 @@ const Switch = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Switch(this, config) data = new Switch($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/text.js
View File

@ -31,8 +31,8 @@ const Text = (($) => {
*/ */
class Text extends BaseInput { class Text extends BaseInput {
constructor(element, config) { constructor($element, config) {
super(element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Select, Switch, Textarea]}, Default, config)) super($element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Select, Switch, Textarea]}, Default, config))
// Initially mark as empty // Initially mark as empty
if (this.isEmpty()) { if (this.isEmpty()) {
@ -72,7 +72,7 @@ const Text = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Text(this, config) data = new Text($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
js/src/textarea.js
View File

@ -27,8 +27,8 @@ const Textarea = (($) => {
*/ */
class Textarea extends Text { class Textarea extends Text {
constructor(element, config) { constructor($element, config) {
super(element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Text, Select, Switch]}, Default, config)) super($element, $.extend({invalidComponentMatches: [Checkbox, File, Radio, Text, Select, Switch]}, Default, config))
} }
dispose() { dispose() {
@ -60,7 +60,7 @@ const Textarea = (($) => {
let data = $element.data(DATA_KEY) let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new Textarea(this, config) data = new Textarea($element, config)
$element.data(DATA_KEY, data) $element.data(DATA_KEY, data)
} }
}) })

6
scss/includes/_bootstrap-material-design.scss
View File

@ -11,8 +11,8 @@
@import 'checkboxes'; @import 'checkboxes';
@import 'switch'; @import 'switch';
@import 'radios'; @import 'radios';
@import 'inputs'; @import 'forms';
@import 'form'; @import 'input-group';
@import 'lists'; @import 'lists';
@import 'navbar'; @import 'navbar';
@import 'alerts'; @import 'alerts';
@ -25,4 +25,6 @@
@import 'dividers'; @import 'dividers';
@import 'themes'; @import 'themes';
@import 'ripples';
@import 'plugins'; @import 'plugins';

28
scss/includes/_form.scss
View File

@ -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;
// }
//}

279
scss/includes/_inputs.scss → scss/includes/_forms.scss
View File

@ -1,64 +1,64 @@
// label variations // label variations
.label { .label {
border-radius: $border-radius-small; 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 // 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 { label.control-label {
top: $label-top; top: $label-top;
left: 0; left: 0;
// must repeat because the selector above is more specific than the general label sizing // must repeat because the selector above is more specific than the general label sizing
font-size: $static-font-size; //font-size: $static-font-size;
line-height: $static-line-height; //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 { .form-control {
@include material-placeholder { @include material-placeholder {
font-size: $placeholder-font-size; //font-size: $placeholder-font-size;
line-height: $line-height; //line-height: $line-height;
color: $mdb-input-placeholder-color; //color: $mdb-input-placeholder-color;
font-weight: 400; //font-weight: 400;
}
}
// margin-bottom must be specified to give help-block vertical space. // 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. // $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) // generic labels used anywhere in the form (not control-label)
.checkbox label, .checkbox label,
.radio label, .radio label,
label { label {
font-size: $placeholder-font-size; //font-size: $placeholder-font-size;
line-height: $line-height; //line-height: $line-height;
color: $mdb-input-placeholder-color; //color: $mdb-input-placeholder-color;
font-weight: 400; //font-weight: 400;
} }
// smaller focused or static size // smaller focused or static size
label.control-label { label.control-label {
font-size: $static-font-size; //font-size: $static-font-size;
line-height: $static-line-height; //line-height: $static-line-height;
color: $mdb-input-placeholder-color; //color: $mdb-input-placeholder-color;
font-weight: 400; //font-weight: 400;
margin: 16px 0 0 0; // std and lg //margin: 16px 0 0 0; // std and lg
} }
.help-block { .help-block {
margin-top: 0; // allow the input margin to set-off the top of the help-block //margin-top: 0; // allow the input margin to set-off the top of the help-block
font-size: $help-block-font-size; //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 &.#{$name} { // e.g. has-error
.form-control { .form-control {
box-shadow: none; //box-shadow: none; // replaced with variable
} }
&.is-focused .form-control { &.is-focused .form-control {
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); 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-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
$static-line-height: ($mdb-label-static-size-ratio * $line-height) !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); @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 { @else {
#{$parent} { #{$parent} {
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size); @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 // form-group padding-bottom
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-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 // 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 // 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 // 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; //margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below
padding-top: ($label-top-margin + $static-font-size); //padding-top: ($label-top-margin + $static-font-size);
// larger labels as placeholders // larger labels as placeholders
&.label-floating, &.label-floating,
&.label-placeholder { &.label-placeholder {
label.control-label { label.control-label {
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: $placeholder-font-size; //font-size: $placeholder-font-size;
line-height: $line-height; //line-height: $line-height;
} }
} }
@ -129,37 +129,44 @@
// //
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control, .form-control //,
.form-group .form-control { //.mdb-form-group .form-control
{
border: 0; 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-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px); background-position: center bottom, center calc(100% - 1px);
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out; transition: background 0s ease-out;
float: none; //float: none; // why?
box-shadow: none;
border-radius: 0;
// Placeholders and and labels-as-placeholders should look the same //&:textarea {
@include material-placeholder {
color: $mdb-input-placeholder-color;
font-weight: 400;
}
//&:textarea { // appears to be an invalid selector
// height: 40px; // height: 40px;
//} //}
&[readonly], .mdb-form-group.is-focused & {
&[disabled], outline: none;
fieldset[disabled] & { background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-color: rgba(0, 0, 0, 0); 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], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-image: none; 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 // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // 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 //.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
.form-group { .mdb-form-group {
position: relative; //position: relative;
// ----- // -----
// Labels with form-group signalled state // Labels with form-group signalled state
@ -186,168 +193,140 @@
&.label-placeholder, &.label-placeholder,
&.label-floating { &.label-floating {
label.control-label { label.control-label {
position: absolute; //position: absolute;
pointer-events: none; //pointer-events: none;
transition: 0.3s ease all; //transition: 0.3s ease all;
} }
} }
// hint to browser for optimization // hint to browser for optimization
// TODO: evaluate effectiveness - looking for community feedback // TODO: evaluate effectiveness - looking for community feedback
&.label-floating label.control-label { &.label-floating label.control-label {
will-change: left, top, contents; //will-change: left, top, contents;
} }
// hide label-placeholders when the field is not empty // hide label-placeholders when the field is not empty
&.label-placeholder:not(.is-empty){ &.label-placeholder:not(.is-empty) {
label.control-label{ label.control-label {
display: none; display: none;
} }
} }
// Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good. // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
.help-block { .help-block {
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur //position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
display: none; //display: none;
} }
// form-group is-focused display // form-group is-focused display
&.is-focused { &.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,
label.control-label { label.control-label {
color: $brand-primary; color: $brand-primary;
} }
//.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
&.label-placeholder { &.label-placeholder {
label, label,
label.control-label { label.control-label {
color: $mdb-input-placeholder-color; //color: $mdb-input-placeholder-color;
} }
} }
.help-block { .help-block {
display: block; //display: block;
} }
} }
@include form-group-validation-state(has-warning, $brand-warning); @include mdb-form-group-validation-state(has-warning, $brand-warning);
@include form-group-validation-state(has-error, $brand-danger); @include mdb-form-group-validation-state(has-error, $brand-danger);
@include form-group-validation-state(has-success, $brand-success); @include mdb-form-group-validation-state(has-success, $brand-success);
@include form-group-validation-state(has-info, $brand-info); @include mdb-form-group-validation-state(has-info, $brand-info);
textarea { textarea {
resize: none; //resize: none;
& ~ .form-control-highlight { & ~ .form-control-highlight {
margin-top: -11px; //margin-top: -11px;
} }
} }
select { select {
appearance: none; // Fix for OS X //appearance: none; // Fix for OS X
& ~ .text-input-decorator:after { & ~ .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) // 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) // 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 // 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 // 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 { select.form-control {
//border: 0;
//box-shadow: none;
//border-radius: 0;
border: 0; .mdb-form-group.is-focused & {
box-shadow: none; //box-shadow: none;
border-radius: 0; //border-color: $mdb-input-underline-color;
.form-group.is-focused & {
box-shadow: none;
border-color: $mdb-input-underline-color;
} }
&[multiple] { &[multiple] {
&, &,
.form-group.is-focused & { .mdb-form-group.is-focused & {
height: 85px; //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. // Input files - hide actual input - requires specific markup in the sample.
.form-group input[type=file] { //.mdb-form-group input[type=file] {
opacity: 0; // opacity: 0;
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
z-index: 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;
// }
//}

33
scss/includes/_input-group.scss Normal file
View File

@ -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;
}
}

4
scss/includes/_navbar.scss
View File

@ -155,7 +155,7 @@
// //
//.navbar-form { //.navbar-form {
// margin-top: 16px; // margin-top: 16px;
// .form-group { // .mdb-form-group {
// margin: 0; // margin: 0;
// padding: 0; // padding: 0;
// //
@ -165,7 +165,7 @@
// } // }
// } // }
// //
// .form-group .form-control, // .mdb-form-group .form-control,
// .form-control { // .form-control {
// border-color: inherit; // border-color: inherit;
// color: inherit; // color: inherit;

2
scss/includes/ripples.scss → scss/includes/_ripples.scss
View File

@ -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 { .ripple {
position: relative; position: relative;
} }

3
scss/includes/_variables.scss
View File

@ -17,6 +17,7 @@ $enable-flex: true;
@import 'variables/brand'; @import 'variables/brand';
@import 'variables/buttons'; @import 'variables/buttons';
@import 'variables/code'; @import 'variables/code';
@import 'variables/forms';
@import 'variables/state'; @import 'variables/state';
@import 'variables/type'; @import 'variables/type';
@ -43,7 +44,7 @@ $contrast-factor: 40% !default;
// -------------------- // --------------------
// inputs // inputs
$mdb-input-placeholder-color: #BDBDBD !default; //$mdb-input-placeholder-color: #BDBDBD !default;
$mdb-input-underline-color: #D2D2D2 !default; $mdb-input-underline-color: #D2D2D2 !default;
$mdb-label-static-size-ratio: 75 / 100 !default; $mdb-label-static-size-ratio: 75 / 100 !default;
$mdb-help-block-size-ratio: 75 / 100 !default; $mdb-help-block-size-ratio: 75 / 100 !default;

2
scss/includes/mixins/_variations.scss
View File

@ -35,7 +35,7 @@
// background-color: $variation-color; // background-color: $variation-color;
// color: $variation-color-text; // color: $variation-color-text;
// // deeply defined to override welljumbo class without !impotant need // // 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 { // .navbar-form input.form-control {
// @include material-placeholder { // @include material-placeholder {
// color: $variation-color-text; // color: $variation-color-text;

44
scss/includes/variables/_forms.scss Normal file
View File

@ -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=";