Clean up character sheet

src/scss/components/_character_header.scss

@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/typography";
+
+.ds4-character-header {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    gap: 1em;
+
+    &__img {
+        border: none;
+        cursor: pointer;
+        height: 100px;
+        width: 100px;
+    }
+
+    &__data {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__data-row {
+        align-content: center;
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        gap: 0.5em;
+        > * {
+            flex: 1;
+        }
+    }
+
+    &__name {
+        display: flex;
+        align-items: center;
+        border-bottom: 0;
+        margin: 0;
+    }
+
+    &__name-input {
+        @include typography.font-heading-upper;
+        background-color: transparent;
+        border: none;
+        flex: 1;
+        font-size: 1.25em;
+        height: auto;
+    }
+}

src/scss/components/_character_progression.scss

@@ -10,42 +10,39 @@
 @use "../utils/variables";
 @use "../utils/mixins";
 
-.progression {
-    .progression-entry {
-        @include mixins.mark-invalid-or-disabled-input;
+.ds4-character-progression {
+    @include mixins.mark-invalid-or-disabled-input;
+    display: flex;
+    gap: 0.5em;
 
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-end;
+    &__entry {
         align-items: center;
+        display: flex;
+        flex: 1;
+        gap: 0.25em;
+        justify-content: flex-end;
+    }
 
-        padding-right: 3px;
-        h2.progression-label {
-            @include typography.font-heading-upper;
-            display: block;
-            height: 50px;
-            padding: 0;
-            color: colors.$c-light-grey;
-            border: none;
-            line-height: 50px;
-            margin: variables.$margin-sm 0;
-            text-align: right;
-        }
-        input.progression-value {
-            margin-left: 5px;
-            flex: 0 0 40px;
-            text-align: left;
+    &__label {
+        @include typography.font-heading-upper;
+        border: none;
+        color: colors.$c-light-grey;
+        margin: 0;
+        padding: 0;
+        text-align: right;
+    }
 
-            &--slayer-points {
-                &::-webkit-inner-spin-button,
-                &::-webkit-outer-spin-button {
-                    -webkit-appearance: auto;
-                }
-                &:hover,
-                &:focus {
-                    -moz-appearance: auto;
-                }
+    &__input {
+        flex: 0 0 5ch;
+
+        &--slayer-points {
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                -webkit-appearance: auto;
+            }
+            &:hover,
+            &:focus {
+                -moz-appearance: auto;
             }
         }
     }

src/scss/components/_character_properties.scss

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/mixins";
+
+.ds4-character-properties {
+    @include mixins.mark-invalid-or-disabled-input;
+    display: flex;
+    gap: 0.25em;
+
+    &__property {
+        flex: 1;
+    }
+
+    &__property-label {
+        font-size: 0.9em;
+        font-weight: bold;
+        white-space: nowrap;
+    }
+
+    &__property-multi-input {
+        display: flex;
+        gap: 0.125em;
+    }
+}

src/scss/components/_sheet.scss

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}

src/scss/components/_sheet_tab_nav.scss

@@ -6,16 +6,12 @@
 
 @use "../utils/variables";
 
-nav.tabs {
+.ds4-sheet-tab-nav {
     height: auto;
     border-top: variables.$border-groove;
     border-bottom: variables.$border-groove;
-    .item {
-        font-weight: bold;
-        white-space: nowrap;
-    }
 
-    .item.active {
-        text-decoration: none;
+    &__item {
+        font-weight: bold;
     }
 }