gent_styleguide 6.0.0-beta2 → 6.0.0-beta21

package/build/styleguide/sass/21-atoms/heading/_heading.scss

@@ -15,8 +15,19 @@ h5,
 %h5 {
   @include bold-text;
 
+  margin-top: 40px;
   font-style: normal;
 
+  &:first-child {
+    margin-top: 0;
+  }
+
+  // If the heading is preceded by any empty first-child element, strip its top
+  // margin.
+  *:first-child:empty + & {
+    margin-top: 0;
+  }
+
   button {
     display: flex;
     padding: 0;
@@ -37,23 +48,58 @@ h5,
 h1,
 .h1,
 %h1 {
-  margin: 0 0 30px;
+  margin-bottom: 20px;
+
+  & + h2,
+  & + .h2 {
+    margin-top: 0;
+  }
 }
 
 h2,
 .h2,
 %h2 {
-  margin: 0 0 20px;
+  margin-bottom: 15px;
+
+  @include mobile {
+    margin-bottom: 20px;
+  }
+
+  & + h3,
+  & + .h3 {
+    margin-top: 0;
+  }
 }
 
 h3,
 .h3,
-%h3,
+%h3 {
+  margin-bottom: 15px;
+
+  & + h4,
+  & + .h4 {
+    margin-top: 0;
+  }
+}
+
 h4,
 .h4,
-%h4,
+%h4 {
+  margin-bottom: 15px;
+
+  & + h5,
+  & + .h5 {
+    margin-top: 0;
+  }
+}
+
 h5,
 .h5,
 %h5 {
-  margin: 0 0 15px;
+  margin-bottom: 15px;
+
+  & + h6,
+  & + .h6 {
+    margin-top: 0;
+  }
 }

package/build/styleguide/sass/21-atoms/heading/css/_background-title.scss

@@ -11,21 +11,21 @@ h6,
 .h5,
 .h6 {
   &[class*="bg-"] {
-    span {
-      padding: .125rem .5rem;
+    > span {
+      padding: 2.5px 10px;
       box-decoration-break: clone;
     }
   }
 
   &.bg-primary {
-    span {
+    > span {
       @include theme('color', 'color-none', 'heading-with-bg-color');
       @include theme('background-color', 'color-primary', 'heading-with-bg-background-color');
     }
   }
 
   &.bg-none {
-    span {
+    > span {
       @include theme('color', 'color-zero', 'heading-with-white-bg-color');
       @include theme('background-color', 'color-none', 'heading-with-white-bg-background-color');
     }
@@ -35,8 +35,8 @@ h6,
 h1,
 .h1 {
   &[class^="bg-"] {
-    span {
-      padding: .15rem .75rem;
+    > span {
+      padding: 3px 15px;
     }
   }
 }

package/build/styleguide/sass/21-atoms/heading/css/_overview-title.scss

@@ -6,7 +6,9 @@ h5,
 h6 {
   &.overview-title {
     @extend %h2;
+
     max-width: 100%;
+    margin-top: 0;
     margin-bottom: 45px;
   }
 }

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

@@ -9,6 +9,7 @@ a {
   position: relative;
   text-decoration: none;
   word-wrap: break-word;
+  word-break: break-word;
 
   &::before,
   &::after {
@@ -49,8 +50,8 @@ a {
 
     &[download] {
       &:not(.no-icon):not(.tag),
-      &[href^="http://"],
-      &[href^="https://"] {
+      &[href^="http://"]:not([href*="gent.be"]),
+      &[href^="https://"]:not([href*="gent.be"]) {
         @include button-icon;
         @include icon(download, 'after');
 
@@ -72,8 +73,8 @@ a {
   }
 
   &.button:not(.no-icon):not([class^="icon-"]):not([download]) {
-    &[href^="http://"],
-    &[href^="https://"] {
+    &[href^="http://"]:not([href*="gent.be"]),
+    &[href^="https://"]:not([href*="gent.be"]) {
       @include button-icon;
       @include icon(arrow-right-top, 'after');
     }
@@ -93,13 +94,16 @@ a {
 
   }
 
-  &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back):not(.refresh),
-  &.button:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([class*="icon-"]) {
+  &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([href*="gent.be"]):not(.back):not(.refresh),
+  &.button:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([class*="icon-"]),
+  &.standalone-link[href*="gent.be"],
+  &.button[href*="gent.be"] {
     @extend %a-arrow-animation;
   }
 
 
-  &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back):not(.refresh) {
+  &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([href*="gent.be"]):not(.back):not(.refresh),
+  &.standalone-link[href*="gent.be"] {
     @include icon(arrow-right, after);
   }
 
@@ -127,8 +131,8 @@ a {
   ///
   /// External links get an indicator.
   ///
-  &[href^="http://"]:not(.no-icon):not(.tag),
-  &[href^="https://"]:not(.no-icon):not(.tag) {
+  &[href^="http://"]:not(.no-icon):not(.tag):not([href*="gent.be"]),
+  &[href^="https://"]:not(.no-icon):not(.tag):not([href*="gent.be"]) {
     @include icon(arrow-right-top, after);
 
     &[download]:not(.button):not(.no-icon) {
@@ -273,8 +277,8 @@ a {
 /// External links other than group Ghent get an indicator.
 ///
 %a-remove-indicator {
-  &[href^="http://"],
-  &[href^="https://"] {
+  &[href^="http://"]:not([href*="gent.be"]),
+  &[href^="https://"]:not([href*="gent.be"]) {
     &:not([download]):not(.standalone-link) {
       margin-right: 0;
 
@@ -300,8 +304,8 @@ a {
   }
 
   &.button {
-    &[href^="http://"]:not(.no-icon),
-    &[href^="https://"]:not(.no-icon) {
+    &[href^="http://"]:not(.no-icon):not([href*="gent.be"]),
+    &[href^="https://"]:not(.no-icon):not([href*="gent.be"]) {
       @extend %a-arrow-animation;
       @include icon(arrow-right);
 

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

@@ -144,8 +144,8 @@ ul {
         &[href^="mailto:"]:not(.button),
         &[href^="tel:"]:not(.button),
         &[download]:not(.button),
-        &[href^="http://"]:not(.button),
-        &[href^="https://"]:not(.button) {
+        &[href^="http://"]:not(.button):not([href*="gent.be"]),
+        &[href^="https://"]:not(.button):not([href*="gent.be"]) {
           &::after {
             display: none; // hide default link icons
           }
@@ -227,6 +227,7 @@ ol {
 
   & > li {
     position: relative;
+    padding-left: 40px;
     counter-increment: item;
 
     &::before {
@@ -236,6 +237,7 @@ ol {
       width: 30px;
       height: 30px;
       margin-right: 10px;
+      margin-left: -40px;
       font-size: .9rem;
       line-height: 177.778%;
       text-align: center;
@@ -244,6 +246,12 @@ ol {
   }
 }
 
+@for $i from 1 through 20 {
+  ol[start="#{$i}"] {
+    counter-reset: item #{$i - 1};
+  }
+}
+
 dl {
   dt,
   dd {

package/build/styleguide/sass/21-atoms/paragraph/_paragraph.scss

@@ -1,4 +1,14 @@
 p {
+  @include large-text();
+
+  margin-top: 20px;
+  margin-bottom: 20px;
+  line-height: 177.778%;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
   .dark-background & {
     @include theme('color', 'color-none', 'default-text-color-inverse');
   }

package/build/styleguide/sass/21-atoms/table/_table.scss

@@ -5,7 +5,7 @@ div.table-list {
 
   .list-description,
   caption {
-    @include theme('color', 'color-zero--lighten-3', 'table-caption-color');
+    @include theme('color', 'help-text-color', 'table-caption-color');
 
     position: absolute;
     bottom: 0;
@@ -53,7 +53,7 @@ div.responsive-table {
     tr {
       &:nth-of-type(even) th:not([scope="col"]) th:not([scope="row"]),
       &:nth-of-type(even) td {
-        @include theme('background-color', 'color-secondary--lighten-4', 'table-row-color');
+        @include theme('background-color', 'color-secondary-light', 'table-row-color');
       }
 
       &:nth-of-type(n) {
@@ -74,7 +74,7 @@ div.responsive-table {
 
       &:nth-of-type(odd) th:not([scope="col"]),
       &:nth-of-type(odd) td {
-        @include theme('background-color', 'color-primary--lighten-5', 'table-row-color');
+        @include theme('background-color', 'color-secondary-light', 'table-row-color');
       }
     }
 
@@ -106,7 +106,7 @@ div.table-list {
       font-size: .9rem;
 
       &:nth-child(even) {
-        @include theme('background-color', 'color-secondary--lighten-5', 'table-list-row-color');
+        @include theme('background-color', 'color-secondary', 'table-list-row-color');
       }
     }
   }

package/build/styleguide/sass/31-molecules/accordion/_accordion.scss

@@ -16,7 +16,7 @@
     &::before {
       position: absolute;
       right: 0;
-      transition: transform .2s ease-in-out;
+      transition: transform .2s ease-out-in-out;
       font-size: 1.4rem;
       line-height: 1.2;
     }
@@ -29,9 +29,14 @@
   }
 
   .accordion--content {
-    transition: max-height .5s ease-in-out;
+    max-height: 0;
+    transition: max-height .75s ease-out;
     overflow: hidden;
 
+    &.accordion--expanded {
+      max-height: 9999px;
+    }
+
     &:focus,
     &:focus-within {
       overflow: unset; // The overflow is needed for the accordion animation only
@@ -80,7 +85,7 @@ dl.accordion {
       min-height: 1.8rem;
       margin: 0 .75rem 0 0;
       padding: .13rem .25rem;
-      transition: transform .2s ease-in-out;
+      transition: transform .2s ease-out-in-out;
       font-size: 1.2rem;
       text-align: left;
     }
@@ -153,9 +158,14 @@ dl.accordion {
   }
 
   .accordion--link--content {
-    transition: max-height .5s ease-in-out;
+    max-height: 0;
+    transition: max-height .75s ease-out;
     overflow: hidden;
 
+    &.accordion--expanded {
+      max-height: 9999px;
+    }
+
     &:focus,
     &:focus-within {
       overflow: unset; // The overflow is needed for the accordion animation only

package/build/styleguide/sass/31-molecules/breadcrumbs/_breadcrumbs.scss

@@ -14,8 +14,9 @@
 
       display: inline-flex;
       align-items: center;
-      margin-right: .4rem;
+      margin-right: 8px;
       margin-bottom: 0;
+      padding-left: 0;
 
       &::before {
         display: none;
@@ -24,7 +25,7 @@
       &::after {
         @include theme('color', 'color-primary', 'breadcrumb-arrows-color');
 
-        margin: 0 0 0 .4rem;
+        margin: 0 0 0 8px;
       }
 
       &:last-of-type {
@@ -70,10 +71,10 @@
     a {
       @include bold-text;
 
-      padding: 0 .35rem;
+      padding: 0 7px;
       border-color: transparent;
       outline: 2px solid currentColor;
-      line-height: .95rem;
+      line-height: 19px;
 
       &:hover,
       &:focus {
@@ -104,7 +105,7 @@
         align-items: center;
 
         li:not(.expandable) {
-          min-width: 3rem;
+          min-width: 60px;
 
           a,
           span {

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

@@ -66,7 +66,12 @@
 
     > .checkbox.full-width,
     > .checkbox-filter__category {
+      right: 0;
+      left: 0;
       flex-basis: 100%;
+      width: 100%;
+      margin-right: auto;
+      margin-left: auto;
     }
 
     > [hidden] {

package/build/styleguide/sass/31-molecules/display-switcher/_display-switcher.scss

@@ -14,6 +14,12 @@
       li {
         @include medium-text();
         margin-right: 20px;
+
+        &:not(.active) {
+          i {
+            @include theme("color", "color-primary", "link-color");
+          }
+        }
       }
     }
   }

package/build/styleguide/sass/31-molecules/feature-block/_feature-block.scss

@@ -9,8 +9,11 @@
     padding: 60px;
   }
 
-  h1 {
+  h2,
+  h3 {
     @include theme('color', 'color-none', 'feature-block-primary-color');
+
+    margin-bottom: 20px;
   }
 
   > :first-child {
@@ -25,7 +28,6 @@
     @include theme('color', 'color-zero', 'feature-block-secondary-color');
     @include theme('background-color', 'color-secondary', 'feature-block-secondary-background-color');
 
-    h1,
     h2,
     h3 {
       @include theme('color', 'color-zero', 'feature-block-secondary-color');

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

@@ -36,9 +36,14 @@
     h2,
     h3 {
       display: inline-block;
+      margin: 0 0 20px;
       vertical-align: top;
     }
 
+    p:first-of-type {
+      margin-top: 0;
+    }
+
     > *:last-child {
       margin-bottom: 0;
     }

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

@@ -14,7 +14,7 @@ nav.menu {
 
     &::before {
       order: 0;
-      margin-right: .5rem;
+      margin-right: 10px;
       margin-left: 0;
     }
 
@@ -37,18 +37,18 @@ nav.menu {
 
     li {
       display: inline-block;
-      margin-right: 1rem;
+      margin-right: 20px;
 
       a,
       a[href^="mailto:"],
       a[download],
-      a[href^="http://"],
-      a[href^="https://"] {
+      a[href^="http://"]:not([href*="gent.be"]),
+      a[href^="https://"]:not([href*="gent.be"]) {
         @include reset-link-background;
         @include link-underlined;
 
         margin-bottom: 0;
-        padding: .5rem 0;
+        padding: 10px 0;
       }
 
       a.active {
@@ -67,8 +67,8 @@ nav.menu {
     .modal-header {
       position: absolute;
       right: 0;
-      margin-top: 1rem;
-      margin-right: .5rem;
+      margin-top: 20px;
+      margin-right: 10px;
       z-index: 7;
     }
   }
@@ -79,36 +79,21 @@ nav.menu {
 
     .header {
       position: relative;
-      margin: 12px $gutter-width 32px;
+      margin: 12px $gutter-width;
 
-      &::before,
-      &::after {
+      &::before {
         @include theme('border-color', 'color-primary--lighten-4', 'header-border-bottom');
 
         position: absolute;
         top: 100%;
-        width: 100%;
-        height: 1rem;
+        left: -30px;
+        width: 100vw;
+        height: 20px;
         margin-top: 12px;
         border-top: 2px solid;
         content: '';
       }
 
-      &::before {
-        left: -$gutter-width;
-        width: 60px + $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% - 60px + 2px + #{$gutter-width});
-        border-left: 2px solid;
-        border-top-left-radius: border-radius('radius-4');
-      }
-
       button {
         position: absolute;
         right: 0;
@@ -124,14 +109,12 @@ nav.menu {
         li {
           @include tablet {
             display: inline-block;
-            margin-right: 1rem;
+            margin-right: 20px;
           }
 
-          margin-bottom: .8rem;
-
-          &:first-child {
-            margin-top: .8rem;
-          }
+          @include theme('border-color', 'color-primary-light');
+          margin-bottom: 0;
+          border-bottom: 1px solid;
 
           a,
           a[href^="mailto:"],
@@ -139,10 +122,22 @@ nav.menu {
           a[href^="http://"],
           a[href^="https://"] {
             @include reset-link-background;
-            @include link-underlined;
+            @include icon('chevron-right', 'after');
 
-            padding: .5rem 0;
+            display: block;
+            padding: 10px 20px;
             line-height: 1.4rem;
+
+            &:hover {
+              @include theme('background-color', 'color-primary-light');
+            }
+
+            &::after {
+              position: absolute;
+              top: 50%;
+              right: 30px;
+              margin-top: -13px;
+            }
           }
 
           a.active {
@@ -154,28 +149,24 @@ nav.menu {
 
     .language-switcher {
       display: block;
+      margin: 0 24px;
+
+      &:not(:last-child) {
+        @include theme('border-color', 'color-primary--lighten-4');
+        border-bottom: 2px solid;
+      }
 
       ul {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         margin: 0;
-        padding: .6rem 0;
+        padding: 12px 0;
 
         li {
-          padding: .6rem;
+          padding: 12px;
         }
       }
     }
-
-    .menu-links,
-    .language-switcher {
-      margin: 0 1.2rem;
-
-      &:not(:last-child) {
-        @include theme('border-color', 'color-primary--lighten-4');
-        border-bottom: 2px solid;
-      }
-    }
   }
 }

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

@@ -53,15 +53,7 @@
       }
 
       > .modal-actions {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        margin-top: -76px;
         padding-top: 30px;
-
-        @include tablet {
-          position: static;
-        }
       }
     }
   }
@@ -125,6 +117,12 @@
       padding: 16px 70px 60px;
     }
 
+    figure {
+      img {
+        width: auto;
+      }
+    }
+
     p {
       &:last-child {
         margin-bottom: 0;
@@ -143,13 +141,13 @@
     flex-shrink: 0;
     align-items: center;
     width: 100%;
-    padding: 30px 20px 60px;
+    padding: 30px 20px;
     z-index: z('modal', 'actions');
 
     @include tablet {
       position: relative;
       margin-top: -15px;
-      padding: 0 70px 60px;
+      padding: 0 70px 30px;
     }
   }