@magic-spells/dropdown-panel/dist/dropdown-panel.css.map

Accessible custom dropdown panel web component.

{"version":3,"sources":["dropdown-component.scss"],"names":[],"mappings":"AAAA;EACE,4BAA4B;EAC5B,gDAAgD;EAChD,6BAA6B;EAC7B,4BAA4B;EAC5B,2BAA2B;EAC3B,yBAAyB;EACzB,+BAA+B;EAC/B,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,qBAAqB;AACvB;AACA;EACE,iBAAiB;AACnB;;AAEA;;EAEE,WAAW;EACX,uBAAuB;EACvB,kBAAkB;EAClB,WAAW;EACX,QAAQ;EACR,wBAAwB;EACxB,YAAY;EACZ,4BAA4B;EAC5B,2CAA2C;EAC3C,WAAW;AACb;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;;EAEE,kBAAkB;EAClB,SAAS;EACT,SAAS;EACT,oCAAoC;EACpC,mDAAmD;EACnD,iEAAiE;EACjE,0CAA0C;EAC1C,UAAU;EACV,oBAAoB;EACpB,gBAAgB;EAChB,8FAA8F;AAChG;;AAEA;EACE,gBAAgB;EAChB,iBAAiB;EACjB,sCAAsC;EACtC,iDAAiD;EACjD,4CAA4C;EAC5C,uCAAuC;EACvC,oLAAoL;AACtL;;AAEA;EACE,WAAW;EACX,0CAA0C;AAC5C;;AAEA;;EAEE,UAAU;EACV,iCAAiC;EACjC,oBAAoB;EACpB,iBAAiB;EACjB,mBAAmB;AACrB;;AAEA;;EAEE,UAAU;EACV,oBAAoB;EACpB,mBAAmB;AACrB","file":"dropdown-panel.css","sourcesContent":[":root {\n  --dp-panel-bg-color: #ffffff;\n  --dp-panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  --dp-panel-border-radius: 4px;\n  --dp-panel-padding: 0.5rem 0;\n  --dp-panel-margin-top: -5px;\n  --dp-menu-margin-top: 0px;\n  --dp-transition-duration: 200ms;\n  --dp-transition-timing: ease-out;\n  --dp-panel-z-index: 20;\n}\n\ndropdown-component {\n  display: inline-block;\n}\ndropdown-component:focus {\n  background: green;\n}\n\ndropdown-component:hover dropdown-trigger::before,\ndropdown-trigger[aria-expanded=true]::before {\n  content: \"\";\n  background: transparent;\n  position: absolute;\n  left: -10px;\n  top: 50%;\n  width: calc(100% + 20px);\n  height: 30px;\n  transform-origin: top center;\n  transform: perspective(50px) rotateX(50deg);\n  z-index: 10;\n}\n\ndropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  position: relative;\n}\n\ndropdown-panel,\ndropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0px;\n  z-index: var(--dp-panel-z-index, 20);\n  background-color: var(--dp-panel-bg-color, #ffffff);\n  box-shadow: var(--dp-panel-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));\n  padding: var(--dp-panel-padding, 0.5rem 0);\n  opacity: 0;\n  pointer-events: none;\n  overflow: hidden;\n  transition: opacity var(--dp-transition-duration, 200ms) var(--dp-transition-timing, ease-out);\n}\n\ndropdown-panel {\n  min-width: 180px;\n  filter: blur(4px);\n  transform: translateY(5px) scale(0.98);\n  border-radius: var(--dp-panel-border-radius, 4px);\n  margin-top: var(--dp-panel-margin-top, -5px);\n  will-change: opacity, transform, filter;\n  transition: opacity var(--dp-transition-duration, 200ms) var(--dp-transition-timing, ease-out), transform var(--dp-transition-duration, 200ms) var(--dp-transition-timing, ease-out);\n}\n\ndropdown-menu {\n  width: 100%;\n  margin-top: var(--dp-menu-margin-top, 0px);\n}\n\ndropdown-component:hover dropdown-panel,\ndropdown-panel[aria-hidden=false] {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  pointer-events: auto;\n  filter: blur(0px);\n  visibility: visible;\n}\n\ndropdown-component:hover dropdown-menu,\ndropdown-menu[aria-hidden=false] {\n  opacity: 1;\n  pointer-events: auto;\n  visibility: visible;\n}"]}