summaryrefslogtreecommitdiff
path: root/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss
diff options
context:
space:
mode:
authorschneefux <schneefux+commit@schneefux.xyz>2017-03-25 13:13:57 +0100
committerschneefux <schneefux+commit@schneefux.xyz>2017-03-25 13:13:57 +0100
commitd25ff2bddd44b9dac1ceb248424109d1782dd211 (patch)
tree34fcfd824a1a72e7b4d431b688adcea532b62180 /minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss
parenta2cbdd1b88ac723e5e441c0a3c22636f0a8c4dfd (diff)
downloadmeta-d25ff2bddd44b9dac1ceb248424109d1782dd211.tar.gz
meta-d25ff2bddd44b9dac1ceb248424109d1782dd211.zip
add minionlivesmatter as submodule
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss')
-rw-r--r--minionlivesmatter/templates/assets/bootstrap-material-design/scss/_forms.scss221
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;
- }
- }
-}