lens/src/renderer/components/resizing-anchor/resizing-anchor.scss

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

body.resizing {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.ResizingAnchor {
  $dimension: 12px;

  position: absolute;
  z-index: 10;

  &::after {
    content: " ";
    display: block;
    width: 3px;
    height: 100%;
    margin-left: 50%;
    background: transparent;
    transition: background 0.2s 0s;
  }

  &:hover {
    &::after {
      background: var(--blue);
      transition: background 0.2s 0.5s;
    }
  }

  &.disabled {
    display: none;
  }

  &.vertical {
    left: 0;
    right: 0;
    cursor: row-resize;
    height: $dimension;

    &::after {
      height: 3px;
      width: 100%;
      margin-left: 0;
    }

    .resizing & {
      $expandedHeight: 200px;
      height: $expandedHeight;
      margin-top: -$expandedHeight * 0.5;

      &::after {
        margin-top: $expandedHeight * 0.5;
      }
    }

    &.trailing {
      bottom: -$dimension * 0.5;
    }
  }

  &.horizontal {
    top: 0;
    bottom: 0;
    cursor: col-resize;
    width: $dimension;

    // Expand hoverable area while resizing to keep highlighting resizer.
    // Otherwise, cursor can move far away dropping hover indicator.
    .resizing & {
      $expandedWidth: 200px;
      width: $expandedWidth;

      &.trailing {
        right: -$expandedWidth * 0.5;
      }
    }

    &.leading {
      left: -$dimension * 0.5;
    }

    &.trailing {
      right: -$dimension * 0.5;
    }
  }
}