gent_styleguide 6.0.0-alpha21 → 6.0.0-alpha23

package/build/styleguide/sass/00-mixins/element-styles/_read-more-icon-link.scss

@@ -31,7 +31,7 @@
   &::after {
     display: block;
     position: relative;
-    top: -1.1rem;
+    top: -1rem;
     left: .25rem;
     text-indent: 0;
   }

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/base/_base.scss

@@ -9,6 +9,7 @@
 }
 
 html {
+  height: 100%;
   background: color('white');
   font: $default-font-weight $default-font-size $default-font-family;
   line-height: $default-line-height;
@@ -25,6 +26,7 @@ body {
   }
 
   position: relative;
+  min-height: 100%;
 }
 
 ::selection {

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

@@ -13,7 +13,7 @@ ol {
     margin: 0 0 10px;
 
     &:last-child {
-      margin: 0;
+      margin-right: 0;
     }
   }
 
@@ -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/logo/_logo.scss

@@ -6,9 +6,19 @@ a.site-logo {
   font-size: 0;
 
   &::before {
-    @include spot-image('logo', 4rem);
-    min-width: 4rem;
-    height: 3rem;
+    @include spot-image('logo', 80px);
+    width: 63.3px;
+    height: 44px;
+
+    .is-frontpage & {
+      width: 63.3px;
+      height: 44px;
+
+      @include tablet {
+        width: 92px;
+        height: 64px;
+      }
+    }
   }
 
   &:hover,
@@ -23,7 +33,7 @@ a.site-logo {
 
     &::before {
       @include tablet {
-        margin-right: .7rem;
+        margin-right: 14px;
       }
     }
   }

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/breadcrumbs/_breadcrumbs.scss

@@ -1,4 +1,5 @@
 .breadcrumb {
+  margin: 0 0 20px;
   clear: both;
 
   ul,
@@ -12,6 +13,7 @@
       display: inline-flex;
       align-items: center;
       margin-right: .4rem;
+      margin-bottom: 0;
 
       &::before {
         display: none;

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/status-message/_status-message.scss

@@ -3,13 +3,13 @@
   @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;
+  $status-message-icon-size: 2rem;
 
   display: flex;
   position: relative;
   flex-direction: column;
-  max-width: 40rem;
-  margin-top: 1rem;
+  max-width: 970px;
+  margin-top: 20px;
   margin-right: 0;
   margin-bottom: 1rem;
   padding: 2rem;
@@ -24,10 +24,14 @@
     width: $status-message-icon-size;
     margin-right: 0;
     margin-bottom: 1rem;
-    font-size: 2rem;
+    font-size: $status-message-icon-size;
     line-height: $status-message-icon-size;
     text-align: center;
 
+    &::before {
+      font-size: $status-message-icon-size;
+    }
+
     @include phablet {
       align-self: flex-start;
     }

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;