@totase/react-context-menu/dist/main.css.map

Minimal context menu component for React

{"mappings":"ACAA,kjBAwBA,8DASA,mFAIA,yWAeA,2FAOA,gYAcA,mCAIA,yDAME,8FAKF,8CAIA,yDAKA,0MASA,0BACE,kEAKM,gUAYN,sDAIA,0DAGE,gIAIE,wFAON,iHAMA,yFAMA","sources":["main.css","src/styles.css"],"sourcesContent":[":root {\n  --react-context-menu-z-index: 1000;\n  --react-context-menu-font-size: .875rem;\n  --react-context-menu-background-color: #f2f2f2;\n  --react-context-menu-border-color: #ccc;\n  --react-context-menu-item-color: #2c2c2c;\n  --react-context-menu-item-hover-color: #fff;\n  --react-context-menu-item-hover-disabled-color: #999;\n  --react-context-menu-item-hover-background-color: #4095da;\n  --react-context-menu-shadow-color: #00000026;\n  --react-context-menu-padding-sm: 4px;\n  --react-context-menu-padding-md: 8px;\n  --react-context-menu-border-radius-inner: 4px;\n  --react-context-menu-border-radius-outer: 6px;\n}\n\n@keyframes react-context-menu-exit {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n\n.react-context-menu--exit {\n  animation: .15s ease-out forwards react-context-menu-exit;\n}\n\n@keyframes react-context-menu__item-clicked {\n  0% {\n    color: var(--react-context-menu-item-hover-color);\n    background-color: var(--react-context-menu-item-hover-background-color);\n  }\n\n  50% {\n    color: var(--react-context-menu-item-color);\n    background-color: #0000;\n  }\n\n  100% {\n    color: var(--react-context-menu-item-hover-color);\n    background-color: var(--react-context-menu-item-hover-background-color);\n  }\n}\n\n.react-context-menu__item--clicked {\n  animation: .1s ease-out react-context-menu__item-clicked;\n}\n\n.react-context-menu, .react-context-menu__submenu {\n  z-index: var(--react-context-menu-z-index);\n  padding: var(--react-context-menu-padding-sm);\n  background: var(--react-context-menu-background-color);\n  box-shadow: 0 2px 4px 0 var(--react-context-menu-shadow-color);\n  border: 1px solid var(--react-context-menu-border-color);\n  border-radius: var(--react-context-menu-border-radius-outer);\n  min-width: 160px;\n}\n\n.react-context-menu {\n  position: fixed;\n}\n\n.react-context-menu__submenu {\n  position: absolute;\n  left: 100%;\n\n  &:not(.react-context-menu__submenu-bottom) {\n    top: calc(-1 * var(--react-context-menu-padding-sm));\n  }\n}\n\n.react-context-menu__submenu-bottom {\n  top: unset;\n}\n\n.react-context-menu__submenu-right {\n  right: 100%;\n  left: unset;\n}\n\n.react-context-menu__separator {\n  margin-block: 0;\n  margin: var(--react-context-menu-padding-sm) var(--react-context-menu-padding-md);\n  background-color: var(--react-context-menu-border-color);\n  border: 0;\n  height: 1px;\n}\n\n.react-context-menu__item {\n  &:not(:has(.react-context-menu__submenu)) {\n    width: 100%;\n    display: flex;\n  }\n\n  color: var(--react-context-menu-item-color);\n  padding: var(--react-context-menu-padding-sm) var(--react-context-menu-padding-md);\n  line-height: 1;\n  font-size: var(--react-context-menu-font-size);\n  border-radius: var(--react-context-menu-border-radius-inner);\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: #0000;\n  border: none;\n\n  &:has(.react-context-menu__submenu) {\n    position: relative;\n  }\n\n  &:not(.react-context-menu__item--disabled) {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--react-context-menu-item-hover-color);\n      background-color: var(--react-context-menu-item-hover-background-color);\n\n      & .react-context-menu__arrow {\n        border-color: var(--react-context-menu-item-hover-color);\n      }\n    }\n  }\n}\n\n.react-context-menu__item--disabled {\n  cursor: not-allowed;\n  color: var(--react-context-menu-item-hover-disabled-color);\n}\n\n.react-context-menu__label {\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n\n.react-context-menu__arrow {\n  border-style: solid;\n  border-width: 0 2px 2px 0;\n  border-color: var(--react-context-menu-item-color);\n  width: 4px;\n  height: 4px;\n  padding: 1px;\n  transform: rotate(-45deg);\n}\n/*# sourceMappingURL=main.css.map */\n",":root {\n  --react-context-menu-z-index: 1000;\n  --react-context-menu-font-size: 0.875rem;\n\n  /* Colors */\n  --react-context-menu-background-color: #f2f2f2;\n  --react-context-menu-border-color: #cccccc;\n\n  --react-context-menu-item-color: #2c2c2c;\n  --react-context-menu-item-hover-color: #ffffff;\n  --react-context-menu-item-hover-disabled-color: #999999;\n  --react-context-menu-item-hover-background-color: #4095da;\n  --react-context-menu-shadow-color: rgba(0, 0, 0, 0.15);\n\n  /* Spacing */\n  --react-context-menu-padding-sm: 4px;\n  --react-context-menu-padding-md: 8px;\n\n  --react-context-menu-border-radius-inner: 4px;\n  --react-context-menu-border-radius-outer: 6px;\n}\n\n/* Animations */\n\n@keyframes react-context-menu-exit {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n.react-context-menu--exit {\n  animation: react-context-menu-exit 150ms ease-out forwards;\n}\n\n@keyframes react-context-menu__item-clicked {\n  0% {\n    color: var(--react-context-menu-item-hover-color);\n    background-color: var(--react-context-menu-item-hover-background-color);\n  }\n  50% {\n    color: var(--react-context-menu-item-color);\n    background-color: transparent;\n  }\n  100% {\n    color: var(--react-context-menu-item-hover-color);\n    background-color: var(--react-context-menu-item-hover-background-color);\n  }\n}\n\n.react-context-menu__item--clicked {\n  animation: react-context-menu__item-clicked 100ms ease-out;\n  animation-iteration-count: 1;\n}\n\n/* Component styles */\n\n.react-context-menu,\n.react-context-menu__submenu {\n  z-index: var(--react-context-menu-z-index);\n\n  padding: var(--react-context-menu-padding-sm);\n  background: var(--react-context-menu-background-color);\n  box-shadow: 0 2px 4px 0 var(--react-context-menu-shadow-color);\n\n  border: 1px solid var(--react-context-menu-border-color);\n  border-radius: var(--react-context-menu-border-radius-outer);\n\n  min-width: 160px;\n}\n\n.react-context-menu {\n  position: fixed;\n}\n\n.react-context-menu__submenu {\n  position: absolute;\n\n  /* Initial position */\n  left: 100%;\n\n  &:not(.react-context-menu__submenu-bottom) {\n    top: calc(-1 * var(--react-context-menu-padding-sm));\n  }\n}\n\n.react-context-menu__submenu-bottom {\n  top: unset;\n}\n\n.react-context-menu__submenu-right {\n  right: 100%;\n  left: unset;\n}\n\n.react-context-menu__separator {\n  border: 0;\n  margin-block: 0;\n  margin: var(--react-context-menu-padding-sm) var(--react-context-menu-padding-md);\n\n  height: 1px;\n  background-color: var(--react-context-menu-border-color);\n}\n\n.react-context-menu__item {\n  &:not(:has(.react-context-menu__submenu)) {\n    display: flex;\n    width: 100%;\n  }\n\n  color: var(--react-context-menu-item-color);\n  padding: var(--react-context-menu-padding-sm) var(--react-context-menu-padding-md);\n  background-color: transparent;\n\n  line-height: 1;\n  font-size: var(--react-context-menu-font-size);\n  border-radius: var(--react-context-menu-border-radius-inner);\n  border: none;\n\n  user-select: none;\n  -webkit-user-select: none;\n\n  &:has(.react-context-menu__submenu) {\n    position: relative;\n  }\n\n  &:not(.react-context-menu__item--disabled) {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--react-context-menu-item-hover-color);\n      background-color: var(--react-context-menu-item-hover-background-color);\n\n      .react-context-menu__arrow {\n        border-color: var(--react-context-menu-item-hover-color);\n      }\n    }\n  }\n}\n\n.react-context-menu__item--disabled {\n  cursor: not-allowed;\n\n  color: var(--react-context-menu-item-hover-disabled-color);\n}\n\n.react-context-menu__label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.react-context-menu__arrow {\n  transform: rotate(-45deg);\n\n  width: 4px;\n  height: 4px;\n  padding: 1px;\n\n  border-style: solid;\n  border-width: 0 2px 2px 0;\n  border-color: var(--react-context-menu-item-color);\n}\n"],"names":[],"version":3,"file":"main.css.map"}