@ilo-org/styles 0.1.11 → 0.1.13

package/scss/components/_card.scss

@@ -13,14 +13,22 @@
     text-align: right;
   }
 
-  &--action:hover:not(#{$self}--data),
-  &--action:focus:not(#{$self}--data) {
+  &--action:hover:not(#{$self}--data):not(#{$self}--stat),
+  &--action:focus:not(#{$self}--data):not(#{$self}--stat),
+  &--action:focus-within:not(#{$self}--data):not(#{$self}--stat) {
     background: $brand-ilo-white;
     color: $brand-ilo-blue;
+    outline: none;
     text-decoration: none;
 
     &#{$self}--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(#{$self}--factlist) {
       background: $brand-ilo-white;
+
+      &#{$self}--cornercut {
+        &::after {
+          @include dataurlicon("triangledecoration", $brand-ilo-white);
+        }
+      }
     }
 
     #{$self}--eyebrow {
@@ -57,7 +65,9 @@
     @include globaltransition("color, background-color, border-color, opacity");
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
+      outline: none;
       @include globaltransition(
         "color, background-color, border-color, opacity"
       );
@@ -72,8 +82,9 @@
     background: $brand-ilo-white;
   }
 
-  &--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(:hover):not(:focus) {
+  &--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(:hover):not(:focus):not(:focus-within) {
     background: $brand-ilo-dark-blue;
+    outline: none;
     transition: background $transition-timing ease-out;
 
     #{$self}--eyebrow {
@@ -102,42 +113,110 @@
     }
   }
 
-  &--cornercut:not(#{$self}--multilink):not(#{$self}--detail):not(#{$self}--feature) {
+  &--dark:not(#{$self}--action),
+  &--dark:not(#{$self}--action):hover,
+  &--dark:not(#{$self}--action):focus,
+  &--dark:not(#{$self}--action):focus-within {
+    background: $brand-ilo-dark-blue;
+    outline: none;
+    transition: background $transition-timing ease-out;
+
+    #{$self}--eyebrow {
+      color: $brand-ilo-grey-light;
+      transition: color $transition-timing ease-out;
+    }
+
+    #{$self}--title {
+      color: $brand-ilo-white;
+      transition: color $transition-timing ease-out;
+    }
+
+    #{$self}--intro {
+      color: $brand-ilo-grey-light;
+      transition: color $transition-timing ease-out;
+    }
+
+    #{$self}--date {
+      color: $brand-ilo-grey-light;
+      transition: color $transition-timing ease-out;
+    }
+
+    #{$self}--eventdate {
+      color: $brand-ilo-grey-light;
+      transition: color $transition-timing ease-out;
+    }
+  }
+
+  &--cornercut:not(#{$self}--multilink):not(#{$self}--detail):not(#{$self}--feature):not(#{$self}--graphic):not(#{$self}--stat):not(#{$self}--data) {
+    @include cornercut($brand-ilo-white, 40px, 73px);
     margin-top: px-to-rem(40px);
     padding-top: 0;
     position: relative;
 
+    &#{$self}--dark {
+      &::after {
+        @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+      }
+    }
+
     @include breakpoint("medium") {
+      @include cornercut($brand-ilo-white, 48px, 87px);
       margin-top: px-to-rem(48px);
+
+      &#{$self}--dark {
+        &::after {
+          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+        }
+      }
     }
 
     @include breakpoint("large") {
+      @include cornercut($brand-ilo-white, 64px, 116px);
       margin-top: px-to-rem(64px);
+
+      &#{$self}--dark {
+        &::after {
+          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+        }
+      }
     }
 
     &::before {
-      background: inherit;
-      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-      content: "";
-      display: block;
-      height: px-to-rem(30px);
       left: 0;
-      position: absolute;
-      top: px-to-rem(-29.7px);
-      width: 100%;
+      top: px-to-rem(-40px);
+      transition: background-image $transition-timing ease-out;
 
       .right-to-left & {
-        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
+        left: auto;
+        right: 0;
       }
 
       @include breakpoint("medium") {
-        height: px-to-rem(38px);
-        top: px-to-rem(-37.7px);
+        top: px-to-rem(-47.7px);
       }
 
       @include breakpoint("large") {
-        height: px-to-rem(58px);
-        top: px-to-rem(-57.7px);
+        top: px-to-rem(-63.7px);
+      }
+    }
+
+    &::after {
+      right: 0;
+      top: px-to-rem(-40px);
+      transition: background-image $transition-timing ease-out;
+
+      .right-to-left & {
+        left: 0;
+        right: auto;
+        transform: rotateY(180deg);
+      }
+
+      @include breakpoint("medium") {
+        top: px-to-rem(-47.7px);
+      }
+
+      @include breakpoint("large") {
+        top: px-to-rem(-63.7px);
       }
     }
   }
