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

Compare commits

base: interaktionsweise:b4c56320060548dacde62639876c6aee72b297ea
Branches Tags
interaktionsweise:development
interaktionsweise:main
..
compare: interaktionsweise:b42c8cdd7e29aff34a108266a72a1be603145984
Branches Tags
interaktionsweise:development
interaktionsweise:main

3 commits
b4c5632006 ... b42c8cdd7e

Author SHA1 Message Date
sthag
b42c8cdd7e feat: Change table io 2026-03-17 00:33:37 +01:00
sthag
eb4349f9e5 feat: Change - to _ for selector names 2026-03-15 12:23:14 +01:00
sthag
89db97c358 feat: New table styles 
- Add variant with flex row
- Change style to be dependant
 2026-03-15 11:32:27 +01:00
5 changed files with 45 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
elements/_grouping.scss
View file

@ -302,7 +302,7 @@ div {
display: flex; display: flex;
&.inline { &.inline {
@extend %flex-inline; @extend %flex_inline;
} }
&.stretch { &.stretch {

6
elements/_sections.scss
View file

@ -44,7 +44,7 @@ body {
} }
&:hover { &:hover {
#mouse-overlay { #mouse_overlay {
background-color: transparent !important; background-color: transparent !important;
transition: background-color config.$duration_basic config.$timing_basic 0s !important; transition: background-color config.$duration_basic config.$timing_basic 0s !important;
} }
@ -244,7 +244,7 @@ header {
nav, nav,
ul { ul {
@extend %flex-inline; @extend %flex_inline;
align-items: stretch; align-items: stretch;
} }
@ -276,7 +276,7 @@ header {
footer { footer {
&.io { &.io {
nav { nav {
@extend %flex-inline; @extend %flex_inline;
align-items: stretch; align-items: stretch;
input, input,

34
elements/_tables.scss
View file

@ -39,7 +39,7 @@ table {
border: config.$width_border_basic solid transparent; border: config.$width_border_basic solid transparent;
} }
&.stripe { &.striped {
td { td {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
@ -54,8 +54,21 @@ table {
table-layout: fixed; table-layout: fixed;
} }
&.table_file_simple { &.flexible {
@extend .width_full; tr {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
&:last-child td {
border-bottom: none;
}
td.truncate {
flex: 1;
min-width: 0;
}
}
} }
&.draggable tbody tr { &.draggable tbody tr {
@ -192,6 +205,12 @@ th, td {
display: none; display: none;
} }
} }
&.pre {
// border-right-width: $width_border_4;
// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
}
} }
th { th {
@ -213,8 +232,6 @@ td {
} }
&.ellipsis { &.ellipsis {
width: 100%;
max-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -234,7 +251,6 @@ td {
max-height: 44px; max-height: 44px;
} }
} }
} }
td:last-child { td:last-child {
@ -244,9 +260,3 @@ td:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
.cell_pre {
// border-right-width: $width_border_4;
// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
}

12
global/_common.scss
View file

@ -163,7 +163,7 @@
// Flex & grid // Flex & grid
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
%flex-inline { %flex_inline {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -172,18 +172,18 @@
gap: config.$space_half config.$space_basic; gap: config.$space_half config.$space_basic;
} }
%flex-column, %flex_column,
%flex-row { %flex_row {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: config.$space_basic; gap: config.$space_basic;
} }
%flex-column { %flex_column {
flex-direction: column; flex-direction: column;
} }
%flex-row { %flex_row {
flex-direction: row; flex-direction: row;
} }
@ -255,7 +255,7 @@
} }
} }
#mouse-overlay { #mouse_overlay {
@extend %viewport_fixed; @extend %viewport_fixed;
z-index: config.$z_heaven; z-index: config.$z_heaven;
transition: background-color config.$duration_long config.$timing_basic config.$duration_long; transition: background-color config.$duration_long config.$timing_basic config.$duration_long;

20
modules/io/_io_module.scss
View file

@ -78,17 +78,23 @@ aside {
header, header,
footer { footer {
&.io { &.io {
@extend %flex-inline; @extend %flex_inline;
align-items: stretch; align-items: stretch;
} }
} }
table .io nav { table {
@extend %flex-inline; .io nav {
flex-wrap: nowrap; @extend %flex_inline;
align-items: stretch; flex-wrap: nowrap;
align-items: stretch;
button { button {
margin: config.$margin_io; margin: config.$margin_io;
}
}
.io:last-child nav {
justify-content: flex-end;
} }
} }