From 93e254db648ccef1eedf1fa242cfa3f1947def0c Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Wed, 24 Feb 2021 12:55:30 +0100 Subject: [PATCH] Switch to SASS module system --- src/ds4.scss | 36 +++++++++---------- src/scss/components/_attributes_traits.scss | 20 ++++++----- src/scss/components/_basic_property.scss | 4 ++- .../components/_character_progression.scss | 10 ++++-- src/scss/components/_combat_values.scss | 15 ++++---- src/scss/components/_description.scss | 9 +++-- src/scss/components/_forms.scss | 13 ++++--- src/scss/components/_items_list.scss | 7 ++-- src/scss/components/_tabs.scss | 7 ++-- src/scss/global/_window.scss | 4 ++- src/scss/utils/_mixins.scss | 9 ++--- src/scss/utils/_typography.scss | 5 +++ src/scss/utils/_variables.scss | 4 +++ 13 files changed, 84 insertions(+), 59 deletions(-) diff --git a/src/ds4.scss b/src/ds4.scss index 6b6f6b0f..80024de4 100644 --- a/src/ds4.scss +++ b/src/ds4.scss @@ -1,26 +1,22 @@ -// Import utilities. -@import "scss/utils/typography"; -@import "scss/utils/colors"; -@import "scss/utils/mixins"; -@import "scss/utils/variables"; +@use 'sass:meta'; /* Global styles */ -@import "scss/global/window"; -@import "scss/global/grid"; -@import "scss/global/flex"; -@import "scss/global/accessibility"; +@include meta.load-css("scss/global/window"); +@include meta.load-css("scss/global/grid"); +@include meta.load-css("scss/global/flex"); +@include meta.load-css("scss/global/accessibility"); /* Styles limited to ds4 sheets */ .ds4 { - @import "scss/components/apps"; - @import "scss/components/forms"; - @import "scss/components/basic_property"; - @import "scss/components/tabs"; - @import "scss/components/items_list"; - @import "scss/components/talents"; - @import "scss/components/description"; - @import "scss/components/character_values"; - @import "scss/components/attributes_traits"; - @import "scss/components/combat_values"; - @import "scss/components/character_progression"; + @include meta.load-css("scss/components/apps"); + @include meta.load-css("scss/components/forms"); + @include meta.load-css("scss/components/basic_property"); + @include meta.load-css("scss/components/tabs"); + @include meta.load-css("scss/components/items_list"); + @include meta.load-css("scss/components/talents"); + @include meta.load-css("scss/components/description"); + @include meta.load-css("scss/components/character_values"); + @include meta.load-css("scss/components/attributes_traits"); + @include meta.load-css("scss/components/combat_values"); + @include meta.load-css("scss/components/character_progression"); } diff --git a/src/scss/components/_attributes_traits.scss b/src/scss/components/_attributes_traits.scss index ff99478f..fc29d362 100644 --- a/src/scss/components/_attributes_traits.scss +++ b/src/scss/components/_attributes_traits.scss @@ -1,13 +1,17 @@ +@use "../utils/colors"; +@use "../utils/typography"; +@use "../utils/variables"; + .attributes-traits { - margin-top: $margin-sm; + margin-top: variables.$margin-sm; .attribute { .attribute-label { - @include font-heading-upper; + @include typography.font-heading-upper; font-size: 2em; text-align: center; } .attribute-value { - border: 2px groove $c-border-groove; + border: variables.$border-groove; font-size: 1.5em; text-align: center; padding-left: 2px; @@ -16,7 +20,7 @@ input, .attribute-value-total { grid-column: span 2; - line-height: $default-input-height; + line-height: variables.$default-input-height; } .attribute-value-arrow { padding: 0 5px; @@ -26,14 +30,14 @@ .trait { .trait-label { color: transparent; - @include font-heading-upper; + @include typography.font-heading-upper; font-size: 2em; text-align: center; //text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black; - -webkit-text-stroke: 1px $c-black; + -webkit-text-stroke: 1px colors.$c-black; } .trait-value { - border: 2px groove $c-border-groove; + border: variables.$border-groove; font-size: 1.5em; text-align: center; padding-left: 2px; @@ -42,7 +46,7 @@ input, .trait-value-total { grid-column: span 2; - line-height: $default-input-height; + line-height: variables.$default-input-height; } .trait-value-arrow { padding: 0 5px; diff --git a/src/scss/components/_basic_property.scss b/src/scss/components/_basic_property.scss index 56668373..64a696c5 100644 --- a/src/scss/components/_basic_property.scss +++ b/src/scss/components/_basic_property.scss @@ -1,3 +1,5 @@ +@use "../utils/mixins"; + .basic-properties { flex: 0 0 100%; grid-gap: 2px; @@ -21,6 +23,6 @@ text-align: center; } - @include mark-invalid-or-disabled-input; + @include mixins.mark-invalid-or-disabled-input; } } diff --git a/src/scss/components/_character_progression.scss b/src/scss/components/_character_progression.scss index 729b2af1..e233ff40 100644 --- a/src/scss/components/_character_progression.scss +++ b/src/scss/components/_character_progression.scss @@ -1,3 +1,7 @@ +@use "../utils/typography"; +@use "../utils/colors"; +@use "./forms"; + .progression { .progression-entry { display: flex; @@ -8,14 +12,14 @@ padding-right: 3px; h2.progression-label { - @include font-heading-upper; + @include typography.font-heading-upper; display: block; height: 50px; padding: 0; - color: $c-light-grey; + color: colors.$c-light-grey; border: none; line-height: 50px; - margin: $header-top-margin 0; + margin: forms.$header-top-margin 0; text-align: right; //flex: 0; } diff --git a/src/scss/components/_combat_values.scss b/src/scss/components/_combat_values.scss index 431d838b..a0bea351 100644 --- a/src/scss/components/_combat_values.scss +++ b/src/scss/components/_combat_values.scss @@ -1,13 +1,16 @@ +@use "../utils/mixins"; +@use "../utils/variables"; + .combat-values { - margin-top: $margin-sm; + margin-top: variables.$margin-sm; .combat-value-with-formula { + $size: 60px; display: grid; place-items: center; - $size: 60px; - row-gap: $margin-sm; + row-gap: variables.$margin-sm; .combat-value { - $combat-values-icons-path: "#{$official-icons-path}/combat-values"; - @include centered-content; + $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values"; + @include mixins.centered-content; height: $size; width: $size; flex: 0 0 auto; @@ -43,7 +46,7 @@ width: $size; text-align: center; span { - line-height: $default-input-height; + line-height: variables.$default-input-height; } } } diff --git a/src/scss/components/_description.scss b/src/scss/components/_description.scss index 7afaf399..01187302 100644 --- a/src/scss/components/_description.scss +++ b/src/scss/components/_description.scss @@ -1,10 +1,13 @@ +@use "../utils/mixins"; +@use "../utils/variables"; + .side-properties { flex: 0; min-width: fit-content; max-width: 50%; margin: 5px 5px 5px 0; padding-right: 5px; - border-right: 2px groove $c-border-groove; + border-right: variables.$border-groove; .side-property { margin: 2px 0; @@ -13,7 +16,7 @@ justify-content: left; label { - line-height: $default-input-height; + line-height: variables.$default-input-height; font-weight: bold; padding-right: 3pt; } @@ -27,7 +30,7 @@ text-overflow: ellipsis; } - @include mark-invalid-or-disabled-input; + @include mixins.mark-invalid-or-disabled-input; input[type="checkbox"] { width: auto; diff --git a/src/scss/components/_forms.scss b/src/scss/components/_forms.scss index 7da745c8..43a7f37c 100644 --- a/src/scss/components/_forms.scss +++ b/src/scss/components/_forms.scss @@ -1,5 +1,8 @@ +@use "../utils/typography"; +@use "../utils/colors"; + .item-form { - font-family: $font-primary; + font-family: typography.$font-primary; } $header-top-margin: 5px; @@ -28,7 +31,7 @@ header.sheet-header { padding: 0px; margin: $header-top-margin 10px $header-top-margin 0; border-bottom: 0; - @include font-heading-upper; + @include typography.font-heading-upper; display: block; input { width: 100%; @@ -36,16 +39,16 @@ header.sheet-header { margin: 0; border: none; background-color: transparent; - @include font-heading-upper; + @include typography.font-heading-upper; } } h2.item-type { - @include font-heading-upper; + @include typography.font-heading-upper; display: block; height: 50px; padding: 0px; flex: 0 0 auto; - color: $c-light-grey; + color: colors.$c-light-grey; border: none; line-height: 50px; margin: $header-top-margin 0; diff --git a/src/scss/components/_items_list.scss b/src/scss/components/_items_list.scss index 399b7b29..6706a328 100644 --- a/src/scss/components/_items_list.scss +++ b/src/scss/components/_items_list.scss @@ -1,4 +1,5 @@ -@use "sass:color"; +@use "../utils/mixins"; +@use "../utils/variables"; .items-list { $row-height: 1.75em; @@ -61,7 +62,7 @@ margin: 0px; } - @include mark-invalid-or-disabled-input; + @include mixins.mark-invalid-or-disabled-input; } .item-description { @@ -83,6 +84,6 @@ margin-top: 1em; margin-bottom: 0; padding-left: 1em; - border-bottom: 2px groove $c-border-groove; + border-bottom: variables.$border-groove; font-weight: bold; } diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index 30a316da..4a7607ef 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -1,8 +1,9 @@ +@use "../utils/variables"; + nav.tabs { height: auto; - border-top: 2px groove $c-border-groove; - border-bottom: 2px groove $c-border-groove; - + border-top: variables.$border-groove; + border-bottom: variables.$border-groove; .item { font-weight: bold; } diff --git a/src/scss/global/_window.scss b/src/scss/global/_window.scss index 36985d71..eeeb4fbf 100644 --- a/src/scss/global/_window.scss +++ b/src/scss/global/_window.scss @@ -1,5 +1,7 @@ +@use "../utils/typography"; + .window-app { - font-family: $font-primary; + font-family: typography.$font-primary; input[type="text"], input[type="number"], input[type="password"], diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss index 7b030461..0c354845 100644 --- a/src/scss/utils/_mixins.scss +++ b/src/scss/utils/_mixins.scss @@ -1,3 +1,5 @@ +@use "./colors"; + @mixin element-invisible { position: absolute; @@ -22,14 +24,9 @@ @mixin mark-invalid-or-disabled-input { input:invalid { - background-color: $c-invalid-input; + background-color: colors.$c-invalid-input; } input:disabled { background-color: transparent; } } - -@mixin font-heading-upper { - font-family: $font-heading; - text-transform: uppercase; -} diff --git a/src/scss/utils/_typography.scss b/src/scss/utils/_typography.scss index a5838b07..65fb868e 100644 --- a/src/scss/utils/_typography.scss +++ b/src/scss/utils/_typography.scss @@ -10,3 +10,8 @@ $font-primary: "Lora", sans-serif; $font-secondary: "Lora", sans-serif; $font-heading: "Wood Stamp", sans-serif; + +@mixin font-heading-upper { + font-family: $font-heading; + text-transform: uppercase; +} diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss index 25d50b77..f63ffea6 100644 --- a/src/scss/utils/_variables.scss +++ b/src/scss/utils/_variables.scss @@ -1,3 +1,5 @@ +@use "./colors"; + $padding-sm: 5px; $padding-md: 10px; $padding-lg: 20px; @@ -8,3 +10,5 @@ $margin-lg: $padding-lg; $default-input-height: 26px; $official-icons-path: "assets/icons/official"; + +$border-groove: 2px groove colors.$c-border-groove;