mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 06:08:57 +03:00
318 lines
9.2 KiB
SCSS
318 lines
9.2 KiB
SCSS
@mixin bmd-disabled() {
|
|
fieldset[disabled][disabled] &,
|
|
&.disabled,
|
|
&:disabled,
|
|
&[disabled] {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin bmd-selection-color() {
|
|
.radio label,
|
|
.radio-inline,
|
|
.checkbox label,
|
|
.checkbox-inline,
|
|
.switch label {
|
|
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
|
//color: $bmd-label-color;
|
|
|
|
&,
|
|
.is-focused & {
|
|
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
|
|
color: $bmd-label-color;
|
|
|
|
// on focus just darken the specific labels, do not turn them to the brand-primary
|
|
@include hover-focus-active() {
|
|
//&:hover,
|
|
//&:focus {
|
|
color: $bmd-label-color-inner-focus;
|
|
}
|
|
|
|
// correct the above focus color for disabled items
|
|
label:has(input[type=radio][disabled]),
|
|
// css 4 which is unlikely to work for a while, but no other pure css way.
|
|
label:has(input[type=checkbox][disabled]),
|
|
// css 4
|
|
fieldset[disabled] & {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: $bmd-label-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Style for disabled inputs OLD, use color approach with opacity built in, see radios
|
|
//fieldset[disabled] &,
|
|
//fieldset[disabled] & input[type=checkbox],
|
|
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
|
|
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
|
|
//input[type=checkbox][disabled] + .bmd-radio-outer-circle {
|
|
// opacity: 0.5;
|
|
//}
|
|
}
|
|
|
|
@mixin bmd-radio-color($color) {
|
|
&::after {
|
|
border-color: $color;
|
|
}
|
|
&::before {
|
|
background-color: $color;
|
|
}
|
|
}
|
|
|
|
@mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
|
|
[class^='bmd-label'],
|
|
[class*=' bmd-label'] {
|
|
color: $label-color;
|
|
}
|
|
|
|
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
|
|
.form-control {
|
|
// underline animation color on focus
|
|
$underline-background-image: linear-gradient(
|
|
to top,
|
|
$label-color-focus 2px,
|
|
fade-out($label-color-focus, 1) 2px
|
|
),
|
|
linear-gradient(
|
|
to top,
|
|
$input-border-color 1px,
|
|
fade-out($input-border-color, 1) 1px
|
|
);
|
|
$underline-background-image-invalid: linear-gradient(
|
|
to top,
|
|
$bmd-invalid-underline 2px,
|
|
fade-out($bmd-invalid-underline, 1) 2px
|
|
),
|
|
linear-gradient(
|
|
to top,
|
|
$input-border-color 1px,
|
|
fade-out($input-border-color, 1) 1px
|
|
);
|
|
$underline-background-image-readonly: linear-gradient(
|
|
to top,
|
|
$bmd-readonly-underline 1px,
|
|
fade-out($bmd-readonly-underline, 1) 1px
|
|
),
|
|
linear-gradient(
|
|
to top,
|
|
$input-border-color 1px,
|
|
fade-out($input-border-color, 1) 1px
|
|
);
|
|
$underline-background-image-disabled: linear-gradient(
|
|
to right,
|
|
$input-border-color 0%,
|
|
$input-border-color 30%,
|
|
transparent 30%,
|
|
transparent 100%
|
|
);
|
|
|
|
// bg image is always there, we just need to reveal it
|
|
&,
|
|
.is-focused & {
|
|
background-image: $underline-background-image;
|
|
}
|
|
|
|
&:invalid {
|
|
background-image: $underline-background-image-invalid;
|
|
}
|
|
|
|
&:read-only {
|
|
background-image: $underline-background-image-readonly;
|
|
}
|
|
|
|
@include bmd-disabled() {
|
|
background-image: $underline-background-image-disabled;
|
|
background-repeat: repeat-x;
|
|
background-size: 3px 1px;
|
|
}
|
|
|
|
// allow underline focus image and validation images to coexist
|
|
&.form-control-success {
|
|
&,
|
|
.is-focused & {
|
|
background-image: $underline-background-image, $form-icon-success;
|
|
}
|
|
}
|
|
&.form-control-warning {
|
|
&,
|
|
.is-focused & {
|
|
background-image: $underline-background-image, $form-icon-warning;
|
|
}
|
|
}
|
|
&.form-control-danger {
|
|
&,
|
|
.is-focused & {
|
|
background-image: $underline-background-image, $form-icon-danger;
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-focused,
|
|
// may or may not be a form-group or bmd-form-group
|
|
&.is-focused {
|
|
// on focus set borders and labels to the validation color
|
|
|
|
// Use the BS provided mixin for the bulk of the color
|
|
@include form-validation-state("valid", $label-color);
|
|
|
|
[class^='bmd-label'],
|
|
[class*=' bmd-label'] {
|
|
color: $label-color-focus;
|
|
}
|
|
|
|
.bmd-label-placeholder {
|
|
color: $label-color; // keep the placeholder color
|
|
}
|
|
|
|
// Set the border and box shadow on specific inputs to match
|
|
.form-control {
|
|
border-color: $border-color;
|
|
}
|
|
|
|
// Set validation states also for addons
|
|
//.input-group-addon {
|
|
// border-color: $border-color;
|
|
//}
|
|
|
|
.bmd-help {
|
|
color: $bmd-label-color-inner-focus;
|
|
}
|
|
}
|
|
}
|
|
|
|
// must be broken out for reuse - webkit selector breaks firefox
|
|
@mixin bmd-label-static($label-top, $static-font-size) {
|
|
top: $label-top;
|
|
left: 0;
|
|
// must repeat because the previous (more generic) selectors
|
|
font-size: $static-font-size;
|
|
}
|
|
|
|
@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
|
|
$variant-input-height: (
|
|
($font-size * $variant-line-height) + ($variant-padding-y * 2)
|
|
);
|
|
$static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
|
|
$help-font-size: ($bmd-help-size-ratio * $font-size);
|
|
|
|
$label-static-top: $label-top-margin;
|
|
$label-placeholder-top: $label-top-margin + $static-font-size +
|
|
$variant-padding-y;
|
|
|
|
//@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
|
|
|
|
//Label height: 72dp
|
|
//Padding above label text: 16dp
|
|
//Padding between label and input text: 8dp
|
|
//Padding below input text (including divider): 16dp
|
|
//Padding below text divider: 8dp
|
|
|
|
@if $form-group-context {
|
|
// Create a space at the top of the bmd-form-group for the label.
|
|
// The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding).
|
|
padding-top: ($label-top-margin + $static-font-size);
|
|
// note: bottom-margin of this is determined by $spacer. @see _spacer.scss
|
|
//margin-bottom: (1.5 * $help-font-size);
|
|
}
|
|
|
|
// TODO: remove this when known stable. https://github.com/FezVrasta/bootstrap-material-design/issues/849
|
|
//@else {
|
|
//
|
|
// // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that
|
|
// // any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups
|
|
// .radio,
|
|
// label.radio-inline,
|
|
// .checkbox,
|
|
// label.checkbox-inline,
|
|
// .switch {
|
|
// padding-top: $spacer-y;
|
|
// }
|
|
//}
|
|
|
|
// Set all line-heights preferably to 1 so that we can space out everything manually without additional added space
|
|
// from the default line-height of 1.5
|
|
.form-control,
|
|
label,
|
|
input::placeholder {
|
|
line-height: $variant-line-height;
|
|
}
|
|
|
|
.radio label,
|
|
label.radio-inline,
|
|
.checkbox label,
|
|
label.checkbox-inline,
|
|
.switch label {
|
|
line-height: $line-height-base; // keep the same line height for radios and checkboxes
|
|
}
|
|
|
|
// Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg
|
|
input::placeholder {
|
|
font-size: $font-size;
|
|
}
|
|
|
|
// generic labels used anywhere in the form
|
|
.checkbox label,
|
|
.radio label,
|
|
label {
|
|
font-size: $font-size;
|
|
}
|
|
|
|
// floating/placeholder default (no focus)
|
|
.bmd-label-floating,
|
|
.bmd-label-placeholder {
|
|
//@debug "top: #{$label-as-placeholder-top}";
|
|
top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
|
|
}
|
|
|
|
// floating focused/filled will look like static
|
|
&.is-focused,
|
|
.is-focused,
|
|
&.is-filled,
|
|
.is-filled {
|
|
.bmd-label-floating {
|
|
@include bmd-label-static($label-static-top, $static-font-size);
|
|
}
|
|
}
|
|
|
|
// static
|
|
.bmd-label-static {
|
|
@include bmd-label-static($label-static-top, $static-font-size);
|
|
}
|
|
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
|
|
//input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary
|
|
// @include bmd-label-static($label-top, $static-font-size, $static-line-height);
|
|
//}
|
|
|
|
.bmd-help {
|
|
margin-top: 0; // allow the input margin to set-off the top of the help-block
|
|
font-size: $help-font-size;
|
|
}
|
|
|
|
// validation icon placement
|
|
.form-control {
|
|
&.form-control-success,
|
|
&.form-control-warning,
|
|
&.form-control-danger {
|
|
$icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
|
|
background-size: $bmd-form-control-bg-size, $icon-bg-size;
|
|
|
|
&,
|
|
&:focus,
|
|
.bmd-form-group.is-focused & {
|
|
padding-right: ($input-padding-x * 3);
|
|
background-repeat: $bmd-form-control-bg-repeat-y, no-repeat;
|
|
background-position: $bmd-form-control-bg-position,
|
|
center right ($variant-input-height * .25);
|
|
}
|
|
|
|
&:focus,
|
|
.bmd-form-group.is-focused & {
|
|
background-size: $bmd-form-control-bg-size-active, $icon-bg-size;
|
|
}
|
|
}
|
|
}
|
|
}
|