mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
117 lines
3.3 KiB
SCSS
117 lines
3.3 KiB
SCSS
//
|
|
// Textual form controls
|
|
//
|
|
|
|
.form-control {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: $input-height;
|
|
padding: $input-padding-y $input-padding-x;
|
|
font-family: $input-font-family;
|
|
@include font-size($input-font-size);
|
|
font-weight: $input-font-weight;
|
|
line-height: $input-line-height;
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
background-clip: padding-box;
|
|
border: $input-border-width solid $input-border-color;
|
|
appearance: none; // Fix appearance for date inputs in Safari
|
|
|
|
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
|
@include border-radius($input-border-radius, 0);
|
|
|
|
@include box-shadow($input-box-shadow);
|
|
@include transition($input-transition);
|
|
|
|
// Customize the `:focus` state to imitate native WebKit styles.
|
|
&:focus {
|
|
color: $input-focus-color;
|
|
background-color: $input-focus-bg;
|
|
border-color: $input-focus-border-color;
|
|
outline: 0;
|
|
@if $enable-shadows {
|
|
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
|
} @else {
|
|
// Avoid using mixin so we can pass custom focus shadow properly
|
|
box-shadow: $input-focus-box-shadow;
|
|
}
|
|
}
|
|
|
|
// Placeholder
|
|
&::placeholder {
|
|
color: $input-placeholder-color;
|
|
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
|
opacity: 1;
|
|
}
|
|
|
|
// Disabled and read-only inputs
|
|
//
|
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
|
// don't honor that edge case; we style them as disabled anyway.
|
|
&:disabled,
|
|
&[readonly] {
|
|
background-color: $input-disabled-bg;
|
|
border-color: $input-disabled-border-color;
|
|
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Readonly controls as plain text
|
|
//
|
|
// Apply class to a readonly input to make it appear like regular plain
|
|
// text (without any border, background color, focus indicator)
|
|
|
|
.form-control-plaintext {
|
|
display: block;
|
|
width: 100%;
|
|
padding: $input-padding-y 0;
|
|
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
|
line-height: $input-line-height;
|
|
color: $input-plaintext-color;
|
|
background-color: transparent;
|
|
border: solid transparent;
|
|
border-width: $input-border-width 0;
|
|
|
|
&.form-control-sm,
|
|
&.form-control-lg {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
// Form control sizing
|
|
//
|
|
// Build on `.form-control` with modifier classes to decrease or increase the
|
|
// height and font-size of form controls.
|
|
//
|
|
// Repeated in `_input_group.scss` to avoid Sass extend issues.
|
|
|
|
.form-control-sm {
|
|
min-height: $input-height-sm;
|
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
|
@include font-size($input-font-size-sm);
|
|
@include border-radius($input-border-radius-sm);
|
|
}
|
|
|
|
.form-control-lg {
|
|
min-height: $input-height-lg;
|
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
|
@include font-size($input-font-size-lg);
|
|
@include border-radius($input-border-radius-lg);
|
|
}
|
|
|
|
.form-control-color {
|
|
max-width: 3rem;
|
|
padding: $input-padding-y;
|
|
}
|
|
|
|
.form-control-color::-moz-color-swatch {
|
|
@include border-radius($input-border-radius);
|
|
}
|
|
|
|
.form-control-color::-webkit-color-swatch {
|
|
@include border-radius($input-border-radius);
|
|
}
|