ac569c611bb7eecf23c4ca0dc6604ec6f2896c3563c498159f950d7ce7e4fb4fb3cb8b57408e7a844dd730bb890dd07b23ddf1228e8026d5f4df1421ccd66e 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /*!
  2. * jQuery contextMenu - Plugin for simple contextMenu handling
  3. *
  4. * Version: v@VERSION
  5. *
  6. * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
  7. * Web: http://swisnl.github.io/jQuery-contextMenu/
  8. *
  9. * Copyright (c) 2011-@YEAR SWIS BV and contributors
  10. *
  11. * Licensed under
  12. * MIT License http://www.opensource.org/licenses/mit-license
  13. *
  14. * Date: @DATE
  15. */
  16. @import "variables";
  17. @import "icons/mixins";
  18. @import "icons";
  19. .context-menu-icon {
  20. @include base-context-menu-icon;
  21. &.context-menu-hover:before {
  22. color: $context-menu-icon-color-hover;
  23. }
  24. &.context-menu-disabled::before {
  25. color: $context-menu-text-color-disabled;
  26. }
  27. &.context-menu-icon-loading:before {
  28. animation: cm-spin 2s infinite;
  29. }
  30. &.context-menu-icon--fa {
  31. display: list-item;
  32. font-family: inherit;
  33. line-height: inherit;
  34. @include base-context-menu-icon(FontAwesome);
  35. &.context-menu-hover:before {
  36. color: $context-menu-icon-color-hover;
  37. }
  38. &.context-menu-disabled::before {
  39. color: $context-menu-text-color-disabled;
  40. }
  41. }
  42. &.context-menu-icon--fa5 {
  43. display: list-item;
  44. font-family: inherit;
  45. line-height: inherit;
  46. i, svg {
  47. color: $context-menu-icon-color;
  48. left: 0.5em;
  49. position: absolute;
  50. top: 0.3em;
  51. }
  52. &.context-menu-hover {
  53. > i, > svg {
  54. color: $context-menu-icon-color-hover;
  55. }
  56. }
  57. &.context-menu-disabled {
  58. i, svg {
  59. color: $context-menu-text-color-disabled;
  60. }
  61. }
  62. }
  63. }
  64. .context-menu-list {
  65. background: $context-menu-background-color;
  66. border: $context-menu-border-width $context-menu-border-style $context-menu-border-color;
  67. border-radius: $context-menu-border-radius;
  68. box-shadow: $context-menu-box-shadow;
  69. display: inline-block;
  70. font-family: $context-menu-font-family;
  71. font-size: $context-menu-font-size;
  72. list-style-type: none;
  73. margin: $context-menu-container-margin;
  74. max-width: $context-menu-max-width;
  75. min-width: $context-menu-min-width;
  76. padding: $context-menu-container-padding;
  77. position: absolute;
  78. }
  79. .context-menu-item {
  80. background-color: $context-menu-background-color;
  81. box-sizing: content-box;
  82. color: $context-menu-text-color;
  83. padding: $context-menu-item-padding;
  84. position: relative;
  85. user-select: none;
  86. }
  87. .context-menu-separator {
  88. border-bottom: $context-menu-separator-height $context-menu-separator-style $context-menu-separator-color;
  89. margin: $context-menu-separator-margin;
  90. padding: 0;
  91. }
  92. .context-menu-item > label > input,
  93. .context-menu-item > label > textarea {
  94. user-select: text;
  95. }
  96. .context-menu-item.context-menu-hover {
  97. background-color: $context-menu-item-color-hover;
  98. color: $context-menu-text-color-hover;
  99. cursor: pointer;
  100. }
  101. .context-menu-item.context-menu-disabled {
  102. background-color: $context-menu-item-color-disabled;
  103. color: $context-menu-text-color-disabled;
  104. cursor: default;
  105. }
  106. .context-menu-input.context-menu-hover {
  107. cursor: default;
  108. color: $context-menu-text-color;
  109. }
  110. .context-menu-submenu:after {
  111. content: '';
  112. border-style: solid;
  113. border-width: .25em 0 .25em .25em;
  114. border-color: transparent transparent transparent $context-menu-submenu-arrow-color;
  115. height: 0;
  116. position: absolute;
  117. right: .5em;
  118. top: 50%;
  119. transform: translateY(-50%);
  120. width: 0;
  121. z-index: 1;
  122. }
  123. /**
  124. * Inputs
  125. */
  126. .context-menu-item.context-menu-input {
  127. padding: .3em .6em;
  128. }
  129. /* vertically align inside labels */
  130. .context-menu-input > label > * {
  131. vertical-align: top;
  132. }
  133. /* position checkboxes and radios as icons */
  134. .context-menu-input > label > input[type="checkbox"],
  135. .context-menu-input > label > input[type="radio"] {
  136. margin-right: .4em;
  137. position: relative;
  138. top: .12em;
  139. }
  140. .context-menu-input > label {
  141. margin: 0;
  142. }
  143. .context-menu-input > label,
  144. .context-menu-input > label > input[type="text"],
  145. .context-menu-input > label > textarea,
  146. .context-menu-input > label > select {
  147. box-sizing: border-box;
  148. display: block;
  149. width: 100%;
  150. }
  151. .context-menu-input > label > textarea {
  152. height: 7em;
  153. }
  154. .context-menu-item > .context-menu-list {
  155. display: none;
  156. /* re-positioned by js */
  157. right: -.3em;
  158. top: .3em;
  159. }
  160. .context-menu-item.context-menu-visible > .context-menu-list {
  161. display: block;
  162. }
  163. .context-menu-accesskey {
  164. text-decoration: underline;
  165. }