primer_view_components 0.22.0 → 0.24.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +43 -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/form_wrapper.rb +5 -0
- data/app/components/primer/alpha/action_list/item.html.erb +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/button_marketing.css +1 -1
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.rb +2 -0
- data/app/components/primer/alpha/dialog/header.html.erb +3 -0
- data/app/components/primer/alpha/dialog/header.rb +26 -0
- 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.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/overlay/header.html.erb +3 -1
- data/app/components/primer/alpha/overlay/header.rb +15 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +2 -0
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +13 -0
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.json +2 -0
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +10 -0
- data/app/components/primer/alpha/tab_panels.html.erb +5 -9
- data/app/components/primer/alpha/tab_panels.rb +4 -13
- 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/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.json +2 -0
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +7 -1
- data/app/components/primer/alpha/underline_panels.css +1 -0
- data/app/components/primer/alpha/underline_panels.css.json +6 -0
- data/app/components/primer/alpha/underline_panels.css.map +1 -0
- data/app/components/primer/alpha/underline_panels.html.erb +6 -8
- data/app/components/primer/alpha/underline_panels.pcss +4 -0
- data/app/components/primer/alpha/underline_panels.rb +6 -14
- data/app/components/primer/anchored_position.js +2 -0
- data/app/components/primer/anchored_position.ts +2 -0
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.json +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +8 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.html.erb +6 -1
- data/app/components/primer/beta/button.pcss +43 -0
- data/app/components/primer/beta/button.rb +14 -2
- data/app/components/primer/beta/button_group.css +1 -1
- data/app/components/primer/beta/button_group.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/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/link.css +1 -1
- data/app/components/primer/beta/link.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/progress_bar.css +1 -1
- data/app/components/primer/beta/progress_bar.css.map +1 -1
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/primer.pcss +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/action_list_preview.rb +1 -1
- data/previews/primer/alpha/button_marketing_preview.rb +15 -3
- data/previews/primer/alpha/dialog_preview/with_header_filter.html.erb +19 -0
- data/previews/primer/alpha/dialog_preview.rb +4 -0
- data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb +19 -0
- data/previews/primer/alpha/overlay_preview.rb +15 -0
- data/previews/primer/alpha/select_preview.rb +3 -0
- data/previews/primer/beta/button_group_preview.rb +3 -7
- data/previews/primer/beta/button_preview/label_wrap.html.erb +9 -0
- data/previews/primer/beta/button_preview/link_scheme_label_wrap.html.erb +8 -0
- data/previews/primer/beta/button_preview/small_scheme_one_character.html.erb +5 -0
- data/previews/primer/beta/button_preview/summary_as_button.html.erb +14 -0
- data/previews/primer/beta/button_preview.rb +71 -12
- data/previews/primer/beta/nav_list_preview.rb +15 -1
- data/static/arguments.json +6 -12
- data/static/classes.json +3 -0
- data/static/info_arch.json +163 -17
- data/static/previews.json +119 -2
- metadata +12 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted,var(--color-fg-muted))}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary.Button--iconOnly{color:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.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,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.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]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger.Button--iconOnly{color:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
|
|
1
|
+
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin) solid;border-color:#0000;border-radius:var(--borderRadius-medium);color:var(--button-default-fgColor-rest);cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);gap:var(--base-size-4);height:var(--control-medium-size);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted)}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;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{background-color:var(--buttonCounter-default-bgColor-rest);color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium);white-space:nowrap}.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)}.Button--small{font-size:var(--text-body-size-small);gap:var(--control-small-gap);height:var(--control-small-size);min-width:var(--control-small-size);padding:0 var(--control-small-paddingInline-condensed)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap)}.Button--large{gap:var(--control-large-gap);height:var(--control-large-size);padding:0 var(--control-large-paddingInline-spacious)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap)}.Button--fullWidth{width:100%}.Button--labelWrap{height:unset;min-height:var(--control-medium-size);min-width:-moz-fit-content;min-width:fit-content}.Button--labelWrap .Button-content{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock) - 2px)}.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) - 2px)}.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) - 2px)}.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{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);outline:2px solid var(--focus-outlineColor);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);outline:2px solid var(--focus-outlineColor);outline-offset:-2px}.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]{background-color:var(--button-primary-bgColor-disabled);border-color:var(--button-primary-borderColor-disabled);color:var(--button-primary-fgColor-disabled);fill:var(--button-primary-fgColor-disabled)}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest);color:inherit}.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]{background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled);color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled)}.Button--invisible{color:var(--button-default-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]{background-color:var(--button-invisible-bgColor-disabled);border-color:var(--button-invisible-borderColor-disabled);color:var(--button-invisible-fgColor-disabled);fill:var(--button-invisible-fgColor-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))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default)}.Button--link{color:var(--fgColor-link);fill:var(--fgColor-link);border:none;display:inline-block;font-size:inherit;height:unset;min-width:-moz-fit-content;min-width:fit-content;padding:0}.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]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled)}.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{background-color:var(--buttonCounter-danger-bgColor-hover);color:var(--buttonCounter-danger-fgColor-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)}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled);color:var(--buttonCounter-danger-fgColor-disabled)}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest);color:var(--buttonCounter-danger-fgColor-rest)}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size)}.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){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
|
|
@@ -28,6 +28,13 @@
|
|
|
28
28
|
".Button--large .Button-label",
|
|
29
29
|
".Button--large .Button-content>:not(:last-child)",
|
|
30
30
|
".Button--fullWidth",
|
|
31
|
+
".Button--labelWrap",
|
|
32
|
+
".Button--labelWrap .Button-content",
|
|
33
|
+
".Button--labelWrap .Button-label",
|
|
34
|
+
".Button--labelWrap.Button--small",
|
|
35
|
+
".Button--labelWrap.Button--small .Button-content",
|
|
36
|
+
".Button--labelWrap.Button--large",
|
|
37
|
+
".Button--labelWrap.Button--large .Button-content",
|
|
31
38
|
".Button--primary",
|
|
32
39
|
".Button--primary.Button--iconOnly",
|
|
33
40
|
".Button--primary:hover:not(:disabled,.Button--inactive)",
|
|
@@ -61,6 +68,7 @@
|
|
|
61
68
|
".Button--link:focus-visible",
|
|
62
69
|
".Button--link:disabled",
|
|
63
70
|
".Button--link[aria-disabled=true]",
|
|
71
|
+
".Button--link .Button-label",
|
|
64
72
|
".Button--danger",
|
|
65
73
|
".Button--danger.Button--iconOnly",
|
|
66
74
|
".Button--danger:hover:not(:disabled,.Button--inactive)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* 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 font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\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 color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\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 grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\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 font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\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/* 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 background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-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 background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-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 background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-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 color: var(--fgColor-link);\n fill: var(--fgColor-link);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\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 background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\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 place-content: center;\n padding: unset;\n width: var(--control-medium-size);\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 background-color: var(--button-inactive-bgColor);\n border: 0;\n color: var(--button-inactive-fgColor);\n cursor: default;\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":["/* 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 font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\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 color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\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 grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\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 font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n min-width: var(--control-small-size);\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) - 2px);\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) - 2px);\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) - 2px);\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 background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-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 background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-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 background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-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 color: var(--fgColor-link);\n fill: var(--fgColor-link);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n min-width: fit-content;\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 background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\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 place-content: center;\n padding: unset;\n width: var(--control-medium-size);\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 background-color: var(--button-inactive-bgColor);\n border: 0;\n color: var(--button-inactive-fgColor);\n cursor: default;\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"]}
|
|
@@ -8,7 +8,12 @@
|
|
|
8
8
|
<span class="Button-label"><%= trimmed_content %></span>
|
|
9
9
|
<% if trailing_visual %>
|
|
10
10
|
<span class="Button-visual Button-trailingVisual">
|
|
11
|
-
|
|
11
|
+
<% if @trailing_visual_counter %>
|
|
12
|
+
<span class="sr-only">(<%= trailing_visual %>)</span>
|
|
13
|
+
<%= trailing_visual %>
|
|
14
|
+
<% else %>
|
|
15
|
+
<%= trailing_visual %>
|
|
16
|
+
<% end %>
|
|
12
17
|
</span>
|
|
13
18
|
<% end %>
|
|
14
19
|
</span>
|
|
@@ -128,6 +128,7 @@ summary.Button {
|
|
|
128
128
|
height: var(--control-small-size);
|
|
129
129
|
padding: 0 var(--control-small-paddingInline-condensed);
|
|
130
130
|
gap: var(--control-small-gap);
|
|
131
|
+
min-width: var(--control-small-size);
|
|
131
132
|
|
|
132
133
|
& .Button-label {
|
|
133
134
|
line-height: var(--text-body-lineHeight-small);
|
|
@@ -160,6 +161,43 @@ summary.Button {
|
|
|
160
161
|
width: 100%;
|
|
161
162
|
}
|
|
162
163
|
|
|
164
|
+
/* allow button label text to wrap */
|
|
165
|
+
|
|
166
|
+
.Button--labelWrap {
|
|
167
|
+
min-width: fit-content;
|
|
168
|
+
height: unset;
|
|
169
|
+
min-height: var(--control-medium-size);
|
|
170
|
+
|
|
171
|
+
& .Button-content {
|
|
172
|
+
flex: 1 1 auto;
|
|
173
|
+
align-self: stretch;
|
|
174
|
+
padding-block: calc(var(--control-medium-paddingBlock) - 2px);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
& .Button-label {
|
|
178
|
+
white-space: unset;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&.Button--small {
|
|
182
|
+
height: unset;
|
|
183
|
+
min-height: var(--control-small-size);
|
|
184
|
+
|
|
185
|
+
& .Button-content {
|
|
186
|
+
padding-block: calc(var(--control-small-paddingBlock) - 2px);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&.Button--large {
|
|
191
|
+
height: unset;
|
|
192
|
+
min-height: var(--control-large-size);
|
|
193
|
+
padding-inline: var(--control-large-paddingInline-spacious);
|
|
194
|
+
|
|
195
|
+
& .Button-content {
|
|
196
|
+
padding-block: calc(var(--control-large-paddingBlock) - 2px);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
163
201
|
/* variants */
|
|
164
202
|
|
|
165
203
|
/* primary */
|
|
@@ -293,6 +331,7 @@ summary.Button {
|
|
|
293
331
|
border: none;
|
|
294
332
|
height: unset;
|
|
295
333
|
padding: 0;
|
|
334
|
+
min-width: fit-content;
|
|
296
335
|
|
|
297
336
|
&:hover:not(:disabled, .Button--inactive) {
|
|
298
337
|
text-decoration: underline;
|
|
@@ -310,6 +349,10 @@ summary.Button {
|
|
|
310
349
|
border-color: transparent;
|
|
311
350
|
fill: var(--control-fgColor-disabled);
|
|
312
351
|
}
|
|
352
|
+
|
|
353
|
+
& .Button-label {
|
|
354
|
+
white-space: unset;
|
|
355
|
+
}
|
|
313
356
|
}
|
|
314
357
|
|
|
315
358
|
/* danger */
|
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
module Primer
|
|
4
4
|
module Beta
|
|
5
5
|
# Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
|
|
6
|
+
# @accessibility
|
|
7
|
+
# Additional markup is required if setting the `tag` argument to either `:a` or `:summary`.
|
|
8
|
+
#
|
|
9
|
+
# * `:a` requires you to pass in an `href` attribute
|
|
10
|
+
# * `:summary` requires you to wrap the component in a `<details>` element
|
|
6
11
|
class Button < Primer::Component
|
|
7
12
|
status :beta
|
|
8
13
|
|
|
@@ -63,7 +68,10 @@ module Primer
|
|
|
63
68
|
renders_one :trailing_visual, types: {
|
|
64
69
|
icon: Primer::Beta::Octicon,
|
|
65
70
|
label: Primer::Beta::Label,
|
|
66
|
-
counter:
|
|
71
|
+
counter: lambda { |**system_arguments|
|
|
72
|
+
@trailing_visual_counter = true
|
|
73
|
+
Primer::Beta::Counter.new("aria-hidden": true, **system_arguments)
|
|
74
|
+
}
|
|
67
75
|
}
|
|
68
76
|
|
|
69
77
|
# Trailing action appears to the right of the trailing visual.
|
|
@@ -101,6 +109,7 @@ module Primer
|
|
|
101
109
|
# @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
|
|
102
110
|
# @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
|
|
103
111
|
# @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
|
|
112
|
+
# @param label_wrap [Boolean] Whether or not the button label text wraps and the button height expands.
|
|
104
113
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
105
114
|
def initialize(
|
|
106
115
|
base_button_class: Primer::Beta::BaseButton,
|
|
@@ -109,11 +118,13 @@ module Primer
|
|
|
109
118
|
block: false,
|
|
110
119
|
align_content: DEFAULT_ALIGN_CONTENT,
|
|
111
120
|
disabled: false,
|
|
121
|
+
label_wrap: false,
|
|
112
122
|
**system_arguments
|
|
113
123
|
)
|
|
114
124
|
@base_button_class = base_button_class
|
|
115
125
|
@scheme = scheme
|
|
116
126
|
@block = block
|
|
127
|
+
@label_wrap = label_wrap
|
|
117
128
|
|
|
118
129
|
@system_arguments = system_arguments
|
|
119
130
|
@system_arguments[:disabled] = disabled
|
|
@@ -133,7 +144,8 @@ module Primer
|
|
|
133
144
|
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
|
|
134
145
|
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
|
|
135
146
|
"Button",
|
|
136
|
-
"Button--fullWidth" => @block
|
|
147
|
+
"Button--fullWidth" => @block,
|
|
148
|
+
"Button--labelWrap" => @label_wrap
|
|
137
149
|
)
|
|
138
150
|
end
|
|
139
151
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>:first-child .Button{border-bottom-left-radius:var(--borderRadius-medium
|
|
1
|
+
.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>:first-child .Button{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.ButtonGroup>:last-child .Button{border-bottom-right-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAuBF,CArBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,kCAEE,
|
|
1
|
+
{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAuBF,CArBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,kCAEE,oDAAqD,CADrD,iDAEF,CAEA,iCAEE,qDAAsD,CADtD,kDAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n\n & .Button {\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n & > :first-child .Button {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n & > :last-child .Button {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin
|
|
1
|
+
.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin) solid var(--counter-borderColor);border-radius:2em;color:var(--fgColor-default);display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:calc(var(--base-size-20) - var(--borderWidth-thin)*2);min-width:var(--base-size-20);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.Counter--secondary{background-color:var(--bgColor-neutral-muted);color:var(--fgColor-muted)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,wEAA0E,CAC1E,
|
|
1
|
+
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,wEAA0E,CAC1E,+DAAgE,CAChE,iBAAkB,CAJlB,4BAA6B,CAN7B,oBAAqB,CAGrB,qCAAsC,CACtC,0CAA2C,CAC3C,iEAAoE,CAJpE,6BAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,gDAAiD,CADjD,+BAEF,CAEA,oBAEE,6CAA8C,CAD9C,0BAEF","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 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\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 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){background-image:linear-gradient(var(--bgColor-accent-muted
|
|
1
|
+
.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin);color:var(--fgColor-default);padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent);margin-right:var(--base-size-12)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4)*-1);text-align:center}.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){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted);margin-right:var(--control-small-gap)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention)}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger)}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin) 0;margin-top:calc(var(--borderWidth-thin)*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default)}.warning{background-color:var(--bgColor-attention-muted);font-weight:var(--base-text-weight-semibold);margin-bottom:.8em;padding:.5em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE
|
|
1
|
+
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,yFAA2F,CAC3F,4CAA6C,CAL7C,wCAAyC,CAFzC,kBAAmB,CACnB,oCAAqC,CAIrC,4BAA6B,CAN7B,wEAAyE,CADzE,iBAmBF,CARE,6BACE,2BAA4B,CAC5B,gCACF,CAEA,iCACE,eACF,CAIF,gBACE,uCACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,sCAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,qCAAsC,CADtC,eAgBF,CAZE,gDAEE,0BAA2B,CAD3B,qCAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,+FAAiG,CACjG,+CAAgD,CAFhD,4BAOF,CAHE,kCACE,8BACF,CAGF,0BAEE,yFAA2F,CAC3F,4CAA6C,CAF7C,4BAOF,CAHE,mCACE,2BACF,CAGF,4BAEE,2FAA6F,CAC7F,6CAA8C,CAF9C,4BAOF,CAHE,qCACE,4BACF,CAKF,yBAGE,eAAgB,CADhB,sCAAuC,CADvC,2CAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,uCACF,CAGA,SAIE,+CAAgD,CADhD,4CAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\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\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\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
|
-
.labels{position:relative}.Label,.label{border:var(--borderWidth-thin
|
|
1
|
+
.labels{position:relative}.Label,.label{border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:2em;display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis);color:var(--fgColor-default)}.Label--secondary{border-color:var(--borderColor-default);color:var(--fgColor-muted)}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis);color:var(--fgColor-accent)}.Label--success{border-color:var(--borderColor-success-emphasis);color:var(--fgColor-success)}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis);color:var(--fgColor-attention)}.Label--severe{border-color:var(--borderColor-severe-emphasis);color:var(--fgColor-severe)}.Label--danger{border-color:var(--borderColor-danger-emphasis);color:var(--fgColor-danger)}.Label--open{border-color:var(--borderColor-open-emphasis);color:var(--fgColor-open)}.Label--closed{border-color:var(--borderColor-closed-emphasis);color:var(--fgColor-closed)}.Label--done{border-color:var(--borderColor-done-emphasis);color:var(--fgColor-done)}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis);color:var(--fgColor-sponsors)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,
|
|
1
|
+
{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,+DAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,qCAAsC,CACtC,0CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,4BAAqB,CAArB,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,gDAAiD,CADjD,4BAEF,CAEA,kBAEE,uCAAwC,CADxC,0BAEF,CAIA,4BAGE,+CAAgD,CADhD,2BAEF,CAEA,gBAEE,gDAAiD,CADjD,4BAEF,CAEA,kCAGE,kDAAmD,CADnD,8BAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,aAEE,6CAA8C,CAD9C,yBAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,aAEE,6CAA8C,CAD9C,yBAEF,CAEA,iBAEE,iDAAkD,CADlD,6BAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Link{color:var(--fgColor-accent
|
|
1
|
+
.Link{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default)!important}.Link--primary:hover{color:var(--fgColor-accent)!important}.Link--secondary{color:var(--fgColor-muted)!important}.Link--secondary:hover{color:var(--fgColor-accent)!important}.Link--muted{color:var(--fgColor-muted)!important}.Link--muted:hover{color:var(--fgColor-accent)!important;-webkit-text-decoration:none;text-decoration:none}.Link--onHover:hover{color:var(--fgColor-accent)!important;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,
|
|
1
|
+
{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,sCAKF,CAHE,qBACE,qCACF,CAGF,iBACE,oCAKF,CAHE,uBACE,qCACF,CAGF,aACE,oCAMF,CAJE,mBACE,qCAAuC,CACvC,4BAAqB,CAArB,oBACF,CAMA,qBACE,qCAAuC,CAEvC,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n color: var(--fgColor-accent);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n cursor: pointer;\n }\n\n &:focus {\n text-decoration: underline;\n }\n\n &:focus,\n &:focus-visible {\n outline-offset: 0;\n }\n}\n\n.Link--underline {\n text-decoration: underline;\n}\n\n.Link--primary {\n color: var(--fgColor-default) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n }\n}\n\n.Link--secondary {\n color: var(--fgColor-muted) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n }\n}\n\n.Link--muted {\n color: var(--fgColor-muted) !important;\n\n &:hover {\n color: var(--fgColor-accent) !important;\n text-decoration: none;\n }\n}\n\n/* Set the link color only on hover\n Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n &:hover {\n color: var(--fgColor-accent) !important;\n text-decoration: underline;\n cursor: pointer;\n }\n}\n\n/* When using a color utility class inside of a link class\n color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n &:hover [class*='color-fg'] {\n color: inherit !important;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor
|
|
1
|
+
.Popover{position:absolute;z-index:100}.Popover-message{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;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.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{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default);bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.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:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.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:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.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{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.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{border-left-color:var(--borderColor-default);right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor);right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default);left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor);left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.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:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.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":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,
|
|
1
|
+
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAgCF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,kDAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,8CAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,2CAA4C,CAD5C,YAEF,CAEA,wGAEE,uCAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,4CAA6C,CAD7C,WAEF,CAEA,qGAEE,wCAAyC,CADzC,WAEF,CAOA,qGAEE,6CAA8C,CAD9C,UAEF,CAEA,kGAEE,yCAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,iCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* 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 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 border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\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/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\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 &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\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 &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Progress{background-color:var(--bgColor-neutral-muted
|
|
1
|
+
.Progress{background-color:var(--bgColor-neutral-muted);border-radius:6px;display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:2px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,
|
|
1
|
+
{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,6CAA8C,CAC9C,iBAAkB,CAJlB,YAAa,CACb,UAAW,CAIX,uBAA8B,CAH9B,eAIF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,eACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n display: flex;\n height: 8px;\n overflow: hidden;\n background-color: var(--bgColor-neutral-muted);\n border-radius: 6px;\n outline: 1px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress--large {\n height: 10px;\n}\n\n.Progress--small {\n height: 5px;\n}\n\n.Progress-item {\n outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n margin-left: 2px;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium
|
|
1
|
+
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,
|
|
1
|
+
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,sCAAuC,CACvC,0CAA2C,CAC3C,+CAAgD,CAHhD,sDAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,aAEE,wEACF,CAEA,4BAJE,+BAOF,CAHA,eAEE,wEACF,CAEA,eAEE,4EAA8E,CAD9E,+BAEF,CAIA,cAEE,qCAAsC,CACtC,+BAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n display: inline-block;\n padding: 5px var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--control-medium-lineBoxHeight);\n text-align: center;\n white-space: nowrap;\n border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n}\n\n/* Small 24px */\n\n.State--small {\n padding: 0 10px;\n font-size: var(--text-body-size-small);\n line-height: var(--base-size-24);\n\n & .octicon {\n width: 1em; /* Ensures different icons don't change State indicator width */\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Subhead{border-bottom:var(--borderWidth-thin
|
|
1
|
+
.Subhead{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.Subhead--spacious{margin-top:var(--base-size-40)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal);order:0}.Subhead-heading--large{font-size:var(--base-size-24)}.Subhead-heading--medium{font-size:var(--text-title-size-medium)}.Subhead-heading--danger{color:var(--fgColor-danger);font-weight:var(--base-text-weight-semibold)}.Subhead-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,
|
|
1
|
+
{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,oEAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,qCAAsC,CADtC,6CAKF,CAGA,mBACE,8BACF,CAGA,iBAEE,aAAc,CADd,0CAA2C,CAE3C,OACF,CAEA,wBACE,6BACF,CAEA,yBACE,uCACF,CAGA,yBAEE,2BAA4B,CAD5B,4CAEF,CAGA,qBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,iEAAkE,CAGlE,OAKF,CAHE,sCACE,6BACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: row wrap;\n justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n font-weight: var(--base-text-weight-normal);\n flex: 1 1 auto;\n order: 0;\n}\n\n.Subhead-heading--large {\n font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 100%;\n order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n align-self: center;\n justify-content: flex-end;\n order: 1;\n\n & + .Subhead-description {\n margin-top: var(--base-size-4);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.TimelineItem{display:flex;margin-left:var(--stack-gap-normal
|
|
1
|
+
.TimelineItem{display:flex;margin-left:var(--stack-gap-normal);padding:var(--stack-padding-normal) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;color:var(--fgColor-muted);display:flex;flex-shrink:0;height:var(--control-medium-size);justify-content:center;margin-left:calc(var(--control-medium-size)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed);position:relative;width:var(--control-medium-size);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000;color:var(--fgColor-onEmphasis)}.TimelineItem-body{color:var(--fgColor-muted);flex:auto;margin-top:var(--base-size-4);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default);height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default);border:0;color:var(--fgColor-muted);height:var(--base-size-16);margin-bottom:var(--base-size-8);margin-top:var(--base-size-8)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,
|
|
1
|
+
{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,mCAAoC,CADpC,qCAAsC,CAFtC,iBAqBF,CAfE,qBAQE,yCAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,8BAGF,CAEA,yCACE,+CAAgD,CAChD,mDACF,CAGF,oBASE,kBAAmB,CACnB,6CAA8C,CAC9C,4DAA6D,CAC7D,iBAAkB,CAJlB,0BAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,iCAAkC,CAQlC,sBAAuB,CANvB,qDAAwD,CADxD,qDAAsD,CALtD,iBAAkB,CAGlB,gCAAiC,CAFjC,SAaF,CAEA,6BAEE,gDAAiD,CACjD,0CAAiD,CAFjD,+BAGF,CAEA,mBAIE,0BAA2B,CAC3B,SAAU,CAFV,6BAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,uCAAwC,CACxC,QAAS,CACT,sEAAuE,CANvE,gCAAiC,CACjC,QAAS,CACT,8CAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,8BAgBF,CAZE,oCACE,sCACF,CAEA,6CAKE,uCAAwC,CACxC,QAAS,CAFT,0BAA2B,CAH3B,0BAA2B,CAE3B,gCAAiC,CADjC,6BAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--stack-padding-normal) 0;\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 background-color: var(--borderColor-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--borderColor-accent-emphasis);\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 margin-right: var(--controlStack-medium-gap-condensed);\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 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 margin-top: var(--base-size-4);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\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 margin-bottom: calc(var(--stack-gap-normal) * -1);\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 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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Truncate>.Truncate-text+.Truncate-text{margin-left:var(--control-small-gap
|
|
1
|
+
.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Truncate>.Truncate-text+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate>.Truncate-text.Truncate-text--primary{flex-basis:200%}.Truncate>.Truncate-text.Truncate-text--expandable:active,.Truncate>.Truncate-text.Truncate-text--expandable:focus,.Truncate>.Truncate-text.Truncate-text--expandable:hover{cursor:pointer;flex-shrink:0;max-width:100%!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,wCACE,
|
|
1
|
+
{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,wCACE,oCACF,CAEA,gDACE,eACF,CAEA,4KAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n\n & > .Truncate-text {\n min-width: 1ch;\n max-width: fit-content;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n & + .Truncate-text {\n margin-left: var(--control-small-gap);\n }\n\n &.Truncate-text--primary {\n flex-basis: 200%;\n }\n\n &.Truncate-text--expandable:hover,\n &.Truncate-text--expandable:focus,\n &.Truncate-text--expandable:active {\n max-width: 100% !important;\n flex-shrink: 0;\n cursor: pointer;\n }\n }\n}\n"]}
|