epfl-elements 1.0.0 → 4.0.0

package/src/scss/atoms/list.scss

@@ -1,81 +0,0 @@
-@charset 'utf-8';
-
-.list-bullet {
-  padding-left: 0;
-  margin-left: -0.7rem;
-
-  li {
-    list-style-type: none;
-    padding-left: $spacer;
-    position: relative;
-
-    $bullet-size: $spacer * 0.8;
-
-    &:before {
-      content: '';
-      background: $red;
-      top: 0.7rem;
-      right: calc(100% - 0.5rem);
-      font-size: 1.1rem;
-      line-height: $bullet-size;
-      position: absolute;
-      width: 6px;
-      height: 5px;
-    }
-  }
-
-  &.list-unstyled {
-    margin-left: 0;
-    li:before { display: none; }
-  }
-
-  ul { padding-left: 0; }
-  ul li:before {
-    background: transparent;
-    border: 1px solid $red;
-  }
-  ul ul li:before {
-    background: $red;
-    border: none;
-  }
-}
-
-.list-numbered {
-  counter-reset: item;
-  padding-left: 0;
-  margin-left: -0.9rem;
-
-  li {
-    list-style-type: none;
-    padding-left: $spacer;
-    position: relative;
-
-    &:before {
-      content: counter(item);
-      counter-increment: item;
-      position: absolute;
-      top: 0.3rem;
-      right: calc(100% - 0.5rem);
-      font-size: 0.8rem;
-      font-weight: $font-weight-bold;
-      color: $red;
-    }
-  }
-
-  ol {
-    counter-reset: secondary-item;
-    padding-left: 0;
-  }
-  ol ol { counter-reset: third-item; }
-
-  ol li:before {
-    content: counter(item) "." counter(secondary-item);
-    counter-increment: secondary-item;
-    font-weight: $font-weight-normal;
-  }
-
-  ol ol li:before {
-    content: counter(item) "." counter(secondary-item) "." counter(third-item);
-    counter-increment: third-item;
-  }
-}

package/src/scss/atoms/loader.scss

