epfl-elements 1.0.1 → 4.1.0

package/src/scss/organisms/fullwidth-teaser.scss

@@ -1,285 +0,0 @@
-@charset 'utf-8';
-
-.fullwidth-teaser {
-  position: relative;
-  width: 100%;
-  min-height: 30rem;
-  background: $gray-100;
-
-  .vimeo-wrapper {
-    background: gray('100');
-  }
-
-  @include media-breakpoint-up(md) {
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
-  @include media-breakpoint-up(lg) {
-    margin-bottom: 0;
-  }
-
-  img {
-    width: 100%;
-    height: auto;
-  }
-  figure{
-    margin-bottom: 0;
-  }
-
-  picture,
-  figure,
-  .fullwidth-teaser-text {
-    @include media-breakpoint-up(md) {
-      flex: 0 0 50%;
-    }
-  }
-
-  picture,
-  figure {
-    @include media-breakpoint-down(sm) {
-      img {
-        width: 100% !important;
-        height: auto;
-      }
-    }
-
-    @include media-breakpoint-up(md) {
-      position: relative;
-      overflow: hidden;
-
-      img {
-        position: absolute;
-        top: 0;
-        left: -10%;
-        width: auto;
-        height: 100%;
-      }
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    display: block;
-    padding: 0;
-
-    picture,
-    figure {
-      display: block;
-      height: 90vh;
-      max-height: 90vh;
-
-      img {
-        position: relative;
-        left: 0;
-        object-fit: cover;
-        object-position: center center;
-        font-family: 'object-fit: cover;'; /* stylelint-disable-line */
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .fullwidth-teaser-content p {
-    @include media-breakpoint-up(xl) {
-      float: right;
-      max-width: 28rem;
-      margin-left: 6rem;
-      padding: 1.2rem 1.6rem;
-      background: rgba($white, 0.9);
-    }
-  }
-}
-
-.fullwidth-teaser-text {
-  padding: 1rem $grid-gutter-width/2 0;
-  background: $white;
-
-  @include make-col(12, 12);
-
-  max-width: map-get($grid-breakpoints, 'xl');
-
-  @include media-breakpoint-up(md) {
-    padding: 1rem $grid-gutter-width 0;
-  }
-
-  @include media-breakpoint-up(xl) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    right: 8rem;
-    width: auto;
-    padding: 2rem 0;
-    min-height: 100%;
-    overflow: hidden;
-    background: none;
-
-    .fullwidth-teaser-title {
-      padding: 1.5rem 2rem;
-      background-color: $white;
-      max-width: 24rem;
-    }
-
-    h3,
-    .h3 {
-      display: inline-block;
-      margin-bottom: 0;
-      font-size: 1.75rem;
-    }
-  }
-
-  .list-inline {
-    font-size: 0.85 * $font-size-base;
-    margin-bottom: 0;
-    color: $text-muted;
-    li { margin-right: 0; }
-    li:not(:last-child):after { content: ' \203A'; }
-
-    @include media-breakpoint-up('xl') {
-      margin-bottom: $spacer * -0.3;
-    }
-  }
-}
-
-.fullwidth-teaser-header {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  overflow: hidden;
-
-  @include media-breakpoint-up(xl) {
-    width: auto;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding-left: 0;
-  }
-
-  h3,
-  a {
-    flex: 1 1 auto;
-
-    @include media-breakpoint-up(xl) {
-      flex: 0 0 auto;
-    }
-  }
-
-  .btn {
-    transition: padding 0.15s;
-
-    &:before {
-      border: none;
-    }
-
-    &:hover,
-    &:focus {
-      background: darken($red, 15%);
-      color: $white;
-
-      @include media-breakpoint-up(xl) {
-        padding-left: 2rem;
-      }
-
-      &:before,
-      &:after {
-        background: none;
-        border-top-color: darken($red, 15%);
-      }
-    }
-  }
-}
-
-.fullwidth-teaser-content {
-  padding: 1rem 0 0;
-
-  @include media-breakpoint-up(md) {
-    padding: 1rem 0;
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding: 0;
-  }
-}
-
-.fullwidth-teaser-footer {
-  margin-bottom: $grid-gutter-width / 2;
-
-  @include make-col(12);
-
-  @include media-breakpoint-up(md) {
-    margin: 0;
-  }
-}
-
-.fullwidth-teaser-horizontal {
-  @include media-breakpoint-up(xl) {
-    .fullwidth-teaser-text {
-      left: 10%;
-      width: 80%;
-      justify-content: flex-end;
-      padding-bottom: $spacer * 6;
-    }
-
-    .fullwidth-teaser-header {
-      justify-content: flex-end;
-      overflow: visible;
-    }
-
-    .btn {
-      margin-bottom: -1.62rem;
-    }
-
-    .fullwidth-teaser-title {
-      width: auto;
-      max-width: 70%;
-      overflow: visible;
-      white-space: normal;
-      text-overflow: initial;
-    }
-
-    h3,
-    .h3 {
-      margin: 0;
-    }
-
-    .fullwidth-teaser-content {
-      p {
-        width: 89%;
-        margin: 0 11% 0 0;
-        padding-right: 5.3rem;
-        max-width: none;
-      }
-    }
-  }
-
-    @include media-breakpoint-up(xxl) {
-    .fullwidth-teaser-text {
-      left: 20%;
-      width: 60%;
-    }
-  }
-}
-
-.fullwidth-teaser-left {
-
-  @include media-breakpoint-up(md) {
-    picture img,
-    figure img {
-      right: -10%;
-      left: auto;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    picture img,
-    figure img {
-      right: 0;
-    }
-    .fullwidth-teaser-text {
-      right: auto;
-      left: 2rem;
-    }
-  }
-}

package/src/scss/organisms/header.scss

@@ -1,202 +0,0 @@
-@charset 'utf-8';
-
-.header {
-  display: flex;
-  width: 100%;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: center;
-  height: $header-height;
-
-  @include media-breakpoint-up(xl) {
-    justify-content: flex-start;
-  }
-
-  img {
-    margin-top: 0;
-    width: 110px;
-  }
-
-  .logo {
-    margin: 0;
-    border: none;
-    background-image: none;
-    margin-left: 3 * $spacer;
-
-    &:before {
-      content: none;
-    }
-  }
-
-  .nav-header {
-    display: flex;
-    flex: 0 0 auto;
-    flex-flow: row nowrap;
-    margin: 0 0 0 (3.7 * $spacer);
-    padding: 0;
-
-    li {
-      display: flex;
-      flex: 0 0 auto;
-
-      a {
-        position: relative;
-        margin: 0;
-        padding: 2rem 0.7rem;
-        font-weight: bold;
-        text-decoration: none;
-      }
-
-      a:after,
-      &.dropdown .btn:before {
-        content: ' ';
-        display: block;
-        position: absolute;
-        top: 1em;
-        left: 0.8rem;
-        height: 6px;
-        width: 7px;
-        background: $red;
-        opacity: 0;
-        transform: none;
-        transition: opacity 0.3s;
-      }
-
-      a:hover,
-      a.open,
-      a.active,
-      &.active a,
-      a:focus,
-      &.current-menu-item a {
-        color: $red;
-
-        &:before {
-          content: none;
-        }
-
-        &:after {
-          opacity: 1;
-        }
-      }
-
-      &:before {
-        content: none;
-      }
-    }
-
-    .dropdown {
-      align-items: center;
-
-      .btn {
-        padding: 0.7rem;
-        font-size: inherit;
-        font-weight: bold;
-        text-decoration: none;
-      }
-
-      .btn:before {
-        top: 0 !important;
-        border: none;
-        border-radius: 0;
-      }
-
-      .btn:hover:before,
-      .btn:focus:before {
-        opacity: 1;
-      }
-    }
-
-    .dropdown-item {
-      padding: 0.25rem 1.25rem;
-      font-weight: $font-weight-normal;
-      &:after { content: none; }
-      &:hover { color: $black; }
-    }
-
-    .icon { font-size: 0.9em; }
-  }
-
-  @include media-breakpoint-down (lg) {
-    height: $header-height;
-    max-height: $header-height;
-    padding: 0 (0.9 * $spacer);
-
-    .logo {
-      margin-left: 0;
-    }
-  }
-}
-
-.header-light {
-  padding-left: 0;
-  padding-right: 0;
-
-  .logo {
-    margin-right: $spacer;
-    padding-right: $spacer;
-    border-right: 1px solid gray('300');
-  }
-
-  h1 {
-    align-self: flex-start;
-    flex: 0 1 100px;
-    margin: auto 0;
-    font-size: $font-size-base;
-    color: theme-color('primary');
-    text-transform: uppercase;
-  }
-
-  .drawer.open + .header-light-content {
-    @include media-breakpoint-down(sm) {
-        .nav-toggle-mobile {
-          margin-right: -5rem;
-          overflow: hidden;
-        }
-    }
-  }
-
-  .header-light-content {
-    flex-grow: 1;
-    flex-flow: row wrap;
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-
-    @include media-breakpoint-down(sm) {
-      .nav-toggle-mobile {
-        padding: .5rem 0.9rem;
-      }
-    }
-
-    @include media-breakpoint-down(lg) {
-      height: 100%;
-      padding: 0.3rem 0;
-      overflow: hidden;
-
-      .logo {
-        order: 1;
-        margin: 0 auto 0 0;
-        padding: 0;
-        border: 0;
-        img {
-          width: 90px;
-        }
-      }
-      .nav-toggle-mobile {
-        order: 2;
-        margin: 0 1rem 0 0;
-        transition: margin 0.2s;
-      }
-      h1 {
-        flex: 0 0 100%;
-        margin-top: 9px;
-        margin-bottom: 0;
-        white-space: nowrap;
-        order: 3;
-      }
-    }
-  }
-
-  .nav-header { margin-left: $spacer * 2; }
-}

package/src/scss/organisms/headlines.scss

@@ -1 +0,0 @@
-@charset 'utf-8';

package/src/scss/organisms/hero.scss

@@ -1,80 +0,0 @@
-@charset 'utf-8';
-
-.hero {
-  @include media-breakpoint-up(md) {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.hero-content-container {
-  @include media-breakpoint-up(md) {
-    flex: 1 0 50%;
-    position: relative;
-    z-index: $zindex-5;
-    margin-top: $grid-gutter-width * 4;
-  }
-
-  @include media-breakpoint-up(lg) {
-    flex: 1 0 30%;
-  }
-}
-
-.hero-content,
-.hero-title {
-  @include media-breakpoint-up(md) {
-    padding: $grid-gutter-width;
-    background-color: $white;
-  }
-}
-
-.hero-title {
-  @include media-breakpoint-up(md) {
-    display: inline-block;
-    max-width: 100%;
-    min-width: 75%;
-    margin-bottom: 0;
-    padding-top: $grid-gutter-width / 2;
-    padding-bottom: $grid-gutter-width / 2;
-    text-align: right;
-  }
-}
-
-.hero-content {
-  @include media-breakpoint-up(md) {
-    width: 110%;
-  }
-}
-
-.hero-img {
-  picture,
-  figure {
-    display: block;
-    height: 100%;
-    max-height: 100%;
-  }
-
-  img {
-    object-fit: cover;
-    object-position: center center;
-    font-family: 'object-fit: cover;'; /* stylelint-disable-line */
-    width: 100%;
-    height: 100%;
-  }
-
-  @include media-breakpoint-up(xxl) {
-    picture {
-      height: 80vh;
-      max-height: 80vh;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    flex: 0 0 85%;
-    margin-left: -35%;
-  }
-
-  @include media-breakpoint-up(lg) {
-    margin-left: -15%;
-  }
-}

package/src/scss/organisms/introduction.scss

@@ -1,15 +0,0 @@
-@charset 'utf-8';
-
-.introduction {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 0 2.5rem;
-  background: $white;
-
-  h2,
-  .h2 {
-    margin-bottom: $spacer;
-  }
-}

package/src/scss/organisms/key-number-group.scss

@@ -1,31 +0,0 @@
-@charset 'utf-8';
-
-.key-number-group {
-  flex-wrap: wrap;
-  margin-left: $spacer * -0.5;
-  margin-right: $spacer * -0.5;
-
-  > * {
-    flex: 0 0 100%;
-    padding: $spacer * 0.5;
-  }
-
-  @include media-breakpoint-up(md) {
-    .key-number {
-      flex: 1 0 50%;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    .key-number {
-      flex: 0 0 25%;
-    }
-
-    .key-number-large {
-      flex: 0 0 50%;
-    }
-  }
-}
-
-@include ie11('.key-number-group .key-number') { flex: 0 0 20%; }
-@include ie11('.key-number-group .key-large') { flex: 0 0 45%; }

package/src/scss/organisms/nav-aside.scss

@@ -1,96 +0,0 @@
-@charset 'utf-8';
-
-.nav-aside-layout {
-  @include media-breakpoint-up(xl){
-    display: flex;
-    flex-wrap: nowrap;
-    margin-top: $spacer;
-
-    .nav-aside-wrapper {
-      flex: 0 0 22%;
-      order: -1;
-      max-width: 22%;
-      min-width: 320px;
-      border-right: 1px solid gray('300');
-    }
-
-    .content {
-      flex: 1 1 auto;
-      .container { width: 90%; }
-    }
-  }
-}
-
-.nav-aside-layout .nav-aside-wrapper {
-  display: block;
-
-  @include media-breakpoint-up(xxl){
-    flex: 0 0 16.1%;
-    max-width: 16.1%;
-  }
-}
-
-.nav-aside {
-  padding-bottom: $spacer * 3;
-
-  [class^="h"] { padding-left: $spacer * 3; }
-
-  ul { padding-left: 1.2rem; }
-  & > ul { padding-left: 0; }
-
-  li {
-    list-style-type: none;
-    font-size: $font-size-base * 0.9;
-
-    li {
-      border-top: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    &.active > a {
-      margin-right: -1px;
-      margin-left: $spacer * 2;
-      padding-left: $spacer * 1;
-      background: gray('100');
-      border-right: 2px solid theme-color('primary');
-      font-weight: $font-weight-bold;
-      color: $black;
-      & + ul a { color: $black; }
-      &:before { content: none; }
-    }
-
-    &.active:not(.menu-item-has-children)+li>a:before {
-      content: none;
-    }
-
-    @include media-breakpoint-down(lg) {
-      &.active > a { margin-right: $spacer * 2; }
-    }
-  }
-  & > ul > li:first-child > a:before { content: none; }
-
-  a {
-    display: block;
-    position: relative;
-    padding: $spacer / 1.6 $spacer * 3;
-    text-decoration: none;
-    color: gray('700');
-
-    &:before {
-      content: ' ';
-      position: absolute;
-      top: 0;
-      width: calc(100% - #{$spacer * 6});
-      height: 1px;
-      background: gray('200');
-      transition: background 0.25s;
-    }
-
-    &:hover {
-      color: theme-color('primary') !important;
-      &:before { background: theme-color('primary'); }
-    }
-  }
-  ul ul > li:first-child a:before { content: none; }
-}