]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/sass/bootstrap.scss
Refactor modal buttons style
[github/Chocobozzz/PeerTube.git] / client / src / sass / bootstrap.scss
... / ...
CommitLineData
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2@import '_bootstrap';
3
4@import '_variables';
5@import '_mixins';
6
7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
8.glyphicon-refresh-animate {
9 animation: spin .7s infinite linear;
10}
11
12.glyphicon-duplicate {
13 font-size: 70%;
14}
15
16.flex-auto {
17 flex: auto;
18}
19
20.c-hand {
21 cursor: pointer;
22}
23
24@keyframes spin {
25 from {
26 transform: scale(1) rotate(0deg);
27 }
28 to {
29 transform: scale(1) rotate(360deg);
30 }
31}
32
33/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
34.dropdown {
35 z-index: z(dropdown) !important;
36}
37
38.list-overflow-menu,
39.parent-entry {
40 z-index: z(header) - 1 !important;
41}
42
43.btn-group,
44.dropdown-root,
45.action-dropdown,
46.input-group-prepend,
47.column-toggle {
48 z-index: inherit !important;
49}
50
51.btn-group > .btn:not(:first-child) {
52 border-top-left-radius: 0 !important;
53 border-bottom-left-radius: 0 !important;
54}
55
56.dropdown-menu {
57 z-index: z(dropdown) + 1 !important;
58
59 border-radius: 3px;
60 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
61 font-size: 15px;
62
63 .dropdown-header {
64 padding-left: 1rem;
65 }
66
67 .dropdown-item {
68 padding: 3px 15px;
69
70 &.active {
71 color: pvar(--mainBackgroundColor) !important;
72 background-color: pvar(--mainHoverColor);
73 opacity: .9;
74 }
75
76 &:active {
77 color: pvar(--mainForegroundColor) !important;
78 }
79
80 &::after {
81 display: none;
82 }
83 }
84
85 button {
86 @include disable-default-a-behaviour;
87 }
88
89 a {
90 @include disable-default-a-behaviour;
91 color: #000 !important;
92 }
93}
94
95.badge {
96 line-height: 1.1;
97}
98
99@media screen and (min-width: #{breakpoint(md)}) {
100 .modal:before {
101 vertical-align: middle;
102 content: " ";
103 height: 100%;
104 }
105
106 .modal-dialog {
107 text-align: left;
108
109 &:not(.modal-lg):not(.modal-xl) {
110 min-width: 500px;
111 width: 40vw;
112 max-width: 900px;
113 }
114 }
115}
116
117.modal {
118 text-align: center;
119
120 .modal-content {
121 background-color: pvar(--mainBackgroundColor);
122 word-break: break-all;
123 }
124
125 .modal-header {
126 border-bottom: none;
127 margin-bottom: 5px;
128
129 .modal-title {
130 font-size: 20px;
131 font-weight: $font-semibold;
132 }
133
134 my-global-icon {
135 @include icon(22px);
136
137 position: relative;
138 top: 5px;
139 float: right;
140
141 margin: 0;
142 padding: 0;
143 opacity: .5;
144
145 &[iconName="cross"] {
146 @include icon(16px);
147 top: -3px;
148 }
149 }
150 }
151
152 .inputs {
153 margin-bottom: 0;
154 text-align: right;
155
156 > .peertube-button:not(:first-child) {
157 margin-left: 10px
158 }
159 }
160}
161
162
163// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
164.modal-open {
165 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
166 width: 100vw; // Make sure the content fits all the available width
167}
168
169// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
170@media (hover: none) and (pointer: coarse) {
171 .modal-open, .menu-open {
172 overflow: hidden !important;
173 }
174
175 // On touchscreen devices display content overlay when opened menu
176 .menu-open {
177 .main-col {
178 &::before {
179 background-color: black;
180 width: 100vw;
181 height: 100vh;
182 opacity: 0.75;
183 content: '';
184 display: block;
185 position: fixed;
186 z-index: z('menu') - 1;
187 }
188 }
189 }
190}
191
192// Nav customizations
193.nav .nav-link {
194 display: flex !important;
195 align-items: center;
196 height: 30px !important;
197 padding: 10px 15px !important;
198}
199
200.nav.nav-pills {
201 font-size: 16px !important;
202 font-weight: $font-semibold !important;
203
204 .nav-link {
205 opacity: 0.6 !important;
206
207 &.active, &:hover, &:active, &:focus {
208 opacity: 1 !important;
209 }
210 }
211
212 a {
213 @include disable-default-a-behaviour;
214
215 color: pvar(--mainForegroundColor);
216 }
217}
218
219.nav-tabs .nav-link {
220 @include disable-default-a-behaviour;
221
222 color: pvar(--mainForegroundColor);
223 font-weight: $font-semibold;
224 border: none;
225 border-bottom: 2px solid transparent;
226 opacity: 0.6;
227
228 &.active {
229 color: pvar(--mainForegroundColor);
230 background-color: pvar(--mainBackgroundColor) !important;
231 border-bottom-color: pvar(--mainColor);
232 }
233
234 &.active, &:hover, &:active, &:focus {
235 opacity: 1;
236 }
237}
238
239.card {
240 background-color: pvar(--mainBackgroundColor);
241 border-color: #dee2e6;
242}
243
244.collapse-transition {
245 // Animation when we show/hide the filters
246 transition: max-height 0.3s;
247 display: block !important;
248 overflow: hidden !important;
249 max-height: 0;
250
251 &.show {
252 max-height: 1500px;
253 }
254}
255
256.dropdown-divider {
257 margin: 0.3rem 0;
258}
259
260ngb-modal-backdrop {
261 z-index: z(modal) - 1 !important;
262}
263
264ngb-modal-window {
265 z-index: z(modal) !important;
266}
267
268ngb-popover-window {
269 z-index: z(popover) !important;
270}
271
272ngb-tooltip-window {
273 z-index: z(tooltip) !important;
274}
275
276.btn-outline-secondary {
277 border-color: $input-border-color;
278
279 &:focus-within,
280 &:focus,
281 &:hover {
282 color: #fff;
283 background-color: #6c757d;
284 }
285}
286
287.btn-outline-tertiary {
288 color: pvar(--secondaryColor);
289 border-color: pvar(--secondaryColor);
290
291 &:focus-within,
292 &:focus,
293 &:hover {
294 color: pvar(--mainBackgroundColor);
295 background-color: pvar(--secondaryColor);
296 }
297}
298
299// input box-shadow on focus
300.form-control {
301 font-size: 15px;
302 color: pvar(--mainForegroundColor);
303 background-color: pvar(--inputBackgroundColor);
304 outline: none;
305
306 &:focus-within,
307 &:focus {
308 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
309
310 &.input-error {
311 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
312 }
313 }
314}
315
316.input-group {
317 & > .form-control {
318 flex: initial;
319 }
320 input.form-control {
321 width: unset !important;
322 flex-grow: 1;
323 }
324
325 .input-group-prepend + input {
326 border-top-left-radius: 0 !important;
327 border-bottom-left-radius: 0 !important;
328 }
329}
330
331.has-feedback.has-clear {
332 position: relative;
333
334 input {
335 padding-right: 1.5rem !important;
336 }
337
338 .form-control-clear {
339 color: rgba(0, 0, 0, 0.4);
340 /*
341 * Enable pointer events as they have been disabled since Bootstrap 3.3
342 * See https://github.com/twbs/bootstrap/pull/14104
343 */
344 pointer-events: all;
345 display: flex;
346 justify-content: center;
347 align-items: center;
348 position: absolute;
349 right: .5rem;
350 height: 95%;
351 font-size: 14px;
352
353 &:hover {
354 color: rgba(0, 0, 0, 0.7);
355 cursor: pointer;
356 }
357 }
358
359 input:placeholder-shown + .form-control-clear {
360 display: none;
361 }
362}
363
364.callout {
365 padding: 1.25rem;
366 border: 1px solid #eee;
367 border-radius: .25rem;
368
369 & > label {
370 position: relative;
371 top: -5px;
372 left: -10px;
373 color: #6c757d !important;
374 }
375
376 &:not(.callout-light) {
377 border-left-width: .25rem;
378 }
379
380 &.callout-info {
381 border-color: pvar(--mainColorLightest);
382 border-left-color: pvar(--mainColor);
383 }
384}