style-temp.scss

body {
  font-family: "Helvetica Neue";
}
$green: #3EC556;
$tool-background: #193753;
$hover-color: #43B8FF;
$red: #F25B52;
$z-index-base: 10000;
$border-radius: 8px;
$z-index-arr: 'tool-bar', 'select-popup', 'cover', 'tooltip';
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

@function get-zindex($of) {
  @return index($z-index-arr, $of) + $z-index-base
}

@mixin scrollbars($size, $foreground-color, $background-color) {
  &::-webkit-scrollbar {
    width: $size;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: $background-color;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: $foreground-color;
  }
}

@mixin caret-top($w, $c) {
  content: '';
  width: 0;
  height: 0;
  border-left: $w solid transparent;
  border-right: $w solid transparent;

  border-top: $w solid $c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin caret-down($w, $c) {
  content: '';
  width: 0;
  height: 0;
  border-left: $w solid transparent;
  border-right: $w solid transparent;

  border-bottom: $w solid $c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin button-custom {
  border: none;
  font-size: inherit;
  cursor: pointer;
  background: none;
}

h1, h2, h3, h4, h5, h6, p, pre {
  margin: 0;
}

pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word;
}

.modal-container {
  width: 400px;
  height: auto;
  margin: 100px auto;
  background: white;
  padding: 15px;
  border-radius: $border-radius;
  box-shadow: 4px 4px 22px 0 rgba(0, 0, 0, .17);
}

.some-class {
  color: $green;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 18px;
  position: relative;
}

body {
  background: #f5f5f5;
}

.tool-bar-container {
  position: absolute;
  top: -65px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: get-zindex('tool-bar');
  display: none;

  &.active {
    display: block;
    /*-webkit-animation: medium-editor-pop-upwards 160ms forwards linear;
    animation: medium-editor-pop-upwards 160ms forwards linear;*/
  }

  .caret-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 10px solid $tool-background;
    position: absolute;
    left: 50%;

    transform: translateX(-50%);

  }

  .close {
    @include button-custom;

    position: absolute;
    top: 8px;
    right: -25px;
    color: $red;
  }
}

.tool-bar {

  list-style: none;
  padding: 0;
  margin: 0;
  background-color: $tool-background;
  border-radius: $border-radius;
  font-size: 16px;

  .tool-list {
    display: inline-block;
    float: left;

    .tool {
      @include button-custom;

      position: relative;
      color: white;
      width: 60px;
      padding: 15px 0;
      text-align: center;

      &:hover {
        background-color: $hover-color;
      }
    }
    &:first-child, &:last-child {
      border-bottom-left-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }

  }

  .more-options-container {
    display: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 0;
    list-style: none;
    position: absolute;
    background: $tool-background;
    min-width: 45px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;

    &.visible {
      display: block;
    }

    .dropdown-tool-list {
      display: block;
      float: none;

      .dropdown-tool {
        @include button-custom;

        color: white;
        text-align: center;
        width: 100%;
        padding: 10px;
        &:hover {
          background-color: $hover-color;
        }
      }

    }

    @include scrollbars(4px, $green, transparent);

  }
}

.cover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: get-zindex('cover');
  border-radius: $border-radius;
  background: #193753;
  /* height: 28px; */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

  &.visible {
    display: block;
  }

  .input-form {

    background: $tool-background;
    border: none;
    color: white;
    border-radius: $border-radius;
    padding: 0 5px;
    height: 48px;
    font-size: 14px;
    vertical-align: middle;
    &--link-image {
      width: calc(100% - 85px);
    }
    &--link, &--description {
      width: calc(100% - 115px);
    }
  }
  .actions {
    float: right;

    .action {
      @include button-custom;

      color: white;
      line-height: 48px;
      font-size: 18px;
      margin: 0;
      padding: 0;
      width: 35px;
    }
  }

  .link, .description, .drop-zone-container {
    display: none;

    &.visible {
      display: block;
    }
  }
  .target {
    opacity: 0.8;

    &.blank {
      opacity: 1;
    }
  }
}

.drop-zone {
  color: white;
  float: left;
  width: calc(100% - 70px);
  text-align: center;
  line-height: 48px;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  cursor: pointer;
}

.image {
  max-width: 100%;
}

