@sb1/ffe-cards 12.0.12 → 14.0.1

package/less/card-base.less

@@ -1,48 +1,6 @@
 .ffe-card-base {
-    &:extend(.ffe-body-text);
+    .common-card-styling();
 
-    background: @ffe-farge-hvit;
-    box-shadow: 0 1px 4px 0 rgba(38, 38, 38, 0.3);
     display: block;
-    margin: 0 0 @ffe-spacing-xs;
     padding: 0;
-    border: 2px solid transparent;
-    border-radius: 5px;
-    transition: border-color 0.2s;
-    outline: none;
-    cursor: pointer;
-    width: 100%;
-    text-decoration: none;
-    .native & {
-        @media (prefers-color-scheme: dark) {
-            box-shadow: 0 0 0 1px @ffe-farge-moerkgraa;
-            background: @ffe-farge-svart;
-            color: @ffe-farge-hvit;
-        }
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 2px @ffe-farge-vann;
-
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                box-shadow: 0 0 0 2px @ffe-farge-vann-70;
-            }
-        }
-    }
-
-    &:focus,
-    &:active,
-    &:hover {
-        border-color: @ffe-farge-vann;
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                border-color: @ffe-farge-vann-70;
-            }
-        }
-    }
-
-    @media (min-width: @breakpoint-md) {
-        margin-bottom: @ffe-spacing-md;
-    }
 }

package/less/cards.less

@@ -1,3 +1,4 @@
+@import 'common-card-styling';
 @import 'card-base';
 @import 'components';
 @import 'text-card';

package/less/common-card-styling.less

@@ -0,0 +1,46 @@
+.common-card-styling() {
+    &:extend(.ffe-body-text);
+
+    background: @ffe-farge-hvit;
+    box-shadow: 0 1px 4px 0 rgba(38, 38, 38, 0.3);
+    margin: 0 0 @ffe-spacing-xs;
+    border: 2px solid transparent;
+    border-radius: 5px;
+    transition: border-color 0.2s;
+    outline: none;
+    cursor: pointer;
+    width: 100%;
+    text-decoration: none;
+    .native & {
+        @media (prefers-color-scheme: dark) {
+            box-shadow: 0 0 0 1px @ffe-farge-moerkgraa;
+            background: @ffe-farge-svart;
+            color: @ffe-farge-hvit;
+        }
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 2px @ffe-farge-vann;
+
+        .native & {
+            @media (prefers-color-scheme: dark) {
+                box-shadow: 0 0 0 2px @ffe-farge-vann-70;
+            }
+        }
+    }
+
+    &:focus,
+    &:active,
+    &:hover {
+        border-color: @ffe-farge-vann;
+        .native & {
+            @media (prefers-color-scheme: dark) {
+                border-color: @ffe-farge-vann-70;
+            }
+        }
+    }
+
+    @media (min-width: @breakpoint-md) {
+        margin-bottom: @ffe-spacing-md;
+    }
+}

package/less/components.less

