@ndla/ui 50.9.7 → 50.9.9

package/src/Filter/component.filter.scss

@@ -1,503 +0,0 @@
-/**
-** FILTER
-** Component for filtering content
-**
-** EXAMPLE:
-** <div class="c-filter__list">
-**   <span class="c-filter__label">FILTER:</span>
-**   <div class="c-filter__item">
-**     <input type="checkbox" class="c-filter__input" name="gruppe" id="1T" value="1T">
-**     <label for="1T"><span class="c-filter__item-checkbox"></span></label>
-**   </div>
-**   <div class="c-filter__item">
-**    <input type="checkbox" class="c-filter__input" name="gruppe" id="R1" value="R1">
-**    <label for="R1"><span class="c-filter__item-checkbox"></span></label>
-**   </div>
-** </div>
-**/
-
-.c-filter {
-  align-items: center;
-  flex-grow: 2;
-
-  & > h1,
-  & > h2,
-  & > h3 {
-    border-bottom: 1px solid $brand-color--light;
-    margin-bottom: $spacing--small;
-
-    @include mq(tablet) {
-      border: none;
-    }
-  }
-
-  &__wrapper-multiple-filters {
-    margin-bottom: $spacing;
-    > * {
-      > .c-filter__label {
-        width: 120px;
-      }
-      > .c-filter__item-wrapper {
-        width: calc(100% - 120px);
-      }
-      &:not(:last-child) {
-        margin-bottom: $spacing--small;
-        @include mq(tabletWide) {
-          margin-bottom: $spacing--xsmall;
-        }
-      }
-      &:not(:first-child) {
-        border-top: 1px solid $brand-grey--lighter;
-        padding-top: $spacing--small;
-      }
-    }
-  }
-
-  &__list {
-    margin: 0;
-    padding: 0;
-    top: 80px;
-    width: 100%;
-    font-family: $font;
-    display: flex;
-    align-items: flex-start;
-    flex-flow: column;
-
-    @include mq(tablet) {
-      width: auto;
-      position: relative;
-      top: 0;
-      border: none;
-      padding-top: 0;
-      flex-flow: row;
-      .c-filter__label {
-        margin-right: $spacing;
-      }
-    }
-
-    &--float-right {
-      float: right;
-      top: 0;
-      width: auto;
-      padding: 0;
-      border: none;
-      margin-right: -$spacing--small;
-      margin-top: -4px;
-    }
-
-    &--search,
-    &--search-popover {
-      flex-flow: column;
-
-      @include mq(desktop) {
-        .c-filter {
-          &__label {
-            display: block;
-            margin: 0 0 $spacing--small 0;
-            font-weight: 600;
-          }
-          &__item {
-            display: block;
-            margin: 0 0 $spacing--small;
-          }
-        }
-      }
-    }
-
-    &--search-popover {
-      .c-filter {
-        &__label {
-          @include font-size(16px, 32px);
-
-          @include mq(desktop) {
-            @include font-size(22px, 32px);
-            margin-bottom: $spacing--medium;
-          }
-        }
-
-        &__item-wrapper {
-          @include mq(desktop) {
-            columns: 2;
-          }
-        }
-
-        &__item {
-          display: list-item;
-        }
-      }
-    }
-
-    &--filter-single-checkbox {
-      @include mq($until: mobileWide) {
-        width: 100% !important;
-        margin: $spacing 0 0 0 !important;
-        padding: $spacing--xsmall 20px;
-        background: $brand-grey--lighter;
-        flex-direction: row;
-        .c-filter__item label {
-          padding-left: 0;
-          flex-direction: row;
-          .c-filter__item-checkbox {
-            margin-right: $spacing--small;
-          }
-        }
-      }
-    }
-  }
-
-  &__label {
-    @include font-size(16px, 22px);
-
-    @include mq(tablet) {
-      margin: 0 0 $spacing--small;
-    }
-
-    @include mq($until: mobileWide) {
-      padding-left: $spacing;
-      padding-right: $spacing;
-    }
-
-    &--hidden {
-      @include visually-hidden();
-    }
-  }
-
-  &__item-wrapper {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    max-width: 780px;
-
-    @include mq($until: mobileWide) {
-      flex-flow: wrap;
-      width: 100%;
-      flex-flow: column;
-      .c-filter__item {
-        width: 100%;
-        border-bottom: 1px solid $brand-grey--lighter;
-        margin-bottom: 0;
-      }
-    }
-
-    &--collapse-mobile {
-      @include mq($from: mobileWide, $until: tabletWide) {
-        flex-flow: wrap;
-        width: calc(100% + 24px);
-        margin-left: -24px;
-        .c-filter__item {
-          width: auto;
-          max-width: 50%;
-          flex: 50%;
-          padding-left: $spacing--small;
-          padding-right: $spacing--small;
-          transform: translateX($spacing--small);
-          &:nth-child(odd) {
-            transform: translateX($spacing--small - 2);
-          }
-        }
-      }
-
-      @include mq($until: tabletWide) {
-        display: flex;
-        align-items: flex-start;
-
-        .c-filter__item {
-          margin: 0;
-          background: #fff;
-          display: flex;
-          position: static;
-          min-height: 52px;
-          align-items: center;
-          border-bottom: 1px solid $brand-grey--lighter;
-        }
-        .c-filter__label {
-          text-transform: uppercase;
-          @include font-size(12px, 16px);
-        }
-        .c-filter__input {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 0;
-          height: 0;
-          opacity: 0;
-          z-index: 5;
-          cursor: pointer;
-        }
-      }
-      @include mq($from: tabletWide) {
-        .c-filter__item {
-          width: 50%;
-          margin: 0 0 $spacing--small;
-          padding-right: $spacing--small;
-          label {
-            width: 100%;
-          }
-        }
-      }
-    }
-    &--aligned-grouping {
-      @include mq($until: 568px) {
-        > li {
-          width: 100%;
-        }
-      }
-      @include mq(568px) {
-        > li {
-          width: 235px;
-        }
-      }
-    }
-    &--grouped-options {
-      margin-bottom: $spacing--small;
-    }
-  }
-
-  &__item {
-    display: inline-block;
-    position: relative;
-    margin: 0 $spacing--small 0 2px;
-    color: $brand-color;
-    border-radius: $border-radius;
-    transition: $transition;
-    cursor: pointer;
-    @include font-size(16px, 18px);
-
-    &--hidden {
-      display: none !important;
-    }
-
-    &--no-results,
-    &--disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-      color: $brand-color--tertiary;
-
-      .c-filter__item-checkbox {
-        opacity: 0.5;
-      }
-    }
-
-    &:hover {
-      .c-filter__item-checkbox {
-        border: 2px solid $brand-color--tertiary;
-        &:before {
-          width: 5px;
-          transition: width 100ms ease;
-        }
-        &:after {
-          width: 10px;
-          transition: width 150ms ease 100ms;
-        }
-      }
-    }
-
-    [data-icon] {
-      margin-left: $spacing--small;
-    }
-
-    input:checked {
-      & + label .c-filter__item-checkbox {
-        border: 2px solid $brand-color;
-        background: $brand-color;
-        &:before {
-          background: white;
-          width: 5px;
-        }
-        &:after {
-          background: white;
-          width: 10px;
-        }
-      }
-    }
-
-    input {
-      &:focus,
-      &:active {
-        & + label {
-          @include restore-outline();
-        }
-      }
-    }
-
-    label {
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      @include mq($until: tabletWide) {
-        width: 100%;
-      }
-      @include mq($until: mobileWide) {
-        width: 100%;
-        padding: $spacing--xsmall 0;
-        justify-content: space-between;
-        min-height: 52px;
-        align-items: center;
-        .c-filter__text {
-          flex-grow: 1;
-        }
-      }
-    }
-  }
-
-  &__icon {
-    margin: 3px 0;
-  }
-
-  &__input {
-    position: absolute;
-    // width: 100%;
-    // height: 100%;
-    opacity: 0;
-    z-index: 5;
-    cursor: pointer;
-  }
-
-  &__item-checkbox {
-    content: '';
-    display: inline-block;
-    position: relative;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    background: $white;
-    border: 2px solid $brand-color--tertiary;
-    margin: 2px $spacing--small 2px 3px;
-    border-radius: 2px;
-    flex-shrink: 0;
-
-    @include mq(tablet) {
-      width: 20px;
-      height: 20px;
-      margin: 4px $spacing--small 4px 3px;
-    }
-
-    &:before {
-      content: '';
-      width: 0px;
-      height: 2px;
-      border-radius: 2px;
-      background: $brand-color--tertiary;
-      position: absolute;
-      transform: rotate(45deg);
-      top: 10px;
-      left: 7px;
-
-      @include mq(tablet) {
-        top: 8px;
-        left: 5px;
-      }
-      transition: width 50ms ease 50ms;
-      transform-origin: 0% 0%;
-    }
-
-    &:after {
-      content: '';
-      width: 0;
-      height: 2px;
-      border-radius: 2px;
-      background: $brand-color--tertiary;
-      position: absolute;
-      transform: rotate(305deg);
-      top: 13px;
-      left: 8px;
-
-      @include mq(tablet) {
-        top: 11px;
-        left: 6px;
-      }
-      transition: width 50ms ease;
-      transform-origin: 0% 0%;
-    }
-  }
-  &__text {
-    z-index: 2;
-  }
-
-  &__expand {
-    display: flex;
-    align-items: center;
-    background: none;
-    border: 0;
-    padding: 0;
-    margin-top: $spacing;
-    cursor: pointer;
-    color: $brand-color;
-    @include font-size(16px, 32px);
-
-    span {
-      margin-right: $spacing;
-    }
-    @include mq($until: mobileWide) {
-      margin-top: 0;
-      padding: $spacing--xsmall $spacing;
-      width: 100%;
-      justify-content: space-between;
-      min-height: 52px;
-      border-bottom: 1px solid $brand-grey--lighter;
-    }
-  }
-
-  &--background {
-    background-color: $brand-grey--lightest;
-    padding: $spacing;
-    @include mq($until: mobileWide) {
-      padding: 0;
-    }
-  }
-
-  &__usefilter-wrapper {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    padding: $spacing--large 0 $spacing--large;
-    @include mq($from: tabletWide) {
-      justify-content: flex-start;
-    }
-  }
-
-  &__no-filter-selected {
-    color: $text-light-color;
-    @include font-size(16px, 16px);
-    @include mq($until: mobileWide) {
-      padding: 0 $spacing $spacing--small $spacing;
-    }
-  }
-
-  &__narrow-active-filters {
-    @include mq($from: tabletWide) {
-      display: flex;
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-      align-items: flex-start;
-    }
-    .c-filter__modal-button {
-      flex: 0 0 auto;
-      height: 40px;
-      margin-right: 13px;
-      @include mq($until: desktop) {
-        height: auto;
-      }
-    }
-    .c-active-filters {
-      padding-bottom: 0;
-      flex-direction: row;
-      button {
-        margin-right: $spacing--xsmall;
-        width: auto;
-      }
-    }
-  }
-  &__modal-header {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    .c-filter__modal-heading {
-      display: flex;
-      align-items: baseline;
-      h1 {
-        margin-right: $spacing;
-      }
-    }
-  }
-}

package/src/Filter/filterClasses.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) 2018-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import BEMHelper from "react-bem-helper";
-
-export const classes = new BEMHelper({
-  name: "filter",
-  prefix: "c-",
-});

package/src/Logo/component.logo.scss

@@ -1,28 +0,0 @@
-.c-logo {
-  a {
-    box-shadow: none;
-  }
-  width: 120px;
-  margin: 0;
-  position: relative;
-
-  &--large {
-    width: 287px;
-  }
-
-  &--white {
-    .c-logo {
-      &__graphic {
-        fill: $white;
-      }
-    }
-  }
-
-  &__graphic {
-    fill: $brand-color;
-  }
-
-  &__beta {
-    margin-top: 9px;
-  }
-}