diff --git a/_basic.scss b/_basic.scss index f307c86..62d38a8 100644 --- a/_basic.scss +++ b/_basic.scss @@ -2,7 +2,6 @@ // Use a file outside of hippie i.e. vendor/normalize.css // ----------------------------------------------------------------------------- // @import "../../vendor/normalizecss/normalize.css"; -// @import "../../node_modules/normalize.css/normalize.css"; diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 75edc9f..42b3d3c 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -67,13 +67,6 @@ 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 { @@ -293,9 +286,38 @@ div {} // Flex .flex { display: flex; +} - &.inline { - @extend %flex-inline; +.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; } } diff --git a/elements/_interactive.scss b/elements/_interactive.scss index bf46005..95bf501 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -57,7 +57,7 @@ label + input { } input, button, textarea, select { - margin: $margin_inline; + margin: $margin_io; &[disabled="disabled"], &[disabled] { @@ -79,10 +79,6 @@ 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 ea0790e..542a5dd 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -1,5 +1,3 @@ -@use "sass:map"; - // Root // ----------------------------------------------------------------------------- html { @@ -83,16 +81,7 @@ section {} // Navigation // ----------------------------------------------------------------------------- -nav { - - ul { - margin: 0; - - &.inline li { - display: inline-block; - } - } -} +nav {} // Aside element // ----------------------------------------------------------------------------- @@ -118,33 +107,6 @@ 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 @@ -218,101 +180,6 @@ header {} } } -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 { - input { - @extend .input_io; - } - - textarea { - @extend .io_textarea; - } - - select { - @extend .io_select; - } - - button { - @extend .button_io; - } - } -} \ No newline at end of file +footer {} \ No newline at end of file diff --git a/global/_common.scss b/global/_common.scss index 5165cfa..fcb9e3a 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -21,15 +21,15 @@ } .di_none { - display: none !important; + display: none; } .op_hide { - opacity: 0 !important; + opacity: 0; } .op_show { - opacity: 1 !important; + opacity: 1; } .space_even_auto { @@ -173,34 +173,6 @@ -// Flex & grid -// ----------------------------------------------------------------------------- -%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 // ----------------------------------------------------------------------------- %viewport_fixed { diff --git a/global/_config.scss b/global/_config.scss index f028f2d..17eab37 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -142,8 +142,7 @@ $space_large: $space_basic * 16; $margin_basic: $space_basic 0 !default; $margin_double: $space_double 0 !default; -$margin_inline: 0 $space_double 0 0 !default; -$margin_io: 0 !default; +$margin_io: 0 $space_small 0 0 !default; $padding_basic: calc(#{$space_basic} - 3px) $space_basic !default; $padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default; diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index 5f854b5..608fd63 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -99,11 +99,12 @@ nav { margin: $space_basic 0; ul { - display: flex; + @extend .flex; margin: 0 $space_large; li { - flex: auto; + @extend .flex_child; + flex-grow: 1; margin: 0; text-align: center; diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss index 2746bec..de2523e 100644 --- a/modules/tables/_tables_module.scss +++ b/modules/tables/_tables_module.scss @@ -11,15 +11,13 @@ } } - th, - td { + th, td { border: 0; } .cell_icon { width: 48px; text-align: center; - img { vertical-align: text-top; } @@ -31,11 +29,9 @@ &:hover { background-color: $foxtrot_color; - a:first-child { display: none; } - a:last-child { display: block; color: $color_highlight_basic; @@ -51,8 +47,7 @@ } } - th:last-child, - .cell_date { + th:last-child, .cell_date { width: 16%; text-align: center; } @@ -70,4 +65,4 @@ max-height: 44px; } } -} \ No newline at end of file +}