Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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