diff options
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 175 |
1 files changed, 81 insertions, 94 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e03201cef..b2083e516 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -1,7 +1,9 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | 2 | ||
3 | @mixin disable-default-a-behaviour { | 3 | @mixin disable-default-a-behaviour { |
4 | &:hover, &:focus, &:active { | 4 | &:hover, |
5 | &:focus, | ||
6 | &:active { | ||
5 | text-decoration: none !important; | 7 | text-decoration: none !important; |
6 | outline: none !important; | 8 | outline: none !important; |
7 | } | 9 | } |
@@ -22,7 +24,7 @@ | |||
22 | @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { | 24 | @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { |
23 | display: block; | 25 | display: block; |
24 | /* Fallback for non-webkit */ | 26 | /* Fallback for non-webkit */ |
25 | display: -webkit-box; | 27 | display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */ |
26 | -webkit-line-clamp: $number-of-lines; | 28 | -webkit-line-clamp: $number-of-lines; |
27 | /* Fallback for non-webkit */ | 29 | /* Fallback for non-webkit */ |
28 | font-size: $font-size; | 30 | font-size: $font-size; |
@@ -36,7 +38,7 @@ | |||
36 | position: relative; | 38 | position: relative; |
37 | overflow: hidden; | 39 | overflow: hidden; |
38 | 40 | ||
39 | &:after { | 41 | &::after { |
40 | content: ''; | 42 | content: ''; |
41 | pointer-events: none; | 43 | pointer-events: none; |
42 | width: 100%; | 44 | width: 100%; |
@@ -48,11 +50,14 @@ | |||
48 | } | 50 | } |
49 | } | 51 | } |
50 | 52 | ||
51 | @mixin peertube-word-wrap { | 53 | @mixin peertube-word-wrap ($with-hyphen: true) { |
52 | word-break: break-word; | 54 | word-break: break-word; |
53 | word-wrap: break-word; | 55 | word-wrap: break-word; |
54 | overflow-wrap: break-word; | 56 | overflow-wrap: break-word; |
55 | hyphens: auto; | 57 | |
58 | @if $with-hyphen { | ||
59 | hyphens: auto; | ||
60 | } | ||
56 | } | 61 | } |
57 | 62 | ||
58 | @mixin apply-svg-color ($color) { | 63 | @mixin apply-svg-color ($color) { |
@@ -109,9 +114,9 @@ | |||
109 | padding-bottom: 0; | 114 | padding-bottom: 0; |
110 | flex-wrap: nowrap; | 115 | flex-wrap: nowrap; |
111 | 116 | ||
112 | .input-group-text{ | 117 | .input-group-text { |
113 | font-size: 14px; | 118 | font-size: 14px; |
114 | color: gray; | 119 | color: #808080; |
115 | } | 120 | } |
116 | } | 121 | } |
117 | 122 | ||
@@ -128,7 +133,9 @@ | |||
128 | @mixin orange-button { | 133 | @mixin orange-button { |
129 | @include button-focus(pvar(--mainColorLightest)); | 134 | @include button-focus(pvar(--mainColorLightest)); |
130 | 135 | ||
131 | &, &:active, &:focus { | 136 | &, |
137 | &:active, | ||
138 | &:focus { | ||
132 | color: #fff; | 139 | color: #fff; |
133 | background-color: pvar(--mainColor); | 140 | background-color: pvar(--mainColor); |
134 | } | 141 | } |
@@ -138,14 +145,15 @@ | |||
138 | background-color: pvar(--mainHoverColor); | 145 | background-color: pvar(--mainHoverColor); |
139 | } | 146 | } |
140 | 147 | ||
141 | &[disabled], &.disabled { | 148 | &[disabled], |
149 | &.disabled { | ||
142 | cursor: default; | 150 | cursor: default; |
143 | color: #fff; | 151 | color: #fff; |
144 | background-color: #C6C6C6; | 152 | background-color: #C6C6C6; |
145 | } | 153 | } |
146 | 154 | ||
147 | my-global-icon { | 155 | my-global-icon { |
148 | @include apply-svg-color(#fff) | 156 | @include apply-svg-color(#fff); |
149 | } | 157 | } |
150 | } | 158 | } |
151 | 159 | ||
@@ -155,7 +163,9 @@ | |||
155 | border: 2px solid pvar(--mainColor); | 163 | border: 2px solid pvar(--mainColor); |
156 | font-weight: $font-semibold; | 164 | font-weight: $font-semibold; |
157 | 165 | ||
158 | &, &:active, &:focus { | 166 | &, |
167 | &:active, | ||
168 | &:focus { | ||
159 | color: pvar(--mainColor); | 169 | color: pvar(--mainColor); |
160 | background-color: pvar(--mainBackgroundColor); | 170 | background-color: pvar(--mainBackgroundColor); |
161 | } | 171 | } |
@@ -165,14 +175,15 @@ | |||
165 | background-color: pvar(--mainColorLightest); | 175 | background-color: pvar(--mainColorLightest); |
166 | } | 176 | } |
167 | 177 | ||
168 | &[disabled], &.disabled { | 178 | &[disabled], |
179 | &.disabled { | ||
169 | cursor: default; | 180 | cursor: default; |
170 | color: pvar(--mainColor); | 181 | color: pvar(--mainColor); |
171 | background-color: #C6C6C6; | 182 | background-color: #C6C6C6; |
172 | } | 183 | } |
173 | 184 | ||
174 | my-global-icon { | 185 | my-global-icon { |
175 | @include apply-svg-color(pvar(--mainColor)) | 186 | @include apply-svg-color(pvar(--mainColor)); |
176 | } | 187 | } |
177 | } | 188 | } |
178 | 189 | ||
@@ -182,12 +193,13 @@ | |||
182 | color: pvar(--greyForegroundColor); | 193 | color: pvar(--greyForegroundColor); |
183 | background-color: transparent; | 194 | background-color: transparent; |
184 | 195 | ||
185 | &[disabled], &.disabled { | 196 | &[disabled], |
197 | .disabled { | ||
186 | cursor: default; | 198 | cursor: default; |
187 | } | 199 | } |
188 | 200 | ||
189 | my-global-icon { | 201 | my-global-icon { |
190 | @include apply-svg-color(transparent) | 202 | @include apply-svg-color(transparent); |
191 | } | 203 | } |
192 | } | 204 | } |
193 | 205 | ||
@@ -197,17 +209,22 @@ | |||
197 | background-color: $grey-background-color; | 209 | background-color: $grey-background-color; |
198 | color: pvar(--greyForegroundColor); | 210 | color: pvar(--greyForegroundColor); |
199 | 211 | ||
200 | &:hover, &:active, &:focus, &[disabled], &.disabled { | 212 | &:hover, |
213 | &:active, | ||
214 | &:focus, | ||
215 | &[disabled], | ||
216 | &.disabled { | ||
201 | color: pvar(--greyForegroundColor); | 217 | color: pvar(--greyForegroundColor); |
202 | background-color: $grey-background-hover-color; | 218 | background-color: $grey-background-hover-color; |
203 | } | 219 | } |
204 | 220 | ||
205 | &[disabled], &.disabled { | 221 | &[disabled], |
222 | &.disabled { | ||
206 | cursor: default; | 223 | cursor: default; |
207 | } | 224 | } |
208 | 225 | ||
209 | my-global-icon { | 226 | my-global-icon { |
210 | @include apply-svg-color(pvar(--greyForegroundColor)) | 227 | @include apply-svg-color(pvar(--greyForegroundColor)); |
211 | } | 228 | } |
212 | } | 229 | } |
213 | 230 | ||
@@ -216,24 +233,30 @@ | |||
216 | $text: #fff6f5; | 233 | $text: #fff6f5; |
217 | 234 | ||
218 | @include button-focus(scale-color($color, $alpha: -95%)); | 235 | @include button-focus(scale-color($color, $alpha: -95%)); |
236 | |||
219 | background-color: $color; | 237 | background-color: $color; |
220 | color: $text; | 238 | color: $text; |
221 | 239 | ||
222 | &:hover, &:active, &:focus, &[disabled], &.disabled { | 240 | &:hover, |
241 | &:active, | ||
242 | &:focus, | ||
243 | &[disabled], | ||
244 | &.disabled { | ||
223 | background-color: lighten($color: $color, $amount: 10); | 245 | background-color: lighten($color: $color, $amount: 10); |
224 | } | 246 | } |
225 | 247 | ||
226 | &[disabled], &.disabled { | 248 | &[disabled], |
249 | &.disabled { | ||
227 | cursor: default; | 250 | cursor: default; |
228 | } | 251 | } |
229 | 252 | ||
230 | my-global-icon { | 253 | my-global-icon { |
231 | @include apply-svg-color($text) | 254 | @include apply-svg-color($text); |
232 | } | 255 | } |
233 | } | 256 | } |
234 | 257 | ||
235 | @mixin peertube-button { | 258 | @mixin peertube-button { |
236 | border: none; | 259 | border: 0; |
237 | font-weight: $font-semibold; | 260 | font-weight: $font-semibold; |
238 | font-size: 15px; | 261 | font-size: 15px; |
239 | height: $button-height; | 262 | height: $button-height; |
@@ -246,18 +269,17 @@ | |||
246 | } | 269 | } |
247 | 270 | ||
248 | @mixin peertube-button-link { | 271 | @mixin peertube-button-link { |
249 | display: inline-block; | ||
250 | |||
251 | @include disable-default-a-behaviour; | 272 | @include disable-default-a-behaviour; |
252 | @include peertube-button; | 273 | @include peertube-button; |
253 | } | ||
254 | 274 | ||
255 | @mixin peertube-button-outline { | ||
256 | display: inline-block; | 275 | display: inline-block; |
276 | } | ||
257 | 277 | ||
278 | @mixin peertube-button-outline { | ||
258 | @include disable-default-a-behaviour; | 279 | @include disable-default-a-behaviour; |
259 | @include peertube-button; | 280 | @include peertube-button; |
260 | 281 | ||
282 | display: inline-block; | ||
261 | border: 1px solid; | 283 | border: 1px solid; |
262 | } | 284 | } |
263 | 285 | ||
@@ -291,17 +313,17 @@ | |||
291 | filter: alpha(opacity=0); | 313 | filter: alpha(opacity=0); |
292 | opacity: 0; | 314 | opacity: 0; |
293 | outline: none; | 315 | outline: none; |
294 | background: white; | 316 | background: #fff; |
295 | cursor: inherit; | 317 | cursor: inherit; |
296 | display: block; | 318 | display: block; |
297 | } | 319 | } |
298 | } | 320 | } |
299 | 321 | ||
300 | @mixin peertube-button-file ($width) { | 322 | @mixin peertube-button-file ($width) { |
301 | width: $width; | ||
302 | |||
303 | @include peertube-file; | 323 | @include peertube-file; |
304 | @include peertube-button; | 324 | @include peertube-button; |
325 | |||
326 | width: $width; | ||
305 | } | 327 | } |
306 | 328 | ||
307 | @mixin icon ($size) { | 329 | @mixin icon ($size) { |
@@ -317,7 +339,7 @@ | |||
317 | @mixin select-arrow-down { | 339 | @mixin select-arrow-down { |
318 | top: 50%; | 340 | top: 50%; |
319 | right: calc(0% + 15px); | 341 | right: calc(0% + 15px); |
320 | content: " "; | 342 | content: ' '; |
321 | height: 0; | 343 | height: 0; |
322 | width: 0; | 344 | width: 0; |
323 | position: absolute; | 345 | position: absolute; |
@@ -358,7 +380,7 @@ | |||
358 | width: 100%; | 380 | width: 100%; |
359 | } | 381 | } |
360 | 382 | ||
361 | &:after { | 383 | &::after { |
362 | @include select-arrow-down; | 384 | @include select-arrow-down; |
363 | } | 385 | } |
364 | 386 | ||
@@ -394,21 +416,21 @@ | |||
394 | option { | 416 | option { |
395 | font-weight: $font-semibold; | 417 | font-weight: $font-semibold; |
396 | color: pvar(--greyForegroundColor); | 418 | color: pvar(--greyForegroundColor); |
397 | border: none; | 419 | border: 0; |
398 | } | 420 | } |
399 | } | 421 | } |
400 | } | 422 | } |
401 | 423 | ||
402 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ | 424 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ |
403 | @mixin peertube-radio-container { | 425 | @mixin peertube-radio-container { |
404 | input[type="radio"] { | 426 | input[type=radio] { |
405 | display: none; | 427 | display: none; |
406 | 428 | ||
407 | & + label { | 429 | + label { |
408 | font-weight: $font-regular; | 430 | font-weight: $font-regular; |
409 | cursor: pointer; | 431 | cursor: pointer; |
410 | 432 | ||
411 | &:before { | 433 | &::before { |
412 | position: relative; | 434 | position: relative; |
413 | top: -2px; | 435 | top: -2px; |
414 | content: ''; | 436 | content: ''; |
@@ -425,12 +447,12 @@ | |||
425 | } | 447 | } |
426 | } | 448 | } |
427 | 449 | ||
428 | &:checked + label:before { | 450 | &:checked + label::before { |
429 | background-color: #000; | 451 | background-color: #000; |
430 | box-shadow: inset 0 0 0 4px #fff; | 452 | box-shadow: inset 0 0 0 4px #fff; |
431 | } | 453 | } |
432 | 454 | ||
433 | &:focus + label:before { | 455 | &:focus + label::before { |
434 | outline: none; | 456 | outline: none; |
435 | border-color: #000; | 457 | border-color: #000; |
436 | } | 458 | } |
@@ -445,7 +467,7 @@ | |||
445 | box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); | 467 | box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); |
446 | } | 468 | } |
447 | 469 | ||
448 | & + span { | 470 | + span { |
449 | position: relative; | 471 | position: relative; |
450 | width: 18px; | 472 | width: 18px; |
451 | min-width: 18px; | 473 | min-width: 18px; |
@@ -455,7 +477,7 @@ | |||
455 | vertical-align: middle; | 477 | vertical-align: middle; |
456 | cursor: pointer; | 478 | cursor: pointer; |
457 | 479 | ||
458 | &:after { | 480 | &::after { |
459 | content: ''; | 481 | content: ''; |
460 | position: absolute; | 482 | position: absolute; |
461 | top: calc(2px - #{$border-width}); | 483 | top: calc(2px - #{$border-width}); |
@@ -474,13 +496,13 @@ | |||
474 | background: pvar(--mainColor); | 496 | background: pvar(--mainColor); |
475 | animation: jelly 0.6s ease; | 497 | animation: jelly 0.6s ease; |
476 | 498 | ||
477 | &:after { | 499 | &::after { |
478 | opacity: 1; | 500 | opacity: 1; |
479 | transform: rotate(45deg) scale(1); | 501 | transform: rotate(45deg) scale(1); |
480 | } | 502 | } |
481 | } | 503 | } |
482 | 504 | ||
483 | & + span + span { | 505 | + span + span { |
484 | font-size: 15px; | 506 | font-size: 15px; |
485 | font-weight: $font-regular; | 507 | font-weight: $font-regular; |
486 | margin-left: 5px; | 508 | margin-left: 5px; |
@@ -489,7 +511,7 @@ | |||
489 | } | 511 | } |
490 | 512 | ||
491 | &[disabled] + span, | 513 | &[disabled] + span, |
492 | &[disabled] + span + span{ | 514 | &[disabled] + span + span { |
493 | opacity: 0.5; | 515 | opacity: 0.5; |
494 | cursor: default; | 516 | cursor: default; |
495 | } | 517 | } |
@@ -539,21 +561,12 @@ | |||
539 | } | 561 | } |
540 | } | 562 | } |
541 | 563 | ||
542 | @mixin avatar ($size) { | 564 | @mixin actor-avatar-size ($size) { |
543 | object-fit: cover; | 565 | display: inline-block; |
544 | border-radius: 50%; | ||
545 | width: $size; | ||
546 | height: $size; | ||
547 | min-width: $size; | ||
548 | min-height: $size; | ||
549 | } | ||
550 | |||
551 | @mixin channel-avatar ($size) { | ||
552 | width: $size; | 566 | width: $size; |
553 | height: $size; | 567 | height: $size; |
554 | min-width: $size; | 568 | min-width: $size; |
555 | min-height: $size; | 569 | min-height: $size; |
556 | border-radius: 5px; | ||
557 | } | 570 | } |
558 | 571 | ||
559 | @mixin chevron ($size, $border-width) { | 572 | @mixin chevron ($size, $border-width) { |
@@ -595,26 +608,6 @@ | |||
595 | margin-bottom: 10px; | 608 | margin-bottom: 10px; |
596 | } | 609 | } |
597 | 610 | ||
598 | @mixin actor-owner { | ||
599 | @include disable-default-a-behaviour; | ||
600 | |||
601 | font-size: 13px; | ||
602 | margin-top: 4px; | ||
603 | color: pvar(--mainForegroundColor); | ||
604 | |||
605 | span:hover { | ||
606 | opacity: 0.8; | ||
607 | } | ||
608 | |||
609 | img { | ||
610 | @include avatar(18px); | ||
611 | |||
612 | margin-left: 7px; | ||
613 | position: relative; | ||
614 | top: -2px; | ||
615 | } | ||
616 | } | ||
617 | |||
618 | @mixin create-button { | 611 | @mixin create-button { |
619 | @include peertube-button-link; | 612 | @include peertube-button-link; |
620 | @include orange-button; | 613 | @include orange-button; |
@@ -714,13 +707,13 @@ | |||
714 | color: pvar(--mainColor); | 707 | color: pvar(--mainColor); |
715 | } | 708 | } |
716 | 709 | ||
717 | & + .breadcrumb-item { | 710 | + .breadcrumb-item { |
718 | padding-left: 0.5rem; | 711 | padding-left: 0.5rem; |
719 | &::before { | 712 | &::before { |
720 | display: inline-block; | 713 | display: inline-block; |
721 | padding-right: 0.5rem; | 714 | padding-right: 0.5rem; |
722 | color: #6c757d; | 715 | color: #6c757d; |
723 | content: "/"; | 716 | content: '/'; |
724 | } | 717 | } |
725 | } | 718 | } |
726 | 719 | ||
@@ -735,13 +728,13 @@ | |||
735 | flex-wrap: wrap; | 728 | flex-wrap: wrap; |
736 | margin: 0 -5px; | 729 | margin: 0 -5px; |
737 | 730 | ||
738 | & > div { | 731 | > div { |
739 | box-sizing: border-box; | 732 | box-sizing: border-box; |
740 | flex: 0 0 percentage(1/3); | 733 | flex: 0 0 percentage(1/3); |
741 | padding: 0 5px; | 734 | padding: 0 5px; |
742 | margin-bottom: 10px; | 735 | margin-bottom: 10px; |
743 | 736 | ||
744 | & > a { | 737 | > a { |
745 | @include disable-default-a-behaviour; | 738 | @include disable-default-a-behaviour; |
746 | 739 | ||
747 | text-decoration: none; | 740 | text-decoration: none; |
@@ -756,8 +749,8 @@ | |||
756 | } | 749 | } |
757 | } | 750 | } |
758 | 751 | ||
759 | & > a, | 752 | > a, |
760 | & > div { | 753 | > div { |
761 | padding: 20px; | 754 | padding: 20px; |
762 | background: pvar(--submenuBackgroundColor); | 755 | background: pvar(--submenuBackgroundColor); |
763 | border-radius: 4px; | 756 | border-radius: 4px; |
@@ -766,7 +759,8 @@ | |||
766 | } | 759 | } |
767 | } | 760 | } |
768 | 761 | ||
769 | .dashboard-num, .dashboard-text { | 762 | .dashboard-num, |
763 | .dashboard-text { | ||
770 | text-align: center; | 764 | text-align: center; |
771 | font-size: 130%; | 765 | font-size: 130%; |
772 | color: pvar(--mainForegroundColor); | 766 | color: pvar(--mainForegroundColor); |
@@ -830,17 +824,9 @@ | |||
830 | --chip-padding: .2rem .3rem; | 824 | --chip-padding: .2rem .3rem; |
831 | } | 825 | } |
832 | 826 | ||
833 | .avatar { | 827 | my-actor-avatar { |
834 | margin-left: -.4rem; | 828 | margin-left: -.4rem; |
835 | margin-right: .2rem; | 829 | margin-right: .2rem; |
836 | height: $avatar-height; | ||
837 | width: $avatar-height; | ||
838 | |||
839 | border-radius: 50%; | ||
840 | display: inline-block; | ||
841 | line-height: 1.25; | ||
842 | position: relative; | ||
843 | vertical-align: middle; | ||
844 | } | 830 | } |
845 | 831 | ||
846 | &.two-lines { | 832 | &.two-lines { |
@@ -848,9 +834,8 @@ | |||
848 | 834 | ||
849 | height: $avatar-height; | 835 | height: $avatar-height; |
850 | 836 | ||
851 | .avatar { | 837 | my-actor-avatar { |
852 | height: $avatar-height; | 838 | @include actor-avatar-size($avatar-height); |
853 | width: $avatar-height; | ||
854 | } | 839 | } |
855 | 840 | ||
856 | div { | 841 | div { |
@@ -868,7 +853,7 @@ | |||
868 | flex-direction: column; | 853 | flex-direction: column; |
869 | 854 | ||
870 | .form-sub-title { | 855 | .form-sub-title { |
871 | margin-right: 0px !important; | 856 | margin-right: 0 !important; |
872 | margin-bottom: 10px; | 857 | margin-bottom: 10px; |
873 | text-align: center; | 858 | text-align: center; |
874 | } | 859 | } |
@@ -914,15 +899,17 @@ | |||
914 | padding-bottom: 15px; | 899 | padding-bottom: 15px; |
915 | margin-bottom: $sub-menu-margin-bottom; | 900 | margin-bottom: $sub-menu-margin-bottom; |
916 | 901 | ||
902 | > span > my-global-icon, | ||
917 | > my-global-icon { | 903 | > my-global-icon { |
918 | margin-right: 10px; | 904 | margin-right: 10px; |
919 | vertical-align: bottom; | ||
920 | width: 24px; | 905 | width: 24px; |
921 | height: 24px; | 906 | height: 24px; |
907 | vertical-align: top; | ||
922 | } | 908 | } |
923 | 909 | ||
924 | .badge { | 910 | .badge { |
925 | margin-left: 7px; | 911 | margin-left: 7px; |
912 | vertical-align: top; | ||
926 | } | 913 | } |
927 | } | 914 | } |
928 | } | 915 | } |