@@ -1,13 +1,13 @@
-.ffe-card-component {
-    &--card-name {
+.ffe-card-body {
+    &__card-name {
         margin: 0 0 @ffe-spacing-2xs 0;
     }
 
-    &--text {
+    &__text {
         margin: @ffe-spacing-2xs 0 0 0;
     }
 
-    &--subtext {
+    &__subtext {
         &:extend(.ffe-small-text);
 
         color: @ffe-farge-moerkgraa;
@@ -20,13 +20,8 @@
         margin: @ffe-spacing-2xs 0 0 0;
     }
 
-    &--title {
+    &__title {
         &:extend(.ffe-h5);
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                color: @ffe-farge-vann-70;
-            }
-        }
 
         margin: 0;
 

package/less/icon-card.less

@@ -1,8 +1,10 @@
 .ffe-icon-card {
+    .common-card-styling();
+
+    display: flex;
+    padding: @ffe-spacing-md;
     max-width: 440px;
     min-height: 130px;
-    padding: @ffe-spacing-md;
-    display: flex;
     flex-flow: row nowrap;
 
     &__icon {
@@ -52,11 +54,7 @@
         margin: 0 @ffe-spacing-sm 0 0;
     }
 
-    .ffe-icon-component--card-name {
-        margin: 0 0 @ffe-spacing-2xs;
-    }
-
-    .ffe-icon-component--subtext {
+    .ffe-card-body__subtext {
         margin: 0;
 
         @media (min-width: @breakpoint-md) {
@@ -75,7 +73,7 @@
         }
     }
 
-    .ffe-card-component--title,
+    .ffe-card-body__title,
     .ffe-icon-card__body {
         color: @ffe-farge-moerkgraa;
         .native & {

package/less/image-card.less

@@ -1,20 +1,22 @@
 .ffe-image-card {
-    max-width: 290px;
+    .common-card-styling();
+
+    display: flex;
     padding: 0;
+    max-width: 290px;
     border: 0;
-    display: flex;
     flex-flow: column nowrap;
 
     &:focus,
     &:active,
     &:hover {
-        .ffe-image-card__image__overlay,
+        .ffe-image-card__image-overlay,
         .ffe-image-card__body {
             border-color: @ffe-farge-vann;
         }
     }
 
-    &__image {
+    &__image-container {
         max-height: 160px;
         position: relative;
         overflow: hidden;
@@ -22,7 +24,11 @@
         border-top-right-radius: 5px;
     }
 
-    &__image__overlay,
+    &__image {
+        max-width: 100%;
+    }
+
+    &__image-overlay,
     &__body {
         width: 100%;
         overflow: hidden;
@@ -30,7 +36,7 @@
         transition: border-color @ffe-transition-duration;
     }
 
-    &__image__overlay {
+    &__image-overlay {
         z-index: 10;
         height: 100%;
         border-bottom: 0;

package/less/text-card.less

@@ -1,6 +1,8 @@
 .ffe-text-card {
-    padding: @ffe-spacing-sm @ffe-spacing-lg;
+    .common-card-styling();
+
     display: flex;
+    padding: @ffe-spacing-sm @ffe-spacing-lg;
     flex-flow: column nowrap;
     text-align: center;
     overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/ffe-cards",
-  "version": "12.0.12",
+  "version": "14.0.1",
   "description": "Kort for bruk i oversikter",
   "license": "MIT",
   "author": "SpareBank 1",
@@ -16,7 +16,7 @@
     "test": "npm run lint"
   },
   "devDependencies": {
-    "@sb1/ffe-core": "^20.0.0"
+    "@sb1/ffe-core": "^21.0.0"
   },
   "peerDependencies": {
     "@sb1/ffe-core": "*"
@@ -24,5 +24,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e11a27a9d7504e11ef1ae799c6c206e160bd5606"
+  "gitHead": "d2ba13791d9109477fc584ecda998e7bacfaf2c8"
 }

package/less/animation.less

@@ -1,56 +0,0 @@
-/*
-    Animation for loading insurance cards
-    Note that due to some IE11 related bug/feature this only works
-    with minified CSS when we specify both from and to
-*/
-@keyframes showInsuranceCards {
-    from {
-        opacity: 0;
-    }
-
-    30% {
-        box-shadow: 0 0 28px rgba(0, 0, 0, 0.1);
-        transform: scale(1.02);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(1);
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes showCardNotification {
-    100% {
-        transform: translateY(0);
-    }
-}
-
-.card-sequential-animation {
-    &:nth-child(0) { animation: showInsuranceCards 0.5s 0 forwards ease-out; }
-    &:nth-child(1) { animation: showInsuranceCards 0.5s 0.1s forwards ease-out; }
-    &:nth-child(2) { animation: showInsuranceCards 0.5s 0.2s forwards ease-out; }
-    &:nth-child(3) { animation: showInsuranceCards 0.5s 0.3s forwards ease-out; }
-    &:nth-child(4) { animation: showInsuranceCards 0.5s 0.4s forwards ease-out; }
-    &:nth-child(5) { animation: showInsuranceCards 0.5s 0.5s forwards ease-out; }
-    &:nth-child(6) { animation: showInsuranceCards 0.5s 0.6s forwards ease-out; }
-    &:nth-child(7) { animation: showInsuranceCards 0.5s 0.7s forwards ease-out; }
-    &:nth-child(8) { animation: showInsuranceCards 0.5s 0.8s forwards ease-out; }
-    &:nth-child(9) { animation: showInsuranceCards 0.5s 0.9s forwards ease-out; }
-    &:nth-child(10) { animation: showInsuranceCards 0.5s 1s forwards ease-out; }
-    &:nth-child(n+11) { animation: showInsuranceCards 0.5s 1.1s forwards ease-out; }
-}
-
-.no-cssanimations {
-    .link-card {
-        transform: scale(1);
-        opacity: 1;
-
-        &__status {
-            transform: translateY(0);
-        }
-    }
-}