diff options
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss | 221 |
1 files changed, 0 insertions, 221 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss b/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss deleted file mode 100644 index 2961f0b..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss +++ /dev/null @@ -1,221 +0,0 @@ -form { - // ensure enough room at the bottom of any form to display a one-line bmd-help - margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base; - - // reverse the above for navbars (no help expected in a navbar form) - .navbar & { - margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works - - .bmd-form-group { - display: inline-block; - padding-top: 0; - } - - .btn { - margin-bottom: 0; - } - } -} - -// ----- -// Inputs -// -// Reference http://www.google.com/design/spec/components/text-fields.html -// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section -.form-control { - background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position; - background-size: $bmd-form-control-bg-size; - border: 0; - transition: background 0s ease-out; - - // The border bottom should be static in all states, the decorator will be animated over this. - &:focus, - .bmd-form-group.is-focused & { - background-size: $bmd-form-control-bg-size-active; - //border-bottom: $input-btn-border-width solid $input-border-color; - transition-duration: 0.3s; - } -} - -// Help blocks (not in v4) -// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good. -// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions? -// -.bmd-help { - position: absolute; - display: none; - font-size: .8rem; - font-weight: normal; - @extend .text-muted; - - .bmd-form-group.is-focused & { - display: block; - } - - //-------------------------------------- - // Multiple help blocks - // - absolute positioning is used above to prevent bouncing - // - when there is more than one, this will bounce but will at least show - &:nth-of-type(2) { - padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned - } - - + .bmd-help { - position: relative; - margin-bottom: 0; - } -} - -// ----- -// State coloring: default, success, info, warning, danger -// -@include bmd-selection-color(); -@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color); - -.has-success { - @include bmd-form-color($brand-success, $brand-success, $brand-success); -} - -.has-info { - @include bmd-form-color($brand-info, $brand-info, $brand-info); -} - -.has-warning { - @include bmd-form-color($brand-warning, $brand-warning, $brand-warning); -} - -.has-danger { - @include bmd-form-color($brand-danger, $brand-danger, $brand-danger); -} - -// 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"), color, $bmd-input-placeholder-color); // default label color variations - -// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose. -.bmd-form-group { - position: relative; - - // ----- - // Labels - // - // Reference http://www.google.com/design/spec/components/text-fields.html - // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section - [class^='bmd-label'], - [class*=' bmd-label'] { - position: absolute; - pointer-events: none; - transition: 0.3s ease all; - - // hint to browser for optimization - &.bmd-label-floating { - will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback - } - } - - // hide label-placeholders when the field is filled - &.is-filled .bmd-label-placeholder { - display: none; - } - - // Optional class to make the text field inline collapsible/expandable (collapsed by default) - // This uses the BS collapse js to make the width expand. - // `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline - // FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events - &.bmd-collapse-inline { - padding: 0; // get rid of any padding as this is a width transition - - // Expandable Holder. - .collapse { - &.in { - // This is an unfortunate hack. Animating between widths in percent (%) - // in many browsers (Chrome, Firefox) only animates the inner visual style - // of the input - the outer bounding box still 'jumps'. - // Thus assume a sensible maximum, and animate to/from that value. - max-width: 600px; - } - } - - .collapsing, - .width:not(.collapse), // collapsing is removed and momentarily only width is present - .collapse.in { - display: inline-block; - } - - .collapsing { - @include material-animation-default(); - } - } - - // default floating size/location with an bmd-form-group - @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default"); - - // sm floating size/location - &.bmd-form-group-sm { - @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm"); - } - - // lg floating size/location - &.bmd-form-group-lg { - @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg"); - } -} - -// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch -@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height); - -select { - &, - &.form-control { - // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this. - -moz-appearance: none; - -webkit-appearance: none; - } -} - -// Input files - hide actual input - requires specific markup in the sample. -//.bmd-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-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 { -// margin: 0; -// } -//} - -.form-inline { - @include media-breakpoint-up(sm) { - .input-group { - display: inline-flex; - align-items: center; - } - } -} |
