gent_styleguide 6.0.0-beta2 → 6.0.0-beta21

package/build/styleguide/sass/31-molecules/opening-hours/_opening-hours.scss

@@ -191,18 +191,20 @@ $week-breakpoint: '(min-width: 750px)';
         outline-offset: 0;
         cursor: pointer;
 
-        &[tabindex='0'] > span,
-        &:hover > span {
-          @include theme('border-color', 'color-zero', 'opening-hours-color');
-          border: 2px solid;
-        }
+        &[tabindex='0'] {
+          > span {
+            @include bold-text;
+          }
 
-        &[tabindex='0'] > span {
-          @include bold-text;
-        }
+          & > span,
+          &:hover > span {
+            @include theme('border-color', 'color-zero', 'opening-hours-color');
+            border: 2px solid;
+          }
 
-        &[tabindex='0'] .openinghours--details {
-          display: block;
+          .openinghours--details {
+            display: block;
+          }
         }
       }
 

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

@@ -66,7 +66,7 @@
   ul {
     align-items: center;
     justify-content: space-between;
-    gap: 30px 60px; // sass-lint:disable-line no-misspelled-properties
+    gap: 30px 60px;
 
     @include tablet {
       justify-content: flex-start;
@@ -98,8 +98,8 @@
     display: block;
     border: 0;
 
-    &[href^="http://"],
-    &[href^="https://"] {
+    &[href^="http://"]:not([href*="gent.be"]),
+    &[href^="https://"]:not([href*="gent.be"]) {
       &:not(.no-icon):not(.tag) {
         margin-right: 0;
       }

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

@@ -13,7 +13,7 @@
   margin-top: 20px;
   margin-right: 0;
   margin-bottom: 20px;
-  padding: 40px;
+  padding: 100px 40px 40px;
   border-bottom: 3px solid;
   font-size: .9rem;
 
@@ -25,16 +25,16 @@
   &::before {
     @include theme('color', 'color-info', 'info-message-icon-color');
 
-    display: block;
+    position: absolute;
+    top: 40px;
+    left: 40px;
     width: calc($status-message-icon-size + 20px);
-    margin-right: 0;
     padding-bottom: 20px;
     font-size: $status-message-icon-size;
     line-height: $status-message-icon-size;
     text-align: left;
 
     @include phablet {
-      position: absolute;
       top: 60px;
       left: 60px;
       padding-right: 20px;
@@ -83,21 +83,6 @@
     }
   }
 
-  > * {
-    &:not(a) {
-      @include phablet {
-        display: inline-block;
-        vertical-align: top;
-      }
-    }
-
-    &:not(a, i) {
-      @include phablet {
-        width: calc(100% - ($status-message-icon-size + 25px));
-      }
-    }
-  }
-
   > p {
     &:last-child {
       margin: 0;

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

@@ -2,7 +2,7 @@
   @include theme('background-color', 'color-tertiary-light', 'table-of-contents-background-color');
   @include medium-text;
   padding: 1.5rem;
-  container-type: inline-size;  // sass-lint:disable-line no-misspelled-properties
+  container-type: inline-size;
 
   h4 {
     margin-top: 0;

package/build/styleguide/sass/31-molecules/tabs/_tabs.scss

@@ -37,8 +37,8 @@
       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 theme('color', 'color-tertiary', 'default-text-color');
 

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

@@ -27,9 +27,14 @@
     span {
       @include icon('calendar');
 
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      line-height: 1;
+
       &::before {
         position: relative;
-        top: 6px;
+        margin-right: 5px;
         font-size: 1.2rem;
       }
     }
@@ -44,17 +49,17 @@
     }
   }
 
-  .teaser-links {
-    margin: 20px 0;
-    list-style-type: none;
+  ul {
+    margin: 20px 0 20px 20px;
+  }
 
-    li {
-      @include medium-text();
-    }
+  .teaser-links,
+  ol {
+    margin: 20px 0;
+  }
 
-    a {
-      @include normal-text();
-    }
+  .teaser-links {
+    list-style-type: none;
   }
 
   a.read-more {
@@ -93,15 +98,26 @@
       order: 1;
 
       .tags-label-wrapper {
+        display: flex;
         position: absolute;
         top: -15px;
         left: 20px;
+        flex-direction: row;
+        flex-wrap: wrap;
         margin: 0;
+        padding: 0 20px 0 0;
         z-index: 3;
 
-        .label ~ .tag-list-wrapper {
-          top: -4px;
-          margin-left: 5px;
+        .label {
+          margin: 0 10px 10px 0;
+        }
+
+        ul {
+          margin: 0;
+
+          > li {
+            margin: 0 10px 10px 0;
+          }
         }
 
         .tag-list-wrapper {
@@ -117,6 +133,7 @@
       order: 2;
       height: 100%;
       padding: 0 20px 20px;
+      font-size: .9rem;
 
       > i {
         float: left;
@@ -124,7 +141,7 @@
 
         &::before {
           display: block;
-          font-size: 38px;
+          font-size: 1.9rem;
 
           @include phablet {
             margin-bottom: 20px;
@@ -143,13 +160,6 @@
           }
         }
       }
-
-      p {
-        @include theme('color', 'default-text-color', 'help-text-color');
-        margin: 20px 0;
-        font-size: .8rem;
-        line-height: 1.4rem;
-      }
     }
   }
 
@@ -160,7 +170,7 @@
   &.no-image,
   .teaser--no-images & {
     h3 {
-      margin: 0;
+      margin: 0 0 20px;
     }
 
     .content__second {
@@ -182,7 +192,7 @@
     &.no-image,
     .teaser--no-images & {
       h3 {
-        margin: 0;
+        margin: 0 0 20px;
       }
 
       .content__second {
@@ -201,8 +211,11 @@
     }
 
     .content__second {
+      display: flex;
       position: absolute;
       bottom: 0;
+      flex-direction: column;
+      align-items: flex-start;
       order: 1;
       width: 100%;
       height: auto;
@@ -217,12 +230,12 @@
       }
 
       .date {
-        display: inline-block;
-        margin: -6px 0 0;
+        margin: 0;
         z-index: 1;
 
         span {
           @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
+
           padding: 5px 10px;
           line-height: 1.2;
           box-decoration-break: clone;
@@ -363,8 +376,8 @@
       @include bold-text;
 
       i {
-        margin-right: .3rem;
-        font-size: 1.5em;
+        margin-right: 6px;
+        font-size: 1.5rem;
         vertical-align: middle;
       }
     }

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

@@ -76,7 +76,7 @@
 
       .left {
         position: absolute;
-        bottom: .1rem;
+        bottom: 3px;
       }
 
       h1 {

package/build/styleguide/sass/41-organisms/filter/_filter.scss

@@ -115,18 +115,16 @@
     }
 
     > .modal-content {
-      margin-bottom: 30px;
-
       @include desktop {
+        margin-bottom: 30px;
         padding: 0;
         overflow: visible;
       }
     }
 
     > .modal-actions {
-      margin-top: 10px;
-
       @include desktop {
+        margin-top: 10px;
         padding-right: 0;
         padding-left: 0;
         border: 0;

package/build/styleguide/sass/41-organisms/footer/_footer.scss

@@ -19,7 +19,7 @@
       max-width: $bp-max-content;
       padding-right: 0;
       padding-left: 0;
-      gap: $grid-gutter-width; // sass-lint:disable-line no-misspelled-properties
+      gap: $grid-gutter-width;
     }
   }
 
@@ -130,6 +130,7 @@
     flex-wrap: wrap;
     align-items: center;
     padding: 20px;
+    gap: 20px;
 
     @media (min-width: $bp-max-content + 53px) {
       padding: 20px 0;
@@ -187,6 +188,7 @@
   /// Links in the footer should never have icons.
   ///
   [class*="cs--"] & a {
+    &[href^="http://"]:not(.no-icon):not(.tag),
     &[href^="https://"]:not(.no-icon):not(.tag) {
       margin-right: inherit;
 

package/build/styleguide/sass/41-organisms/footer/css/_social-list.scss

@@ -17,8 +17,8 @@
 
       &,
       &[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"]) {
         @include theme('background-color', 'color-quaternary--lighten-2', 'button-secondary-background');
         @include theme('color', 'color-zero', 'button-secondary-color');
 

package/build/styleguide/sass/41-organisms/multistep-form/_multistep-form.scss

@@ -3,7 +3,7 @@ $grid-gutter-width: $gutter-width;
 .form--multistep {
   display: flex;
   flex-direction: column;
-  gap: $grid-gutter-width; // sass-lint:disable-line no-misspelled-properties
+  gap: $grid-gutter-width;
 
   @include desktop {
     display: flex;

package/build/styleguide/sass/41-organisms/programme/_programme.scss

@@ -1,14 +1,13 @@
-.programme {
-  .programme__inner {
-    @include theme('background-color', 'color-tertiary-light');
-
-    padding: 24px;
+.programme-wrapper {
+  @include theme('background-color', 'color-tertiary-light');
+  padding: 24px;
 
-    @include desktop {
-      padding: 120px 135px;
-    }
+  @include desktop {
+    padding: 120px 135px;
   }
+}
 
+.programme {
   .read-more {
     font-size: .8rem;
     line-height: normal;

package/build/styleguide/sass/41-organisms/theme-footer/_theme-footer.scss

@@ -111,9 +111,9 @@
         a {
           &,
           &[download]:not(.button),
-          &[href^="http://"]:not(.button),
-          &[href^="https://"]:not(.button) {
-            @include theme('background-color', 'color-quaternary--lighten-2', 'button-secondary-background');
+          &[href^="http://"]:not(.button):not([href*="gent.be"]),
+          &[href^="https://"]:not(.button):not([href*="gent.be"]) {
+            @include theme('background-color', 'button-secondary-background');
           }
         }
       }
@@ -171,8 +171,8 @@
           a {
             &,
             &[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"]) {
               @include theme('color', 'color-zero');
               @include theme('background-color', 'color-none');
             }

package/build/styleguide/sass/41-organisms/timeline/_timeline.scss

@@ -322,9 +322,11 @@ dl.timeline {
     &.timeline-slot-reverse {
       .item {
         & > dd {
-          padding-right: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
-          padding-left: calc(#{$gutter-width*.5});
-          grid-area: right;
+          @include desktop {
+            padding-right: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
+            padding-left: calc(#{$gutter-width*.5});
+            grid-area: right;
+          }
         }
 
         // Alternating timeline-slots get alternating styling (left/right).
@@ -512,6 +514,7 @@ dl.roadmap {
     display: block;
     width: $roadmap-img-mobile-size;
     height: $roadmap-img-mobile-size;
+    margin-top: 0;
     margin-bottom: 15px;
 
     @include desktop {
@@ -520,6 +523,7 @@ dl.roadmap {
       left: 0;
       width: $roadmap-img-desktop-size;
       height: $roadmap-img-desktop-size;
+      margin-top: 20px;
     }
   }
 

package/build/styleguide/sass/61-layouts/detail-layout/_detail-layout.scss

@@ -60,9 +60,9 @@
       // @todo: + .teasers
       & + .summary-box,
       & + .table-of-contents,
-      & + .partner-block {
+      & + .partner-block,
+      & + p {
         @include col(12);
-
         margin-top: -150px;
 
         @include tablet {
@@ -70,10 +70,13 @@
         }
       }
 
-      + .partner-block {
+      + .partner-block,
+      + p {
+        position: relative;
         max-width: 100%;
         padding: 20px;
         background-color: color('white');
+        z-index: 1;
 
         @include tablet {
           padding: 60px;
@@ -91,8 +94,8 @@
     margin-bottom: 60px;
 
     @include desktop {
-      margin-top: 120px;
-      margin-bottom: 120px;
+      margin-top: 100px;
+      margin-bottom: 100px;
     }
   }
 
@@ -173,7 +176,8 @@
 
   .w12,
   > .timeline-wrapper,
-  > .programme-wrapper {
+  > .programme-wrapper,
+  > .roadmap-wrapper {
     @include col(12);
     @include extra-wide;
   }

package/build/styleguide/sass/61-layouts/filter-layout/_filter-layout.scss

@@ -6,7 +6,7 @@ $grid-gutter-width: 65px;
   display: flex;
   flex-wrap: wrap;
   margin: 70px auto 80px;
-  gap: $grid-gutter-width; // sass-lint:disable-line no-misspelled-properties
+  gap: $grid-gutter-width;
 
   .sidebar {
     @include desktop {

package/build/styleguide/sass/61-layouts/overview-layout/_overview-layout.scss

@@ -16,17 +16,17 @@
 
 .overview-layout {
   @extend %content-container;
-  margin-bottom: 4rem;
+  margin-bottom: 80px;
 
   > .content-header-container {
-    margin-right: -1rem;
-    margin-left: -1rem;
+    margin-right: -20px;
+    margin-left: -20px;
 
     @include tablet {
-      width: calc(100% + 6.75rem * 2);
-      margin-left: -6.75rem;
-      padding-right: 6.75rem;
-      padding-left: 6.75rem;
+      width: calc(100% + 135px * 2);
+      margin-left: -135px;
+      padding-right: 135px;
+      padding-left: 135px;
     }
 
     &:not(.image) {
@@ -38,22 +38,22 @@
         @include col(12);
 
         position: relative;
-        margin-top: -7.5rem;
+        margin-top: -150px;
         z-index: 1;
 
         @include tablet {
-          margin-top: -6rem;
+          margin-top: -120px;
         }
       }
 
       + .partner-block,
       + p {
         max-width: 100%;
-        padding: 1rem;
+        padding: 20px;
         background-color: color('white');
 
         @include tablet {
-          padding: 3rem;
+          padding: 60px;
         }
       }
     }

package/build/styleguide/sass/61-layouts/sidebar-right-layout/_sidebar-right-layout.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 4rem;
-  gap: $grid-gutter-width; // sass-lint:disable-line no-misspelled-properties
+  gap: $grid-gutter-width;
 
   .sidebar {
     width: 100%;

package/build/styleguide/sass/molecules.scss

@@ -10,8 +10,8 @@
 @import "31-molecules/feature-block/_feature-block.scss";
 @import "31-molecules/file-download/_file-download.scss";
 @import "31-molecules/file-upload/_file-upload.scss";
-@import "31-molecules/form-actions/_form-actions.scss";
 @import "31-molecules/form-item/_form-item.scss";
+@import "31-molecules/form-actions/_form-actions.scss";
 @import "31-molecules/form-row/_form-row.scss";
 @import "31-molecules/form-steps/_form-steps.scss";
 @import "31-molecules/gentinfo/_gentinfo.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gent_styleguide",
-  "version": "6.0.0-beta2",
+  "version": "6.0.0-beta21",
   "description": "Styleguide Stad.Gent",
   "devDependencies": {
     "@babel/core": "^7.20.12",