@primer/react/dist/ActionBar/ActionBar-e63def3c.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAaF,CAVA,uCAEE,cAAe,CAEf,wBAAyB,CACzB,eAKF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-e63def3c.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}