@@ -156,7 +235,8 @@
     @include globaltransition("color");
 
     #{$self}--link:hover &,
-    #{$self}--link:focus & {
+    #{$self}--link:focus &,
+    #{$self}--link:focus-within & {
       color: $brand-ilo-blue;
       @include globaltransition("color");
     }
@@ -178,7 +258,8 @@
     @include globaltransition("color");
 
     #{$self}--link:hover &,
-    #{$self}--link:focus & {
+    #{$self}--link:focus &,
+    #{$self}--link:focus-within & {
       color: $brand-ilo-blue;
       @include globaltransition("color");
     }
@@ -191,7 +272,8 @@
     @include globaltransition("color");
 
     #{$self}--link:hover &,
-    #{$self}--link:focus & {
+    #{$self}--link:focus &,
+    #{$self}--link:focus-within & {
       color: $brand-ilo-blue;
       @include globaltransition("color");
     }
@@ -204,7 +286,8 @@
     @include globaltransition("color");
 
     #{$self}--link:hover &,
-    #{$self}--link:focus & {
+    #{$self}--link:focus &,
+    #{$self}--link:focus-within & {
       color: $brand-ilo-blue;
       @include globaltransition("color");
     }
@@ -428,7 +511,8 @@
     }
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
         drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
         drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
@@ -529,21 +613,46 @@
   }
 
   &--graphic {
+    @include cornercut($brand-ilo-white, 40px, 73px);
     border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
     margin-top: px-to-rem(40px);
     padding: 0 px-to-rem(24px) px-to-rem(40px);
     position: relative;
 
+    &#{$self}--dark {
+      &::after {
+        @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        &::after {
+          @include dataurlicon("triangledecoration", $brand-ilo-white);
+        }
+      }
+    }
+
     &::before {
-      background: inherit;
-      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-      content: "";
-      display: block;
-      height: 40px;
       left: 0;
-      position: absolute;
       top: -39.7px;
-      width: 100%;
+
+      .right-to-left & {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    &::after {
+      right: 0;
+      top: -39.7px;
+      transition: background-image $transition-timing ease-out;
+
+      .right-to-left & {
+        left: 0;
+        right: auto;
+        transform: rotateY(180deg);
+      }
     }
 
     .ilo--profile--contents * {
@@ -551,7 +660,8 @@
     }
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
         drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
         drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
@@ -563,7 +673,82 @@
     }
 
     @include breakpoint("medium") {
+      @include cornercut($brand-ilo-white, 40px, 73px);
       padding: 0 px-to-rem(32px) px-to-rem(40px);
+
+      &#{$self}--dark {
+        &::after {
+          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+        }
+
+        &:hover,
+        &:focus,
+        &:focus-within {
+          &::after {
+            @include dataurlicon("triangledecoration", $brand-ilo-white);
+          }
+        }
+      }
+
+      &::before {
+        left: 0;
+        top: -39.7px;
+
+        .right-to-left & {
+          left: auto;
+          right: 0;
+        }
+      }
+
+      &::after {
+        right: 0;
+        top: -39.7px;
+
+        .right-to-left & {
+          left: 0;
+          right: auto;
+          transform: rotateY(180deg);
+        }
+      }
+    }
+
+    @include breakpoint("large") {
+      @include cornercut($brand-ilo-white, 40px, 73px);
+
+      &#{$self}--dark {
+        &::after {
+          @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+        }
+
+        &:hover,
+        &:focus,
+        &:focus-within {
+          &::after {
+            @include dataurlicon("triangledecoration", $brand-ilo-white);
+          }
+        }
+      }
+
+      &::before {
+        left: 0;
+        top: -39.7px;
+
+        .right-to-left & {
+          left: auto;
+          right: 0;
+        }
+      }
+
+      &::after {
+        right: 0;
+        top: -39.7px;
+
+        .right-to-left & {
+          left: 0;
+          right: auto;
+          transform: rotateY(180deg);
+        }
+      }
     }
 
     &#{$self}--wide {
