source: trip-planner-front/node_modules/bootstrap/scss/forms/_form-check.scss@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 3.8 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-input {
18 width: $form-check-input-width;
19 height: $form-check-input-width;
20 margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
21 vertical-align: top;
22 background-color: $form-check-input-bg;
23 background-repeat: no-repeat;
24 background-position: center;
25 background-size: contain;
26 border: $form-check-input-border;
27 appearance: none;
28 color-adjust: exact; // Keep themed appearance for print
29 @include transition($form-check-transition);
30
31 &[type="checkbox"] {
32 @include border-radius($form-check-input-border-radius);
33 }
34
35 &[type="radio"] {
36 // stylelint-disable-next-line property-disallowed-list
37 border-radius: $form-check-radio-border-radius;
38 }
39
40 &:active {
41 filter: $form-check-input-active-filter;
42 }
43
44 &:focus {
45 border-color: $form-check-input-focus-border;
46 outline: 0;
47 box-shadow: $form-check-input-focus-box-shadow;
48 }
49
50 &:checked {
51 background-color: $form-check-input-checked-bg-color;
52 border-color: $form-check-input-checked-border-color;
53
54 &[type="checkbox"] {
55 @if $enable-gradients {
56 background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
57 } @else {
58 background-image: escape-svg($form-check-input-checked-bg-image);
59 }
60 }
61
62 &[type="radio"] {
63 @if $enable-gradients {
64 background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
65 } @else {
66 background-image: escape-svg($form-check-radio-checked-bg-image);
67 }
68 }
69 }
70
71 &[type="checkbox"]:indeterminate {
72 background-color: $form-check-input-indeterminate-bg-color;
73 border-color: $form-check-input-indeterminate-border-color;
74
75 @if $enable-gradients {
76 background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
77 } @else {
78 background-image: escape-svg($form-check-input-indeterminate-bg-image);
79 }
80 }
81
82 &:disabled {
83 pointer-events: none;
84 filter: none;
85 opacity: $form-check-input-disabled-opacity;
86 }
87
88 // Use disabled attribute in addition of :disabled pseudo-class
89 // See: https://github.com/twbs/bootstrap/issues/28247
90 &[disabled],
91 &:disabled {
92 ~ .form-check-label {
93 opacity: $form-check-label-disabled-opacity;
94 }
95 }
96}
97
98.form-check-label {
99 color: $form-check-label-color;
100 cursor: $form-check-label-cursor;
101}
102
103//
104// Switch
105//
106
107.form-switch {
108 padding-left: $form-switch-padding-start;
109
110 .form-check-input {
111 width: $form-switch-width;
112 margin-left: $form-switch-padding-start * -1;
113 background-image: escape-svg($form-switch-bg-image);
114 background-position: left center;
115 @include border-radius($form-switch-border-radius);
116 @include transition($form-switch-transition);
117
118 &:focus {
119 background-image: escape-svg($form-switch-focus-bg-image);
120 }
121
122 &:checked {
123 background-position: $form-switch-checked-bg-position;
124
125 @if $enable-gradients {
126 background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
127 } @else {
128 background-image: escape-svg($form-switch-checked-bg-image);
129 }
130 }
131 }
132}
133
134.form-check-inline {
135 display: inline-block;
136 margin-right: $form-check-inline-margin-end;
137}
138
139.btn-check {
140 position: absolute;
141 clip: rect(0, 0, 0, 0);
142 pointer-events: none;
143
144 &[disabled],
145 &:disabled {
146 + .btn {
147 pointer-events: none;
148 filter: none;
149 opacity: $form-check-btn-check-disabled-opacity;
150 }
151 }
152}
Note: See TracBrowser for help on using the repository browser.