jquery.contextMenu.scss

/*!
 * jQuery contextMenu - Plugin for simple contextMenu handling
 *
 * Version: v@VERSION
 *
 * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
 * Web: http://swisnl.github.io/jQuery-contextMenu/
 *
 * Copyright (c) 2011-@YEAR SWIS BV and contributors
 *
 * Licensed under
 *   MIT License http://www.opensource.org/licenses/mit-license
 *
 * Date: @DATE
 */
@import "variables";
@import "icons/mixins";
@import "icons";

.context-menu-icon {
  @include base-context-menu-icon;

  &.context-menu-hover:before {
    color: $context-menu-icon-color-hover;
  }
  &.context-menu-disabled::before {
    color: $context-menu-text-color-disabled;
  }

  &.context-menu-icon-loading:before {
    animation: cm-spin 2s infinite;
  }

  &.context-menu-icon--fa {
    display: list-item;
    font-family: inherit;
    line-height: inherit;

    @include base-context-menu-icon(FontAwesome);

    &.context-menu-hover:before {
      color: $context-menu-icon-color-hover;
    }
    &.context-menu-disabled::before {
      color: $context-menu-text-color-disabled;
    }
  }

  &.context-menu-icon--fa5 {
    display: list-item;
    font-family: inherit;
    line-height: inherit;

    i, svg {
      color: $context-menu-icon-color;
      left: 0.5em;
      position: absolute;
      top: 0.3em;
    }

    &.context-menu-hover {
      > i, > svg {
        color: $context-menu-icon-color-hover;
      }
    }
    &.context-menu-disabled {
      i, svg {
          color: $context-menu-text-color-disabled;
      }
    }
  }
}

.context-menu-list {
  background: $context-menu-background-color;
  border: $context-menu-border-width $context-menu-border-style $context-menu-border-color;
  border-radius: $context-menu-border-radius;
  box-shadow: $context-menu-box-shadow;
  display: inline-block;
  font-family: $context-menu-font-family;
  font-size: $context-menu-font-size;
  list-style-type: none;
  margin: $context-menu-container-margin;
  max-width: $context-menu-max-width;
  min-width: $context-menu-min-width;
  padding: $context-menu-container-padding;
  position: absolute;
}

.context-menu-item {
  background-color: $context-menu-background-color;
  box-sizing: content-box;
  color: $context-menu-text-color;
  padding: $context-menu-item-padding;
  position: relative;
  user-select: none;
}

.context-menu-separator {
  border-bottom: $context-menu-separator-height $context-menu-separator-style $context-menu-separator-color;
  margin: $context-menu-separator-margin;
  padding: 0;
}

.context-menu-item > label > input,
.context-menu-item > label > textarea {
  user-select: text;
}

.context-menu-item.context-menu-hover {
  background-color: $context-menu-item-color-hover;
  color: $context-menu-text-color-hover;
  cursor: pointer;
}

.context-menu-item.context-menu-disabled {
  background-color: $context-menu-item-color-disabled;
  color: $context-menu-text-color-disabled;
  cursor: default;
}

.context-menu-input.context-menu-hover {
  cursor: default;
  color: $context-menu-text-color;
}

.context-menu-submenu:after {
  content: '';
  border-style: solid;
  border-width: .25em 0 .25em .25em;
  border-color: transparent transparent transparent $context-menu-submenu-arrow-color;
  height: 0;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  z-index: 1;
}

/**
 * Inputs
 */
.context-menu-item.context-menu-input {
  padding: .3em .6em;
}

/* vertically align inside labels */
.context-menu-input > label > * {
  vertical-align: top;
}

/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
  margin-right: .4em;
  position: relative;
  top: .12em;
}

.context-menu-input > label {
  margin: 0;
}

.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

.context-menu-input > label > textarea {
  height: 7em;
}

.context-menu-item > .context-menu-list {
  display: none;
  /* re-positioned by js */
  right: -.3em;
  top: .3em;
}

.context-menu-item.context-menu-visible > .context-menu-list {
  display: block;
}

.context-menu-accesskey {
  text-decoration: underline;
}