@sb1/ffe-cards 15.0.3 → 16.0.0

package/less/cards.less

@@ -3,3 +3,4 @@
 @import 'text-card';
 @import 'icon-card';
 @import 'image-card';
+@import 'stippled-card';

package/less/common-card-styling.less

@@ -5,7 +5,7 @@
     box-shadow: 0 1px 4px 0 var(--ffe-v-cards-common-card-box-shadow-color);
     margin: 0 0 @ffe-spacing-xs;
     border: 2px solid transparent;
-    border-radius: 5px;
+    border-radius: var(--ffe-v-cards-common-card-border-radius);
     transition: border-color 0.2s;
     outline: none;
     cursor: pointer;

package/less/icon-card.less

@@ -4,70 +4,34 @@
 .ffe-icon-card {
     .common-card-styling();
 
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
     padding: @ffe-spacing-md;
-    max-width: 440px;
     min-height: 130px;
-    flex-flow: row nowrap;
 
     &__icon {
-        align-self: center;
-        fill: var(--ffe-g-secondary-color);
-        min-width: 40px;
+        fill: var(--ffe-v-cards-stippled-icon-color);
         width: 40px;
         height: 40px;
         margin: 0 @ffe-spacing-lg 0 @ffe-spacing-xs;
     }
 
-    &__body {
-        overflow: hidden;
-        text-align: left;
-        width: 100%;
-    }
-
     @media (min-width: @breakpoint-md) {
         .ffe-icon-card__icon {
             margin: 0 @ffe-spacing-md 0;
         }
     }
-
-    @media (min-width: @breakpoint-lg) {
-        .ffe-icon-card__icon {
-            margin: 0 @ffe-spacing-lg 0 @ffe-spacing-xs;
-        }
-    }
 }
 
 .ffe-icon-card--condensed {
-    min-height: auto;
-
     @media (min-width: @breakpoint-md) {
         min-height: 100px;
     }
 
     .ffe-icon-card__icon {
-        min-width: 30px;
         width: 30px;
         height: 30px;
-        margin: 0 @ffe-spacing-sm 0 0;
-    }
-
-    .ffe-card-body__subtext {
-        margin: 0;
-
-        @media (min-width: @breakpoint-md) {
-            margin: @ffe-spacing-2xs 0 0 0;
-        }
-    }
-}
-
-.ffe-icon-card--grey-charcoal {
-    .ffe-icon-card__icon {
-        fill: var(--ffe-v-cards-text-color);
-    }
-
-    .ffe-card-body__title,
-    .ffe-icon-card__body {
-        color: var(--ffe-v-cards-text-color);
+        margin: 0 var(--ffe-spacing-sm) 0 0;
     }
 }

package/less/image-card.less

@@ -23,8 +23,8 @@
         max-height: 160px;
         position: relative;
         overflow: hidden;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
+        border-top-left-radius: var(--ffe-v-cards-common-card-border-radius);
+        border-top-right-radius: var(--ffe-v-cards-common-card-border-radius);
     }
 
     &__image {
@@ -43,8 +43,8 @@
         z-index: 10;
         height: 100%;
         border-bottom: 0;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
+        border-top-left-radius: var(--ffe-v-cards-common-card-border-radius);
+        border-top-right-radius: var(--ffe-v-cards-common-card-border-radius);
         position: absolute;
     }
 
@@ -52,8 +52,10 @@
         text-align: center;
         padding: @ffe-spacing-sm @ffe-spacing-sm @ffe-spacing-xs @ffe-spacing-sm;
         border-top: 0;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: var(--ffe-v-cards-common-card-border-radius);
+        border-bottom-right-radius: var(
+            --ffe-v-cards-common-card-border-radius
+        );
         min-height: 200px;
     }
 

package/less/stippled-card.less

@@ -0,0 +1,41 @@
+@import 'common-card-styling';
+@import 'components';
+
+.ffe-stippled-card {
+    .common-card-styling();
+
+    background: transparent;
+    border: 2px dashed var(--ffe-v-cards-stippled-border-color);
+    box-shadow: none;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    padding: @ffe-spacing-md;
+    gap: @ffe-spacing-sm;
+
+    &:hover,
+    &:focus,
+    &:active {
+        border-style: solid;
+        box-shadow: none;
+    }
+
+    .native & {
+        @media (prefers-color-scheme: dark) {
+            box-shadow: none;
+        }
+    }
+}
+
+.ffe-stippled-card__img--icon {
+    margin: 0 @ffe-spacing-md 0 @ffe-spacing-xs;
+    fill: var(--ffe-v-cards-stippled-icon-color);
+    height: 40px;
+    width: 40px;
+}
+
+.ffe-stippled-card--condensed .ffe-stippled-card__img--icon {
+    margin: 0 @ffe-spacing-xs 0 0;
+    height: 30px;
+    width: 30px;
+}

package/less/theme.less

@@ -1,8 +1,11 @@
 :root {
     --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
     --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
+    --ffe-v-cards-common-card-border-radius: 16px;
     --ffe-v-cards-text-color: var(--ffe-farge-moerkgraa);
     --ffe-v-cards-image-card-border-hover-color: var(--ffe-farge-vann);
+    --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
+    --ffe-v-cards-stippled-icon-color: var(--ffe-farge-fjell);
 
     @media (prefers-color-scheme: dark) {
         .native {
@@ -11,6 +14,8 @@
                 --ffe-farge-moerkgraa
             );
             --ffe-v-cards-text-color: var(--ffe-farge-graa);
+            --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
+            --ffe-v-cards-stippled-icon-color: var(--ffe-farge-vann-70);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-cards",
-    "version": "15.0.3",
+    "version": "16.0.0",
     "description": "Kort for bruk i oversikter",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -24,5 +24,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1ab898e744977e4cb4db1bee9b65369a0deeef9a"
+    "gitHead": "10adc7c7a295275039de6714a63c7d4fa8ec0232"
 }