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

feat: Replace deprecated sass things

Browse source 
- Global built-in functions
- Color functions
This commit is contained in:
sthag 2025-10-25 08:59:09 +02:00
parent 225c1dd55c
commit b739ddefda
13 changed files with 96 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

21
global/_common.scss
View file

@ -1,7 +1,7 @@
// Common styles for global usage
// -----------------------------------------------------------------------------
@use "sass:math";
@use "sass:color";
// General classes
@ -53,9 +53,9 @@
}
@each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}),
(medium, #{$space_medium}),
(large, #{$space_large}) {
(small, #{$space_small}),
(medium, #{$space_medium}),
(large, #{$space_large}) {
.space_top_#{$size} {
margin-top: $variable;
}
@ -108,7 +108,7 @@
}
.wrap_center {
&>* {
& > * {
margin-right: math.div((100% - $width_basic), 2);
margin-left: math.div((100% - $width_basic), 2);
@ -130,7 +130,6 @@
}
// Clearing and floating
// -----------------------------------------------------------------------------
.clear {
@ -169,7 +168,6 @@
}
// Inlining
// -----------------------------------------------------------------------------
.inline {
@ -177,7 +175,6 @@
}
// Flex & grid
// -----------------------------------------------------------------------------
%flex-inline {
@ -205,7 +202,6 @@
}
// Positioned elements
// -----------------------------------------------------------------------------
%viewport_fixed {
@ -276,11 +272,13 @@
.mouse_over {
@extend %viewport_fixed;
z-index: $z_heaven;
background-color: transparentize($color_darkest, 0.5);
transition: background-color $duration_long $timing_basic $duration_long;
pointer-events: none;
}
&.active {
background-color: color.adjust($color_darkest, $alpha: -0.5);
}
}
// Colors
@ -294,7 +292,6 @@
}
// Text
// -----------------------------------------------------------------------------
.txt_tiny {

28
global/_config.scss
View file

@ -1,6 +1,9 @@
@use "sass:color";
@use "sass:map";
@use "sass:math";
// Default configuration
// ------------------------------------------------------------------------------
@use "sass:math";
@ -86,15 +89,14 @@ $color_brightest: white !default;
$color_text_basic: black !default;
$color_back_basic: #808080 !default;
$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
$color_border_basic: color.scale($color_text_basic, $lightness: 12%) !default;
$color_front_basic: white !default;
$color_medium: lighten($color_darkest, 50%
);
$color_dark: lighten($color_darkest, $color_diff_double);
$color_darker: darken($color_back_basic, $color_diff_basic);
$color_brighter: lighten($color_back_basic, $color_diff_basic);
$color_bright: darken($color_brightest, $color_diff_double);
$color_medium: color.scale($color_darkest, $lightness: 50%);
$color_dark: color.scale($color_darkest, $lightness: $color_diff_double);
$color_darker: color.scale($color_back_basic, $lightness: -$color_diff_basic);
$color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic);
$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double);
$color_head_basic: $color_text_basic !default;
$color_link_basic: $delta_color !default;
@ -111,8 +113,8 @@ $color_list: (
@each $key, $value in $color_palette {
$map: (
);
$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
$color_list: map-merge($color_list, $map);
$map: map.merge($map, ($key: createColorMap($value, 15%, 0.5)));
$color_list: map.merge($color_list, $map);
}
@ -212,9 +214,9 @@ $io_focus_list: 'a[href]',
'textarea:not([disabled])',
'*[tabindex]';
$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
$color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default;
$color_text_button: $color_text_basic !default;
$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
$color_back_io: color.scale($color_front_basic, $lightness: -$color_diff_basic) !default;
$color_back_button: $color_darker !default;
$color_border_io: $color_front_basic !default;
$color_border_button: $color_dark !default;
@ -224,7 +226,7 @@ $border_io: $width_border_io solid $color_border_io;
$border_io_dotted: $width_border_io dotted $color_border_io;
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);