gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

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

@@ -79,7 +79,7 @@ nav.menu {
 
     .header {
       position: relative;
-      margin: .6rem $gutter-width 1.6rem;
+      margin: 12px $gutter-width 32px;
 
       &::before,
       &::after {
@@ -89,14 +89,14 @@ nav.menu {
         top: 100%;
         width: 100%;
         height: 1rem;
-        margin-top: .6rem;
+        margin-top: 12px;
         border-top: 2px solid;
         content: '';
       }
 
       &::before {
         left: -$gutter-width;
-        width: 3rem + $gutter-width;
+        width: 60px + $gutter-width;
         border-right: 2px solid;
         border-top-right-radius: border-radius('radius-4');
       }
@@ -104,7 +104,7 @@ nav.menu {
       &::after {
         right: -$gutter-width;
         // viewport - ::before + border-width + gutter-width
-        width: calc(100% - 3rem + 2px + #{$gutter-width});
+        width: calc(100% - 60px + 2px + #{$gutter-width});
         border-left: 2px solid;
         border-top-left-radius: border-radius('radius-4');
       }
@@ -112,7 +112,7 @@ nav.menu {
       button {
         position: absolute;
         right: 0;
-        margin-top: .25rem;
+        margin-top: 5px;
       }
     }
 

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

@@ -82,8 +82,6 @@
   }
 
   .accordion--content {
-    @include theme('box-shadow', 'color-box-shadow-secondary-dark');
-
     position: absolute;
     top: 100%;
     right: 0;
@@ -91,7 +89,6 @@
     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');
   }

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

@@ -6,7 +6,7 @@
 
 .modal {
   @include tablet-and-below {
-    background-color: color('white');
+    @include theme('background-color', 'color-none', 'modal-background');
   }
 
   @include tablet {
@@ -48,7 +48,7 @@
     > .modal-inner {
       > .modal-content {
         flex-grow: 1;
-        margin-bottom: 3.8rem;
+        margin-bottom: 76px;
         z-index: z('modal', 'inner');
         overflow-y: auto;
       }
@@ -77,11 +77,10 @@
     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;
+      width: 48.5rem;
       max-width: calc(100% - #{$gutter-width * 2});
       height: auto;
       min-height: 0;
@@ -93,7 +92,7 @@
     }
 
     > * {
-      background-color: color('white');
+      @include theme('background-color', 'color-none', 'modal-inner-background');
 
       &:first-of-type {
         border-top-left-radius: border-radius('radius-2');
@@ -116,39 +115,20 @@
     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;
+    padding: 0 $gutter-width 16px;
 
     @include tablet {
-      padding: 0 $gutter-width .8rem;
+      padding: 16px 70px 60px;
+    }
+
+    p {
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -157,14 +137,14 @@
   ///
   &-actions {
     @include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom');
+    @include theme('background-color', 'color-none', 'modal-action-background-color');
 
     display: flex;
     flex-shrink: 0;
     align-items: center;
     width: 100%;
-    padding: .8rem 1rem;
-    border-top: 2px solid;
-    background-color: color('white');
+    margin-top: -15px;
+    padding: 0 70px 60px;
     z-index: z('modal', 'actions');
 
     @include tablet {
@@ -182,13 +162,13 @@
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: .7;
+    opacity: .9;
     z-index: z('modal', 'overlay');
 
     &,
     &:hover,
     &:focus {
-      @include theme('background-color', 'color-primary--darken-3', 'modal-overlay-background-color');
+      @include theme('background-color', 'color-tertiary-light', 'modal-overlay-background-color');
     }
   }
 }

package/build/styleguide/sass/31-molecules/partner-block/_partner-block.scss

@@ -1,40 +1,88 @@
 .partner-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 1rem;
 
-  .highlight__inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem gutter();
+  @include desktop {
+    padding: 0 6.75rem;
+  }
 
-    @include tablet {
-      padding: 2rem 5.5rem;
+  &.partner__multiple {
+    @include desktop {
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .intro {
+      @include desktop {
+        min-width: 17.5rem;
+      }
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .partners {
+      @include theme('border-color', 'color-primary-light', 'partner-intro-border');
+
+      margin: 2.25rem 0 0 ;
+      padding: 2.25rem 0 0;
+      border-top-width: .1rem;
+      border-top-style: solid;
+
+      @include desktop {
+        margin: 0 0 0 3rem;
+        padding: 0 0 0 3rem;
+        border-top: 0;
+        border-left-width: .1rem;
+        border-left-style: solid;
+      }
     }
   }
 
-  p {
+  &.partner__single {
     text-align: center;
+
+    .intro {
+      p:last-child {
+        margin-bottom: 1.5rem;
+      }
+    }
+  }
+
+  h2 {
+    margin-bottom: 30px;
   }
 
-  .partners ul.inline {
-    display: flex;
+  ul {
     align-items: center;
-    justify-content: space-evenly;
-    margin-top: 2.2rem;
+    gap: 1.5rem 3rem; // sass-lint:disable-line no-misspelled-properties
 
     li {
-      width: calc(50% - #{gutter()});
-      margin: 0 gutter()*.5 gutter();
-      text-align: center;
+      flex: 0 1 calc(100% / 3 - 3rem);
+      width: calc(100% /3);
+      margin: 0;
 
-      @include tablet {
-        width: calc(25% - #{gutter()});
+      @include desktop {
+        flex: 0 1 calc(100% / 4 - 3rem);
+        min-width: 5rem;
       }
     }
   }
 
-  .single-partner {
-    width: 9rem;
-    max-width: 100%;
-    margin: 1.5rem 0 1.2rem;
+  a {
+    display: block;
+    border: 0;
+  }
+
+  figure {
+    min-width: 3.5rem;
+    max-width: 7.5rem;
+
+    @include desktop {
+      max-width: 10rem;
+    }
   }
 }

package/build/styleguide/sass/31-molecules/quote/_quote.scss

@@ -3,13 +3,7 @@
 }
 
 .quote {
-  @include theme('border-color', 'color-primary--lighten-4', 'quote-border-color');
-  margin-top: 3.5rem;
-  border-top: 2px solid;
-
-  @include desktop {
-    margin-top: 0;
-  }
+  margin: 2rem 0;
 }
 
 blockquote {
@@ -18,25 +12,23 @@ blockquote {
   display: flex;
   position: relative;
   flex-direction: column;
-  font-size: .8rem;
-  text-align: center;
+  padding-top: 3.5rem;
+  font-size: 1.2rem;
 
   @include desktop {
-    padding-top: 1.5rem;
-    padding-left: 11.2rem;
-    font-size: .9rem;
-    text-align: left;
+    padding-top: 3.5rem;
+    font-size: 1.5rem;
   }
 
   &::before {
-    @include spot-image('quote', 7rem);
-    margin: -3.5rem auto .8rem;
+    @include spot-image('quote', 2rem);
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
 
     @include desktop {
-      position: absolute;
-      top: 1.5rem;
-      left: 1rem;
-      margin: 0;
+      @include spot-image('quote', 2.75rem);
     }
   }
 
@@ -45,42 +37,16 @@ blockquote {
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
+    line-height: 2.25rem;
 
     @include desktop {
       min-height: 7.8rem;
     }
   }
 
-  p {
-    &:first-of-type::before {
-      content: '\201C';
-    }
-
-    &:last-of-type::after {
-      content: '\201D';
-    }
-  }
-
-
   footer {
-    position: relative;
-    padding-top: 1.6rem;
-    font-style: italic;
-    font-weight: 500;
-    text-align: center;
-
-    &::before {
-      @include theme('background-image', 'accolade-stroke-light', 'quote-accolade-stroke');
-
-      display: block;
-      position: absolute;
-      top: -.1rem;
-      right: 0;
-      left: 0;
-      height: 1.1rem;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-      content: '';
-    }
+    @include accolade('top', 'left');
+    @include large-text;
+    @include normal-text;
   }
 }

package/build/styleguide/sass/31-molecules/search/_search.scss

@@ -12,11 +12,8 @@
   }
 
   input {
-    margin-bottom: .5rem;
-
     &:not([type="submit"]) {
       flex: 1 1 $bp-mobile;
-      margin-right: .4rem;
     }
   }
 
@@ -25,8 +22,7 @@
   }
 
   input[type="submit"] {
-    @include button-large;
-    margin-right: 0;
+    @include button-medium;
   }
 }
 
@@ -35,7 +31,7 @@
 
   &,
   &:focus {
-    @include theme-content('color-primary', 'link-color') {
+    @include theme-content('color-zero') {
       background: svg-as-background('search', $theme-color, 32, 32) no-repeat left .4rem center;
     };
   }

package/build/styleguide/sass/31-molecules/spotlight/_spotlight.scss

@@ -0,0 +1,59 @@
+.cta-block.spotlight {
+  h1 {
+    margin-bottom: 1.5rem;
+  }
+
+  .links {
+    margin-top: 1.5rem;
+  }
+
+  &.image-left {
+    margin-bottom: 2rem;
+
+    .cta-block__image {
+      margin-right: 0;
+    }
+
+    .cta-block__content {
+      top: 0;
+      left: 0;
+
+      @include phablet {
+        top: auto;
+        bottom: 0;
+        left: -4.5rem;
+
+        .feature-block {
+          width: calc(100% + 4.5rem);
+        }
+      }
+    }
+  }
+
+  &.image-right {
+    margin-bottom: 2rem;
+
+    @include phablet {
+      flex-direction: row-reverse;
+    }
+
+    .cta-block__image {
+      margin-left: 0;
+    }
+
+    .cta-block__content {
+      top: 0;
+      margin-right: 0;
+
+      @include phablet {
+        top: auto;
+        bottom: 0;
+        margin-right: inherit;
+
+        .feature-block {
+          width: calc(100% + 4.5rem);
+        }
+      }
+    }
+  }
+}

package/build/styleguide/sass/31-molecules/status-message/_status-message.scss

@@ -1,34 +1,30 @@
 %messages,
 .messages {
-  @include theme('color', 'color-tertiary--lighten-1', 'status-messages-color');
-  @include theme('background-color', 'color-info--lighten-5', 'status-messages-info-background');
+  @include theme('background-color', 'color-info-light', 'info-message-background');
+  @include theme('border-color', 'color-info', 'info-message-icon-color');
 
   $status-message-icon-size: 2.1rem;
 
   display: flex;
   position: relative;
   flex-direction: column;
-  align-items: center;
   max-width: 40rem;
   margin-top: 1rem;
   margin-right: 0;
   margin-bottom: 1rem;
-  padding: 1rem 1.2rem;
-  border-radius: border-radius('radius-1');
-  font-size: .8rem;
-  text-align: center;
+  padding: 2rem;
+  border-bottom: 3px solid;
+  font-size: .9rem;
 
   i {
-    @include theme('color', 'color-info', 'status-messages-info-icon');
+    @include theme('color', 'color-info', 'info-message-icon-color');
 
     display: block;
     flex: 0 0 $status-message-icon-size;
     width: $status-message-icon-size;
     margin-right: 0;
     margin-bottom: 1rem;
-    border-radius: 100%;
-    background-color: color('white');
-    font-size: 1.5rem;
+    font-size: 2rem;
     line-height: $status-message-icon-size;
     text-align: center;
 
@@ -39,8 +35,7 @@
 
   @include phablet {
     flex-direction: row;
-    align-items: center;
-    text-align: initial;
+    padding: 3rem;
 
     i {
       margin-right: 1.2rem;
@@ -49,38 +44,41 @@
   }
 
   &.messages--status {
-    @include theme('background-color', 'color-success--lighten-4', 'status-messages-success-background-color');
+    @include theme('background-color', 'color-success-light', 'success-message-background');
+    @include theme('border-color', 'color-success', 'success-message-icon-color');
 
     i {
-      @include theme('color', 'color-success', 'status-messages-success-icon');
+      @include theme('color', 'color-success', 'success-message-icon-color');
     }
 
     a {
-      @include link-background('color-tertiary', 'color-success--lighten-3', 'status-messages-link-border-color', 'status-messages-success-link-background-color');
+      @include link-background('color-zero', 'color-success-light--darken-1');
     }
   }
 
   &.messages--error {
-    @include theme('background-color', 'color-error--lighten-4', 'status-messages-error-background-color');
+    @include theme('background-color', 'color-error-light', 'error-message-background');
+    @include theme('border-color', 'color-error', 'error-message-icon-color');
 
     i {
-      @include theme('color', 'color-error', 'status-messages-error-icon');
+      @include theme('color', 'color-error', 'error-message-icon-color');
     }
 
     a {
-      @include link-background('color-tertiary', 'color-error--lighten-3', 'status-messages-link-border-color', 'status-messages-error-link-background-color');
+      @include link-background('color-zero', 'color-error-light--darken-1');
     }
   }
 
   &.messages--warning {
-    @include theme('background-color', 'color-warning--lighten-4', 'status-messages-warning-background-color');
+    @include theme('background-color', 'color-warning-light', 'warning-message-background');
+    @include theme('border-color', 'color-warning', 'warning-message-icon-color');
 
     i {
-      @include theme('color', 'color-warning', 'status-messages-warning-icon');
+      @include theme('color', 'color-warning', 'warning-message-icon-color');
     }
 
     a {
-      @include link-background('color-tertiary', 'color-warning--lighten-3', 'status-messages-link-border-color', 'status-messages-warning-link-background-color');
+      @include link-background('color-zero', 'color-warning-light--darken-1');
     }
   }
 
@@ -89,12 +87,12 @@
   }
 
   a {
-    @include link-background('color-tertiary', 'color-info--lighten-4', 'status-messages-link-border-color', 'status-messages-info-link-background-color');
-    @include theme('border-color', 'color-tertiary', 'status-messages-link-border-color');
-    @include theme('color', 'color-tertiary--lighten-1', 'status-messages-color');
+    @include link-background('color-zero', 'color-info-light--darken-1');
+    @include theme('border-color', 'color-zero');
+    @include theme('color', 'color-zero');
 
     &:hover {
-      @include theme('color', 'color-tertiary', 'status-messages-link-hover-color');
+      @include theme('color', 'color-zero');
     }
   }
 }

package/build/styleguide/sass/31-molecules/subscribe/_subscribe.scss

@@ -7,10 +7,12 @@
   label {
     width: 100%;
     max-width: 100%;
+    color: color('gray');
   }
 
   input {
     margin-bottom: .5rem;
+    border: 0;
   }
 
   input[type="email"] {
@@ -19,6 +21,6 @@
   }
 
   input[type="submit"] {
-    @include button-large;
+    @include button-medium;
   }
 }

package/build/styleguide/sass/31-molecules/table-of-contents/_table-of-contents.scss

@@ -1,28 +1,33 @@
 .table-of-contents {
-  margin-bottom: 2rem;
+  @include theme('background-color', 'color-tertiary-light', 'table-of-contents-background-color');
+  @include medium-text;
+  padding: 1.5rem;
 
-  ul > li {
-    display: block;
-    width: 100%;
-    margin-right: 0;
+  h4 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
 
-    @include phablet {
-      display: inline-block;
-      width: auto;
-    }
+  ul {
+    // Override general bigger list style.
+    @include medium-text();
+    margin: 0;
+    columns: 1;
 
-    &::after {
-      @include phablet {
-        @include theme('color', 'color-primary--lighten-3', 'filter-nav-longdash-color');
+    @include phablet {
+      &.two-column {
+        columns: 2;
+      }
 
-        display: inline-block;
-        padding: 0 .2rem;
-        content: '—';
+      &.three-column {
+        columns: 3;
       }
     }
+  }
 
-    &:last-child::after {
-      content: '';
-    }
+  ul > li {
+    display: block;
+    width: 100%;
+    margin-bottom: 15px;
   }
 }

package/build/styleguide/sass/31-molecules/tag-list/_tag-list.scss

@@ -6,11 +6,10 @@
     list-style: none;
 
     li {
-      margin: .2rem;
+      margin: .25rem;
     }
 
     a {
-      @include bold-text;
       white-space: nowrap;
     }
   }