diff options
Diffstat (limited to 'templates/assets/sass/material-kit/_inputs.scss')
| -rwxr-xr-x | templates/assets/sass/material-kit/_inputs.scss | 369 |
1 files changed, 369 insertions, 0 deletions
diff --git a/templates/assets/sass/material-kit/_inputs.scss b/templates/assets/sass/material-kit/_inputs.scss new file mode 100755 index 0000000..d5b3769 --- /dev/null +++ b/templates/assets/sass/material-kit/_inputs.scss @@ -0,0 +1,369 @@ +// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. + +@import '_inputs-size'; + +// label variations +.label { + border-radius: $border-radius-small; + @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){ + 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; + } +} + +@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; + +} + // 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; + } + + // 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; + } + + // 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 + } + + .help-block { + 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){ + + &.#{$name} { // e.g. has-error + .form-control { + box-shadow: none; + } + &.is-focused .form-control { + background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); + } + label.control-label, + .help-block { + color: $color; + } + } +} + +@mixin 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; + + $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default; + $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default; + + $help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default; + $help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default; + + // this is outside a form-group + @if not $parent { + @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 + @else { + #{$parent} { + @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size); + + // 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; + + // 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; + + // 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; + } + } + + // static, focused, or autofill floating labels + &.label-static, + &.label-floating.is-focused, + &.label-floating:not(.is-empty) { + @include label-static($label-top, $static-font-size, $static-line-height); + } + // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 + &.label-floating input.form-control:-webkit-autofill ~ label.control-label { + @include label-static($label-top, $static-font-size, $static-line-height); + } + } + } +} + +// ----- +// Inputs + +.form-control, +.form-group .form-control { + border: 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; + + font-weight: 400; + + // 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 + // height: 40px; + //} + + &[readonly], + &[disabled], + fieldset[disabled] & { + background-color: rgba(0, 0, 0, 0); + } + + &[disabled], + fieldset[disabled] & { + background-image: none; + border-bottom: 1px dotted $mdb-input-underline-color; + } +} + +// ----- +// Labels with 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; + + // ----- + // Labels with 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 + &.label-static, + &.label-placeholder, + &.label-floating { + label.control-label { + 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; + } + + // hide label-placeholders when the field is not empty + &.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; + } + + // 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; + + .material-input: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; + } + } + + .help-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); + + textarea { + resize: none; + & ~ .form-control-highlight { + margin-top: -11px; + } + } + + select { + appearance: none; // Fix for OS X + + & ~ .material-input:after { + 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, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $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"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base); + +// sm floating size/location +@include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small); + +// lg floating size/location +@include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large); + + +select.form-control { + + border: 0; + box-shadow: none; + border-radius: 0; + + .form-group.is-focused & { + box-shadow: none; + border-color: $mdb-input-underline-color; + } + + &[multiple] { + &, + .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-base-vertical); + +.form-group { + //.form-control { + // float: none; + //} + + // sm margin + &.form-group-sm { + @include input-group-button-variation($mdb-input-padding-small-vertical); + } + + // lg margin + &.form-group-lg { + @include input-group-button-variation($mdb-input-padding-large-vertical); + } +} + +.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; + padding: 12px 15px 0px; + } +} + +// 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; +} + + +.form-control-feedback{ + opacity: 0; + + .has-success &{ + color: $green; + opacity: 1; + } + + .has-error &{ + color: $red; + opacity: 1; + } +} |