@@ -645,6 +830,21 @@
       display: block;
       @include textmargin("margin-bottom", 32px, "base", "copy", 0, 0);
     }
+
+    .ilo--card--content {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      > * {
+        justify-self: flex-start;
+      }
+
+      > *:last-child {
+        justify-self: flex-end;
+        margin-bottom: 0;
+      }
+    }
   }
 
   &--graphicpromo {
@@ -652,13 +852,9 @@
     padding: px-to-rem(40px) px-to-rem(24px);
     width: 100%;
 
-    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-      height: px-to-rem(40px);
-      top: px-to-rem(-39.7px);
-    }
-
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
         drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
         drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
@@ -667,20 +863,10 @@
 
     @include breakpoint("medium") {
       padding: px-to-rem(48px);
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-        height: px-to-rem(64px);
-        top: px-to-rem(-63.7px);
-      }
     }
 
     @include breakpoint("large") {
       padding: px-to-rem(64px) px-to-rem(72px);
-
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-        height: px-to-rem(64px);
-        top: px-to-rem(-63.7px);
-      }
     }
 
     &#{$self}--wide {
@@ -794,10 +980,18 @@
     padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);
     pointer-events: none;
 
-    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-      height: px-to-rem(40px);
-      top: px-to-rem(-39.7px);
+    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+      &::before {
+        height: 40px;
+        top: px-to-rem(-39.7px);
+        width: calc(100% - 73px);
+      }
+
+      &::after {
+        height: 40px;
+        top: px-to-rem(-39.7px);
+        width: 73.3px;
+      }
     }
 
     &#{$self}--dark {
@@ -807,10 +1001,18 @@
     @include breakpoint("large") {
       padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
 
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-        clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-        height: px-to-rem(41px);
-        top: px-to-rem(-40.7px);
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+        &::before {
+          height: 48px;
+          top: px-to-rem(-47.7px);
+          width: calc(100% - 87px);
+        }
+
+        &::after {
+          height: 48px;
+          top: px-to-rem(-47.7px);
+          width: 87.3px;
+        }
       }
     }
 
@@ -855,7 +1057,8 @@
       }
 
       &:hover,
-      &:focus {
+      &:focus,
+      &:focus-within {
         #{$self}--title {
           color: $brand-ilo-white;
           @include globaltransition("color");
@@ -895,29 +1098,64 @@
 
   &--stat {
     border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
+    margin-top: px-to-rem(40px);
     padding: 0 px-to-rem(24px) px-to-rem(40px) px-to-rem(22px);
+    position: relative;
     width: 100%;
 
-    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-      clip-path: polygon(75% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-      height: px-to-rem(40px);
-      top: px-to-rem(-39.7px);
+    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+      &::before {
+        left: 0;
+        top: px-to-rem(-39.7px);
+
+        .right-to-left & {
+          left: auto;
+          right: 0;
+        }
+      }
+
+      &::after {
+        right: 0;
+        top: px-to-rem(-39.7px);
+
+        .right-to-left & {
+          left: 0;
+          right: auto;
+          transform: rotateY(180deg);
+        }
+      }
     }
 
     &#{$self}--blue {
       background: $brand-ilo-light-blue;
+
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+        @include cornercut($brand-ilo-light-blue, 40px, 73px);
+      }
     }
 
     &#{$self}--yellow {
       background: $brand-ilo-yellow;
+
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+        @include cornercut($brand-ilo-yellow, 40px, 73px);
+      }
     }
 
     &#{$self}--green {
       background: $brand-ilo-green;
