interaktionsweise/hippie-style
1
1
Fork 0
Code Pull requests Releases Activity

feat: Resolve all deprecation warnings for sass

Browse source 
- Replace @import with @use and @forward
- Only color function is used in _basic.scss for now
- Change _all.scss to _index.scss
- Modules use direct dependencies
- Move @include from _config.scss to _common.scss, this was a long term mistake
- Remove $color_list
- Change basic_color()
This commit is contained in:
sthag 2025-10-26 11:33:54 +01:00
parent 867e96ea0a
commit 4e4f8814d3
26 changed files with 476 additions and 420 deletions
Download patch file Download diff file Expand all files Collapse all files

68
modules/explanation/_explanation_module.scss
View file

@ -1,30 +1,38 @@
@use "sass:color";
@use "sass:math";
@use "../../global/config";
@use "../../global/common";
@use "../../functions/color" as *;
@use "../../mixins/vendor";
%expose_after {
&::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
background-color: rgba(basic_color(delta), 0.1) !important;
}
}
%expose_before {
&::before {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
background-color: rgba(basic_color(delta), 0.1) !important;
}
}
%expose {
&::before, &::after {
content: "";
display: block;
height: 48px;
background-color: rgba($delta_color, 0.1) !important;
background-color: rgba(basic_color(delta), 0.1) !important;
}
}
// %exp {
// }
%exp_hidden {
@ -37,39 +45,42 @@
.exp_overlay {
@extend %full_parent;
background-color: color.adjust($alpha_color, $alpha: -0.6);
background-color: color.adjust(basic_color(alpha), $alpha: -0.6);
}
.exp_pop {
@extend %exp_hidden !optional;
position: absolute;
z-index: 100;
top: $space_large;
left: $space_large;
padding: $space_half;
border: 4px solid $color_back_basic;
top: config.$space_large;
left: config.$space_large;
padding: config.$space_half;
border: 4px solid config.$color_back_basic;
border-radius: 4px;
background-color: $color_back_basic;
background-color: config.$color_back_basic;
pointer-events: none;
}
.exp_marker_pop {
position: absolute;
top: math.div(-$size_text_basic, 4) * 3;
right: math.div(-$size_text_basic, 2);
width: $size_text_basic;
height: $size_text_basic;
border: $space_tiny solid $color_highlight_basic;
border-radius: $size_text_basic;
color: $color_highlight_basic;
background-color: $color_darkest;
top: math.div(-(config.$size_text_basic), 4) * 3;
right: math.div(-(config.$size_text_basic), 2);
width: config.$size_text_basic;
height: config.$size_text_basic;
border: config.$space_tiny solid config.$color_highlight_basic;
border-radius: config.$size_text_basic;
color: config.$color_highlight_basic;
background-color: config.$color_darkest;
}
.exp_expose {
@extend %expose !optional;
}
.exp_expose_pre {
@extend %expose_after;
}
.exp_expose_post {
@extend %expose_before;
}
@ -81,21 +92,25 @@
// padding: $space_basic $space_basic * 2;
cursor: pointer;
}
.exp_help_btn {
display: table;
right: $space_double;
bottom: $space_double;
background-color: rgba($color_darkest, 0.4);
right: config.$space_double;
bottom: config.$space_double;
background-color: rgba(config.$color_darkest, 0.4);
&:hover {
background-color: $color_brightest;
background-color: config.$color_brightest;
> .span_solo {
color: $color_darkest;
color: config.$color_darkest;
}
}
.span_solo {
display: table-cell;
color: rgba($color_brightest, 0.8);
font-family: $family_text_mono;
color: rgba(config.$color_brightest, 0.8);
font-family: config.$family_text_mono;
font-size: 1.4em;
text-align: center;
vertical-align: middle;
@ -103,13 +118,12 @@
}
.expose_height {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($delta_color, 0.1) !important;
@include vendor-prefix(transition, height 0.5s ease);
background-color: rgba(basic_color(delta), 0.1) !important;
@include vendor.vendor-prefix(transition, height 0.5s ease);
}