epfl-elements 1.0.0 → 4.0.0

package/src/scss/molecules/card-deck.scss

@@ -1,198 +0,0 @@
-@charset 'utf-8';
-
-.card-deck {
-  position: relative;
-  margin-left: $spacer * -0.5;
-  margin-right: $spacer * -0.5;
-  flex-wrap: wrap;
-
-  @include media-breakpoint-up(lg) {
-    > .card {
-      z-index: $zindex-1;
-      margin: $spacer * 0.5;
-
-      // only one card is present
-      &:first-child:last-child {
-        flex: 0 0 33%;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      // two cards are present
-      &:nth-last-child(n + 2) {
-        flex: 0 0 33%;
-        margin-left: auto;
-      }
-
-      &:nth-last-child(n + 2) ~ * {
-        flex: 0 0 33%;
-        margin-right: auto;
-      }
-
-      // three or more cards are present
-      &:nth-last-child(n + 3),
-      &:nth-last-child(n + 3) ~ * {
-        flex: 1 1 30%;
-        margin: $spacer * 0.5;
-      }
-    }
-
-    &.card-deck-line {
-
-      &:before {
-        content: ' ';
-        position: absolute;
-        top: 50%;
-        left: 5%;
-        width: 30%;
-        z-index: $zindex-0;
-        border-bottom: 1px solid $gray-100;
-
-        .bg-gray-100 & {
-          border-bottom-color: $gray-300;
-        }
-      }
-
-      &:after {
-        content: ' ';
-        position: absolute;
-        top: 50%;
-        right: 5%;
-        width: 30%;
-        z-index: $zindex-0;
-        border-bottom: 1px solid $gray-100;
-
-        .bg-gray-100 & {
-          border-bottom-color: $gray-300;
-        }
-      }
-
-      /*
-      * for plain cards, we add pseudo elements, allowing the lines not to touch the cards
-      */
-      > div.card {
-        &:first-child:last-child {
-          position: relative;
-
-          &:before {
-            content: ' ';
-            display: block;
-            position: absolute;
-            top: 0;
-            left: calc(#{$spacer * -1} - 1px);
-            width: $spacer;
-            height: 100%;
-            background: white;
-
-            .bg-gray-100 & {
-              background-color: $gray-100;
-            }
-          }
-
-          &:after {
-            content: ' ';
-            display: block;
-            position: absolute;
-            top: 0;
-            right: calc(#{$spacer * -1} - 1px);
-            width: $spacer;
-            height: 100%;
-            background: white;
-
-            .bg-gray-100 & {
-              background-color: $gray-100;
-            }
-          }
-        }
-
-        // two cards are present
-        &:nth-last-child(n + 2) {
-          &:before {
-            content: ' ';
-            display: block;
-            position: absolute;
-            top: 0;
-            left: calc(#{$spacer * -1} - 1px);
-            width: $spacer;
-            height: 100%;
-            background: white;
-
-            .bg-gray-100 & {
-              background-color: $gray-100;
-            }
-          }
-        }
-
-        &:nth-last-child(n + 2) ~ * {
-          &:after {
-            content: ' ';
-            display: block;
-            position: absolute;
-            top: 0;
-            right: calc(#{$spacer * -1} - 1px);
-            width: $spacer;
-            height: 100%;
-            background: white;
-
-            .bg-gray-100 & {
-              background-color: $gray-100;
-            }
-          }
-        }
-
-        // three or more cards are present
-        &:nth-last-child(n + 3),
-        &:nth-last-child(n + 3) ~ * {
-
-          &:before,
-          &:after {
-            content: none;
-          }
-
-        }
-      }
-
-      /*
-      * Styles for card-links. this is tricky because we already use before and after pseudo elements
-      * on card-links. So to avoid the line touching the card, we add a border
-      */
-      > a.card {
-
-        // only one card is present
-        &:first-child:last-child {
-          flex: 0 0 calc(33% + #{$spacer * 1.5});
-          border-left: 1rem solid white;
-          border-right: 1rem solid white;
-          .bg-gray-100 & {
-            border-right-color: $gray-100;
-            border-left-color: $gray-100;
-          }
-        }
-
-        // two cards are present
-        &:nth-last-child(n + 2) {
-          flex: 0 0 calc(33% + #{$spacer * 1.5});
-          border-left: 1rem solid white;
-          .bg-gray-100 & {
-            border-left-color: $gray-100;
-          }
-        }
-
-        &:nth-last-child(n + 2) ~ * {
-          flex: 0 0 calc(33% + #{$spacer * 1.5});
-          border-right: 1rem solid white;
-          .bg-gray-100 & {
-            border-right-color: $gray-100;
-          }
-        }
-
-        // three or more cards are present
-        &:nth-last-child(n + 3),
-        &:nth-last-child(n + 3) ~ * {
-          flex: 1 1 30%;
-          border: none;
-        }
-      }
-    }
-  }
-}

package/src/scss/molecules/card.scss

@@ -1,241 +0,0 @@
-@charset 'utf-8';
-
-//
-// Normal card
-.card {
-  flex: 1 1 0%;
-  max-width: 100%;
-  margin-bottom: $grid-gutter-width;
-
-  .bg-gray-100 & {
-    // Watch out for this, if a card is inside a white area that is
-    // itself inside a gray area, the border will be too dark.
-    border-color: gray('300');
-  }
-}
-
-.card-sm {
-  margin-bottom: $grid-gutter-width / 2;
-}
-
-.card-gray {
-  .card-footer,
-  .card-body {
-    background: $gray-100;
-    transition:
-      transform 0.2s,
-      background 0.2s;
-  }
-}
-
-a.card-gray:hover .card-body { background: $white; }
-
-.card-body {
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: $spacer;
-    padding-top: 0;
-    padding-right: 0;
-    padding-left: 0;
-    font-size: $font-size-sm;
-    color: $text-muted;
-  }
-
-  + .card-footer {
-    padding-top: 0;
-  }
-
-  p:last-of-type {
-    margin-bottom: 0;
-  }
-
-  .card-img-top + .card-title { margin-top: $card-spacer-y; }
-  .card-img-top + & {
-    border-top: none !important;
-  }
-
-  .card-sm &,
-  &.card-sm {
-    padding: $card-spacer-x * 0.5;
-  }
-}
-
-.card-header {
-  border-color: $hr-border-color;
-}
-
-.card-footer {
-  padding-bottom: $card-spacer-x;
-  border: 0;
-}
-
-//
-// Distinction is when you have a little red fancy flag in the card body.
-.card-distinction .card-body {
-  position: relative;
-  border-top: 1px solid $red !important; // Must override even on hover
-  padding-top: ($card-spacer-y * 2);
-
-  &:before {
-    content: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$red}' viewBox='0 0 20 30'%3E%3Cpath d='M0 0h20v30L10 19 0 30z'/%3E%3C/svg%3E"), "#", "%23");
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    left: $card-spacer-x;
-    width: 20px;
-    height: 30px;
-  }
-}
-
-//
-// Card info
-.card-info {
-  font-size: $font-size-sm;
-  margin-bottom: $paragraph-margin-bottom;
-  color: $text-muted;
-  &:last-of-type { margin-bottom: 0; }
-
-  // Add the separator between the elements
-  > :not(:last-of-type) {
-    &:after {
-      content: ' \203A ';
-      margin: 0 0.25em 0 0.15em;
-    }
-  }
-  .card-info-date:not(:last-child):after { content: ' \2013 '; }
-
-  a {
-    display: inline-block;
-    color: $red;
-    text-decoration: none;
-
-    @include hover {
-      @include link-pretty($red, $body-bg, $body-color);
-    }
-  }
-
-  p { color: $body-color; }
-  p + & { margin-top: $paragraph-margin-bottom; }
-}
-
-.card-info-bordered {
-  padding: ($spacer * 0.75) 0;
-  border-top: 1px solid $hr-border-color;
-  border-bottom: 1px solid $hr-border-color;
-}
-
-.card-info-border-sm {
-  padding: ($spacer * 0.25) 0;
-}
-
-//
-// Card items as links
-a.card-img-top {
-  position: relative;
-  .card-body & { display: block; }
-
-  &:before {
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: inset 0 0 0 6px $link-hover-color;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  &:hover:before {
-    opacity: 0.6;
-  }
-}
-
-a.card-title,
-.card-title a {
-  transition: color 0.3s;
-
-  @include link-pretty($red, $body-bg, $body-color);
-
-  background-position: 0 90%;
-
-  .card-gray & {
-    @include link-pretty($red, gray('100'), $body-color);
-  }
-}
-
-//
-// Whole card as a link
-a.card {
-  border: none;
-  text-decoration: none;
-
-  .card-body {
-    border: $card-border-width solid $card-border-color;
-    transition: border 0.3s;
-  }
-
-  .card-title {
-    transition: 0.4s ease;
-  }
-
-  &:hover {
-    color: $body-color;
-
-    .card-body {
-      border-color: $body-color;
-    }
-
-    .card-title {
-      color: $link-hover-color;
-    }
-  }
-}
-
-//
-// Card overlay image
-.card-img-overlay {
-  right: auto;
-  max-width: 400px;
-
-  .card-title {
-    margin-bottom: 0;
-  }
-
-  .card-title,
-  .h4 {
-    @include media-breakpoint-down(sm) {
-      font-size: $h4-font-size * 0.8;
-    }
-  }
-}
-
-// Fix for IE not handling image height correctly
-// https://github.com/philipwalton/flexbugs/issues/75
-.card-img-top,
-.card-overlay .card-img {
-  min-height: 1px;
-}
-
-//
-// Grayscale look, see event finished
-.card-grayscale {
-  &:hover {
-    .card-img-top img { filter: grayscale(0%); }
-    .card-body { opacity: 1; }
-  }
-
-  .card-img-top img {
-    transition: filter 0.2s;
-    filter: grayscale(100%);
-  }
-
-  .card-body {
-    opacity: 0.75;
-    transition:
-      opacity 0.3s,
-      background 0.3s,
-      border 0.3s !important;
-  }
-}

package/src/scss/molecules/collapse-group.scss

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

package/src/scss/molecules/cover.scss

@@ -1,17 +0,0 @@
-@charset 'utf-8';
-
-.cover {
-  position: relative;
-
-  figcaption {
-    position: absolute;
-    right: ($grid-gutter-width / 2);
-    bottom: ($grid-gutter-width / 2);
-    z-index: $zindex-1;
-
-    @include media-breakpoint-up(md) {
-      right: $grid-gutter-width;
-      bottom: $grid-gutter-width;
-    }
-  }
-}

package/src/scss/molecules/datepicker/datepicker-fancy.scss

@@ -1,161 +0,0 @@
-@charset 'utf-8';
-
-.datepicker-fancy {
-  display: none;
-
-  & + .picker .picker__holder {
-    background: none;
-
-    @include media-breakpoint-down (sm) {
-      overflow: hidden;
-      padding: 1.1rem 0 0.9rem;
-      border-left: 0;
-      border-right: 0;
-
-      table {
-        display: block;
-        position: relative;
-        min-height: 3rem;
-
-        @each $i in (1, 2, 3, 4, 5, 6) {
-          tbody[data-week="#{$i}"] {
-            $left: $i - 1;
-
-            left: calc(-100% * #{$left});
-          }
-        }
-
-        tbody {
-          position: absolute;
-          top: 1.3;
-          left: 0;
-        }
-
-        tbody,
-        thead {
-          display: flex;
-          flex-flow: row nowrap;
-          width: 100%;
-
-          tr {
-            display: flex;
-            flex: 0 0 100%;
-
-            td,
-            th {
-              display: block;
-              flex: 1 1 auto;
-              padding-bottom: 0.2rem;
-            }
-          }
-        }
-      }
-    }
-
-    @include media-breakpoint-up (md) {
-      $tablewidth: 500px;
-
-      padding: 3.5rem 0 4rem !important;
-
-      .picker__header {
-        position: initial;
-      }
-
-      .picker__box {
-        position: relative;
-      }
-
-      .picker__nav--prev,
-      .picker__nav--next {
-        top: 50%;
-        width: 3.8rem;
-        height: 3.8rem;
-        background: $white;
-        transition: box-shadow 0.2s;
-        z-index: $zindex-10;
-
-        &:before {
-          top: 1.64rem;
-          left: 0;
-          border-color: $red $red transparent transparent;
-          transition: border-width 0.2s;
-        }
-
-        &:hover {
-          box-shadow: 0 0 20px 1px rgba(33, 33, 33, 0.25);
-          border: 1px solid $gray-100;
-
-          &:before {
-            border-color: $red-dark $red-dark transparent transparent;
-            border-width: 3px 3px 0 0;
-          }
-        }
-      }
-
-      .picker__nav--prev {
-        left: calc(50% - #{$tablewidth} / 2 - 4.3rem);
-      }
-
-      .picker__nav--next {
-        right: calc(50% - #{$tablewidth} / 2 - 4.3rem);
-      }
-
-      .picker__table {
-        max-width: $tablewidth;
-        margin: auto;
-      }
-
-      .picker__day {
-        width: 2.7rem;
-        height: 2.7rem;
-        padding: 0.4325em 0;
-        line-height: 1.6rem;
-        transition: border 0.2s;
-        margin-bottom: 0.2rem;
-      }
-
-      .picker__weekday {
-        padding-bottom: 1.1em;
-      }
-    }
-
-    .picker__day--highlighted {
-      font-weight: bold;
-      color: $red;
-      border-color: transparent;
-
-      &.picker__day--selected {
-        color: $white;
-      }
-    }
-
-    .picker__day--today {
-      border-color: $red;
-    }
-
-    .nextMonthLabel,
-    .prevMonthLabel {
-      position: absolute;
-      top: 6.8rem;
-      font-size: 8rem;
-      font-weight: bold;
-      color: $gray-200;
-      text-transform: uppercase;
-    }
-
-    .nextMonthLabel {
-      left: calc(50% + 19rem);
-    }
-
-    .prevMonthLabel {
-      right: calc(50% + 19rem);
-    }
-  }
-
-  & + .picker {
-    & + .nextMonthLabel,
-    & ~ .prevMonthLabel {
-      display: none;
-    }
-  }
-}

package/src/scss/molecules/datepicker/datepicker.scss

@@ -1,107 +0,0 @@
-@charset 'utf-8';
-
-.datepicker {
-  display: none;
-}
-
-.datepicker-wrapper .picker__holder {
-  padding: 0.5rem 0;
-  background: $white;
-  border: 1px solid $gray-100;
-}
-
-.datepicker-wrapper .picker__header {
-  margin-bottom: 1.4em;
-
-  @include media-breakpoint-down(sm) {
-    text-align: left;
-  }
-}
-
-.datepicker-wrapper .picker__month { font-weight: 700; }
-.datepicker-wrapper .picker__year { font-style: normal; }
-
-.datepicker-wrapper .picker__nav--next,
-.datepicker-wrapper .picker__nav--prev {
-  right: 0;
-  width: 2.4rem;
-  height: 2.4rem;
-  padding: 0;
-  border: 1px solid $gray-100;
-  border-radius: 100%;
-  text-align: center;
-  transition: border 0.2s;
-
-  &:hover,
-  &:focus {
-    background: transparent;
-    border: 1px solid $gray-600;
-  }
-}
-
-.datepicker-wrapper .picker__nav--prev {
-  right: auto;
-  left: 0;
-
-  @include media-breakpoint-down(sm) {
-    right: 3rem;
-    left: auto;
-  }
-}
-
-.datepicker-wrapper .picker__nav--next:before,
-.datepicker-wrapper .picker__nav--prev:before {
-  content: ' ';
-  display: inline-block;
-  position: relative;
-  top: 0.95rem;
-  right: 0.1rem;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-style: solid;
-  border-width: 2px 2px 0 0;
-  border-color: $black $black transparent transparent;
-  transform: rotate(45deg);
-  vertical-align: top;
-}
-
-.datepicker-wrapper .picker__nav--prev:before {
-  right: auto;
-  left: 0.1rem;
-  transform: rotate(-135deg);
-}
-
-.datepicker-wrapper .picker__day {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  width: 2.4rem;
-  height: 2.4rem;
-  padding: 0 !important;
-  background: transparent !important;
-  line-height: 1.65rem;
-  border-radius: 100%;
-
-  &:hover,
-  &:focus {
-    border: 1px solid $gray-200;
-  }
-
-  &.picker__day--today {
-    border-color: $red;
-    &:before { content: none; }
-  }
-
-  &.picker__day--highlighted {
-    border-color: $gray-200 !important;
-    font-weight: normal;
-    color: $body-color;
-  }
-
-  &.picker__day--selected {
-    background: $red !important;
-    border-color: $red;
-    color: $white;
-  }
-}

package/src/scss/molecules/datepicker.scss

@@ -1,2 +0,0 @@
-@import 'datepicker/datepicker';
-@import 'datepicker/datepicker-fancy';