epfl-elements 1.0.0 → 4.0.0

package/src/scss/atoms/button.scss

@@ -1,130 +0,0 @@
-@charset 'utf-8';
-
-.btn {
-  text-decoration: none;
-  white-space: normal;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-
-  @extend .focused;
-
-  &:before { border-width: 2px; }
-
-  &:disabled,
-  &.disabled { opacity: 1; }
-}
-
-.btn-primary {
-  font-weight: $font-weight-bold;
-
-  &:hover,
-  &.hover {
-    background: $red-dark;
-    border-color: $red-dark;
-  }
-
-  &:focus:before,
-  &.focus:before { border-color: $red-dark; }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    // ugly ↓
-    // background: linear-gradient(to bottom, $red-dark 0%, $red 100%);
-    background: darken($red-dark, 10%);
-    border-color: darken($red-dark, 10%);
-  }
-
-  &:disabled,
-  &.disabled {
-    background: $gray-100;
-    border-color: $gray-300;
-    color: $gray-300;
-
-    .bg-dark & {
-      background: $black;
-      border-color: $gray-600;
-      color: $gray-600;
-    }
-  }
-}
-
-.btn-secondary {
-  background: transparent;
-  border-color: $gray-300;
-
-  .bg-dark & {
-    border-color: $gray-600;
-    color: $white !important;
-  }
-
-  .bg-gray-100 & {
-    background-color: $body-bg;
-  }
-
-  &:hover,
-  &.hover {
-    background: $gray-100;
-    border-color: $gray-600;
-
-    .bg-dark & {
-      background: transparent;
-      border-color: $gray-100;
-    }
-  }
-
-  &:focus:before,
-  &.focus:before { border-color: $gray-600; }
-
-  .bg-dark &:focus,
-  .bg-dark &.focus {
-    border-color: $gray-100;
-    &:before { border-color: $gray-100; }
-  }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    background: linear-gradient(to bottom, $gray-100 0%, $white 100%);
-    border-color: $gray-300;
-
-    .bg-dark & {
-      background: $gray-600;
-      border-color: $white;
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    background: transparent;
-    border-color: $gray-600;
-    color: $gray-600 !important;
-  }
-}
-
-.btn-light {
-  &,
-  &:hover {
-    border-color: gray('600');
-  }
-}
-
-.btn-circle {
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background-color: $white;
-  border: none;
-  box-shadow: 0 0 0 2px rgba($black, 0.4);
-  line-height: 1;
-  color: rgba($black, 0.4);
-  transition: box-shadow 0.2s;
-  cursor: pointer;
-
-  @include hover {
-    box-shadow: 0 0 0 5px rgba($black, 0.6);
-    outline: 1rem solid transparent;
-    color: rgba($black, 0.6);
-  }
-}

package/src/scss/atoms/checkbox.scss

@@ -1,19 +0,0 @@
-@charset 'utf-8';
-
-.custom-checkbox .custom-control-label:before { border: 1px solid $gray-600; }
-
-.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before {
-  border-color: $red;
-}
-
-.custom-control-label:before {
-  top: 3px;
-
-  @include media-breakpoint-up(sm){
-    top: 4px;
-  }
-
-  @include media-breakpoint-up(md){
-    top: 5px;
-  }
-}

package/src/scss/atoms/collapse.scss

