diff options
author | Chocobozzz <me@florianbigard.com> | 2022-11-24 09:51:58 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-11-24 09:52:33 +0100 |
commit | 72cd9f303ab592440027552ce8a869277f21a05b (patch) | |
tree | 0c5994261312bf543948e9a087b1b6afe2847e78 /client/src | |
parent | 41e59dbe9bbc78af134d4a88f8466dfd491e75b0 (diff) | |
download | PeerTube-72cd9f303ab592440027552ce8a869277f21a05b.tar.gz PeerTube-72cd9f303ab592440027552ce8a869277f21a05b.tar.zst PeerTube-72cd9f303ab592440027552ce8a869277f21a05b.zip |
Don't use opional @extends
Not robust at all
Diffstat (limited to 'client/src')
-rw-r--r-- | client/src/sass/class-helpers.scss | 21 | ||||
-rw-r--r-- | client/src/sass/include/_fonts.scss | 4 | ||||
-rw-r--r-- | client/src/sass/include/_icons.scss | 24 | ||||
-rw-r--r-- | client/src/sass/primeng-custom.scss | 12 |
4 files changed, 41 insertions, 20 deletions
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss index 72381d1a8..bc965331a 100644 --- a/client/src/sass/class-helpers.scss +++ b/client/src/sass/class-helpers.scss | |||
@@ -2,6 +2,7 @@ | |||
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | @use '_badges' as *; | 3 | @use '_badges' as *; |
4 | @use '_icons' as *; | 4 | @use '_icons' as *; |
5 | @use '_fonts' as *; | ||
5 | 6 | ||
6 | .link-orange { | 7 | .link-orange { |
7 | color: pvar(--mainForegroundColor); | 8 | color: pvar(--mainForegroundColor); |
@@ -62,7 +63,7 @@ | |||
62 | // --------------------------------------------------------------------------- | 63 | // --------------------------------------------------------------------------- |
63 | 64 | ||
64 | .muted { | 65 | .muted { |
65 | color: pvar(--greyForegroundColor) !important; | 66 | @include muted; |
66 | } | 67 | } |
67 | 68 | ||
68 | // --------------------------------------------------------------------------- | 69 | // --------------------------------------------------------------------------- |
@@ -111,7 +112,7 @@ | |||
111 | } | 112 | } |
112 | 113 | ||
113 | .form-group-description { | 114 | .form-group-description { |
114 | @extend .muted !optional; | 115 | @include muted; |
115 | 116 | ||
116 | font-size: 14px; | 117 | font-size: 14px; |
117 | margin-top: 10px; | 118 | margin-top: 10px; |
@@ -219,27 +220,19 @@ label + .form-group-description { | |||
219 | // --------------------------------------------------------------------------- | 220 | // --------------------------------------------------------------------------- |
220 | 221 | ||
221 | .chevron-down { | 222 | .chevron-down { |
222 | @include chevron-down(0.55rem, 0.15rem); | 223 | @include chevron-down-default; |
223 | |||
224 | margin: 0 8px; | ||
225 | } | 224 | } |
226 | 225 | ||
227 | .chevron-up { | 226 | .chevron-up { |
228 | @include chevron-up(0.55rem, 0.15rem); | 227 | @include chevron-up-default; |
229 | |||
230 | margin: 0 8px; | ||
231 | } | 228 | } |
232 | 229 | ||
233 | .chevron-right { | 230 | .chevron-right { |
234 | @include chevron-right(0.55rem, 0.15rem); | 231 | @include chevron-right-default; |
235 | |||
236 | margin: 0 8px; | ||
237 | } | 232 | } |
238 | 233 | ||
239 | .chevron-left { | 234 | .chevron-left { |
240 | @include chevron-left(0.55rem, 0.15rem); | 235 | @include chevron-left-default; |
241 | |||
242 | margin: 0 8px; | ||
243 | } | 236 | } |
244 | 237 | ||
245 | // --------------------------------------------------------------------------- | 238 | // --------------------------------------------------------------------------- |
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss index 514261d01..e5a40af34 100644 --- a/client/src/sass/include/_fonts.scss +++ b/client/src/sass/include/_fonts.scss | |||
@@ -15,3 +15,7 @@ | |||
15 | font-display: swap; | 15 | font-display: swap; |
16 | src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2'); | 16 | src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2'); |
17 | } | 17 | } |
18 | |||
19 | @mixin muted { | ||
20 | color: pvar(--greyForegroundColor) !important; | ||
21 | } | ||
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss index 5d8a312db..08a0c02e3 100644 --- a/client/src/sass/include/_icons.scss +++ b/client/src/sass/include/_icons.scss | |||
@@ -18,6 +18,12 @@ | |||
18 | transform: rotate(45deg); | 18 | transform: rotate(45deg); |
19 | } | 19 | } |
20 | 20 | ||
21 | @mixin chevron-right-default { | ||
22 | @include chevron-right(0.55rem, 0.15rem); | ||
23 | |||
24 | margin: 0 8px; | ||
25 | } | ||
26 | |||
21 | @mixin chevron-down ($size, $border-width) { | 27 | @mixin chevron-down ($size, $border-width) { |
22 | @include chevron($size, $border-width); | 28 | @include chevron($size, $border-width); |
23 | 29 | ||
@@ -25,6 +31,12 @@ | |||
25 | transform: rotate(135deg); | 31 | transform: rotate(135deg); |
26 | } | 32 | } |
27 | 33 | ||
34 | @mixin chevron-down-default { | ||
35 | @include chevron-down(0.55rem, 0.15rem); | ||
36 | |||
37 | margin: 0 8px; | ||
38 | } | ||
39 | |||
28 | @mixin chevron-up ($size, $border-width) { | 40 | @mixin chevron-up ($size, $border-width) { |
29 | @include chevron($size, $border-width); | 41 | @include chevron($size, $border-width); |
30 | 42 | ||
@@ -32,6 +44,12 @@ | |||
32 | transform: rotate(-45deg); | 44 | transform: rotate(-45deg); |
33 | } | 45 | } |
34 | 46 | ||
47 | @mixin chevron-up-default { | ||
48 | @include chevron-up(0.55rem, 0.15rem); | ||
49 | |||
50 | margin: 0 8px; | ||
51 | } | ||
52 | |||
35 | @mixin chevron-left ($size, $border-width) { | 53 | @mixin chevron-left ($size, $border-width) { |
36 | @include chevron($size, $border-width); | 54 | @include chevron($size, $border-width); |
37 | 55 | ||
@@ -39,6 +57,12 @@ | |||
39 | transform: rotate(-135deg); | 57 | transform: rotate(-135deg); |
40 | } | 58 | } |
41 | 59 | ||
60 | @mixin chevron-left-default { | ||
61 | @include chevron-left(0.55rem, 0.15rem); | ||
62 | |||
63 | margin: 0 8px; | ||
64 | } | ||
65 | |||
42 | // --------------------------------------------------------------------------- | 66 | // --------------------------------------------------------------------------- |
43 | 67 | ||
44 | @mixin arrow-up ($size) { | 68 | @mixin arrow-up ($size) { |
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index a82cdbbb9..fb1d3f7bd 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss | |||
@@ -667,7 +667,7 @@ p-table { | |||
667 | @include margin-right(10px); | 667 | @include margin-right(10px); |
668 | 668 | ||
669 | .p-paginator-icon { | 669 | .p-paginator-icon { |
670 | @extend .chevron-left !optional; | 670 | @include chevron-left-default; |
671 | } | 671 | } |
672 | } | 672 | } |
673 | 673 | ||
@@ -675,7 +675,7 @@ p-table { | |||
675 | @include margin-left(10px); | 675 | @include margin-left(10px); |
676 | 676 | ||
677 | .p-paginator-icon { | 677 | .p-paginator-icon { |
678 | @extend .chevron-right !optional; | 678 | @include chevron-right-default; |
679 | } | 679 | } |
680 | } | 680 | } |
681 | 681 | ||
@@ -769,7 +769,7 @@ p-calendar .p-datepicker { | |||
769 | } | 769 | } |
770 | 770 | ||
771 | .p-datepicker-next { | 771 | .p-datepicker-next { |
772 | @extend .chevron-right !optional; | 772 | @include chevron-right-default; |
773 | 773 | ||
774 | color: #000 !important; | 774 | color: #000 !important; |
775 | text-align: end; | 775 | text-align: end; |
@@ -780,7 +780,7 @@ p-calendar .p-datepicker { | |||
780 | } | 780 | } |
781 | 781 | ||
782 | .p-datepicker-prev { | 782 | .p-datepicker-prev { |
783 | @extend .chevron-left !optional; | 783 | @include chevron-left-default; |
784 | 784 | ||
785 | color: #000 !important; | 785 | color: #000 !important; |
786 | text-align: start; | 786 | text-align: start; |
@@ -794,13 +794,13 @@ p-calendar .p-datepicker { | |||
794 | .p-timepicker { | 794 | .p-timepicker { |
795 | 795 | ||
796 | .pi.pi-chevron-up { | 796 | .pi.pi-chevron-up { |
797 | @extend .chevron-up !optional; | 797 | @include chevron-up-default; |
798 | 798 | ||
799 | color: #000 !important; | 799 | color: #000 !important; |
800 | } | 800 | } |
801 | 801 | ||
802 | .pi.pi-chevron-down { | 802 | .pi.pi-chevron-down { |
803 | @extend .chevron-down !optional; | 803 | @include chevron-down-default; |
804 | 804 | ||
805 | color: #000 !important; | 805 | color: #000 !important; |
806 | } | 806 | } |