[#1791] Starting design update of case detail

maykinmedia · Oct 19, 2023 · 8376f05 · 8376f05
1 parent 65f91e3
commit 8376f05
Showing 1 changed file with 37 additions and 8 deletions.
diff --git a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss
@@ -1,28 +1,57 @@
 .dashboard {
+  margin-bottom: var(--spacing-mega);
+
   &__list {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--spacing-large) var(--spacing-medium);
-    justify-content: space-between;
+    display: block;
     list-style: none;
     margin: 0;
     padding: 0;
+    border-bottom: var(--border-width-thin) solid var(--color-gray);
 
-    @media (min-width: 768px) {
+    @media (min-width: 900px) {
       display: flex;
-      gap: var(--spacing-medium);
+      gap: 0;
+      border-top: var(--border-width-thin) solid var(--color-gray);
     }
   }
 
   &__list-item {
+    padding: var(--spacing-large) 0;
+    color: var(--color-gray-dark);
     white-space: nowrap;
-    text-align: center;
+    border-top: var(--border-width-thin) solid var(--color-gray);
+    @media (min-width: 900px) {
+      border-top: none;
+      margin-left: var(--spacing-extra-large);
+    }
 
-    @media (min-width: 768px) {
+    &:first-child {
+      margin-left: 0;
+    }
+
+    p::after {
+      color: var(--color-gray);
+      @media (min-width: 900px) {
+        content: '|';
+        margin-left: var(--spacing-extra-large);
+      }
+    }
+
+    &:last-child p::after {
+      @media (min-width: 900px) {
+        content: none;
+      }
+    }
+
+    @media (min-width: 900px) {
       text-align: start;
     }
   }
 
+  &__item-label {
+    color: var(--color-gray-90);
+  }
+
   .h4 {
     @media (min-width: 768px) {
       margin-top: var(--spacing-large);