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

improve scss of character values

Browse source
This commit is contained in:
Johannes Loher 2020-12-31 01:33:59 +01:00
parent 0d2af1ae00
commit 9cd430a229
2 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/scss/components/_character_values.scss
View file

@ -55,14 +55,38 @@ header.sheet-header {
$size: 60px;
row-gap: $margin-sm;
.combat-value {
display: grid;
place-items: center;
@include centered-content;
height: $size;
width: $size;
flex: 0 0 auto;
background-size: contain;
font-size: 1.5em;
&.hitPoints {
background-image: url("assets/DS4-HP.png");
}
&.defense {
background-image: url("assets/DS4-DEF.png");
}
&.initiative {
background-image: url("assets/DS4-INI.png");
}
&.movement {
background-image: url("assets/DS4-MR.png");
}
&.meleeAttack {
background-image: url("assets/DS4-MAT.png");
}
&.rangedAttack {
background-image: url("assets/DS4-RAT.png");
}
&.spellcasting {
background-image: url("assets/DS4-SPC.png");
}
&.targetedSpellcasting {
background-image: url("assets/DS4-TSC.png");
}
}
.combat-value-formula {
width: $size;
input {
@ -70,30 +94,6 @@ header.sheet-header {
}
}
}
.combat-value.hitPoints {
background-image: url("assets/DS4-HP.png");
}
.combat-value.defense {
background-image: url("assets/DS4-DEF.png");
}
.combat-value.initiative {
background-image: url("assets/DS4-INI.png");
}
.combat-value.movement {
background-image: url("assets/DS4-MR.png");
}
.combat-value.meleeAttack {
background-image: url("assets/DS4-MAT.png");
}
.combat-value.rangedAttack {
background-image: url("assets/DS4-RAT.png");
}
.combat-value.spellcasting {
background-image: url("assets/DS4-SPC.png");
}
.combat-value.targetedSpellcasting {
background-image: url("assets/DS4-TSC.png");
}
}
}
}

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

@ -14,3 +14,8 @@
@mixin hide {
display: none;
}
@mixin centered-content {
display: grid;
place-items: center;
}