Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

extract and simplify combat values to own component

Browse source
This commit is contained in:
Johannes Loher 2021-01-04 01:11:05 +01:00
parent 6a12ba3938
commit 7cb6080808
6 changed files with 82 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,53 +1,5 @@
header.sheet-header {
.character-values {
flex: 0 0 100%;
.combat-values {
margin-top: $margin-sm;
.combat-value-with-formula {
display: grid;
place-items: center;
$size: 60px;
row-gap: $margin-sm;
.combat-value {
@include centered-content;
height: $size;
width: $size;
flex: 0 0 auto;
background-size: contain;
font-size: 1.5em;
&.hitPoints {
background-image: url("#{$official-assets-path}/DS4-HP.png");
}
&.defense {
background-image: url("#{$official-assets-path}/DS4-DEF.png");
}
&.initiative {
background-image: url("#{$official-assets-path}/DS4-INI.png");
}
&.movement {
background-image: url("#{$official-assets-path}/DS4-MR.png");
}
&.meleeAttack {
background-image: url("#{$official-assets-path}/DS4-MAT.png");
}
&.rangedAttack {
background-image: url("#{$official-assets-path}/DS4-RAT.png");
}
&.spellcasting {
background-image: url("#{$official-assets-path}/DS4-SPC.png");
}
&.targetedSpellcasting {
background-image: url("#{$official-assets-path}/DS4-TSC.png");
}
}
.combat-value-formula {
width: $size;
input {
text-align: center;
}
}
}
}
}
}

48
src/scss/components/_combat_values.scss Normal file
View file

@ -0,0 +1,48 @@
.combat-values {
margin-top: $margin-sm;
.combat-value-with-formula {
display: grid;
place-items: center;
$size: 60px;
row-gap: $margin-sm;
.combat-value {
@include centered-content;
height: $size;
width: $size;
flex: 0 0 auto;
background-size: contain;
font-size: 1.5em;
&.hitPoints {
background-image: url("#{$official-assets-path}/DS4-HP.png");
}
&.defense {
background-image: url("#{$official-assets-path}/DS4-DEF.png");
}
&.initiative {
background-image: url("#{$official-assets-path}/DS4-INI.png");
}
&.movement {
background-image: url("#{$official-assets-path}/DS4-MR.png");
}
&.meleeAttack {
background-image: url("#{$official-assets-path}/DS4-MAT.png");
}
&.rangedAttack {
background-image: url("#{$official-assets-path}/DS4-RAT.png");
}
&.spellcasting {
background-image: url("#{$official-assets-path}/DS4-SPC.png");
}
&.targetedSpellcasting {
background-image: url("#{$official-assets-path}/DS4-TSC.png");
}
}
.combat-value-formula {
width: $size;
input {
text-align: center;
}
}
}
}