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; }