From c7179c7a3d0f7eac48c77da7263f800cb8611690 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 15:47:18 +0200 Subject: [PATCH 1/2] feat: Add and rename common - New size_io_button placeholder - Remove variants of basic typo placeholder --- elements/_interactive.scss | 6 +++--- elements/_textlevel.scss | 2 +- global/_common.scss | 5 +++++ global/_typography.scss | 8 -------- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/elements/_interactive.scss b/elements/_interactive.scss index bf46005..e03ffa1 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -154,7 +154,7 @@ button { } .button_io { - @extend %basic_button; + @extend %basic; border: $width_border_io solid $color_border_button; padding: $padding_basic; color: $color_text_button; @@ -164,7 +164,7 @@ button { // border-color: #0059F6; border-color: transparent; color: white; - background-color: $foxtrot_color; + background-color: $color_action_basic; } &[disabled="disabled"], @@ -179,7 +179,7 @@ button { } .button_clear { - @extend %basic_button; + @extend %basic; padding: 0; border: 0; background-color: transparent; diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss index 68ede56..f94beb7 100644 --- a/elements/_textlevel.scss +++ b/elements/_textlevel.scss @@ -276,7 +276,7 @@ span { } .span_solo { - @extend %solo; + @extend %basic; } // Linebreaks diff --git a/global/_common.scss b/global/_common.scss index 5165cfa..3565a10 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -20,6 +20,11 @@ } } +%size_io_button { + border: $width_border_io solid transparent; + padding: $padding_basic; +} + .di_none { display: none !important; } diff --git a/global/_typography.scss b/global/_typography.scss index e965c23..f03c740 100644 --- a/global/_typography.scss +++ b/global/_typography.scss @@ -44,14 +44,6 @@ font-weight: 300; } -%basic_button { - @extend %basic; -} - -%solo { - @extend %basic; -} - %short { overflow: hidden; text-overflow: ellipsis; From 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 22 Jun 2025 15:48:01 +0200 Subject: [PATCH 2/2] feat: New io module - Add module for io - Move common io parts to new module --- _hippie.scss | 1 + elements/_sections.scss | 118 +++++++++++++------------------------ modules/io/_io_module.scss | 65 ++++++++++++++++++++ 3 files changed, 106 insertions(+), 78 deletions(-) create mode 100644 modules/io/_io_module.scss diff --git a/_hippie.scss b/_hippie.scss index 6a63ce1..1f2c51d 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -26,6 +26,7 @@ // Additional Modules and variables // in dependency to other basic styles // ----------------------------------------------------------------------------- +@import "modules/io/io_module"; @import "modules/navigation/nav_module"; @import "modules/editor/editor_module"; @import "modules/explanation/explanation_module"; diff --git a/elements/_sections.scss b/elements/_sections.scss index ea0790e..368b535 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -144,6 +144,18 @@ aside { button { @extend .button_io; } + + .a_button { + display: flex; + } + + ul.vertical li { + margin-bottom: $space_half; + + .a_button > *:last-child { + margin-left: auto; + } + } } } @@ -203,7 +215,33 @@ h6 { // Header // ----------------------------------------------------------------------------- -header {} +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:last-child { + margin-left: auto; + } + + h1 { + margin: 0; + } + } +} .header_page { overflow: auto; @@ -218,84 +256,8 @@ header {} } } -header, -aside, -footer { - &.io { - .span_solo { - border: $width_border_io solid transparent; - padding: $padding_basic; - } - } -} +header // Footer -header.io, -aside.io { - padding: $space_basic; - - input, - button, - textarea, - select { - margin-inline: $space_half; - } - - input { - @extend .input_io; - } - - textarea { - @extend .io_textarea; - } - - select { - @extend .io_select; - } - - button { - @extend .button_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 { &.io { diff --git a/modules/io/_io_module.scss b/modules/io/_io_module.scss new file mode 100644 index 0000000..72c3a52 --- /dev/null +++ b/modules/io/_io_module.scss @@ -0,0 +1,65 @@ +header, +aside, +footer { + &.io { + nav li { + margin: 0; + } + + nav > div:not(.spacer), + nav > span, + .a_button { + @extend %basic; + @extend %size_io_button; + } + + .a_button { + color: $color_text_io; + background-color: $color_back_io; + + &:active, + &:focus, + &:hover { + background-color: transparentize($color_highlight_basic, 0.8); + } + } + } +} + +header, +aside { + &.io { + padding: $space_basic; + + input, + button, + textarea, + select { + margin-inline: $space_half; + } + + input { + @extend .input_io; + } + + textarea { + @extend .io_textarea; + } + + select { + @extend .io_select; + } + + button { + @extend .button_io; + } + } +} + +header, +footer { + &.io { + @extend %flex-inline; + align-items: stretch; + } +} \ No newline at end of file