Use grid for special creature abilities

src/scss/components/_item_list.scss

@@ -40,7 +40,8 @@
     }
     &--racial-ability,
     &--language,
-    &--alphabet {
+    &--alphabet,
+    &--special-creature-ability {
         grid-template-columns: $row-height 1fr 3fr 4ch;
     }
 

src/templates/actor/partials/special-creature-abilities-overview.hbs

@@ -12,18 +12,16 @@
 !--
 !-- @param item: hand over the item to the partial as hash parameter
 --}}
-{{#*inline "baseItemListEntry"}}
-<li class="item flexrow" data-item-id="{{item._id}}">
+{{#*inline "itemListEntry"}}
+<li class="ds4-item-list__row item " data-item-id="{{item._id}}">
     {{!-- image --}}
-    <div class="flex05 item-image">
-        <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-    </div>
+    <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
     {{!-- name --}}
-    <input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
-        data-property="name" title="{{htmlToPlainText item.data.data.description}}">
+    <input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
+        data-property="name" title="{{htmlToPlainText item.data.description}}" />
     {{!-- description --}}
-    <div class="flex3 item-description" title="{{htmlToPlainText item.data.data.description}}">
-        {{{item.data.data.description}}}</div>
+    <div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
+        {{{item.data.description}}}</div>
     {{!-- control buttons --}}
     {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
 </li>
@@ -31,16 +29,13 @@
 
 {{!--
 !-- Render a list header for a base item list entries from a given item.
-!-- The partial assumes a variable dataType to be given in the context.
-!--
-!-- @param dataType: the string item type for the list
 --}}
-{{#*inline "baseItemListHeader"}}
-<li class="item flexrow item-header">
+{{#*inline "itemListHeader"}}
+<li class="ds4-item-list__row ds4-item-list__row--header">
     {{!-- image --}}
-    <div class="flex05 item-image"></div>
+    <div></div>
     {{!-- name --}}
-    <div class="flex1 item-name">{{localize 'DS4.ItemName'}}</div>
+    <div>{{localize 'DS4.ItemName'}}</div>
     {{!-- description --}}
     <div class="flex3">{{localize 'DS4.Description'}}</div>
     {{!-- control buttons placeholder --}}
@@ -53,10 +48,10 @@
 
 
 <div class="tab special-creature-abilities" data-group="primary" data-tab="special-creature-abilities">
-    <ol class="items-list">
-        {{> baseItemListHeader dataType='specialCreatureAbility' }}
+    <ol class="ds4-item-list ds4-item-list--special-creature-ability item-list">
+        {{> itemListHeader }}
         {{#each itemsByType.specialCreatureAbility as |item id|}}
-        {{> baseItemListEntry item=item}}
+        {{> itemListEntry item=item}}
         {{/each}}
     </ol>
     {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='specialCreatureAbility' }}