From c268f4fdcac9f4edec2503638ac6fdd98de467a9 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 19 Jun 2025 16:43:32 +0200 Subject: [PATCH 1/5] feat: New bound class io This is a change of paradigm! - Add io class bound to header element --- elements/_sections.scss | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/elements/_sections.scss b/elements/_sections.scss index 542a5dd..0b8edd8 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -180,6 +180,31 @@ header {} } } +header.io { + z-index: map.get($z-indexes, "content-top"); + padding: $space_basic; + + h1 { + margin: 0; + } + + input { + @extend .input_io; + } + + textarea { + @extend .io_textarea; + } + + select { + @extend .io_select; + } + + button { + @extend .button_io; + } +} + // Footer // ----------------------------------------------------------------------------- footer {} \ No newline at end of file From 1a3c25d8b5969b53ec0404c8e77fe6322d083042 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 20 Jun 2025 17:02:27 +0200 Subject: [PATCH 2/5] feat: New variants - Add flex inline placeholder - Add hr vertical class --- elements/_grouping.scss | 11 +++++++++++ global/_common.scss | 12 ++++++++++++ 2 files changed, 23 insertions(+) diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 42b3d3c..73f8a63 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -67,6 +67,13 @@ hr { border-width: $width_border_basic 0 0; border-style: solid; border-color: $color_border_basic; + + &.vertical { + display: inline; + height: $line_basic; + margin: 0 $space_double; + border-width: 0 $width_border_basic 0 0; + } } .hr_hidden { @@ -286,6 +293,10 @@ div {} // Flex .flex { display: flex; + + &.inline { + @extend %flex-inline; + } } .flex_wrap { diff --git a/global/_common.scss b/global/_common.scss index fcb9e3a..5a45c7b 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -173,6 +173,18 @@ +// Flex & grid +// ----------------------------------------------------------------------------- +%flex-inline { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + gap: $space_half $space_basic; +} + + + // Positioned elements // ----------------------------------------------------------------------------- %viewport_fixed { From 2f63dbe2b65ddb320c0a7ea186f04a9c3698c9e7 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 20 Jun 2025 17:07:03 +0200 Subject: [PATCH 3/5] feat: Changes to io Keyword "io" now has many more usage scenarios. - Default margin for io now 0 - New config value for inline element margin - Rename first classes - Io classes integrated to sections and groups --- elements/_interactive.scss | 6 +- elements/_sections.scss | 120 +++++++++++++++++++++++++++++++++++-- global/_config.scss | 3 +- 3 files changed, 121 insertions(+), 8 deletions(-) diff --git a/elements/_interactive.scss b/elements/_interactive.scss index 95bf501..bf46005 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -57,7 +57,7 @@ label + input { } input, button, textarea, select { - margin: $margin_io; + margin: $margin_inline; &[disabled="disabled"], &[disabled] { @@ -79,6 +79,10 @@ td > textarea { } } +.input_io, .button_io, .io_textarea, .io_select { + margin: $margin_io; +} + .input_io, .io_textarea, .io_select { padding: $space_half; color: $color_text_io; diff --git a/elements/_sections.scss b/elements/_sections.scss index 0b8edd8..ea0790e 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + // Root // ----------------------------------------------------------------------------- html { @@ -81,7 +83,16 @@ section {} // Navigation // ----------------------------------------------------------------------------- -nav {} +nav { + + ul { + margin: 0; + + &.inline li { + display: inline-block; + } + } +} // Aside element // ----------------------------------------------------------------------------- @@ -107,6 +118,33 @@ aside { *:first-child { margin-top: 0; } + + &.io { + + input, + textarea, + select, + button { + display: block; + width: 100%; + } + + input { + @extend .input_io; + } + + textarea { + @extend .io_textarea; + } + + select { + @extend .io_select; + } + + button { + @extend .button_io; + } + } } // Headings @@ -180,12 +218,26 @@ header {} } } -header.io { - z-index: map.get($z-indexes, "content-top"); +header, +aside, +footer { + &.io { + .span_solo { + border: $width_border_io solid transparent; + padding: $padding_basic; + } + } +} + +header.io, +aside.io { padding: $space_basic; - h1 { - margin: 0; + input, + button, + textarea, + select { + margin-inline: $space_half; } input { @@ -205,6 +257,62 @@ header.io { } } +header, +footer { + &.io { + @extend %flex-inline; + align-items: stretch; + } +} + +header.io { + z-index: map.get($z-indexes, "content-top"); + + &>*:last-child *:last-child { + margin-right: 0; + } + + &>*:first-child *:first-child { + margin-left: 0; + } + + nav, + ul { + @extend %flex-inline; + align-items: stretch; + } + + nav li { + margin: 0; + } + + nav:last-child { + margin-left: auto; + } + + h1 { + margin: 0; + } +} + // Footer // ----------------------------------------------------------------------------- -footer {} \ No newline at end of file +footer { + &.io { + input { + @extend .input_io; + } + + textarea { + @extend .io_textarea; + } + + select { + @extend .io_select; + } + + button { + @extend .button_io; + } + } +} \ No newline at end of file diff --git a/global/_config.scss b/global/_config.scss index 17eab37..f028f2d 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -142,7 +142,8 @@ $space_large: $space_basic * 16; $margin_basic: $space_basic 0 !default; $margin_double: $space_double 0 !default; -$margin_io: 0 $space_small 0 0 !default; +$margin_inline: 0 $space_double 0 0 !default; +$margin_io: 0 !default; $padding_basic: calc(#{$space_basic} - 3px) $space_basic !default; $padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default; From 35b55de55002b4a13d7f0530b326f5e2a569bbb1 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Jun 2025 13:35:26 +0200 Subject: [PATCH 4/5] feat: Changes to flex and display - Remove unused flex classes - Nav module no longer dependend on common flex classes - Add important to common display and opacity --- elements/_grouping.scss | 33 ----------------------------- global/_common.scss | 22 ++++++++++++++++--- modules/navigation/_nav_module.scss | 5 ++--- modules/tables/_tables_module.scss | 11 +++++++--- 4 files changed, 29 insertions(+), 42 deletions(-) diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 73f8a63..75edc9f 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -299,39 +299,6 @@ div {} } } -.flex_wrap { - @extend .flex; - flex-wrap: wrap; -} - -.flex_row { - @extend .flex; - flex-direction: column; - // align-items: flex-start; - justify-content: flex-start; -} - -.flex_child { - flex: 0 1 auto; -} - -.flex_child_one { - flex: 1; -} - -.flex_child_end { - align-self: flex-end; -} - -.flex_column_wrap { - @extend .flex_wrap; - - .flex_column { - @extend .flex_child; - flex-grow: 1; - } -} - // Grid .grid { display: grid; diff --git a/global/_common.scss b/global/_common.scss index 5a45c7b..5165cfa 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -21,15 +21,15 @@ } .di_none { - display: none; + display: none !important; } .op_hide { - opacity: 0; + opacity: 0 !important; } .op_show { - opacity: 1; + opacity: 1 !important; } .space_even_auto { @@ -178,11 +178,27 @@ %flex-inline { display: flex; flex-direction: row; + flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: $space_half $space_basic; } +%flex-column, +%flex-row { + display: flex; + flex-wrap: nowrap; + gap: $space_basic; +} + +%flex-column { + flex-direction: column; +} + +%flex-row { + flex-direction: row; +} + // Positioned elements diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index 608fd63..5f854b5 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -99,12 +99,11 @@ nav { margin: $space_basic 0; ul { - @extend .flex; + display: flex; margin: 0 $space_large; li { - @extend .flex_child; - flex-grow: 1; + flex: auto; margin: 0; text-align: center; diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss index de2523e..2746bec 100644 --- a/modules/tables/_tables_module.scss +++ b/modules/tables/_tables_module.scss @@ -11,13 +11,15 @@ } } - th, td { + th, + td { border: 0; } .cell_icon { width: 48px; text-align: center; + img { vertical-align: text-top; } @@ -29,9 +31,11 @@ &:hover { background-color: $foxtrot_color; + a:first-child { display: none; } + a:last-child { display: block; color: $color_highlight_basic; @@ -47,7 +51,8 @@ } } - th:last-child, .cell_date { + th:last-child, + .cell_date { width: 16%; text-align: center; } @@ -65,4 +70,4 @@ max-height: 44px; } } -} +} \ No newline at end of file From b7ec209761cac635ba8312dbb07bf831ebc32933 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Jun 2025 14:35:32 +0200 Subject: [PATCH 5/5] docs: Add comment --- _basic.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_basic.scss b/_basic.scss index 62d38a8..f307c86 100644 --- a/_basic.scss +++ b/_basic.scss @@ -2,6 +2,7 @@ // Use a file outside of hippie i.e. vendor/normalize.css // ----------------------------------------------------------------------------- // @import "../../vendor/normalizecss/normalize.css"; +// @import "../../node_modules/normalize.css/normalize.css";