interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Adapt new hippie-style structure

Browse source 
Sass deprecations removed.
This commit is contained in:
sthag 2025-10-26 11:37:47 +01:00
parent d9f7ae1ff9
commit c1fea8064e
11 changed files with 166 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

4
source/style/modules/ui/_form_module.scss
View file

@ -1,9 +1,11 @@
@use "../../hippie-style/hippie";
#grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(64px, auto);
margin-inline: $space_small;
margin-inline: hippie.$space_small;
}
#grid>div {

42
source/style/modules/ui/_frame_module.scss
View file

@ -1,5 +1,7 @@
@use "sass:color";
@use "../../hippie-style/hippie";
@mixin nav-spacer($name, $size, $orientation) {
.spacer.#{$name} {
width: $size;
@ -9,7 +11,7 @@
.body_frame {
@extend %flex-column;
background-color: $color_back_basic;
background-color: hippie.$color_back_basic;
position: relative;
height: 100%;
@ -20,7 +22,7 @@
border: 1px solid transparent;
}
&>header {
& > header {
background-color: rgba(0, 0, 0, .1);
}
@ -35,18 +37,18 @@
section {
&>header,
&>footer {
background-color: color.adjust($color_back_io, $alpha: -.5);
& > header,
& > footer {
background-color: color.adjust(hippie.$color_back_io, $alpha: -.5);
&:hover {
background-color: $color_back_io;
background-color: hippie.$color_back_io;
}
}
}
section,
section>div {
section > div {
flex: 1;
}
@ -84,53 +86,51 @@
textarea {
resize: none;
max-height: 128px;
margin: $margin_io;
margin: hippie.$margin_io;
border: 0;
padding: $space_half;
// color: $color_text_io;
padding: hippie.$space_half;
// color: hippie.$color_text_io;
color: white;
// background-color: $color_back_io;
// background-color: hippie.$color_back_io;
background-color: transparent;
line-height: 1.2;
}
}
#content {
background-color: $color_back_io;
background-color: hippie.$color_back_io;
&>table {
& > table {
width: 100%;
margin: 0;
border: 0;
tr:hover td {
background-color: $color_highlight_basic;
background-color: hippie.$color_highlight_basic;
}
th {
border: 1px solid $color_border_io;
border: 1px solid hippie.$color_border_io;
}
td {
border-width: 0 1px;
border-style: solid;
border-color: $color_border_io;
border-color: hippie.$color_border_io;
}
}
}
.io {
.spacer {
margin: 0;
border: $border_dotted;
border: hippie.$border_dotted;
padding: 0;
opacity: .25;
}
@include nav-spacer('a', $space_double, false);
@include nav-spacer('b', $space_small, false);
@include nav-spacer('a', hippie.$space_double, false);
@include nav-spacer('b', hippie.$space_small, false);
}

22
source/style/modules/ui/_new_module.scss
View file

@ -1,15 +1,17 @@
@use "sass:color";
@use "../../hippie-style/hippie";
$module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic;
$body_top_space: $module_top_height + hippie.$space_basic;
.body_new {
@extend %flex-column;
padding: $body_top_space $space_basic $space_basic;
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
}
.area {
transition: $transition_best;
transition: hippie.$transition_best;
&:hover {
background-color: #999;
@ -28,13 +30,13 @@ $body_top_space: $module_top_height + $space_basic;
.item {
// height: unset;
border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
border-style: dotted;
border-width: $width_border_8;
border-radius: $width_border_8;
padding: $space_basic;
background-color: rgb($color_back_basic, .5);
// background-color: lighten($color_back_basic, $color_diff_tiny);
border-width: hippie.$width_border_8;
border-radius: hippie.$width_border_8;
padding: hippie.$space_basic;
background-color: rgb(hippie.$color_back_basic, .5);
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
// background-color: gold;
}
@ -50,7 +52,7 @@ $body_top_space: $module_top_height + $space_basic;
width: 100%;
height: $module_top_height;
background-color: rgb(0, 0, 0, .8);
z-index: $z_top;
z-index: hippie.$z_top;
div:last-child {
flex: 1;