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

feat: Change table styles

Browse source 
- Add styles from module to tables file
- Remove tables module
- Assign styles as depended classes instead of repeating element names
- Add draggable style for table
This commit is contained in:
sthag 2026-02-21 14:08:30 +01:00
parent 91d136f1c3
commit 69535d87ac
4 changed files with 119 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_basic.scss
View file

@ -37,5 +37,4 @@
// in dependency to other styles
// -----------------------------------------------------------------------------
@forward "modules/breakpoint/breakpoint_module";
@forward "modules/tables/tables_module";
@forward "modules/maintenance/maintenance_module";

104
elements/_tables.scss
View file

@ -4,6 +4,7 @@
@use "../global/common";
@use "../global/typography";
@use "../elements/grouping";
@use "../functions/color" as *;
// Tabular data
// -----------------------------------------------------------------------------
@ -25,9 +26,8 @@ table {
margin: config.$margin_double;
border: config.$border_basic;
border-collapse: collapse;
}
.table_blank {
&.blank {
border: config.$width_border_basic solid transparent;
th, td {
@ -35,11 +35,11 @@ table {
}
}
.table_free {
&.free {
border: config.$width_border_basic solid transparent;
}
.table_stripe {
&.stripe {
td {
border-top: 0;
border-bottom: 0;
@ -50,14 +50,55 @@ table {
}
}
.table_fix {
&.fix {
table-layout: fixed;
}
.table_file_simple {
&.table_file_simple {
@extend .width_full;
}
&.draggable tbody tr {
transition: opacity 0.2s;
&.dragging {
opacity: 0.5;
}
}
&.link {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: config.$border_basic;
&:hover {
background-color: config.$color_bright;
}
td:nth-child(2) {
width: 100%;
}
}
th,
td {
border: 0;
}
thead th,
tbody tr:nth-child(1) td {
&:last-child {
@extend .rigid;
width: 1%;
text-align: center;
}
}
}
}
// Caption
// -----------------------------------------------------------------------------
caption {
@ -116,6 +157,41 @@ th, td {
&.rigid {
white-space: nowrap;
}
&.icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
&.link {
padding-right: config.$space_basic;
padding-left: config.$space_basic;
&:hover {
background-color: basic_color(foxtrot);
span {
display: none;
}
a {
display: block;
color: config.$color_highlight_basic;
}
}
span {
display: block;
}
a {
display: none;
}
}
}
th {
@ -139,6 +215,22 @@ td {
text-overflow: ellipsis;
white-space: nowrap;
}
&.text {
padding-right: config.$space_basic;
padding-left: config.$space_basic;
text-align: left;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}
td:last-child {

6
global/_common.scss
View file

@ -338,3 +338,9 @@
// Focus
// -----------------------------------------------------------------------------
@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);
// Data attributes
// -----------------------------------------------------------------------------
[data-action="drag"] {
cursor: move;
}

77
modules/tables/_tables_module.scss
View file

@ -1,77 +0,0 @@
@use "../../global/config";
@use "../../global/typography";
@use "../../functions/color" as *;
.table_link {
width: 100%;
border: 0;
table-layout: auto;
tbody {
border-bottom: config.$border_basic;
&:hover {
background-color: config.$color_bright;
}
}
th,
td {
border: 0;
}
.cell_icon {
width: 48px;
text-align: center;
img {
vertical-align: text-top;
}
}
.cell_link {
padding-right: config.$space_basic;
padding-left: config.$space_basic;
&:hover {
background-color: basic_color(foxtrot);
a:first-child {
display: none;
}
a:last-child {
display: block;
color: config.$color_highlight_basic;
}
}
a {
display: block;
}
a:last-child {
display: none;
}
}
th:last-child,
.cell_date {
width: 16%;
text-align: center;
}
.cell_text {
padding-right: config.$space_basic;
padding-left: config.$space_basic;
div {
width: 100%;
}
.shorten {
@extend %short;
max-height: 44px;
}
}
}