aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-11-24 09:51:58 +0100
committerChocobozzz <me@florianbigard.com>2022-11-24 09:52:33 +0100
commit72cd9f303ab592440027552ce8a869277f21a05b (patch)
tree0c5994261312bf543948e9a087b1b6afe2847e78
parent41e59dbe9bbc78af134d4a88f8466dfd491e75b0 (diff)
downloadPeerTube-72cd9f303ab592440027552ce8a869277f21a05b.tar.gz
PeerTube-72cd9f303ab592440027552ce8a869277f21a05b.tar.zst
PeerTube-72cd9f303ab592440027552ce8a869277f21a05b.zip
Don't use opional @extends
Not robust at all
-rw-r--r--client/src/sass/class-helpers.scss21
-rw-r--r--client/src/sass/include/_fonts.scss4
-rw-r--r--client/src/sass/include/_icons.scss24
-rw-r--r--client/src/sass/primeng-custom.scss12
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 }