]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/sass/bootstrap.scss
Prevent sass deprecated warning
[github/Chocobozzz/PeerTube.git] / client / src / sass / bootstrap.scss
CommitLineData
8cbc40b2
C
1@use '_variables' as *;
2@use '_mixins' as *;
3
4@import './_bootstrap-variables';
5
a0da6f90
C
6@import 'bootstrap/scss/functions';
7@import 'bootstrap/scss/variables';
8@import 'bootstrap/scss/maps';
9@import 'bootstrap/scss/mixins';
10@import 'bootstrap/scss/utilities';
11
12@import 'bootstrap/scss/root';
13@import 'bootstrap/scss/reboot';
14@import 'bootstrap/scss/type';
15@import 'bootstrap/scss/grid';
16@import 'bootstrap/scss/forms';
17@import 'bootstrap/scss/buttons';
18@import 'bootstrap/scss/dropdown';
19@import 'bootstrap/scss/button-group';
20@import 'bootstrap/scss/nav';
21@import 'bootstrap/scss/card';
22@import 'bootstrap/scss/accordion';
23@import 'bootstrap/scss/alert';
24@import 'bootstrap/scss/close';
25@import 'bootstrap/scss/modal';
26@import 'bootstrap/scss/tooltip';
27@import 'bootstrap/scss/popover';
28@import 'bootstrap/scss/spinners';
29
30@import 'bootstrap/scss/helpers';
31@import 'bootstrap/scss/utilities/api';
8cbc40b2 32
bfcaa9c1
C
33.accordion {
34 --bs-accordion-color: #{pvar(--mainForegroundColor)};
35 --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
36}
37
f409f0c3
RK
38.flex-auto {
39 flex: auto;
40}
41
d3217560 42.c-hand {
4c8749cb 43 cursor: pointer !important;
d3217560
RK
44}
45
5efa5df2
C
46// ---------------------------------------------------------------------------
47// Dropdown
48// ---------------------------------------------------------------------------
49
2f4c784a 50.dropdown-menu {
0d3a2982 51 .dropdown-header {
27bc9586 52 @include padding-left(1rem);
0d3a2982
RK
53 }
54
2f4c784a 55 .dropdown-item {
a3345972 56 color: pvar(--mainForegroundColor);
2f4c784a
C
57 padding: 3px 15px;
58
24e7916c 59 &.active {
e66883b3
RK
60 color: pvar(--mainBackgroundColor) !important;
61 background-color: pvar(--mainHoverColor);
931d3430 62 opacity: 0.9;
2f4c784a 63 }
45c6bcf3 64
d3217560
RK
65 &::after {
66 display: none;
67 }
2f4c784a
C
68 }
69
2f4c784a
C
70 a {
71 @include disable-default-a-behaviour;
2f4c784a
C
72 }
73}
74
5efa5df2
C
75.dropdown-divider {
76 margin: 0.3rem 0;
77}
78
5b0ec7cd
C
79// ---------------------------------------------------------------------------
80// Alert
81// ---------------------------------------------------------------------------
82
83.alert {
84 p:last-child {
85 margin-bottom: 0;
86 }
87}
88
5efa5df2
C
89// ---------------------------------------------------------------------------
90// Modal
91// ---------------------------------------------------------------------------
92
165ee292 93@media screen and (min-width: #{breakpoint(md)}) {
931d3430 94 .modal::before {
3921166d 95 vertical-align: middle;
931d3430 96 content: ' ';
3921166d
RK
97 height: 100%;
98 }
99
100 .modal-dialog {
27bc9586 101 text-align: start;
2bc9bd08
RK
102
103 &:not(.modal-lg):not(.modal-xl) {
104 min-width: 500px;
105 width: 40vw;
106 max-width: 900px;
107 }
3921166d
RK
108 }
109}
110
2f4c784a 111.modal {
3921166d
RK
112 text-align: center;
113
2f4c784a 114 .modal-content {
e66883b3 115 background-color: pvar(--mainBackgroundColor);
681276a6 116 word-break: break-word;
2f4c784a
C
117 }
118
119 .modal-header {
931d3430 120 border-bottom: 0;
2f4c784a
C
121 margin-bottom: 5px;
122
123 .modal-title {
124 font-size: 20px;
125 font-weight: $font-semibold;
126 }
127
128 my-global-icon {
54e78847 129 @include icon(22px);
2f4c784a 130
931d3430 131 opacity: 0.5;
8319d6ae 132
5b0ec7cd
C
133 &:hover {
134 opacity: 0.8;
8319d6ae 135 }
2f4c784a
C
136 }
137 }
138
139 .inputs {
140 margin-bottom: 0;
27bc9586 141 text-align: end;
2f4c784a 142
26490335 143 > *:not(:first-child) {
27bc9586 144 @include margin-left(10px);
2f4c784a
C
145 }
146 }
147}
148
8110705d 149
150// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
151.modal-open {
152 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
17384fd8 153 width: 100vw; // Make sure the content fits all the available width
8110705d 154}
155
245b9d27
K
156// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
157@media (hover: none) and (pointer: coarse) {
931d3430
C
158 .modal-open,
159 .menu-open {
245b9d27
K
160 overflow: hidden !important;
161 }
162
163 // On touchscreen devices display content overlay when opened menu
164 .menu-open {
165 .main-col {
166 &::before {
931d3430 167 background-color: #000;
245b9d27
K
168 width: 100vw;
169 height: 100vh;
170 opacity: 0.75;
171 content: '';
172 display: block;
245b9d27
K
173 }
174 }
175 }
176}
177
5efa5df2
C
178// ---------------------------------------------------------------------------
179// Nav
180// ---------------------------------------------------------------------------
181
2f4c784a
C
182.nav .nav-link {
183 display: flex !important;
184 align-items: center;
185 height: 30px !important;
186 padding: 10px 15px !important;
187}
188
189.nav.nav-pills {
190 font-size: 16px !important;
ed5bb517 191 font-weight: $font-semibold !important;
2f4c784a 192
ed5bb517 193 .nav-link {
3d2078d6 194 opacity: 0.7 !important;
ed5bb517 195
931d3430
C
196 &.active,
197 &:hover,
198 &:active,
199 &:focus {
ed5bb517
K
200 opacity: 1 !important;
201 }
2f4c784a
C
202 }
203
204 a {
205 @include disable-default-a-behaviour;
206
e66883b3 207 color: pvar(--mainForegroundColor);
2f4c784a
C
208 }
209}
210
ed5bb517
K
211.nav-tabs .nav-link {
212 @include disable-default-a-behaviour;
2f4c784a 213
ed5bb517
K
214 color: pvar(--mainForegroundColor);
215 font-weight: $font-semibold;
931d3430 216 border: 0;
ed5bb517 217 border-bottom: 2px solid transparent;
3d2078d6 218 opacity: 0.7;
2f4c784a 219
758f0d19 220 &.active {
ed5bb517 221 color: pvar(--mainForegroundColor);
e66883b3 222 background-color: pvar(--mainBackgroundColor) !important;
ed5bb517 223 border-bottom-color: pvar(--mainColor);
758f0d19 224 }
ed5bb517 225
931d3430
C
226 &.active,
227 &:hover,
228 &:active,
229 &:focus {
ed5bb517 230 opacity: 1;
758f0d19 231 }
2f4c784a
C
232}
233
5efa5df2
C
234// ---------------------------------------------------------------------------
235// Card, collapse and accordion
236// ---------------------------------------------------------------------------
237
a4610bc6 238.card {
e66883b3 239 background-color: pvar(--mainBackgroundColor);
a4610bc6
JM
240 border-color: #dee2e6;
241}
242
2f4c784a
C
243.collapse-transition {
244 // Animation when we show/hide the filters
245 transition: max-height 0.3s;
246 display: block !important;
247 overflow: hidden !important;
248 max-height: 0;
249
250 &.show {
251 max-height: 1500px;
dd24f1bb 252 overflow: inherit !important;
2f4c784a
C
253 }
254}
bc584963 255
4c8a0991
C
256.accordion-button {
257 font-size: 18px;
258
259 &:not(.collapsed) {
260 font-weight: $font-bold;
261
262 my-global-icon {
263 color: pvar(--mainColorLighter);
264 }
265 }
266}
267
5efa5df2
C
268// ---------------------------------------------------------------------------
269// Buttons & form controls
270// ---------------------------------------------------------------------------
000eb0e4 271
5b0ec7cd
C
272.btn:not(.btn-sm) {
273 font-size: $button-font-size;
274 line-height: 1.2;
275}
276
947d0102 277.btn-outline-secondary {
a3345972 278 border-color: pvar(--inputBorderColor);
947d0102
RK
279
280 &:focus-within,
281 &:focus,
282 &:hover {
283 color: #fff;
284 background-color: #6c757d;
285 }
286}
287
a8454bb2 288.btn-group.select-button {
2accfdd8
C
289 font-weight: $font-semibold;
290
291 .active {
292 @include orange-button;
293 }
294
295 :not(.active) {
296 @include grey-button;
297 }
298
299 > * {
300 @include peertube-button-link;
301
302 box-shadow: none !important;
303
304 &:not(:first-child) {
305 border-top-left-radius: 0 !important;
306 border-bottom-left-radius: 0 !important;
307 }
308
309 &:not(:last-child) {
310 border-top-right-radius: 0 !important;
311 border-bottom-right-radius: 0 !important;
312 }
313 }
314}
315
a6d5ff76 316.form-control {
e66883b3
RK
317 color: pvar(--mainForegroundColor);
318 background-color: pvar(--inputBackgroundColor);
a6d5ff76 319 outline: none;
a6d5ff76 320}
947d0102 321
0d3a2982 322.input-group {
4c8749cb
C
323 > .btn,
324 > .input-group-text {
325 height: $button-height;
0d3a2982 326 }
931d3430 327
4c8749cb 328 > .input-group-text {
4c8749cb
C
329 line-height: normal;
330 opacity: 0.9;
0d3a2982
RK
331 }
332
4c8749cb
C
333 .input-group-text > .dropdown-toggle {
334 display: flex;
335 }
9c0cdc50 336}
4c8749cb 337
9c0cdc50
C
338.input-group,
339.btn-group {
4c8749cb
C
340 .last-in-group {
341 border-top-right-radius: 3px !important;
342 border-bottom-right-radius: 3px !important;
0d3a2982 343 }
947d0102 344}
25a42e29 345
4c8749cb 346.has-clear {
25a42e29 347 input {
27bc9586 348 @include padding-right(1.5rem !important);
25a42e29
RK
349 }
350
351 .form-control-clear {
25a42e29
RK
352 display: flex;
353 justify-content: center;
354 align-items: center;
25a42e29 355 height: 95%;
4f5d0459 356 font-size: 14px;
5b0ec7cd
C
357 position: absolute;
358 right: .5rem;
a3345972 359 opacity: 0.4;
25a42e29
RK
360
361 &:hover {
a3345972 362 opacity: 0.7;
25a42e29
RK
363 cursor: pointer;
364 }
365 }
366
367 input:placeholder-shown + .form-control-clear {
368 display: none;
369 }
370}