@ndla/ui 41.2.6 → 41.3.0

package/src/Hero/component.hero.scss

@@ -1,122 +0,0 @@
-.c-hero {
-  background-repeat: repeat;
-  background-size: 20px;
-  background-color: $brand-grey--lightest;
-
-  @include mq(tablet) {
-    min-height: 246px;
-    padding-bottom: 156px;
-  }
-
-  &--subject-material {
-    background-color: $subject-material-light;
-  }
-
-  &--tasks-and-activities {
-    background-color: $tasks-and-activities-background;
-  }
-
-  &--subject {
-    background-color: $subject-light;
-  }
-
-  &--assessment-resources {
-    background-color: $assessment-resource-background;
-  }
-
-  &--external-learning-resources {
-    background-color: $external-learning-resource-background;
-  }
-
-  &--source-material {
-    background-color: $source-material-light;
-  }
-
-  &--beta {
-    background: $brand-color;
-  }
-
-  &--ndla-film {
-    background: $film-color;
-    .c-hero__content {
-      .c-breadcrumb__item,
-      .c-breadcrumb__item--home:after,
-      a, a:focus, a:hover {
-        color: #fff;
-      }
-    }
-    @include mq(tablet) {
-      .c-hero__content {
-        min-height: 90px;
-      }
-      height: 2000px;
-      margin-bottom: -1910px;
-    }
-    &.c-hero--has-image {
-      @include mq(tablet) {
-        margin-bottom: -1800px;
-        .c-hero__content {
-          min-height: 190px;
-        }
-        @media (min-height: 720px) {
-          .c-hero__content {
-            min-height: 240px;
-          }
-          margin-bottom: -1750px;
-        }
-        @media (min-height: 1020px) {
-          .c-hero__content {
-            min-height: 290px;
-          }
-          margin-bottom: -1700px;
-        }
-      }
-    }
-    @include mq($until: tablet) {
-      + div article.c-article {
-        margin-left: -$spacing;
-        margin-right: -$spacing;
-        margin-top: 0;
-        background: #fff;
-        padding-left: $spacing;
-        padding-right: $spacing;
-        padding-top: $spacing--large;
-      }
-    }
-  }
-}
-.c-hero__background {
-  position: absolute;
-  width: 100%;
-  img {
-    display: block;
-    width: 100%;
-    opacity: 0.4;
-    max-width: 1460px;
-    margin: 0 auto;
-  }
-  &:after {
-    content: '';
-    position: absolute;
-    display: block;
-    background-image: linear-gradient(
-      unquote('#091a2a00'),
-      unquote('#091a2aff')
-    );
-    width: 100%;
-    height: 100px;
-    bottom: 0px;
-  }
-}
-.c-hero__content {
-  padding: $spacing--small 0 $spacing--small;
-  z-index: 9;
-
-  @include mq(tablet) {
-    min-height: 90px;
-    padding-bottom: $spacing--small/2;
-  }
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-}