.media-toolbox {
  display: none;
  position: absolute;
  min-width: 210px;
  top: 0;
  left: 0;
  padding: 5px;
  margin-top: 10px;
  border-radius: $border-radius;
  background-color: white;
  border-top: 5px solid $tool-background;
  box-shadow: 4px 4px 22px 0 rgba(0, 0, 0, .17);
  &:before {
    @include caret-down(5px, $tool-background);

    top: -10px;
  }

  &.visible {
    display: block;
  }
  &__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba($tool-background, 0.8);
    font-size: 18px;
    color: white;
  }

  .actions {
    padding: 5px;
    position: relative;
    min-height: 70px;
    input[type=radio] {
      display: none;
    }
    label {
      background: #ffffff;
      border: 1px solid $hover-color;
      border-radius: 4px;
      margin: 0 10px;
      padding: 5px 9px;

      &:hover {
        background: $hover-color;
        color: white;
      }
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    input[type=radio]:checked + label {
      background: $hover-color;
      color: white;
    }
    input[type=text] {
      border: 1px solid #eee;
      color: $tool-background;
      border-radius: $border-radius;
      padding: 0 5px;
      height: 30px;
      width: 220px;
      font-size: 14px;
      vertical-align: middle;
    }
    &__button {
      display: block;
      font-size: 12px;
      border-radius: 4px;
      margin: 0 auto;
      padding: 10px 20px;
      background: $hover-color;
      color: white;
      border: none;
      margin-top: 10px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;

      &:hover {
        background: darken($hover-color, 20);
      }
    }

    &__display, &__align {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    &__replace-image {
      text-align: center;
      .separator {
        position: relative;
        line-height: 1;
        font-size: 12px;
        margin: 10px auto;
        text-align: center;
        &:before {
          content: '';
          border-top: 1px solid $tool-background;
          width: 101px;
          position: absolute;
          top: 0.5em;
          left: 0;
        }
        &:after {
          content: '';
          border-top: 1px solid $tool-background;
          width: 100px;
          position: absolute;
          top: 0.5em;
          right: 0;
        }
      }

      .image-upload {
        width: 210px;
        border: 2px dashed;
        padding: 10px;
        border-radius: 4px;
      }
    }

    &__size {
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 100%;
      text-align: center;
      position: absolute;

      .size-input-container {
        position: relative;
        width: 80px;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
          margin-left: 10px;
        }
        display: inline-block;

        input[type=text] {
          box-sizing: border-box;
          width: 100%;
        }
      }

      .change-buttons {
        position: absolute;


        top: -3px;
        right: 5px;

        &__up {
          display: block;
          padding: 0;
          @include button-custom;
          width: auto;
        }
        &__down {
          @include button-custom;
          padding: 0;
          display: block;
          width: auto;
        }
      }

    }
  }

  &__items {
    display: inline-block;

    .tool {
      @include button-custom;

      position: relative;
      width: 35px;
      text-align: center;
      color: $tool-background;
      padding: 5px 0;

      &.delete {
        color: #F25B52;
      }
    }

    &:active {
      color: white;
      background-color: $hover-color;
    }

  }
}

.editor-wrapper {
  position: relative;
}

.tooltiped {
  position: relative;

  &:after {
    content: attr(data-title);
    position: absolute;
    z-index: get-zindex('tooltip');
    display: none;
    background-color: $tool-background;
    color: #fff;
    font-size: 14px;
    line-height: 17px;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 100;
    right: 50%;
    word-wrap: break-word;
    white-space: pre;
    opacity: 0;
    pointer-events: none;
    transform: translateX(50%);
    transition: all 0.3s ease-in;
    -webkit-animation-name: tooltip-appear;
    animation-name: tooltip-appear;
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }

  &:before {
    display: none;
    z-index: get-zindex('tooltip');
    opacity: 0;
    transition: all 0.3s ease-in;
    -webkit-animation-name: tooltip-appear;
    animation-name: tooltip-appear;
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }

  &:hover {
    &:before,
    &:after {
      display: block;
    }
  }

  &--above {
    &:after {
      top: -35px;
    }

    &:before {
      @include caret-top(5px, $tool-background);

      top: -8px;
    }
  }

  &--below {
    &:after {
      bottom: -35px;
    }

    &:before {
      @include caret-down(5px, $tool-background);

      bottom: -8px;
    }
  }

}

@-webkit-keyframes tooltip-appear {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes tooltip-appear {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes medium-editor-pop-upwards {
  0% {
    opacity: 0;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 12);
    transform: matrix(1, 0, 0, 1, 0, 12);
  }
  20% {
    opacity: .7;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 2);
    transform: matrix(1, 0, 0, 1, 0, 2);
  }
  40% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@keyframes medium-editor-pop-upwards {
  0% {
    opacity: 0;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 12);
    transform: matrix(1, 0, 0, 1, 0, 12);
  }
  20% {
    opacity: .7;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 2);
    transform: matrix(1, 0, 0, 1, 0, 2);
  }
  40% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@keyframes medium-editor-pop-downwards {
  100% {
    opacity: 0;
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
    transform: matrix(0.97, 0, 0, 1, 0, 12);
  }
  40% {
    opacity: .2;
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
    transform: matrix(0.99, 0, 0, 1, 0, 2);
  }
  20% {
    opacity: .7;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
  }
  0% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

@-webkit-keyframes medium-editor-pop-downwards {
  100% {
    opacity: 0;
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
    transform: matrix(0.97, 0, 0, 1, 0, 12);
  }
  40% {
    opacity: .2;
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
    transform: matrix(0.99, 0, 0, 1, 0, 2);
  }
  20% {
    opacity: 0.7;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
    transform: matrix(1, 0, 0, 1, 0, -1);
  }
  0% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}