@@ -1,200 +0,0 @@
-@charset 'utf-8';
-
-$collapse-chevron-active: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{theme-color('primary')}' viewBox='0 0 6 3'%3E%3Cpath d='M3 3 6 0 0 0z'/%3E%3C/svg%3E"), "#", "%23");
-$collapse-chevron: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$gray-600}' viewBox='0 0 6 3'%3E%3Cpath d='M3 0 6 3 0 3z'/%3E%3C/svg%3E"), "#", "%23");
-$collapse-chevron-size: 12px;
-
-@mixin collapse-btn() {
-  $icon-size: 1rem;
-  $icon-size-half: $icon-size / 2;
-  $icon-thickness: 2px;
-  $icon-thickness-half: $icon-thickness / 2;
-
-  display: block;
-  position: relative;
-  width: 100%;
-  margin-bottom: 0;
-  padding: 0.9rem #{ $collapse-chevron-size + 4px } 0.9rem 0;
-  border-top: 1px solid $gray-300;
-  font-size: 1.1rem;
-  text-align: left;
-  font-weight: 800;
-  &:hover { cursor: pointer; }
-
-  &:after {
-    content: $collapse-chevron;
-    position: absolute;
-    top: $collapse-chevron-size;
-    right: 0;
-    width: $collapse-chevron-size;
-    height: ($collapse-chevron-size / 2);
-    border: 0;
-  }
-
-  &.collapsed:after {
-    content: $collapse-chevron-active;
-  }
-}
-
-.collapse-title {
-  position: relative;
-  padding: 0;
-  background: none;
-  border: none;
-  transition: box-shadow 0.25s;
-
-  &:before {
-    content: ' ';
-      position: absolute;
-      top: 0;
-      left: $spacer * -0.3;
-      width: $spacer * 0.6;
-      height: 100%;
-      background: $primary;
-      opacity: 0;
-      transition:
-        opacity 0.3s,
-        transform 0.2s;
-      z-index: $zindex-background;
-  }
-
-  &:focus {
-    outline: none;
-    position: relative;
-
-    &:before {
-      transform: translateX($spacer * -0.7);
-      opacity: 1;
-    }
-  }
-
-  &.collapse-title-desktop {
-    @include collapse-btn();
-  }
-
-  @include media-breakpoint-down(sm) {
-    @include collapse-btn();
-  }
-}
-
-.collapse-item {
-  &:not(.collapse-item-desktop) {
-    @include media-breakpoint-up(md) {
-      display: block !important;
-      height: auto !important;
-      min-height: 1px !important;
-      overflow: visible !important;
-      transition: none !important;
-    }
-  }
-}
-
-.collapse-group {
-  border-bottom: 1px solid $gray-300;
-  margin-bottom: $spacer * 2;
-}
-
-// Link collapse
-
-.link-collapse {
-  display: inline-flex;
-  align-items: baseline;
-  text-decoration: none;
-
-  &:after {
-    content: '';
-    display: inline-block;
-    width: $collapse-chevron-size;
-    height: $collapse-chevron-size;
-    margin-left: ($collapse-chevron-size / 2);
-    background: $collapse-chevron no-repeat center center;
-    background-size: contain;
-  }
-
-  &.collapsed {
-    &:after {
-      background-image: $collapse-chevron-active;
-    }
-  }
-}
-
-// Collapse helpers
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .collapse#{$infix}-show { display: block; }
-  }
-}
-
-// Collapse dropdown (shadow and top arrow)
-$collapse-drop-margin: ($grid-gutter-width * 0.3);
-
-.collapse-drop-toggle {
-  position: relative;
-  margin-bottom: $collapse-drop-margin;
-
-  &:not(.collapsed) {
-    &,
-    &:hover {
-      background: $body-color;
-      color: $body-bg;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: calc(100% + #{$collapse-drop-margin});
-      left: 50%;
-      width: 0;
-      height: 0;
-      border-left: ($collapse-drop-margin * 0.75) solid transparent;
-      border-bottom: ($collapse-drop-margin * 0.75) solid $border-color;
-      border-right: ($collapse-drop-margin * 0.75) solid transparent;
-      transform: translateX(-50%);
-    }
-  }
-}
-
-.collapse-drop {
-  &.show,
-  &.collapsing {
-    position: relative;
-    margin-top: $collapse-drop-margin / 2;
-    border-top: ($border-width * 2) solid $border-color;
-
-    > form {
-      box-shadow: $dropdown-box-shadow;
-      border-bottom: $border-width solid $border-color;
-    }
-  }
-}
-
-.collapse-partial:not(.show) {
-  display: block !important;
-  position: relative;
-  height: 7rem;
-  overflow: hidden;
-  margin-bottom: 1rem;
-}
-
-.collapse-partial > * {
-  margin: 0;
-}
-
-.collapse-partial:not(.show):after {
-  content: ' ';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 40%;
-  background: linear-gradient(0deg,white 0, rgba(255,255,255,0.9) 15%, transparent)
-}
-
-// helper classes to define partial collapse defaut height
-@for $i from 0 to 10 {
-  .collapse-partial-#{$i}:not(.show) {
-    height: #{$i*2}rem;
-  }
-}

