epfl-elements 1.0.1 → 4.0.0

package/src/scss/atoms/social-icon.scss

@@ -1,128 +0,0 @@
-@charset 'utf-8';
-
-.social-icon {
-  display: inline-block;
-  padding: 0.7rem;
-  background: gray('100');
-  border-radius: 0.17rem;
-  line-height: 0;
-
-  .icon {
-    top: 0;
-    font-size: 24px;
-    color: $white;
-  }
-}
-
-a.social-icon {
-  margin-bottom: $spacer * 0.3;
-  transition:
-    transform 0.2s ease,
-    background-color 0.2s ease,
-    background-image 0.2s ease;
-
-  &:hover,
-  &:focus {
-    transform: translateY(-0.2rem);
-    box-shadow: 0;
-  }
-}
-
-.social-icon-facebook {
-  background-color: $facebook;
-}
-
-.social-icon-twitter {
-  background-color: $twitter;
-}
-
-.social-icon-whatsapp {
-  background-color: $whatsappgreen;
-}
-
-.social-icon-mail-plane {
-  background-color: $blue;
-}
-
-.social-icon-googleplus {
-  background-color: $googleplus;
-}
-
-.social-icon-linkedin {
-  background-color: $linkedin;
-}
-
-.social-icon-youtube {
-  background-color: $youtube;
-}
-
-.social-icon-youtube svg {
-  transform:scale(1.3);
-}
-
-// From https://codepen.io/katydecorah/pen/PNLePj
-%instagradient {
-  background:
-    // left bottom
-    radial-gradient(circle farthest-corner at 35% 90%, $instagramyellow, transparent 50%),
-    radial-gradient(circle farthest-corner at 0 140%, $instagramyellow, transparent 50%),
-    // left top
-    radial-gradient(ellipse farthest-corner at 0 -25%, $instagramblue, transparent 50%),
-    radial-gradient(ellipse farthest-corner at 20% -50%, $instagramblue, transparent 50%),
-    //  right top
-    radial-gradient(ellipse farthest-corner at 100% 0, $instagrampurple, transparent 50%),
-    radial-gradient(ellipse farthest-corner at 60% -20%, $instagrampurple, transparent 50%),
-    // right bottom
-    radial-gradient(ellipse farthest-corner at 100% 100%, $instagrammagenta, transparent),
-    /////// create a base coat to smooth
-    /////// corner gradients
-    linear-gradient($instagramblue-2, $instagrampurple-2 30%, $instagrammagenta-2 50%, $instagramorange-2 70%, $instagramyellow-2 100%);
-}
-
-.social-icon-instagram {
-  @extend %instagradient;
-}
-
-.social-icon-round {
-  border-radius: 100% !important;
-  padding: 0.8rem;
-  &:before { border-radius: 100% !important; }
-
-  &.social-icon-instagram {
-    @extend %instagradient;
-  }
-}
-
-.social-icon-negative {
-  padding: 0.5rem;
-  background: transparent;
-  transition: background 0.2s;
-
-  .icon {
-    font-size: 1.5rem;
-    color: $body-color;
-    transition: fill 0.2s;
-  }
-
-  &:hover {
-    background: $red !important;
-
-    .icon {
-      color: $white !important;
-    }
-  }
-}
-
-.social-icon-discrete {
-  .icon {
-    transition: fill 0.2s ease;
-  }
-
-  &:not(:hover) {
-    background: gray('100');
-
-    .icon {
-      color: gray('600');
-    }
-  }
-}

package/src/scss/atoms/tag.scss

