diff options
| author | Kapil Viren Ahuja <k.v.ahuja@gmail.com> | 2017-03-23 15:17:03 +0530 |
|---|---|---|
| committer | Kapil Viren Ahuja <k.v.ahuja@gmail.com> | 2017-03-23 15:17:03 +0530 |
| commit | 01ef61d8fc3e18fe159e98d36414ef0ba92ff2a7 (patch) | |
| tree | 3d14b60e737ecd6c3c516798cddf5ca52db24348 /templates/assets/sass/material-kit/_inputs.scss | |
| parent | c9198259402c1d01ad8d943832c20069635963da (diff) | |
| download | minionlivesmatter-01ef61d8fc3e18fe159e98d36414ef0ba92ff2a7.tar.gz minionlivesmatter-01ef61d8fc3e18fe159e98d36414ef0ba92ff2a7.zip | |
adding the new theme
Diffstat (limited to 'templates/assets/sass/material-kit/_inputs.scss')
| -rwxr-xr-x | templates/assets/sass/material-kit/_inputs.scss | 369 |
1 files changed, 0 insertions, 369 deletions
diff --git a/templates/assets/sass/material-kit/_inputs.scss b/templates/assets/sass/material-kit/_inputs.scss deleted file mode 100755 index d5b3769..0000000 --- a/templates/assets/sass/material-kit/_inputs.scss +++ /dev/null @@ -1,369 +0,0 @@ -// 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; - } -} |
