corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 1 | // stylelint-disable selector-no-qualifying-type |
2 | |||
3 | // Make the div behave like a button |
||
4 | .btn-group, |
||
5 | .btn-group-vertical { |
||
6 | position: relative; |
||
7 | display: inline-flex; |
||
8 | vertical-align: middle; // match .btn alignment given font-size hack above |
||
9 | |||
10 | > .btn { |
||
11 | position: relative; |
||
12 | flex: 0 1 auto; |
||
13 | |||
14 | // Bring the hover, focused, and "active" buttons to the front to overlay |
||
15 | // the borders properly |
||
16 | @include hover { |
||
17 | z-index: 1; |
||
18 | } |
||
19 | &:focus, |
||
20 | &:active, |
||
21 | &.active { |
||
22 | z-index: 1; |
||
23 | } |
||
24 | } |
||
25 | |||
26 | // Prevent double borders when buttons are next to each other |
||
27 | .btn + .btn, |
||
28 | .btn + .btn-group, |
||
29 | .btn-group + .btn, |
||
30 | .btn-group + .btn-group { |
||
31 | margin-left: -$btn-border-width; |
||
32 | } |
||
33 | } |
||
34 | |||
35 | // Optional: Group multiple button groups together for a toolbar |
||
36 | .btn-toolbar { |
||
37 | display: flex; |
||
38 | flex-wrap: wrap; |
||
39 | justify-content: flex-start; |
||
40 | |||
41 | .input-group { |
||
42 | width: auto; |
||
43 | } |
||
44 | } |
||
45 | |||
46 | .btn-group { |
||
47 | > .btn:first-child { |
||
48 | margin-left: 0; |
||
49 | } |
||
50 | |||
51 | // Reset rounded corners |
||
52 | > .btn:not(:last-child):not(.dropdown-toggle), |
||
53 | > .btn-group:not(:last-child) > .btn { |
||
54 | @include border-right-radius(0); |
||
55 | } |
||
56 | |||
57 | > .btn:not(:first-child), |
||
58 | > .btn-group:not(:first-child) > .btn { |
||
59 | @include border-left-radius(0); |
||
60 | } |
||
61 | } |
||
62 | |||
63 | // Sizing |
||
64 | // |
||
65 | // Remix the default button sizing classes into new ones for easier manipulation. |
||
66 | |||
67 | .btn-group-sm > .btn { @extend .btn-sm; } |
||
68 | .btn-group-lg > .btn { @extend .btn-lg; } |
||
69 | |||
70 | |||
71 | // |
||
72 | // Split button dropdowns |
||
73 | // |
||
74 | |||
75 | .dropdown-toggle-split { |
||
76 | padding-right: $btn-padding-x * .75; |
||
77 | padding-left: $btn-padding-x * .75; |
||
78 | |||
79 | &::after, |
||
80 | .dropup &::after, |
||
81 | .dropright &::after { |
||
82 | margin-left: 0; |
||
83 | } |
||
84 | |||
85 | .dropleft &::before { |
||
86 | margin-right: 0; |
||
87 | } |
||
88 | } |
||
89 | |||
90 | .btn-sm + .dropdown-toggle-split { |
||
91 | padding-right: $btn-padding-x-sm * .75; |
||
92 | padding-left: $btn-padding-x-sm * .75; |
||
93 | } |
||
94 | |||
95 | .btn-lg + .dropdown-toggle-split { |
||
96 | padding-right: $btn-padding-x-lg * .75; |
||
97 | padding-left: $btn-padding-x-lg * .75; |
||
98 | } |
||
99 | |||
100 | |||
101 | // The clickable button for toggling the menu |
||
102 | // Set the same inset shadow as the :active state |
||
103 | .btn-group.show .dropdown-toggle { |
||
104 | @include box-shadow($btn-active-box-shadow); |
||
105 | |||
106 | // Show no shadow for `.btn-link` since it has no other button styles. |
||
107 | &.btn-link { |
||
108 | @include box-shadow(none); |
||
109 | } |
||
110 | } |
||
111 | |||
112 | |||
113 | // |
||
114 | // Vertical button groups |
||
115 | // |
||
116 | |||
117 | .btn-group-vertical { |
||
118 | flex-direction: column; |
||
119 | align-items: flex-start; |
||
120 | justify-content: center; |
||
121 | |||
122 | .btn, |
||
123 | .btn-group { |
||
124 | width: 100%; |
||
125 | } |
||
126 | |||
127 | > .btn + .btn, |
||
128 | > .btn + .btn-group, |
||
129 | > .btn-group + .btn, |
||
130 | > .btn-group + .btn-group { |
||
131 | margin-top: -$btn-border-width; |
||
132 | margin-left: 0; |
||
133 | } |
||
134 | |||
135 | // Reset rounded corners |
||
136 | > .btn:not(:last-child):not(.dropdown-toggle), |
||
137 | > .btn-group:not(:last-child) > .btn { |
||
138 | @include border-bottom-radius(0); |
||
139 | } |
||
140 | |||
141 | > .btn:not(:first-child), |
||
142 | > .btn-group:not(:first-child) > .btn { |
||
143 | @include border-top-radius(0); |
||
144 | } |
||
145 | } |
||
146 | |||
147 | |||
148 | // Checkbox and radio options |
||
149 | // |
||
150 | // In order to support the browser's form validation feedback, powered by the |
||
151 | // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use |
||
152 | // `display: none;` or `visibility: hidden;` as that also hides the popover. |
||
153 | // Simply visually hiding the inputs via `opacity` would leave them clickable in |
||
154 | // certain cases which is prevented by using `clip` and `pointer-events`. |
||
155 | // This way, we ensure a DOM element is visible to position the popover from. |
||
156 | // |
||
157 | // See https://github.com/twbs/bootstrap/pull/12794 and |
||
158 | // https://github.com/twbs/bootstrap/pull/14559 for more information. |
||
159 | |||
160 | .btn-group-toggle { |
||
161 | > .btn, |
||
162 | > .btn-group > .btn { |
||
163 | margin-bottom: 0; // Override default `<label>` value |
||
164 | |||
165 | input[type="radio"], |
||
166 | input[type="checkbox"] { |
||
167 | position: absolute; |
||
168 | clip: rect(0, 0, 0, 0); |
||
169 | pointer-events: none; |
||
170 | } |
||
171 | } |
||
172 | } |