@erst-vg/vg-design-wrapper 1.0.12 → 2.0.1

package/src/styles/vg/card/_vg-udvidedecardgrupper.scss

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .udvidet-cardgruppe {
   &.white-text {
     .udvidet-cardgruppe__titel {
@@ -31,7 +34,8 @@
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-        padding-top: 66.66%;
+        aspect-ratio: 3 / 2;
+        object-fit: cover;
         width: 100%;
 
         &.logo-picture {
@@ -102,20 +106,21 @@
 
         .card-picture {
           background-size: contain;
-          padding-top: 50%;
+          aspect-ratio: 2/1;
+          object-fit: contain;
         }
       }
 
       .udbyder-card {
         border: 1px solid $color-light-gray;
         border-bottom: none;
-        padding: 32px;
-        aspect-ratio: 3/2;
 
         .card-picture {
           background-size: contain;
-          padding-top: unset;
+          padding: 32px;
           height: 100%;
+          aspect-ratio: 3/2;
+          object-fit: contain;
         }
       }
 
@@ -182,6 +187,7 @@
         span {
           line-height: 1.5;
           vertical-align: middle;
+          word-break: break-word;
         }
 
         &.line-limit {
@@ -346,6 +352,40 @@
         }
       }
     }
+
+    .medarbejder-card {
+      margin-bottom: 0 !important;
+      padding-bottom: 24px;
+
+      @include media-breakpoint-up(sm) {
+        padding-bottom: 56px;
+
+        .udvidet-cardgruppe-card {
+          display: flex;
+          flex-direction: row;
+
+          .picture-container {
+            width: calc(50% - 16px);
+            height: 100%;
+
+            .card-picture {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .text-wrapper {
+            width: calc(50% - 16px);
+            height: auto;
+            margin-left: 32px;
+            border-top: none;
+            padding-top: 0;
+            padding-bottom: 0;
+            justify-content: normal;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -457,3 +497,9 @@
     }
   }
 }
+
+.picture-container {
+  .card-picture {
+    display: block;
+  }
+}

package/src/styles/vg/mixins/_vg-mediaquery-helpers.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:list';
+
 // Grid breakpoints.. copied directly from FDS
 $grid-xs: 0;
 $grid-sm: 576px;
@@ -28,9 +31,9 @@ $grid-breakpoints: (
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -38,7 +41,7 @@ $grid-breakpoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
@@ -49,7 +52,14 @@ $grid-breakpoints: (
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+  @if $next {
+    @return breakpoint-min($next, $breakpoints) - 1px;
+  } @else {
+    // For det største breakpoint (xl), returner breakpoint værdien minus 1px
+    // Dette gør at media-breakpoint-down(xl) matcher skærme under 1200px
+    $current: map.get($breakpoints, $name);
+    @return if($current and $current > 0, $current - 1px, null);
+  }
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
@@ -131,9 +141,6 @@ $grid-breakpoints: (
     }
   }
 }
-@mixin testmixin() {
-  background-color: yellow !important;
-}
 
 // Breakpoints specificeret til zoom og kigger derfor på em
 // Bruges særlig til mindre skærme, så koden kan opfylde tilgængelighedskrav
@@ -145,7 +152,7 @@ $zoom-breakpoints: (
 );
 
 @mixin media-breakpoint-down-em($name, $breakpoints: $zoom-breakpoints) {
-  $max: map-get($breakpoints, $name);
+  $max: map.get($breakpoints, $name);
   @media all and (max-width: $max) {
     @content;
   }

package/src/styles/vg/pagination/_vg-pagination.scss

@@ -1,3 +1,5 @@
+@use './../vg-colors' as *;
+
 .pagination {
   padding-top: 16px;
   padding-bottom: 16px;