mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
#755 checkpoint reviewing form inputs
This commit is contained in:
Kevin Ross
parent
88f29e3583
commit
991fa4c520
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
|||
23
js/src/bootstrapMaterialDesign.js
vendored
23
js/src/bootstrapMaterialDesign.js
vendored
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
//}
|
||||
|
|
@ -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;
|
||||
// }
|
||||
//}
|
||||
33
scss/includes/_input-group.scss
Normal file
33
scss/includes/_input-group.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
44
scss/includes/variables/_forms.scss
Normal file
44
scss/includes/variables/_forms.scss
Normal 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=";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user