@ndla/ui 25.0.0 → 25.1.0

package/src/main.scss

@@ -27,6 +27,5 @@
 @import 'Translation/component.translation';
 @import 'Translation/component.translation-box';
 @import 'Search/component.search';
-@import 'Subject/component.subject';
 @import 'Carousel/component.carousel';
 @import 'NDLAFilm/component.film-movielist';

package/src/Subject/component.subject-about.scss

@@ -1,73 +0,0 @@
-.c-subject-about {
-  margin-bottom: $spacing--large;
-
-  @include mq(tablet) {
-    border: 1px solid $brand-grey--light;
-  }
-
-  &--fixedWidth {
-    max-width: 350px;
-  }
-
-  &__media-wrapper {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    & > *,
-    img {
-      width: 100%;
-    }
-    @include mq(tablet) {
-      width: 50%;
-      min-width: 50%;
-    }
-    @include mq(desktop) {
-      width: 40%;
-      min-width: 40%;
-    }
-  }
-
-  &--wide {
-    margin: 40px 0;
-    @include mq(tablet) {
-      display: flex;
-      margin: 80px 0;
-    }
-  }
-
-  &__content {
-    padding: $spacing--small 0 0 0;
-
-    @include mq(tablet) {
-      padding: $spacing;
-    }
-  }
-
-  &__top-heading {
-    margin: 0 0 $spacing--small 0;
-
-    @include mq(tablet) {
-      display: none;
-    }
-  }
-
-  &__main-heading {
-    margin: 0 0 $spacing--small 0;
-    @include font-size(14px, 32px);
-    text-transform: uppercase;
-    font-weight: $font-weight-bold;
-
-    display: none;
-
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &__description {
-    margin: 0;
-    @include font-size(16px, 26px);
-  }
-}

package/src/Subject/component.subject-archive.scss

@@ -1,92 +0,0 @@
-.c-subject-archive {
-  margin-bottom: $spacing--large;
-  display: flex;
-  flex-direction: column;
-
-  @include mq(tablet) {
-    border: 1px solid $brand-grey--light;
-  }
-
-  &--fixedWidth {
-    max-width: 350px;
-  }
-
-  &--animate {
-    .c-subject-archive {
-      &__featuring,
-      &__archive {
-        animation: fadeIn 0.3s ease-in-out;
-      }
-    }
-  }
-
-  &__media-wrapper {
-    width: 100%;
-
-    & > * {
-      width: 100%;
-    }
-  }
-
-  &__wrapper {
-    // flex: 1 1 auto;
-    display: flex;
-    flex-flow: column;
-    // justify-content: space-between;
-  }
-
-  &__content {
-    padding: $spacing--small 0 0 0;
-
-    @include mq(tablet) {
-      padding: $spacing;
-    }
-  }
-
-  &__heading {
-    @include font-size(20px, 32px);
-    margin: 0 0 $spacing--small 0;
-    flex: 0 0 auto;
-  }
-
-  &__section-heading {
-    margin: 0 0 $spacing--small 0;
-    @include mq(tablet) {
-      @include visually-hidden();
-    }
-  }
-
-  &__description {
-    margin: 0;
-    @include font-size(16px, 26px);
-  }
-
-  &__archive-button {
-    display: none;
-    @extend .o-text-link;
-    margin: $spacing--small 0 0 0;
-    padding: $spacing--small/2 0;
-    @include mq(tablet) {
-      margin: $spacing--small/2 $spacing $spacing;
-    }
-  }
-
-  &__archive {
-    padding: 0;
-
-    @include mq(tablet) {
-      padding: $spacing--large $spacing--large 0 $spacing--large;
-    }
-  }
-
-  &__archive-articles {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      @include font-size(16px, 24px);
-      margin-bottom: $spacing--small;
-    }
-  }
-}

package/src/Subject/component.subject-carousel.scss

