diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 1f03fab..42b3d3c 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -24,6 +24,7 @@ p { @extend %basic; margin-top: $space_basic; margin-bottom: $space_basic; + code { padding: $space_tiny $space_half; font-size: 1em; @@ -34,13 +35,17 @@ p { .column_line { column-rule: $border_basic; } -.column_2, .column_3 { + +.column_2, +.column_3 { @extend p; } + .column_2 { column-count: 2; column-gap: $space_small; } + .column_3 { column-count: 3; column-gap: $space_medium; @@ -91,10 +96,11 @@ pre { overflow-x: auto; border-color: darken($color_back_basic, $color_diff_tiny); border-style: dotted; - border-width: 0 0 0 $width_border_4; + border-width: 0 0 0 $width_border_4; border-radius: $radius_basic; padding: $space_basic; background-color: lighten($color_back_basic, $color_diff_tiny); + code { background-color: transparent; } @@ -112,11 +118,15 @@ blockquote { p::before { content: "\201E \0020"; } + p::after { content: "\0020 \201C"; } + .quote_source { - &::before, &::after { + + &::before, + &::after { content: ""; } } @@ -124,23 +134,37 @@ blockquote { // List // ----------------------------------------------------------------------------- -dl, ul, ol { +dl, +ul, +ol { margin: $space_double 0; } -ul, ol { +ul, +ol { padding-left: $indent_basic; + + &.horizontal { + overflow: auto; + + li { + @extend .float_space_left; + } + } } dl { - margin-left: $indent_basic; + margin-left: $indent_basic; } -li, dt, dd { +li, +dt, +dd { @extend %basic; } -dd, .list_basic li { +dd, +.list_basic li { margin-bottom: $space_basic; } @@ -171,15 +195,18 @@ ul { li { margin-bottom: $space_tiny * 2; text-transform: uppercase; + a { display: block; padding: $padding_basic; color: $color_text_basic; + img { margin-right: $space_basic; padding-bottom: 0.2em; vertical-align: text-bottom; } + &:active, &:focus, &:hover { @@ -190,13 +217,6 @@ ul { } } -.list_horizontal { - overflow: auto; - li { - @extend .float_space_left; - } -} - // Embedded // ----------------------------------------------------------------------------- figure { @@ -210,15 +230,11 @@ figcaption { // Main content // ----------------------------------------------------------------------------- -main { - -} +main {} // Div // ----------------------------------------------------------------------------- -div { - -} +div {} .div_info { padding: $space_double $indent_basic; @@ -228,6 +244,7 @@ div { .box_space { position: relative; + overflow: auto; width: 100%; } @@ -309,13 +326,13 @@ div { display: grid; grid-gap: $space_basic; - & > input, - & > select, - & > textarea { + &>input, + &>select, + &>textarea { margin: 0; } - & > label { + &>label { margin: $width_border_io; padding: $space_half; } @@ -333,4 +350,4 @@ div { // Sprites .sprite_img { display: inline-block; -} +} \ No newline at end of file diff --git a/elements/_sections.scss b/elements/_sections.scss index 268dbbb..542a5dd 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -39,25 +39,20 @@ body { } &:hover { - .mouse_over { background-color: transparent !important; - transition: background-color $duration_double $timing_basic 0s !important; + transition: background-color $duration_basic $timing_basic 0s !important; } } } // Article // ----------------------------------------------------------------------------- -article { - -} +article {} // Section // ----------------------------------------------------------------------------- -section { - -} +section {} .sec_main_center { width: $width_basic; @@ -67,9 +62,11 @@ section { @include forTabletPortraitUp { width: $width_small; } + @include forTabletLandscapeUp { width: $width_medium; } + @include forBigDesktopUp { width: $width_large; } @@ -84,20 +81,18 @@ section { // Navigation // ----------------------------------------------------------------------------- -nav { - -} +nav {} // Aside element // ----------------------------------------------------------------------------- aside { width: $width_aside_basic; - &.right + .bside { + &.right+.bside { margin-right: calc(#{$width_aside_basic} + #{$space_basic}); } - &.left + .bside { + &.left+.bside { margin-left: calc(#{$width_aside_basic} + #{$space_basic}); } @@ -116,7 +111,12 @@ aside { // Headings // ----------------------------------------------------------------------------- -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { @extend %head_all; } @@ -125,7 +125,7 @@ h1 { margin: $space_large 0 $space_small; } -h1 + h1 { +h1+h1 { margin-top: 0; } @@ -134,7 +134,7 @@ h2 { margin: $space_medium 0 $space_small; } -h2 + h2 { +h2+h2 { margin-top: 0; } @@ -165,9 +165,7 @@ h6 { // Header // ----------------------------------------------------------------------------- -header { - -} +header {} .header_page { overflow: auto; @@ -184,6 +182,4 @@ header { // Footer // ----------------------------------------------------------------------------- -footer { - -} +footer {} \ No newline at end of file diff --git a/global/_common.scss b/global/_common.scss index 5fc6585..fcb9e3a 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -48,21 +48,24 @@ } @each $size, $variable in (basic, #{$space_basic}), - (small, #{$space_small}), - (medium, #{$space_medium}), - (large, #{$space_large}) { - .space_top_#{$size} { - margin-top: $variable; - } - .space_right_#{$size} { - margin-right: $variable; - } - .space_bottom_#{$size} { - margin-bottom: $variable; - } - .space_left_#{$size} { - margin-left: $variable; - } +(small, #{$space_small}), +(medium, #{$space_medium}), +(large, #{$space_large}) { + .space_top_#{$size} { + margin-top: $variable; + } + + .space_right_#{$size} { + margin-right: $variable; + } + + .space_bottom_#{$size} { + margin-bottom: $variable; + } + + .space_left_#{$size} { + margin-left: $variable; + } } .space_left_fourth { @@ -100,7 +103,7 @@ } .wrap_center { - & > * { + &>* { margin-right: math.div((100% - $width_basic), 2); margin-left: math.div((100% - $width_basic), 2); @@ -108,10 +111,12 @@ margin-right: math.div((100% - $width_small), 2); margin-left: math.div((100% - $width_small), 2); } + @include forTabletLandscapeUp { margin-right: math.div((100% - $width_medium), 2); margin-left: math.div((100% - $width_medium), 2); } + @include forBigDesktopUp { margin-right: math.div((100% - $width_large), 2); margin-left: math.div((100% - $width_large), 2); @@ -145,7 +150,7 @@ } .float_space_left { - @extend .float_left; + float: left; margin-right: $space_small; } @@ -312,4 +317,4 @@ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -} +} \ No newline at end of file diff --git a/global/_config.scss b/global/_config.scss index 226edd8..4cce311 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -68,13 +68,12 @@ $family_head_basic: $family_text_basic !default; // COLORS // ------------------------------------------------------------------------------ $color_palette: ( - alpha: #fad803, - bravo: #d30a51, - charlie: #273f8b, - delta: #b7e0f0, - echo: #52bed1, - foxtrot: #0c85ff -) !default; + alpha: #fad803, + bravo: #d30a51, + charlie: #273f8b, + delta: #b7e0f0, + echo: #52bed1, + foxtrot: #0c85ff) !default; @include addDefaultColors; @@ -90,7 +89,8 @@ $color_back_basic: #808080 !default; $color_border_basic: lighten($color_text_basic, $color_diff_basic) !default; $color_front_basic: white !default; -$color_medium: lighten($color_darkest, 50%); +$color_medium: lighten($color_darkest, 50% +); $color_dark: lighten($color_darkest, $color_diff_double); $color_darker: darken($color_back_basic, $color_diff_basic); $color_brighter: lighten($color_back_basic, $color_diff_basic); @@ -105,12 +105,14 @@ $color_action_basic: $foxtrot_color !default; // default shadow colors // $shadow_color: fade-out($color_medium, 0.5); -$color_list: (); +$color_list: ( +); @each $key, $value in $color_palette { - $map: (); - $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) ); - $color_list: map-merge($color_list, $map); + $map: ( + ); +$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5))); +$color_list: map-merge($color_list, $map); } @@ -159,40 +161,36 @@ $radius_basic: $space_tiny * 2 !default; // IO // ------------------------------------------------------------------------------ -$io_input_list: - 'input[type="text"]', - 'input[type="number"]', +$io_input_list: 'input[type="text"]', + 'input[type="number"]', 'input[type="color"]', 'input[type="range"]', 'input[type="date"]', 'input[type="time"]', - 'input[type="datetime-local"]', - 'input[type="month"]', - 'input[type="week"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="week"]', 'input[type="email"]', - 'input[type="password"]', - 'input[type="tel"]', - 'input[type="url"]', + 'input[type="password"]', + 'input[type="tel"]', + 'input[type="url"]', 'input[type="search"]', 'input:not([type])'; -$io_date_list: - '.io_input[type="date"]', - '.io_input[type="time"]', - '.io_input[type="datetime-local"]', - '.io_input[type="month"]', - '.io_input[type="week"]'; +$io_date_list: '.io_input[type="date"]', + '.io_input[type="time"]', + '.io_input[type="datetime-local"]', + '.io_input[type="month"]', + '.io_input[type="week"]'; -$io_button_list: - 'button', +$io_button_list: 'button', 'input[type="button"]', // 'input[type="file"]', 'input[type="reset"]', 'input[type="image"]', 'input[type="submit"]'; -$io_focus_list: - 'a[href]', +$io_focus_list: 'a[href]', 'area[href]', 'button:not([disabled])', 'input:not([disabled])', @@ -218,7 +216,7 @@ $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightne // ANIMATIONS // ------------------------------------------------------------------------------ -$duration_basic: 250ms !default; +$duration_basic: 200ms !default; $duration_double: $duration_basic * 2; $duration_long: 2s !default; $timing_basic: ease-out !default; @@ -254,17 +252,17 @@ $webkit_ms_support: -webkit- -ms- ''; // SYMBOLS // ------------------------------------------------------------------------------ $icons: ( - glass: "\f000", - music: "\f001", - search: "\f002", - envelope-o: "\f003", - heart: "\f004" + glass: "\f000", + music: "\f001", + search: "\f002", + envelope-o: "\f003", + heart: "\f004" ); @each $name, $icon in $icons { - .sym_#{$name}::before { - content: $icon; - } + .sym_#{$name}::before { + content: $icon; + } } @@ -273,4 +271,4 @@ $icons: ( // ------------------------------------------------------------------------------ $no_agent_focus: true; -@include overrideUserAgent; +@include overrideUserAgent; \ No newline at end of file