+
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+        @include cornercut($brand-ilo-green, 40px, 73px);
+      }
     }
 
     &#{$self}--turquoise {
       background: $brand-ilo-turquoise;
+
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature) {
+        @include cornercut($brand-ilo-turquoise, 40px, 73px);
+      }
     }
 
     #{$self}--content {
@@ -939,7 +1177,8 @@
 
     #{$self}--intro {
       color: $brand-ilo-dark-blue;
-      @include font-styles("nav-md-sm");
+      font-family: $fonts-display;
+      @include font-styles("base");
       @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
       width: 100%;
     }
@@ -948,36 +1187,52 @@
       @include font-styles("image-credit");
       align-self: flex-end;
     }
-
-    @include breakpoint("large") {
-      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
-        height: px-to-rem(48px);
-        top: px-to-rem(-47.7px);
-      }
-    }
   }
 
   &--data {
+    @include cornercut($brand-ilo-light-blue, 40px, 73px);
     background: $brand-ilo-light-blue;
     border-bottom: px-to-rem(3px) solid #82afdc;
+    margin-top: px-to-rem(40px);
     max-width: px-to-rem(600px);
     padding: 0 px-to-rem(24px) px-to-rem(56px);
+    position: relative;
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       background: $brand-ilo-light-blue;
     }
 
     &::before {
-      clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-      height: px-to-rem(40px);
+      left: 0;
       top: px-to-rem(-39.7px);
+
+      .right-to-left & {
+        left: auto;
+        right: 0;
+      }
     }
 
-    @include breakpoint("large") {
+    &::after {
+      right: 0;
+      top: px-to-rem(-39.7px);
+
+      .right-to-left & {
+        left: 0;
+        right: auto;
+        transform: rotateY(180deg);
+      }
+    }
+
+    @include breakpoint("medium") {
+      @include cornercut($brand-ilo-light-blue, 48px, 84px);
+
       &::before {
-        clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-        height: px-to-rem(48px);
+        top: px-to-rem(-47.7px);
+      }
+
+      &::after {
         top: px-to-rem(-47.7px);
       }
     }
@@ -1061,7 +1316,8 @@
       }
 
       &:hover,
-      &:focus {
+      &:focus,
+      &:focus-within {
         .ilo--link-list {
           &--link {
             color: $brand-ilo-blue;
@@ -1076,7 +1332,8 @@
     }
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       background-color: $brand-ilo-white;
       filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
         drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
@@ -1140,7 +1397,9 @@
 
         #{$self}--content {
           display: flex;
+          flex-direction: row;
           flex-wrap: wrap;
+          position: relative;
           width: 50%;
         }
 
@@ -1154,6 +1413,7 @@
 
         #{$self}--date {
           align-self: flex-end;
+          width: 100%;
         }
 
         #{$self}--eyebrow {
@@ -1163,6 +1423,10 @@
         #{$self}--title {
           width: 100%;
         }
+
+        .ilo--link-list {
+          width: calc(100% + 48px);
+        }
       }
     }
 

package/scss/components/_cardgroup.scss

@@ -24,7 +24,7 @@
   &--two {
     @include breakpoint("large") {
       #{$card} {
-        width: calc(50% - 32px);
+        width: calc(50% - 24px);
       }
     }
   }
@@ -32,7 +32,7 @@
   &--three {
     @include breakpoint("large") {
       #{$card} {
-        width: calc(33.333% - 32px);
+        width: calc(33.333% - 24px);
       }
     }
   }
@@ -40,7 +40,7 @@
   &--four {
     @include breakpoint("large") {
       #{$card} {
-        width: calc(25% - 32px);
+        width: calc(25% - 24px);
       }
     }
   }

package/scss/components/_contextmenu.scss

@@ -27,11 +27,13 @@
     padding: 0 px-to-rem($spacing-padding-1);
 
     &:first-of-type {
-      border-radius: 2px 2px 0 0;
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
     }
 
     &:last-of-type {
-      border-radius: 0 0 2px 2px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
 
       a {
         border-bottom: none;