Editor.scss 1.95 KB
.my-editor.tui-image-editor-container {
  &.submenu-hidden {
    .tui-image-editor-submenu {
      left: -350px;
      transition: 0.5s ease-in-out;
    }
  }

  .tui-image-editor-controls {
    z-index: 10;
  }

  .tui-image-editor-submenu {
    left: 0;
    transition: 0.5s ease-in;
  }

  .tui-image-editor-header {
    display: none;
  }

  .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {
    margin: 13px 9px 0 9px;
  }

  .tui-image-editor-header-buttons div,
  .tui-image-editor-header-buttons button,{
    width: 70px;
    border-radius: 5px;
    letter-spacing: -0.5px;
  }

  label, label > span,
  .tui-image-editor-submenu .tui-image-editor-submenu-item label > span {
    font-size: 13px;
  }

  .color-picker-control .tui-colorpicker-palette-button {
    width: 20px;
    height: 20px;

    &:focus {
      outline: none;
    }
  }

  .tui-colorpicker-palette-preview {
    color: rgba(0, 0, 0, 0);
  }

  .tie-filter-tint-color .color-picker-control {
    height: 180px !important;
    top: -200px !important;
    left: -73px !important;

    div:not([class]) {
      margin-top: 10px;

      label {
        font-size: 12px;
        font-weight: bold;
        letter-spacing: -0.3px;
      }
    }
  }

  .tie-filter-multiply-color .color-picker-control {
    top: -160px !important;
    left: -60px !important;
  }

  .tie-filter-blend-color .color-picker-control {
    height: 180px !important;
    top: -200px !important;
    left: -74px !important;
  }

  .tui-colorpicker-palette-preview:first-letter {
    margin-left: 30px;
  }

  &.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tie-filter-blend-color  li {
    margin-top: 0;
  }

  .tui-image-editor-newline.tui-image-editor-range-wrap label.range {
    margin-top: 20px;
    padding-left: 10px;
    font-weight: bold;
  }
}

@media (max-width: 767px) {
  .my-editor.tui-image-editor-container {
    .tui-image-editor-header-logo {
      display: none;
    }
  }
}