gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

package/build/styleguide/sass/21-atoms/tag/_tag.scss

@@ -1,36 +1,33 @@
 .tag {
-  @include theme('border-color', 'color-primary--lighten-3', 'tag-span-border-color');
   @include theme('background-color', 'color-secondary', 'tag-background-color');
+  @include medium-text();
 
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   padding: .7em .8em;
-  border: 1px solid;
-  border-radius: border-radius('radius-1');
-  font-size: .7rem;
   line-height: 1.1;
   text-decoration: none;
 
   &.filter {
-    @include theme('background-color', 'color-primary--lighten-4', 'tag-filter-background-color');
+    @include theme('background-color', 'color-quaternary--lighten-2', 'tag-filter-background-color');
 
-    padding: .4em .8em .4em 1.2em;
-    border-color: transparent;
+    padding-top: .4em;
+    padding-bottom: .4em;
 
     &:hover button {
-      @include theme('background-color', 'color-primary--lighten-4', 'tag-close-button-background-hover');
+      @include theme('background-color', 'color-quaternary', 'tag-close-button-background-hover');
     }
 
     button {
       width: 1.1rem;
       height: 1.1rem;
-      margin-left: .5rem;
+      margin-left: .25rem;
       padding: 0;
       transition: background-color .2s ease-in-out;
       border: 0;
       border-radius: 100%;
-      background: transparent svg-as-background('cross', color('dark-gray'), 16, 16);
+      background: transparent svg-as-background('cross', color('gray'), 16, 16);
       background-repeat: no-repeat;
       background-position: center;
       cursor: pointer;
@@ -39,28 +36,25 @@
 }
 
 a.tag {
-  @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-border-color');
-  @include icon(arrow-right, after);
+  @include theme('color', 'color-zero', 'tag-color');
+  @include normal-text();
 
   padding: .4em .8em;
-  border-width: 2px;
+  border: 0;
 
-  &::after {
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-left: .5rem;
-    font-size: 1rem;
-    vertical-align: middle;
+  &:not([class*=icon])::before {
+    margin-left: 5px;
   }
 
-  &,
-  &:focus,
   &:hover {
-    background-image: none;
+    @include theme('background-color', 'color-secondary--lighten-1', 'tag-hover-background');
   }
+}
 
-  &:hover {
-    @include theme('background-color', 'color-primary--lighten-4', 'button-secondary-hover-background');
-    @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
-  }
+span.tag {
+  @include small-text();
+
+  height: 1.5rem;
+  padding-right: .5rem;
+  padding-left: .5rem;
 }

package/build/styleguide/sass/31-molecules/accordion/_accordion.scss

@@ -1,11 +1,13 @@
 .accordion {
-
   .accordion--button {
+    @include extra-large-text;
+    @include semi-bold-text;
     @include icon(chevron-down);
+
     position: relative;
     padding-right: 1.6rem;
-    padding-left: 0;
     color: inherit;
+    line-height: 1.3rem;
     text-align: left;
 
     &::before {
@@ -13,7 +15,6 @@
       right: 0;
       transition: transform .2s ease-in-out;
       font-size: 1.4rem;
-      line-height: 1.1;
     }
 
     &[aria-expanded=true] {
@@ -25,7 +26,6 @@
 
   .accordion--content {
     transition: max-height .5s ease-in-out;
-    overflow: hidden;
 
     p {
       line-height: 1.75;
@@ -36,18 +36,33 @@
 
 ul.accordion,
 dl.accordion {
+  li {
+    @include theme('border-color', 'color-primary--lighten-4', 'accordion-border-color');
 
-  .accordion--button {
+    border-bottom: 2px solid;
+
+    h3 {
+      margin: 1rem 0;
+    }
+  }
 
+  .accordion--button {
+    display: flex;
+    align-items: center;
     width: 100%;
     padding: 0;
     overflow: visible;
 
     &::before {
+      @include theme('background-color', 'color-tertiary-pastel', 'button-secondary-background');
+
       position: relative;
       right: auto;
       left: 0;
-      min-width: 1.6rem;
+      min-width: 1.8rem;
+      min-height: 1.8rem;
+      margin: 0 .75rem 0 0;
+      padding: .13rem .25rem;
       transition: transform .2s ease-in-out;
       font-size: 1.2rem;
       line-height: 1.2;
@@ -66,16 +81,12 @@ dl.accordion {
       @include icon(plus);
     }
   }
-
-  .accordion--content {
-    margin-left: 1.6rem;
-  }
 }
 
 ul.accordion {
   margin: 0;
 
-  >li {
+  > li {
     list-style: none;
   }
 }

package/build/styleguide/sass/31-molecules/breadcrumbs/_breadcrumbs.scss

@@ -13,11 +13,14 @@
       align-items: center;
       margin-right: .4rem;
 
+      &::before {
+        display: none;
+      }
+
       &::after {
         @include theme('color', 'color-primary', 'breadcrumb-arrows-color');
 
-        margin-left: .4rem;
-        vertical-align: -15%;
+        margin: 0 0 0 .4rem;
       }
 
       &:last-of-type {
@@ -30,11 +33,12 @@
       }
 
       > * {
-        font-size: .6rem;
+        @include small-text;
       }
 
       a {
-        @include bold-text;
+        @include normal-text;
+        @include small-text;
 
         line-height: initial;
 
@@ -60,19 +64,28 @@
 
   .expandable {
     a {
-      @include reset-link-background;
-      @include theme('border-color', 'color-tertiary', 'breadcrumb-expandable-color');
+      @include bold-text;
 
-      padding: .2rem .3rem .4rem;
-      border: 1px solid;
-      border-radius: border-radius('radius-1');
-      line-height: .3rem;
+      padding: 0 .35rem;
+      border-color: transparent;
+      outline: 2px solid currentColor;
+      line-height: .95rem;
 
       &:hover,
       &:focus {
-        @include theme('background-color', 'color-tertiary--lighten-4', 'breadcrumb-expandable-background-color-hover');
+        @include theme('background-color', 'color-primary--lighten-4', 'link-hover-background');
+      }
+
+      &,
+      &:focus,
+      &:hover {
+        background-image: none;
       }
     }
+
+    &::after {
+      line-height: inherit;
+    }
   }
 
   &[aria-expanded="false"] {

package/build/styleguide/sass/31-molecules/cta-block/_cta-block.scss

@@ -1,21 +1,115 @@
 .cta-block {
+  display: flex;
+  position: relative;
+  flex-flow: column;
+  max-width: $bp-max-content;
+  margin: 3rem 0;
 
-  .highlight__inner {
+  @include phablet {
+    flex-flow: row;
+  }
+
+  &.image-none {
+    max-width: 48.5rem;
+    z-index: 1;
+
+    .cta-block__content {
+      @include theme-content('color-info-pastel', 'cta-shadow-color') {
+        @include abstract-shadow('bottom', 'left', $theme-color, null, 13rem, 13rem);
+
+        margin-left: 0; // Overwrite only the h-margin.
+      }
+    }
+  }
+
+  &.image-left,
+  &.image-right {
+    @include phablet {
+      margin-bottom: 6.5rem;
+    }
+  }
+
+  .cta-block__image {
+    @include phablet {
+      flex-shrink: .3;
+    }
+
+    @include desktop {
+      min-width: 570px;
+      min-height: 570px;
+    }
+  }
+
+  .cta-block__content {
+    position: relative;
+    width: 100%;
+    z-index: 1;
+
+    @include phablet {
+      margin-top: auto;
+    }
 
     li {
       margin-top: .8rem;
 
       &:first-of-type a {
-        @extend %button-primary;
+        @extend %button-secondary;
         @include button;
         @include button-icon;
       }
+    }
+  }
 
-      &:not(:last-of-type) {
-        @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
+  &.image-left {
+    .cta-block__image {
+      margin-right: 1rem;
 
-        padding-bottom: .8rem;
-        border-bottom: 2px solid;
+      @include phablet {
+        margin-right: inherit;
+      }
+    }
+
+    .cta-block__content {
+      top: -1rem;
+      left: 1rem;
+
+      @include phablet {
+        top: auto;
+        bottom: -4.5rem;
+        left: -4.5rem;
+
+        .feature-block {
+          width: calc(100% + 4.5rem);
+        }
+      }
+    }
+  }
+
+  &.image-right {
+    @include phablet {
+      flex-direction: row-reverse;
+    }
+
+    .cta-block__image {
+      margin-left: 1rem;
+
+      @include phablet {
+        margin-left: inherit;
+      }
+    }
+
+    .cta-block__content {
+      top: -1rem;
+      margin-right: 1rem;
+
+      @include phablet {
+        top: auto;
+        bottom: -4.5rem;
+        margin-right: inherit;
+
+        .feature-block {
+          width: calc(100% + 4.5rem);
+        }
       }
     }
   }
@@ -32,20 +126,6 @@
       max-width: calc(100% - 2rem);
       margin-right: 1rem;
       margin-left: 1rem;
-
-      .highlight__inner {
-        height: 100%;
-
-        @include tablet {
-          padding: 5rem 2rem 2rem;
-
-          &::before {
-            top: 0;
-            right: 0;
-            left: 0;
-          }
-        }
-      }
     }
   }
 }

package/build/styleguide/sass/31-molecules/feature-block/_feature-block.scss

@@ -0,0 +1,31 @@
+.feature-block {
+  @include theme('color', 'color-none', 'feature-block-primary-color');
+  @include theme('background-color', 'color-primary', 'feature-block-primary-background-color');
+
+  padding: 1.5rem;
+
+  @include tablet {
+    padding: 3rem;
+  }
+
+  h1 {
+    @include theme('color', 'color-none', 'feature-block-primary-color');
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &.secondary {
+    @include theme('color', 'color-zero', 'feature-block-secondary-color');
+    @include theme('background-color', 'color-secondary', 'feature-block-secondary-background-color');
+
+    h1 {
+      @include theme('color', 'color-zero', 'feature-block-secondary-color');
+    }
+  }
+}

package/build/styleguide/sass/31-molecules/file-upload/_file-upload.scss

@@ -1,4 +1,15 @@
 .file-upload {
+  &.multiple {
+    .file {
+      &::after {
+        display: none;
+      }
+    }
+
+    .tag-list-wrapper {
+      margin-top: .25rem;
+    }
+  }
 
   ul.inline, /// @deprecated since 4.0.0
   .tag-list-wrapper {
@@ -12,5 +23,13 @@
 
   .button {
     margin-bottom: .8rem;
+
+    &:focus {
+      background-size: 100% 100%;
+    }
+  }
+
+  label {
+    margin-bottom: 0;
   }
 }

package/build/styleguide/sass/31-molecules/form-actions/_form-actions.scss

@@ -6,12 +6,25 @@
 
   > input,
   > button {
-    @include button-large;
+    @include button-medium;
   }
 
   > input,
   > button,
   > a[href] {
-    margin: 0 .6rem .6rem;
+    margin: 0 .75rem .75rem;
+  }
+
+  > a[href] {
+    margin-left: 1.5rem;
+  }
+
+  > a.back {
+    margin-left: 2.25rem;
+
+    &::after {
+      // Correct icon position.
+      top: 0;
+    }
   }
 }

package/build/styleguide/sass/31-molecules/form-item/_form-item.scss

@@ -12,7 +12,7 @@
 
     > .field-message,
     > label {
-      max-width: 50%;
+      max-width: 20.5rem;
     }
   }
 
@@ -22,7 +22,7 @@
   }
 
   .field-message:not(.error):not(.success) {
-    margin-bottom: .4rem;
+    margin-bottom: 1rem;
   }
 
   &:not(.stacked) {
@@ -40,7 +40,7 @@
             align-items: flex-start;
 
             .field-message {
-              margin: 0 0 gutter()*.5 .2rem;
+              margin: 0 0 gutter() * .5 .3rem;
               padding: .7rem 1.2rem .7rem 3.9rem;
 
               &::before {
@@ -73,7 +73,7 @@
                   top: 1.2rem;
                   right: 0;
                   bottom: -1px;
-                  height: auto;
+                  height: calc(100% - 1rem);
                   border-radius: 0 border-radius("radius-4") 0 0;
                 }
               }

package/build/styleguide/sass/31-molecules/form-row/_form-row.scss

@@ -6,7 +6,6 @@
   margin-right: -.4rem;
   margin-left: -.4rem;
 
-
   @include desktop {
     width: calc(50% + .8rem);
   }

package/build/styleguide/sass/31-molecules/gentinfo/_gentinfo.scss

@@ -9,9 +9,6 @@ $gentinfo-icon-size: 8rem;
 
   .gentinfo-content {
     @include theme('background-color', 'color-secondary', 'gentinfo-content-background');
-    @include theme-content('color-primary--lighten-5', 'gentinfo-content-shadow') {
-      box-shadow: 0 8px 12px 0 $theme-color;
-    }
 
     position: relative;
     max-width: $bp-max-content;

package/build/styleguide/sass/31-molecules/highlight/_highlight.scss

@@ -1,103 +1,42 @@
 .highlight {
   position: relative;
-  font-size: .8rem;
+  z-index: 0;
 
   .highlight__inner {
-    @include theme('background-color', 'color-primary--lighten-5', 'highlight-background');
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 2rem 1rem 1.6rem;
-    border-radius: border-radius('radius-2');
+    @include theme('background-color', 'color-tertiary-light', 'highlight-background');
+    @include theme-content('color-tertiary-pastel', 'highlight-shadow-color') {
+      @include abstract-shadow('bottom', 'right', $theme-color, null, 9.5rem, 9.5rem);
 
-    @include tablet {
-      padding: 2rem;
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-
-  input[type="checkbox"]:not([disabled]) + label::before,
-  input[type="radio"]:not([disabled]) + label::before,
-  input:not([disabled]):not([type="submit"]),
-  select:not([disabled]),
-  textarea:not([disabled]) {
-    @include theme('background-color', 'color-secondary', 'highlight-input-background-color');
-  }
-
-  .accolade {
-    &::before,
-    &::after {
-      @include theme('background', 'color-primary--lighten-5', 'highlight-background');
-    }
-  }
-}
-
-.highlight--left,
-.highlight--top {
-  padding-top: 3.5rem;
-
-  $icons: badminton ball book camera checklist download form hammer letter link loupe mail newsletter phone question upload whistle;
-  @each $icon in $icons {
-    &.#{$icon} .highlight__inner::before {
-      @include spot-image($icon + '-light', 7rem);
-    }
-  }
-
-  .highlight__inner {
-    @include tablet-and-below {
-      padding-top: 5rem;
+      @include phablet {
+        @include abstract-shadow('bottom', 'right', $theme-color, null, 11rem, 11rem);
+      }
     }
 
-    &::before {
-      @include spot-image('lightbulb-light', 7rem);
-      @include theme('color', 'color-primary', 'highlight-spot-shadow');
+    padding: 1.5rem;
 
-      position:  absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      margin: auto;
-      border-radius: 50%;
-      box-shadow: 0 10px 35px -25px;
-      z-index: z('boxes', 'spotimage');
+    @include tablet {
+      padding: 3rem;
     }
-  }
-}
 
-.highlight--left {
-  @include tablet {
-    padding-top: 0;
-  }
-
-  .highlight__inner {
-
-    @include tablet {
-      min-height: 11rem;
-      padding-left: 11rem;
+    > i {
+      @include theme('color', 'color-tertiary', 'highlight-icon-color');
 
       &::before {
-        top: calc(50% - 3.5rem);
-        right: auto;
-        bottom: auto;
-        left: 2rem;
+        position: relative;
+        top: .5rem;
+        margin: 0 .4rem 0 0;
+        font-size: 2rem;
       }
     }
-  }
-}
 
-.highlight--top {
-  .highlight__inner {
-    @include tablet {
-      padding-right: 9rem;
+    h3 {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
 
-      &::before {
-        right: 2rem;
-        left: auto;
-      }
+    > *:last-child {
+      margin-bottom: 0;
     }
   }
 }

package/build/styleguide/sass/31-molecules/language-switcher/_language-switcher.scss

@@ -15,8 +15,6 @@
   }
 
   .accordion--content {
-    @include theme('box-shadow', 'color-box-shadow-secondary-dark');
-
     position: absolute;
     top: 100%;
     right: 0;