gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/sass/31-molecules/checkboxes-dynamic/_checkboxes-dynamic.scss

@@ -0,0 +1,44 @@
+.checkbox-filter-dynamic {
+
+  .modal-preview,
+  .accordion-preview,
+  .checkbox-accordion {
+    .checkbox:last-child {
+      margin-bottom: .5rem;
+    }
+  }
+
+  .checkbox-accordion {
+    .accordion--content {
+      // Adjust for checkbox focus outline.
+      margin: -4px -4px 0;
+      padding: 4px 4px 0;
+
+      transition: max-height .5s ease-in-out;
+      overflow: hidden;
+    }
+
+    .accordion--button {
+      &[aria-expanded=false] {
+        @include icon(chevron-down);
+      }
+
+      &[aria-expanded=true] {
+        @include icon(chevron-up);
+      }
+    }
+  }
+}
+
+.checkbox-filter__modal {
+  .tag-list-wrapper {
+    min-height: 2.2rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .tag-list {
+    .tag {
+      margin: 0;
+    }
+  }
+}

package/build/styleguide/sass/31-molecules/checkboxes-with-filter/_checkboxes-with-filter.scss

@@ -0,0 +1,84 @@
+.checkbox-filter {
+  .checkbox-filter__count-wrapper {
+    &.hidden {
+      @extend %visually-hidden
+    }
+
+    em {
+      font-style: normal;
+    }
+  }
+
+  .checkbox-filter__result-placeholder {
+    &.hidden {
+      display: none;
+    }
+  }
+}
+
+.checkbox-filter__modal {
+  .tag {
+    margin: 0 .5rem .5rem 0;
+  }
+
+  .checkbox-filter__filter__search-wrapper {
+    max-width: 30rem;
+
+    @include desktop {
+      display: flex;
+    }
+
+    input,
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  .checkbox-filter__filter {
+    margin-bottom: 1rem;
+  }
+
+  .checkbox-filter__result-wrapper {
+    &.hidden {
+      display: none;
+    }
+
+    em {
+      font-style: normal;
+    }
+
+    @include desktop {
+      margin-left: 1rem;
+      line-height: 2.4rem;
+      white-space: nowrap;
+    }
+  }
+
+  .checkbox-filter__checkboxes {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+
+    > .checkbox {
+      flex-basis: 320px;
+      padding-right: 1rem;
+    }
+
+    > .checkbox.full-width,
+    > .checkbox-filter__category {
+      flex-basis: 100%;
+    }
+
+    > [hidden] {
+      display: none;
+    }
+
+    & + .checkbox-filter__checkboxes {
+      margin-top: 1rem;
+    }
+  }
+
+  .checkbox-filter__selected {
+    margin-bottom: .7rem;
+  }
+}

package/build/styleguide/sass/31-molecules/contact-details/_contact-details.scss

@@ -0,0 +1,64 @@
+$avatar-width: 14rem;
+
+.contact-details {
+  &.highlight .highlight__inner {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > h2 {
+      width: 100%;
+    }
+
+    &::before {
+      @include spot-image('book-light', 7rem);
+    }
+  }
+
+  &.contact-details-inverted {
+    > .highlight__inner {
+      @include theme('border-color', 'color-primary--lighten-4', 'contact-details-border-color');
+      border-width: 2px 0;
+      border-style: solid;
+
+      [class*="cs--"] & {
+        background-color: transparent;
+      }
+
+      &::before {
+        @include spot-image('book', 7rem);
+        box-shadow: none;
+      }
+    }
+
+    .accolade {
+      &::before,
+      &::after {
+        @include theme('background', 'color-secondary', 'contact-details-inverted-background-color');
+      }
+    }
+  }
+
+  &-column {
+    flex-grow: 1;
+    width: 100%;
+
+    @include tablet {
+      width: span(6 of 12);
+      margin-right: $gutter-width;
+
+      &:last-of-type:not(:first-of-type) {
+        max-width: $avatar-width;
+        margin-right: 0;
+      }
+    }
+
+    .image-wrapper {
+      img {
+        @include tablet {
+          max-width: $avatar-width;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+.cta-block {
+
+  .highlight__inner {
+
+    li {
+      margin-top: .8rem;
+
+      &:first-of-type a {
+        @extend %button-primary;
+        @include button;
+        @include button-icon;
+      }
+
+      &:not(:last-of-type) {
+        @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
+
+        padding-bottom: .8rem;
+        border-bottom: 2px solid;
+      }
+    }
+  }
+
+  &--multiple {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-right: -1rem;
+    margin-left: -1rem;
+
+    > .cta-block {
+      flex: 1 0 20rem;
+      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/display-switcher/_display-switcher.scss

@@ -0,0 +1,16 @@
+.display-switcher {
+  margin-bottom: 1.6rem;
+
+  @include phablet {
+    display: flex;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+
+  > span {
+    display: block;
+    margin-right: .6rem;
+  }
+}

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

@@ -0,0 +1,12 @@
+.file-type {
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  .file-size {
+    text-transform: lowercase;
+  }
+
+  a + & {
+    margin-left: 1rem;
+  }
+}

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

@@ -0,0 +1,16 @@
+.file-upload {
+
+  ul.inline, /// @deprecated since 4.0.0
+  .tag-list-wrapper {
+    margin-top: .8rem;
+
+    li {
+      margin-right: .4rem;
+      margin-bottom: .4rem;
+    }
+  }
+
+  .button {
+    margin-bottom: .8rem;
+  }
+}

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

@@ -0,0 +1,17 @@
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0 -.6rem;
+
+  > input,
+  > button {
+    @include button-large;
+  }
+
+  > input,
+  > button,
+  > a[href] {
+    margin: 0 .6rem .6rem;
+  }
+}

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

@@ -0,0 +1,102 @@
+.form-item {
+  margin-bottom: 1.2rem;
+
+  > * {
+    max-width: 20.5rem;
+  }
+
+  @include desktop {
+    > * {
+      max-width: 41rem;
+    }
+
+    > .field-message,
+    > label {
+      max-width: 50%;
+    }
+  }
+
+  .field-message:not(.error):not(.success) {
+    margin-bottom: .4rem;
+  }
+
+  &:not(.stacked) {
+    .form-columns {
+      margin-bottom: 0;
+
+      @include desktop {
+        display: flex;
+
+        .form-item-column {
+          width: 50%;
+
+          &:last-child {
+            display: flex;
+            align-items: flex-start;
+
+            .field-message {
+              margin: 0 0 gutter()/2 .2rem;
+              padding: .7rem 1.2rem .7rem 3.9rem;
+
+              &::before {
+                top: .5rem;
+                left: 1.7rem;
+              }
+
+              .accolade {
+                right: auto;
+                bottom: 0;
+                left: 0;
+                width: 1rem;
+                height: 100%;
+                transform: rotate(0deg);
+
+                &::before,
+                &::after {
+                  width: 1rem;
+                  border: 0;
+                }
+
+                &::before {
+                  top: 0;
+                  bottom: 1.2rem;
+                  height: 1.2rem;
+                  border-radius: 0 0 border-radius("radius-4");
+                }
+
+                &::after {
+                  top: 1.2rem;
+                  right: 0;
+                  bottom: -1px;
+                  height: auto;
+                  border-radius: 0 border-radius("radius-4") 0 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.stacked {
+    > * {
+      max-width: none;
+    }
+
+    .form-columns {
+      flex-wrap: wrap;
+      margin-top: auto;
+    }
+
+    .form-columns .form-item-column {
+      width: 100%;
+      max-width: 40rem;
+
+      .field-message {
+        margin-top: .2rem;
+        margin-left: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + .8rem);
+  max-width: 21.3rem;
+  margin-right: -.4rem;
+  margin-left: -.4rem;
+
+
+  @include desktop {
+    width: calc(50% + .8rem);
+  }
+
+  > * {
+    flex-basis: calc((21.3rem - 100%) * 999);
+    flex-grow: 1;
+    margin-right: .4rem;
+    margin-left: .4rem;
+  }
+}

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

@@ -0,0 +1,189 @@
+.form-steps {
+  ol.form-steps-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    counter-reset: item;
+    list-style-type: none;
+
+    li {
+      display: inline-block;
+      margin-bottom: .8rem;
+
+      &:not(:first-child):not(:last-child):not(.active) {
+        @include desktop-and-below {
+          // clip
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          border: 0;
+          overflow: hidden;
+          // also hide from screenreaders
+          visibility: hidden;
+          clip: rect(0 0 0 0);
+        }
+      }
+
+      span > span,
+      a > span {
+        @include desktop-and-below {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          border: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+        }
+      }
+
+      a {
+        @include reset-link-background;
+        padding: 0;
+        vertical-align: middle;
+
+        &:hover,
+        &:focus {
+          background-color: transparent;
+
+          &::before {
+            @include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
+          }
+        }
+
+        > span {
+          @include link-background('color-primary', null, 'link-underline-color');
+          padding: 0 0 .2rem;
+        }
+      }
+
+      a::before,
+      > span::before {
+        @include theme('border-color', 'color-primary--lighten-5', 'form-step--active-border-color');
+        @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
+        @include theme('color', 'color-tertiary', 'default-text-color');
+        @include bold-text;
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        margin-right: .8rem;
+        transition: .2s ease-in-out;
+        border: 2px solid;
+        border-radius: 1rem;
+        font-size: .8rem;
+        content: counter(item);
+        counter-increment: item;
+      }
+
+      &.active {
+        @include bold-text;
+
+        > span::before {
+          @include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
+
+          background-color: transparent;
+        }
+      }
+
+      &.completed:not(.active) {
+        a,
+        > span {
+          @include icon(checkmark, before);
+        }
+
+        a::before,
+        > span::before {
+          border-color: color('green', -3);
+          background-color: color('green', -3);
+          font-size: 1.5rem;
+          line-height: 1.25;
+          vertical-align: middle;
+        }
+
+        a:hover,
+        a:focus {
+          &::before {
+            border-color: color('green', 1);
+          }
+        }
+      }
+
+      @include desktop-and-below {
+        &.active {
+          margin-bottom: 0;
+
+          ::before,
+          ::after {
+            margin-bottom: .8rem;
+          }
+
+          &::before,
+          &::after {
+            @include theme('border-color', 'color-primary--darken-2', 'form-step-hellip-background-color');
+            @include theme('background-color', 'color-primary--darken-2', 'form-step-hellip-background-color');
+            @include theme('color', 'color-secondary', 'form-step-hellip-color');
+
+            display: inline-block;
+            width: 2rem;
+            height: 2rem;
+            margin-right: .8rem;
+            margin-bottom: .8rem;
+            border: 2px solid;
+            border-radius: 1rem;
+            text-align: center;
+            content: '\2026';
+          }
+        }
+
+        &:first-child::before,
+        &:nth-child(2)::before,
+        &:nth-last-child(2)::after,
+        &:last-child::after {
+          content: none;
+        }
+      }
+    }
+  }
+
+  &:not(.vertical) ol.form-steps-list {
+    @include desktop {
+      li:not(:last-child)::after {
+        @include theme('border-color', 'color-primary--lighten-3', 'form-step--active-border-color');
+
+        display: inline-block;
+        width: .8rem;
+        margin: 0 .6rem;
+        border-bottom: 2px solid;
+        content: '';
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &.vertical ol.form-steps-list {
+    @include desktop {
+      flex-direction: column;
+
+      li {
+        margin-bottom: .6rem;
+
+        &:not(:last-child)::after {
+          @include theme('border-color', 'color-primary--lighten-3', 'form-step--active-border-color');
+
+          display: block;
+          width: 1rem;
+          height: .8rem;
+          margin: .6rem 0 0;
+          border-right: 2px solid;
+          content: '';
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+$gentinfo-icon-size: 8rem;
+
+.gentinfo {
+  @include theme('background-color', 'color-primary--lighten-5', 'gentinfo-background');
+  margin: 3rem 0;
+  padding: 2rem 1rem;
+
+  .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;
+    min-height: $gentinfo-icon-size + 2rem;
+    margin: 0 auto;
+    padding: 1.2rem;
+
+    &::before {
+      @include spot-image('gentinfo', $gentinfo-icon-size);
+      margin: 0 auto 1.5rem;
+    }
+
+    @include tablet {
+      padding: 2.3rem 2.3rem 2.3rem 20rem;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        left: 10rem;
+        margin-top: $gentinfo-icon-size / -2;
+        margin-bottom: 0;
+        margin-left: $gentinfo-icon-size / -2;
+      }
+    }
+  }
+
+  .gentinfo-logo {
+    max-width: 9.5rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .icon-list.inline {
+    > li {
+      margin-bottom: .5rem;
+    }
+  }
+}