@arolariu/components/dist/components/ui/dropdrawer_module.css.map

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

{"version":3,"sources":["webpack://./src/components/ui/dropdrawer.module.css"],"names":[],"mappings":"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","sourcesContent":[".drawerOverlay {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 50;\r\n  background: rgb(0 0 0 / 0.55);\r\n  transition: opacity var(--ac-transition-normal);\r\n\r\n  @supports (-webkit-touch-callout: none) {\r\n    position: absolute;\r\n  }\r\n}\r\n\r\n.drawerOverlay[data-starting-style],\r\n.drawerOverlay[data-ending-style] {\r\n  opacity: 0;\r\n}\r\n\r\n.drawerViewport {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 51;\r\n  display: flex;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.drawerContent {\r\n  pointer-events: auto;\r\n  position: relative;\r\n  inset-inline: 0;\r\n  display: flex;\r\n  width: min(100%, 48rem);\r\n  max-height: 95vh;\r\n  flex-direction: column;\r\n  margin-top: 6rem;\r\n  padding: 1rem 1rem 1.5rem;\r\n  border: 1px solid var(--ac-border);\r\n  border-bottom: 0;\r\n  border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0;\r\n  background: var(--ac-popover);\r\n  color: var(--ac-popover-foreground);\r\n  box-shadow: 0 -16px 40px -16px rgb(0 0 0 / 0.35);\r\n  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);\r\n}\r\n\r\n.drawerContent[data-starting-style],\r\n.drawerContent[data-ending-style] {\r\n  opacity: 0;\r\n  transform: translateY(1rem);\r\n}\r\n\r\n.drawerInnerContent {\r\n  display: flex;\r\n  min-height: 0;\r\n  flex: 1;\r\n  flex-direction: column;\r\n}\r\n\r\n.drawerHandle {\r\n  width: 4rem;\r\n  height: 0.25rem;\r\n  margin: 0 auto 1rem;\r\n  border-radius: 9999px;\r\n  background: var(--ac-border);\r\n}\r\n\r\n.drawerHeader {\r\n  display: grid;\r\n  gap: 0.375rem;\r\n  padding: 0 0 1rem;\r\n  text-align: center;\r\n}\r\n\r\n.drawerTitle {\r\n  font-size: var(--ac-text-lg);\r\n  font-weight: 600;\r\n  line-height: 1.2;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.drawerFooter,\r\n.mobileFooter {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n  margin-top: auto;\r\n  padding-top: 1rem;\r\n}\r\n\r\n.desktopFooter {\r\n  padding: 0.5rem;\r\n}\r\n\r\n.dropdownPositioner {\r\n  z-index: 50;\r\n}\r\n\r\n.dropdownContent,\r\n.dropdownSubContent,\r\n.desktopContent {\r\n  min-width: 13.75rem;\r\n  overflow: hidden auto;\r\n  border: 1px solid var(--ac-border);\r\n  border-radius: var(--ac-radius-md);\r\n  background: var(--ac-popover);\r\n  color: var(--ac-popover-foreground);\r\n  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.35);\r\n  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);\r\n}\r\n\r\n.dropdownContent[data-starting-style],\r\n.dropdownContent[data-ending-style],\r\n.dropdownSubContent[data-starting-style],\r\n.dropdownSubContent[data-ending-style],\r\n.desktopContent[data-starting-style],\r\n.desktopContent[data-ending-style] {\r\n  opacity: 0;\r\n  transform: scale(0.96);\r\n}\r\n\r\n.dropdownContent,\r\n.desktopContent {\r\n  max-height: min(70vh, var(--available-height, 70vh));\r\n  padding: 0.25rem;\r\n}\r\n\r\n.dropdownSubContent {\r\n  max-height: min(60vh, var(--available-height, 60vh));\r\n  padding: 0.25rem;\r\n}\r\n\r\n.desktopItem,\r\n.desktopSubTrigger {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  min-height: 2rem;\r\n  width: 100%;\r\n  padding: 0.375rem 0.5rem;\r\n  border-radius: var(--ac-radius-sm);\r\n  color: inherit;\r\n  cursor: default;\r\n  user-select: none;\r\n  font-size: var(--ac-text-sm);\r\n  outline: none;\r\n}\r\n\r\n.desktopItem[data-highlighted],\r\n.desktopSubTrigger[data-highlighted],\r\n.desktopSubTrigger[data-popup-open] {\r\n  background: var(--ac-accent);\r\n  color: var(--ac-accent-foreground);\r\n}\r\n\r\n.desktopItem[data-disabled],\r\n.desktopSubTrigger[data-disabled] {\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n\r\n.desktopLabel {\r\n  padding: 0.375rem 0.5rem;\r\n  font-size: var(--ac-text-sm);\r\n  font-weight: 600;\r\n}\r\n\r\n.desktopSeparator {\r\n  height: 1px;\r\n  margin: 0.25rem -0.25rem;\r\n  background: var(--ac-border);\r\n}\r\n\r\n.mobileContent {\r\n  max-height: 90vh;\r\n}\r\n\r\n.mobileHeaderRow {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.backButton {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 2rem;\r\n  height: 2rem;\r\n  padding: 0.25rem;\r\n  border: 0;\r\n  border-radius: 9999px;\r\n  background: transparent;\r\n  color: inherit;\r\n}\r\n\r\n.backButton:hover {\r\n  background: color-mix(in oklch, var(--ac-muted), transparent 50%);\r\n}\r\n\r\n.backButton:focus-visible,\r\n.mobileItem:focus-visible {\r\n  outline: 2px solid var(--ac-ring);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.mobileViewport,\r\n.mobileMainViewport {\r\n  overflow-y: auto;\r\n}\r\n\r\n.mobileViewport {\r\n  position: relative;\r\n  flex: 1;\r\n  max-height: 70vh;\r\n}\r\n\r\n.mobileMainViewport {\r\n  max-height: 70vh;\r\n}\r\n\r\n.mobileMotionPanel {\r\n  width: 100%;\r\n  min-height: 100%;\r\n  padding-bottom: 1.5rem;\r\n}\r\n\r\n.screenReaderOnlyHeader {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.mobileItem {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  padding: 1rem;\r\n  border: 0;\r\n  background: transparent;\r\n  color: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n\r\n.mobileStandaloneItem {\r\n  margin: 0.375rem 0.5rem;\r\n  border-radius: var(--ac-radius-md);\r\n  background: var(--ac-muted);\r\n}\r\n\r\n.mobileGroupedItem {\r\n  background: transparent;\r\n}\r\n\r\n.mobileLabelWrapper {\r\n  padding: 0;\r\n}\r\n\r\n.mobileLabel {\r\n  padding: 0.5rem 1rem;\r\n  font-size: var(--ac-text-sm);\r\n  font-weight: 500;\r\n  color: var(--ac-muted-foreground);\r\n}\r\n\r\n.mobileGroup {\r\n  margin: 0.75rem 0.5rem;\r\n  overflow: hidden;\r\n  border-radius: var(--ac-radius-xl);\r\n  background: var(--ac-muted);\r\n}\r\n\r\n.mobileGroupSeparator {\r\n  height: 1px;\r\n  background: var(--ac-border);\r\n}\r\n\r\n.itemRow,\r\n.itemChildren {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.itemRow {\r\n  width: 100%;\r\n  justify-content: space-between;\r\n}\r\n\r\n.itemIcon {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.chevron {\r\n  width: 1rem;\r\n  height: 1rem;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.inset {\r\n  padding-left: 2rem;\r\n}\r\n\r\n.mobileItem[data-disabled=\"true\"] {\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n  .drawerHeader {\r\n    text-align: left;\r\n  }\r\n}\r\n"],"sourceRoot":""}