package/src/scss/atoms/definition-list.scss

@@ -1,77 +0,0 @@
-@charset 'utf-8';
-
-// Definition list.
-.definition-list {
-  margin: $paragraph-margin-bottom 0;
-  padding-top: $paragraph-margin-bottom;
-  border-top: 2px solid $gray-100;
-  border-bottom: 2px solid $gray-100;
-
-  dd {
-    margin-bottom: $paragraph-margin-bottom;
-  }
-}
-
-// Definition list displayed in a table-like layout.
-.definition-list-grid {
-  display: grid;
-  grid-template-columns: minmax(min-content, 100px) 1fr;
-  grid-auto-rows: auto;
-  border: none;
-
-  dt {
-    grid-column: 1;
-    font-weight: $font-weight-base;
-    color: $text-muted;
-    padding-right: $grid-gutter-width / 2;
-    &:last-of-type { border-bottom: none; }
-
-    &.definition-list-item-full {
-      padding-bottom: 0;
-      border-bottom: none;
-    }
-  }
-
-  dd {
-    grid-column: 2;
-    &:last-of-type { border-bottom: none; }
-  }
-
-  dt,
-  dd {
-    margin-bottom: $grid-gutter-width / 2;
-    padding-bottom: $grid-gutter-width / 2;
-    border-bottom: $border-width solid $border-color;
-
-    &:first-of-type {
-      padding-top: $grid-gutter-width / 2;
-      border-top: $border-width solid $border-color;
-    }
-  }
-
-  .definition-list-item-full {
-    grid-column: 1 / span 2;
-  }
-}
-
-@include ie11('.definition-list-grid') {
-  display: block;
-}
-
-@include ie11('.definition-list-grid dt') {
-  float: left;
-  margin: 0;
-  border: none;
-}
-
-@include ie11('.definition-list-grid dd') {
-  @include clearfix;
-}
-
-@include ie11('.definition-list-grid .definition-list-item-full') {
-  float: none;
-  width: 100%;
-
-  @include clearfix;
-}
-

package/src/scss/atoms/drawer.scss

@@ -1,78 +0,0 @@
-@charset 'utf-8';
-
-.drawer {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 100%;
-  min-height: $header-height;
-  overflow: hidden;
-  flex-shrink: 0;
-  background: $red;
-  transition: width 0.3s ease;
-
-  &.open {
-    @include media-breakpoint-up(xl) {
-      width: auto;
-    }
-    @include media-breakpoint-down(lg) {
-      width: 50%;
-    }
-  }
-
-  .drawer-link {
-    display: block;
-    position: relative;
-    width: 20px;
-    height: 100%;
-    min-height: $header-height;
-    line-height: 1.2;
-    z-index: $zindex-5;
-    color: $white;
-    transition: width 0.3s ease;
-
-    &:hover {
-      background: $red-dark;
-    }
-
-    .text {
-      position: absolute;
-      white-space: nowrap;
-      top: 50%;
-      padding: 0 2.1em 0 1.1em;
-      transform: translateY(-50%);
-      text-decoration: underline;
-    }
-  }
-
-  .drawer-toggle {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    background: $red;
-    border: none;
-    cursor: pointer;
-    z-index: $zindex-10;
-    color: $white;
-
-    .icon {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      font-size: 1.1rem;
-      transform: translateY(-50%);
-      transform-origin: 50% 50%;
-    }
-
-    &:hover {
-      background: $red-dark;
-    }
-  }
-
-  &.open .drawer-toggle .icon {
-    transform: rotate(180deg) translateY(50%);
-  }
-}

