dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 1 Activity

Switch to SASS module system

Browse source
This commit is contained in:
Johannes Loher 2021-02-24 12:55:30 +01:00
parent d5abc6d4be
commit 93e254db64
13 changed files with 84 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/ds4.scss
View file

@ -1,26 +1,22 @@
// Import utilities. @use 'sass:meta';
@import "scss/utils/typography";
@import "scss/utils/colors";
@import "scss/utils/mixins";
@import "scss/utils/variables";
/* Global styles */ /* Global styles */
@import "scss/global/window"; @include meta.load-css("scss/global/window");
@import "scss/global/grid"; @include meta.load-css("scss/global/grid");
@import "scss/global/flex"; @include meta.load-css("scss/global/flex");
@import "scss/global/accessibility"; @include meta.load-css("scss/global/accessibility");
/* Styles limited to ds4 sheets */ /* Styles limited to ds4 sheets */
.ds4 { .ds4 {
@import "scss/components/apps"; @include meta.load-css("scss/components/apps");
@import "scss/components/forms"; @include meta.load-css("scss/components/forms");
@import "scss/components/basic_property"; @include meta.load-css("scss/components/basic_property");
@import "scss/components/tabs"; @include meta.load-css("scss/components/tabs");
@import "scss/components/items_list"; @include meta.load-css("scss/components/items_list");
@import "scss/components/talents"; @include meta.load-css("scss/components/talents");
@import "scss/components/description"; @include meta.load-css("scss/components/description");
@import "scss/components/character_values"; @include meta.load-css("scss/components/character_values");
@import "scss/components/attributes_traits"; @include meta.load-css("scss/components/attributes_traits");
@import "scss/components/combat_values"; @include meta.load-css("scss/components/combat_values");
@import "scss/components/character_progression"; @include meta.load-css("scss/components/character_progression");
} }

20
src/scss/components/_attributes_traits.scss
View file

