moved basic talent properties in talent-sheet head

- a little bit better gridding of side-properties
  (still needs a rewrite)
- common SCSS mixin for input field marking

src/scss/components/_basic_property.scss

@@ -1,13 +1,20 @@
 .basic-properties {
     flex: 0 0 100%;
     .basic-property {
-        .basic-property-label {
+        display: grid;
+        align-content: end;
+
+        .basic-property-label,
+        & > label {
             font-weight: bold;
         }
 
-        .basic-property-select {
+        .basic-property-select,
+        & > select {
             display: block;
             width: 100%;
         }
+
+        @include mark-invalid-or-disabled-input;
     }
 }

src/scss/components/_description.scss

@@ -9,7 +9,7 @@
     .side-property {
         margin: 2px 0;
         display: grid;
-        grid-template-columns: 40% auto;
+        grid-template-columns: minmax(30%, auto) auto;
         justify-content: left;
 
         label {
@@ -22,12 +22,9 @@
             text-align: left;
             width: calc(100% - 2px);
         }
-        input:invalid {
-            background-color: $c-invalid-input;
-        }
-        input:disabled {
-            background-color: transparent;
-        }
+
+        @include mark-invalid-or-disabled-input;
+
         input[type="checkbox"] {
             width: auto;
             height: 100%;

src/scss/components/_items.scss

@@ -39,9 +39,8 @@
             height: 100%;
             margin: 0px;
         }
-        input:invalid {
-            background-color: $c-invalid-input;
-        }
+
+        @include mark-invalid-or-disabled-input;
     }
 
     .item-name {

src/scss/utils/_mixins.scss

@@ -19,3 +19,12 @@
     display: grid;
     place-items: center;
 }
+
+@mixin mark-invalid-or-disabled-input {
+    input:invalid {
+        background-color: $c-invalid-input;
+    }
+    input:disabled {
+        background-color: transparent;
+    }
+}

src/templates/item/talent-sheet.hbs

@@ -3,9 +3,9 @@
 {{!-- ======================================================================== --}}
 
 
-{{#*inline "talentRankSideProperty" }}
-<div class="side-property">
-    <label for="data.rank.{{property}}">{{localize localizeString}}</label>
+{{#*inline "talentRankBasicProperty" }}
+<div class="basic-property">
+    <label class="basic-property-label" for="data.rank.{{property}}">{{localize localizeString}}</label>
     <input type="number" min="0" step="1" data-dtype="Number" {{disabled}}
         {{#if (eq property 'base') }}max="{{data.rank.max}}"{{/if}}
         name="data.rank.{{property}}" value="{{lookup data.rank property}}" />
@@ -22,6 +22,12 @@
         <div class="header-fields flexrow">
             <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
             <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
+            <div class="grid grid-4col basic-properties">
+                {{> talentRankBasicProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
+                {{> talentRankBasicProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
+                {{> talentRankBasicProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
+                {{> talentRankBasicProperty data=data property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
+            </div>
         </div>
     </header>
 
@@ -52,10 +58,6 @@
                 {{else}}
                 <span>{{localize "DS4.NotOwned"}}</span>
                 {{/if}}
-                {{> talentRankSideProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
-                {{> talentRankSideProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
-                {{> talentRankSideProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
-                {{> talentRankSideProperty data=data property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
             </div>
             <div class="description" title="{{localize 'DS4.HeadingDescription'}}">
                 {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}