From 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 26 Oct 2025 11:33:54 +0100 Subject: [PATCH] feat: Resolve all deprecation warnings for sass - Replace @import with @use and @forward - Only color function is used in _basic.scss for now - Change _all.scss to _index.scss - Modules use direct dependencies - Move @include from _config.scss to _common.scss, this was a long term mistake - Remove $color_list - Change basic_color() --- _basic.scss | 44 +++----- _hippie.scss | 12 +- elements/_grouping.scss | 109 ++++++++++--------- elements/_interactive.scss | 59 +++++----- elements/_sections.scss | 67 ++++++------ elements/_tables.scss | 33 +++--- elements/_textlevel.scss | 74 +++++++------ functions/_all.scss | 3 - functions/_color.scss | 6 +- functions/_index.scss | 3 + global/_common.scss | 73 +++++++------ global/_config.scss | 86 ++++++--------- global/_typography.scss | 32 +++--- mixins/_all.scss | 6 - mixins/_color.scss | 28 ++--- mixins/_index.scss | 6 + mixins/_media_query.scss | 20 ++-- mixins/_user_agent.scss | 16 +-- modules/breakpoint/_breakpoint_module.scss | 44 +++++--- modules/editor/_editor_module.scss | 7 +- modules/explanation/_explanation_module.scss | 68 +++++++----- modules/io/_io_module.scss | 9 +- modules/maintenance/_maintenance_module.scss | 9 +- modules/navigation/_nav_module.scss | 43 ++++---- modules/print/_print_module.scss | 19 +++- modules/tables/_tables_module.scss | 20 ++-- 26 files changed, 476 insertions(+), 420 deletions(-) delete mode 100644 functions/_all.scss create mode 100644 functions/_index.scss delete mode 100644 mixins/_all.scss create mode 100644 mixins/_index.scss diff --git a/_basic.scss b/_basic.scss index f307c86..32a35e8 100644 --- a/_basic.scss +++ b/_basic.scss @@ -4,48 +4,38 @@ // @import "../../vendor/normalizecss/normalize.css"; // @import "../../node_modules/normalize.css/normalize.css"; - - -// Functions and Mixins -// Important code constructions -// ----------------------------------------------------------------------------- -@import "functions/all"; -@import "mixins/all"; - - - // Fonts // Use a central file outside of hippie for font definitions with @font-face // ----------------------------------------------------------------------------- // @import "../../vendor/fonts.css"; - +// Functions and Mixins +// Important code constructions +// ----------------------------------------------------------------------------- +@forward "functions/color"; +@forward "mixins"; // Global configuration with default values // ----------------------------------------------------------------------------- -@import "global/config"; - - +@forward "global/config"; +@forward "global/common"; +@forward "global/typography"; // Basic styles - this is the core of definitions // Individual styles can be added her // ----------------------------------------------------------------------------- -@import "global/common"; -@import "global/typography"; // Following the w3c document element structure // https://w3c.github.io/html/index.html#contents -@import "elements/sections"; -@import "elements/grouping"; -@import "elements/textlevel"; -@import "elements/embedded"; -@import "elements/tables"; -@import "elements/interactive"; - - +@forward "elements/sections"; +@forward "elements/grouping"; +@forward "elements/textlevel"; +@forward "elements/embedded"; +@forward "elements/tables"; +@forward "elements/interactive"; // Individual Modules and variables // in dependency to other styles // ----------------------------------------------------------------------------- -@import "modules/breakpoint/breakpoint_module"; -@import "modules/tables/tables_module"; -@import "modules/maintenance/maintenance_module"; +@forward "modules/breakpoint/breakpoint_module"; +@forward "modules/tables/tables_module"; +@forward "modules/maintenance/maintenance_module"; diff --git a/_hippie.scss b/_hippie.scss index 1f2c51d..830afcd 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -21,13 +21,13 @@ - Maintenance * */ -@import "basic"; +@forward "basic"; // Additional Modules and variables // in dependency to other basic styles // ----------------------------------------------------------------------------- -@import "modules/io/io_module"; -@import "modules/navigation/nav_module"; -@import "modules/editor/editor_module"; -@import "modules/explanation/explanation_module"; -@import "modules/print/print_module"; +@forward "modules/io/io_module"; +@forward "modules/navigation/nav_module"; +@forward "modules/editor/editor_module"; +@forward "modules/explanation/explanation_module"; +@forward "modules/print/print_module"; diff --git a/elements/_grouping.scss b/elements/_grouping.scss index df30a37..54e6ea4 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -1,5 +1,10 @@ @use "sass:color"; +@use "../global/config"; +@use "../global/common"; +@use "../global/typography"; +@use "../functions/color" as *; + // Grouping content // ----------------------------------------------------------------------------- // p @@ -25,18 +30,18 @@ // ----------------------------------------------------------------------------- p { @extend %basic; - margin-top: $space_basic; - margin-bottom: $space_basic; + margin-top: config.$space_basic; + margin-bottom: config.$space_basic; code { - padding: $space_tiny $space_half; + padding: config.$space_tiny config.$space_half; font-size: 1em; line-height: 1; } } .column_line { - column-rule: $border_basic; + column-rule: config.$border_basic; } .column_2, @@ -46,35 +51,35 @@ p { .column_2 { column-count: 2; - column-gap: $space_small; + column-gap: config.$space_small; } .column_3 { column-count: 3; - column-gap: $space_medium; + column-gap: config.$space_medium; } // Address // ----------------------------------------------------------------------------- address { // @extend %basic; - margin-top: $space_double; - margin-bottom: $space_double; + margin-top: config.$space_double; + margin-bottom: config.$space_double; } // Line // ----------------------------------------------------------------------------- hr { - margin-top: $space_small; - margin-bottom: $space_small; - border-width: $width_border_basic 0 0; + margin-top: config.$space_small; + margin-bottom: config.$space_small; + border-width: config.$width_border_basic 0 0; border-style: solid; - border-color: $color_border_basic; + border-color: config.$color_border_basic; &.vertical { display: inline; - margin: 0 $space_double; - border-width: 0 $width_border_basic 0 0; + margin: 0 config.$space_double; + border-width: 0 config.$width_border_basic 0 0; } } @@ -91,7 +96,7 @@ hr { .hr_double { @extend hr; height: 4px; - border-width: $width_border_basic 0; + border-width: config.$width_border_basic 0; } // Preformat @@ -103,12 +108,12 @@ pre { .pre_code { overflow-x: auto; - border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny); + border-color: color.scale(config.$color_back_basic, $lightness: -(config.$color_diff_tiny)); border-style: dotted; - border-width: 0 0 0 $width_border_4; - border-radius: $radius_basic; - padding: $space_basic; - background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); + border-width: 0 0 0 config.$width_border_4; + border-radius: config.$radius_basic; + padding: config.$space_basic; + background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); code { background-color: transparent; @@ -118,9 +123,9 @@ pre { // Quote // ----------------------------------------------------------------------------- blockquote { - margin: $space_basic 0; - padding-right: $indent_basic; - padding-left: $indent_basic; + margin: config.$space_basic 0; + padding-right: config.$indent_basic; + padding-left: config.$indent_basic; } .quote_mark { @@ -146,12 +151,12 @@ blockquote { dl, ul, ol { - margin: $space_double 0; + margin: config.$space_double 0; } ul, ol { - padding-left: $indent_basic; + padding-left: config.$indent_basic; &.horizontal { overflow: auto; @@ -167,7 +172,7 @@ menu { } dl { - margin-left: $indent_basic; + margin-left: config.$indent_basic; } li, @@ -178,11 +183,11 @@ dd { dd, .list_basic li { - margin-bottom: $space_basic; + margin-bottom: config.$space_basic; } dd { - margin-left: $indent_basic; + margin-left: config.$indent_basic; } ul { @@ -206,16 +211,16 @@ ul { .list_link { li { - margin-bottom: $space_tiny * 2; + margin-bottom: config.$space_tiny * 2; text-transform: uppercase; a { display: block; - padding: $padding_basic; - color: $color_text_basic; + padding: config.$padding_basic; + color: config.$color_text_basic; img { - margin-right: $space_basic; + margin-right: config.$space_basic; padding-bottom: 0.2em; vertical-align: text-bottom; } @@ -223,8 +228,8 @@ ul { &:active, &:focus, &:hover { - background-color: $color_action_basic; - color: $color_highlight_basic; + background-color: config.$color_action_basic; + color: config.$color_highlight_basic; } } } @@ -233,12 +238,12 @@ ul { // Embedded // ----------------------------------------------------------------------------- figure { - margin: $space_double $indent_basic; + margin: config.$space_double config.$indent_basic; } figcaption { @extend %basic; - color: $color_darker; + color: config.$color_darker; } // Main content @@ -250,9 +255,9 @@ main {} div {} .div_info { - padding: $space_double $indent_basic; - border-right: $space_basic solid rgba($echo_color, 0.6); - background-color: rgba($echo_color, 0.1) !important; + padding: config.$space_double config.$indent_basic; + border-right: config.$space_basic solid rgba(basic_color(echo), 0.6); + background-color: rgba(basic_color(echo), 0.1) !important; } .box_space { @@ -264,7 +269,7 @@ div {} .box_cube { float: left; display: table; - width: $space_medium; + width: config.$space_medium; text-align: center; vertical-align: middle; @@ -275,21 +280,21 @@ div {} .box_placeholder { width: 100%; - height: $space_medium; - border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1); - border-radius: $radius_basic; - background-color: color.adjust($alpha_color, $alpha: -0.2); + height: config.$space_medium; + border: config.$width_border_4 solid color.adjust(basic_color(alpha), $alpha: -0.1); + border-radius: config.$radius_basic; + background-color: color.adjust(basic_color(alpha), $alpha: -0.2); } .box_placeholder_bkg { width: 100%; - height: $space_medium * 2; - border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1); - border-radius: $radius_basic; - padding: $space_basic; + height: config.$space_medium * 2; + border: config.$width_border_4 solid color.adjust(config.$color_front_basic, $alpha: -0.1); + border-radius: config.$radius_basic; + padding: config.$space_basic; /*data:[][;charset=][;base64],*/ background: url("data:image/svg+xml;utf8,") no-repeat; - background-color: color.adjust($color_front_basic, $alpha: -0.1); + background-color: color.adjust(config.$color_front_basic, $alpha: -0.1); } .box_file_tile { @@ -308,7 +313,7 @@ div {} // Grid .grid { display: grid; - grid-gap: $space_basic; + grid-gap: config.$space_basic; &>input, &>select, @@ -317,8 +322,8 @@ div {} } &>label { - margin: $width_border_io; - padding: $space_half; + margin: config.$width_border_io; + padding: config.$space_half; } } diff --git a/elements/_interactive.scss b/elements/_interactive.scss index d36f6fc..e5ec7c2 100644 --- a/elements/_interactive.scss +++ b/elements/_interactive.scss @@ -1,5 +1,8 @@ @use "sass:color"; +@use "../global/config"; +@use "../global/typography"; + // Forms // ----------------------------------------------------------------------------- // form @@ -34,12 +37,12 @@ label { label, p { input, button, textarea, select { - margin: 0 $space_basic; + margin: 0 config.$space_basic; } } input + label { - margin-left: $space_basic; + margin-left: config.$space_basic; } // Input @@ -48,11 +51,11 @@ input { } label + input { - margin-left: $space_basic; + margin-left: config.$space_basic; } input, button, textarea, select { - margin: $margin_inline; + margin: config.$margin_inline; &[disabled="disabled"], &[disabled] { @@ -67,7 +70,7 @@ td > textarea { margin: 0; } -@each $input in $io_input_list, textarea, select { +@each $input in config.$io_input_list, textarea, select { #{$input} { @extend %basic_mono; line-height: 1; @@ -76,50 +79,50 @@ td > textarea { // TODO: Move to io_module .input_io, .button_io, .io_textarea, .io_select { - margin: $margin_io; + margin: config.$margin_io; } .input_io, .io_textarea, .io_select { - padding: $space_half; - color: $color_text_io; - background-color: $color_back_io; + padding: config.$space_half; + color: config.$color_text_io; + background-color: config.$color_back_io; &:hover { - background-color: $color_highlight_basic; + background-color: config.$color_highlight_basic; } &[readonly="readonly"], &[readonly] { - background-color: color.scale($color_back_io, $lightness: -$color_diff_double); + background-color: color.scale(config.$color_back_io, $lightness: -(config.$color_diff_double)); } &[disabled="disabled"], &[disabled] { &:hover { - background-color: $color_back_io; + background-color: config.$color_back_io; } } } -@each $input in $io_date_list { +@each $input in config.$io_date_list { #{$input} { padding-top: 0; padding-bottom: 0; } } -@each $input in $io_input_list, textarea { +@each $input in config.$io_input_list, textarea { #{$input} { // border: $border_io; } } .input_io, .io_textarea { - border: $border_io; + border: config.$border_io; &[readonly="readonly"], &[readonly] { - border-color: color.scale($color_border_io, $lightness: -$color_diff_double); + border-color: color.scale(config.$color_border_io, $lightness: -(config.$color_diff_double)); } &[disabled="disabled"], @@ -131,16 +134,16 @@ td > textarea { // Fieldset // ----------------------------------------------------------------------------- fieldset { - margin: $margin_double; - padding: $space_basic; - border: $border_basic; + margin: config.$margin_double; + padding: config.$space_basic; + border: config.$border_basic; } // Legend // ----------------------------------------------------------------------------- legend { @extend %basic; - padding: 0 $space_half; + padding: 0 config.$space_half; } // Button @@ -151,26 +154,26 @@ button { .button_io { @extend %basic; - border: $width_border_io solid $color_border_button; - padding: $padding_basic; - color: $color_text_button; - background-color: $color_back_button; + border: config.$width_border_io solid config.$color_border_button; + padding: config.$padding_basic; + color: config.$color_text_button; + background-color: config.$color_back_button; user-select: none; &:hover { // border-color: #0059F6; border-color: transparent; color: white; - background-color: $color_action_basic; + background-color: config.$color_action_basic; } &[disabled="disabled"], &[disabled] { border-color: transparent; - color: color.scale($color_text_button, $lightness: $color_diff_double); + color: color.scale(config.$color_text_button, $lightness: config.$color_diff_double); &:hover { - background-color: $color_back_button; + background-color: config.$color_back_button; } } } @@ -187,7 +190,7 @@ button { } &:hover { - background-color: $color_action_basic; + background-color: config.$color_action_basic; } } diff --git a/elements/_sections.scss b/elements/_sections.scss index 79e5016..32a1a9a 100644 --- a/elements/_sections.scss +++ b/elements/_sections.scss @@ -1,3 +1,8 @@ +@use "../global/config"; +@use "../global/common"; +@use "../elements/interactive"; +@use "../mixins/media_query" as *; + @use "sass:map"; // Root @@ -24,13 +29,13 @@ html { // ----------------------------------------------------------------------------- body { position: relative; - box-sizing: $box_sizing; + box-sizing: config.$box_sizing; margin: 0; - font-family: $family_text_basic; - font-size: $size_text_basic; - line-height: $line_text_basic; - color: $color_text_basic; - background-color: $color_back_basic; + font-family: config.$family_text_basic; + font-size: config.$size_text_basic; + line-height: config.$line_text_basic; + color: config.$color_text_basic; + background-color: config.$color_back_basic; *, ::before, @@ -41,7 +46,7 @@ body { &:hover { #mouse-overlay { background-color: transparent !important; - transition: background-color $duration_basic $timing_basic 0s !important; + transition: background-color config.$duration_basic config.$timing_basic 0s !important; } } } @@ -57,28 +62,28 @@ section { } .sec_main_center { - width: $width_basic; + width: config.$width_basic; margin: 0 auto; - padding-top: $space_small; + padding-top: config.$space_small; @include forTabletPortraitUp { - width: $width_small; + width: config.$width_small; } @include forTabletLandscapeUp { - width: $width_medium; + width: config.$width_medium; } @include forBigDesktopUp { - width: $width_large; + width: config.$width_large; } } .sec_main_status { - border-top-width: $width_border_8; + border-top-width: config.$width_border_8; border-top-style: solid; - border-color: $color_border_basic; - padding-top: $space_small; + border-color: config.$color_border_basic; + padding-top: config.$space_small; } // Navigation @@ -97,14 +102,14 @@ nav { // Aside element // ----------------------------------------------------------------------------- aside { - width: $width_aside_basic; + width: config.$width_aside_basic; &.right + .bside { - margin-right: calc(#{$width_aside_basic} + #{$space_basic}); + margin-right: calc(#{config.$width_aside_basic} + #{config.$space_basic}); } &.left + .bside { - margin-left: calc(#{$width_aside_basic} + #{$space_basic}); + margin-left: calc(#{config.$width_aside_basic} + #{config.$space_basic}); } &.right { @@ -150,7 +155,7 @@ aside { } ul.vertical li { - margin-bottom: $space_half; + margin-bottom: config.$space_half; .a_button > i:last-child { margin-left: auto; @@ -172,12 +177,12 @@ h6 { h1 { @extend %head_1; - margin: $space_large 0 $space_small; + margin: config.$space_large 0 config.$space_small; } h2 { @extend %head_2; - margin: $space_medium 0 $space_small; + margin: config.$space_medium 0 config.$space_small; } h1 + h1, @@ -187,25 +192,25 @@ h2 + h2 { h3 { @extend %head_3; - margin: $space_double 0; + margin: config.$space_double 0; text-transform: uppercase; } h4 { @extend %head_3; - margin: $space_double 0; + margin: config.$space_double 0; text-transform: none; } h5 { @extend %head_4; - margin: $space_double 0 $space_basic; + margin: config.$space_double 0 config.$space_basic; text-transform: none; } h6 { @extend %basic; - margin: $space_basic 0; + margin: config.$space_basic 0; text-transform: none; font-weight: bold; } @@ -219,7 +224,7 @@ hgroup { } & > p { - margin-bottom: $space_small; + margin-bottom: config.$space_small; } } @@ -227,7 +232,7 @@ hgroup { // ----------------------------------------------------------------------------- header { &.io { - z-index: map.get($z-indexes, "content-top"); + z-index: map.get(config.$z-indexes, "content-top"); & > *:last-child *:last-child { margin-right: 0; @@ -258,11 +263,11 @@ header { } .header_txt { - margin-bottom: $space_small; - border-bottom: $border_dotted; + margin-bottom: config.$space_small; + border-bottom: config.$border_dotted; h1 { - border-top: $border_basic; + border-top: config.$border_basic; } } @@ -279,7 +284,7 @@ footer { button, span, div:not(.spacer) { - padding: 0 $space_half !important; + padding: 0 config.$space_half !important; } } } diff --git a/elements/_tables.scss b/elements/_tables.scss index 94e6b4e..2934aba 100644 --- a/elements/_tables.scss +++ b/elements/_tables.scss @@ -1,5 +1,10 @@ @use "sass:color"; +@use "../global/config"; +@use "../global/common"; +@use "../global/typography"; +@use "../elements/grouping"; + // Tabular data // ----------------------------------------------------------------------------- // table @@ -18,21 +23,21 @@ // Table // ----------------------------------------------------------------------------- table { - margin: $margin_double; - border: $border_basic; + margin: config.$margin_double; + border: config.$border_basic; border-collapse: collapse; } .table_blank { - border: $width_border_basic solid transparent; + border: config.$width_border_basic solid transparent; th, td { - border: $width_border_basic solid transparent; + border: config.$width_border_basic solid transparent; } } .table_free { - border: $width_border_basic solid transparent; + border: config.$width_border_basic solid transparent; } .table_stripe { @@ -42,7 +47,7 @@ table { } tr:nth-child(even) td { - background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); + background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); } } @@ -58,8 +63,8 @@ table { // ----------------------------------------------------------------------------- caption { @extend p; - padding: $space_half 0; - border: $border_dotted; + padding: config.$space_half 0; + border: config.$border_dotted; text-align: center; } @@ -90,7 +95,7 @@ thead { tfoot { tr:first-child td { - border-top: $border_basic; + border-top: config.$border_basic; } } @@ -104,17 +109,17 @@ tr { // ----------------------------------------------------------------------------- th, td { @extend %basic; - padding: $space_half; + padding: config.$space_half; } th { - border: $border_basic; + border: config.$border_basic; text-align: left; } td { - border-right: $border_basic; - border-bottom: $border_basic; + border-right: config.$border_basic; + border-bottom: config.$border_basic; } td:last-child { @@ -128,5 +133,5 @@ td:last-child { .cell_pre { // border-right-width: $width_border_4; // border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic); - background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); + background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); } diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss index 71de523..3d94607 100644 --- a/elements/_textlevel.scss +++ b/elements/_textlevel.scss @@ -1,5 +1,9 @@ @use "sass:color"; +@use "../global/config"; +@use "../global/typography"; +@use "../functions/color" as *; + // Text-Level semantics // ----------------------------------------------------------------------------- // a @@ -39,69 +43,69 @@ // Links // ----------------------------------------------------------------------------- a { - color: $color_link_basic; + color: config.$color_link_basic; // color: color.scale($color_action_basic, $lightness: 20%); text-decoration: none; &:active, &:focus, &:hover { - color: $color_highlight_basic; + color: config.$color_highlight_basic; } } .a_internal { - color: $charlie_color; + color: basic_color(charlie); } .a_external { - color: $delta_color; + color: basic_color(delta); } .a_discreet { - color: $color_text_basic; + color: config.$color_text_basic; } .a_line { - border-bottom-width: $space_tiny; + border-bottom-width: config.$space_tiny; border-bottom-style: dotted; - border-color: $color_border_basic; - color: $color_text_basic; + border-color: config.$color_border_basic; + color: config.$color_text_basic; background-color: transparent; - transition: color $duration_basic $timing_basic; + transition: color config.$duration_basic config.$timing_basic; &:active, &:focus, &:hover { - color: $color_highlight_basic; - background-color: $color_action_basic; + color: config.$color_highlight_basic; + background-color: config.$color_action_basic; } } .a_button { display: inline-block; - padding: $padding_basic; - border-radius: $radius_basic; - background-color: color.adjust($color_link_basic, $alpha: -0.8); + padding: config.$padding_basic; + border-radius: config.$radius_basic; + background-color: color.adjust(config.$color_link_basic, $alpha: -0.8); &:active, &:focus, &:hover { border-color: transparent; - background-color: color.adjust($color_highlight_basic, $alpha: -0.8); + background-color: color.adjust(config.$color_highlight_basic, $alpha: -0.8); } } .a_button_text { @extend .a_button; - padding: $padding_link; - color: $color_text_basic; + padding: config.$padding_link; + color: config.$color_text_basic; background-color: transparent; } .a_button_border { @extend .a_button_text; - border: $border_basic; + border: config.$border_basic; } @@ -112,7 +116,7 @@ i, em { } .i_bright { - color: $color_highlight_basic; + color: config.$color_highlight_basic; font-style: normal; } @@ -196,14 +200,14 @@ time { // ----------------------------------------------------------------------------- code { @extend %basic_mono; - color: color.scale($color_text_basic, $lightness: $color_diff_basic); - background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny); + color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic); + background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny); } .code_solo { @extend %basic_mono; - padding: $space_tiny $space_half; - color: $color_text_basic; + padding: config.$space_tiny config.$space_half; + color: config.$color_text_basic; } // Variable @@ -224,12 +228,12 @@ kbd { @extend %basic_mono; // font-size: .9em; // font-weight: bold; - padding: 0 $space_half; - border-width: $width_border_basic; + padding: 0 config.$space_half; + border-width: config.$width_border_basic; border-style: solid; - border-color: $color_darker; - border-radius: $radius_basic; - color: color.scale($color_text_basic, $lightness: $color_diff_basic); + border-color: config.$color_darker; + border-radius: config.$radius_basic; + color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic); } // Sub- and superscript @@ -247,22 +251,22 @@ u { // Marks // ----------------------------------------------------------------------------- mark { - background-color: $alpha_color; + background-color: basic_color(alpha); } .mark_cursor { - color: color.invert($color_text_basic); - background-color: $color_text_basic; + color: color.invert(config.$color_text_basic); + background-color: config.$color_text_basic; } ::-moz-selection { - color: color.invert($color_text_basic); - background-color: $color_text_basic; + color: color.invert(config.$color_text_basic); + background-color: config.$color_text_basic; } ::selection { - color: color.invert($color_text_basic); - background-color: $color_text_basic; + color: color.invert(config.$color_text_basic); + background-color: config.$color_text_basic; } // Text direction diff --git a/functions/_all.scss b/functions/_all.scss deleted file mode 100644 index 4acf406..0000000 --- a/functions/_all.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "color"; -@import "shade"; -@import "tint"; diff --git a/functions/_color.scss b/functions/_color.scss index 11fbfac..a7f1fa8 100644 --- a/functions/_color.scss +++ b/functions/_color.scss @@ -1,6 +1,8 @@ @use "sass:map"; @use "sass:color"; +@use "../global/config"; + @function createColorMap($color, $percentage, $opacity) { $map: ( base: $color, @@ -11,6 +13,6 @@ @return $map; } -@function basic_color($key: 'alpha') { - @return map.get($color_palette, $key); +@function basic_color($key: 'alpha', $map: config.$color_palette) { + @return map.get($map, $key); } diff --git a/functions/_index.scss b/functions/_index.scss new file mode 100644 index 0000000..580266b --- /dev/null +++ b/functions/_index.scss @@ -0,0 +1,3 @@ +@use "color" as *; +@use "shade"; +@use "tint"; diff --git a/global/_common.scss b/global/_common.scss index 3a33d47..c39eacf 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -1,8 +1,13 @@ -// Common styles for global usage -// ----------------------------------------------------------------------------- @use "sass:math"; @use "sass:color"; +@use "config"; +@use "../functions/color" as *; +@use "../mixins/media_query" as *; +@use "../mixins/user_agent" as *; + +// Common styles for global usage +// ----------------------------------------------------------------------------- // General classes // ----------------------------------------------------------------------------- @@ -16,13 +21,13 @@ *, ::before, ::after { - box-sizing: $box_sizing; + box-sizing: config.$box_sizing; } } %size_io_button { - border: $width_border_io solid transparent; - padding: $padding_basic; + border: config.$width_border_io solid transparent; + padding: config.$padding_basic; } .di_none { @@ -52,10 +57,10 @@ margin-left: 37.5%; } -@each $size, $variable in (basic, #{$space_basic}), - (small, #{$space_small}), - (medium, #{$space_medium}), - (large, #{$space_large}) { +@each $size, $variable in (basic, #{config.$space_basic}), + (small, #{config.$space_small}), + (medium, #{config.$space_medium}), + (large, #{config.$space_large}) { .space_top_#{$size} { margin-top: $variable; } @@ -109,22 +114,22 @@ .wrap_center { & > * { - margin-right: math.div((100% - $width_basic), 2); - margin-left: math.div((100% - $width_basic), 2); + margin-right: math.div((100% - config.$width_basic), 2); + margin-left: math.div((100% - config.$width_basic), 2); @include forTabletPortraitUp { - margin-right: math.div((100% - $width_small), 2); - margin-left: math.div((100% - $width_small), 2); + margin-right: math.div((100% - config.$width_small), 2); + margin-left: math.div((100% - config.$width_small), 2); } @include forTabletLandscapeUp { - margin-right: math.div((100% - $width_medium), 2); - margin-left: math.div((100% - $width_medium), 2); + margin-right: math.div((100% - config.$width_medium), 2); + margin-left: math.div((100% - config.$width_medium), 2); } @include forBigDesktopUp { - margin-right: math.div((100% - $width_large), 2); - margin-left: math.div((100% - $width_large), 2); + margin-right: math.div((100% - config.$width_large), 2); + margin-left: math.div((100% - config.$width_large), 2); } } } @@ -155,7 +160,7 @@ .float_space_left { float: left; - margin-right: $space_small; + margin-right: config.$space_small; } .float_half_size { @@ -183,14 +188,14 @@ flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; - gap: $space_half $space_basic; + gap: config.$space_half config.$space_basic; } %flex-column, %flex-row { display: flex; flex-wrap: nowrap; - gap: $space_basic; + gap: config.$space_basic; } %flex-column { @@ -252,31 +257,31 @@ .pos_full_view { @extend %viewport_fixed; - background-color: rgba($alpha_color, 0.5); + background-color: rgba(basic_color(alpha), 0.5); } .pos_full_page { @extend %full_parent; - background-color: rgba($charlie_color, 0.25); + background-color: rgba(basic_color(charlie), 0.25); } .hover_back_change { - background-color: $color_darker; + background-color: config.$color_darker; transition: background-color 0.2s ease-in-out; &:hover { - background-color: $color_back_basic; + background-color: config.$color_back_basic; } } #mouse-overlay { @extend %viewport_fixed; - z-index: $z_heaven; - transition: background-color $duration_long $timing_basic $duration_long; + z-index: config.$z_heaven; + transition: background-color config.$duration_long config.$timing_basic config.$duration_long; pointer-events: none; &.active { - background-color: color.adjust($color_darkest, $alpha: -0.5); + background-color: color.adjust(config.$color_darkest, $alpha: -0.5); } } @@ -284,11 +289,11 @@ // Colors // ----------------------------------------------------------------------------- .txt_color_light { - color: $color_brighter; + color: config.$color_brighter; } .txt_color_dark { - color: $color_darker; + color: config.$color_darker; } @@ -311,7 +316,7 @@ } .txt_hero { - font-size: $size_hero; + font-size: config.$size_hero; } .txt_center { @@ -343,8 +348,12 @@ } .txt_gradient { - background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color); + background: linear-gradient(165deg, basic_color(alpha) 30%, basic_color(bravo) 45%, basic_color(charlie) 50%, basic_color(delta), basic_color(echo) 80%, basic_color(foxtrot)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -} \ No newline at end of file +} + +// Focus +// ----------------------------------------------------------------------------- +@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list); \ No newline at end of file diff --git a/global/_config.scss b/global/_config.scss index 42b6a91..cb3bd3f 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -6,7 +6,6 @@ // ------------------------------------------------------------------------------ - // TEXT // ------------------------------------------------------------------------------ $size_text_basic: 17px !default; @@ -67,7 +66,6 @@ $family_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'S $family_head_basic: $family_text_basic !default; - // COLORS // ------------------------------------------------------------------------------ $color_palette: ( @@ -78,8 +76,6 @@ $color_palette: ( echo: #52bed1, foxtrot: #0c85ff) !default; -@include addDefaultColors; - $color_diff_basic: 12% !default; $color_diff_tiny: 4% !default; $color_diff_double: $color_diff_basic * 2; @@ -99,25 +95,13 @@ $color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic); $color_bright: color.scale($color_brightest, $lightness: -$color_diff_double); $color_head_basic: $color_text_basic !default; -$color_link_basic: $delta_color !default; +$color_link_basic: map.get($color_palette, delta) !default; $color_highlight_basic: $color_front_basic !default; -$color_action_basic: $foxtrot_color !default; - +$color_action_basic: map.get($color_palette, foxtrot) !default; // default shadow colors // $shadow_color: fade-out($color_medium, 0.5); -$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); -} - - // LAYOUT // ------------------------------------------------------------------------------ @@ -174,45 +158,44 @@ $z-indexes: ( ); - // IO // ------------------------------------------------------------------------------ $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="email"]', - 'input[type="password"]', - 'input[type="tel"]', - 'input[type="url"]', - 'input[type="search"]', - 'input:not([type])'; +'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="email"]', +'input[type="password"]', +'input[type="tel"]', +'input[type="url"]', +'input[type="search"]', +'input:not([type])'; $io_date_list: '.input_io[type="date"]', - '.input_io[type="time"]', - '.input_io[type="datetime-local"]', - '.input_io[type="month"]', - '.input_io[type="week"]'; +'.input_io[type="time"]', +'.input_io[type="datetime-local"]', +'.input_io[type="month"]', +'.input_io[type="week"]'; $io_button_list: 'button', - 'input[type="button"]', +'input[type="button"]', // 'input[type="file"]', - 'input[type="reset"]', - 'input[type="image"]', - 'input[type="submit"]'; +'input[type="reset"]', +'input[type="image"]', +'input[type="submit"]'; $io_focus_list: 'a[href]', - 'area[href]', - 'button:not([disabled])', - 'input:not([disabled])', - 'select:not([disabled])', - 'textarea:not([disabled])', - '*[tabindex]'; +'area[href]', +'button:not([disabled])', +'input:not([disabled])', +'select:not([disabled])', +'textarea:not([disabled])', +'*[tabindex]'; $color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default; $color_text_button: $color_text_basic !default; @@ -229,7 +212,6 @@ $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06); $shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3); - // ANIMATIONS // ------------------------------------------------------------------------------ $duration_basic: 200ms !default; @@ -241,7 +223,6 @@ $transition_hide: opacity $duration_double; $transition_show: opacity $duration_long; - // HARDWARE BREAKPOINTS // ------------------------------------------------------------------------------ $screen_tiny: 768px; @@ -252,7 +233,6 @@ $screen_huge: 1680px; $screen_gigantic: 1920px; - // VENDOR PREFIX // ------------------------------------------------------------------------------ $prefix_defaults: -moz- -webkit- -o- -ms- ''; @@ -264,7 +244,6 @@ $moz_ms_support: -moz- -ms- ''; $webkit_ms_support: -webkit- -ms- ''; - // SYMBOLS // ------------------------------------------------------------------------------ $icons: ( @@ -282,9 +261,6 @@ $icons: ( } - // USER AGENT // ------------------------------------------------------------------------------ -$no_agent_focus: true; - -@include overrideUserAgent; \ No newline at end of file +$no_agent_focus: true !default; \ No newline at end of file diff --git a/global/_typography.scss b/global/_typography.scss index f03c740..a67f773 100644 --- a/global/_typography.scss +++ b/global/_typography.scss @@ -1,46 +1,48 @@ +@use "config"; + // Basic styles // ----------------------------------------------------------------------------- %basic { - font-family: $family_text_basic; - font-size: $size_text_1; - line-height: $line_text_basic; + font-family: config.$family_text_basic; + font-size: config.$size_text_1; + line-height: config.$line_text_basic; } %basic_mono { - font-family: $family_text_mono; - font-size: $size_text_1; - line-height: $line_text_mono; + font-family: config.$family_text_mono; + font-size: config.$size_text_1; + line-height: config.$line_text_mono; } %basic_print { - font-family: $family_text_print; - font-size: $size_text_1; - line-height: $line_text_basic; + font-family: config.$family_text_print; + font-size: config.$size_text_1; + line-height: config.$line_text_basic; } %head_all { - font-family: $family_head_basic; - line-height: $line_head_basic; + font-family: config.$family_head_basic; + line-height: config.$line_head_basic; } %head_1 { - font-size: $size_head_1; + font-size: config.$size_head_1; font-weight: 300; } %head_2 { - font-size: $size_head_2; + font-size: config.$size_head_2; font-weight: 300; } %head_3 { - font-size: $size_head_3; + font-size: config.$size_head_3; font-weight: 300; } %head_4 { - font-size: $size_head_4; + font-size: config.$size_head_4; font-weight: 300; } diff --git a/mixins/_all.scss b/mixins/_all.scss deleted file mode 100644 index f4240f5..0000000 --- a/mixins/_all.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "media_query"; -@import "sprite"; -@import "flow"; -@import "color"; -@import "user_agent"; -@import "vendor"; diff --git a/mixins/_color.scss b/mixins/_color.scss index 5ace6b1..0518b0d 100644 --- a/mixins/_color.scss +++ b/mixins/_color.scss @@ -1,22 +1,24 @@ @use "sass:map"; -@mixin addDefaultColors() { - @if map.has-key($color_palette, alpha) { - $alpha_color: map.get($color_palette, alpha) !global; +@use "../global/config"; + +@mixin addDefaultColors { + @if map.has-key(config.$color_palette, alpha) { + $alpha_color: map.get(config.$color_palette, alpha) !global; } - @if map.has-key($color_palette, bravo) { - $bravo_color: map.get($color_palette, bravo) !global; + @if map.has-key(config.$color_palette, bravo) { + $bravo_color: map.get(config.$color_palette, bravo) !global; } - @if map.has-key($color_palette, charlie) { - $charlie_color: map.get($color_palette, charlie) !global; + @if map.has-key(config.$color_palette, charlie) { + $charlie_color: map.get(config.$color_palette, charlie) !global; } - @if map.has-key($color_palette, delta) { - $delta_color: map.get($color_palette, delta) !global; + @if map.has-key(config.$color_palette, delta) { + $delta_color: map.get(config.$color_palette, delta) !global; } - @if map.has-key($color_palette, echo) { - $echo_color: map.get($color_palette, echo) !global; + @if map.has-key(config.$color_palette, echo) { + $echo_color: map.get(config.$color_palette, echo) !global; } - @if map.has-key($color_palette, foxtrot) { - $foxtrot_color: map.get($color_palette, foxtrot) !global; + @if map.has-key(config.$color_palette, foxtrot) { + $foxtrot_color: map.get(config.$color_palette, foxtrot) !global; } } diff --git a/mixins/_index.scss b/mixins/_index.scss new file mode 100644 index 0000000..30b748b --- /dev/null +++ b/mixins/_index.scss @@ -0,0 +1,6 @@ +@forward "media_query"; +@forward "sprite"; +@forward "flow"; +//@use "./_color"; +@forward "user_agent"; +@forward "vendor"; diff --git a/mixins/_media_query.scss b/mixins/_media_query.scss index d0e1f6c..7cef3e1 100644 --- a/mixins/_media_query.scss +++ b/mixins/_media_query.scss @@ -1,32 +1,34 @@ +@use "../global/config"; + @use "sass:math"; //Sections for Media Queries @mixin forPhoneUp { - @media (min-width: #{$screen_tiny - 1}) { @content; } //599px + @media (min-width: #{config.$screen_tiny - 1}) { @content; } //599px } @mixin forPhoneOnly { - @media (max-width: #{$screen_tiny - 1}) { @content; } //599px + @media (max-width: #{config.$screen_tiny - 1}) { @content; } //599px } @mixin forTabletPortraitUp { - @media (min-width: $screen_small) { @content; } //600px + @media (min-width: config.$screen_small) { @content; } //600px } @mixin forTabletPortraitOnly { - @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px + @media (min-width: config.$screen_tiny) and (max-width: #{config.$screen_small - 1}) { @content; } //600px - 899px } @mixin forTabletLandscapeUp { - @media (min-width: $screen_small) { @content; } //900px + @media (min-width: config.$screen_small) { @content; } //900px } @mixin forTabletLandscapeOnly { - @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px + @media (min-width: config.$screen_small) and (max-width: #{config.$screen_medium - 1}) { @content; } //900px - 1199px } @mixin forDesktopUp { - @media (min-width: $screen_medium) { @content; } //1200px + @media (min-width: config.$screen_medium) { @content; } //1200px } @mixin forDesktopOnly { - @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px + @media (min-width: config.$screen_medium) and (max-width: #{config.$screen_huge - 1}) { @content; } //1200px - 1799px } @mixin forBigDesktopUp { - @media (min-width: $screen_huge) { @content; } //1800px + @media (min-width: config.$screen_huge) { @content; } //1800px } //Mobile-first Media Query diff --git a/mixins/_user_agent.scss b/mixins/_user_agent.scss index bf21661..4b94d81 100644 --- a/mixins/_user_agent.scss +++ b/mixins/_user_agent.scss @@ -1,9 +1,9 @@ -@mixin overrideUserAgent() { - @if $no_agent_focus == true { - @each $el in $io_focus_list { - #{$el}:focus { - outline: 0; - } - } - } +@mixin overrideUserAgent($active, $elements) { + @if $active == true { + @each $el in $elements { + #{$el}:focus { + outline: 0; + } + } + } } diff --git a/modules/breakpoint/_breakpoint_module.scss b/modules/breakpoint/_breakpoint_module.scss index fd0174a..37ef6b3 100644 --- a/modules/breakpoint/_breakpoint_module.scss +++ b/modules/breakpoint/_breakpoint_module.scss @@ -1,47 +1,59 @@ +@use "../../global/config"; +@use "../../mixins/media_query" as *; + .query_goingLarge { - @include goingLarge($screen_tiny) {}; + @include goingLarge(config.$screen_tiny) { + } +; } .query_goingSmall { - @include goingSmall($screen_gigantic) {}; + @include goingSmall(config.$screen_gigantic) { + } +; } .query_phoneUp { - @include forPhoneUp {} + @include forPhoneUp { + } } .query_phoneOnly { - @include forPhoneOnly {} + @include forPhoneOnly { + } } -.query_tabletPortaitOnly { - @include forTabletPortraitOnly { - } +.query_tabletPortraitOnly { + @include forTabletPortraitOnly { + } } .query_tabletPortraitUp { - @include forTabletPortraitUp { - } + @include forTabletPortraitUp { + } } .query_tabletLandscapeOnly { - @include forTabletLandscapeOnly {} + @include forTabletLandscapeOnly { + } } .query_tabletLandscapeUp { - @include forTabletLandscapeUp {} + @include forTabletLandscapeUp { + } } .query_desktopOnly { - @include forDesktopOnly { - } + @include forDesktopOnly { + } } .query_desktopUp { - @include forDesktopUp { - } + @include forDesktopUp { + } } .query_bigDesktopUp { - @include forBigDesktopUp {} + @include forBigDesktopUp { + } } diff --git a/modules/editor/_editor_module.scss b/modules/editor/_editor_module.scss index 7aa9434..3810dc7 100644 --- a/modules/editor/_editor_module.scss +++ b/modules/editor/_editor_module.scss @@ -1,13 +1,14 @@ // Custom extends and mixins // ------------------------------------------------------------------------------ -@import "mixins"; -@import "extends"; +@use "mixins"; +@use "extends"; +@use "../../global/config"; // Editor module styles // ------------------------------------------------------------------------------ %wip { - border-right: $space_basic solid rgba(crimson, 0.8); + border-right: config.$space_basic solid rgba(crimson, 0.8); background-color: rgba(crimson, 0.1) !important; } .wip { diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss index 899add5..55ad0d8 100644 --- a/modules/explanation/_explanation_module.scss +++ b/modules/explanation/_explanation_module.scss @@ -1,30 +1,38 @@ @use "sass:color"; @use "sass:math"; +@use "../../global/config"; +@use "../../global/common"; +@use "../../functions/color" as *; +@use "../../mixins/vendor"; + %expose_after { &::after { content: ""; display: block; height: 48px; - background-color: rgba($delta_color, 0.1) !important; + background-color: rgba(basic_color(delta), 0.1) !important; } } + %expose_before { &::before { content: ""; display: block; height: 48px; - background-color: rgba($delta_color, 0.1) !important; + background-color: rgba(basic_color(delta), 0.1) !important; } } + %expose { &::before, &::after { content: ""; display: block; height: 48px; - background-color: rgba($delta_color, 0.1) !important; + background-color: rgba(basic_color(delta), 0.1) !important; } } + // %exp { // } %exp_hidden { @@ -37,39 +45,42 @@ .exp_overlay { @extend %full_parent; - background-color: color.adjust($alpha_color, $alpha: -0.6); + background-color: color.adjust(basic_color(alpha), $alpha: -0.6); } .exp_pop { @extend %exp_hidden !optional; position: absolute; z-index: 100; - top: $space_large; - left: $space_large; - padding: $space_half; - border: 4px solid $color_back_basic; + top: config.$space_large; + left: config.$space_large; + padding: config.$space_half; + border: 4px solid config.$color_back_basic; border-radius: 4px; - background-color: $color_back_basic; + background-color: config.$color_back_basic; pointer-events: none; } + .exp_marker_pop { position: absolute; - top: math.div(-$size_text_basic, 4) * 3; - right: math.div(-$size_text_basic, 2); - width: $size_text_basic; - height: $size_text_basic; - border: $space_tiny solid $color_highlight_basic; - border-radius: $size_text_basic; - color: $color_highlight_basic; - background-color: $color_darkest; + top: math.div(-(config.$size_text_basic), 4) * 3; + right: math.div(-(config.$size_text_basic), 2); + width: config.$size_text_basic; + height: config.$size_text_basic; + border: config.$space_tiny solid config.$color_highlight_basic; + border-radius: config.$size_text_basic; + color: config.$color_highlight_basic; + background-color: config.$color_darkest; } .exp_expose { @extend %expose !optional; } + .exp_expose_pre { @extend %expose_after; } + .exp_expose_post { @extend %expose_before; } @@ -81,21 +92,25 @@ // padding: $space_basic $space_basic * 2; cursor: pointer; } + .exp_help_btn { display: table; - right: $space_double; - bottom: $space_double; - background-color: rgba($color_darkest, 0.4); + right: config.$space_double; + bottom: config.$space_double; + background-color: rgba(config.$color_darkest, 0.4); + &:hover { - background-color: $color_brightest; + background-color: config.$color_brightest; + > .span_solo { - color: $color_darkest; + color: config.$color_darkest; } } + .span_solo { display: table-cell; - color: rgba($color_brightest, 0.8); - font-family: $family_text_mono; + color: rgba(config.$color_brightest, 0.8); + font-family: config.$family_text_mono; font-size: 1.4em; text-align: center; vertical-align: middle; @@ -103,13 +118,12 @@ } - .expose_height { position: absolute; top: 0; right: 0; bottom: 0; left: 0; - background-color: rgba($delta_color, 0.1) !important; - @include vendor-prefix(transition, height 0.5s ease); + background-color: rgba(basic_color(delta), 0.1) !important; + @include vendor.vendor-prefix(transition, height 0.5s ease); } diff --git a/modules/io/_io_module.scss b/modules/io/_io_module.scss index 3f8c9e6..60c3526 100644 --- a/modules/io/_io_module.scss +++ b/modules/io/_io_module.scss @@ -1,5 +1,10 @@ +@use "../../global/config"; +@use "../../global/common"; +@use "../../global/typography"; +@use "../../elements/interactive"; + input[type="range"] { - accent-color: $color_text_io; + accent-color: config.$color_text_io; } header, @@ -51,7 +56,7 @@ footer { header, aside { &.io { - padding: $space_basic; + padding: config.$space_basic; textarea { @extend .io_textarea; diff --git a/modules/maintenance/_maintenance_module.scss b/modules/maintenance/_maintenance_module.scss index 815648c..49a9f0a 100644 --- a/modules/maintenance/_maintenance_module.scss +++ b/modules/maintenance/_maintenance_module.scss @@ -1,7 +1,12 @@ +@use "../../global/config"; +@use "../../global/common"; +@use "../../elements/sections"; +@use "../../functions/color" as *; + .body_status { @extend .sec_main_status; height: 100vh; - border-color: $foxtrot_color; + border-color: basic_color(foxtrot); .main_site { @extend .wrap_center; @@ -13,7 +18,7 @@ } & > h1 + h3 { margin-top: 0; - margin-bottom: $space_small; + margin-bottom: config.$space_small; } } } diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index d5fabaa..dd01538 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -1,3 +1,6 @@ +@use "../../global/config"; +@use "../../global/common"; + nav { ul, @@ -6,7 +9,7 @@ nav { } li { - margin-bottom: $space_basic; + margin-bottom: config.$space_basic; list-style: none; } } @@ -16,12 +19,12 @@ nav { @extend .overflow; ul { - margin: $space_basic 0; + margin: config.$space_basic 0; } li { @extend .float_space_left; - margin-right: $space_basic; + margin-right: config.$space_basic; margin-bottom: 0; &:last-child { @@ -33,28 +36,28 @@ nav { .nav_right { float: right; - margin-left: $space_basic; + margin-left: config.$space_basic; .align_parent { - margin-right: $space_basic * -1; + margin-right: config.$space_basic * -1; } } .nav_separate { li { position: relative; - padding-left: $space_tiny; + padding-left: config.$space_tiny; &:not(:first-child) { &::before { content: ""; position: absolute; - width: $space_tiny; + width: config.$space_tiny; height: 100%; left: 0; top: 0; - background-color: $color_border_basic; + background-color: config.$color_border_basic; } } } @@ -66,17 +69,17 @@ nav { position: relative; &:first-child { - padding-left: $space_basic * 2 + $space_tiny; + padding-left: config.$space_basic * 2 + config.$space_tiny; &::before { content: ""; position: absolute; - width: $space_tiny; + width: config.$space_tiny; height: 100%; left: 0; top: 0; - background-color: $color_front_basic; - margin: 0 $space_basic; + background-color: config.$color_front_basic; + margin: 0 config.$space_basic; } } } @@ -97,11 +100,11 @@ nav { .nav_column { position: relative; - margin: $space_basic 0; + margin: config.$space_basic 0; ul { display: flex; - margin: 0 $space_large; + margin: 0 config.$space_large; li { flex: auto; @@ -119,11 +122,11 @@ nav { position: fixed; // display: table; // width: 3em; - right: $space_half; - bottom: $space_double; + right: config.$space_half; + bottom: config.$space_double; ul { - margin: $space_basic 0; + margin: config.$space_basic 0; } li { @@ -145,7 +148,7 @@ nav { } &:hover { - background-color: $color_action_basic; + background-color: config.$color_action_basic; } } .sprite_img { @@ -163,8 +166,8 @@ nav { &:active, &:focus, &:hover { - background-color: rgba($color_text_basic, 0.2); - color: $color_text_basic; + background-color: rgba(config.$color_text_basic, 0.2); + color: config.$color_text_basic; } } } diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss index 84d9c0f..81ab54d 100644 --- a/modules/print/_print_module.scss +++ b/modules/print/_print_module.scss @@ -1,13 +1,15 @@ @use "sass:list"; -@import "mixins"; -@import "extends"; +@use "../../global/config"; +@use "../../global/typography"; +@use "mixins"; +@use "extends"; // Print module styles // ------------------------------------------------------------------------------ %paper { - background-color: $color_front_basic; + background-color: config.$color_front_basic; } $a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm; @@ -17,7 +19,7 @@ $a6: ".dina6" 0 0 0 1.2cm; $din: $a4, $a5, $a6; .print_body { - font-size: $size_text_print; + font-size: config.$size_text_print; margin: 10vh 20vw; @page { @@ -25,7 +27,7 @@ $din: $a4, $a5, $a6; margin: 1.2cm; } - @page:first { + @page :first { size: A4; margin: 0; } @@ -38,9 +40,11 @@ $din: $a4, $a5, $a6; right: list.nth($space, 3); left: list.nth($space, 5); } + .page_head { top: list.nth($space, 2); } + .page_foot { bottom: list.nth($space, 4); } @@ -86,15 +90,18 @@ $din: $a4, $a5, $a6; line-height: 1; text-align: right; } + p:first-child { text-align: left; } } + .page_content { margin-top: 10cm; margin-bottom: 2cm; } - margin: $space_small auto; + + margin: config.$space_small auto; } .page_title, .page_date { diff --git a/modules/tables/_tables_module.scss b/modules/tables/_tables_module.scss index 2746bec..74e1dc6 100644 --- a/modules/tables/_tables_module.scss +++ b/modules/tables/_tables_module.scss @@ -1,13 +1,17 @@ +@use "../../global/config"; +@use "../../global/typography"; +@use "../../functions/color" as *; + .table_link { width: 100%; border: 0; table-layout: auto; tbody { - border-bottom: $border_basic; + border-bottom: config.$border_basic; &:hover { - background-color: $color_bright; + background-color: config.$color_bright; } } @@ -26,11 +30,11 @@ } .cell_link { - padding-right: $space_basic; - padding-left: $space_basic; + padding-right: config.$space_basic; + padding-left: config.$space_basic; &:hover { - background-color: $foxtrot_color; + background-color: basic_color(foxtrot); a:first-child { display: none; @@ -38,7 +42,7 @@ a:last-child { display: block; - color: $color_highlight_basic; + color: config.$color_highlight_basic; } } @@ -58,8 +62,8 @@ } .cell_text { - padding-right: $space_basic; - padding-left: $space_basic; + padding-right: config.$space_basic; + padding-left: config.$space_basic; div { width: 100%;