diff options
author | Chocobozzz <me@florianbigard.com> | 2023-05-25 14:27:35 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2023-05-25 14:36:17 +0200 |
commit | ffc424259ebe5d670136d6c6183f3d65632655a5 (patch) | |
tree | 519b134c872d8c00b43cc96e2e04a2d39b8ccbf7 /client/src/sass/include | |
parent | 38358661e03d141c7129c28f3cc7ddfd6e06e7e8 (diff) | |
download | PeerTube-ffc424259ebe5d670136d6c6183f3d65632655a5.tar.gz PeerTube-ffc424259ebe5d670136d6c6183f3d65632655a5.tar.zst PeerTube-ffc424259ebe5d670136d6c6183f3d65632655a5.zip |
Fix scss lint
Diffstat (limited to 'client/src/sass/include')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 16 | ||||
-rw-r--r-- | client/src/sass/include/_variables.scss | 6 |
2 files changed, 12 insertions, 10 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 7a100a53d..a25741d91 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -1,4 +1,6 @@ | |||
1 | @use 'sass:math'; | 1 | @use 'sass:math'; |
2 | @use 'sass:color'; | ||
3 | |||
2 | @use '_variables' as *; | 4 | @use '_variables' as *; |
3 | 5 | ||
4 | @import '_bootstrap-mixins'; | 6 | @import '_bootstrap-mixins'; |
@@ -220,7 +222,7 @@ | |||
220 | } | 222 | } |
221 | 223 | ||
222 | @mixin danger-button { | 224 | @mixin danger-button { |
223 | $color: lighten($color: #c54130, $amount: 10); | 225 | $color: color.adjust($color: #c54130, $lightness: 10%); |
224 | $text: #fff6f5; | 226 | $text: #fff6f5; |
225 | 227 | ||
226 | @include button-focus(scale-color($color, $alpha: -95%)); | 228 | @include button-focus(scale-color($color, $alpha: -95%)); |
@@ -233,7 +235,7 @@ | |||
233 | &:focus, | 235 | &:focus, |
234 | &[disabled], | 236 | &[disabled], |
235 | &.disabled { | 237 | &.disabled { |
236 | background-color: lighten($color: $color, $amount: 10); | 238 | background-color: color.adjust($color: $color, $lightness: 10%); |
237 | } | 239 | } |
238 | 240 | ||
239 | &[disabled], | 241 | &[disabled], |
@@ -676,7 +678,7 @@ | |||
676 | transition: width 0.6s ease; | 678 | transition: width 0.6s ease; |
677 | 679 | ||
678 | &.red { | 680 | &.red { |
679 | background-color: lighten($color: #c54130, $amount: 10); | 681 | background-color: color.adjust($color: #c54130, $lightness: 10%); |
680 | } | 682 | } |
681 | } | 683 | } |
682 | } | 684 | } |
@@ -721,7 +723,7 @@ | |||
721 | 723 | ||
722 | > div { | 724 | > div { |
723 | box-sizing: border-box; | 725 | box-sizing: border-box; |
724 | flex: 0 0 percentage(math.div(1, 3)); | 726 | flex: 0 0 math.percentage(math.div(1, 3)); |
725 | padding: 0 5px; | 727 | padding: 0 5px; |
726 | margin-bottom: 10px; | 728 | margin-bottom: 10px; |
727 | 729 | ||
@@ -832,7 +834,7 @@ | |||
832 | // an immediate's parent size. This allows to set a ratio without explicit | 834 | // an immediate's parent size. This allows to set a ratio without explicit |
833 | // dimensions, as width/height cannot be computed from each other. | 835 | // dimensions, as width/height cannot be computed from each other. |
834 | @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) { | 836 | @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) { |
835 | $padding-percent: percentage($inverted-ratio); | 837 | $padding-percent: math.percentage($inverted-ratio); |
836 | 838 | ||
837 | position: relative; | 839 | position: relative; |
838 | height: 0; | 840 | height: 0; |
@@ -889,7 +891,7 @@ | |||
889 | 891 | ||
890 | @mixin on-small-main-col () { | 892 | @mixin on-small-main-col () { |
891 | :host-context(.main-col:not(.expanded)) { | 893 | :host-context(.main-col:not(.expanded)) { |
892 | @media screen and (max-width: $small-view + $menu-width) { | 894 | @media screen and (max-width: #{$small-view + $menu-width}) { |
893 | @content; | 895 | @content; |
894 | } | 896 | } |
895 | } | 897 | } |
@@ -903,7 +905,7 @@ | |||
903 | 905 | ||
904 | @mixin on-mobile-main-col () { | 906 | @mixin on-mobile-main-col () { |
905 | :host-context(.main-col:not(.expanded)) { | 907 | :host-context(.main-col:not(.expanded)) { |
906 | @media screen and (max-width: $mobile-view + $menu-width) { | 908 | @media screen and (max-width: #{$mobile-view + $menu-width}) { |
907 | @content; | 909 | @content; |
908 | } | 910 | } |
909 | } | 911 | } |
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 1eb3135f4..43a005774 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss | |||
@@ -17,11 +17,11 @@ $grey-foreground-hover-color: #303030; | |||
17 | $grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%); | 17 | $grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%); |
18 | 18 | ||
19 | $main-color: hsl(24, 90%, 50%); | 19 | $main-color: hsl(24, 90%, 50%); |
20 | $main-color-lighter: lighten($main-color, 10%); | 20 | $main-color-lighter: color.adjust($main-color, $lightness: 10%); |
21 | $main-color-lightest: lighten($main-color, 40%); | 21 | $main-color-lightest: color.adjust($main-color, $lightness: 40%); |
22 | $main-color-very-light: #fff5eb; | 22 | $main-color-very-light: #fff5eb; |
23 | 23 | ||
24 | $main-hover-color: lighten($main-color, 5%); | 24 | $main-hover-color: color.adjust($main-color, $lightness: 5%); |
25 | $main-background-hover-color: #e9ecef; | 25 | $main-background-hover-color: #e9ecef; |
26 | 26 | ||
27 | $support-button: inherit; | 27 | $support-button: inherit; |