diff --git a/elements/_interactive.scss b/elements/_interactive.scss index d956505..abe8124 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -6,7 +6,7 @@ form { } fieldset { - margin: $basic_space 0; + margin: $high_margin; padding: $basic_space; border: $basic_border; } @@ -26,28 +26,13 @@ label { & + input { margin-left: $basic_space; } + input + & { margin-left: $basic_space; } -} - -.input_default label { - display: table; - margin: $half_space 0; input { - display: table-cell; margin-left: $basic_space; - padding: $half_space ($half_space + 1); - border-style: solid; - border-color: transparent; - background-color: $basic_io_back_color; - color: $basic_io_font_color; - - &:hover { - background-color: $darkest_color; - color: $brightest_color; - } } } @@ -55,6 +40,35 @@ input { } +.label__table { + display: table; + + input { + display: table-cell; + } +} + +.input_default { + + label { + @extend .label__table; + margin: $half_space 0; + + input { + padding: $half_space ($half_space + 1); + border-style: solid; + border-color: transparent; + background-color: $basic_io_back_color; + color: $basic_io_font_color; + + &:hover { + background-color: $darkest_color; + color: $brightest_color; + } + } + } +} + // More diff --git a/elements/_tables.scss b/elements/_tables.scss index 4283db3..475651b 100644 --- a/elements/_tables.scss +++ b/elements/_tables.scss @@ -2,8 +2,7 @@ // ----------------------------------------------------------------------------- table { - margin-top: $space_2; - margin-bottom: $space_2; + margin: $high_margin; border: $basic_border; border-collapse: collapse; } diff --git a/example.css b/example.css index 2cd2d1a..9c293da 100644 --- a/example.css +++ b/example.css @@ -506,8 +506,7 @@ img { vertical-align: top; } table { - margin-top: 16px; - margin-bottom: 16px; + margin: calc(8px * 2) 0; border: 1px solid black; border-collapse: collapse; } @@ -557,7 +556,7 @@ caption { text-align: center; } fieldset { - margin: 8px 0; + margin: calc(8px * 2) 0; padding: 8px; border: 1px solid black; } @@ -568,13 +567,17 @@ label + input { margin-left: 8px; } input + label { margin-left: 8px; } +label input { + margin-left: 8px; } + +.label__table, .input_default label { + display: table; } + .label__table input, .input_default label input { + display: table-cell; } .input_default label { - display: table; margin: 4px 0; } .input_default label input { - display: table-cell; - margin-left: 8px; padding: 4px 5px; border-style: solid; border-color: transparent; diff --git a/example.html b/example.html index 2bf0ba1..ff7ecc6 100644 --- a/example.html +++ b/example.html @@ -353,17 +353,19 @@
-