oui-kit/lib/float/oui-float.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-float {
  &-transition {
    &-enter-active, &-leave-active {
      transition: opacity 150ms ease-in-out;
    }

    &-enter-from, &-leave-to {
      opacity: 0;
    }
  }

  $oui-float-arrow-size = px(12);
  $oui-float-arrow-indent-factor = 0.7;

  :where(&) {
    --float-color: inherit;
    --float-background: transparent;
    --float-border: none;
    --float-shadow: none;
  }

  z-index: -z-index-popover;

  &._tooltip {
    // tooltip replacement
    --float-color: var(--n0-50, white);
    --float-background: var(--n0-900, white, rgb(56, 56, 56)); // rgba(118, 118, 118, 1);
    --float-border: none; // 1px solid #dddddd;
    --float-shadow: rgba(15, 15, 15, 0.2) 0 9px 24px;

    // --float-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;
    .dark & {
      --float-background: black; // rgba(118, 118, 118, 1);
    }

    pointer-events: none; // avoids flicker
    padding: px(4) px(8);
    border-radius: px(4);
    white-space: pre-line;
    z-index: -z-index-tooltip;
    min-width: 24;
  }

  :where(&._dropdown) {
    // for selecting input values
    --float-color: var(--fg);
    --float-background: var(--bg);
    --float-border: 1px solid var(--t3-bg); // 0px 0px 0px 1px #000000;
    --float-shadow: rgba(15, 15, 15, 0.2) 0 9px 24px;
    // --float-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 3px 6px, rgba(15, 15, 15, 0.2) 0 9px 24px;
    min-width: px(200);
    border-radius: px(4);
  }

  &._menu {
    // emulating native context menus
    --float-background: var(--menu-background);
    --float-border: var(--menu-border);
    --float-shadow: var(--menu-shadow);
    padding: px(8);
    border-radius: px(4);
    white-space: nowrap;
  }

  position: absolute;
  cursor: default;
  padding: 0;
  color: var(--float-color);
  box-shadow: var(--float-shadow);
  background: var(--float-background);
  border: var(--float-border);

  ._float_arrow {
    &, &:before {
      position: absolute;
      width: $oui-float-arrow-size;
      height: $oui-float-arrow-size;
      // z-index: -1;
      overflow: hidden;
    }

    &:before {
      content: "";
      background: var(--float-background);
      // box-shadow: $oui-floatBorder;
      border: var(--float-border);
      overflow: hidden;
      // box-shadow: var(--float-shadow);
    }

    &_top, &_bottom {
      margin-left: 2;
      margin-right: 2;
    }

    /*
    &_left, &_right {
      margin-top: 2;
      margin-bottom: 2;
    }
    */
    &_top {
      bottom: -1 * $oui-float-arrow-size; // half size

      &:before {
        transform: translateY($oui-float-arrow-size * -1 * $oui-float-arrow-indent-factor) rotate(45deg);
      }
    }

    &_bottom {
      top: -1 * $oui-float-arrow-size; // half size

      &:before {
        transform: translateY($oui-float-arrow-size * $oui-float-arrow-indent-factor) rotate(45deg);
      }
    }

    &_left {
      right: -1 * $oui-float-arrow-size; // half size

      &:before {
        transform: translateX($oui-float-arrow-size * -1 * $oui-float-arrow-indent-factor) rotate(45deg);
      }
    }

    &_right {
      left: -1 * $oui-float-arrow-size; // half size

      &:before {
        transform: translateX($oui-float-arrow-size * $oui-float-arrow-indent-factor) rotate(45deg);
      }
    }
  }
}