ellegant.scss

$elle-success: #28a745;

.elle-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 999999;
  visibility: hidden;
  transition: visibility 0ms 300ms ease;
  .elle-x {
    font-size: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none !important;
    height: 30px;
    width: 30px;
    line-height: 25px;
    text-align: center;
    label {
      width: 100%;
      height: 100%;
    }
  }
  .elle-right .elle-x {
    right: initial;
    left: 0px;
  }
  .elle-shadow {
    cursor: pointer;
    background: black;
    opacity: 0;
    position: absolute;
    transition: opacity 300ms 200ms ease;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  ul {
    transform: translateX(-101%);
    transition: transform 300ms 0ms ease;
    font-size: 18px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    position: absolute;
    min-width: 200px;
    height: 100%;
    z-index: 1;
    top: 0px;
    left: 0px;
    background: white;
    color: rgb(42, 42, 42);
    border-right: 1px solid rgb(153, 153, 153);
    &.elle-right {
      left: initial;
      right: 0px;
      border-right: none;
      transform: translateX(101%);
      border-left: 1px solid rgb(153, 153, 153);
      text-align: right;
    }
    li {
      border-bottom: 1px solid rgb(232, 232, 232);
      label {
        display: block;
      }
      &.text, a {
        display: block;
        padding: 10px 10px 10px 10px;
      }
      a {
        text-decoration: none;
        color: rgb(42, 42, 42);
      }
      &:hover {
        background: rgb(246, 246, 246);
      }
    }
  }
}

.elle-modal {
  background-color: transparent;
  border: 0;
  overflow-y: auto;
  color: rgb(42, 42, 42);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 999999;
  visibility: hidden;
  transition: visibility 0ms 300ms ease;
  &::before {
    content: "";
    background: black;
    opacity: 0;
    position: fixed;
    transition: opacity 300ms 0ms ease;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  & > section {
    display: none;
    background-color: white;
    max-width: 500px;
    &.elle-big { max-width: 750px; }
    &.elle-small { max-width: 310px; }
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    position: fixed;
    margin: 20px auto;
    &[class*="elle-animated"] {
      animation: top .4s ease;
      animation-delay: 0s;
      animation-fill-mode: forwards;
      &.elle-animated-left{animation-name: left;}
      &.elle-animated-right{animation-name: right;}
      &.elle-animated-bottom{animation-name: bottom;}
    }
    header {
      padding: 14px 19px;
      border-bottom: 1px solid rgb(233, 236, 239);
      position: relative;
      h5 {margin: 0;}
      label {
        user-select: none;
        position: absolute;
        top: 7px;
        right: 3px;
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 24px;
      }
    }
    main, footer {
      padding: 16px;
    }
    footer {
      border-top: 1px solid rgb(233, 236, 239);
      text-align: right;
    }
  }
}

.elle-checkbox {
  display: none !important;
  &:not(:checked) {
    + .elle-target {
      display: none !important;
    }
  }
  &:checked {
    + .elle-menu {
      .elle-shadow {
        opacity: .6;
        transition: opacity 300ms 0ms ease;
      }
    }
    + .elle-modal {
      &::before {
        opacity: .6;
        transition: opacity 300ms 0ms ease;
      }
      visibility: visible;
      transition: visibility 0ms 0s ease;
      & > section {
        display: block;
      }
    }
    + .elle-menu {
      visibility: visible;
      transition: visibility 0ms 0s ease;
      ul {
        transform: translateX(0%);
        transition: transform 300ms 200ms ease;
      }
    }
  }
}

.elle-switcher {
  .elle-radio {
    display: none;
  }
  @for $i from 1 through 10 {
    .elle-radio[data-nth="#{$i}"]:not(:checked) ~ .elle-target[data-nth="#{$i}"]:not(.animated) {
      display: none !important;
    }
    .elle-radio[data-nth="#{$i}"]:not(:checked) ~ .elle-target[data-nth="#{$i}"]:not(.animated) {
      position: absolute !important;
      visibility: hidden !important;
      z-index: -1 !important;
      pointer-events: none !important;
      user-select: none !important;
    }
  }
}

.elle-target{
  &[class*="elle-animated"] {
    animation: top .4s ease;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    &.elle-animated-left{animation-name: left;}
    &.elle-animated-right{animation-name: right;}
    &.elle-animated-bottom{animation-name: bottom;}
  }
}

@keyframes top {
  from {position: relative;top: -30px;opacity: 0;}
  to {position: relative;top:0px;opacity: 1;}
}
@keyframes left {
  from {position: relative;left: -30px;opacity: 0;}
  to {position: relative;left:0px;opacity: 1;}
}
@keyframes right {
  from {position: relative;right: -30px;opacity: 0;}
  to {position: relative;right:0px;opacity: 1;}
}
@keyframes bottom {
  from {position: relative;bottom: -30px;opacity: 0;}
  to {position: relative;bottom:0px;opacity: 1;}
}

.elle-on {
  outline: none;
  font-size: inherit;
  vertical-align: middle;
  width: 1.6em;
  height: 1em;
  background: silver;
  border-radius: 1em;
  border: none;
  position: relative;
  top: -1px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: content-box;
  transition: all 200ms ease;
  &::before {
    content:"";
    position: absolute;
    width: 0.85em;
    height: 0.85em;
    background: white;
    top: 0.073em;
    border-radius: 100%;
    transition: all 200ms ease;
    box-shadow: 0.05em 0.05em 0.15em rgba(0, 0, 0, 0.353);
  }
  &:not(:checked)::before {    
    left: 0.09em;
  }
  &:checked{
    background: #0ed428;
    &::before {
      left: calc(100% - 0.95em);
    }
  }
}

.style-elle-btn {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  background: $elle-success;
  border: 1px solid darken($elle-success, 10%);
  cursor: pointer;
  user-select: none;
}