@ilo-org/styles 0.13.2 → 0.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.7.0"
+    "@ilo-org/themes": "0.7.1"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/_mixins.scss

@@ -208,6 +208,33 @@
   @include dataurlicon($name, $color);
 }
 
+// ======================================
+// Video Button
+// ======================================
+@mixin videobutton($name, $size: "standard") {
+  $height: if($size == "big", 48px, 24px);
+  $box: if($size == "big", 80px, 40px);
+  $width: $height;
+  $color: $color-ux-video-controls-default-icon;
+
+  cursor: pointer;
+  border: none;
+  background-color: $color-ux-video-controls-default-background;
+  width: $box;
+  height: $box;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: $width $height;
+  @include dataurlicon($name, $color);
+
+  &:hover,
+  &:focus {
+    background-color: $color-ux-video-controls-hover-background;
+    $color: $color-ux-video-controls-hover-icon;
+    @include dataurlicon($name, $color);
+  }
+}
+
 // ======================================
 // Link styles
 // ======================================
@@ -350,7 +377,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  position: relative;
 
   &::after {
     content: "";

package/scss/components/_accordion.scss

@@ -12,10 +12,11 @@
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
-
+    text-align: start;
     width: 100%;
     margin: 0;
-    padding: spacing(4) spacing(4) spacing(4) 0;
+    padding: spacing(4) 0;
+    padding-inline-end: spacing(4);
 
     background-color: $color-ux-background-default;
     background-position: calc(100% - px-to-rem(6px)) center;
@@ -36,7 +37,8 @@
 
     &--large {
       @include font-styles("headline-6");
-      padding: spacing(5) spacing(4) spacing(5) 0;
+      padding: spacing(5) 0;
+      padding-inline-end: spacing(4);
     }
 
     &:hover,
@@ -58,11 +60,11 @@
 
     @include breakpoint("medium") {
       @include font-styles("label-medium");
-      padding: spacing(4) spacing(4) spacing(4) 0;
 
       &--large {
         @include font-styles("headline-6");
-        padding: spacing(5) spacing(4) spacing(5) 0;
+        padding: spacing(5) 0;
+        padding-inline-end: spacing(4);
       }
     }
 

package/scss/components/_breadcrumb.scss

@@ -48,6 +48,10 @@
       font-family: $fonts-copy;
       font-weight: 400;
       @include font-styles("body-xxs");
+
+      &--dropdown {
+        font-family: $fonts-copy;
+      }
     }
 
     &:hover,
@@ -186,7 +190,7 @@
           content: "";
           height: px-to-rem(12px);
           position: absolute;
-          // left: 50%;
+          left: 50%;
           top: -#{px-to-rem(6px)};
           transform: translateX(-50%) rotate(135deg);
           width: px-to-rem(12px);

package/scss/components/_card.scss

@@ -64,7 +64,7 @@
 
       &::before {
         @include dataurlicon("play", $brand-ilo-grey-light);
-        background-color: $brand-ilo-grey-charcoal;
+        background-color: $brand-ilo-black;
         background-position: center;
         background-size: 18px 20px;
         background-repeat: no-repeat;
@@ -181,7 +181,7 @@
   }
 
   &--intro {
-    color: $brand-ilo-grey-charcoal;
+    color: $brand-ilo-black;
     @include font-styles("body-small");
     @include globaltransition("color");
     margin-bottom: spacing(8);

package/scss/components/_cardgroup.scss

@@ -60,7 +60,7 @@
   &--button-wrap {
     display: flex;
     justify-content: center;
-    margin-top: px-to-rem(64px);
+    margin-top: spacing(16);
     width: 100%;
   }
 }

package/scss/components/_datacard.scss

@@ -139,7 +139,7 @@
 
       &--content-copy {
         @include font-styles("headline-5");
-        color: $brand-ilo-grey-charcoal;
+        color: $brand-ilo-black;
         font-family: $fonts-display;
         font-weight: 500;
       }

package/scss/components/_detailcard.scss

@@ -149,7 +149,7 @@
           top: 50%;
           transform: rotate(-90deg) translateX(50%);
           width: px-to-rem(12px);
-          @include dataurlicon("equilateraltriangle", $brand-ilo-grey-charcoal);
+          @include dataurlicon("equilateraltriangle", $brand-ilo-black);
         }
       }
 

package/scss/components/_factlistcard.scss

@@ -69,7 +69,7 @@
       }
 
       #{$self}--title {
-        color: $brand-ilo-grey-charcoal;
+        color: $brand-ilo-black;
         @include font-styles("headline-5");
         @include textmargin(
           "margin-bottom",

package/scss/components/_featurecard.scss

@@ -73,7 +73,6 @@
         border-top: px-to-rem(2px) solid $brand-ilo-grey-light;
         margin-left: px-to-rem(-24px);
         margin-right: px-to-rem(-24px);
-        margin-top: px-to-rem(34px);
         position: relative;
         z-index: 2;
 
@@ -181,7 +180,7 @@
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
-        padding: spacing(6) spacing(6) spacing(10);
+        padding: spacing(6) spacing(6) spacing(2) spacing(6);
       }
 
       &#{$self}__linklist {
@@ -192,14 +191,7 @@
 
       #{$self}--title {
         @include font-styles("headline-5");
-        @include textmargin(
-          "margin-bottom",
-          40px,
-          "headline-5",
-          "display",
-          "body-eyebrow",
-          "copy"
-        );
+        margin-bottom: spacing(6);
         font-family: $fonts-display;
         font-weight: 700;
         flex: 1;
@@ -218,7 +210,7 @@
       }
 
       #{$self}--date {
-        margin-bottom: 0;
+        margin-bottom: spacing(8);
         margin-top: auto;
       }
     }