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.
@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");
}

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

@ -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;

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

@ -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;
}
}

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

@ -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;
}

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

@ -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;
}
}
}

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

@ -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;

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

@ -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;

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

@ -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;
}

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

@ -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;
}

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

@ -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"],

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

@ -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;
}

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

@ -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;
}

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

@ -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;