diff --git a/_hippie.scss b/_hippie.scss index 1f2c51d..6a63ce1 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -26,7 +26,6 @@ // 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/_interactive.scss b/elements/_interactive.scss index e03ffa1..bf46005 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -154,7 +154,7 @@ button { } .button_io { - @extend %basic; + @extend %basic_button; 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: $color_action_basic; + background-color: $foxtrot_color; } &[disabled="disabled"], @@ -179,7 +179,7 @@ button { } .button_clear { - @extend %basic; + @extend %basic_button; padding: 0; border: 0; background-color: transparent; diff --git a/elements/_sections.scss b/elements/_sections.scss index 368b535..ea0790e 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -144,18 +144,6 @@ aside { button { @extend .button_io; } - - .a_button { - display: flex; - } - - ul.vertical li { - margin-bottom: $space_half; - - .a_button > *:last-child { - margin-left: auto; - } - } } } @@ -215,33 +203,7 @@ h6 { // 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 {} .header_page { overflow: auto; @@ -256,8 +218,84 @@ header { } } -header // Footer +header, +aside, +footer { + &.io { + .span_solo { + border: $width_border_io solid transparent; + padding: $padding_basic; + } + } +} +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/elements/_textlevel.scss b/elements/_textlevel.scss index f94beb7..68ede56 100644 --- a/elements/_textlevel.scss +++ b/elements/_textlevel.scss @@ -276,7 +276,7 @@ span { } .span_solo { - @extend %basic; + @extend %solo; } // Linebreaks diff --git a/global/_common.scss b/global/_common.scss index 3565a10..5165cfa 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -20,11 +20,6 @@ } } -%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 f03c740..e965c23 100644 --- a/global/_typography.scss +++ b/global/_typography.scss @@ -44,6 +44,14 @@ font-weight: 300; } +%basic_button { + @extend %basic; +} + +%solo { + @extend %basic; +} + %short { overflow: hidden; text-overflow: ellipsis; diff --git a/modules/io/_io_module.scss b/modules/io/_io_module.scss deleted file mode 100644 index 72c3a52..0000000 --- a/modules/io/_io_module.scss +++ /dev/null @@ -1,65 +0,0 @@ -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