_common.scss

// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the terms of the LICENSE file distributed with this project.

$half-grid-size: $pt-grid-size / 2 !default;

$menu-item-border-radius: $pt-border-radius - 1 !default;

$menu-min-width: $pt-grid-size * 18 !default;
$menu-item-padding: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
$menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;

$menu-background-color: $white !default;
$dark-menu-background-color: $dark-gray4 !default;

$menu-item-color-hover: $minimal-button-background-color-hover !default;
$menu-item-color-active: $minimal-button-background-color-active !default;
$dark-menu-item-color-hover: $dark-minimal-button-background-color-hover !default;
$dark-menu-item-color-active: $dark-minimal-button-background-color-active !default;

// customize modifier classes with params.
// setting modifier to "" will generally apply it as default styles due to & selectors
@mixin menu-item($disabled-selector: ".pt-disabled", $hover-selector: ":hover") {
  @include pt-flex-container(row, $menu-item-padding);
  align-items: center;
  border-radius: $menu-item-border-radius;
  padding: $menu-item-padding;
  text-decoration: none;
  line-height: $pt-icon-size-standard;
  color: inherit;
  user-select: none;

  > .pt-fill {
    word-break: break-word;
  }

  &#{$hover-selector} {
    background-color: $menu-item-color-hover;
    cursor: pointer;
    text-decoration: none;
  }

  &#{$disabled-selector} {
    background-color: inherit;
    cursor: not-allowed;
    color: $pt-text-color-disabled;
  }

  .pt-dark & {
    @include dark-menu-item($disabled-selector, $hover-selector);
  }
}

@mixin dark-menu-item($disabled-selector: ".pt-disabled", $hover-selector: ":hover") {
  color: inherit;

  &#{$hover-selector} {
    background-color: $dark-menu-item-color-hover;
    color: inherit;
  }

  &#{$disabled-selector} {
    background-color: inherit;
    color: $pt-dark-text-color-disabled;
  }
}

@mixin menu-item-intent($text-colors: $pt-intent-text-colors) {
  @each $intent, $color in $text-colors {
    &.pt-intent-#{$intent} {
      color: $color;

      .pt-icon {
        color: inherit;
      }

      &::before,
      &::after,
      .pt-menu-item-label {
        color: $color;
      }

      &:hover,
      &.pt-active {
        background-color: nth(map-get($button-intents, $intent), 1);
      }

      &:active {
        background-color: nth(map-get($button-intents, $intent), 2);
      }

      &:hover,
      &:active,
      &.pt-active {
        &,
        &::before,
        &::after,
        .pt-menu-item-label {
          color: $white;
        }
      }
    }
  }
}

@mixin menu-item-large() {
  padding: $menu-item-padding-large $menu-item-padding;
  line-height: $pt-icon-size-large;
  font-size: $pt-font-size-large;
}

@mixin menu-divider() {
  display: block;
  margin: $half-grid-size;
  border-top: 1px solid $pt-divider-black;

  .pt-dark & {
    border-top-color: $pt-dark-divider-white;
  }
}

@mixin menu-header($heading-selector: null) {
  @include menu-divider();
  cursor: default;
  padding-left: $menu-item-padding - $half-grid-size;

  @if $heading-selector != null {
    &:first-of-type {
      border-top: none;
    }

    #{$heading-selector} {
      @include menu-heading();
    }

    &:first-of-type #{$heading-selector} {
      padding-top: 0;
    }
  }
}

@mixin menu-heading() {
  @include header-typography();
  @include overflow-ellipsis();
  margin: 0;
  padding: $pt-grid-size $menu-item-padding 0 1px;
  // a little extra space to avoid clipping descenders (because overflow hidden)
  line-height: $pt-icon-size-standard + 1px;
}

@mixin menu-header-large($heading-selector) {
  #{$heading-selector} {
    padding-top: $pt-grid-size * 1.5;
    padding-bottom: $pt-grid-size / 2;
    font-size: $pt-grid-size * 1.8;
  }

  &:first-of-type #{$heading-selector} {
    padding-top: 0;
  }
}