@@ -1,162 +0,0 @@
-@charset 'utf-8';
-
-a.tag {
-  &:hover {
-    background: $gray-100;
-    border-top-color: darken($gray-300, 10%);
-    border-right-color: darken($gray-300, 10%);
-    border-left-color: darken($gray-300, 10%);
-    color: $black;
-    text-decoration: none;
-  }
-}
-
-.tag {
-  display: inline-block;
-  margin: 0 0.1em 0.3em 0;
-  padding: 0.4em 0.6em;
-  text-decoration: none;
-  background: $white;
-  border: 1px solid $gray-300;
-  line-height: 1;
-  font-weight: 400;
-  color: $gray-800;
-  border-radius: $border-radius;
-  transition:
-    color 0.2s ease-in-out,
-    background 0.2s ease-in-out;
-
-  .remove {
-    text-decoration: none;
-    float: right;
-    font-size: 1.25em;
-    line-height: 0.5em;
-    margin-top: 0.2em;
-    margin-left: 0.3em;
-    color: inherit;
-
-    &:hover {
-      color: $red;
-    }
-  }
-
-  &.tag-sm {
-    font-size: 0.75em;
-  }
-
-  &.tag-plain {
-    border-color: $gray-600;
-    background: $gray-600;
-    color: $white;
-  }
-
-  @each $color, $value in $theme-colors {
-    &.tag-#{$color} {
-      @if $color == "secondary" {
-        border-bottom: 1px solid $black;
-      }
-
-      @else if $color == "light" {
-        border-bottom: 1px solid $gray-300;
-      }
-
-      @else {
-        border-bottom: 1px solid $value;
-      }
-    }
-  }
-}
-
-.tag-group {
-  padding: 1em;
-  background: darken($white, 5%);
-  border-radius: $border-radius;
-  border: 1px solid $gray-300;
-
-  label {
-    font-size: 0.85em;
-    color: $gray-600;
-  }
-}
-
-.tag-input {
-  &:not(.selectize-control) {
-    width: 100%;
-  }
-
-  &.tag-input-sm + .tag-input .tag {
-    font-size: $font-size-sm;
-  }
-
-  .selectize-input {
-    padding: 0.3em 0.2em 0.1em;
-    background: darken($white, 5%);
-    border-radius: $border-radius;
-    border: 1px solid $gray-300;
-  }
-}
-
-.selectize-control {
-  cursor: text;
-
-  .selectize-input {
-    @extend .form-control;
-
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    min-height: $input-height;
-
-    .tag {
-      margin-right: 0.4em;
-      cursor: pointer;
-
-      &.active,
-      &:hover {
-        background: $gray-100;
-        border-top-color: darken($gray-300, 10%);
-        border-right-color: darken($gray-300, 10%);
-        border-left-color: darken($gray-300, 10%);
-        color: $black;
-        text-decoration: none;
-      }
-    }
-
-    input {
-      margin: 0 0.1em 0.2em 0;
-      padding: 0.2em 0.4em;
-      background: none;
-      min-width: 15px !important; // Displays blinking cursor on first focus in some browsers
-      border: 0;
-      line-height: 1;
-      outline: none;
-    }
-  }
-
-  .selectize-dropdown {
-    position: absolute;
-    background: $white;
-    border: 1px solid $gray-300;
-    border-top: none;
-  }
-
-  .selectize-dropdown-content {
-    max-height: 200px;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    .option,
-    .create {
-      border-top: 1px solid $gray-200;
-      padding: 0.4em 0.6em;
-      color: $gray-700;
-      cursor: pointer;
-
-      &:hover,
-      &.active {
-        background-color: lighten($gray-100, 5%);
-        color: $body-color;
-      }
-    }
-  }
-}

package/src/scss/atoms/trapeze.scss

@@ -1,31 +0,0 @@
-@charset 'utf-8';
-
-// vertical
-
-.trapeze-vertical-container {
-  @include trapeze-span-vertical-container();
-}
-
-.trapeze-vertical {
-  @include trapeze-span-vertical();
-}
-
-// horizontal
-
-.trapeze-horizontal-container {
-  @include trapeze-span-horizontal-container();
-}
-
-.trapeze-horizontal {
-  @include trapeze-span-horizontal();
-}
-
-// use pseudo-classes for the trapeze instead of <span>
-
-.link-trapeze-vertical {
-  @include link-trapeze();
-}
-
-.link-trapeze-horizontal {
-  @include link-trapeze(horizontal);
-}

