diff --git a/elements/_embedded.scss b/elements/_embedded.scss index da0921d..4de399d 100644 --- a/elements/_embedded.scss +++ b/elements/_embedded.scss @@ -14,6 +14,7 @@ // area + picture { } diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 7e61702..54e6ea4 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -25,17 +25,6 @@ // 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 // ----------------------------------------------------------------------------- @@ -43,13 +32,32 @@ 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; } -@include columns(); +.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; +} // Address // ----------------------------------------------------------------------------- @@ -68,19 +76,6 @@ 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; @@ -88,6 +83,22 @@ 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 { @@ -237,13 +248,11 @@ figcaption { // Main content // ----------------------------------------------------------------------------- -main { -} +main {} // Div // ----------------------------------------------------------------------------- -div { -} +div {} .div_info { padding: config.$space_double config.$indent_basic; @@ -306,13 +315,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 ddf35b9..fbdfb28 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -21,6 +21,7 @@ // legend + // Form // ----------------------------------------------------------------------------- form { @@ -244,6 +245,7 @@ meter { } + // Interactive elements // ----------------------------------------------------------------------------- // details @@ -251,6 +253,7 @@ meter { // dialog + details { } @@ -264,6 +267,7 @@ dialog { } + // Scripting // ----------------------------------------------------------------------------- // script @@ -272,6 +276,7 @@ dialog { // canvas + canvas { } diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss index 8a3b406..3d94607 100644 --- a/elements/_textlevel.scss +++ b/elements/_textlevel.scss @@ -39,6 +39,7 @@ // wbr + // Links // ----------------------------------------------------------------------------- a { @@ -203,12 +204,6 @@ 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; @@ -301,12 +296,14 @@ wbr { } + // Edits // ----------------------------------------------------------------------------- // ins // del + ins { }