primer_view_components 0.53.2 → 0.53.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +12 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_bar.css +1 -1
- data/app/components/primer/alpha/action_bar.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dropdown/menu.rb +1 -1
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/select_panel.css +1 -1
- data/app/components/primer/alpha/select_panel.css.map +1 -1
- data/app/components/primer/alpha/stack.css +1 -1
- data/app/components/primer/alpha/stack.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/tree_view.css +1 -1
- data/app/components/primer/alpha/tree_view.css.map +1 -1
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/relative_time.rb +7 -1
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/lib/primer/accessibility.rb +1 -2
- data/lib/primer/classify.rb +1 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/static/arguments.json +7 -1
- data/static/constants.json +8 -0
- data/static/info_arch.json +7 -1
- metadata +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{position:relative;display:inline-flex;min-width:max-content;height:var(--control-medium-size);padding:0 var(--control-medium-paddingInline-normal);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);color:var(--button-default-fgColor-rest);text-align:center;cursor:pointer;flex-direction:row;-webkit-user-select:none;user-select:none;background-color:initial;border:var(--borderWidth-thin) solid;border-color:#0000;border-radius:var(--borderRadius-medium);transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;justify-content:space-between;align-items:center;gap:var(--base-size-4)}@media (pointer:coarse){:is(.Button:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:48px;content:"";transform:translateX(-50%) translateY(-50%);min-width:48px}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{cursor:not-allowed;box-shadow:none}.Button.Button--iconOnly{color:var(--fgColor-muted)}:is(a.Button,summary.Button):hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;align-items:center;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{color:inherit;background-color:var(--buttonCounter-default-bgColor-rest)}.Button-label{line-height:var(--text-body-lineHeight-medium);white-space:nowrap;grid-area:text}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4)
|
|
1
|
+
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65, 0, 0.35, 1)}.Button{position:relative;display:inline-flex;min-width:max-content;height:var(--control-medium-size);padding:0 var(--control-medium-paddingInline-normal);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);color:var(--button-default-fgColor-rest);text-align:center;cursor:pointer;flex-direction:row;-webkit-user-select:none;user-select:none;background-color:initial;border:var(--borderWidth-thin) solid;border-color:#0000;border-radius:var(--borderRadius-medium);transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;justify-content:space-between;align-items:center;gap:var(--base-size-4)}@media (pointer:coarse){:is(.Button:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:48px;content:"";transform:translateX(-50%) translateY(-50%);min-width:48px}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{cursor:not-allowed;box-shadow:none}.Button.Button--iconOnly{color:var(--fgColor-muted)}:is(a.Button,summary.Button):hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;align-items:center;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{color:inherit;background-color:var(--buttonCounter-default-bgColor-rest)}.Button-label{line-height:var(--text-body-lineHeight-medium);white-space:nowrap;grid-area:text}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(-1 * var(--base-size-4))}.Button--small{min-width:var(--control-small-size);height:var(--control-small-size);padding:0 var(--control-small-paddingInline-condensed);font-size:var(--text-body-size-small);gap:var(--control-small-gap)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small)}:is(.Button--small .Button-content)>:not(:last-child){margin-right:var(--control-small-gap)}.Button--large{height:var(--control-large-size);padding:0 var(--control-large-paddingInline-spacious);gap:var(--control-large-gap)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large)}:is(.Button--large .Button-content)>:not(:last-child){margin-right:var(--control-large-gap)}.Button--fullWidth{width:100%}.Button--labelWrap{min-width:fit-content;height:unset;min-height:var(--control-medium-size)}.Button--labelWrap .Button-content{flex:1 1 auto;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock) - var(--base-size-2))}.Button--labelWrap .Button-label{white-space:unset}.Button--labelWrap.Button--small{height:unset;min-height:var(--control-small-size)}.Button--labelWrap.Button--small .Button-content{padding-block:calc(var(--control-small-paddingBlock) - var(--base-size-2))}.Button--labelWrap.Button--large{height:unset;min-height:var(--control-large-size);padding-inline:var(--control-large-paddingInline-spacious)}.Button--labelWrap.Button--large .Button-content{padding-block:calc(var(--control-large-paddingBlock) - var(--base-size-2))}.Button--primary{color:var(--button-primary-fgColor-rest);fill:var(--button-primary-iconColor-rest);background-color:var(--button-primary-bgColor-rest);border-color:var(--button-primary-borderColor-rest);box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary.Button--iconOnly{color:var(--button-primary-iconColor-rest)}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover);border-color:var(--button-primary-borderColor-hover)}.Button--primary:focus{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis)}.Button--primary:focus:not(:focus-visible){outline:1px solid #0000;box-shadow:none}.Button--primary:focus-visible{outline:2px solid var(--focus-outlineColor);outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis)}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active);box-shadow:var(--button-primary-shadow-selected)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{color:var(--button-primary-fgColor-disabled);fill:var(--button-primary-fgColor-disabled);background-color:var(--button-primary-bgColor-disabled);border-color:var(--button-primary-borderColor-disabled)}.Button--primary .Counter{color:inherit;background-color:var(--buttonCounter-primary-bgColor-rest)}.Button--secondary{color:var(--button-default-fgColor-rest);fill:var(--fgColor-muted);background-color:var(--button-default-bgColor-rest);border-color:var(--button-default-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover);border-color:var(--button-default-borderColor-hover)}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active);border-color:var(--button-default-borderColor-active)}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected);box-shadow:var(--shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}.Button--invisible{color:var(--button-invisible-fgColor-rest)}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{color:var(--button-invisible-fgColor-disabled);fill:var(--button-invisible-fgColor-disabled);background-color:var(--button-invisible-bgColor-disabled);border-color:var(--button-invisible-borderColor-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest)}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}:is(.Button--invisible .Button-visual) .Counter{color:var(--fgColor-default)}.Button--link{display:inline-block;min-width:fit-content;height:unset;padding:0;font-size:inherit;color:var(--fgColor-link);fill:var(--fgColor-link);border:none}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:initial;border-color:#0000}.Button--link .Button-label{white-space:unset}.Button--danger{color:var(--button-danger-fgColor-rest);fill:var(--button-danger-iconColor-rest);background-color:var(--button-danger-bgColor-rest);border-color:var(--button-danger-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--danger.Button--iconOnly{color:var(--button-danger-iconColor-rest)}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover);fill:var(--button-danger-fgColor-hover);background-color:var(--button-danger-bgColor-hover);border-color:var(--button-danger-borderColor-hover);box-shadow:var(--shadow-resting-small)}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{color:var(--buttonCounter-danger-fgColor-hover);background-color:var(--buttonCounter-danger-bgColor-hover)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active);fill:var(--button-danger-fgColor-active);background-color:var(--button-danger-bgColor-active);border-color:var(--button-danger-borderColor-active);box-shadow:var(--button-danger-shadow-selected)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled);fill:var(--button-danger-fgColor-disabled);background-color:var(--button-danger-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}:is(.Button--danger:disabled,.Button--danger[aria-disabled=true]) .Counter{color:var(--buttonCounter-danger-fgColor-disabled);background-color:var(--buttonCounter-danger-bgColor-disabled)}.Button--danger .Counter{color:var(--buttonCounter-danger-fgColor-rest);background-color:var(--buttonCounter-danger-bgColor-rest)}.Button--iconOnly{display:inline-grid;width:var(--control-medium-size);padding:unset;place-content:center}.Button--iconOnly.Button--small{width:var(--control-small-size)}.Button--iconOnly.Button--large{width:var(--control-large-size)}.Button--inactive:not([aria-disabled=true],:disabled){color:var(--button-inactive-fgColor);cursor:default;background-color:var(--button-inactive-bgColor);border:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"AAOA,MACE,oBAAqB,CACrB,8CACF,CAGA,QACE,iBAAkB,CAClB,mBAAoB,CACpB,qBAAsB,CACtB,iCAAkC,CAClC,oDAAqD,CACrD,sCAAuC,CACvC,0CAA2C,CAC3C,wCAAyC,CACzC,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,wBAAiB,CAAjB,gBAAiB,CACjB,wBAA6B,CAC7B,oCAAqC,CACrC,kBAAyB,CACzB,wCAAyC,CACzC,uDAAwD,CACxD,4DAAgE,CAChE,6BAA8B,CAC9B,kBAAmB,CACnB,sBA4BF,CAzBE,wBAEI,oBCvCN,kBAAA,QAAA,SAAA,WAAA,YAAA,gBAAA,WAAA,4CAAA,cDuCsC,CAEpC,CAIA,cACE,wCACF,CAEA,eACE,eACF,CAEA,6CAEE,kBAAmB,CACnB,eACF,CAEA,yBACE,0BACF,CAKA,mCACE,4BAAqB,CAArB,oBACF,CAIF,gBACE,aAAc,CACd,YAAa,CACb,uDAAwD,CACxD,4DAA8D,CAC9D,kBAAmB,CACnB,oBAOF,CAHE,kCACE,sCACF,CAIF,4BACE,qBACF,CAKA,eACE,YAAa,CACb,mBAMF,CAJE,wBACE,aAAc,CACd,0DACF,CAGF,cACE,8CAA+C,CAC/C,kBAAmB,CACnB,cACF,CAEA,sBACE,uBACF,CAEA,0BACE,iBACF,CAEA,uBACE,wBACF,CAEA,uBACE,wCACF,CAIA,eACE,mCAAoC,CACpC,gCAAiC,CACjC,sDAAuD,CACvD,qCAAsC,CACtC,4BAWF,CATE,6BACE,6CACF,CAGE,sDACE,qCACF,CAIJ,eACE,gCAAiC,CACjC,qDAAsD,CACtD,4BAWF,CATE,6BACE,6CACF,CAGE,sDACE,qCACF,CAIJ,mBACE,UACF,CAIA,mBACE,qBAAsB,CACtB,YAAa,CACb,qCA8BF,CA5BE,mCACE,aAAc,CACd,kBAAmB,CACnB,2EACF,CAEA,iCACE,iBACF,CAEA,iCACE,YAAa,CACb,oCAKF,CAHE,iDACE,0EACF,CAGF,iCACE,YAAa,CACb,oCAAqC,CACrC,0DAKF,CAHE,iDACE,0EACF,CAOJ,iBACE,wCAAyC,CACzC,yCAA0C,CAC1C,mDAAoD,CACpD,mDAAoD,CACpD,sEA6CF,CA3CE,kCACE,0CACF,CAEA,wDACE,oDAAqD,CACrD,oDACF,CAGA,uBE9NA,2CAAgC,CAChC,mBAA8B,CAC9B,oDFoOA,CAJE,2CACE,uBAA8B,CAC9B,eACF,CAIF,+BEzOA,2CAAgC,CAChC,mBAA8B,CAC9B,oDFyOA,CAEA,2EAEE,qDAAsD,CACtD,gDACF,CAEA,+DAEE,4CAA6C,CAC7C,2CAA4C,CAC5C,uDAAwD,CACxD,uDACF,CAEA,0BACE,aAAc,CACd,0DACF,CAIF,mBACE,wCAAyC,CACzC,yBAA0B,CAC1B,mDAAoD,CACpD,mDAAoD,CACpD,kFAwBF,CAtBE,0DACE,oDAAqD,CACrD,oDACF,CAEA,yCACE,qDAAsD,CACtD,qDACF,CAEA,sCACE,uDAAwD,CACxD,8BACF,CAEA,mEAEE,qCAAsC,CACtC,oCAAqC,CACrC,uDAAwD,CACxD,uDACF,CAGF,mBACE,0CAmCF,CAjCE,oCACE,kEACF,CAEA,0DACE,wGACF,CAEA,+EAEE,uDACF,CAEA,mEAEE,8CAA+C,CAC/C,6CAA8C,CAC9C,yDAA0D,CAC1D,yDACF,CAGA,6DACE,0CACF,CAEA,kCACE,kEAKF,CAHE,gDACE,4BACF,CAIJ,cACE,oBAAqB,CACrB,qBAAsB,CACtB,YAAa,CACb,SAAU,CACV,iBAAkB,CAClB,yBAA0B,CAC1B,wBAAyB,CACzB,WAsBF,CApBE,qDACE,iCAA0B,CAA1B,yBACF,CAEA,gDAEE,kBACF,CAEA,yDAEE,qCAAsC,CACtC,oCAAqC,CACrC,wBAA6B,CAC7B,kBACF,CAEA,4BACI,iBACJ,CAIF,gBACE,uCAAwC,CACxC,wCAAyC,CACzC,kDAAmD,CACnD,kDAAmD,CACnD,kFA6CF,CA3CE,iCACE,yCACF,CAEA,uDACE,wCAAyC,CACzC,uCAAwC,CACxC,mDAAoD,CACpD,mDAAoD,CACpD,sCAMF,CAJE,gEACE,+CAAgD,CAChD,0DACF,CAGF,yEAEE,yCAA0C,CAC1C,wCAAyC,CACzC,oDAAqD,CACrD,oDAAqD,CACrD,+CACF,CAEA,6DAEE,2CAA4C,CAC5C,0CAA2C,CAC3C,sDAAuD,CACvD,uDAMF,CAJE,2EACE,kDAAmD,CACnD,6DACF,CAGF,yBACE,8CAA+C,CAC/C,yDACF,CAGF,kBACE,mBAAoB,CACpB,gCAAiC,CACjC,aAAc,CACd,oBASF,CAPE,gCACE,+BACF,CAEA,gCACE,+BACF,CAIF,sDACE,oCAAqC,CACrC,cAAe,CACf,+CAAgD,CAChD,QACF","file":"button.css","sourcesContent":["/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n/* stylelint-disable primer/spacing */\n\n/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n display: inline-flex;\n min-width: max-content;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n color: var(--button-default-fgColor-rest);\n text-align: center;\n cursor: pointer;\n flex-direction: row;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n &.Button--iconOnly {\n color: var(--fgColor-muted);\n }\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n line-height: var(--text-body-lineHeight-medium);\n white-space: nowrap;\n grid-area: text;\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n min-width: var(--control-small-size);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n font-size: var(--text-body-size-small);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* allow button label text to wrap */\n\n.Button--labelWrap {\n min-width: fit-content;\n height: unset;\n min-height: var(--control-medium-size);\n\n & .Button-content {\n flex: 1 1 auto;\n align-self: stretch;\n padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n }\n\n & .Button-label {\n white-space: unset;\n }\n\n &.Button--small {\n height: unset;\n min-height: var(--control-small-size);\n\n & .Button-content {\n padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n }\n }\n\n &.Button--large {\n height: unset;\n min-height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-spacious);\n\n & .Button-content {\n padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n }\n }\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n &.Button--iconOnly {\n color: var(--button-primary-iconColor-rest);\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n fill: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-invisible-fgColor-rest);\n\n &.Button--iconOnly {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n display: inline-block;\n min-width: fit-content;\n height: unset;\n padding: 0;\n font-size: inherit;\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\n border: none;\n\n &:hover:not(:disabled, .Button--inactive) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n fill: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n }\n\n & .Button-label {\n white-space: unset;\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &.Button--iconOnly {\n color: var(--button-danger-iconColor-rest);\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n width: var(--control-medium-size);\n padding: unset;\n place-content: center;\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n color: var(--button-inactive-fgColor);\n cursor: default;\n background-color: var(--button-inactive-bgColor);\n border: 0;\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n/* stylelint-disable primer/spacing */\n\n/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n display: inline-flex;\n min-width: max-content;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n color: var(--button-default-fgColor-rest);\n text-align: center;\n cursor: pointer;\n flex-direction: row;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n &.Button--iconOnly {\n color: var(--fgColor-muted);\n }\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n line-height: var(--text-body-lineHeight-medium);\n white-space: nowrap;\n grid-area: text;\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n min-width: var(--control-small-size);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n font-size: var(--text-body-size-small);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* allow button label text to wrap */\n\n.Button--labelWrap {\n min-width: fit-content;\n height: unset;\n min-height: var(--control-medium-size);\n\n & .Button-content {\n flex: 1 1 auto;\n align-self: stretch;\n padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n }\n\n & .Button-label {\n white-space: unset;\n }\n\n &.Button--small {\n height: unset;\n min-height: var(--control-small-size);\n\n & .Button-content {\n padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n }\n }\n\n &.Button--large {\n height: unset;\n min-height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-spacious);\n\n & .Button-content {\n padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n }\n }\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n &.Button--iconOnly {\n color: var(--button-primary-iconColor-rest);\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n fill: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-invisible-fgColor-rest);\n\n &.Button--iconOnly {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n display: inline-block;\n min-width: fit-content;\n height: unset;\n padding: 0;\n font-size: inherit;\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\n border: none;\n\n &:hover:not(:disabled, .Button--inactive) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n fill: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n }\n\n & .Button-label {\n white-space: unset;\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &.Button--iconOnly {\n color: var(--button-danger-iconColor-rest);\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n width: var(--control-medium-size);\n padding: unset;\n place-content: center;\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n color: var(--button-inactive-fgColor);\n cursor: default;\n background-color: var(--button-inactive-bgColor);\n border: 0;\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Counter{display:inline-block;min-width:var(--base-size-20);padding:0 var(--base-size-6);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:calc(var(--base-size-20) - var(--borderWidth-thin)
|
|
1
|
+
.Counter{display:inline-block;min-width:var(--base-size-20);padding:0 var(--base-size-6);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:calc(var(--base-size-20) - 2 * var(--borderWidth-thin));color:var(--fgColor-default);text-align:center;background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin) solid var(--counter-borderColor);border-radius:2em}.Counter:empty{display:none}.Counter .octicon{vertical-align:text-top;opacity:.8}.Counter--primary{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-neutral-emphasis)}.Counter--secondary{color:var(--fgColor-muted);background-color:var(--bgColor-neutral-muted)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SACE,oBAAqB,CACrB,6BAA8B,CAC9B,4BAA6B,CAC7B,qCAAsC,CACtC,0CAA2C,CAE3C,
|
|
1
|
+
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SACE,oBAAqB,CACrB,6BAA8B,CAC9B,4BAA6B,CAC7B,qCAAsC,CACtC,0CAA2C,CAE3C,mEAAoE,CACpE,4BAA6B,CAC7B,iBAAkB,CAClB,wEAA0E,CAC1E,+DAAgE,CAEhE,iBAWF,CATE,eACE,YACF,CAGA,kBACE,uBAAwB,CACxB,UACF,CAGF,kBACE,+BAAgC,CAChC,gDACF,CAEA,oBACE,0BAA2B,CAC3B,6CACF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 var(--base-size-6);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--fgColor-default);\n text-align: center;\n background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n border: var(--borderWidth-thin) solid var(--counter-borderColor);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--fgColor-muted);\n background-color: var(--bgColor-neutral-muted);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.flash:not(.Banner){position:relative;padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.flash:not(.Banner) .octicon{margin-right:var(--base-size-12);color:var(--fgColor-accent)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){float:right;margin-top:calc(var(--base-size-4)
|
|
1
|
+
.flash:not(.Banner){position:relative;padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.flash:not(.Banner) .octicon{margin-right:var(--base-size-12);color:var(--fgColor-accent)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){float:right;margin-top:calc(-1 * var(--base-size-4));text-align:center;cursor:pointer;background:none;border:0;appearance:none}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){float:right;margin-top:-3px;margin-left:var(--stack-gap-spacious);background-clip:padding-box}.flash-action.btn:not(.Banner-actions) .octicon{margin-right:var(--control-small-gap);color:var(--fgColor-muted)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted)}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention)}.flash-error:not(.Banner){color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted)}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger)}.flash-success:not(.Banner){color:var(--fgColor-default);background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted)}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success)}.flash-full:not(.Banner){margin-top:calc(-1 * var(--borderWidth-thin));border-width:var(--borderWidth-thin) 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-banner,.flash-full{background-color:var(--bgColor-default)}.warning{padding:.5em;margin-bottom:.8em;font-weight:var(--base-text-weight-semibold);background-color:var(--bgColor-attention-muted)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAKA,oBACE,iBAAkB,CAClB,wEAAyE,CAGzE,4BAA6B,CAC7B,yFAA2F,CAC3F,4CAA6C,CAC7C,kBAAmB,CACnB,oCAAqC,CACrC,wCAWF,CATE,6BACE,gCAAiC,CACjC,2BACF,CAGA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCACE,WAAY,CACZ,
|
|
1
|
+
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAKA,oBACE,iBAAkB,CAClB,wEAAyE,CAGzE,4BAA6B,CAC7B,yFAA2F,CAC3F,4CAA6C,CAC7C,kBAAmB,CACnB,oCAAqC,CACrC,wCAWF,CATE,6BACE,gCAAiC,CACjC,2BACF,CAGA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCACE,WAAY,CACZ,wCAAyC,CACzC,iBAAkB,CAClB,cAAe,CAGf,eAAgB,CAChB,QAAS,CACT,eAaF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCACE,WAAY,CACZ,eAAgB,CAChB,qCAAsC,CACtC,2BAcF,CAZE,gDACE,qCAAsC,CACtC,0BACF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBACE,4BAA6B,CAC7B,+FAAiG,CACjG,+CAKF,CAHE,kCACE,8BACF,CAGF,0BACE,4BAA6B,CAC7B,yFAA2F,CAC3F,4CAKF,CAHE,mCACE,2BACF,CAGF,4BACE,4BAA6B,CAC7B,2FAA6F,CAC7F,6CAKF,CAHE,qCACE,4BACF,CAKF,yBACE,6CAA8C,CAC9C,sCAAuC,CACvC,eACF,CAGA,cACE,cAAe,CACf,KAAM,CACN,UAAW,CACX,UAAW,CACX,YAAa,CACb,cAAe,CACf,aAAc,CACd,eACF,CAGA,0BAEE,uCACF,CAGA,SACE,YAAc,CACd,kBAAoB,CACpB,4CAA6C,CAC7C,+CACF","file":"flash.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n & .octicon {\n margin-right: var(--base-size-12);\n color: var(--fgColor-accent);\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Popover{position:absolute;z-index:100}.Popover-message{position:relative;width:232px;margin-right:auto;margin-left:auto;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important}.Popover-message:after,.Popover-message:before{position:absolute;left:50%;display:inline-block;content:""}.Popover-message:before{top:-16px;margin-left:-9px;border:8px solid #0000;border-bottom:
|
|
1
|
+
.Popover{position:absolute;z-index:100}.Popover-message{position:relative;width:232px;margin-right:auto;margin-left:auto;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important}.Popover-message:after,.Popover-message:before{position:absolute;left:50%;display:inline-block;content:""}.Popover-message:before{top:-16px;margin-left:-9px;border:8px solid #0000;border-bottom-color:var(--borderColor-default)}.Popover-message:after{top:-14px;margin-left:-8px;border:7px solid #0000;border-bottom-color:var(--overlay-bgColor)}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{top:auto;border-bottom-color:#0000}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{bottom:-16px;border-top-color:var(--borderColor-default)}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{bottom:-14px;border-top-color:var(--overlay-bgColor)}.Popover-message--bottom-right,.Popover-message--top-right{right:-9px;margin-right:0}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:var(--base-size-20)}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:var(--base-size-20);margin-right:1px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:var(--base-size-24);margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:var(--base-size-24);margin-left:1px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{top:50%;left:auto;margin-left:0;border-bottom-color:#0000}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{right:-16px;border-left-color:var(--borderColor-default)}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{right:-14px;border-left-color:var(--overlay-bgColor)}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{left:-16px;border-right-color:var(--borderColor-default)}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{left:-14px;margin-bottom:1px;border-right-color:var(--overlay-bgColor)}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:var(--base-size-24)}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:var(--base-size-16)}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{position:fixed;top:auto!important;right:0!important;bottom:0!important;left:0!important}.Popover-message{top:auto;right:auto;bottom:auto;left:auto;width:auto!important;margin:var(--stack-gap-condensed)}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBACE,iBAAkB,CAClB,WAAY,CACZ,iBAAkB,CAClB,gBAAiB,CACjB,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAIzC,4EA2BF,CAxBE,+CAEE,iBAAkB,CAClB,QAAS,CACT,oBAAqB,CACrB,UACF,CAEA,wBACE,SAAU,CACV,gBAAiB,
|
|
1
|
+
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBACE,iBAAkB,CAClB,WAAY,CACZ,iBAAkB,CAClB,gBAAiB,CACjB,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAIzC,4EA2BF,CAxBE,+CAEE,iBAAkB,CAClB,QAAS,CACT,oBAAqB,CACrB,UACF,CAEA,wBACE,SAAU,CACV,gBAAiB,CAEjB,sBAA6B,CAC7B,8CACF,CAEA,uBACE,SAAU,CACV,gBAAiB,CAEjB,sBAA6B,CAE7B,0CACF,CAKA,mEAEE,YACF,CAUF,mNAME,QAAS,CACT,yBACF,CAEA,2GAGE,YAAa,CACb,2CACF,CAEA,wGAGE,YAAa,CAEb,uCACF,CAGA,2DAEE,UAAW,CACX,cACF,CAEA,gJAIE,SAAU,CACV,aACF,CAEA,yEAEE,yBACF,CAEA,uEAEE,yBAA0B,CAC1B,gBACF,CAGA,yDAEE,SAAU,CACV,aACF,CAEA,4IAIE,wBAAyB,CACzB,aACF,CAEA,qEAEE,wBAAyB,CACzB,eACF,CAGA,oZAYE,OAAQ,CACR,SAAU,CACV,aAAc,CACd,yBACF,CAEA,6MAME,eACF,CAEA,uMAME,eACF,CAGA,wGAGE,WAAY,CACZ,4CACF,CAEA,qGAGE,WAAY,CAEZ,wCACF,CAGA,qGAGE,UAAW,CACX,6CACF,CAEA,kGAGE,UAAW,CACX,iBAAkB,CAElB,yCACF,CAGA,wIAIE,uBACF,CAGA,oJAIE,QACF,CAEA,2EAEE,0BACF,CAEA,yEAEE,0BAA2B,CAC3B,iBACF,CAEA,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SACE,cAAe,CACf,kBAAoB,CACpB,iBAAmB,CACnB,kBAAoB,CACpB,gBACF,CAEA,iBACE,QAAS,CACT,UAAW,CACX,WAAY,CACZ,SAAU,CACV,oBAAsB,CACtB,iCACF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* adding !important to override utility classes used in dotcom */\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n /* stylelint-disable-next-line primer/borders */\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* The caret variants below are authored as expanded per-class selectors\n** (rather than nesting `&::before`/`&::after` under a selector list) so each\n** rule's subject buckets by its own class during style recalc. The merged\n** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink\n** and shows up as pure slow-path selector matching. */\n\n/* Bottom-oriented carets */\n.Popover-message--bottom::before,\n.Popover-message--bottom::after,\n.Popover-message--bottom-right::before,\n.Popover-message--bottom-right::after,\n.Popover-message--bottom-left::before,\n.Popover-message--bottom-left::after {\n top: auto;\n border-bottom-color: transparent;\n}\n\n.Popover-message--bottom::before,\n.Popover-message--bottom-right::before,\n.Popover-message--bottom-left::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n}\n\n.Popover-message--bottom::after,\n.Popover-message--bottom-right::after,\n.Popover-message--bottom-left::after {\n bottom: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-top-color: var(--overlay-bgColor);\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n}\n\n.Popover-message--top-right::before,\n.Popover-message--top-right::after,\n.Popover-message--bottom-right::before,\n.Popover-message--bottom-right::after {\n left: auto;\n margin-left: 0;\n}\n\n.Popover-message--top-right::before,\n.Popover-message--bottom-right::before {\n right: var(--base-size-20);\n}\n\n.Popover-message--top-right::after,\n.Popover-message--bottom-right::after {\n right: var(--base-size-20);\n margin-right: 1px;\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n}\n\n.Popover-message--top-left::before,\n.Popover-message--top-left::after,\n.Popover-message--bottom-left::before,\n.Popover-message--bottom-left::after {\n left: var(--base-size-24);\n margin-left: 0;\n}\n\n.Popover-message--top-left::after,\n.Popover-message--bottom-left::after {\n left: var(--base-size-24);\n margin-left: 1px;\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right::before,\n.Popover-message--right::after,\n.Popover-message--right-top::before,\n.Popover-message--right-top::after,\n.Popover-message--right-bottom::before,\n.Popover-message--right-bottom::after,\n.Popover-message--left::before,\n.Popover-message--left::after,\n.Popover-message--left-top::before,\n.Popover-message--left-top::after,\n.Popover-message--left-bottom::before,\n.Popover-message--left-bottom::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n}\n\n.Popover-message--right::before,\n.Popover-message--right-top::before,\n.Popover-message--right-bottom::before,\n.Popover-message--left::before,\n.Popover-message--left-top::before,\n.Popover-message--left-bottom::before {\n margin-top: -9px;\n}\n\n.Popover-message--right::after,\n.Popover-message--right-top::after,\n.Popover-message--right-bottom::after,\n.Popover-message--left::after,\n.Popover-message--left-top::after,\n.Popover-message--left-bottom::after {\n margin-top: -8px;\n}\n\n/* Right-oriented carets */\n.Popover-message--right::before,\n.Popover-message--right-top::before,\n.Popover-message--right-bottom::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n}\n\n.Popover-message--right::after,\n.Popover-message--right-top::after,\n.Popover-message--right-bottom::after {\n right: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n}\n\n/* Left-oriented carets */\n.Popover-message--left::before,\n.Popover-message--left-top::before,\n.Popover-message--left-bottom::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n}\n\n.Popover-message--left::after,\n.Popover-message--left-top::after,\n.Popover-message--left-bottom::after {\n left: -14px;\n margin-bottom: 1px;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top::before,\n.Popover-message--right-top::after,\n.Popover-message--left-top::before,\n.Popover-message--left-top::after {\n top: var(--base-size-24);\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom::before,\n.Popover-message--right-bottom::after,\n.Popover-message--left-bottom::before,\n.Popover-message--left-bottom::after {\n top: auto;\n}\n\n.Popover-message--right-bottom::before,\n.Popover-message--left-bottom::before {\n bottom: var(--base-size-16);\n}\n\n.Popover-message--right-bottom::after,\n.Popover-message--left-bottom::after {\n bottom: var(--base-size-16);\n margin-bottom: 1px;\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
|
|
@@ -39,6 +39,9 @@ module Primer
|
|
|
39
39
|
}.freeze
|
|
40
40
|
HOUR_OPTIONS = HOUR_MAPPINGS.keys
|
|
41
41
|
|
|
42
|
+
HOUR_CYCLE_DEFAULT = nil
|
|
43
|
+
HOUR_CYCLE_OPTIONS = [HOUR_CYCLE_DEFAULT, :h11, :h12, :h23, :h24].freeze
|
|
44
|
+
|
|
42
45
|
WEEKDAY_DEFAULT = nil
|
|
43
46
|
WEEKDAY_OPTIONS = [WEEKDAY_DEFAULT, :long, :short, :narrow].freeze
|
|
44
47
|
|
|
@@ -88,8 +91,9 @@ module Primer
|
|
|
88
91
|
# @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
|
|
89
92
|
# @param prefix [String] What to prefix the relative time display with.
|
|
90
93
|
# @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
|
|
91
|
-
# @param minute [Symbol] What format
|
|
94
|
+
# @param minute [Symbol] What format minutes should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
|
|
92
95
|
# @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
|
|
96
|
+
# @param hour_cycle [Symbol] What hour cycle should be used. <%= one_of(Primer::Beta::RelativeTime::HOUR_CYCLE_OPTIONS) %>
|
|
93
97
|
# @param weekday [Symbol] What format weekdays should take. <%= one_of(Primer::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
|
|
94
98
|
# @param day [Symbol] What format days should take. <%= one_of(Primer::Beta::RelativeTime::DAY_OPTIONS) %>
|
|
95
99
|
# @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
|
|
@@ -112,6 +116,7 @@ module Primer
|
|
|
112
116
|
second: SECOND_DEFAULT,
|
|
113
117
|
minute: MINUTE_DEFAULT,
|
|
114
118
|
hour: HOUR_DEFAULT,
|
|
119
|
+
hour_cycle: HOUR_CYCLE_DEFAULT,
|
|
115
120
|
weekday: WEEKDAY_DEFAULT,
|
|
116
121
|
day: DAY_DEFAULT,
|
|
117
122
|
month: MONTH_DEFAULT,
|
|
@@ -135,6 +140,7 @@ module Primer
|
|
|
135
140
|
@system_arguments[:second] = fetch_or_fallback(SECOND_OPTIONS, second, SECOND_DEFAULT) if second.present?
|
|
136
141
|
@system_arguments[:minute] = fetch_or_fallback(MINUTE_OPTIONS, minute, MINUTE_DEFAULT) if minute.present?
|
|
137
142
|
@system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
|
|
143
|
+
@system_arguments[:"hour-cycle"] = fetch_or_fallback(HOUR_CYCLE_OPTIONS, hour_cycle, HOUR_CYCLE_DEFAULT) if hour_cycle.present?
|
|
138
144
|
@system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
|
|
139
145
|
@system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
|
|
140
146
|
@system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.TimelineItem{position:relative;display:flex;padding:var(--stack-padding-normal) 0;margin-left:var(--stack-gap-normal)}.TimelineItem:before{position:absolute;top:0;bottom:0;left:0;display:block;width:var(--borderWidth-thick);content:"";background-color:var(--borderColor-muted)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{position:relative;z-index:1;display:flex;width:var(--control-medium-size);height:var(--control-medium-size);margin-right:var(--controlStack-medium-gap-condensed);margin-left:calc(var(--control-medium-size)
|
|
1
|
+
.TimelineItem{position:relative;display:flex;padding:var(--stack-padding-normal) 0;margin-left:var(--stack-gap-normal)}.TimelineItem:before{position:absolute;top:0;bottom:0;left:0;display:block;width:var(--borderWidth-thick);content:"";background-color:var(--borderColor-muted)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{position:relative;z-index:1;display:flex;width:var(--control-medium-size);height:var(--control-medium-size);margin-right:var(--controlStack-medium-gap-condensed);margin-left:calc(1px + -.5 * var(--control-medium-size));color:var(--fgColor-muted);align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;justify-content:center;flex-shrink:0}.TimelineItem-badge--success{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000}.TimelineItem-body{min-width:0;max-width:100%;margin-top:calc(1px + var(--base-size-4));color:var(--fgColor-muted);flex:auto}.TimelineItem-avatar{position:absolute;left:-72px;z-index:1}.TimelineItem-break{position:relative;z-index:1;height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(-1 * var(--stack-gap-normal));margin-left:-56px;background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default)}.TimelineItem--condensed{padding-top:var(--base-size-4);padding-bottom:0}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{height:var(--base-size-16);margin-top:var(--base-size-8);margin-bottom:var(--base-size-8);color:var(--fgColor-muted);background-color:var(--bgColor-default);border:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cACE,iBAAkB,CAClB,YAAa,CAEb,qCAAsC,CAEtC,mCAoBF,CAjBE,qBACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,aAAc,CACd,8BAA+B,CAC/B,UAAW,CAEX,yCACF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBACE,iBAAkB,CAClB,SAAU,CACV,YAAa,CACb,gCAAiC,CACjC,iCAAkC,CAElC,qDAAsD,CAEtD,
|
|
1
|
+
{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cACE,iBAAkB,CAClB,YAAa,CAEb,qCAAsC,CAEtC,mCAoBF,CAjBE,qBACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,aAAc,CACd,8BAA+B,CAC/B,UAAW,CAEX,yCACF,CAEA,yCACE,+CAAgD,CAEhD,mDACF,CAGF,oBACE,iBAAkB,CAClB,SAAU,CACV,YAAa,CACb,gCAAiC,CACjC,iCAAkC,CAElC,qDAAsD,CAEtD,wDAAwD,CACxD,0BAA2B,CAC3B,kBAAmB,CACnB,6CAA8C,CAE9C,4DAA6D,CAC7D,iBAAkB,CAClB,sBAAuB,CACvB,aACF,CAEA,6BACE,+BAAgC,CAChC,gDAAiD,CACjD,0CACF,CAEA,mBACE,WAAY,CACZ,cAAe,CAEf,yCAA0C,CAC1C,0BAA2B,CAC3B,SACF,CAEA,qBACE,iBAAkB,CAElB,UAAW,CACX,SACF,CAEA,oBACE,iBAAkB,CAClB,SAAU,CACV,gCAAiC,CACjC,QAAS,CAET,gDAAiD,CAEjD,iBAAkB,CAClB,uCAAwC,CACxC,QAAS,CACT,sEACF,CAEA,yBACE,8BAA+B,CAC/B,gBAgBF,CAbE,oCAEE,sCACF,CAEA,6CACE,0BAA2B,CAC3B,6BAA8B,CAC9B,gCAAiC,CACjC,0BAA2B,CAC3B,uCAAwC,CACxC,QACF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal) 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--stack-gap-normal);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--borderWidth-thick);\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--borderColor-accent-emphasis);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--control-medium-size);\n height: var(--control-medium-size);\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--controlStack-medium-gap-condensed);\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(var(--control-medium-size) / -2 + 1px);\n color: var(--fgColor-muted);\n align-items: center;\n background-color: var(--timelineBadge-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thick) solid var(--bgColor-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-success-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--base-size-4) + 1px);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--stack-gap-spacious);\n margin: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: calc(var(--stack-gap-normal) * -1);\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -56px;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: var(--stack-gap-normal);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16);\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n}\n"]}
|
data/lib/primer/accessibility.rb
CHANGED
|
@@ -41,9 +41,8 @@ module Primer
|
|
|
41
41
|
}
|
|
42
42
|
}.freeze
|
|
43
43
|
|
|
44
|
-
# rubocop:disable Style/ClassMethodsDefinitions
|
|
44
|
+
# rubocop:disable-next Style/ClassMethodsDefinitions
|
|
45
45
|
class << self
|
|
46
|
-
# rubocop:enable Style/ClassMethodsDefinitions
|
|
47
46
|
|
|
48
47
|
def ignore_preview?(preview_class)
|
|
49
48
|
IGNORED_PREVIEWS.include?(preview_class)
|
data/lib/primer/classify.rb
CHANGED
|
@@ -98,9 +98,8 @@ module Primer
|
|
|
98
98
|
else
|
|
99
99
|
next if val.nil?
|
|
100
100
|
|
|
101
|
-
# rubocop:disable Style/RescueModifier
|
|
101
|
+
# rubocop:disable-next Style/RescueModifier
|
|
102
102
|
found = (LOOKUP[key][val][0] rescue nil) || validate(key, val, 0)
|
|
103
|
-
# rubocop:enable Style/RescueModifier
|
|
104
103
|
if found
|
|
105
104
|
result << found
|
|
106
105
|
result << TMP_PREFIX_CACHE[found] if TMP_PREFIX_CACHE.key?(found)
|
data/static/arguments.json
CHANGED
|
@@ -4996,7 +4996,7 @@
|
|
|
4996
4996
|
"name": "minute",
|
|
4997
4997
|
"type": "Symbol",
|
|
4998
4998
|
"default": "`MINUTE_DEFAULT`",
|
|
4999
|
-
"description": "What format
|
|
4999
|
+
"description": "What format minutes should take. One of `nil`, `:numeric`, or `:two_digit`."
|
|
5000
5000
|
},
|
|
5001
5001
|
{
|
|
5002
5002
|
"name": "hour",
|
|
@@ -5004,6 +5004,12 @@
|
|
|
5004
5004
|
"default": "`HOUR_DEFAULT`",
|
|
5005
5005
|
"description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
|
|
5006
5006
|
},
|
|
5007
|
+
{
|
|
5008
|
+
"name": "hour_cycle",
|
|
5009
|
+
"type": "Symbol",
|
|
5010
|
+
"default": "`HOUR_CYCLE_DEFAULT`",
|
|
5011
|
+
"description": "What hour cycle should be used. One of `nil`, `:h11`, `:h12`, `:h23`, or `:h24`."
|
|
5012
|
+
},
|
|
5007
5013
|
{
|
|
5008
5014
|
"name": "weekday",
|
|
5009
5015
|
"type": "Symbol",
|
data/static/constants.json
CHANGED
|
@@ -1402,6 +1402,14 @@
|
|
|
1402
1402
|
"narrow"
|
|
1403
1403
|
],
|
|
1404
1404
|
"GeneratedSlotMethods": "Primer::Beta::RelativeTime::GeneratedSlotMethods",
|
|
1405
|
+
"HOUR_CYCLE_DEFAULT": null,
|
|
1406
|
+
"HOUR_CYCLE_OPTIONS": [
|
|
1407
|
+
null,
|
|
1408
|
+
"h11",
|
|
1409
|
+
"h12",
|
|
1410
|
+
"h23",
|
|
1411
|
+
"h24"
|
|
1412
|
+
],
|
|
1405
1413
|
"HOUR_DEFAULT": null,
|
|
1406
1414
|
"HOUR_MAPPINGS": {
|
|
1407
1415
|
"": null,
|
data/static/info_arch.json
CHANGED
|
@@ -16679,7 +16679,7 @@
|
|
|
16679
16679
|
"name": "minute",
|
|
16680
16680
|
"type": "Symbol",
|
|
16681
16681
|
"default": "`MINUTE_DEFAULT`",
|
|
16682
|
-
"description": "What format
|
|
16682
|
+
"description": "What format minutes should take. One of `nil`, `:numeric`, or `:two_digit`."
|
|
16683
16683
|
},
|
|
16684
16684
|
{
|
|
16685
16685
|
"name": "hour",
|
|
@@ -16687,6 +16687,12 @@
|
|
|
16687
16687
|
"default": "`HOUR_DEFAULT`",
|
|
16688
16688
|
"description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
|
|
16689
16689
|
},
|
|
16690
|
+
{
|
|
16691
|
+
"name": "hour_cycle",
|
|
16692
|
+
"type": "Symbol",
|
|
16693
|
+
"default": "`HOUR_CYCLE_DEFAULT`",
|
|
16694
|
+
"description": "What hour cycle should be used. One of `nil`, `:h11`, `:h12`, `:h23`, or `:h24`."
|
|
16695
|
+
},
|
|
16690
16696
|
{
|
|
16691
16697
|
"name": "weekday",
|
|
16692
16698
|
"type": "Symbol",
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.53.
|
|
4
|
+
version: 0.53.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2026-
|
|
11
|
+
date: 2026-09-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|