package/src/scss/atoms/upload.scss

@@ -1,17 +0,0 @@
-@charset 'utf-8';
-
-.upload {
-  padding: 1rem 0.85rem;
-  border: 1px solid $gray-300;
-
-  ul { margin-left: 0.3rem; }
-}
-
-.upload-input {
-  position: absolute;
-  overflow: hidden;
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  z-index: $zindex-background;
-}

package/src/scss/atoms/video.scss

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

package/src/scss/atoms.scss

@@ -1,27 +0,0 @@
-@import 'atoms/alert';
-@import 'atoms/button';
-@import 'atoms/checkbox';
-@import 'atoms/collapse';
-@import 'atoms/definition-list';
-@import 'atoms/drawer';
-@import 'atoms/dropdown';
-@import 'atoms/favicon';
-@import 'atoms/figure';
-@import 'atoms/icon';
-@import 'atoms/input';
-@import 'atoms/link';
-@import 'atoms/list';
-@import 'atoms/loader';
-@import 'atoms/nav-lang';
-@import 'atoms/nav-toggle-mobile';
-@import 'atoms/nav-toggle';
-@import 'atoms/picture';
-@import 'atoms/popover';
-@import 'atoms/radio';
-@import 'atoms/select';
-@import 'atoms/separator';
-@import 'atoms/social-icon';
-@import 'atoms/tag';
-@import 'atoms/trapeze';
-@import 'atoms/upload';
-@import 'atoms/video';

package/src/scss/base.scss

@@ -1,9 +0,0 @@
-@charset "UTF-8";
-
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');
-
-@import 'config';
-@import 'atoms';
-@import 'molecules';
-@import 'organisms';
-@import 'content-types';

package/src/scss/config/helpers.scss

@@ -1,161 +0,0 @@
-@charset 'utf-8';
-
-// Responsive sr-only
-@each $breakpoint in map-keys($grid-breakpoints) {
-  .sr-only-#{$breakpoint} {
-    @include media-breakpoint-up($breakpoint) {
-      @include sr-only();
-    }
-  }
-}
-
-// Intro.js
-.introjs-tooltip {
-  min-width: 500px !important;
-  max-width: 60% !important;
-}
-.introjs-helperNumberLayer { background: theme-color('primary') !important; }
-
-.focused {
-  position: relative;
-
-  &:before {
-    content: ' ';
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    bottom: -5px;
-    left: -5px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    transform: scale(1);
-    transition:
-      transform 0.1s ease,
-      border-color 0.3s;
-  }
-
-  &:focus,
-  &.focus {
-    box-shadow: none !important;
-    outline: none !important;
-
-    &:before {
-      transform: scale(1);
-      border-color: $red;
-    }
-  }
-
-  &:active {
-    &:before {
-      content: none;
-    }
-  }
-}
-
-//
-// Display helpers
-.flex-grow {
-  flex: 1 1 auto;
-}
-
-// Layout helpers
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .offset#{$infix}-top { margin-top: $spacer * -4; }
-  }
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-//
-// Text helpers
-.text-small {
-  font-size: $font-size-xs;
-}
-
-.text-arrow {
-  display: flex;
-  justify-content: space-between;
-
-  &:after {
-    content: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{$text-muted}' d='M11.586 7L6.293 1.707 7.707.293 15.414 8l-7.707 7.707-1.414-1.414L11.586 9H0V7h11.586z'/%3E%3C/svg%3E"), "#", "%23");
-    display: block;
-    margin-left: auto;
-    opacity: 0.6;
-    transition: opacity 0.2s;
-  }
-
-  a:hover & {
-    &:after {
-      opacity: 1;
-    }
-  }
-}
-
-.text-padded {
-  background-color: $white;
-  box-shadow: 0.444rem 0 0 $white, -0.444rem 0 0 $white; // Around 8px
-  box-decoration-break: clone;
-}
-
-.text-spread {
-  letter-spacing: 3px;
-}
-
-/*
-  Triangles
-*/
-.triangle-outer-bottom-right {
-  position: relative;
-}
-
-.triangle-outer-bottom-right:after {
-  content: '';
-  display: block;
-  position: absolute;
-  bottom: -0.24rem;
-  left: -1.3rem;
-  border-left: 1rem solid transparent;
-  border-top: 1rem solid $red;
-  border-right: 1rem solid transparent;
-  width: 0;
-  height: 0;
-  transform: rotate(-45deg);
-  transition: background 0.15s;
-}
-
-.triangle-outer-top-right:after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0.479rem;
-  left: -1.3rem;
-  border-left: 1rem solid transparent;
-  border-top: 1rem solid $red;
-  border-right: 1rem solid transparent;
-  width: 0;
-  height: 0;
-  transform: rotate(-45deg);
-  transition: background 0.15s;
-}
-
-// Gray background helpers.
-@each $key, $value in $grays {
-  @include bg-variant(".bg-gray-#{$key}", $value);
-}
-
-// Separator
-hr {
-  width: 100%;
-}
-
-// generate all bg-gray helpers
-@each $key, $value in $grays {
-  .text-gray-#{$key} {
-    color: $value !important;
-  }
-}