@@ -1,16 +0,0 @@
-@charset 'utf-8';
-
-@keyframes rotation {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.loader {
-  display: inline-block;
-  width: 0.9rem;
-  height: 0.9rem;
-  border: 3px solid gray('200');
-  border-right-color: gray('600');
-  border-radius: 100%;
-  animation: rotation 1s linear infinite;
-}

package/src/scss/atoms/nav-lang.scss

@@ -1,208 +0,0 @@
-@charset 'utf-8';
-
-.nav-lang {
-  display: flex;
-  margin-right: $spacer * 3;
-
-  &.show {
-    .dropdown-toggle {
-      border: 1px solid gray('500');
-    }
-  }
-
-  .dropdown-toggle,
-  .dropdown-item {
-    position: relative;
-    padding: ($spacer * 0.4) ($spacer * 2) ($spacer * 0.6) ($spacer * 0.7);
-    font-size: $font-size-sm;
-    font-weight: bold;
-    transition: background 0.2s ease;
-  }
-
-  .dropdown-toggle {
-    &:before {
-      content: ' ';
-      position: absolute;
-      top: calc(50% - 0.35rem);
-      right: 0.5rem;
-      left: auto;
-      width: 0;
-      height: 0;
-      border-top: 0;
-      border-right: .3em solid transparent;
-      border-bottom: .3em solid;
-      border-left: .3em solid transparent;
-    }
-
-    &:after {
-      position: absolute;
-      right: 0.5rem;
-      bottom: calc(50% - 0.45rem);
-    }
-  }
-
-  .dropdown-menu ul,
-  .dropdown-menu li,
-  .dropdown-menu a,
-  .dropdown-toggle {
-      width: 5.8rem;
-  }
-
-  .dropdown-menu {
-    padding: 0;
-    background: none;
-    border: 0;
-    margin-top: 0;
-    transform: translate3d(0px, 40px, 0px) !important;
-
-    a:not(.active) {
-      background: white;
-      border: 1px solid gray('500');
-
-      &:hover {
-        background: gray('100');
-      }
-    }
-  }
-
-  a.active {
-    border: 1px solid $primary;
-    color: $white !important;
-
-    .icon {
-      color: $white;
-    }
-  }
-
-  .icon {
-    margin-right: $spacer * 0.5;
-    font-size: $font-size-base * 1.1;
-    color: gray('600');
-    transform: translateY($spacer * 0.13);
-  }
-
-  .dropdown-item {
-    margin-top: -1px;
-  }
-
-  .dropdown-item:not(.active):active {
-      color: $black;
-      border-color: black !important;
-      z-index: 20;
-    }
-}
-
-.nav-lang-short ul{
-  display: flex;
-  flex-flow: row nowrap;
-  list-style-type: none;
-  margin-bottom: 0;
-  padding: 0;
-  font-size: $font-size-base;
-  li{
-    position: relative;
-    font-weight: bold;
-
-    & + li {
-
-      a {
-        padding-left: 0.5 * $spacer;
-      }
-
-      &:before {
-        content: ' ';
-        display: block;
-        position: absolute;
-        top: 0.3 * $spacer;
-        left: 0 * $spacer;
-        width: 1px;
-        height: 0.9 * $spacer;
-        background: gray('200');
-      }
-    }
-
-    .active {
-      color: theme-color('primary');
-    }
-
-    a {
-      color: gray('500');
-
-      &:hover {
-        color: $body-color;
-      }
-    }
-    a,
-    span {
-      padding: 0.4 * $spacer;
-      text-decoration: none;
-    }
-  }
-}
-
-.nav-lang-mobile {
-  display: none;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  width: $mm-lang-width + 0.1rem;
-  height: $mm-lang-height + 0.1rem !important;
-  border-radius: 0;
-  overflow: hidden;
-  opacity: 0;
-  z-index: $zindex-mobile-lang + 2;
-}
-
-@include media-breakpoint-down(lg) {
-  .nav-lang {
-    position: fixed;
-    right: 0;
-    bottom: $mm-lang-height * -1;
-    width: $mm-lang-width;
-    margin: 0;
-    transition: bottom 0.3s ease;
-    z-index: $zindex-mobile-lang;
-
-    .dropdown-toggle, &.nav-lang-short ul {
-      height: $mm-lang-height;
-      padding-top: 0.67rem;
-      background: gray('600');
-      border-color: gray('600');
-      color: $white;
-      border-radius: 0;
-
-      .icon {
-        color: $white;
-      }
-    }
-    &.nav-lang-short ul{
-        display: flex;
-        width: 100%;
-        padding-left: 0.5em;
-        padding-right: 0.5em;
-        padding-top: 0;
-        font-size: $font-size-base;
-
-        li{
-          flex-grow: 1;
-          padding: 0;
-          a, span{
-            display: block;
-            padding: 0;
-            line-height: $mm-lang-height;
-            text-align: center;
-            color: gray('300');
-
-            &.active{
-              color: $white;
-            }
-          }
-          & + li {
-            &:before {
-              display: none;
-            }
-          }
-        }
-    }
-  }
-}

package/src/scss/atoms/nav-toggle-mobile.scss

@@ -1,62 +0,0 @@
-@charset 'utf-8';
-
-.nav-toggle-mobile {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: baseline;
-  margin-left: 1 * $spacer;
-  padding: (0.7 * $spacer) (1.2 * $spacer);
-  font-size: 1.25 * $font-size-base;
-  font-weight: bold !important;
-
-  .hamburger {
-    margin-left: 0.4 * $spacer;
-
-    span {
-      display: block;
-      width: 1 * $spacer;
-      height: 2px;
-      background: $body-color;
-      opacity: 1;
-      transition:
-        transform 0.3s,
-        opacity 0.3s;
-
-      & + span {
-        margin-top: 3px;
-      }
-    }
-  }
-}
-
-.mobile-menu-open {
-  .hamburger {
-    position: relative;
-
-    span {
-      background: color('red');
-
-      &:nth-child(1) {
-        transform:
-          rotate(45deg)
-          translateY(0.17 * $spacer)
-          translateX(0.28 * $spacer);
-      }
-
-      &:nth-child(2) {
-        transform:
-          rotate(-45deg)
-          translateY(0.06 * $spacer)
-          translateX(0.05 * $spacer);
-      }
-
-      &:nth-child(3) {
-        opacity: 0;
-      }
-    }
-  }
-
-  .header {
-    overflow: hidden;
-  }
-}

package/src/scss/atoms/nav-toggle.scss

@@ -1,52 +0,0 @@
-@charset 'utf-8';
-
-.nav-toggle {
-  display: none;
-  position: relative;
-  top: 1px;
-  z-index: $zindex-toggle;
-  margin-right: $grid-gutter-width / 3;
-  padding: $spacer / 4 $spacer / 2;
-  &:hover { cursor: pointer; }
-
-  .loader {
-    display: none;
-    margin-right: 0.2rem;
-  }
-
-  &.is-loading {
-    .loader { display: inline-block; }
-    .icon { display: none !important; }
-  }
-
-  .icon {
-    margin-right: 0.2rem;
-    font-size: 0.7rem;
-
-    &:first-of-type {
-      display: block;
-    }
-
-    &:last-of-type {
-      display: none;
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .bg-gray-100 &:after { background: gray('100'); }
-  }
-}
-
-.desktop-menu-open .nav-toggle {
-  .icon:first-of-type {
-    display: none;
-  }
-
-  .icon:last-of-type {
-    display: block;
-  }
-}

package/src/scss/atoms/picture.scss

@@ -1,4 +0,0 @@
-@charset 'utf-8';
-
-// Force images in picture tags to take the whole width.
-picture .img-fluid { width: 100%; }

package/src/scss/atoms/popover.scss

@@ -1,71 +0,0 @@
-@charset 'utf-8';
-
-$popover-border-bottom-color: $black;
-
-.popover {
-  border-bottom-color: $popover-border-bottom-color;
-
-  @include media-breakpoint-down(sm) {
-    width: $popover-max-width;
-    max-width: 90vw;
-  }
-
-  &:after,
-  &:before {
-    content: '';
-    position: absolute;
-    top: 100%;
-    right: $popover-arrow-width;
-    border-style: solid;
-    border-width: 0 $popover-arrow-width $popover-arrow-height 0;
-    border-color: transparent $popover-arrow-color transparent transparent;
-  }
-
-  &:before {
-    border-width: 0 ($popover-arrow-width + $popover-border-width) ($popover-arrow-height + $popover-border-width) 0;
-    border-right-color: $popover-arrow-outer-color;
-  }
-
-  &:after {
-    box-shadow: $popover-border-width 0 0 0 $popover-border-bottom-color;
-  }
-}
-
-.bs-popover-bottom {
-  &:after,
-  &:before {
-    top: auto;
-    bottom: 100%;
-    border-width: $popover-arrow-height $popover-arrow-width 0 0;
-    border-color: transparent $popover-arrow-color transparent transparent;
-  }
-
-  &:before {
-    border-width: ($popover-arrow-height + $popover-border-width) ($popover-arrow-width + $popover-border-width) 0 0;
-    border-right-color: $popover-arrow-outer-color;
-  }
-}
-
-.btn-circle[data-toggle="popover"] {
-  .icon:last-child {
-    display: none;
-  }
-
-  &[aria-describedby] {
-    color: $link-hover-color;
-
-    .icon {
-      &:first-child {
-        display: none;
-      }
-
-      &:last-child {
-        display: inline-block;
-      }
-    }
-
-    @include hover {
-      color: darken($link-hover-color, 5%);
-    }
-  }
-}

package/src/scss/atoms/radio.scss

@@ -1,7 +0,0 @@
-@charset 'utf-8';
-
-.custom-radio .custom-control-label:before { border: 1px solid $gray-600; }
-
-.custom-radio .custom-control-input:checked ~ .custom-control-label:before {
-  border-color: $red;
-}

package/src/scss/atoms/select.scss

@@ -1,139 +0,0 @@
-@charset 'utf-8';
-
-.ms-parent {
-  display: block;
-  position: relative;
-}
-
-.ms-choice {
-  display: block;
-  width: 100%;
-  height: $custom-select-height;
-  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
-  overflow: hidden;
-  white-space: nowrap;
-  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
-  background-size: $custom-select-bg-size;
-  border: $custom-select-border-width solid $custom-select-border-color;
-  border-radius: $custom-select-border-radius;
-  text-align: left;
-  text-decoration: none;
-  line-height: $custom-select-line-height;
-  color: $custom-select-color;
-
-  &:focus {
-    border-color: $custom-select-focus-border-color;
-    box-shadow: $custom-select-focus-box-shadow;
-    outline: none;
-  }
-
-  &.disabled {
-    background-color: $custom-select-disabled-bg;
-    background-image: none;
-    border: $custom-select-border-width solid $custom-select-border-color;
-    cursor: default;
-  }
-
-  > span {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.placeholder {
-      color: $input-placeholder-color;
-    }
-  }
-
-  > div {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 25px;
-    background: url('multiple-select.png') left top no-repeat;
-
-    &.open {
-      background: url('multiple-select.png') right top no-repeat;
-    }
-  }
-}
-
-.ms-drop {
-  display: none;
-  position: absolute;
-  width: 100%;
-  min-width: $dropdown-min-width;
-  overflow: hidden;
-  margin-top: -$dropdown-border-width;
-  padding: $dropdown-padding-y 0;
-  z-index: $zindex-dropdown;
-  background: $dropdown-bg;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  color: $dropdown-link-color;
-  box-shadow: $dropdown-box-shadow;
-
-  &.bottom {
-    top: 100%;
-    border-bottom-right-radius: $dropdown-border-radius;
-    border-bottom-left-radius: $dropdown-border-radius;
-  }
-
-  &.top {
-    bottom: 100%;
-    border-top-right-radius: $dropdown-border-radius;
-    border-top-left-radius: $dropdown-border-radius;
-  }
-
-  ul {
-    overflow: auto;
-    margin: 0;
-    padding: 0;
-
-    > li {
-      list-style: none;
-      background-image: none;
-
-      .disabled {
-        color: $dropdown-link-disabled-color;
-      }
-
-      &.multiple {
-        display: block;
-        float: left;
-      }
-
-      &.group {
-        clear: both;
-      }
-    }
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0;
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-      background-color: $dropdown-link-hover-bg;
-      color: $dropdown-link-hover-color;
-    }
-
-    &.optgroup {
-      font-weight: $font-weight-bold;
-    }
-  }
-
-  input[type="checkbox"] {
-    vertical-align: middle;
-    margin-right: 0.5em;
-    margin-bottom: 0.25em;
-  }
-
-  .ms-no-results {
-    display: none;
-  }
-}

package/src/scss/atoms/separator.scss

@@ -1,9 +0,0 @@
-@charset 'utf-8';
-
-hr {
-  width: 100%;
-
-  &.bold {
-    border-top-width: 3px;
-  }
-}