1 | //
|
---|
2 | // General form controls (plus a few specific high-level interventions)
|
---|
3 | //
|
---|
4 |
|
---|
5 | .form-control {
|
---|
6 | display: block;
|
---|
7 | width: 100%;
|
---|
8 | padding: $input-padding-y $input-padding-x;
|
---|
9 | font-family: $input-font-family;
|
---|
10 | @include font-size($input-font-size);
|
---|
11 | font-weight: $input-font-weight;
|
---|
12 | line-height: $input-line-height;
|
---|
13 | color: $input-color;
|
---|
14 | background-color: $input-bg;
|
---|
15 | background-clip: padding-box;
|
---|
16 | border: $input-border-width solid $input-border-color;
|
---|
17 | appearance: none; // Fix appearance for date inputs in Safari
|
---|
18 |
|
---|
19 | // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
---|
20 | @include border-radius($input-border-radius, 0);
|
---|
21 |
|
---|
22 | @include box-shadow($input-box-shadow);
|
---|
23 | @include transition($input-transition);
|
---|
24 |
|
---|
25 | &[type="file"] {
|
---|
26 | overflow: hidden; // prevent pseudo element button overlap
|
---|
27 |
|
---|
28 | &:not(:disabled):not([readonly]) {
|
---|
29 | cursor: pointer;
|
---|
30 | }
|
---|
31 | }
|
---|
32 |
|
---|
33 | // Customize the `:focus` state to imitate native WebKit styles.
|
---|
34 | &:focus {
|
---|
35 | color: $input-focus-color;
|
---|
36 | background-color: $input-focus-bg;
|
---|
37 | border-color: $input-focus-border-color;
|
---|
38 | outline: 0;
|
---|
39 | @if $enable-shadows {
|
---|
40 | @include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
---|
41 | } @else {
|
---|
42 | // Avoid using mixin so we can pass custom focus shadow properly
|
---|
43 | box-shadow: $input-focus-box-shadow;
|
---|
44 | }
|
---|
45 | }
|
---|
46 |
|
---|
47 | // Add some height to date inputs on iOS
|
---|
48 | // https://github.com/twbs/bootstrap/issues/23307
|
---|
49 | // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
---|
50 | &::-webkit-date-and-time-value {
|
---|
51 | // Multiply line-height by 1em if it has no unit
|
---|
52 | height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
---|
53 | }
|
---|
54 |
|
---|
55 | // Placeholder
|
---|
56 | &::placeholder {
|
---|
57 | color: $input-placeholder-color;
|
---|
58 | // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
---|
59 | opacity: 1;
|
---|
60 | }
|
---|
61 |
|
---|
62 | // Disabled inputs
|
---|
63 | //
|
---|
64 | // HTML5 says that controls under a fieldset > legend:first-child won't be
|
---|
65 | // disabled if the fieldset is disabled. Due to implementation difficulty, we
|
---|
66 | // don't honor that edge case; we style them as disabled anyway.
|
---|
67 | &:disabled {
|
---|
68 | color: $input-disabled-color;
|
---|
69 | background-color: $input-disabled-bg;
|
---|
70 | border-color: $input-disabled-border-color;
|
---|
71 | // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
---|
72 | opacity: 1;
|
---|
73 | }
|
---|
74 |
|
---|
75 | // File input buttons theming
|
---|
76 | &::file-selector-button {
|
---|
77 | padding: $input-padding-y $input-padding-x;
|
---|
78 | margin: (-$input-padding-y) (-$input-padding-x);
|
---|
79 | margin-inline-end: $input-padding-x;
|
---|
80 | color: $form-file-button-color;
|
---|
81 | @include gradient-bg($form-file-button-bg);
|
---|
82 | pointer-events: none;
|
---|
83 | border-color: inherit;
|
---|
84 | border-style: solid;
|
---|
85 | border-width: 0;
|
---|
86 | border-inline-end-width: $input-border-width;
|
---|
87 | border-radius: 0; // stylelint-disable-line property-disallowed-list
|
---|
88 | @include transition($btn-transition);
|
---|
89 | }
|
---|
90 |
|
---|
91 | &:hover:not(:disabled):not([readonly])::file-selector-button {
|
---|
92 | background-color: $form-file-button-hover-bg;
|
---|
93 | }
|
---|
94 | }
|
---|
95 |
|
---|
96 | // Readonly controls as plain text
|
---|
97 | //
|
---|
98 | // Apply class to a readonly input to make it appear like regular plain
|
---|
99 | // text (without any border, background color, focus indicator)
|
---|
100 |
|
---|
101 | .form-control-plaintext {
|
---|
102 | display: block;
|
---|
103 | width: 100%;
|
---|
104 | padding: $input-padding-y 0;
|
---|
105 | margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
---|
106 | line-height: $input-line-height;
|
---|
107 | color: $input-plaintext-color;
|
---|
108 | background-color: transparent;
|
---|
109 | border: solid transparent;
|
---|
110 | border-width: $input-border-width 0;
|
---|
111 |
|
---|
112 | &:focus {
|
---|
113 | outline: 0;
|
---|
114 | }
|
---|
115 |
|
---|
116 | &.form-control-sm,
|
---|
117 | &.form-control-lg {
|
---|
118 | padding-right: 0;
|
---|
119 | padding-left: 0;
|
---|
120 | }
|
---|
121 | }
|
---|
122 |
|
---|
123 | // Form control sizing
|
---|
124 | //
|
---|
125 | // Build on `.form-control` with modifier classes to decrease or increase the
|
---|
126 | // height and font-size of form controls.
|
---|
127 | //
|
---|
128 | // Repeated in `_input_group.scss` to avoid Sass extend issues.
|
---|
129 |
|
---|
130 | .form-control-sm {
|
---|
131 | min-height: $input-height-sm;
|
---|
132 | padding: $input-padding-y-sm $input-padding-x-sm;
|
---|
133 | @include font-size($input-font-size-sm);
|
---|
134 | @include border-radius($input-border-radius-sm);
|
---|
135 |
|
---|
136 | &::file-selector-button {
|
---|
137 | padding: $input-padding-y-sm $input-padding-x-sm;
|
---|
138 | margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
---|
139 | margin-inline-end: $input-padding-x-sm;
|
---|
140 | }
|
---|
141 | }
|
---|
142 |
|
---|
143 | .form-control-lg {
|
---|
144 | min-height: $input-height-lg;
|
---|
145 | padding: $input-padding-y-lg $input-padding-x-lg;
|
---|
146 | @include font-size($input-font-size-lg);
|
---|
147 | @include border-radius($input-border-radius-lg);
|
---|
148 |
|
---|
149 | &::file-selector-button {
|
---|
150 | padding: $input-padding-y-lg $input-padding-x-lg;
|
---|
151 | margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
---|
152 | margin-inline-end: $input-padding-x-lg;
|
---|
153 | }
|
---|
154 | }
|
---|
155 |
|
---|
156 | // Make sure textareas don't shrink too much when resized
|
---|
157 | // https://github.com/twbs/bootstrap/pull/29124
|
---|
158 | // stylelint-disable selector-no-qualifying-type
|
---|
159 | textarea {
|
---|
160 | &.form-control {
|
---|
161 | min-height: $input-height;
|
---|
162 | }
|
---|
163 |
|
---|
164 | &.form-control-sm {
|
---|
165 | min-height: $input-height-sm;
|
---|
166 | }
|
---|
167 |
|
---|
168 | &.form-control-lg {
|
---|
169 | min-height: $input-height-lg;
|
---|
170 | }
|
---|
171 | }
|
---|
172 | // stylelint-enable selector-no-qualifying-type
|
---|
173 |
|
---|
174 | .form-control-color {
|
---|
175 | width: $form-color-width;
|
---|
176 | height: $input-height;
|
---|
177 | padding: $input-padding-y;
|
---|
178 |
|
---|
179 | &:not(:disabled):not([readonly]) {
|
---|
180 | cursor: pointer;
|
---|
181 | }
|
---|
182 |
|
---|
183 | &::-moz-color-swatch {
|
---|
184 | border: 0 !important; // stylelint-disable-line declaration-no-important
|
---|
185 | @include border-radius($input-border-radius);
|
---|
186 | }
|
---|
187 |
|
---|
188 | &::-webkit-color-swatch {
|
---|
189 | @include border-radius($input-border-radius);
|
---|
190 | }
|
---|
191 |
|
---|
192 | &.form-control-sm { height: $input-height-sm; }
|
---|
193 | &.form-control-lg { height: $input-height-lg; }
|
---|
194 | }
|
---|