gent_styleguide 5.0.2 → 5.0.6

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

@@ -0,0 +1,103 @@
+.highlight {
+  position: relative;
+  font-size: .8rem;
+
+  .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 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: book camera download form letter link loupe mail newsletter phone upload whistle checklist;
+  @each $icon in $icons {
+    &.#{$icon} .highlight__inner::before {
+      @include spot-image($icon + '-light', 7rem);
+    }
+  }
+
+  .highlight__inner {
+    @include tablet-and-below {
+      padding-top: 5rem;
+    }
+
+    &::before {
+      @include spot-image('lightbulb-light', 7rem);
+      @include theme('color', 'color-primary', 'highlight-spot-shadow');
+
+      position:  absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      margin: auto;
+      border-radius: 50%;
+      box-shadow: 0 10px 35px -25px;
+      z-index: z('boxes', 'spotimage');
+    }
+  }
+}
+
+.highlight--left {
+  @include tablet {
+    padding-top: 0;
+  }
+
+  .highlight__inner {
+
+    @include tablet {
+      min-height: 11rem;
+      padding-left: 11rem;
+
+      &::before {
+        top: calc(50% - 3.5rem);
+        right: auto;
+        bottom: auto;
+        left: 2rem;
+      }
+    }
+  }
+}
+
+.highlight--top {
+  .highlight__inner {
+    @include tablet {
+      padding-right: 9rem;
+
+      &::before {
+        right: 2rem;
+        left: auto;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+.language-switcher {
+  display: flex;
+  position: relative;
+  justify-content: flex-end;
+
+  .accordion--button {
+    @include bold-text;
+
+    display: flex;
+    align-items: center;
+    border: 0;
+    background: transparent;
+    font-size: .8rem;
+    cursor: pointer;
+  }
+
+  .accordion--content {
+    @include theme('box-shadow', 'color-box-shadow-secondary-dark');
+
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: .5rem;
+    transition: max-height .3s ease-in-out;
+    border-radius: border-radius('radius-1');
+    background: color('white');
+    z-index: z('language-switcher');
+  }
+
+  .content {
+    padding: .4rem 1.6rem 0 .8rem;
+  }
+}

package/build/styleguide/sass/31-molecules/main-menu/_main-menu.scss

@@ -0,0 +1,193 @@
+nav.menu {
+  margin: 0;
+
+  button {
+    @include button-icon;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font-size: .8rem;
+
+    @include tablet {
+      display: none;
+    }
+
+    &::before {
+      order: 0;
+      margin-right: .5rem;
+      margin-left: 0;
+    }
+
+    &.toggle {
+      @include icon(hamburger);
+    }
+
+    &.close {
+      @include icon(cross);
+    }
+  }
+
+  ul {
+    @extend %list-no-style;
+    @include tablet-and-below {
+      display: none;
+    }
+
+    margin: 0;
+
+    li {
+      display: inline-block;
+      margin-right: 1rem;
+
+      a,
+      a[href^="mailto:"],
+      a[download],
+      a[href^="http://"],
+      a[href^="https://"] {
+        @include reset-link-background;
+        @include link-underlined;
+
+        margin-bottom: 0;
+        padding: .5rem 0;
+      }
+
+      a.active {
+        @include bold-text;
+      }
+    }
+  }
+}
+
+.modal.menu {
+  @include tablet {
+    display: none;
+  }
+
+  .modal-inner {
+    .modal-header {
+      position: absolute;
+      right: 0;
+      margin-top: 1rem;
+      margin-right: .5rem;
+      z-index: 7;
+    }
+  }
+
+  .modal-content {
+    flex: 1;
+    padding: 0;
+
+    .header {
+      position: relative;
+      margin: .6rem $gutter-width 1.6rem;
+
+      &::before,
+      &::after {
+        @include theme('border-color', 'color-primary--lighten-4', 'header-border-bottom');
+
+        position: absolute;
+        top: 100%;
+        width: 100%;
+        height: 1rem;
+        margin-top: .6rem;
+        border-top: 2px solid;
+        content: '';
+      }
+
+      &::before {
+        left: -$gutter-width;
+        width: 3rem + $gutter-width;
+        border-right: 2px solid;
+        border-top-right-radius: border-radius('radius-4');
+      }
+
+      &::after {
+        right: -$gutter-width;
+        // viewport - ::before + border-width + gutter-width
+        width: calc(100% - 3rem + 2px + #{$gutter-width});
+        border-left: 2px solid;
+        border-top-left-radius: border-radius('radius-4');
+      }
+
+      button {
+        position: absolute;
+        right: 0;
+        margin-top: .25rem;
+      }
+    }
+
+    .menu-links {
+      ul {
+        @extend %list-no-style;
+        margin: 0;
+
+        li {
+          @include tablet {
+            display: inline-block;
+            margin-right: 1rem;
+          }
+
+          margin-bottom: .8rem;
+
+          &:first-child {
+            margin-top: .8rem;
+          }
+
+          a,
+          a[href^="mailto:"],
+          a[download],
+          a[href^="http://"],
+          a[href^="https://"] {
+            @include reset-link-background;
+            @include link-underlined;
+
+            padding: .5rem 0;
+            line-height: 1.4rem;
+          }
+
+          a.active {
+            @include bold-text;
+          }
+        }
+      }
+    }
+
+    .authentication  {
+      padding: 1.2rem 0;
+
+      .content {
+        padding: 0;
+      }
+    }
+
+    .language-switcher {
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0;
+        padding: .6rem 0;
+
+        li {
+          padding: .6rem;
+        }
+      }
+    }
+
+    .authentication,
+    .language-switcher {
+      display: block;
+    }
+
+    .menu-links,
+    .authentication,
+    .language-switcher {
+      margin: 0 1.2rem;
+
+      &:not(:last-child) {
+        @include theme('border-color', 'color-primary--lighten-4', 'mijn_gent-border-color');
+        border-bottom: 2px solid;
+      }
+    }
+  }
+}

package/build/styleguide/sass/31-molecules/mijn-gent-block/_authentication.scss

@@ -0,0 +1,157 @@
+.authentication {
+  display: flex;
+  position: relative;
+  justify-content: flex-end;
+
+  .avatar {
+    @include bold-text;
+
+    flex-shrink: 0;
+    width: 2.3rem;
+    height: 2.3rem;
+    border-radius: 50%;
+    background-color: #29cfc9;
+    color: #fff;
+    font-size: 1.3rem;
+    line-height: 2.3rem;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .login-link {
+    @include icon(user, before);
+
+    position: relative;
+    margin-left: 1.6rem;
+    line-height: 1;
+    text-overflow: ellipsis;
+
+    &::before {
+      @include theme('color', 'color-tertiary', 'login-link-icon-color');
+
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -1.6rem;
+    }
+  }
+
+  img {
+    border-radius: 50%;
+  }
+
+  .accordion--button {
+    display: flex;
+    align-items: center;
+    border: 0;
+    background: transparent;
+    font-size: .8rem;
+    cursor: pointer;
+
+    * {
+      vertical-align: middle;
+    }
+
+    img {
+      width: 2.3rem;
+      height: 2.3rem;
+      object-fit: cover;
+    }
+
+    span {
+      @include bold-text;
+
+      display: none;
+      max-width: 160px;
+      padding: 0 .5em;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      @include tablet {
+        display: inline-block;
+      }
+    }
+
+    &::before {
+      line-height: 0;
+    }
+
+    span.avatar {
+      display: block;
+    }
+  }
+
+  .accordion--content {
+    @include theme('box-shadow', 'color-box-shadow-secondary-dark');
+
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: calc(100vw - 2 * #{$gutter-width});
+    max-width: $bp-mobile;
+    margin-top: .5rem;
+    transition: max-height .3s ease-in-out;
+    border-radius: border-radius('radius-1');
+    background: color('white');
+    z-index: z('mijn-gent');
+  }
+
+  .content {
+    padding: 1.2rem;
+
+    h2 {
+      @extend %h3;
+    }
+
+    > h2 {
+      margin-bottom: 0;
+    }
+
+    section {
+      @include theme('border-color', 'color-primary--lighten-4', 'mijn_gent-border-color');
+
+      padding: .6rem 0;
+      border-top: 2px solid;
+
+      .links {
+        margin: 0;
+
+        ///
+        /// All links shouldn't have an indicator.
+        ///
+        a {
+          @include reset-link-background;
+          @include link-underlined;
+        }
+      }
+    }
+
+    .profile {
+      display: flex;
+      padding-bottom: 1rem;
+      border-top: 0;
+
+      &-info {
+        span {
+          display: block;
+          font-size: .7rem;
+        }
+      }
+
+      img {
+        align-self: flex-start;
+        width: 3.3rem;
+        height: 3.3rem;
+        margin-right: $gutter-width;
+        object-fit: cover;
+      }
+
+      .avatar {
+        width: 3.3rem;
+        height: 3.3rem;
+        margin-right: 1.2rem;
+        line-height: 3.3rem;
+      }
+    }
+  }
+}

package/build/styleguide/sass/31-molecules/modal/_modal.scss

@@ -0,0 +1,204 @@
+// Needed for smooths scrolling on iphone / ipad inside modals.
+// Placing it on .modal is not sufficient for safari.
+* {
+  -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
+}
+
+.modal {
+  @include tablet-and-below {
+    background-color: color('white');
+  }
+
+  @include tablet {
+    animation: fade .2s ease-in-out;
+  }
+
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-height: 100vh;
+  visibility: hidden;
+  z-index: z('modal', 'base');
+  overflow-y: auto;
+
+  // states
+  &.visible {
+    visibility: visible;
+
+    @include tablet {
+      .modal-overlay {
+        display: block;
+      }
+    }
+  }
+
+  // modifiers
+  &.modal--fixed-height {
+    &.visible > .modal-inner {
+      max-height: 80vh;
+
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // sass-lint:disable-line no-vendor-prefixes
+        height: 80vh; // IE fix
+      }
+    }
+
+    > .modal-inner {
+      > .modal-content {
+        flex-grow: 1;
+        margin-bottom: 3.8rem;
+        z-index: z('modal', 'inner');
+        overflow-y: auto;
+      }
+
+      > .modal-actions {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        margin-top: -3.8rem;
+
+        @include tablet {
+          position: static;
+        }
+      }
+    }
+  }
+
+  // children
+  &.visible .modal-inner {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100%;
+    margin: 0 auto;
+    z-index: z('modal', 'content');
+    filter: drop-shadow(0 2px 8px #{color('dark-gray', -4, true)});
+
+    @include tablet {
+      right: 0;
+      width: $bp-max-content * .8;
+      max-width: calc(100% - #{$gutter-width * 2});
+      height: auto;
+      min-height: 0;
+      margin: 10vh auto 0;
+      padding-bottom: $gutter-width;
+      opacity: 0;
+      animation: fade .2s ease-in-out forwards;
+      animation-delay: .1s;
+    }
+
+    > * {
+      background-color: color('white');
+
+      &:first-of-type {
+        border-top-left-radius: border-radius('radius-2');
+        border-top-right-radius: border-radius('radius-2');
+      }
+
+      &:last-of-type {
+        border-bottom-left-radius: border-radius('radius-2');
+        border-bottom-right-radius: border-radius('radius-2');
+      }
+    }
+  }
+
+  ///
+  /// Header
+  ///
+  &-header {
+    display: block;
+    flex-shrink: 0;
+    text-align: right;
+  }
+
+  &-header &-close {
+    padding: 0 .4rem;
+    border: 0;
+    background: transparent;
+    color: color('dark-gray');
+    font-size: .8rem;
+    font-weight: 400;
+    cursor: pointer;
+
+    &::before {
+      order: 0;
+      margin: 0 .5rem 0 0;
+      font-size: 1.4rem;
+    }
+
+    &:hover,
+    &:focus {
+      @include theme('background-color', 'color-primary--lighten-4', 'modal-close-hover-bg-color');
+    }
+  }
+
+  &-close {
+    cursor: pointer;
+  }
+
+  ///
+  /// Content
+  ///
+  &-content {
+    padding: 0 1rem .8rem;
+
+    @include tablet {
+      padding: 0 $gutter-width .8rem;
+    }
+  }
+
+  ///
+  /// Actions
+  ///
+  &-actions {
+    @include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom');
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: 100%;
+    padding: .8rem 1rem;
+    border-top: 2px solid;
+    background-color: color('white');
+    z-index: z('modal', 'actions');
+
+    @include tablet {
+      position: relative;
+    }
+  }
+
+  ///
+  /// Overlay
+  ///
+  .modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .7;
+    z-index: z('modal', 'overlay');
+
+    &,
+    &:hover,
+    &:focus {
+      @include theme('background-color', 'color-primary--darken-3', 'modal-overlay-background-color');
+    }
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}