gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

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

@@ -2,55 +2,53 @@ $link-padding: .2em;
 
 %a,
 a {
-  @include theme('color', 'color-primary', 'link-color');
-  @include link-background('color-primary', 'color-primary--lighten-4', 'link-underline-color', 'link-background-color');
+  @include theme('color', 'color-tertiary', 'link-color');
+  @include link-background('color-primary', 'color-primary--lighten-4', 'link-underline-color', 'link-hover-background');
   @include bold-text;
 
-  padding: $link-padding 0;
-  border-radius: border-radius('radius-1');
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  position: relative;
   text-decoration: none;
   word-wrap: break-word;
 
   // Different button link types. These are links styled as a button.
-  &.button {
-    @include reset-link-background;
+  &.button,
+  &.tag {
     @include button;
     @include button-icon;
     // Overrule flex for IE
     align-items: flex-start;
     padding-top: .6em;
-
-    &::before,
-    &::after {
-      line-height: 1.4em;
-    }
+    border-bottom: 0;
+    background-image: inherit;
 
     &:not([class*="icon"]) {
       @include button-icon;
-      @include icon(arrow-right);
+      @include icon(arrow-right, 'after');
     }
 
     &[href^="http://"]:not(.no-icon),
     &[href^="https://"]:not(.no-icon) {
       @include button-icon;
-      @include icon(external-link);
+      @include icon(arrow-right-top, 'after');
+
+      &::after {
+        content: '';
+      }
     }
 
     &[href^="mailto:"]:not(.no-icon) {
       @include button-icon;
-      @include icon(envelope);
+      @include icon(envelope, 'after');
     }
 
     &[href^="tel:"]:not(.no-icon) {
       @include button-icon;
-      @include icon(phone);
+      @include icon(phone, 'after');
     }
 
     &[download]:not(.no-icon) {
       @include button-icon;
-      @include icon(download);
+      @include icon(download, 'after');
     }
 
     &.button-success {
@@ -60,25 +58,31 @@ a {
     &.button-alert {
       @extend %button-alert;
     }
+
+    &::after {
+      margin-left: 8px;
+    }
   }
 
   &::before,
   &::after {
     transition: margin .1s ease-in;
-    font-size: 1.5em;
-    line-height: 1em;
+    border: 0;
+    font-size: 1.3em;
+    line-height: 1.4em;
     vertical-align: -25%;
   }
 
-  &:not(.button)::after {
-    margin-left: .2rem;
+  &:not(.button):not(.tag)::after {
+    position: absolute;
+    top: -5px;
+    margin-left: 5px;
   }
 
   ///
   /// Stand alone links.
   ///
   &.standalone-link:not(.no-icon) {
-    @include reset-link-background;
     margin-left: 0;
     padding-left: 0;
 
@@ -96,6 +100,8 @@ 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;
   }
 
   ///
@@ -103,6 +109,8 @@ a {
   ///
   &[download]:not(.no-icon) {
     @include icon(download, after);
+    margin-right: 1.6rem;
+    white-space: nowrap;
   }
 
   ///
@@ -110,6 +118,8 @@ a {
   ///
   &[href^="mailto:"]:not(.no-icon) {
     @include icon(envelope, after);
+    margin-right: 1.6rem;
+    white-space: nowrap;
   }
 
   ///
@@ -117,14 +127,18 @@ a {
   ///
   &[href^="tel:"]:not(.no-icon) {
     @include icon(phone, after);
+    margin-right: 1.6rem;
+    white-space: nowrap;
   }
 
   ///
   /// External links get an indicator.
   ///
-  &[href^="http://"]:not(.no-icon),
-  &[href^="https://"]:not(.no-icon) {
-    @include icon(external-link, after);
+  &[href^="http://"]:not(.no-icon):not(.tag),
+  &[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);
@@ -133,16 +147,31 @@ a {
 
   &.back:not(.no-icon) {
     @extend %a-arrow-animation--left;
-    @include icon(fancyback, after);
-
-    display: inline-flex;
-    flex-direction: row-reverse;
+    @include icon(arrow-left, after);
+    margin-left: 1.6rem;
     padding-left: 0;
+    white-space: nowrap;
 
     &::after {
-      margin-left: -.2rem;
-      padding-right: .2rem;
-      padding-left: .4rem;
+      position: absolute;
+      left: -40px;
+      padding-right: 4px;
+      padding-left: 8px;
+    }
+  }
+
+  .dark-background & {
+    @include reset-link-background;
+    @include link-background('color-none', 'color-none', 'spotlight-link-border-color', 'spotlight-link-background-color');
+    @include theme('color', 'color-none');
+
+    &:hover,
+    &:focus {
+      @include theme('color', 'color-primary');
+
+      &::after {
+        @include theme('color', 'color-none');
+      }
     }
   }
 }
@@ -150,14 +179,17 @@ a {
 %a-arrow-animation {
   &::after,
   &::before {
-    padding-right: .2rem;
+    padding-right: 4px;
+    animation: arrow-reverse .5s 1;
+    animation-fill-mode: revert;
   }
 
   &:focus,
   &:hover {
     &::after,
     &::before {
-      animation: arrow 1s 2;
+      animation: arrow .5s 1;
+      animation-fill-mode: forwards;
 
       // Animation causes pointer flickering in IE.
       @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
@@ -168,28 +200,42 @@ a {
 
   @keyframes arrow {
     0% {
-      padding-right: .2rem;
+      padding-right: 4px;
       padding-left: 0;
     }
 
-    40% {
+    100% {
+      padding-right: 0;
+      padding-left: 4px;
+    }
+  }
+
+  @keyframes arrow-reverse {
+    0% {
       padding-right: 0;
-      padding-left: .2rem;
+      padding-left: 4px;
     }
 
     100% {
-      padding-right: .2rem;
+      padding-right: 4px;
       padding-left: 0;
     }
   }
 }
 
 %a-arrow-animation--left {
+  &::after,
+  &::before {
+    animation: arrow-left-reverse .5s 1;
+    animation-fill-mode: reverse;
+  }
+
   &:focus,
   &:hover {
     &::after,
     &::before {
-      animation: arrow-left 1s 2;
+      animation: arrow-left .5s 1;
+      animation-fill-mode: forwards;
 
       // Animation causes pointer flickering in IE.
       @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
@@ -200,20 +246,28 @@ a {
 
   @keyframes arrow-left {
     0% {
-      padding-right: .2rem;
-      padding-left: .4rem;
+      padding-right: 4px;
+      padding-left: 8px;
+    }
+
+    100% {
+      padding-right: 8px;
+      padding-left: 4px;
     }
+  }
 
-    40% {
-      padding-right: .4rem;
-      padding-left: .2rem;
+  @keyframes arrow-left-reverse {
+    0% {
+      padding-right: 8px;
+      padding-left: 4px;
     }
 
     100% {
-      padding-right: .2rem;
-      padding-left: .4rem;
+      padding-right: 4px;
+      padding-left: 8px;
     }
   }
+
 }
 
 ///
@@ -222,38 +276,38 @@ a {
 %a-remove-indicator {
   &[href^="http://"],
   &[href^="https://"] {
-    &[href*="stad.gent"] {
-      &:not([download]):not(.standalone-link)::after {
+    &:not([download]):not(.standalone-link) {
+      margin-right: 0;
+
+      &::after {
         content: none;
       }
+    }
 
-      ///
-      /// Download links.
-      ///
-      &[download] {
-        @include icon(download, after);
-      }
+    ///
+    /// Download links.
+    ///
+    &[download] {
+      @include icon(download, after);
+    }
 
-      ///
-      /// Stand alone links.
-      ///
-      &.standalone-link:not(.no-icon) {
-        @extend %a-arrow-animation;
-        @include icon(arrow-right, after);
-      }
+    ///
+    /// Stand alone links.
+    ///
+    &.standalone-link:not(.no-icon) {
+      @extend %a-arrow-animation;
+      @include icon(arrow-right, after);
     }
   }
 
   &.button {
     &[href^="http://"]:not(.no-icon),
     &[href^="https://"]:not(.no-icon) {
-      &[href*="stad.gent"]:not(.no-icon) {
-        @extend %a-arrow-animation;
-        @include icon(arrow-right);
+      @extend %a-arrow-animation;
+      @include icon(arrow-right);
 
-        &::after {
-          content: none;
-        }
+      &::after {
+        content: none;
       }
     }
   }

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

@@ -1,12 +1,20 @@
 ul,
 ol {
+  @include large-text();
   position: relative;
-  margin-left: 1rem;
 
   li,
   li > a {
     font-family: $default-font-family;
-    line-height: 2.1;
+    line-height: 1.5;
+  }
+
+  li {
+    margin: 0 0 10px;
+
+    &:last-child {
+      margin: 0;
+    }
   }
 
   &.links {
@@ -23,6 +31,7 @@ ol {
     li {
       width: auto;
       margin-right: $gutter-width;
+      margin-bottom: 0;
     }
   }
 
@@ -39,9 +48,34 @@ ol {
   strong > a {
     @include bold-text;
   }
+
+  &.comma-separated-list {
+    @extend %list-no-style;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+    }
+
+    li:not(:last-of-type)::after {
+      display: inline;
+      padding: 0 .2rem 0 0;
+      content: ',';
+    }
+
+    div {
+      display: inline;
+    }
+  }
 }
 
 ul {
+  margin-left: 1rem;
+  list-style-type: square;
+
   &.checkmark-list,
   &.checkmark-list-small {
     @extend %list-no-style;
@@ -78,16 +112,16 @@ ul {
   }
 
   &.icon-list {
+    @include large-text();
+
     margin: 0 0 2rem;
     list-style-type: none;
 
     &.inline {
       li {
-        display: flex;
         align-items: center;
         margin-right: .7rem;
         margin-bottom: 0;
-        padding-left: 1.4rem;
 
         i {
           width: auto;
@@ -153,6 +187,7 @@ ul {
     }
   }
 
+  // @Todo: if not used anymore, replace by label atom in an inline list.
   &.label-list {
     display: flex;
     flex-wrap: wrap;
@@ -160,22 +195,67 @@ ul {
     list-style: none;
 
     li {
-      @include theme('background-color', 'color-primary--lighten-4', 'tag-filter-background-color');
+      @include theme('background-color', 'color-none', 'tag-filter-background-color');
+      @include icon('tag');
 
       display: inline-flex;
       align-items: center;
       justify-content: space-between;
       margin: .2rem;
-      padding: .7em .8em;
-      border: 1px solid transparent;
-      border-radius: border-radius('radius-1');
+      padding: .5em .8em;
+      border: 1px solid color('gray');
       font-size: .7rem;
-      line-height: 1.1;
+      line-height: .7;
       text-decoration: none;
+
+      &.success {
+        @include theme('color', 'color-success', 'label-list-color-success');
+        @include theme('border-color', 'color-success', 'label-list-color-success');
+        @include theme('background-color', 'color-success-pastel--lighten-4', 'label-list-background-color-success');
+      }
+
+      &.warning {
+        @include theme('color', 'color-warning', 'label-list-color-warning');
+        @include theme('border-color', 'color-warning', 'label-list-color-warning');
+        @include theme('background-color', 'color-warning--lighten-5', 'label-list-background-color-warning');
+      }
+
+      &.error {
+        @include theme('color', 'color-error', 'label-list-color-error');
+        @include theme('border-color', 'color-error', 'label-list-color-error');
+        @include theme('background-color', 'color-error--lighten-5', 'label-list-background-color-error');
+      }
+
+      &::before {
+        margin-right: .3rem;
+        font-size: 1rem;
+      }
     }
   }
 }
 
+ol {
+  list-style: none;
+  counter-reset: item;
+
+  li {
+    position: relative;
+    counter-increment: item;
+  }
+
+  li::before {
+    @include semi-bold-text;
+    display: inline-block;
+    width: 1.4rem;
+    height: 1.4rem;
+    margin-right: .5rem;
+    background-color: color('cyan', -3);
+    line-height: 1.5rem;
+    text-align: center;
+    content: counter(item);
+  }
+}
+
 dl {
   dt,
   dd {

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

@@ -1,3 +1,9 @@
+p {
+  .dark-background & {
+    @include theme('color', 'color-none', 'default-text-color-inverse');
+  }
+}
+
 ///
 /// Helper class to align text right.
 ///
@@ -19,4 +25,3 @@
 .text-left {
   text-align: left;
 }
-

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

@@ -1,7 +1,5 @@
 time[pubdate] {
-  @include large-text;
-
-  display: block;
+  @include small-text();
 
   h1 + & {
     margin-top: -1em;

package/build/styleguide/sass/21-atoms/select/_input-select.scss

@@ -1,5 +1,6 @@
 select {
   @include field-base;
+  $svg-shevron-down: svg-icon('shevron-down', color('gray'), 24, 24);
 
   @each $theme, $colors in $themes {
     // Apply the default section as default color scheme if there is no section
@@ -7,19 +8,24 @@ select {
     .cs--#{$theme} & {
       &,
       &:focus {
-        $fill-color: set-themified-property($colors, 'color-primary', 'link-color');
-        $svg-shevron-down: svg-icon('shevron-down', $fill-color, 24, 24);
+        $button-color: set-themified-property($colors, 'color-tertiary', 'button-secondary-background');
 
-        padding-right: 3.8rem;
-        background-image: svg-url($svg-shevron-down), url('#{$styleguide-dir}/img/svg/separator.svg');
+        padding-right: 3rem;
+        background-image: svg-url($svg-shevron-down), svg-as-background("square", $button-color, 44, 44);
         background-repeat: no-repeat;
-        background-position: right .75rem center, right 2.8rem center;
+        background-position: right .5rem center, right 0 center;
+      }
+
+      &:hover {
+        $button-hover-color: set-themified-property($colors, 'color-tertiary', 'button-secondary-hover-background');
+        background-image: svg-url($svg-shevron-down), svg-as-background("square", $button-hover-color, 44, 44);
+        cursor: pointer;
       }
 
       &:disabled {
         background-image: svg-as-background(
           "lock-closed",
-          color("dark-gray", -2),
+          color("gray-medium"),
           20,
           20
         );

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

@@ -5,7 +5,7 @@ div.table-list {
 
   .list-description,
   caption {
-    @include theme('color', 'color-tertiary--lighten-1', 'table-caption-color');
+    @include theme('color', 'color-zero--lighten-3', 'table-caption-color');
 
     position: absolute;
     bottom: 0;
@@ -20,7 +20,7 @@ div.responsive-table {
   @include focus-style;
 
   @include tablet {
-    display: inline-block;
+    display: block;
     max-width: 100%;
   }
 
@@ -32,19 +32,14 @@ div.responsive-table {
 
 
   table {
+    border-bottom: 1px solid color('gray', -5);
+    border-collapse: collapse;
     caption-side: bottom;
 
     th {
-      @include bold-text;
+      @include semi-bold-text;
 
       font-size: .9rem;
-      line-height: 1.7;
-
-      &[scope="col"] {
-        @include theme('border-color', 'color-primary--lighten-5', 'table-header-border-color');
-
-        border-bottom: 2px solid;
-      }
     }
 
     td {
@@ -56,18 +51,21 @@ div.responsive-table {
     }
 
     tr {
-      &:nth-of-type(even) th:not([scope="col"]),
+      &:nth-of-type(even) th:not([scope="col"]) th:not([scope="row"]),
       &:nth-of-type(even) td {
-        @include theme('background-color', 'color-primary--lighten-5', 'table-row-color');
+        @include theme('background-color', 'color-secondary--lighten-4', 'table-row-color');
       }
 
       &:nth-of-type(n) {
-        @include table-backgrounds(th);
         @include table-backgrounds(td);
       }
+
+      th {
+        @include theme('background-color', 'color-secondary', 'table-header-color');
+      }
     }
 
-    // Tables with a thead have should have the same color scheme.
+    // Tables with a thead should have the same color scheme.
     thead ~ tbody tr {
       [class*="cs--"] &:nth-of-type(even) th:not([scope="col"]),
       [class*="cs--"] &:nth-of-type(even) td {
@@ -82,8 +80,8 @@ div.responsive-table {
 
     th,
     td {
-      @include theme('color', 'color-tertiary', 'table-content-color');
-      padding: .3rem .2rem;
+      @include theme('color', 'color-zero', 'table-content-color');
+      padding: .8rem;
       text-align: left;
     }
   }
@@ -108,7 +106,7 @@ div.table-list {
       font-size: .9rem;
 
       &:nth-child(even) {
-        @include theme('background-color', 'color-primary--lighten-5', 'table-list-row-color');
+        @include theme('background-color', 'color-secondary--lighten-5', 'table-list-row-color');
       }
     }
   }