ds4/scss/components/actor/_combat_value.scss

76 lines
2 KiB
SCSS

/*
* SPDX-FileCopyrightText: 2021 Johannes Loher
*
* SPDX-License-Identifier: MIT
*/
@use "../../utils/mixins";
@use "../../utils/variables";
.ds4-combat-value {
$size: 3.75rem;
display: grid;
place-items: center;
row-gap: 0.125em;
&__total {
$combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
@include mixins.centered-content;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
font-size: 1.5em;
height: $size;
width: $size;
&--hitPoints {
background-image: url("#{$combat-values-icons-path}/hit-points.png");
}
&--defense {
background-image: url("#{$combat-values-icons-path}/defense.png");
}
&--initiative {
background-image: url("#{$combat-values-icons-path}/initiative.png");
}
&--movement {
background-image: url("#{$combat-values-icons-path}/movement-rate.png");
}
&--meleeAttack {
background-image: url("#{$combat-values-icons-path}/melee-attack.png");
}
&--rangedAttack {
background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
}
&--spellcasting {
background-image: url("#{$combat-values-icons-path}/spellcasting.png");
}
&--targetedSpellcasting {
background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
}
&--mana {
background-image: url("#{$combat-values-icons-path}/mana.png");
}
}
&__label {
@include mixins.font-heading-upper;
font-size: 1.2em;
white-space: nowrap;
}
&__formula {
align-items: center;
justify-content: space-between;
display: flex;
gap: 0.15em;
text-align: center;
width: $size;
}
&__formula-base,
&__formula-modifier {
flex: 1 1 4em;
}
}