diff --git a/elements/_grouping.scss b/elements/_grouping.scss index 42b3d3c..1f03fab 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -24,7 +24,6 @@ p { @extend %basic; margin-top: $space_basic; margin-bottom: $space_basic; - code { padding: $space_tiny $space_half; font-size: 1em; @@ -35,17 +34,13 @@ 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; @@ -96,11 +91,10 @@ 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; } @@ -118,15 +112,11 @@ blockquote { p::before { content: "\201E \0020"; } - p::after { content: "\0020 \201C"; } - .quote_source { - - &::before, - &::after { + &::before, &::after { content: ""; } } @@ -134,37 +124,23 @@ 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; } @@ -195,18 +171,15 @@ 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 { @@ -217,6 +190,13 @@ ul { } } +.list_horizontal { + overflow: auto; + li { + @extend .float_space_left; + } +} + // Embedded // ----------------------------------------------------------------------------- figure { @@ -230,11 +210,15 @@ figcaption { // Main content // ----------------------------------------------------------------------------- -main {} +main { + +} // Div // ----------------------------------------------------------------------------- -div {} +div { + +} .div_info { padding: $space_double $indent_basic; @@ -244,7 +228,6 @@ div {} .box_space { position: relative; - overflow: auto; width: 100%; } @@ -326,13 +309,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; } @@ -350,4 +333,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 542a5dd..268dbbb 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -39,20 +39,25 @@ body { } &:hover { + .mouse_over { background-color: transparent !important; - transition: background-color $duration_basic $timing_basic 0s !important; + transition: background-color $duration_double $timing_basic 0s !important; } } } // Article // ----------------------------------------------------------------------------- -article {} +article { + +} // Section // ----------------------------------------------------------------------------- -section {} +section { + +} .sec_main_center { width: $width_basic; @@ -62,11 +67,9 @@ section {} @include forTabletPortraitUp { width: $width_small; } - @include forTabletLandscapeUp { width: $width_medium; } - @include forBigDesktopUp { width: $width_large; } @@ -81,18 +84,20 @@ 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}); } @@ -111,12 +116,7 @@ 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,7 +165,9 @@ h6 { // Header // ----------------------------------------------------------------------------- -header {} +header { + +} .header_page { overflow: auto; @@ -182,4 +184,6 @@ header {} // Footer // ----------------------------------------------------------------------------- -footer {} \ No newline at end of file +footer { + +} diff --git a/global/_common.scss b/global/_common.scss index fcb9e3a..5fc6585 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -48,24 +48,21 @@ } @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 { @@ -103,7 +100,7 @@ } .wrap_center { - &>* { + & > * { margin-right: math.div((100% - $width_basic), 2); margin-left: math.div((100% - $width_basic), 2); @@ -111,12 +108,10 @@ 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); @@ -150,7 +145,7 @@ } .float_space_left { - float: left; + @extend .float_left; margin-right: $space_small; } @@ -317,4 +312,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 4cce311..226edd8 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -68,12 +68,13 @@ $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; @@ -89,8 +90,7 @@ $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,14 +105,12 @@ $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); } @@ -161,36 +159,40 @@ $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])', @@ -216,7 +218,7 @@ $shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightne // ANIMATIONS // ------------------------------------------------------------------------------ -$duration_basic: 200ms !default; +$duration_basic: 250ms !default; $duration_double: $duration_basic * 2; $duration_long: 2s !default; $timing_basic: ease-out !default; @@ -252,17 +254,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; + } } @@ -271,4 +273,4 @@ $icons: ( // ------------------------------------------------------------------------------ $no_agent_focus: true; -@include overrideUserAgent; \ No newline at end of file +@include overrideUserAgent;