From fba2c1fa35ce998116ff887418f9cc1e6a2b21f6 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Tue, 4 Sep 2018 23:48:01 +0200
Subject: [PATCH] app/assets/sass/components/_request-list.scss: rewritten to
 extend card component

---
 app/assets/sass/_variables.scss               |  9 ----
 app/assets/sass/components/_request-list.scss | 53 ++-----------------
 2 files changed, 4 insertions(+), 58 deletions(-)

diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss
index 08b6735..b6ba7c4 100644
--- a/app/assets/sass/_variables.scss
+++ b/app/assets/sass/_variables.scss
@@ -217,14 +217,5 @@ $callback-list-arrow-color:         $callback-list-border-color;
 //   Request list
 // ----------------------------------
 
-$request-item-color:                $text-color;
 $request-item-secondary-color:      $text-secondary-color;
-$request-item-background:           transparent;
-$request-item-border-color:         $gray-light;
-
-$request-item-active-color:         $request-item-color;
-$request-item-active-background:    $gray-lightest;
-$request-item-active-border-color:  $request-item-border-color;
-$request-item-hover-background:     $request-item-active-background;
-
 $request-detail-background:         lighten($brand-color, 45%);
diff --git a/app/assets/sass/components/_request-list.scss b/app/assets/sass/components/_request-list.scss
index 4649e75..a9e75c4 100644
--- a/app/assets/sass/components/_request-list.scss
+++ b/app/assets/sass/components/_request-list.scss
@@ -1,39 +1,14 @@
 
 .request-list {
-
+    @extend .card-accordion;
 
     &-item {
+        @extend .card;
 
         // Header Section
         // --------------
         &-header {
-            display: block;
-            padding: .5em 1em;
-
-            color: $request-item-active-color;
-            background-color: $request-item-active-background;
-            border: 1px solid $request-item-active-border-color;
-
-            &:hover,
-            &:active,
-            &:focus {
-                color: $request-item-active-color;
-                text-decoration: none;
-            }
-
-            &.collapsed {
-                background-color: $request-item-background;
-
-                &:hover {
-                    background-color: $request-item-hover-background;
-                }
-
-                &:hover,
-                &:active,
-                &:focus {
-                    color: $request-item-color;
-                }
-            }
+            @extend .card-header, .card-header-link;
 
             &-row {
                 display: block;
@@ -80,10 +55,8 @@
         // Detail section
         // --------------
         &-detail {
-
+            @extend .card-body;
             background-color: $request-detail-background;
-            border: 1px solid $request-item-border-color;
-            padding: 1em;
 
             &-headers {
                 @extend .table, .table-bordered;
@@ -104,23 +77,5 @@
                 margin-bottom: 1em;
             }
         }
-
-        // Border overrides
-        // ----------------
-
-        // Remove bottom border from header for all but last request-item.
-        &:not(:last-child) &-header {
-            border-bottom: 0;
-        }
-
-        // Remove top border from detail element for last request-item.
-        &:last-child &-detail {
-            border-top: 0;
-        }
-
-        // Remove bottom border from detail element for all but last request-item.
-        &:not(:last-child) &-detail {
-            border-bottom: 0;
-        }
     }
 }