unpoly/unpoly.min.css.map

Progressive enhancement for HTML

{"version":3,"file":"unpoly.min.css","mappings":"AAWA,iBACE,wB;ACZF,WAIE,qB;ACJF,UACE,kBAEF,+BAIE,uCAIA,8BAGA,kCAEE,6BACF,uBACE,2BALJ,uBAOE,4FAEA,0CACE,4E;ACvBJ,mBAEE,aAEF,gBACE,eACA,MACA,OACA,kBACA,WACA,yB;ACSF,MAIE,0CAIA,oCACA,oCAEF,cAEE,eACA,MACA,OACA,QACA,SAMF,wHACE,MACA,OACA,SACA,QAEF,2BACE,uCAEF,SACE,kCAGA,sSAEE,aAEJ,4BAKE,YA/C8B,CAgD9B,eAEF,qCAEE,kBACA,sCAEF,uDAEE,kBAGA,kBACA,kBAIA,4BAEA,aACA,uBAKA,uBAEF,iDAIE,kBAGA,sBAIA,eAEA,sBACA,aAEA,kBAEF,qEAME,cAEF,SACE,YAvG4B,CAyG9B,qEACE,WACA,kBACA,SACA,WACA,iBAGA,eACA,eAoBE,wCACE,0DACA,yDAFF,wCACE,0DACA,yDAFF,wCACE,0DACA,yDAFF,wCACE,0DACA,yDAFF,wCACE,0DACA,yDAMJ,kCACE,YAEF,mCACE,YAEF,kCACE,aAEF,iCACE,WAEF,iCACE,WAkBJ,mBAIE,2BAEA,6CAEE,yBAEJ,cAGE,iBAEA,oCACE,YAEF,qCACE,YAEF,oCACE,YAEF,mCACE,WAEF,mCACE,WAkBJ,aAEE,WACA,iBAKA,UAYF,SAME,aAIA,qBACE,YAEF,sBACE,YAEF,qBACE,YAEF,6BACE,WAEF,6BACE,WAvBJ,SA2BE,gB;AC1RF,0BACE,eAKF,+CACE,e","sources":["webpack://unpoly/./src/unpoly/element.sass","webpack://unpoly/./src/unpoly/fragment.sass","webpack://unpoly/./src/unpoly/viewport.sass","webpack://unpoly/./src/unpoly/network.sass","webpack://unpoly/./src/unpoly/layer.sass","webpack://unpoly/./src/unpoly/link.sass"],"sourcesContent":["// We need to fix two things about the standard `[hidden]` attribute:\n//\n// - We need to strengthen the default style from `display: hidden` to `display: hidden !important`.\n//   Otherwise *any* other `display` rule matching the element would cause the hidden element\n//   to show. For example a rule like `.element { display: flex; }`. See https://meowni.ca/hidden.is.a.lie.html\n//   This is also done by CSS frameworks like Bootstrap: https://getbootstrap.com/docs/4.1/content/reboot/#html5-hidden-attribute\n//\n// - We also to increase the specificity of our new rule from (0, 1, 0) to (0, 2, 0).\n//   Otherwise using any utility class on the same element would cause the hidden element\n//   show if the utility CSS was loaded after Unpoly. For example Bootstrap utilities\n//   like `d-flex`. This is also done by GitHub's Primer framework: https://github.com/primer/css/pull/561/files\n[hidden][hidden]\n  display: none !important\n","up-wrapper\n  // This element must not display inline, since inline elements have no height:\n  // https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced\n  // This causes u.measure in up.viewport.reveal to return an element with a top, but a zero height.\n  display: inline-block\n","up-bounds\n  position: absolute\n\n.up-focus-hidden:focus-visible\n  // Some developers agent stylesheets will use a focus outline like `2px solid blue`.\n  // When there is also a transition on `outline-color`, we want to prevent\n  // a flash of color.\n  outline-color: transparent !important\n\n  // Browsers like MacOS Safari will default to `outline-style: auto`,\n  // which cannot be configured in width or color.\n  outline-style: none !important\n\nbody.up-scrollbar-away\n  html:has(>&)\n    // We cannot use `overflow-y: clip` here, as that would show duplicate scrollbars on Firefox (issue #795).\n    overflow-y: hidden !important\n  &\n    overflow-y: clip !important\n\n  padding-right: calc(var(--up-scrollbar-width) + var(--up-original-padding-right)) !important\n\n  .up-scrollbar-away\n    right: calc(var(--up-scrollbar-width) + var(--up-original-right)) !important\n",".up-request-loader\n  // This class is assigned to the form we're using to submit a full page load.\n  display: none\n\nup-progress-bar\n  position: fixed\n  top: 0\n  left: 0\n  z-index: 999999999\n  height: 3px\n  background-color: #007bff\n","///////////////////////////////////////////////////////////////////////////////\n// Constants\n///////////////////////////////////////////////////////////////////////////////\n\n// We would prefer having only a single z-index for all overlay modes,\n// possibly controlled by a single, shared CSS variable.\n// However, there is an issue when a layer has a fixed navigation bar:\n//\n// - If the bar's z-index is lower than the one from Unpoly's layers,\n//   popups from the underlying page will overlap the bar\n// - If the bar's z-index is higher than the one from Unpoly's layers,\n//   a drawer or modal will no longer overlap the fixed bar\n//\n// Hence we have two z-indexes. A fixed navigation bar needs to have a z-index\n// between those two. The default z-index for a fixed Bootstrap 4 navigation bar\n// (.navbar.fixed-top) is 1030.\n$overlay-with-tether-z-index: 1000\n$overlay-with-viewport-z-index: 2000\n\n:root\n  // Currently all overlay modes with a viewport have the same backdrop.\n  // When we do a lightbox mode, we will need a darker backdrop for that one mode.\n  // Hence we cannot share it across all modes using a CSS variable.\n  --up-overlay-backdrop: rgba(0, 0, 0, 0.4)\n\n  // If multiple modals are nested inside each other, the padding is\n  // multiplied by the nesting depth.\n  --up-modal-viewport-padding-x: 15px\n  --up-modal-viewport-padding-y: 25px\n\nup-focus-trap\n  // Prevent focusing the trap from scrolling the underlying root layer\n  position: fixed\n  top: 0\n  left: 0\n  width: 0\n  height: 0\n\n///////////////////////////////////////////////////////////////////////////////\n// Virtual %elements shared by multiple overlay modes\n///////////////////////////////////////////////////////////////////////////////\n\n%maximize\n  top: 0\n  left: 0\n  bottom: 0\n  right: 0\n\n%large-shadow\n  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3)\n\n%small-shadow\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)\n\n%no-focus-outline\n  &:focus,\n  &:focus-visible\n    outline: none\n\n%overlay-with-viewport\n  @extend %maximize\n  @extend %no-focus-outline\n  // Create a stacking context for child elements by giving a position and z-index.\n  // This way the z-indexes of our child elements don't need to be defined.\n  z-index: $overlay-with-viewport-z-index\n  position: fixed\n\n%overlay-backdrop\n  @extend %maximize\n  position: absolute\n  background: var(--up-overlay-backdrop)\n\n%overlay-viewport\n  @extend %maximize\n  position: absolute\n\n  // The viewport always has a scrollbar, except when we're animating (see below)\n  overflow-y: scroll\n  overflow-x: hidden\n\n  // Prevent users from scrolling a parent layer when they bump\n  // into the end of this layer's viewport.\n  overscroll-behavior: contain\n\n  display: flex\n  align-items: flex-start\n\n  // Center %up-overlay-box within the viewport.\n  // This also turns block children into flex children, so they can grow with content,\n  // up to our max-width of 100%.\n  justify-content: center\n\n%overlay-box\n  // We focus the box after the overlay was opened.\n  @extend %no-focus-outline\n\n  position: relative\n\n  // Include the padding in any width that might be set on the frame\n  box-sizing: border-box\n\n  // Regardless of size we never want to grow wider than the viewport,\n  // which would cause horizontal scroll bars.\n  max-width: 100%\n\n  background-color: #fff\n  padding: 20px\n\n  overflow-x: hidden\n\n%overlay-content\n  // Custom elements are display: inline by default, which is not a good container\n  // for content. It will cause children not to take up availabile space.\n  // We can make %overlay-content display: block without it taking up 100% width\n  // because our container %overlay-box is already display: inline-block, limiting\n  // children to their intrinsic width.\n  display: block\n\n%overlay-with-tether\n  z-index: $overlay-with-tether-z-index\n\n%overlay-dismiss\n  color: #888\n  position: absolute\n  top: 10px\n  right: 10px\n  font-size: 1.7rem\n  // This line-height will position a sans-serif \"×\" with equal distance to the\n  // top and right border, even when the font-size changes.\n  line-height: 0.5\n  cursor: pointer\n\n\n///////////////////////////////////////////////////////////////////////////////\n// Modals are a centered window with its own scrollbar\n///////////////////////////////////////////////////////////////////////////////\nup-modal\n  @extend %overlay-with-viewport\n\nup-modal-backdrop\n  @extend %overlay-backdrop\n\nup-modal-viewport\n  @extend %overlay-viewport\n\n  // Implement the margin around the dialog box with a padding of the viewport.\n  // This way we can give .up-overlay-box a max-width of 100%, (1) preventing people\n  // from setting withs larger than the viewport, and (2) sizing approproately\n  // if the modal contents are very wide and cannot wrap (e.g. code blocks).\n  @for $nesting from 0 through 4\n    up-modal[nesting=\"#{$nesting}\"] &\n      padding-inline: calc(#{$nesting + 1} * var(--up-modal-viewport-padding-x))\n      padding-block: calc(#{$nesting + 1} * var(--up-modal-viewport-padding-y))\n\nup-modal-box\n  @extend %overlay-box\n  @extend %large-shadow\n\n  up-modal[size=small] &\n    width: 350px\n\n  up-modal[size=medium] &\n    width: 650px\n\n  up-modal[size=large] &\n    width: 1000px\n\n  up-modal[size=grow] &\n    width: auto // This is also the default value, but be explicit\n\n  up-modal[size=full] &\n    width: 100%\n\nup-modal-content\n  @extend %overlay-content\n\nup-modal-dismiss\n  @extend %overlay-dismiss\n\n\n///////////////////////////////////////////////////////////////////////////////\n// Drawers are a full-height modal clinging to the left or right edge of the screen\n///////////////////////////////////////////////////////////////////////////////\nup-drawer\n  @extend %overlay-with-viewport\n\nup-drawer-backdrop\n  @extend %overlay-backdrop\n\nup-drawer-viewport\n  @extend %overlay-viewport\n\n  // Allow frame to grow from the left, up to its max-width of 100%\n  justify-content: flex-start\n\n  up-drawer[position=right] &\n    // Allow frame to grow from the right, up to its max-width of 100%\n    justify-content: flex-end\n\nup-drawer-box\n  @extend %overlay-box\n  @extend %large-shadow\n  min-height: 100vh\n\n  up-drawer[size=small] &\n    width: 150px\n\n  up-drawer[size=medium] &\n    width: 340px\n\n  up-drawer[size=large] &\n    width: 600px\n\n  up-drawer[size=grow] &\n    width: auto // This is also the default value, but be explicit\n\n  up-drawer[size=full] &\n    width: 100%\n\nup-drawer-content\n  @extend %overlay-content\n\nup-drawer-dismiss\n  @extend %overlay-dismiss\n\n\n///////////////////////////////////////////////////////////////////////////////\n// Cover is an overlay that fills the entire screen\n///////////////////////////////////////////////////////////////////////////////\nup-cover\n  @extend %overlay-with-viewport\n\nup-cover-viewport\n  @extend %overlay-viewport\n\nup-cover-box\n  @extend %overlay-box\n  width: 100%\n  min-height: 100vh\n\n  // We assume the developer wants to embed a full application layout\n  // into a cover overlay. That layout will either want to touch the screen\n  // edges, so we remove all padding.\n  padding: 0\n\nup-cover-content\n  @extend %overlay-content\n\nup-cover-dismiss\n  @extend %overlay-dismiss\n\n\n///////////////////////////////////////////////////////////////////////////////\n// Popup is a small box that is anchored to a link\n///////////////////////////////////////////////////////////////////////////////\nup-popup\n  @extend %overlay-with-tether\n  @extend %overlay-box\n  @extend %small-shadow\n\n  // The small popup box looks better with a tighter padding.\n  padding: 15px\n\n  // position: absolute is given by up.Tether\n\n  &[size=small]\n    width: 180px\n\n  &[size=medium]\n    width: 300px\n\n  &[size=large]\n    width: 550px\n\n  &[size=grow] &\n    width: auto // This is also the default value, but be explicit\n\n  &[size=full] &\n    width: 100%\n\n  // The up-popup[align=right] attribute right-aligns the text because HTML.\n  // We reset the text alignment to left.\n  text-align: left\n\nup-popup-content\n  @extend %overlay-content\n\nup-popup-dismiss\n  @extend %overlay-dismiss\n","[up-clickable][role=link]\n  cursor: pointer\n\n// Expanded link areas are not announced to screen readers, as they\n// already announce the expanding link. However, we still want the expanded areas\n// to show a pointer cursor for visually abled mouse users.\n[up-expand]:not([role]), [up-expand][role=link]\n  cursor: pointer\n"],"names":[],"sourceRoot":""}