source: imaps-frontend/node_modules/bootstrap/scss/forms/_form-check.scss

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 4.7 KB
Line 
1//
2// Check/radio
3//
4
5.form-check {
6 display: block;
7 min-height: $form-check-min-height;
8 padding-left: $form-check-padding-start;
9 margin-bottom: $form-check-margin-bottom;
10
11 .form-check-input {
12 float: left;
13 margin-left: $form-check-padding-start * -1;
14 }
15}
16
17.form-check-reverse {
18 padding-right: $form-check-padding-start;
19 padding-left: 0;
20 text-align: right;
21
22 .form-check-input {
23 float: right;
24 margin-right: $form-check-padding-start * -1;
25 margin-left: 0;
26 }
27}
28
29.form-check-input {
30 --#{$prefix}form-check-bg: #{$form-check-input-bg};
31
32 flex-shrink: 0;
33 width: $form-check-input-width;
34 height: $form-check-input-width;
35 margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
36 vertical-align: top;
37 appearance: none;
38 background-color: var(--#{$prefix}form-check-bg);
39 background-image: var(--#{$prefix}form-check-bg-image);
40 background-repeat: no-repeat;
41 background-position: center;
42 background-size: contain;
43 border: $form-check-input-border;
44 print-color-adjust: exact; // Keep themed appearance for print
45 @include transition($form-check-transition);
46
47 &[type="checkbox"] {
48 @include border-radius($form-check-input-border-radius);
49 }
50
51 &[type="radio"] {
52 // stylelint-disable-next-line property-disallowed-list
53 border-radius: $form-check-radio-border-radius;
54 }
55
56 &:active {
57 filter: $form-check-input-active-filter;
58 }
59
60 &:focus {
61 border-color: $form-check-input-focus-border;
62 outline: 0;
63 box-shadow: $form-check-input-focus-box-shadow;
64 }
65
66 &:checked {
67 background-color: $form-check-input-checked-bg-color;
68 border-color: $form-check-input-checked-border-color;
69
70 &[type="checkbox"] {
71 @if $enable-gradients {
72 --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
73 } @else {
74 --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
75 }
76 }
77
78 &[type="radio"] {
79 @if $enable-gradients {
80 --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
81 } @else {
82 --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
83 }
84 }
85 }
86
87 &[type="checkbox"]:indeterminate {
88 background-color: $form-check-input-indeterminate-bg-color;
89 border-color: $form-check-input-indeterminate-border-color;
90
91 @if $enable-gradients {
92 --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
93 } @else {
94 --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
95 }
96 }
97
98 &:disabled {
99 pointer-events: none;
100 filter: none;
101 opacity: $form-check-input-disabled-opacity;
102 }
103
104 // Use disabled attribute in addition of :disabled pseudo-class
105 // See: https://github.com/twbs/bootstrap/issues/28247
106 &[disabled],
107 &:disabled {
108 ~ .form-check-label {
109 cursor: default;
110 opacity: $form-check-label-disabled-opacity;
111 }
112 }
113}
114
115.form-check-label {
116 color: $form-check-label-color;
117 cursor: $form-check-label-cursor;
118}
119
120//
121// Switch
122//
123
124.form-switch {
125 padding-left: $form-switch-padding-start;
126
127 .form-check-input {
128 --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
129
130 width: $form-switch-width;
131 margin-left: $form-switch-padding-start * -1;
132 background-image: var(--#{$prefix}form-switch-bg);
133 background-position: left center;
134 @include border-radius($form-switch-border-radius, 0);
135 @include transition($form-switch-transition);
136
137 &:focus {
138 --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
139 }
140
141 &:checked {
142 background-position: $form-switch-checked-bg-position;
143
144 @if $enable-gradients {
145 --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
146 } @else {
147 --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
148 }
149 }
150 }
151
152 &.form-check-reverse {
153 padding-right: $form-switch-padding-start;
154 padding-left: 0;
155
156 .form-check-input {
157 margin-right: $form-switch-padding-start * -1;
158 margin-left: 0;
159 }
160 }
161}
162
163.form-check-inline {
164 display: inline-block;
165 margin-right: $form-check-inline-margin-end;
166}
167
168.btn-check {
169 position: absolute;
170 clip: rect(0, 0, 0, 0);
171 pointer-events: none;
172
173 &[disabled],
174 &:disabled {
175 + .btn {
176 pointer-events: none;
177 filter: none;
178 opacity: $form-check-btn-check-disabled-opacity;
179 }
180 }
181}
182
183@if $enable-dark-mode {
184 @include color-mode(dark) {
185 .form-switch .form-check-input:not(:checked):not(:focus) {
186 --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
187 }
188 }
189}
Note: See TracBrowser for help on using the repository browser.