From c5c60729062cc3d89be7447b5d330367417aa6f7 Mon Sep 17 00:00:00 2001 From: Matt Rude Date: Sat, 3 Feb 2018 21:08:46 -0600 Subject: Update --- .../node_modules/bootstrap/scss/_custom-forms.scss | 297 +++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 assets/node_modules/bootstrap/scss/_custom-forms.scss (limited to 'assets/node_modules/bootstrap/scss/_custom-forms.scss') diff --git a/assets/node_modules/bootstrap/scss/_custom-forms.scss b/assets/node_modules/bootstrap/scss/_custom-forms.scss new file mode 100644 index 0000000..2d83f7e --- /dev/null +++ b/assets/node_modules/bootstrap/scss/_custom-forms.scss @@ -0,0 +1,297 @@ +// Embedded icons from Open Iconic. +// Released under MIT and copyright 2014 Waybury. +// https://useiconic.com/open + + +// Checkboxes and radios +// +// Base class takes care of all the key behavioral aspects. + +.custom-control { + position: relative; + display: block; + min-height: (1rem * $line-height-base); + padding-left: $custom-control-gutter; +} + +.custom-control-inline { + display: inline-flex; + margin-right: $custom-control-spacer-x; +} + +.custom-control-input { + position: absolute; + z-index: -1; // Put the input behind the label so it doesn't overlay text + opacity: 0; + + &:checked ~ .custom-control-label::before { + color: $custom-control-indicator-checked-color; + @include gradient-bg($custom-control-indicator-checked-bg); + @include box-shadow($custom-control-indicator-checked-box-shadow); + } + + &:focus ~ .custom-control-label::before { + // the mixin is not used here to make sure there is feedback + box-shadow: $custom-control-indicator-focus-box-shadow; + } + + &:active ~ .custom-control-label::before { + color: $custom-control-indicator-active-color; + background-color: $custom-control-indicator-active-bg; + @include box-shadow($custom-control-indicator-active-box-shadow); + } + + &:disabled { + ~ .custom-control-label { + color: $custom-control-label-disabled-color; + + &::before { + background-color: $custom-control-indicator-disabled-bg; + } + } + } +} + +// Custom control indicators +// +// Build the custom controls out of psuedo-elements. + +.custom-control-label { + margin-bottom: 0; + + // Background-color and (when enabled) gradient + &::before { + position: absolute; + top: (($line-height-base - $custom-control-indicator-size) / 2); + left: 0; + display: block; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + pointer-events: none; + content: ""; + user-select: none; + background-color: $custom-control-indicator-bg; + @include box-shadow($custom-control-indicator-box-shadow); + } + + // Foreground (icon) + &::after { + position: absolute; + top: (($line-height-base - $custom-control-indicator-size) / 2); + left: 0; + display: block; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + content: ""; + background-repeat: no-repeat; + background-position: center center; + background-size: $custom-control-indicator-bg-size; + } +} + + +// Checkboxes +// +// Tweak just a few things for checkboxes. + +.custom-checkbox { + .custom-control-label::before { + @include border-radius($custom-checkbox-indicator-border-radius); + } + + .custom-control-input:checked ~ .custom-control-label { + &::before { + @include gradient-bg($custom-control-indicator-checked-bg); + } + &::after { + background-image: $custom-checkbox-indicator-icon-checked; + } + } + + .custom-control-input:indeterminate ~ .custom-control-label { + &::before { + @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); + @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); + } + &::after { + background-image: $custom-checkbox-indicator-icon-indeterminate; + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + &:indeterminate ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + } +} + +// Radios +// +// Tweak just a few things for radios. + +.custom-radio { + .custom-control-label::before { + border-radius: $custom-radio-indicator-border-radius; + } + + .custom-control-input:checked ~ .custom-control-label { + &::before { + @include gradient-bg($custom-control-indicator-checked-bg); + } + &::after { + background-image: $custom-radio-indicator-icon-checked; + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + } +} + + +// Select +// +// Replaces the browser default select with a custom one, mostly pulled from +// http://primercss.io. +// + +.custom-select { + display: inline-block; + width: 100%; + height: $custom-select-height; + padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + line-height: $custom-select-line-height; + color: $custom-select-color; + vertical-align: middle; + background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; + background-size: $custom-select-bg-size; + border: $custom-select-border-width solid $custom-select-border-color; + @if $enable-rounded { + border-radius: $custom-select-border-radius; + } @else { + border-radius: 0; + } + appearance: none; + + &:focus { + border-color: $custom-select-focus-border-color; + outline: 0; + box-shadow: $custom-select-focus-box-shadow; + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // suppress the default white text on blue background highlight given to + // the selected option text when the (still closed)