gent_styleguide 5.0.2 → 5.0.6

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

@@ -0,0 +1,31 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &.overview-title {
+    @extend %h1;
+    display: flex;
+    max-width: 100%;
+    margin-bottom: 2rem;
+
+    span {
+      position: relative;
+      max-width: 100%;
+      padding: inherit;
+      font-size: inherit;
+
+      span {
+        &::after {
+          margin-left: .5rem;
+          font-size: 3.5rem;
+          line-height: .5;
+          content: ':';
+          speak: none;
+          vertical-align: -11%;
+        }
+      }
+    }
+  }
+}

package/build/styleguide/sass/21-atoms/image/_image.scss

@@ -0,0 +1,97 @@
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+figure {
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+
+.image-wrapper {
+  @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
+
+  position: relative;
+  padding-bottom: calc(100% / 8 * 5); // Default ratio 8:5
+  overflow: hidden;
+
+  &:empty {
+    &::before {
+      @include spot-image('camera-light', auto);
+      @include theme('color', 'color-primary', 'image-spot-shadow');
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      max-width: 3rem;
+      max-height: 3rem;
+      margin: auto;
+      border-radius: 50%;
+      background-size: contain;
+      box-shadow: 0 10px 35px -25px;
+      content: "";
+
+      @include tablet {
+        max-width: 5rem;
+        max-height: 5rem;
+      }
+    }
+  }
+
+  &[data-ratio='1:1'] {
+    padding-bottom: 100%;
+  }
+
+  &[data-ratio='4:1'] {
+    padding-bottom: calc(100% / 4 * 1);
+  }
+
+  img {
+    position: absolute;
+    width: 100%;
+    min-height: 100%;
+
+    &::before {
+      @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
+
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+    }
+
+    &::after {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      align-items: center;
+      justify-content: center;
+      padding-top: 1.4rem;
+      transform: translate(-50%, -50%);
+      background: url('#{$styleguide-dir}/img/iconfont/broken-link.svg') no-repeat top center;
+      background-size: 1.2rem auto;
+      color: color('dark-gray', -1);
+      font-size: .6rem;
+      line-height: 1rem;
+      text-align: center;
+      white-space: pre;
+      content: "Image could not be loaded:\A" attr(alt);
+    }
+
+    html[lang="nl"] &::after {
+      content: "Afbeelding kon niet worden geladen:\A"attr(alt);
+    }
+
+    html[lang="fr"] &::after {
+      content: "L\'image n'a pas pu être chargée:\A" attr(alt);
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="date"],
+input[type="time"],
+input[type="tel"],
+input[type="email"],
+input[type="url"] {
+  @include field-base;
+}
+
+input[type="password"] {
+  [class*="cs--"] & {
+    &,
+    &:focus {
+      padding-right: $field-icon-padding;
+      background-image: svg-as-background('lock-closed', color('dark-gray'), 30, 26);
+      background-repeat: no-repeat;
+      background-position: right .75rem center;
+
+      &:disabled {
+        background-image: svg-as-background('lock-closed', color('dark-gray', -2), 30, 26);
+      }
+    }
+  }
+}
+
+// Fixes vertical alignment on mobile safari.
+input[type=date] {
+  line-height: 2.4rem;
+}
+
+input[type=date]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
+  margin-left: .5rem;
+  -webkit-appearance: none;  // sass-lint:disable-line no-vendor-prefixes
+}
+
+.radio {
+  @include choices-field-base('radio');
+
+  &:hover {
+    // Unchecked and hovered.
+    label::before {
+      @include theme('background-color', 'color-tertiary--lighten-4', 'radio-background-color-hover');
+      @include theme('border-color', 'color-tertiary--lighten-1', 'radio-border-color-hover');
+    }
+
+    // Checked and hovered.
+    input[type="radio"]:checked + label::before {
+      @include theme('background-color', 'color-tertiary--lighten-3', 'radio-background-color-hover-and-checked');
+      @include theme('border-color', 'color-tertiary--darken-3', 'radio-border-color-hover-and-checked');
+      @include theme('color', 'color-tertiary--darken-3', 'radio-color-hover-and-checked');
+    }
+  }
+
+  &:focus + label,
+  input[type="radio"]:focus + label {
+    @include focus-bare;
+  }
+}
+
+.checkbox {
+  @include choices-field-base('checkbox');
+
+  &:hover {
+    // Unchecked and hovered.
+    label::before {
+      @include theme('background-color', 'color-tertiary--lighten-4', 'checkbox-background-color-hover');
+      @include theme('border-color', 'color-tertiary--lighten-1', 'checkbox-border-color-hover');
+    }
+
+    // Checked and hovered.
+    input[type="checkbox"]:checked + label::before {
+      @include theme('background-color', 'color-tertiary--lighten-3', 'checkbox-background-color-hover-and-checked');
+      @include theme('border-color', 'color-tertiary--darken-2', 'checkbox-border-color-hover-and-checked');
+      @include theme('color', 'color-tertiary--darken-3', 'checkbox-color-hover-and-checked');
+    }
+  }
+
+  &:focus + label,
+  input[type="checkbox"]:focus + label {
+    @include focus-bare;
+  }
+}

package/build/styleguide/sass/21-atoms/input-submit/_input-submit.scss

@@ -0,0 +1,3 @@
+input[type="submit"]:not(.button-secondary):not(.button-success):not(.button-alert) {
+  @extend %button-primary;
+}

package/build/styleguide/sass/21-atoms/input-textarea/_input-textarea.scss

@@ -0,0 +1,9 @@
+textarea {
+  @include field-base;
+
+  height: auto;
+  min-height: 7.2rem;
+  padding-top: .7rem;
+  padding-bottom: .7rem;
+  resize: none;
+}

package/build/styleguide/sass/21-atoms/label/_label.scss

@@ -0,0 +1,20 @@
+label {
+  @include theme('color', 'color-tertiary', 'label-color');
+  @include bold-text;
+
+  .label-optional {
+    @include theme('color', 'color-primary--darken-2', 'label-optional-color');
+    @include theme('background-color', 'color-primary--lighten-5', 'label-optional-background');
+
+    padding: 0 .2rem;
+    float: right;
+    border-top-left-radius: border-radius('radius-1');
+    border-top-right-radius: border-radius('radius-1');
+    font-size: .6rem;
+  }
+
+  display: block;
+  //margin: 0 0 .4rem;
+  font-size: .8rem;
+  line-height: 1.2rem;
+}

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

@@ -0,0 +1,260 @@
+$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 bold-text;
+
+  padding: $link-padding 0;
+  border-radius: border-radius('radius-1');
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  text-decoration: none;
+  word-wrap: break-word;
+
+  // Different button link types. These are links styled as a button.
+  &.button {
+    @include reset-link-background;
+    @include button;
+    @include button-icon;
+    // Overrule flex for IE
+    align-items: flex-start;
+    padding-top: .6em;
+
+    &::before,
+    &::after {
+      line-height: 1.4em;
+    }
+
+    &:not([class*="icon"]) {
+      @include button-icon;
+      @include icon(arrow-right);
+    }
+
+    &[href^="http://"]:not(.no-icon),
+    &[href^="https://"]:not(.no-icon) {
+      @include button-icon;
+      @include icon(external-link);
+    }
+
+    &[href^="mailto:"]:not(.no-icon) {
+      @include button-icon;
+      @include icon(envelope);
+    }
+
+    &[href^="tel:"]:not(.no-icon) {
+      @include button-icon;
+      @include icon(phone);
+    }
+
+    &[download]:not(.no-icon) {
+      @include button-icon;
+      @include icon(download);
+    }
+
+    &.button-success {
+      @extend %button-success;
+    }
+
+    &.button-alert {
+      @extend %button-alert;
+    }
+  }
+
+  &::before,
+  &::after {
+    transition: margin .1s ease-in;
+    font-size: 1.5em;
+    line-height: 1em;
+    vertical-align: -25%;
+  }
+
+  &:not(.button)::after {
+    margin-left: .2rem;
+  }
+
+  ///
+  /// Stand alone links.
+  ///
+  &.standalone-link:not(.no-icon) {
+    @include reset-link-background;
+    margin-left: 0;
+    padding-left: 0;
+
+    &:focus,
+    &:hover {
+      @include theme('color', 'color-primary--darken-2', 'link-hover-color');
+    }
+  }
+
+  &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back),
+  &.button:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not([class*="icon-"]) {
+    @extend %a-arrow-animation;
+  }
+
+
+  &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back) {
+    @include icon(arrow-right, after);
+  }
+
+  ///
+  /// Download links.
+  ///
+  &[download]:not(.no-icon) {
+    @include icon(download, after);
+  }
+
+  ///
+  /// Mail links.
+  ///
+  &[href^="mailto:"]:not(.no-icon) {
+    @include icon(envelope, after);
+  }
+
+  ///
+  /// Phone links.
+  ///
+  &[href^="tel:"]:not(.no-icon) {
+    @include icon(phone, after);
+  }
+
+  ///
+  /// External links get an indicator.
+  ///
+  &[href^="http://"]:not(.no-icon),
+  &[href^="https://"]:not(.no-icon) {
+    @include icon(external-link, after);
+
+    &[download]:not(.button):not(.no-icon) {
+      @include icon(download, after);
+    }
+  }
+
+  &.back:not(.no-icon) {
+    @extend %a-arrow-animation--left;
+    @include icon(fancyback, after);
+
+    display: inline-flex;
+    flex-direction: row-reverse;
+    padding-left: 0;
+
+    &::after {
+      margin-left: -.2rem;
+      padding-right: .2rem;
+      padding-left: .4rem;
+    }
+  }
+}
+
+%a-arrow-animation {
+  &::after,
+  &::before {
+    padding-right: .2rem;
+  }
+
+  &:focus,
+  &:hover {
+    &::after,
+    &::before {
+      animation: arrow 1s 2;
+
+      // Animation causes pointer flickering in IE.
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
+        animation: none;
+      }
+    }
+  }
+
+  @keyframes arrow {
+    0% {
+      padding-right: .2rem;
+      padding-left: 0;
+    }
+
+    40% {
+      padding-right: 0;
+      padding-left: .2rem;
+    }
+
+    100% {
+      padding-right: .2rem;
+      padding-left: 0;
+    }
+  }
+}
+
+%a-arrow-animation--left {
+  &:focus,
+  &:hover {
+    &::after,
+    &::before {
+      animation: arrow-left 1s 2;
+
+      // Animation causes pointer flickering in IE.
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
+        animation: none;
+      }
+    }
+  }
+
+  @keyframes arrow-left {
+    0% {
+      padding-right: .2rem;
+      padding-left: .4rem;
+    }
+
+    40% {
+      padding-right: .4rem;
+      padding-left: .2rem;
+    }
+
+    100% {
+      padding-right: .2rem;
+      padding-left: .4rem;
+    }
+  }
+}
+
+///
+/// External links other than group Ghent get an indicator.
+///
+%a-remove-indicator {
+  &[href^="http://"],
+  &[href^="https://"] {
+    &[href*="stad.gent"] {
+      &:not([download]):not(.standalone-link)::after {
+        content: none;
+      }
+
+      ///
+      /// Download links.
+      ///
+      &[download] {
+        @include icon(download, 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);
+
+        &::after {
+          content: none;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,194 @@
+ul,
+ol {
+  position: relative;
+  margin-left: 1rem;
+
+  li,
+  li > a {
+    font-family: $default-font-family;
+    line-height: 2.1;
+  }
+
+  &.links {
+    @extend %list-no-style;
+  }
+
+  &.inline {
+    @extend %list-no-style;
+
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+
+    li {
+      width: auto;
+      margin-right: $gutter-width;
+    }
+  }
+
+  &.no-style {
+    max-width: 41rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  a {
+    font-weight: normal;
+  }
+
+  strong > a {
+    @include bold-text;
+  }
+}
+
+ul {
+  &.checkmark-list,
+  &.checkmark-list-small {
+    @extend %list-no-style;
+
+    margin-left: 0;
+
+    li {
+      @include icon('checkmark');
+
+      position: relative;
+      padding-left: 1.6em;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin-left: -.2em;
+        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;
+      }
+    }
+  }
+
+  &.icon-list {
+    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;
+          margin-right: .2rem;
+        }
+      }
+    }
+
+    li {
+      position: relative;
+      margin-bottom: .8rem;
+      padding-left: 1.6rem;
+      line-height: 1.5;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      ul {
+        margin: 0;
+
+        li {
+          margin-bottom: .2rem;
+        }
+      }
+
+      a {
+        padding: 0;
+        line-height: inherit;
+
+        &[href^="mailto:"]:not(.button),
+        &[href^="tel:"]:not(.button),
+        &[download]:not(.button),
+        &[href^="http://"]:not(.button),
+        &[href^="https://"]:not(.button) {
+          &::after {
+            display: none; // hide default link icons
+          }
+        }
+      }
+
+      i {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: 1.5em;
+        line-height: 1;
+      }
+    }
+  }
+
+  &.dash-separated-list {
+    @extend %list-no-style;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+
+    > li:not(:last-of-type)::after {
+      display: inline-block;
+      padding: 0 .2em;
+      content: "\2014";
+    }
+  }
+}
+
+dl {
+  dt,
+  dd {
+    font-family: $default-font-family;
+    line-height: 1.8;
+  }
+
+  dt {
+    @include bold-text;
+  }
+
+  dd {
+    margin-bottom: .4rem;
+    padding-left: 1.2rem;
+  }
+}
+
+
+///
+/// Remove default styling from a list.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+///
+%list-no-style {
+  margin-left: 0;
+  padding-left: 0;
+  list-style: none;
+
+  p {
+    font-size: .8rem;
+  }
+
+  a {
+    @include bold-text;
+  }
+}