improved loot styling

loot/templates/loot/overview.html

@@ -50,12 +50,14 @@
             <tr>
                 <td colspan="5" class="collapse-cell">
                     <div class="collapse" id="row-{{ l.id }}">
+                        <div class="cell-box">
                             <h3>{{ l.name }} <a href="{% url "lootedit" l.id %}">{% translate "Edit" %}</a></h3>
                             {{ l.description_html|safe }}
                             {% if l.value_per_unit %}
                                 <p>{% translate "Value each" %}: {{ l.value_per_unit|format_money_html }}</p>
                             {% endif %}
                         </div>
+                    </div>
                 </td>
             </tr>
         {% endfor %}

static/scss/_loot.scss

@@ -0,0 +1,38 @@
+.collapse-cell {
+  padding: 0 !important;
+  border: none !important;
+}
+
+.cell-box {
+  padding: 0.5rem;
+  //border: solid 1px $gray-900;
+}
+
+.chev {
+  transition: transform .2s;
+  width: 13px;
+  height: auto;
+}
+
+tr.collapsed .chev {
+  transform: rotate(90deg);
+}
+
+tr.collapse-button {
+  transition: all .2s;
+
+  &:not(.collapsed) {
+    background: $gray-800;
+    color: white;
+  }
+}
+
+
+tr td:first-child {
+  width: 20px;
+}
+
+svg.icon {
+  width: 16px;
+  height: auto;
+}

static/scss/_misc.scss

@@ -25,24 +25,6 @@ blockquote {
 }
 
 
-.collapse-cell {
-  padding: 0 !important;
-  border: none !important;
-}
-
-.chev {
-  transition: transform .2s;
-  width: 13px;
-  height: auto;
-}
-
-tr.collapsed .chev {
-  transform: rotate(90deg);
-}
-
-tr.collapse-button:not(.collapsed) {
-  background: darkgray;
-}
 
 
 .side-card {
@@ -118,11 +100,3 @@ footer {
   }
 }
 
-tr td:first-child {
-  width: 20px;
-}
-
-svg.icon {
-  width: 16px;
-  height: auto;
-}

static/scss/main.scss

@@ -5,5 +5,6 @@
 
 @import "misc";
 @import "avatar";
+@import "loot";