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

14
elements/_grouping.scss
View file

@ -1,3 +1,5 @@
@use "sass:color";
// Grouping content
// -----------------------------------------------------------------------------
// p
@ -101,12 +103,12 @@ pre {
.pre_code {
overflow-x: auto;
border-color: darken($color_back_basic, $color_diff_tiny);
border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
border-style: dotted;
border-width: 0 0 0 $width_border_4;
border-radius: $radius_basic;
padding: $space_basic;
background-color: lighten($color_back_basic, $color_diff_tiny);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
code {
background-color: transparent;
@ -274,20 +276,20 @@ div {}
.box_placeholder {
width: 100%;
height: $space_medium;
border: $width_border_4 solid transparentize($alpha_color, 0.1);
border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
border-radius: $radius_basic;
background-color: transparentize($alpha_color, 0.2);
background-color: color.adjust($alpha_color, $alpha: -0.2);
}
.box_placeholder_bkg {
width: 100%;
height: $space_medium * 2;
border: $width_border_4 solid transparentize($color_front_basic, 0.1);
border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
border-radius: $radius_basic;
padding: $space_basic;
/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
background-color: transparentize($color_front_basic, 0.1);
background-color: color.adjust($color_front_basic, $alpha: -0.1);
}
.box_file_tile {

8
elements/_interactive.scss
View file

@ -1,3 +1,5 @@
@use "sass:color";
// Forms
// -----------------------------------------------------------------------------
// form
@ -88,7 +90,7 @@ td > textarea {
&[readonly="readonly"],
&[readonly] {
background-color: darken($color_back_io, $color_diff_double);
background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
}
&[disabled="disabled"],
@ -117,7 +119,7 @@ td > textarea {
&[readonly="readonly"],
&[readonly] {
border-color: darken($color_border_io, $color_diff_double);
border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
}
&[disabled="disabled"],
@ -165,7 +167,7 @@ button {
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
color: lighten($color_text_button, $color_diff_double);
color: color.scale($color_text_button, $lightness: $color_diff_double);
&:hover {
background-color: $color_back_button;

8
elements/_tables.scss
View file

@ -1,3 +1,5 @@
@use "sass:color";
// Tabular data
// -----------------------------------------------------------------------------
// table
@ -40,7 +42,7 @@ table {
}
tr:nth-child(even) td {
background-color: lighten($color_back_basic, $color_diff_tiny);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
}
}
@ -125,6 +127,6 @@ td:last-child {
.cell_pre {
// border-right-width: $width_border_4;
// border-right-color: lighten($color_back_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
}

20
elements/_textlevel.scss
View file

@ -1,3 +1,5 @@
@use "sass:color";
// Text-Level semantics
// -----------------------------------------------------------------------------
// a
@ -38,7 +40,7 @@
// -----------------------------------------------------------------------------
a {
color: $color_link_basic;
// color: lighten($color_action_basic, 20%);
// color: color.scale($color_action_basic, $lightness: 20%);
text-decoration: none;
&:active,
@ -80,13 +82,13 @@ a {
display: inline-block;
padding: $padding_basic;
border-radius: $radius_basic;
background-color: transparentize($color_link_basic, 0.8);
background-color: color.adjust($color_link_basic, $alpha: -0.8);
&:active,
&:focus,
&:hover {
border-color: transparent;
background-color: transparentize($color_highlight_basic, 0.8);
background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
}
}
@ -194,8 +196,8 @@ time {
// -----------------------------------------------------------------------------
code {
@extend %basic_mono;
color: lighten($color_text_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
}
.code_solo {
@ -227,7 +229,7 @@ kbd {
border-style: solid;
border-color: $color_darker;
border-radius: $radius_basic;
color: lighten($color_text_basic, $color_diff_basic);
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
}
// Sub- and superscript
@ -249,17 +251,17 @@ mark {
}
.mark_cursor {
color: invert($color_text_basic);
color: color.invert($color_text_basic);
background-color: $color_text_basic;
}
::-moz-selection {
color: invert($color_text_basic);
color: color.invert($color_text_basic);
background-color: $color_text_basic;
}
::selection {
color: invert($color_text_basic);
color: color.invert($color_text_basic);
background-color: $color_text_basic;
}