@@ -1,32 +0,0 @@
-.c-subject-carousel {
-  margin-bottom: $spacing--large;
-
-  @include mq(tablet) {
-    margin-bottom: $subject-section-padding;
-  }
-
-  &__title {
-    // margin-left: $spacing !important;
-
-    @include mq(tablet) {
-      margin-left: $spacing--medium !important;
-    }
-
-    @include mq(desktop) {
-      margin-left: $spacing--large + $spacing--small !important;
-    }
-  }
-
-  &--wideScreen {
-    display: none;
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &--narrowScreen {
-    @include mq(tablet) {
-      display: none;
-    }
-  }
-}

package/src/Subject/component.subject-concepts.scss

@@ -1,37 +0,0 @@
-.c-subject-concepts {
-  position: relative;
-  margin-bottom: $subject-section-padding;
-  &__list {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    border: 1px solid $brand-color--light;
-    padding: $spacing;
-    margin: 0;
-  }
-
-  &__item {
-    flex-grow: 1;
-    text-align: center;
-    margin: 0;
-    position: relative;
-    margin-bottom: 0.5em;
-
-    button {
-      background: transparent;
-      border-bottom: none;
-
-      &:hover {
-        border-bottom: none;
-      }
-
-      .c-concept__link {
-        @include inuit-font-size(16px);
-        color: $brand-color--dark;
-        font-family: $font;
-        font-weight: $font-weight-semibold;
-        border-bottom-width: 2px;
-      }
-    }
-  }
-}

package/src/Subject/component.subject-header.scss

@@ -1,87 +0,0 @@
-.c-subject-header {
-  width: 100%;
-  position: relative;
-  min-height: 180px;
-  display: flex;
-  justify-content: flex-start;
-  background: $brand-color;
-
-  @include mq(tablet) {
-    height: 320px;
-    align-items: center;
-  }
-
-  &__background {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0%;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center right;
-    opacity: 0.5;
-
-    &--mobile {
-      display: none;
-      @include mq($from: mobile, $until: tablet) {
-        display: block;
-      }
-    }
-    &--tablet {
-      display: none;
-      @include mq($from: tablet, $until: desktop) {
-        display: block;
-      }
-    }
-    &--desktop {
-      display: none;
-      @include mq($from: desktop, $until: wide) {
-        display: block;
-      }
-    }
-    &--wide {
-      display: none;
-      @include mq($from: wide) {
-        display: block;
-      }
-    }
-    /*
-    &:after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.4);
-      z-index: 0;
-    }
-    */
-  }
-
-  &__heading {
-    @include font-size(24px, 28px);
-    color: $white;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-    margin: $spacing--medium 0 $spacing 0;
-    font-weight: $font-weight-bold;
-    padding: 0 $spacing;
-
-    @include mq(tablet) {
-      margin: 0;
-      @include font-size(40px, 40px);
-      padding: 0 0 0 $subject-margin;
-    }
-
-    @include mq(desktop) {
-      margin: 0;
-      @include font-size(52px, 52px);
-      padding: 0 0 0 $subject-margin;
-    }
-  }
-  &__badge {
-    margin:$spacing--medium $spacing $spacing--medium;
-    @include mq(tablet) {
-      margin: 0 0 $spacing--medium;
-      padding: 0 0 0 $subject-margin;
-    }
-  }
-}

package/src/Subject/component.subject-links.scss

@@ -1,14 +0,0 @@
-.c-subject-links {
-  margin-bottom: $spacing--large;
-
-  .c-subject-links__heading {
-    margin: 0 0 $spacing--small 0;
-  }
-
-  &__list {
-    margin: 0;
-    padding: 0;
-
-    list-style: none;
-  }
-}

package/src/Subject/component.subject-new-content.scss

@@ -1,82 +0,0 @@
-.c-subject-new-content {
-  @include mq($until: tablet) {
-    margin-bottom: $spacing--large;
-  }
-
-  &__heading {
-    @include mq(tabletWide) {
-      margin-left: $spacing--large !important;
-    }
-  }
-
-  &__list {
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__left-wrapper {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-
-    .c-icon {
-      width: 14px;
-      height: 14px;
-      margin-left: $spacing--small/2;
-      margin-right: $spacing--small/2;
-    }
-
-    .c-content-type-badge {
-      margin-top: 23px;
-      @include mq($until: tabletWide) {
-        display: none;
-      }
-    }
-
-    .c-subject-new-content__content-link {
-      @include mq(tabletWide) {
-        padding-left: $spacing;
-      }
-      padding-bottom: $spacing--small;
-    }
-  }
-
-  &__link {
-    color: $brand-color--dark;
-    font-weight: 600;
-    @include font-size(16px, 20px);
-    margin-bottom: $spacing--small/2;
-
-    @include mq(tablet) {
-      @include font-size(18px, 30px);
-    }
-  }
-
-  &__topic-name,
-  &__date {
-    color: $text-light-color;
-    @include font-size(14px, 18px);
-
-    @include mq(tablet) {
-      @include font-size(16px, 20px);
-    }
-  }
-
-  &__date {
-    align-self: flex-end;
-
-    @include mq(tablet) {
-      align-self: center;
-    }
-  }
-}

package/src/Subject/component.subject-shortcut.scss

@@ -1,57 +0,0 @@
-.c-subject-shortcuts {
-  margin-bottom: $spacing--large;
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    display: block;
-    margin-right: 9px;
-    margin-bottom: 9px;
-
-    a {
-      display: block;
-      background: $brand-color--light;
-      box-shadow: none;
-      border-radius: 5px;
-      @include font-size(18px, 23px);
-      font-weight: 600;
-
-      color: $brand-color--dark;
-      padding: 9px 20px;
-
-      &:hover,
-      &:active,
-      &:focus {
-        background-color: $brand-color;
-        color: $white;
-      }
-    }
-  }
-
-  &__expand-button {
-    display: flex;
-    background: none;
-    border: 0;
-    align-items: center;
-    padding: 0;
-    color: $brand-color;
-    margin-top: $spacing;
-    cursor: pointer;
-
-    .c-icon {
-      width: 18px;
-      height: 18px;
-      margin-right: $spacing--small/2;
-    }
-
-    span {
-      @include font-size(14px, 18px);
-    }
-  }
-}

package/src/Subject/component.subject.scss

@@ -1,213 +0,0 @@
-$subject-margin: $spacing--medium + $spacing--large;
-$subject-section-padding: 100px;
-
-@import './component.subject-header';
-@import './component.subject-shortcut';
-@import './component.subject-links';
-@import './component.subject-archive';
-@import './component.subject-carousel';
-@import './component.subject-concepts';
-@import './component.subject-about';
-@import './component.subject-new-content';
-
-.c-subject-content {
-  @include mq(tablet) {
-    margin-bottom: $subject-section-padding;
-  }
-
-  &__breadcrumb {
-    display: none;
-    margin: $spacing--medium 0 0 0;
-
-    @include mq(tablet) {
-      margin-left: $subject-margin;
-    }
-
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &__content {
-    display: block;
-    flex-flow: column;
-    margin-top: $spacing--small;
-
-    @include mq($from: tablet) {
-      display: flex;
-      > *:not(:only-child):last-child {
-        padding-left: $subject-margin;
-      }
-    }
-
-    // Two children or more children
-    &:not(.c-subject-content__content--twoColumns) {
-      @include mq(desktop) {
-        > *:not(:only-child) {
-          max-width: 50%;
-        }
-      }
-      @include mq($until: desktop) {
-        flex-direction: column;
-      }
-      @include mq($from: tablet, $until: desktop) {
-        > *:not(:only-child):last-child {
-          padding-left: $subject-margin;
-        }
-      }
-    }
-
-    @include mq(tablet) {
-      flex-flow: row;
-      margin-top: $spacing--large;
-    }
-
-    & > *:first-child {
-      margin-bottom: $spacing--large;
-      @include mq(tablet) {
-        margin-right: 80px;
-      }
-    }
-
-    &--twoColumns {
-      flex-flow: column;
-
-      & > *:first-child {
-        @include mq(tablet) {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}
-
-.c-subject-secondary-content {
-  background: $brand-grey--lightest;
-  padding: $spacing--large 0;
-  margin-top: $spacing--large;
-
-  @include mq(tablet) {
-    padding: $subject-section-padding 0 $spacing--large;
-    margin-bottom: 100px;
-    margin-top: 0;
-  }
-}
-
-.c-subject-sidebar-wrapper {
-  display: block;
-
-  @include mq(tablet) {
-    flex-basis: 50%;
-    flex-basis: 390px;
-    flex-shrink: 0;
-    margin: 9px 0 0 0;
-  }
-
-  margin: 0 $spacing;
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.c-subject-social {
-  &__content {
-    display: none;
-
-    @include mq(tabletWide) {
-      display: flex;
-    }
-  }
-
-  &__section {
-    flex-basis: 50%;
-    &:nth-child(odd) {
-      margin-right: $spacing;
-    }
-  }
-
-  .fb-embedded {
-    width: 100% !important;
-    overflow: hidden;
-    display: block;
-  }
-}
-
-.c-subject-flex {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing--large;
-
-  @include mq(tablet) {
-    flex-direction: row;
-  }
-
-  &--noMargin {
-    margin-bottom: 0;
-  }
-
-  &__child {
-    box-sizing: border-box;
-    padding: 0 $spacing--small;
-
-    @include mq(tablet) {
-      flex-basis: 50%;
-      flex-grow: 1;
-      flex-direction: row;
-    }
-
-    &:last-child {
-      & > * {
-        @include mq($until: tablet) {
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    & > * {
-      @include mq(tablet) {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.c-subject-section-title {
-  margin: 0 0 $spacing--small 0;
-
-  @include mq(tablet) {
-    margin: 0 0 $spacing 0;
-  }
-}
-
-.c-subject-child-content {
-  padding: 0 $spacing;
-}
-
-.c-subject-topic-language-container {
-  background: $brand-grey--lightest;
-  padding: $spacing;
-  margin-top: $spacing;
-  .c-topic-shortcuts__button {
-    background: none;
-  }
-  &__heading {
-    text-transform: uppercase;
-    @include font-size(22px, 24px);
-    font-weight: $font-weight-bold;
-    letter-spacing: 0.05em;
-    margin: $spacing--small 0;
-  }
-  .c-topic-introduction__item {
-    &:last-child,
-    &:nth-last-child(2):nth-child(even) {
-      border-bottom: 0;
-    }
-  }
-  @include mq($until: tablet) {
-    .c-topic-introduction__list {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-}