diff --git a/elements/_embedded.scss b/elements/_embedded.scss index 4de399d..da0921d 100644 --- a/elements/_embedded.scss +++ b/elements/_embedded.scss @@ -14,7 +14,6 @@ // area - picture { } diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 54e6ea4..7e61702 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -25,6 +25,17 @@ // div +@mixin columns($count: 5) { + @for $i from 1 through $count { + .column_#{$i} { + @extend p; + + column-count: #{$i}; + column-gap: if($i < 3, config.$space_small, config.$space_medium); + } + } +} + // Paragraph // ----------------------------------------------------------------------------- @@ -32,32 +43,13 @@ p { @extend %basic; margin-top: config.$space_basic; margin-bottom: config.$space_basic; - - code { - padding: config.$space_tiny config.$space_half; - font-size: 1em; - line-height: 1; - } } .column_line { column-rule: config.$border_basic; } -.column_2, -.column_3 { - @extend p; -} - -.column_2 { - column-count: 2; - column-gap: config.$space_small; -} - -.column_3 { - column-count: 3; - column-gap: config.$space_medium; -} +@include columns(); // Address // ----------------------------------------------------------------------------- @@ -76,6 +68,19 @@ hr { border-style: solid; border-color: config.$color_border_basic; + &.hidden { + border-color: transparent; + } + + &.dotted { + border-style: dotted; + } + + &.double { + height: 4px; + border-width: config.$width_border_basic 0; + } + &.vertical { display: inline; margin: 0 config.$space_double; @@ -83,22 +88,6 @@ hr { } } -.hr_hidden { - @extend hr; - border-color: transparent; -} - -.hr_dotted { - @extend hr; - border-style: dotted; -} - -.hr_double { - @extend hr; - height: 4px; - border-width: config.$width_border_basic 0; -} - // Preformat // ----------------------------------------------------------------------------- pre { @@ -248,11 +237,13 @@ figcaption { // Main content // ----------------------------------------------------------------------------- -main {} +main { +} // Div // ----------------------------------------------------------------------------- -div {} +div { +} .div_info { padding: config.$space_double config.$indent_basic; @@ -315,13 +306,13 @@ div {} display: grid; grid-gap: config.$space_basic; - &>input, - &>select, - &>textarea { + & > input, + & > select, + & > textarea { margin: 0; } - &>label { + & > label { margin: config.$width_border_io; padding: config.$space_half; } diff --git a/elements/_interactive.scss b/elements/_interactive.scss index fbdfb28..ddf35b9 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -21,7 +21,6 @@ // legend - // Form // ----------------------------------------------------------------------------- form { @@ -245,7 +244,6 @@ meter { } - // Interactive elements // ----------------------------------------------------------------------------- // details @@ -253,7 +251,6 @@ meter { // dialog - details { } @@ -267,7 +264,6 @@ dialog { } - // Scripting // ----------------------------------------------------------------------------- // script @@ -276,7 +272,6 @@ dialog { // canvas - canvas { } diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss index 3d94607..8a3b406 100644 --- a/elements/_textlevel.scss +++ b/elements/_textlevel.scss @@ -39,7 +39,6 @@ // wbr - // Links // ----------------------------------------------------------------------------- a { @@ -204,6 +203,12 @@ code { background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); } +p code { + padding: config.$space_tiny config.$space_half; + font-size: 1em; + line-height: 1; +} + .code_solo { @extend %basic_mono; padding: config.$space_tiny config.$space_half; @@ -296,14 +301,12 @@ wbr { } - // Edits // ----------------------------------------------------------------------------- // ins // del - ins { }