feat(ffe-lists): legg til detailListCard komponent styling

SpareBank1 · Mar 13, 2024 · 7f8e8d6 · 7f8e8d6
1 parent 682dc81
commit 7f8e8d6
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/packages/ffe-lists/less/detail-list-card.less b/packages/ffe-lists/less/detail-list-card.less
@@ -0,0 +1,72 @@
+.ffe-detail-list-card {
+    background-color: var(--ffe-v-detail-list-card-background-color);
+    border-radius: var(--ffe-v-detail-list-card-border-radius);
+    font-family: var(--ffe-g-font);
+    font-variant-numeric: tabular-nums;
+
+    &__item:not(:last-child) {
+        border-bottom: 1px solid var(--ffe-v-detail-list-card-border-color);
+    }
+
+    &__item {
+        padding: var(--ffe-spacing-sm);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: var(--ffe-spacing-xs);
+        overflow-wrap: anywhere;
+        text-wrap: balance;
+
+        &:is(button) {
+            background-color: transparent;
+            border: 0;
+            width: 100%;
+            color: inherit;
+        }
+
+        &:is(a) {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        &:is(:first-child) {
+            border-radius: var(--ffe-v-detail-list-card-border-radius)
+                var(--ffe-v-detail-list-card-border-radius) 0 0;
+        }
+
+        &:is(:last-child) {
+            border-radius: 0 0 var(--ffe-v-detail-list-card-border-radius)
+                var(--ffe-v-detail-list-card-border-radius);
+        }
+
+        &-label {
+            font-family: var(--ffe-g-font-heading-small);
+            color: var(--ffe-g-secondary-color);
+        }
+
+        &-value {
+            margin: 0; // Removes the default dd-element margin when it breaks to a new line
+            display: flex;
+            align-items: center;
+        }
+
+        &--clickable {
+            cursor: pointer;
+
+            &:focus-visible {
+                box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+                outline: none;
+            }
+
+            @media (hover: hover) {
+                &:hover {
+                    box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+                    outline: none;
+                }
+            }
+        }
+        @media (max-width: 299px) {
+            flex-direction: column;
+        }
+    }
+}
diff --git a/packages/ffe-lists/less/lists.less b/packages/ffe-lists/less/lists.less
@@ -1,3 +1,4 @@
 @import 'theme';
 @import './regular-lists.less';
 @import './description-list.less';
+@import './detail-list-card.less';
diff --git a/packages/ffe-lists/less/theme.less b/packages/ffe-lists/less/theme.less
@@ -4,14 +4,18 @@
     --ffe-v-lists-description-description-color: var(--ffe-farge-svart);
     --ffe-v-lists-check-list-check-icon-color: var(--ffe-farge-skog);
     --ffe-v-lists-check-list-cross-icon-color: var(--ffe-farge-baer);
-
+    --ffe-v-detail-list-card-background-color: var(--ffe-farge-hvit);
+    --ffe-v-detail-list-card-border-color: var(--ffe-farge-lysgraa);
+    --ffe-v-detail-list-card-border-radius: 16px;
     @media (prefers-color-scheme: dark) {
         .native {
             --ffe-v-lists-title-color: var(--ffe-farge-hvit);
             --ffe-v-lists-description-description-color: var(
                 --ffe-farge-lysgraa
             );
             --ffe-v-lists-check-list-check-icon-color: var(--ffe-farge-skog-70);
+            --ffe-v-detail-list-card-background-color: #1c1c1c;
+            --ffe-v-detail-list-card-border-color: var(--ffe-farge-koksgraa);
         }
     }
 }