Don't use opional @extends

Not robust at all

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 @@
 @use '_mixins' as *;
 @use '_badges' as *;
 @use '_icons' as *;
+@use '_fonts' as *;
 
 .link-orange {
   color: pvar(--mainForegroundColor);
@@ -62,7 +63,7 @@
 // ---------------------------------------------------------------------------
 
 .muted {
-  color: pvar(--greyForegroundColor) !important;
+  @include muted;
 }
 
 // ---------------------------------------------------------------------------
@@ -111,7 +112,7 @@
 }
 
 .form-group-description {
-  @extend .muted !optional;
+  @include muted;
 
   font-size: 14px;
   margin-top: 10px;
@@ -219,27 +220,19 @@ label + .form-group-description {
 // ---------------------------------------------------------------------------
 
 .chevron-down {
-  @include chevron-down(0.55rem, 0.15rem);
-
-  margin: 0 8px;
+  @include chevron-down-default;
 }
 
 .chevron-up {
-  @include chevron-up(0.55rem, 0.15rem);
-
-  margin: 0 8px;
+  @include chevron-up-default;
 }
 
 .chevron-right {
-  @include chevron-right(0.55rem, 0.15rem);
-
-  margin: 0 8px;
+  @include chevron-right-default;
 }
 
 .chevron-left {
-  @include chevron-left(0.55rem, 0.15rem);
-
-  margin: 0 8px;
+  @include chevron-left-default;
 }
 
 // ---------------------------------------------------------------------------
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 @@
   font-display: swap;
   src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2');
 }
+
+@mixin muted {
+  color: pvar(--greyForegroundColor) !important;
+}
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 @@
   transform: rotate(45deg);
 }
 
+@mixin chevron-right-default {
+  @include chevron-right(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
 @mixin chevron-down ($size, $border-width) {
   @include chevron($size, $border-width);
 
@@ -25,6 +31,12 @@
   transform: rotate(135deg);
 }
 
+@mixin chevron-down-default {
+  @include chevron-down(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
 @mixin chevron-up ($size, $border-width) {
   @include chevron($size, $border-width);
 
@@ -32,6 +44,12 @@
   transform: rotate(-45deg);
 }
 
+@mixin chevron-up-default {
+  @include chevron-up(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
 @mixin chevron-left ($size, $border-width) {
   @include chevron($size, $border-width);
 
@@ -39,6 +57,12 @@
   transform: rotate(-135deg);
 }
 
+@mixin chevron-left-default {
+  @include chevron-left(0.55rem, 0.15rem);
+
+  margin: 0 8px;
+}
+
 // ---------------------------------------------------------------------------
 
 @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 {
           @include margin-right(10px);
 
           .p-paginator-icon {
-            @extend .chevron-left !optional;
+            @include chevron-left-default;
           }
         }
 
@@ -675,7 +675,7 @@ p-table {
           @include margin-left(10px);
 
           .p-paginator-icon {
-            @extend .chevron-right !optional;
+            @include chevron-right-default;
           }
         }
 
@@ -769,7 +769,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .chevron-right !optional;
+      @include chevron-right-default;
 
       color: #000 !important;
       text-align: end;
@@ -780,7 +780,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .chevron-left !optional;
+      @include chevron-left-default;
 
       color: #000 !important;
       text-align: start;
@@ -794,13 +794,13 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .chevron-up !optional;
+      @include chevron-up-default;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .chevron-down !optional;
+      @include chevron-down-default;
 
       color: #000 !important;
     }