gent_styleguide 6.0.0-alpha21 → 6.0.0-alpha22

package/build/styleguide/sass/00-settings/_vars.scss

@@ -63,7 +63,6 @@ $border-radius: (
 $z-layers: (
   'default': 1,
   'skiplink': 5,
-  'mijn-gent': 6,
   'language-switcher': 6,
   'boxes': (
     'spotimage': 1

package/build/styleguide/sass/11-base/fonts/_icons.scss

@@ -28,6 +28,7 @@ $id: random(1000);
   font-size: 1.2rem;
   font-variant: normal;
   font-weight: normal;
+  line-height: 100%;
   speak: none; // only necessary if not using the private unicode range (firstGlyph option)
   text-decoration: none;
   text-transform: none;

package/build/styleguide/sass/21-atoms/button/_button.scss

@@ -16,7 +16,9 @@
 /// @author Gert-Jan Meire
 ///
 @mixin button-small {
-  @include small-text;
+  @include medium-text();
+  padding: 4px 10px;
+  line-height: 175%;
 }
 
 ///
@@ -28,9 +30,8 @@
 /// @author Gert-Jan Meire
 ///
 @mixin button-medium {
-  @include medium-text;
-
-  padding: 10px 15px;
+  @include medium-text();
+  line-height: 175%;
 }
 
 ///
@@ -42,12 +43,12 @@
 /// @author Gert-Jan Meire
 ///
 @mixin button-large {
-  @include large-text;
-
+  @include large-text();
   padding: 10px 20px;
+  line-height: 177.778%;
 
   &::before {
-    font-size: .9rem;
+    font-size: 1.5rem;
   }
 }
 
@@ -61,13 +62,13 @@
 /// @author Thomas De Vriese
 ///
 @mixin button-extra-large {
-  @include extra-large-text;
+  @include large-text();
 
-  padding: 10px 26px;
-  line-height: 1.7;
+  padding: 25px 26px;
+  line-height: 177.778%;
 
   &::before {
-    font-size: 1.44rem;
+    font-size: 1.5rem;
   }
 }
 
@@ -107,7 +108,7 @@
   @include button-medium; // Default.
   @include bold-text;
 
-  padding: 10px;
+  padding: 8px 15px;
   font-family: $default-font-family;
   text-align: center;
   cursor: pointer;
@@ -189,21 +190,18 @@
   position: relative;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 10px;
-  line-height: 1.4rem;
   text-align: left;
 
   // Padding fix specificly for IE11.
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
     padding: .3em .8em 0 1.2em;
-    line-height: 1.6;
   }
 
   &::before {
     order: 1;
     margin-left: 8px;
     float: right; // Fix for IE11 flex order property.
-    line-height: 1.2rem;
+    font-size: 1.2rem;
   }
 }
 

package/build/styleguide/sass/21-atoms/link/_link.scss

@@ -75,7 +75,7 @@ a {
 
   &:not(.button):not(.tag)::after {
     position: absolute;
-    top: -5px;
+    margin-top: 4px;
     margin-left: 5px;
   }
 
@@ -90,6 +90,10 @@ a {
     &:hover {
       @include theme('color', 'color-primary--darken-2', 'link-hover-color');
     }
+
+    &::after {
+      margin-top: 2px;
+    }
   }
 
   &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back),
@@ -101,7 +105,6 @@ a {
   &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back) {
     @include icon(arrow-right, after);
     margin-right: 1.6rem;
-    white-space: nowrap;
   }
 
   ///
@@ -110,7 +113,6 @@ a {
   &[download]:not(.no-icon) {
     @include icon(download, after);
     margin-right: 1.6rem;
-    white-space: nowrap;
   }
 
   ///
@@ -119,7 +121,6 @@ a {
   &[href^="mailto:"]:not(.no-icon) {
     @include icon(envelope, after);
     margin-right: 1.6rem;
-    white-space: nowrap;
   }
 
   ///
@@ -128,7 +129,6 @@ a {
   &[href^="tel:"]:not(.no-icon) {
     @include icon(phone, after);
     margin-right: 1.6rem;
-    white-space: nowrap;
   }
 
   ///
@@ -138,7 +138,6 @@ a {
   &[href^="https://"]:not(.no-icon):not(.tag) {
     @include icon(arrow-right-top, after);
     margin-right: 1.6rem;
-    white-space: nowrap;
 
     &[download]:not(.button):not(.no-icon) {
       @include icon(download, after);
@@ -150,7 +149,6 @@ a {
     @include icon(arrow-left, after);
     margin-left: 1.6rem;
     padding-left: 0;
-    white-space: nowrap;
 
     &::after {
       position: absolute;

package/build/styleguide/sass/21-atoms/list/_list.scss

@@ -62,7 +62,7 @@ ol {
 
     li:not(:last-of-type)::after {
       display: inline;
-      padding: 0 .2rem 0 0;
+      padding: 0 4px 0 0;
       content: ',';
     }
 
@@ -73,11 +73,10 @@ ol {
 }
 
 ul {
-  margin-left: 1rem;
+  margin-left: 20px;
   list-style-type: square;
 
-  &.checkmark-list,
-  &.checkmark-list-small {
+  &.checkmark-list {
     @extend %list-no-style;
 
     margin-left: 0;
@@ -86,27 +85,15 @@ ul {
       @include icon('checkmark');
 
       position: relative;
-      padding-left: 1.6em;
+      padding-left: 32px;
 
       &::before {
         position: absolute;
         top: 0;
         left: 0;
-        margin-left: -.2em;
+        margin-left: -4px;
         font-size: 1.6rem;
-        line-height: 1.1;
-      }
-    }
-  }
-
-  &.checkmark-list-small {
-    li {
-      font-size: .8rem;
-      line-height: 2.4;
-
-      &::before {
-        font-size: 1.2rem;
-        line-height: 1.7;
+        line-height: 110%;
       }
     }
   }
@@ -114,26 +101,21 @@ ul {
   &.icon-list {
     @include large-text();
 
-    margin: 0 0 2rem;
+    margin: 0 0 40px;
     list-style-type: none;
 
     &.inline {
       li {
         align-items: center;
-        margin-right: .7rem;
+        margin-right: 13px;
         margin-bottom: 0;
-
-        i {
-          width: auto;
-          margin-right: .2rem;
-        }
       }
     }
 
     li {
       position: relative;
-      margin-bottom: .8rem;
-      padding-left: 1.6rem;
+      margin-bottom: 16px;
+      padding-left: 29px; // 24px icon size + 5px gutter.
       line-height: 1.5;
 
       &:last-child {
@@ -168,7 +150,6 @@ ul {
         position: absolute;
         top: 0;
         left: 0;
-        font-size: 1.5em;
         line-height: 1;
       }
     }

package/build/styleguide/sass/21-atoms/pubdate/_pubdate.scss

@@ -1,8 +1,14 @@
 time[pubdate] {
   @include small-text();
+  @include theme('color', 'color-zero', 'default-text-color');
+  line-height: 1.71;
 
   h1 + & {
-    margin-top: -1em;
-    margin-bottom: 1em;
+    display: block;
+    margin-top: 30px;
+  }
+
+  .dark-background & {
+    @include theme('color', 'color-none', 'default-text-color-inverse');
   }
 }

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

@@ -5,24 +5,24 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  padding: .7em .8em;
+  padding: 8px 15px;
   line-height: 1.1;
   text-decoration: none;
 
   &.filter {
-    @include theme('background-color', 'color-quaternary--lighten-2', 'tag-filter-background-color');
+    @include theme('background-color', 'color-tertiary-pastel', 'button-secondary-background');
 
-    padding-top: .4em;
-    padding-bottom: .4em;
+    padding-top: 3px;
+    padding-bottom: 3px;
 
     &:hover button {
       @include theme('background-color', 'color-quaternary', 'tag-close-button-background-hover');
     }
 
     button {
-      width: 1.1rem;
-      height: 1.1rem;
-      margin-left: .25rem;
+      width: 20px;
+      height: 20px;
+      margin-left: 5px;
       padding: 0;
       transition: background-color .2s ease-in-out;
       border: 0;
@@ -39,7 +39,7 @@ a.tag {
   @include theme('color', 'color-zero', 'tag-color');
   @include normal-text();
 
-  padding: .4em .8em;
+  padding: 8px 15px;
   border: 0;
 
   &:not([class*=icon])::before {
@@ -49,12 +49,16 @@ a.tag {
   &:hover {
     @include theme('background-color', 'color-secondary--lighten-1', 'tag-hover-background');
   }
+
+  &::after {
+    margin-left: 5px;
+  }
 }
 
 span.tag {
   @include small-text();
 
-  height: 1.5rem;
-  padding-right: .5rem;
-  padding-left: .5rem;
+  height: 30px;
+  padding-right: 10px;
+  padding-left: 10px;
 }

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

@@ -152,15 +152,9 @@ nav.menu {
       }
     }
 
-    .authentication  {
-      padding: 1.2rem 0;
-
-      .content {
-        padding: 0;
-      }
-    }
-
     .language-switcher {
+      display: block;
+
       ul {
         display: flex;
         flex-wrap: wrap;
@@ -174,18 +168,12 @@ nav.menu {
       }
     }
 
-    .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');
+        @include theme('border-color', 'color-primary--lighten-4');
         border-bottom: 2px solid;
       }
     }

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

@@ -11,10 +11,18 @@
   &.partner__multiple {
     @include desktop {
       flex-direction: row;
+      align-items: stretch;
       justify-content: center;
     }
 
+    .partner-content {
+      display: flex;
+      align-items: center;
+      min-height: 100%;
+    }
+
     .intro {
+
       @include desktop {
         min-width: 17.5rem;
       }

package/build/styleguide/sass/31-molecules/teaser/_teaser.scss

@@ -109,7 +109,12 @@
         line-height: 1;
 
         &::before {
+          display: block;
           font-size: 38px;
+
+          @include phablet {
+            margin-bottom: 20px;
+          }
         }
 
         @include phablet {
@@ -178,7 +183,7 @@
       order: 1;
       width: 100%;
       height: auto;
-      padding: 20px 50px 20px 20px;
+      padding: 20px 75px 20px 20px;
 
       h4 {
         margin: 0;

package/build/styleguide/sass/41-organisms/content-header/_content-header.scss

@@ -6,11 +6,11 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 3rem;
-  padding: 3rem 1rem;
+  margin-bottom: 60px;
+  padding: 60px 20px;
 
   @include tablet {
-    padding: 4.5rem 1rem;
+    padding: 90px 20px;
   }
 
   h1 {
@@ -18,29 +18,29 @@
   }
 
   &.image {
-    margin-bottom: calc(100vw - 6rem);
-    padding-bottom: 6rem;
+    margin-bottom: calc(100vw - 105px);
+    padding-bottom: 120px;
 
     @include tablet {
       flex-direction: row;
-      margin-bottom: 8rem;
-      padding-top: 4.5rem;
-      padding-bottom: 4.5rem;
+      margin-bottom: 80px;
+      padding-top: 90px;
+      padding-bottom: 90px;
     }
 
     @include desktop {
-      margin-bottom: 9.8rem;
+      margin-bottom: 196px;
     }
   }
 
   &.overlap {
-    padding-top: 3rem;
-    padding-bottom: 6rem;
+    padding-top: 60px;
+    padding-bottom: 120px;
 
     @include tablet {
       flex-direction: row;
-      padding-top: 4.5rem;
-      padding-bottom: 5.25rem;
+      padding-top: 90px;
+      padding-bottom: 105px;
     }
   }
 
@@ -53,21 +53,21 @@
     //padding-bottom: .1rem;
 
     h1 {
-      @include accolade('bottom', 'left', 5rem, 1.75rem, 'color-none', 'color-primary');
+      @include accolade('bottom', 'left', 100px, 35px, 'color-none', 'color-primary');
       @include theme('background-color', 'color-primary', 'content-header-accolade-text-background');
 
       display: inline;
-      padding: 0 .75rem;
+      padding: 0 15px;
       color: color('white');
       line-height: 1.1;
       box-decoration-break: clone;
     }
 
     &.breakout {
-      padding-bottom: 2.25rem;
+      padding-bottom: 45px;
 
       @include tablet {
-        padding-bottom: 2.75rem;
+        padding-bottom: 55px;
       }
 
       .left {
@@ -92,7 +92,7 @@
     max-width: $bp-max-content;
 
     @include tablet {
-      padding-right: 3rem;
+      padding-right: 60px;
     }
 
     h1 {
@@ -100,19 +100,28 @@
     }
 
     h4 {
-      margin: 3rem 0 1rem;
+      margin: 60px 0 20px;
     }
 
     .summary-text {
-      margin: 1.5rem 0 0;
+      margin: 30px 0 0;
+
+      p {
+        font-size: 1.1rem;
+        line-height: 1.81;
+      }
 
       p:last-of-type {
         margin-bottom: 0;
       }
     }
 
+    time + .summary-text {
+      margin: 10px 0 0;
+    }
+
     .tag-list-wrapper {
-      margin: 1rem 0 0;
+      margin: 20px 0 0;
 
       li,
       a {
@@ -132,9 +141,9 @@
     height: auto;
 
     @include tablet {
-      flex: 0 0 calc(47vw - 4rem);
+      flex: 0 0 calc(47vw - 80px);
       width: auto;
-      height: calc(47vw - 4rem - 9.5rem);
+      height: calc(47vw - 80px - 190px);
       text-align: right;
     }
 
@@ -143,29 +152,25 @@
       position: absolute;
       bottom: 0;
       width: 100%;
-      transform: translate(0, calc(100% - 4.5rem));
+      padding-right: 40px;
+      transform: translate(0, calc(100% - 90px));
 
       @include tablet {
         position: static;
         max-width: 31.5rem;
+        padding: 0;
         transform: none;
       }
 
       img {
         width: 100%;
         height: auto;
-        padding-right: 2rem;
-
-
-        @include tablet {
-          padding: 0;
-        }
       }
     }
 
     @media only screen and (min-width: 1400px) {
-      flex: 0 0 28.5rem;
-      height: calc(28.5rem - 9.5rem);
+      flex: 0 0 570px;
+      height: calc(570px - 190px);
     }
   }
 }