From 9cd430a229f2ae5f28d571849a506e277adac754 Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Thu, 31 Dec 2020 01:33:59 +0100
Subject: [PATCH] improve scss of character values

---
 src/scss/components/_character_values.scss | 52 +++++++++++-----------
 src/scss/utils/_mixins.scss                |  5 +++
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss
index 3f386649..8c5e394d 100644
--- a/src/scss/components/_character_values.scss
+++ b/src/scss/components/_character_values.scss
@@ -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");
-            }
         }
     }
 }
diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss
index 46d30323..7e028c29 100644
--- a/src/scss/utils/_mixins.scss
+++ b/src/scss/utils/_mixins.scss
@@ -14,3 +14,8 @@
 @mixin hide {
     display: none;
 }
+
+@mixin centered-content {
+    display: grid;
+    place-items: center;
+}