package/src/scss/config/layout.scss

@@ -1,96 +0,0 @@
-@charset 'utf-8';
-
-// Retrieve content coloumn width
-@function col-width($breakpoint, $columns) {
-  @return map-get($container-max-widths, $breakpoint)  * $columns / $grid-columns;
-}
-
-//
-// GRID MANAGEMENT
-//
-// Wrap everything in this class (must be taking the full viewport width) to enable
-// CSS Grid for immediate children.
-//
-// All items that must not take the "content" area into account have the class
-// "container-full". Inside those items, use a regular Bootstrap layout as you
-// would in a normal setup.
-//
-
-.container-grid {
-  display: grid;
-  grid-template-rows: auto;
-  grid-column-gap: $grid-gutter-width;
-  grid-template-columns:
-    [full-start] 1fr
-    [content-start] minmax( auto, #{col-width(sm, 12)})
-    [content-end] 1fr
-    [full-end];
-  max-width: 100%;
-
-  @include media-breakpoint-down(sm) {
-    grid-gap: $grid-gutter-width;
-  }
-
-  @include media-breakpoint-up(md) {
-    grid-template-columns:
-      [full-start] 1fr
-      [content-start] #{col-width(md, 10)}
-      [content-end] 1fr
-      [full-end];
-  }
-
-  @include media-breakpoint-up(lg) {
-    grid-template-columns:
-      [full-start] 1fr
-      [content-start] #{col-width(lg, 8)}
-      [content-end] 1fr
-      [full-end];
-  }
-
-  @include media-breakpoint-up(xl) {
-    grid-template-columns:
-      [full-start] 1fr
-      [content-start] #{col-width(xl, 6)}
-      [content-end] 1fr
-      [full-end];
-  }
-
-  > * {
-    grid-column: content;
-  }
-
-  .container-full,
-  .container,
-  .embed-responsive,
-  & > iframe {
-    grid-column: full;
-  }
-}
-
-.container-full[class*="bg-"] + .container-full[class*="bg-"] { margin-top: 0 !important; }
-
-@include ie11('.container-grid') {
-  display: block;
-}
-
-@include ie11('.container-grid > *') {
-  max-width: col-width(lg, 10);
-  margin: 0 auto;
-}
-
-@include media-breakpoint-up(lg) {
-  @include ie11('.container-grid > *') {
-    max-width: col-width(lg, 8);
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  @include ie11('.container-grid > *') {
-    max-width: col-width(xl, 6);
-  }
-}
-
-@include ie11('.container-grid .container-full') {
-  max-width: 100%;
-  width: 100%;
-}