epfl-elements 1.0.1 → 4.0.0

package/src/scss/molecules/question.scss

@@ -1,213 +0,0 @@
-@charset 'utf-8';
-
-$checked-tag: 1.7rem;
-$half-checked-tag: $checked-tag/2;
-$icon-checked-tag: $checked-tag/2.7;
-$animation: 0.2s;
-
-.question {
-  display: flex;
-  flex-flow: column wrap;
-
-  // icon appearance animation
-  @keyframes popin {
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  h3,
-  .h3 {
-    margin-top: 1rem;
-    margin-bottom: 3rem;
-  }
-
-  .custom-control-label {
-    flex: 1 1 auto;
-    flex-basis: 0;
-    position: relative;
-    transition: $animation;
-
-    // red icon styles
-    &:before {
-      content: ' ';
-      position: absolute;
-      width: $checked-tag;
-      height: $checked-tag;
-      border: none;
-      border-radius: 50%;
-      margin-top: 0;
-      transform: scale(0);
-      transition: margin $animation;
-      box-shadow: none !important;
-      z-index: $zindex-10 + 5;
-    }
-
-    &:after {
-      content: ' ';
-      position: absolute;
-      width: $icon-checked-tag;
-      height: $icon-checked-tag;
-      background: $custom-checkbox-indicator-icon-checked;
-      transform: scale(0);
-      transition: margin $animation;
-      z-index: $zindex-10 + 15;
-    }
-
-    // base hover behaviour
-    &:hover {
-      cursor: pointer;
-
-      .custom-control-label-content {
-        border-color: $black;
-        z-index: $zindex-10;
-      }
-    }
-  }
-
-  .custom-control-label-content {
-    display: block;
-    position: relative;
-    padding: 1rem 1.3rem;
-    background: $white;
-    border: 1px solid $gray-200;
-    z-index: $zindex-5;
-    transition: $animation;
-  }
-
-  // checked animation and styles
-  .custom-control-input:checked + .custom-control-label {
-    @extend .custom-control-label:hover;
-    z-index: $zindex-10;
-
-    .custom-control-label-content {
-      border-color: $black;
-      z-index: $zindex-10;
-    }
-
-    &:before,
-    &:after {
-      animation: popin $animation forwards;
-    }
-  }
-}
-
-.question-title {
-  font-size: $font-size-base * 1.2;
-  text-transform: uppercase;
-  color: gray('600');
-}
-
-.question-subtitle {
-  font-size: $font-size-base * 1.4;
-  font-weight: bold;
-}
-
-.question-img {
-  flex: 0 0 100%;
-}
-
-.question-content {
-  padding: ($spacer * 4);
-}
-
-.question-answers {
-  display: flex;
-  flex-flow: column nowrap;
-  padding-right: $checked-tag;
-}
-
-// mobile styles
-@include media-breakpoint-down(md) {
-  .question {
-    .custom-control-label {
-      @include trapeze-span-vertical-container();
-
-      // icon positionning
-      &:before {
-        top: calc(50% - #{$half-checked-tag});
-        right: -$half-checked-tag;
-        left: auto;
-      }
-
-      &:after {
-        top: calc(50% - #{$icon-checked-tag/2});
-        right: -$icon-checked-tag/2;
-        left: auto;
-      }
-    }
-
-    // border overlap
-    .custom-control-label-content {
-      margin-bottom: -1px;
-    }
-  }
-
-  .question-content {
-    padding: $spacer 0;
-  }
-
-  // checked styles
-  .custom-control-input:checked + .custom-control-label {
-    z-index: $zindex-10;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .question {
-    flex-flow: row nowrap;
-    align-items: stretch;
-    background-image: linear-gradient(to right, $white 30%, $gray-100 30%);
-    padding: 10rem 0;
-
-    h3,
-    .h3 {
-      margin-top: 0;
-    }
-
-    // icon positioning
-    .custom-control-label {
-      @include trapeze-span-horizontal-container();
-
-      &:before {
-        top: -$half-checked-tag;
-        left: calc(50% - #{$half-checked-tag});
-      }
-
-      &:after {
-        top: -$icon-checked-tag/2;
-        left: calc(50% - #{$icon-checked-tag/2});
-      }
-
-      &:hover {
-        z-index: $zindex-10;
-      }
-    }
-
-    // border overlap and stretch
-    .custom-control-label-content {
-      height: 100%;
-      margin-left: -1px;
-    }
-  }
-
-  .question-img {
-    flex: 0 0 45%;
-
-    picture,
-    img {
-      display: block;
-      width: 100% !important;
-    }
-  }
-
-  .question-answers {
-    display: flex;
-    flex-flow: row nowrap;
-    padding: 0;
-  }
-
-  .question-content {
-    padding: 0 4rem;
-  }
-}

package/src/scss/molecules/quote.scss

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

package/src/scss/molecules/search.scss

@@ -1,63 +0,0 @@
-@charset 'utf-8';
-
-.search {
-  flex: 0 0 auto;
-
-  .dropdown-toggle {
-    padding: $spacer;
-    &:after {
-      display: none;
-    }
-  }
-
-  .search-form {
-    display: flex;
-    border: none;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  }
-
-  input[type="text"] {
-    width: 12rem;
-    box-shadow: none !important;
-  }
-}
-
-.search-mobile {
-  display: none;
-
-  @include media-breakpoint-down (xl) {
-    display: flex;
-    flex-flow: row nowrap;
-    position: fixed;
-    bottom: -$mm-lang-height;
-    left: 0;
-    width: calc(100% - #{ $mm-lang-width });
-    height: $mm-lang-height;
-    transition: bottom 0.3s;
-    z-index: $zindex-mobile-lang - 1;
-
-    .form-control {
-      padding: 0 0 0 (0.4 * $spacer);
-      background: $black;
-      border: 0;
-      color: $white;
-      box-shadow: none !important;
-      border-radius: 0;
-
-      &::placeholder {
-        color: gray('300');
-      }
-    }
-
-    .input-group-text {
-      background: $black;
-      border-radius: 0;
-      border: 0;
-    }
-
-    .icon {
-      color: gray('300');
-    }
-  }
-}

package/src/scss/molecules/share.scss

@@ -1,78 +0,0 @@
-@charset 'utf-8';
-
-.social-share-container {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  background: $white;
-  color: $gray-600;
-
-  @include media-breakpoint-up(lg) {
-    flex-flow: row nowrap;
-    justify-content: space-between;
-  }
-
-  &.social-share-light {
-    display: inline-block;
-  }
-}
-
-.social-share {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-
-  @include media-breakpoint-up(lg) {
-    flex-flow: row nowrap;
-    justify-content: space-between;
-  }
-
-  .social-icon {
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-
-    @include media-breakpoint-up(lg) {
-      margin-bottom: 0;
-    }
-  }
-
-  .social-share-text {
-    flex-basis: 100%;
-    margin-right: 0.5rem;
-    margin-bottom: 0.25rem;
-
-    @include media-breakpoint-up(lg) {
-      flex-basis: auto;
-      margin-bottom: 0;
-    }
-  }
-}
-
-.social-share-copylink {
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
-
-  @include media-breakpoint-up(lg) {
-    margin-top: 0;
-  }
-
-  @include media-breakpoint-down(md) {
-    white-space: normal;
-  }
-
-  .input-group {
-    margin-left: 0.5rem;
-    padding: 0.2rem;
-    border: 1px solid $gray-200;
-
-    .form-control {
-      border: none !important;
-      box-shadow: none !important;
-      &:before { content: none; }
-    }
-  }
-}
-

package/src/scss/molecules/sidenotes.scss

@@ -1,8 +0,0 @@
-@charset 'utf-8';
-
-article aside {
-  margin-top: 0;
-  padding: 0;
-  border-top: none;
-  color: $gray-600;
-}

package/src/scss/molecules/social-feed.scss

@@ -1,27 +0,0 @@
-@charset 'utf-8';
-
-.social-feed {
-  position: relative;
-  padding: 2.2rem 1.5rem 1.5rem;
-  background: $white;
-  color: $gray-600;
-
-  strong {
-    color: $black;
-  }
-
-  .social-icon {
-    position: absolute;
-    top: -1.3rem;
-  }
-
-  .social-feed-header {
-    margin-bottom: 0.6rem;
-  }
-
-  picture {
-    img {
-      margin-bottom: $paragraph-margin-bottom;
-    }
-  }
-}

package/src/scss/molecules/sponsor.scss

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

package/src/scss/molecules/tables.scss

@@ -1,129 +0,0 @@
-@charset 'utf-8';
-
-.table {
-  width: 100%;
-
-  thead {
-    th {
-      border-bottom: 3px solid $gray-200;
-      padding: 0.3rem 0;
-    }
-  }
-
-  tbody,
-  tfoot {
-    color: $black;
-
-    td {
-      padding: 0.3rem 0;
-      border-bottom: 1px solid $gray-200;
-
-      @include media-breakpoint-down(sm) {
-        &:last-child() {
-          margin-bottom: 1.2rem;
-        }
-      }
-
-      .tablesaw-cell-label {
-        color: $black;
-      }
-    }
-  }
-
-  tfoot {
-    td {
-      border-top: 3px solid $gray-200;
-      font-weight: bold;
-    }
-  }
-}
-
-.table-boxed {
-  @include media-breakpoint-up(md) {
-    border: 1px solid $gray-200;
-  }
-
-  thead th {
-    border-top: 1px solid $gray-200;
-  }
-
-  thead th,
-  tbody td,
-  tfoot td {
-    padding-left: 0.45rem;
-    padding-right: 0.45rem;
-    border-right: 1px solid $gray-200;
-
-    @include media-breakpoint-down(sm) {
-      border-left: 1px solid $gray-200;
-    }
-  }
-}
-
-.table-sortable {
-  thead {
-    th {
-      padding: 0;
-
-      button {
-        padding: 0.3rem;
-        cursor: pointer;
-
-        .tablesaw-sortable-arrow {
-          $triangle_width: 0.29rem;
-          $triangle_height: 0.35rem;
-
-          display: block;
-          position: relative;
-          margin-top: 0.1rem;
-          float: left;
-          width: 1rem;
-          height: 1rem;
-
-          &:after {
-            content: ' ';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 0;
-            height: 0;
-            border-left: $triangle_width solid transparent;
-            border-right: $triangle_width solid transparent;
-            border-bottom: $triangle_height solid $gray-200;
-            margin: 0;
-          }
-
-          &:before {
-            content: ' ';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 0;
-            border-left: $triangle_width solid transparent;
-            border-right: $triangle_width solid transparent;
-            border-top: $triangle_height solid $gray-200;
-            margin: 0;
-          }
-        }
-      }
-
-      &.tablesaw-sortable-descending {
-        button .tablesaw-sortable-arrow:before {
-          border-top-color: $red;
-        }
-      }
-
-      &.tablesaw-sortable-ascending {
-        button .tablesaw-sortable-arrow:after {
-          border-bottom-color: $red;
-        }
-      }
-    }
-  }
-}
-
-.tablesaw-sortable-btn {
-  background: transparent;
-  border: none;
-}

package/src/scss/molecules/tabs.scss

@@ -1,167 +0,0 @@
-@charset 'utf-8';
-
-.nav-tabs {
-  .nav-item {
-    + .nav-item {
-      .nav-link {
-        margin-left: -1px;
-      }
-    }
-
-    &:first-child {
-      .nav-link {
-        border-top-left-radius: $nav-tabs-border-radius;
-      }
-    }
-
-    &:last-child {
-      .nav-link {
-        border-top-right-radius: $nav-tabs-border-radius;
-      }
-    }
-  }
-
-  .nav-link {
-    position: relative;
-    background-color: gray('100');
-    border-color: $nav-tabs-border-color;
-    text-decoration: none;
-    border-radius: 0;
-
-    &:hover {
-      z-index: $zindex-1;
-      background-color: darken(gray('100'), 5%);
-      color: $body-color;
-    }
-
-    &:focus:not(:active) {
-      z-index: $zindex-1;
-      border-color: gray('400');
-      outline: $nav-tabs-border-width solid gray('400');
-      border-radius: 0 !important; // Make sure the border-radius is removed for first and last elements.
-    }
-
-    &:active {
-      z-index: $zindex-1;
-      background: linear-gradient(0deg, gray('100') 0%, darken(gray('100'), 5%) 100%);
-    }
-
-    &.disabled {
-      background-color: darken(gray('100'), 5%);
-      border-color: $nav-tabs-border-color;
-      color: gray('300');
-      cursor: not-allowed;
-    }
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $body-color;
-
-    &:hover {
-      background-color: $nav-tabs-link-active-bg;
-    }
-  }
-}
-
-.nav-tabs-vertical-wrapper {
-  display: flex;
-
-  .nav-tabs {
-    flex: 1 0 30%;
-    max-width: 30%;
-    margin-right: -$nav-tabs-border-width;
-    border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
-  }
-
-  .nav-item {
-    &:first-child {
-      .nav-link {
-        border-top: 0;
-      }
-    }
-
-    .nav-link {
-      margin-top: 0;
-      margin-left: 0;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .tab-content {
-    flex: 2 1 70%;
-    border: $nav-tabs-border-width solid $nav-tabs-border-color;
-  }
-}
-
-.nav-tabs-vertical {
-  flex: 1 1 auto;
-  flex-direction: column;
-  border-bottom: none;
-
-  .nav-item {
-    &:first-child {
-      .nav-link {
-        border-top-left-radius: 0;
-      }
-    }
-
-    &:last-child {
-      .nav-link {
-        border-top-right-radius: 0;
-      }
-    }
-  }
-
-  .nav-link {
-    &.active {
-      border-right: $nav-tabs-border-width solid $white;
-      border-bottom-color: $nav-tabs-border-color;
-    }
-  }
-}
-
-.nav-tabs-light-wrapper {
-  margin-bottom: $spacer;
-  background-color: $white;
-  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-}
-
-.nav-tabs-light {
-  .nav-link {
-    position: relative;
-    margin-right: ($nav-link-padding-x * 2);
-    padding-right: 0;
-    padding-left: 0;
-    text-decoration: none;
-    font-weight: $font-weight-bold;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      border-bottom: 0 solid theme-color('primary');
-      transition: border-bottom 0.2s;
-    }
-
-    &.active {
-      &:after {
-        border-bottom-width: ($nav-tabs-border-width * 4);
-      }
-    }
-  }
-
-  .nav-item {
-    &:last-child {
-      .nav-link {
-        margin-right: 0;
-      }
-    }
-  }
-}

package/src/scss/molecules.scss

@@ -1,27 +0,0 @@
-@import 'molecules/access-nav';
-@import 'molecules/avatar-teaser';
-@import 'molecules/breadcrumb';
-@import 'molecules/card-deck';
-@import 'molecules/card';
-@import 'molecules/collapse-group';
-@import 'molecules/cover';
-@import 'molecules/datepicker';
-@import 'molecules/filters';
-@import 'molecules/footnotes';
-@import 'molecules/form-group';
-@import 'molecules/gallery';
-@import 'molecules/key-number';
-@import 'molecules/links-group';
-@import 'molecules/list-group';
-@import 'molecules/map';
-@import 'molecules/metabox';
-@import 'molecules/pagination';
-@import 'molecules/question';
-@import 'molecules/quote';
-@import 'molecules/search';
-@import 'molecules/share';
-@import 'molecules/sidenotes';
-@import 'molecules/social-feed';
-@import 'molecules/sponsor';
-@import 'molecules/tables';
-@import 'molecules/tabs';