source: Application/ocrent/wwwroot/lib/bootstrap/scss/forms/_form-control.scss

Last change on this file was f5f7c24, checked in by 192011 <mk.snicker@…>, 17 months ago

Initial commit

  • Property mode set to 100644
File size: 5.6 KB
Line 
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
159textarea {
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}
Note: See TracBrowser for help on using the repository browser.