gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/sass/21-atoms/logo/_logo.scss

@@ -0,0 +1,30 @@
+a.site-logo {
+  @include reset-link-background;
+  @include theme('color', 'color-tertiary', 'default-text-color');
+  display: inline-flex;
+  align-items: center;
+  font-size: 0;
+
+  &::before {
+    @include spot-image('logo', 4rem);
+    min-width: 4rem;
+    height: 3rem;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+  }
+
+  &.subsite {
+    @include tablet {
+      font-size: .9rem;
+    }
+
+    &::before {
+      @include tablet {
+        margin-right: .7rem;
+      }
+    }
+  }
+}

package/build/styleguide/sass/21-atoms/open-today/_open-today.scss

@@ -0,0 +1,106 @@
+$breakpoint-openinghours: '(min-width: 750px)';
+
+// ===
+// Day view
+// ===
+.openinghours-widget {
+  &[data-type="day"] {
+    display: inline-block;
+    border-radius: border-radius('radius-1');
+    overflow: hidden;
+
+    > * {
+      line-height: 1.4rem;
+    }
+
+    .channel-label {
+      @include bold-text;
+
+      float: left;
+      font-size: 0;
+
+      &::after {
+        display: inline-block;
+        content: " ";
+      }
+
+      &:nth-of-type(n + 2) {
+        padding-left: 1.9rem;
+        font-size: .8rem;
+
+        + .openinghours {
+          padding-top: 0;
+
+          &::before {
+            display: none;
+          }
+
+          .openinghours--date,
+          .openinghours--status {
+            display: none;
+          }
+
+        }
+      }
+    }
+
+    .openinghours {
+      margin-top: -.6rem;
+      padding: .3rem .5rem .3rem calc(.5rem + 1.5em);
+      background-color: color('green', -4);
+
+      &::before {
+        margin: 0 0 0 -1.2em;
+        font-size: 1.5em;
+        vertical-align: -25%;
+      }
+
+      &:first-of-type {
+        @include icon(clock);
+        margin-top: 0;
+      }
+
+      &--day-closed {
+        background-color: color('red', -4);
+      }
+
+      & + .openinghours--day-closed {
+        display: none;
+      }
+
+      &--date,
+      &--content,
+      &--times,
+      &--times-between,
+      &--time {
+        display: inline;
+      }
+
+      &--time time:last-of-type {
+        &::before {
+          content: "-";
+        }
+      }
+
+      &--date,
+      &--status {
+        @include bold-text;
+      }
+
+      &--special-day {
+        > span {
+          display: none;
+        }
+
+        > span:first-child {
+          display: inline;
+        }
+      }
+
+      &--time-prefix,
+      &--time-separator {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+///
+/// Helper class to align text right.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+///
+.text-right {
+  text-align: right;
+}
+
+///
+/// Helper class to align text left.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+///
+.text-left {
+  text-align: left;
+}
+

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

@@ -0,0 +1,10 @@
+time[pubdate] {
+  @include large-text;
+
+  display: block;
+
+  h1 + & {
+    margin-top: -1em;
+    margin-bottom: 1em;
+  }
+}

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

@@ -0,0 +1,29 @@
+select {
+  @include field-base;
+
+  @each $theme, $colors in $themes {
+    // Apply the default section as default color scheme if there is no section
+    // defined in the DOM.
+    .cs--#{$theme} & {
+      &,
+      &:focus {
+        $fill-color: set-themified-property($colors, 'color-primary', 'link-color');
+        $svg-shevron-down: svg-icon('shevron-down', $fill-color, 24, 24);
+
+        padding-right: 3.8rem;
+        background-image: svg-url($svg-shevron-down), url('#{$styleguide-dir}/img/svg/separator.svg');
+        background-repeat: no-repeat;
+        background-position: right .75rem center, right 2.8rem center;
+      }
+    }
+  }
+
+  &::-ms-expand { // sass-lint:disable-line no-vendor-prefixes
+    display: none;
+  }
+
+  &::-ms-value { // sass-lint:disable-line no-vendor-prefixes
+    @include theme('color', 'color-tertiary', 'default-text-color');
+    background: none; // remove blue background on ie10/ie11 when selected
+  }
+}

package/build/styleguide/sass/21-atoms/skiplink/_skiplink.scss

@@ -0,0 +1,15 @@
+a.skiplink {
+  @include reset-link-background;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  padding: .5rem 2rem;
+  background-color: color('white');
+  z-index: z('skiplink');
+
+  &:focus {
+    top: 0;
+    bottom: auto;
+    background-color: color('white');
+  }
+}

package/build/styleguide/sass/21-atoms/spinner/_spinner.scss

@@ -0,0 +1,20 @@
+.spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  div {
+    @include spot-image('spinner', 3rem);
+
+    text-indent: 200%;
+    white-space: nowrap;
+    overflow: hidden;
+    animation: spin 2s cubic-bezier(.75, .25, .25, .75) infinite;
+  }
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/build/styleguide/sass/21-atoms/status/_status.scss

@@ -0,0 +1,35 @@
+@mixin status {
+  &::before {
+    display: inline-block;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-right: .4rem;
+    border-radius: 50%;
+    content: '';
+    vertical-align: middle;
+  }
+}
+
+.status--warning {
+  @include status;
+
+  &::before {
+    background-color: color('yellow');
+  }
+}
+
+.status--success {
+  @include status;
+
+  &::before {
+    background-color: color('green');
+  }
+}
+
+.status--error {
+  @include status;
+
+  &::before {
+    background-color: color('red');
+  }
+}

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

@@ -0,0 +1,146 @@
+div.responsive-table,
+div.table-list {
+  position: relative;
+  padding-bottom: 1.4rem;
+
+  .list-description,
+  caption {
+    @include theme('color', 'color-tertiary--lighten-1', 'table-caption-color');
+
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    margin: .4rem 0;
+    font-size: .6rem;
+    text-align: right;
+  }
+}
+
+div.responsive-table {
+  @include focus-style;
+
+  @include tablet {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  display: none;
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+
+  table {
+    caption-side: bottom;
+
+    th {
+      @include 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 {
+      font-size: .8rem;
+
+      &:nth-of-type(n) {
+        @include table-backgrounds;
+      }
+    }
+
+    tr {
+      &:nth-of-type(odd) th:not([scope="col"]),
+      &:nth-of-type(odd) td {
+        @include theme('background-color', 'color-primary--lighten-5', 'table-row-color');
+      }
+
+      &:nth-of-type(n) {
+        @include table-backgrounds(th);
+        @include table-backgrounds(td);
+      }
+    }
+
+    // Tables with a thead have should have the same color scheme.
+    thead ~ tbody tr {
+      [class*="cs--"] &:nth-of-type(odd) th:not([scope="col"]),
+      [class*="cs--"] &:nth-of-type(odd) td {
+        background-color: transparent;
+      }
+
+      &:nth-of-type(even) th:not([scope="col"]),
+      &:nth-of-type(even) td {
+        @include theme('background-color', 'color-primary--lighten-5', 'table-row-color');
+      }
+    }
+
+    th,
+    td {
+      @include theme('color', 'color-tertiary', 'table-content-color');
+      padding: .3rem .2rem;
+      text-align: left;
+    }
+  }
+}
+
+div.table-list {
+  @include tablet {
+    display: none;
+  }
+
+  display: block;
+
+  &.js-hidden {
+    display: none;
+  }
+
+  ul {
+    @extend %list-no-style;
+
+    li {
+      padding: .6rem .3rem;
+      font-size: .9rem;
+
+      &:nth-child(2n) {
+        @include theme('background-color', 'color-primary--lighten-5', 'table-list-row-color');
+      }
+    }
+  }
+
+  dl {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+
+    > dt {
+      @include phablet {
+        flex: 0 30%;
+      }
+
+      flex: 0 50%;
+      line-height: 2.1;
+
+      + dd {
+        flex: 0 50%;
+
+        @include phablet {
+          flex: 0 70%;
+        }
+      }
+    }
+
+    > dd {
+      flex: 0 100%;
+      margin: 0;
+      padding: 0;
+      font-size: .8rem;
+      line-height: 2.4;
+    }
+  }
+}

package/build/styleguide/sass/21-atoms/tag/_tag.scss

@@ -0,0 +1,66 @@
+.tag {
+  @include theme('border-color', 'color-primary--lighten-3', 'tag-span-border-color');
+  @include theme('background-color', 'color-secondary', 'tag-background-color');
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: .7em .8em;
+  border: 1px solid;
+  border-radius: border-radius('radius-1');
+  font-size: .7rem;
+  line-height: 1.1;
+  text-decoration: none;
+
+  &.filter {
+    @include theme('background-color', 'color-primary--lighten-4', 'tag-filter-background-color');
+
+    padding: .4em .8em .4em 1.2em;
+    border-color: transparent;
+
+    &:hover button {
+      @include theme('background-color', 'color-primary--lighten-4', 'tag-close-button-background-hover');
+    }
+
+    button {
+      width: 1.1rem;
+      height: 1.1rem;
+      margin-left: .5rem;
+      padding: 0;
+      transition: background-color .2s ease-in-out;
+      border: 0;
+      border-radius: 100%;
+      background: transparent svg-as-background('cross', color('dark-gray'), 16, 16);
+      background-repeat: no-repeat;
+      background-position: center;
+      cursor: pointer;
+    }
+  }
+}
+
+a.tag {
+  @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-border-color');
+  @include icon(arrow-right, after);
+
+  padding: .4em .8em;
+  border-width: 2px;
+
+  &::after {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-left: .5rem;
+    font-size: 1rem;
+    vertical-align: middle;
+  }
+
+  &,
+  &:focus,
+  &:hover {
+    background-image: none;
+  }
+
+  &:hover {
+    @include theme('background-color', 'color-primary--lighten-4', 'button-secondary-hover-background');
+    @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
+  }
+}

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

@@ -0,0 +1,87 @@
+.accordion {
+
+  .accordion--button {
+    @include icon(chevron-down);
+    position: relative;
+    padding-right: 1.6rem;
+    padding-left: 0;
+    color: inherit;
+    text-align: left;
+
+    &::before {
+      position: absolute;
+      right: 0;
+      transition: transform .2s ease-in-out;
+      font-size: 1.4rem;
+      line-height: 1.1;
+    }
+
+    &[aria-expanded=true] {
+      &::before {
+        transform: scaleY(-1);
+      }
+    }
+  }
+
+  .accordion--content {
+    transition: max-height .5s ease-in-out;
+    overflow: hidden;
+
+    p {
+      line-height: 1.75;
+    }
+  }
+
+}
+
+ul.accordion,
+dl.accordion {
+
+  .accordion--button {
+
+    width: 100%;
+    padding: 0;
+    overflow: visible;
+
+    &::before {
+      position: relative;
+      right: auto;
+      left: 0;
+      min-width: 1.6rem;
+      transition: transform .2s ease-in-out;
+      font-size: 1.2rem;
+      line-height: 1.2;
+      text-align: left;
+    }
+
+    &[aria-expanded=true] {
+      @include icon(minus);
+
+      &::before {
+        transform: none;
+      }
+    }
+
+    &[aria-expanded=false] {
+      @include icon(plus);
+    }
+  }
+
+  .accordion--content {
+    margin-left: 1.6rem;
+  }
+}
+
+ul.accordion {
+  margin: 0;
+
+  >li {
+    list-style: none;
+  }
+}
+
+dl.accordion {
+  dd {
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,115 @@
+.breadcrumb {
+  clear: both;
+
+  ul,
+  ol {
+    margin: 0;
+    list-style: none;
+
+    li {
+      @include icon('chevron-right', 'after');
+
+      display: inline-flex;
+      align-items: center;
+      margin-right: .4rem;
+
+      &::after {
+        @include theme('color', 'color-primary', 'breadcrumb-arrows-color');
+
+        margin-left: .4rem;
+        vertical-align: -15%;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+
+        &::after {
+          display: none;
+          content: '';
+        }
+      }
+
+      > * {
+        font-size: .6rem;
+      }
+
+      a {
+        @include bold-text;
+
+        line-height: initial;
+
+        &::after {
+          content: none;
+        }
+      }
+
+      a,
+      span {
+        display: inline-block;
+      }
+    }
+
+    &.nav--mobile-breadcrumb {
+      display: block;
+
+      @media (min-width: $bp-tablet) {
+        display: none;
+      }
+    }
+  }
+
+  .expandable {
+    a {
+      @include reset-link-background;
+      @include theme('border-color', 'color-tertiary', 'breadcrumb-expandable-color');
+
+      padding: .2rem .3rem .4rem;
+      border: 1px solid;
+      border-radius: border-radius('radius-1');
+      line-height: .3rem;
+
+      &:hover,
+      &:focus {
+        @include theme('background-color', 'color-tertiary--lighten-4', 'breadcrumb-expandable-background-color-hover');
+      }
+    }
+  }
+
+  &[aria-expanded="false"] {
+    ul,
+    ol {
+      li:not(.expandable):not(:nth-last-child(-n+3)):not(:nth-child(-n+2)) {
+        display: none;
+      }
+
+      @include tablet-and-below {
+        display: flex;
+        align-items: center;
+
+        li:not(.expandable) {
+          min-width: 3rem;
+
+          a,
+          span {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+        }
+
+        li:not(.expandable):not(:nth-last-child(-n+3)) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  ///
+  /// Links in the breadcrumb should never have icons.
+  ///
+  [class*="cs--"] & a {
+    &::after {
+      content: none;
+    }
+  }
+}

package/build/styleguide/sass/31-molecules/card/_card.scss

@@ -0,0 +1,16 @@
+.card {
+  margin: 1.2rem 0;
+  border-radius: border-radius('radius-1');
+  // override li line-height
+  line-height: 1.75;
+  box-shadow: 0 .1rem .6rem 0 rgba(35, 51, 58, .25);
+
+  > * {
+    padding: 1rem;
+  }
+
+  .actions {
+    @include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom');
+    border-top: 2px solid;
+  }
+}