package/src/scss/atoms/dropdown.scss

@@ -1,10 +0,0 @@
-@charset 'utf-8';
-
-.dropdown-item {
-  text-decoration: none;
-
-  &.active {
-    background: $primary;
-    color: $white !important;
-  }
-}

package/src/scss/atoms/favicon.scss

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

package/src/scss/atoms/figure.scss

@@ -1,13 +0,0 @@
-@charset 'utf-8';
-
-figure {
-  picture {
-    display: block;
-    margin-bottom: ($spacer * 0.5);
-  }
-}
-
-figcaption {
-  font-size: $font-size-xs;
-  color: $text-muted;
-}

package/src/scss/atoms/icon.scss

@@ -1,27 +0,0 @@
-@charset 'utf-8';
-
-$icon-size-base: 1em;
-
-.icon {
-  display: inline-flex;
-  align-self: center;
-  position: relative;
-  top: 0.11em;
-  width: $icon-size-base;
-  height: $icon-size-base;
-  color: inherit;
-  fill: currentColor;
-  transition: transform 0.2s;
-
-  svg {
-    width: $icon-size-base;
-    height: $icon-size-base;
-  }
-
-  .icon-right & { margin-left: 0.4em; }
-  .icon-left & { margin-right: 0.4em; }
-}
-
-.icon-rotate-90 {
-  transform: rotate(90deg);
-}

package/src/scss/atoms/input.scss

@@ -1,35 +0,0 @@
-@charset 'utf-8';
-
-.form-control {
-  transition:
-    color 0.3s,
-    border-color 0.3s,
-    outline 0.3s,
-    box-shadow 0.3s;
-
-  &:hover,
-  &.hover {
-    border-color: $gray-600;
-  }
-
-  &:focus,
-  &.focus {
-    border-color: $input-focus-border-color !important;
-    box-shadow: $input-focus-box-shadow !important;
-  }
-
-  &.is-invalid {
-    border-color: $form-feedback-invalid-color !important;
-    font-weight: 700;
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $gray-600;
-    border-color: $gray-200 !important;
-  }
-
-  @include media-breakpoint-down(sm) {
-    font-size: 16px;
-  }
-}

package/src/scss/atoms/link.scss

@@ -1,62 +0,0 @@
-@charset 'utf-8';
-
-// All links are underlined by default. Supported browsers will have the right color. https://caniuse.com/#feat=text-decoration
-a {
-  text-decoration-color: $link-hover-color;
-  transition:
-    text-decoration-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
-
-  @include hover-focus-active {
-    text-decoration-color: $link-color;
-  }
-
-  &:active {
-    color: $red;
-  }
-
-  &.text-muted {
-    text-decoration-color: $text-muted;
-
-    &:hover {
-      color: $body-color !important;
-      text-decoration-color: $body-color;
-    }
-  }
-}
-
-// Manage all the underline colors based on `text-` helper class.
-@each $color, $value in $theme-colors {
-  @include text-emphasis-variant-decoration(".text-#{$color}", $value);
-}
-
-// Special case for white links.
-@include text-emphasis-variant-decoration(".text-white", $white);
-
-// The link pretty allows you to have more cross-browser friendly link styles and the fancy focus box.
-.link-pretty {
-  @include link-pretty($red, $body-bg);
-
-  @extend .focused;
-}
-
-// Link collapse, see collapse component
-
-// Link icon
-.link-icon {
-  display: flex;
-  justify-content: space-between;
-
-  .icon {
-    content: '';
-    width: 16px;
-    height: 16px;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-  }
-
-  &:hover .icon,
-  a:hover .link-icon .icon {
-    opacity: 1;
-  }
-}