@ -1,13 +1,17 @@
@use "../utils/colors";
@use "../utils/typography";
@use "../utils/variables";
.attributes-traits { .attributes-traits {
margin-top: $margin-sm; margin-top: variables.$margin-sm;
.attribute { .attribute {
.attribute-label { .attribute-label {
@include font-heading-upper; @include typography.font-heading-upper;
font-size: 2em; font-size: 2em;
text-align: center; text-align: center;
} }
.attribute-value { .attribute-value {
border: 2px groove $c-border-groove; border: variables.$border-groove;
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
padding-left: 2px; padding-left: 2px;
@ -16,7 +20,7 @@
input, input,
.attribute-value-total { .attribute-value-total {
grid-column: span 2; grid-column: span 2;
line-height: $default-input-height; line-height: variables.$default-input-height;
} }
.attribute-value-arrow { .attribute-value-arrow {
padding: 0 5px; padding: 0 5px;
@ -26,14 +30,14 @@
.trait { .trait {
.trait-label { .trait-label {
color: transparent; color: transparent;
@include font-heading-upper; @include typography.font-heading-upper;
font-size: 2em; font-size: 2em;
text-align: center; 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; //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 { .trait-value {
border: 2px groove $c-border-groove; border: variables.$border-groove;
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
padding-left: 2px; padding-left: 2px;
@ -42,7 +46,7 @@
input, input,
.trait-value-total { .trait-value-total {
grid-column: span 2; grid-column: span 2;
line-height: $default-input-height; line-height: variables.$default-input-height;
} }
.trait-value-arrow { .trait-value-arrow {
padding: 0 5px; padding: 0 5px;

4
src/scss/components/_basic_property.scss
View file

@ -1,3 +1,5 @@
@use "../utils/mixins";
.basic-properties { .basic-properties {
flex: 0 0 100%; flex: 0 0 100%;
grid-gap: 2px; grid-gap: 2px;
@ -21,6 +23,6 @@
text-align: center; text-align: center;
} }
@include mark-invalid-or-disabled-input; @include mixins.mark-invalid-or-disabled-input;
} }
} }

10
src/scss/components/_character_progression.scss
View file

@ -1,3 +1,7 @@
@use "../utils/typography";
@use "../utils/colors";
@use "./forms";
.progression { .progression {
.progression-entry { .progression-entry {
display: flex; display: flex;
@ -8,14 +12,14 @@
padding-right: 3px; padding-right: 3px;
h2.progression-label { h2.progression-label {
@include font-heading-upper; @include typography.font-heading-upper;
display: block; display: block;
height: 50px; height: 50px;
padding: 0; padding: 0;
color: $c-light-grey; color: colors.$c-light-grey;
border: none; border: none;
line-height: 50px; line-height: 50px;
margin: $header-top-margin 0; margin: forms.$header-top-margin 0;
text-align: right; text-align: right;
//flex: 0; //flex: 0;
} }

15
src/scss/components/_combat_values.scss
View file

@ -1,13 +1,16 @@
@use "../utils/mixins";
@use "../utils/variables";
.combat-values { .combat-values {
margin-top: $margin-sm; margin-top: variables.$margin-sm;
.combat-value-with-formula { .combat-value-with-formula {
$size: 60px;
display: grid; display: grid;
place-items: center; place-items: center;
$size: 60px; row-gap: variables.$margin-sm;
row-gap: $margin-sm;
.combat-value { .combat-value {
$combat-values-icons-path: "#{$official-icons-path}/combat-values"; $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
@include centered-content; @include mixins.centered-content;
height: $size; height: $size;
width: $size; width: $size;
flex: 0 0 auto; flex: 0 0 auto;
@ -43,7 +46,7 @@
width: $size; width: $size;
text-align: center; text-align: center;
span { span {
line-height: $default-input-height; line-height: variables.$default-input-height;
} }
} }
} }

9
src/scss/components/_description.scss
View file

@ -1,10 +1,13 @@
@use "../utils/mixins";
@use "../utils/variables";
.side-properties { .side-properties {
flex: 0; flex: 0;
min-width: fit-content; min-width: fit-content;
max-width: 50%; max-width: 50%;
margin: 5px 5px 5px 0; margin: 5px 5px 5px 0;
padding-right: 5px; padding-right: 5px;
border-right: 2px groove $c-border-groove; border-right: variables.$border-groove;
.side-property { .side-property {
margin: 2px 0; margin: 2px 0;
@ -13,7 +16,7 @@
justify-content: left; justify-content: left;
label { label {
line-height: $default-input-height; line-height: variables.$default-input-height;
font-weight: bold; font-weight: bold;
padding-right: 3pt; padding-right: 3pt;
} }
@ -27,7 +30,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@include mark-invalid-or-disabled-input; @include mixins.mark-invalid-or-disabled-input;
input[type="checkbox"] { input[type="checkbox"] {
width: auto; width: auto;

13
src/scss/components/_forms.scss
View file

@ -1,5 +1,8 @@
@use "../utils/typography";
@use "../utils/colors";
.item-form { .item-form {
font-family: $font-primary; font-family: typography.$font-primary;
} }
$header-top-margin: 5px; $header-top-margin: 5px;
@ -28,7 +31,7 @@ header.sheet-header {
padding: 0px; padding: 0px;
margin: $header-top-margin 10px $header-top-margin 0; margin: $header-top-margin 10px $header-top-margin 0;
border-bottom: 0; border-bottom: 0;
@include font-heading-upper; @include typography.font-heading-upper;
display: block; display: block;
input { input {
width: 100%; width: 100%;
@ -36,16 +39,16 @@ header.sheet-header {
margin: 0; margin: 0;
border: none; border: none;
background-color: transparent; background-color: transparent;
@include font-heading-upper; @include typography.font-heading-upper;
} }
} }
h2.item-type { h2.item-type {
@include font-heading-upper; @include typography.font-heading-upper;
display: block; display: block;
height: 50px; height: 50px;
padding: 0px; padding: 0px;
flex: 0 0 auto; flex: 0 0 auto;
color: $c-light-grey; color: colors.$c-light-grey;
border: none; border: none;
line-height: 50px; line-height: 50px;
margin: $header-top-margin 0; margin: $header-top-margin 0;

7
src/scss/components/_items_list.scss
View file

@ -1,4 +1,5 @@
@use "sass:color"; @use "../utils/mixins";
@use "../utils/variables";
.items-list { .items-list {
$row-height: 1.75em; $row-height: 1.75em;
@ -61,7 +62,7 @@
margin: 0px; margin: 0px;
} }
@include mark-invalid-or-disabled-input; @include mixins.mark-invalid-or-disabled-input;
} }
.item-description { .item-description {
@ -83,6 +84,6 @@
margin-top: 1em; margin-top: 1em;
margin-bottom: 0; margin-bottom: 0;
padding-left: 1em; padding-left: 1em;
border-bottom: 2px groove $c-border-groove; border-bottom: variables.$border-groove;
font-weight: bold; font-weight: bold;
} }

7
src/scss/components/_tabs.scss
View file

@ -1,8 +1,9 @@
@use "../utils/variables";
nav.tabs { nav.tabs {
height: auto; height: auto;
border-top: 2px groove $c-border-groove; border-top: variables.$border-groove;
border-bottom: 2px groove $c-border-groove; border-bottom: variables.$border-groove;
.item { .item {
font-weight: bold; font-weight: bold;
} }

4
src/scss/global/_window.scss
View file

@ -1,5 +1,7 @@
@use "../utils/typography";
.window-app { .window-app {
font-family: $font-primary; font-family: typography.$font-primary;
input[type="text"], input[type="text"],
input[type="number"], input[type="number"],
input[type="password"], input[type="password"],

9
src/scss/utils/_mixins.scss
View file

@ -1,3 +1,5 @@
@use "./colors";
@mixin element-invisible { @mixin element-invisible {
position: absolute; position: absolute;
@ -22,14 +24,9 @@
@mixin mark-invalid-or-disabled-input { @mixin mark-invalid-or-disabled-input {
input:invalid { input:invalid {
background-color: $c-invalid-input; background-color: colors.$c-invalid-input;
} }
input:disabled { input:disabled {
background-color: transparent; background-color: transparent;
} }
} }
@mixin font-heading-upper {
font-family: $font-heading;
text-transform: uppercase;
}

5
src/scss/utils/_typography.scss
View file

@ -10,3 +10,8 @@
$font-primary: "Lora", sans-serif; $font-primary: "Lora", sans-serif;
$font-secondary: "Lora", sans-serif; $font-secondary: "Lora", sans-serif;
$font-heading: "Wood Stamp", sans-serif; $font-heading: "Wood Stamp", sans-serif;
@mixin font-heading-upper {
font-family: $font-heading;
text-transform: uppercase;
}

4
src/scss/utils/_variables.scss
View file

@ -1,3 +1,5 @@
@use "./colors";
$padding-sm: 5px; $padding-sm: 5px;
$padding-md: 10px; $padding-md: 10px;
$padding-lg: 20px; $padding-lg: 20px;
@ -8,3 +10,5 @@ $margin-lg: $padding-lg;
$default-input-height: 26px; $default-input-height: 26px;
$official-icons-path: "assets/icons/official"; $official-icons-path: "assets/icons/official";
$border-groove: 2px groove colors.$c-border-groove;