summaryrefslogtreecommitdiff
path: root/templates/assets/sass/material-kit/_inputs.scss
diff options
context:
space:
mode:
authorKapil Viren Ahuja <k.v.ahuja@gmail.com>2017-03-23 15:17:03 +0530
committerKapil Viren Ahuja <k.v.ahuja@gmail.com>2017-03-23 15:17:03 +0530
commit01ef61d8fc3e18fe159e98d36414ef0ba92ff2a7 (patch)
tree3d14b60e737ecd6c3c516798cddf5ca52db24348 /templates/assets/sass/material-kit/_inputs.scss
parentc9198259402c1d01ad8d943832c20069635963da (diff)
downloadminionlivesmatter-01ef61d8fc3e18fe159e98d36414ef0ba92ff2a7.tar.gz
minionlivesmatter-01ef61d8fc3e18fe159e98d36414ef0ba92ff2a7.zip
adding the new theme
Diffstat (limited to 'templates/assets/sass/material-kit/_inputs.scss')
-rwxr-xr-xtemplates/assets/sass/material-kit/_inputs.scss369
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;
- }
-}