openproject-primer_view_components 0.89.1 → 0.90.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +50 -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_bar.pcss +0 -3
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +4 -10
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +0 -2
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.json +2 -4
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +3 -10
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +0 -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.pcss +4 -4
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +2 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +4 -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.json +10 -14
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +3 -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/menu.pcss +0 -6
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +1 -2
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +0 -2
- data/app/components/primer/alpha/select_panel.css +1 -1
- data/app/components/primer/alpha/select_panel.css.map +1 -1
- data/app/components/primer/alpha/select_panel_element.ts +1 -1
- data/app/components/primer/alpha/skeleton_box.css +1 -1
- data/app/components/primer/alpha/skeleton_box.css.map +1 -1
- data/app/components/primer/alpha/stack.css +1 -1
- data/app/components/primer/alpha/stack.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +0 -5
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.json +2 -2
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +14 -7
- 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/toggle_switch.pcss +8 -6
- data/app/components/primer/alpha/tree_view/sub_tree_node.rb +1 -1
- data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.js +1 -1
- data/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts +1 -1
- data/app/components/primer/alpha/tree_view/visual.rb +1 -1
- data/app/components/primer/alpha/tree_view.css +1 -1
- data/app/components/primer/alpha/tree_view.css.json +2 -2
- data/app/components/primer/alpha/tree_view.css.map +1 -1
- data/app/components/primer/alpha/tree_view.pcss +1 -0
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +0 -3
- data/app/components/primer/base_component.rb +1 -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/blankslate.pcss +2 -53
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.rb +18 -7
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.json +2 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.pcss +6 -5
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +0 -1
- 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/button_group.rb +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.json +22 -16
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +132 -101
- 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/state.pcss +0 -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/subhead.pcss +0 -2
- 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/timeline_item.pcss +0 -5
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.pcss +0 -1
- data/app/components/primer/component.rb +16 -0
- data/app/components/primer/dialog_helper.js +10 -1
- data/app/components/primer/dialog_helper.ts +16 -1
- data/app/components/primer/open_project/border_box/collapsible_header.css +1 -1
- data/app/components/primer/open_project/border_box/collapsible_header.css.json +1 -3
- data/app/components/primer/open_project/border_box/collapsible_header.css.map +1 -1
- data/app/components/primer/open_project/border_box/collapsible_header.html.erb +1 -1
- data/app/components/primer/open_project/border_box/collapsible_header.pcss +3 -1
- data/app/components/primer/open_project/border_box/collapsible_header.rb +10 -9
- data/app/components/primer/open_project/border_grid.css +1 -1
- data/app/components/primer/open_project/border_grid.css.map +1 -1
- data/app/components/primer/open_project/border_grid.pcss +11 -9
- data/app/components/primer/open_project/collapsible.d.ts +1 -1
- data/app/components/primer/open_project/collapsible.js +8 -4
- data/app/components/primer/open_project/collapsible.ts +10 -4
- data/app/components/primer/open_project/collapsible_section.html.erb +6 -10
- data/app/components/primer/open_project/collapsible_section.rb +8 -0
- data/app/components/primer/open_project/drag_handle.css +1 -1
- data/app/components/primer/open_project/drag_handle.css.map +1 -1
- data/app/components/primer/open_project/filterable_tree_view.css +1 -1
- data/app/components/primer/open_project/filterable_tree_view.css.map +1 -1
- data/app/components/primer/open_project/filterable_tree_view.html.erb +9 -5
- data/app/components/primer/open_project/filterable_tree_view.pcss +2 -0
- data/app/components/primer/open_project/filterable_tree_view.rb +9 -1
- data/app/components/primer/open_project/inline_message.css +1 -1
- data/app/components/primer/open_project/inline_message.css.map +1 -1
- data/app/components/primer/open_project/page_header/dialog.rb +1 -1
- data/app/components/primer/open_project/page_header/menu.rb +1 -1
- data/app/components/primer/open_project/page_header.css +1 -1
- data/app/components/primer/open_project/page_header.css.map +1 -1
- data/app/components/primer/open_project/page_header.pcss +2 -0
- data/app/components/primer/open_project/pagination.css +1 -1
- data/app/components/primer/open_project/pagination.css.map +1 -1
- data/app/components/primer/open_project/pagination.pcss +4 -1
- data/app/components/primer/open_project/side_panel/section.css +1 -1
- data/app/components/primer/open_project/side_panel/section.css.map +1 -1
- data/app/components/primer/open_project/side_panel/section.pcss +3 -3
- data/app/components/primer/open_project/sub_header.css +1 -1
- data/app/components/primer/open_project/sub_header.css.map +1 -1
- data/app/lib/primer/forms/acts_as_component.rb +1 -1
- data/app/lib/primer/forms/dsl/input.rb +5 -1
- data/app/lib/primer/forms/toggle_switch_form.rb +1 -1
- data/app/lib/primer/safe_href_helper.rb +36 -0
- data/lib/primer/form_components.rb +1 -1
- data/lib/primer/static/generate_previews.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/beta/border_box_preview.rb +3 -3
- data/previews/primer/open_project/collapsible_section_preview/with_link_in_title.html.erb +6 -0
- data/previews/primer/open_project/collapsible_section_preview.rb +9 -0
- data/previews/primer/open_project/filterable_tree_view_preview/async_custom_loading_indicator.html.erb +9 -0
- data/previews/primer/open_project/filterable_tree_view_preview.rb +7 -0
- data/static/arguments.json +12 -0
- data/static/classes.json +21 -0
- data/static/classnames.cjs +507 -0
- data/static/classnames.d.ts +2 -0
- data/static/classnames.js +509 -0
- data/static/info_arch.json +46 -2
- data/static/previews.json +2394 -2368
- metadata +9 -48
- data/app/assets/javascripts/components/primer/alpha/action_bar_element.d.ts +0 -17
- data/app/assets/javascripts/components/primer/alpha/action_list.d.ts +0 -16
- data/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -49
- data/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_focus_zone_stack.d.ts +0 -17
- data/app/assets/javascripts/components/primer/alpha/dropdown/menu.d.ts +0 -1
- data/app/assets/javascripts/components/primer/alpha/dropdown.d.ts +0 -1
- data/app/assets/javascripts/components/primer/alpha/modal_dialog.d.ts +0 -18
- data/app/assets/javascripts/components/primer/alpha/segmented_control.d.ts +0 -12
- data/app/assets/javascripts/components/primer/alpha/select_panel_element.d.ts +0 -65
- data/app/assets/javascripts/components/primer/alpha/tab_container.d.ts +0 -1
- data/app/assets/javascripts/components/primer/alpha/toggle_switch.d.ts +0 -34
- data/app/assets/javascripts/components/primer/alpha/tool_tip.d.ts +0 -27
- data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view.d.ts +0 -47
- data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_icon_pair_element.d.ts +0 -15
- data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_include_fragment_element.d.ts +0 -9
- data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_roving_tab_index.d.ts +0 -3
- data/app/assets/javascripts/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.d.ts +0 -47
- data/app/assets/javascripts/components/primer/alpha/x_banner.d.ts +0 -18
- data/app/assets/javascripts/components/primer/anchored_position.d.ts +0 -27
- data/app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts +0 -1
- data/app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts +0 -1
- data/app/assets/javascripts/components/primer/beta/details_toggle_element.d.ts +0 -40
- data/app/assets/javascripts/components/primer/beta/nav_list.d.ts +0 -20
- data/app/assets/javascripts/components/primer/beta/nav_list_group_element.d.ts +0 -19
- data/app/assets/javascripts/components/primer/beta/relative_time.d.ts +0 -1
- data/app/assets/javascripts/components/primer/dialog_helper.d.ts +0 -15
- data/app/assets/javascripts/components/primer/focus_group.d.ts +0 -19
- data/app/assets/javascripts/components/primer/open_project/avatar_fallback.d.ts +0 -28
- data/app/assets/javascripts/components/primer/open_project/border_box/collapsible_header.d.ts +0 -11
- data/app/assets/javascripts/components/primer/open_project/collapsible.d.ts +0 -13
- data/app/assets/javascripts/components/primer/open_project/collapsible_section.d.ts +0 -10
- data/app/assets/javascripts/components/primer/open_project/danger_dialog_form_helper.d.ts +0 -18
- data/app/assets/javascripts/components/primer/open_project/filterable_tree_view.d.ts +0 -29
- data/app/assets/javascripts/components/primer/open_project/page_header_element.d.ts +0 -9
- data/app/assets/javascripts/components/primer/open_project/sub_header_element.d.ts +0 -17
- data/app/assets/javascripts/components/primer/open_project/zen_mode_button.d.ts +0 -18
- data/app/assets/javascripts/components/primer/primer.d.ts +0 -42
- data/app/assets/javascripts/components/primer/scrollable_region.d.ts +0 -13
- data/app/assets/javascripts/components/primer/shared_events.d.ts +0 -26
- data/app/assets/javascripts/components/primer/utils.d.ts +0 -1
- data/app/assets/javascripts/lib/primer/forms/character_counter.d.ts +0 -41
- data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +0 -10
- data/app/assets/javascripts/lib/primer/forms/primer_text_area.d.ts +0 -13
- data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +0 -30
- data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +0 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
.TreeViewRootUlStyles{
|
|
1
|
+
.TreeViewRootUlStyles{padding:0;margin:0;list-style:none}.TreeViewRootUlStyles .TreeViewItem{outline:none}:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}.TreeViewRootUlStyles .TreeViewItemContainer{--level:1;--toggle-width:1rem;--min-item-height:2rem;position:relative;display:grid;width:100%;font-size:var(--text-body-size-medium);color:var(--fgColor-default);border-radius:var(--borderRadius-medium);grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);grid-template-areas:"spacer leadingAction toggle content trailingAction";--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--trailing-action-width:calc(var(--has-trailing-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action]){--has-leading-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action]){--has-trailing-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{outline:2px solid #0000;outline-offset:-2px}}@media (pointer:coarse){.TreeViewRootUlStyles .TreeViewItemContainer{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{cursor:default;background-color:initial}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{outline:none}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible){box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true]){background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{position:absolute;top:calc(50% - var(--base-size-12));left:calc(var(--base-size-8)*-1);width:.25rem;height:1.5rem;content:"";background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{display:flex;height:100%;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2);color:var(--fgColor-muted);grid-area:toggle;justify-content:center;align-items:flex-start;cursor:pointer}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-top-left-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles :is(a.TreeViewItemContent:hover,button.TreeViewItemContent:hover){-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--control-fgColor-rest)}.TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true]){cursor:not-allowed}.TreeViewRootUlStyles .TreeViewItemContent{display:flex;align-items:center;height:100%;padding:0 var(--base-size-8);outline:none;cursor:pointer;padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));grid-area:content;gap:var(--stack-gap-condensed)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{text-align:left;-webkit-user-select:none;user-select:none;background-color:initial;border:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{position:relative;color:var(--control-fgColor-rest);border-radius:var(--borderRadius-medium);transition:background 33.333ms linear}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{visibility:visible;transition:visibility 0s linear 0s;animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}[aria-checked=false]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItem-singleSelectCheckmark{visibility:hidden}[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{visibility:visible;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent){pointer-events:none}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText{color:var(--control-fgColor-disabled)}:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg,[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover{cursor:not-allowed}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover{cursor:not-allowed;background-color:initial}}.TreeViewRootUlStyles .TreeViewItemContentText{color:var(--control-fgColor-rest);flex:1 1 auto;width:0}.TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText{word-break:break-word}.TreeViewRootUlStyles .TreeViewItemVisual{display:flex;align-self:baseline;height:var(--custom-line-height,1.3rem);color:var(--fgColor-muted);align-items:center}.TreeViewRootUlStyles .TreeViewItemLeadingAction{grid-area:leadingAction}.TreeViewRootUlStyles .TreeViewItemTrailingAction{grid-area:trailingAction}.TreeViewRootUlStyles :is(.TreeViewItemLeadingAction,.TreeViewItemTrailingAction){display:flex;color:var(--fgColor-muted);padding-top:calc(var(--min-item-height)/2 - var(--custom-line-height, 1.3rem)/2 - 6px);padding-bottom:calc(var(--min-item-height)/2 - var(--custom-line-height, 1.3rem)/2 - 6px)}:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemLevelLine{width:100%;height:100%;border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.TreeViewSkeletonItemContainerStyle{display:flex;align-items:center;column-gap:.5rem;height:2rem}@media (pointer:coarse){.TreeViewSkeletonItemContainerStyle{height:2.75rem}}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1){--tree-item-loading-width:67%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2){--tree-item-loading-width:47%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3){--tree-item-loading-width:73%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4){--tree-item-loading-width:64%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5){--tree-item-loading-width:50%}.TreeItemSkeletonTextStyles{width:var(--tree-item-loading-width,67%)}.TreeViewFailureMessage{display:grid;grid-template-columns:auto 1fr;gap:.5rem;width:100%;align-items:center}
|
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
".TreeViewRootUlStyles .TreeViewItemToggle",
|
|
17
17
|
".TreeViewRootUlStyles .TreeViewItemToggleHover:hover",
|
|
18
18
|
".TreeViewRootUlStyles .TreeViewItemToggleEnd",
|
|
19
|
-
".TreeViewRootUlStyles a.TreeViewItemContent:hover",
|
|
20
|
-
".TreeViewRootUlStyles button.TreeViewItemContent:hover",
|
|
19
|
+
".TreeViewRootUlStyles :is(a.TreeViewItemContent:hover,button.TreeViewItemContent:hover)",
|
|
21
20
|
".TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true])",
|
|
22
21
|
".TreeViewRootUlStyles .TreeViewItemContent",
|
|
23
22
|
":is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox",
|
|
@@ -38,6 +37,7 @@
|
|
|
38
37
|
".TreeViewRootUlStyles .TreeViewItemVisual",
|
|
39
38
|
".TreeViewRootUlStyles .TreeViewItemLeadingAction",
|
|
40
39
|
".TreeViewRootUlStyles .TreeViewItemTrailingAction",
|
|
40
|
+
".TreeViewRootUlStyles :is(.TreeViewItemLeadingAction,.TreeViewItemTrailingAction)",
|
|
41
41
|
":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button",
|
|
42
42
|
".TreeViewRootUlStyles .TreeViewItemLevelLine",
|
|
43
43
|
".TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"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","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n padding: 0;\n margin: 0;\n list-style: none;\n\n /*\n * WARNING: This is a performance optimization.\n *\n * We define styles for the tree items at the root level of the tree\n * to avoid recomputing the styles for each item when the tree updates.\n * We're sacrificing maintainability for performance because TreeView\n * needs to be performant enough to handle large trees (thousands of items).\n *\n * This is intended to be a temporary solution until we can improve the\n * performance of our styling patterns.\n *\n * Do NOT copy this pattern without understanding the tradeoffs.\n */\n & .TreeViewItem {\n outline: none;\n\n &:focus-visible > div {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n @media (forced-colors: active) {\n outline: 2px solid HighlightText;\n /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n outline-offset: -2;\n }\n }\n }\n\n & .TreeViewItemContainer {\n --level: 1;\n --toggle-width: 1rem;\n --min-item-height: 2rem;\n\n position: relative;\n display: grid;\n width: 100%;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-default);\n border-radius: var(--borderRadius-medium);\n grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);\n grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);\n --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n &:has([data-has-leading-action]) {\n --has-leading-action: 1;\n }\n\n &:has([data-has-trailing-action]) {\n --has-trailing-action: 1;\n }\n\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n }\n\n @media (pointer: coarse) {\n --toggle-width: 1.5rem;\n --min-item-height: 2.75rem;\n }\n\n &:has(.TreeViewFailureMessage):hover {\n cursor: default;\n background-color: transparent;\n\n @media (forced-colors: active) {\n outline: none;\n }\n }\n\n &:has([role='treeitem']:focus-visible) {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n }\n }\n\n &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n grid-template-columns: 0 0 0 1fr;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n & .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {\n background-color: var(--control-transparent-bgColor-selected);\n\n /* Current item indicator */\n /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n &::after {\n position: absolute;\n top: calc(50% - var(--base-size-12));\n left: calc(-1 * var(--base-size-8));\n width: 0.25rem;\n height: 1.5rem;\n content: '';\n\n /*\n * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n */\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-medium);\n\n @media (forced-colors: active) {\n background-color: HighlightText;\n }\n }\n }\n\n & .TreeViewItemToggle {\n display: flex;\n height: 100%;\n\n /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n color: var(--fgColor-muted);\n grid-area: toggle;\n justify-content: center;\n align-items: flex-start;\n cursor: pointer;\n }\n\n & .TreeViewItemToggleHover:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n\n & .TreeViewItemToggleEnd {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n & a.TreeViewItemContent:hover, button.TreeViewItemContent:hover {\n text-decoration: underline;\n text-decoration-color: var(--control-fgColor-rest);\n }\n\n & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n cursor: not-allowed;\n }\n\n & .TreeViewItemContent {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 var(--base-size-8);\n outline: none;\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n grid-area: content;\n gap: var(--stack-gap-condensed);\n\n & .TreeViewItemCheckbox {\n position: relative;\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n }\n\n &[aria-checked='true'] {\n & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n }\n\n &[aria-checked='false'] {\n /* singleselect checkmark */\n & .TreeViewItem-singleSelectCheckmark {\n visibility: hidden;\n }\n }\n\n &[aria-checked='mixed'] {\n & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n &::before {\n visibility: visible;\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n clip-path: none;\n }\n }\n }\n\n &[aria-disabled='true'] {\n pointer-events: none;\n\n & .TreeViewItemContentText {\n color: var(--control-fgColor-disabled);\n }\n\n & .TreeViewItemVisual {\n fill: var(--control-fgColor-disabled);\n\n /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n & svg {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n & .FormControl-checkbox {\n /* stylelint-disable-next-line max-nesting-depth */\n @media (hover: hover) {\n /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n &:hover {\n cursor: not-allowed;\n }\n }\n }\n\n @media (hover: hover) {\n /* stylelint-disable-next-line max-nesting-depth */\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n }\n\n & .TreeViewItemContentText {\n color: var(--control-fgColor-rest);\n flex: 1 1 auto;\n width: 0;\n }\n\n &:where([data-truncate-text='true']) .TreeViewItemContentText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &:where([data-truncate-text='false']) .TreeViewItemContentText {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n word-break: break-word;\n }\n\n & .TreeViewItemVisual {\n display: flex;\n\n /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n align-self: baseline;\n height: var(--custom-line-height, 1.3rem);\n color: var(--fgColor-muted);\n align-items: center;\n }\n\n & .TreeViewItemLeadingAction {\n grid-area: leadingAction;\n }\n\n & .TreeViewItemTrailingAction {\n grid-area: trailingAction;\n }\n\n & .TreeViewItemTrailingAction,\n & .TreeViewItemLeadingAction {\n display: flex;\n color: var(--fgColor-muted);\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);\n\n & > button {\n flex-shrink: 1;\n }\n }\n\n & .TreeViewItemLevelLine {\n width: 100%;\n height: 100%;\n\n /*\n * On devices without hover, the nesting indicator lines\n * appear at all times.\n */\n border-color: var(--borderColor-muted);\n border-right: var(--borderWidth-thin) solid;\n }\n\n /*\n * On devices with :hover support, the nesting indicator lines\n * fade in when the user mouses over the entire component,\n * or when there's focus inside the component. This makes\n * sure the component remains simple when not in use.\n */\n @media (hover: hover) {\n .TreeViewItemLevelLine {\n border-color: transparent;\n }\n\n &:hover .TreeViewItemLevelLine,\n &:focus-within .TreeViewItemLevelLine {\n border-color: var(--borderColor-muted);\n }\n }\n\n & .TreeViewVisuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n display: flex;\n align-items: center;\n column-gap: 0.5rem;\n height: 2rem;\n\n @media (pointer: coarse) {\n height: 2.75rem;\n }\n\n &:nth-of-type(5n + 1) {\n --tree-item-loading-width: 67%;\n }\n\n &:nth-of-type(5n + 2) {\n --tree-item-loading-width: 47%;\n }\n\n &:nth-of-type(5n + 3) {\n --tree-item-loading-width: 73%;\n }\n\n &:nth-of-type(5n + 4) {\n --tree-item-loading-width: 64%;\n }\n\n &:nth-of-type(5n + 5) {\n --tree-item-loading-width: 50%;\n }\n}\n\n.TreeItemSkeletonTextStyles {\n width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 0.5rem;\n width: 100%;\n align-items: center;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"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","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n padding: 0;\n margin: 0;\n list-style: none;\n\n /*\n * WARNING: This is a performance optimization.\n *\n * We define styles for the tree items at the root level of the tree\n * to avoid recomputing the styles for each item when the tree updates.\n * We're sacrificing maintainability for performance because TreeView\n * needs to be performant enough to handle large trees (thousands of items).\n *\n * This is intended to be a temporary solution until we can improve the\n * performance of our styling patterns.\n *\n * Do NOT copy this pattern without understanding the tradeoffs.\n */\n & .TreeViewItem {\n outline: none;\n\n &:focus-visible > div {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n @media (forced-colors: active) {\n outline: 2px solid HighlightText;\n /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n outline-offset: -2;\n }\n }\n }\n\n & .TreeViewItemContainer {\n --level: 1;\n --toggle-width: 1rem;\n --min-item-height: 2rem;\n\n position: relative;\n display: grid;\n width: 100%;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-default);\n border-radius: var(--borderRadius-medium);\n grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);\n grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);\n --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n &:has([data-has-leading-action]) {\n --has-leading-action: 1;\n }\n\n &:has([data-has-trailing-action]) {\n --has-trailing-action: 1;\n }\n\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n }\n\n @media (pointer: coarse) {\n --toggle-width: 1.5rem;\n --min-item-height: 2.75rem;\n }\n\n &:has(.TreeViewFailureMessage):hover {\n cursor: default;\n background-color: transparent;\n\n @media (forced-colors: active) {\n outline: none;\n }\n }\n\n &:has([role='treeitem']:focus-visible) {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n }\n }\n\n &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n grid-template-columns: 0 0 0 1fr;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n & .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {\n background-color: var(--control-transparent-bgColor-selected);\n\n /* Current item indicator */\n /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n &::after {\n position: absolute;\n top: calc(50% - var(--base-size-12));\n left: calc(-1 * var(--base-size-8));\n width: 0.25rem;\n height: 1.5rem;\n content: '';\n\n /*\n * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n */\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-medium);\n\n @media (forced-colors: active) {\n background-color: HighlightText;\n }\n }\n }\n\n & .TreeViewItemToggle {\n display: flex;\n height: 100%;\n\n /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n color: var(--fgColor-muted);\n grid-area: toggle;\n justify-content: center;\n align-items: flex-start;\n cursor: pointer;\n }\n\n & .TreeViewItemToggleHover:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n\n & .TreeViewItemToggleEnd {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n & a.TreeViewItemContent:hover, button.TreeViewItemContent:hover {\n text-decoration: underline;\n text-decoration-color: var(--control-fgColor-rest);\n }\n\n & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n cursor: not-allowed;\n }\n\n & .TreeViewItemContent {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 var(--base-size-8);\n outline: none;\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n grid-area: content;\n gap: var(--stack-gap-condensed);\n\n & .TreeViewItemCheckbox {\n position: relative;\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n }\n\n &[aria-checked='true'] {\n & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n }\n\n &[aria-checked='false'] {\n /* singleselect checkmark */\n & .TreeViewItem-singleSelectCheckmark {\n visibility: hidden;\n }\n }\n\n &[aria-checked='mixed'] {\n & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n &::before {\n visibility: visible;\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n clip-path: none;\n }\n }\n }\n\n &[aria-disabled='true'] {\n pointer-events: none;\n\n & .TreeViewItemContentText {\n color: var(--control-fgColor-disabled);\n }\n\n & .TreeViewItemVisual {\n fill: var(--control-fgColor-disabled);\n\n /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n & svg {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n & .FormControl-checkbox {\n /* stylelint-disable-next-line max-nesting-depth */\n @media (hover: hover) {\n /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n &:hover {\n cursor: not-allowed;\n }\n }\n }\n\n @media (hover: hover) {\n /* stylelint-disable-next-line max-nesting-depth */\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n }\n\n & .TreeViewItemContentText {\n color: var(--control-fgColor-rest);\n flex: 1 1 auto;\n width: 0;\n }\n\n &:where([data-truncate-text='true']) .TreeViewItemContentText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &:where([data-truncate-text='false']) .TreeViewItemContentText {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n word-break: break-word;\n }\n\n & .TreeViewItemVisual {\n display: flex;\n\n /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n align-self: baseline;\n height: var(--custom-line-height, 1.3rem);\n color: var(--fgColor-muted);\n align-items: center;\n }\n\n & .TreeViewItemLeadingAction {\n grid-area: leadingAction;\n }\n\n & .TreeViewItemTrailingAction {\n grid-area: trailingAction;\n }\n\n & .TreeViewItemTrailingAction,\n & .TreeViewItemLeadingAction {\n display: flex;\n color: var(--fgColor-muted);\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);\n\n & > button {\n flex-shrink: 1;\n }\n }\n\n & .TreeViewItemLevelLine {\n width: 100%;\n height: 100%;\n\n /*\n * On devices without hover, the nesting indicator lines\n * appear at all times.\n */\n border-color: var(--borderColor-muted);\n border-right: var(--borderWidth-thin) solid;\n }\n\n /*\n * On devices with :hover support, the nesting indicator lines\n * fade in when the user mouses over the entire component,\n * or when there's focus inside the component. This makes\n * sure the component remains simple when not in use.\n */\n @media (hover: hover) {\n .TreeViewItemLevelLine {\n border-color: transparent;\n }\n\n &:hover .TreeViewItemLevelLine,\n &:focus-within .TreeViewItemLevelLine {\n border-color: var(--borderColor-muted);\n }\n }\n\n & .TreeViewVisuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: -1px;\n overflow: hidden;\n /* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n display: flex;\n align-items: center;\n column-gap: 0.5rem;\n height: 2rem;\n\n @media (pointer: coarse) {\n height: 2.75rem;\n }\n\n &:nth-of-type(5n + 1) {\n --tree-item-loading-width: 67%;\n }\n\n &:nth-of-type(5n + 2) {\n --tree-item-loading-width: 47%;\n }\n\n &:nth-of-type(5n + 3) {\n --tree-item-loading-width: 73%;\n }\n\n &:nth-of-type(5n + 4) {\n --tree-item-loading-width: 64%;\n }\n\n &:nth-of-type(5n + 5) {\n --tree-item-loading-width: 50%;\n }\n}\n\n.TreeItemSkeletonTextStyles {\n width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 0.5rem;\n width: 100%;\n align-items: center;\n}\n"]}
|
|
@@ -350,6 +350,7 @@
|
|
|
350
350
|
/* stylelint-disable-next-line primer/spacing */
|
|
351
351
|
margin: -1px;
|
|
352
352
|
overflow: hidden;
|
|
353
|
+
/* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */
|
|
353
354
|
clip: rect(0, 0, 0, 0);
|
|
354
355
|
white-space: nowrap;
|
|
355
356
|
border-width: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.UnderlineNav{
|
|
1
|
+
.UnderlineNav{display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px 0 var(--borderColor-muted);-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{margin-left:var(--control-medium-gap);color:var(--fgColor-default);background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted))}.UnderlineNav .Counter--primary{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-neutral-emphasis)}.UnderlineNav-body{display:flex;align-items:center;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{position:relative;display:flex;padding:0 var(--control-medium-paddingInline-condensed);font-size:var(--text-body-size-medium);line-height:30px;color:var(--fgColor-default);text-align:center;white-space:nowrap;cursor:pointer;background-color:initial;border:0;border-radius:var(--borderRadius-medium);align-items:center}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;border-bottom-color:var(--borderColor-neutral-muted);outline-offset:-2px;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{display:block;height:0;font-weight:var(--base-text-weight-semibold);visibility:hidden;content:attr(data-content)}:is(.UnderlineNav-item:before){position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:48px;content:"";transform:translateX(-50%) translateY(-50%)}@media (pointer:fine){.UnderlineNav-item:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;background:var(--control-transparent-bgColor-hover);transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{font-weight:var(--base-text-weight-semibold);color:var(--fgColor-default);border-bottom-color:var(--underlineNav-borderColor-active)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{position:absolute;right:50%;bottom:calc(50% - var(--base-size-24));z-index:1;width:100%;height:2px;content:"";background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);transform:translate(50%,-50%)}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48)}.UnderlineNav-octicon{display:inline!important;margin-right:var(--control-medium-gap);color:var(--fgColor-muted);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cACE,YAAa,CACb,8BAA+B,CAC/B,eAAgB,CAChB,iBAAkB,CAElB,kDAAmD,CACnD,+BAAgC,CAChC,6BAYF,CAVE,uBACE,qCAAsC,CACtC,4BAA6B,CAC7B,wEACF,CAEA,gCACE,+BAAgC,CAChC,gDACF,CAGF,mBACE,YAAa,CACb,kBAAmB,CACnB,6BAA8B,CAC9B,eACF,CAEA,mBACE,iBAAkB,CAClB,YAAa,CACb,uDAAwD,CACxD,sCAAuC,CAEvC,gBAAiB,CACjB,4BAA6B,CAC7B,iBAAkB,CAClB,kBAAmB,CACnB,cAAe,CACf,wBAA6B,CAC7B,QAAS,CACT,wCAAyC,CACzC,kBA0DF,CAxDE,mFAGE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,oDAAqD,CACrD,mBAAoB,CACpB,4CACF,CAGA,yCACE,aAAc,CACd,QAAS,CACT,4CAA6C,CAC7C,iBAAkB,CAClB,0BACF,CAIE,+BCpEJ,kBAAA,QAAA,SAAA,WAAA,YAAA,gBAAA,WAAA,2CDoE8B,CAI5B,sBACE,yBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,mDAAoD,CACpD,mCACF,CACF,CAEA,wIAGE,4CAA6C,CAC7C,4BAA6B,CAC7B,0DAgBF,CAbE,mJACE,iBAAkB,CAClB,SAAU,CACV,sCAAuC,CACvC,SAAU,CACV,UAAW,CACX,UAAW,CACX,UAAW,CAEX,iDAAkD,CAClD,wCAAyC,CACzC,6BACF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,8BACF,CAGF,sBACE,wBAA0B,CAC1B,sCAAuC,CACvC,0BAA2B,CAC3B,yBACF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48);\n overflow-x: auto;\n overflow-y: hidden;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 -1px 0 var(--borderColor-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--control-medium-gap);\n color: var(--fgColor-default);\n background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n }\n\n & .Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--control-medium-gap);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--control-medium-paddingInline-condensed);\n font-size: var(--text-body-size-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: 30px;\n color: var(--fgColor-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--fgColor-default);\n text-decoration: none;\n border-bottom-color: var(--borderColor-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--fgColor-default);\n text-decoration: none;\n background: var(--control-transparent-bgColor-hover);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-default);\n border-bottom-color: var(--underlineNav-borderColor-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n right: 50%;\n bottom: calc(50% - var(--base-size-24)); /* 48px total height / 2 (24px) + 1px */\n z-index: 1; /* raise above full-width flash banner */\n width: 100%;\n height: 2px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--underlineNav-borderColor-active);\n border-radius: var(--borderRadius-medium);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--control-medium-gap);\n color: var(--fgColor-muted);\n fill: var(--fgColor-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
justify-content: space-between;
|
|
12
12
|
|
|
13
13
|
& .Counter {
|
|
14
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
15
14
|
margin-left: var(--control-medium-gap);
|
|
16
15
|
color: var(--fgColor-default);
|
|
17
16
|
background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
|
|
@@ -33,7 +32,6 @@
|
|
|
33
32
|
.UnderlineNav-item {
|
|
34
33
|
position: relative;
|
|
35
34
|
display: flex;
|
|
36
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
37
35
|
padding: 0 var(--control-medium-paddingInline-condensed);
|
|
38
36
|
font-size: var(--text-body-size-medium);
|
|
39
37
|
/* stylelint-disable-next-line primer/typography */
|
|
@@ -128,7 +126,6 @@
|
|
|
128
126
|
|
|
129
127
|
.UnderlineNav-octicon {
|
|
130
128
|
display: inline !important;
|
|
131
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
132
129
|
margin-right: var(--control-medium-gap);
|
|
133
130
|
color: var(--fgColor-muted);
|
|
134
131
|
fill: var(--fgColor-muted);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.avatar{background-color:var(--avatar-bgColor);border-radius:var(--borderRadius-medium);box-shadow:0 0 0 1px var(--avatar-borderColor)
|
|
1
|
+
.avatar{display:inline-block;overflow:hidden;line-height:1;vertical-align:middle;background-color:var(--avatar-bgColor);border-radius:var(--borderRadius-medium);flex-shrink:0;box-shadow:0 0 0 1px var(--avatar-borderColor)}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:var(--base-size-4)}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small)}.avatar-1{width:var(--base-size-16);height:var(--base-size-16)}.avatar-2{width:var(--base-size-20);height:var(--base-size-20)}.avatar-3{width:var(--base-size-24);height:var(--base-size-24)}.avatar-4{width:var(--base-size-28);height:var(--base-size-28)}.avatar-5{width:var(--base-size-32);height:var(--base-size-32)}.avatar-6{width:var(--base-size-40);height:var(--base-size-40)}.avatar-7{width:var(--base-size-48);height:var(--base-size-48)}.avatar-8{width:var(--base-size-64);height:var(--base-size-64)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QACE,oBAAqB,CACrB,eAAgB,CAEhB,aAAc,CACd,qBAAsB,CACtB,sCAAuC,CACvC,wCAAyC,CACzC,aAAc,CAEd,8CACF,CAEA,aACE,UAAW,CAEX,aACF,CAGA,mBACE,oBAAqB,CACrB,gCACF,CAIA,kCAGE,uCACF,CAIA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF,CAEA,UACE,yBAA0B,CAC1B,0BACF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n display: inline-block;\n overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n vertical-align: middle;\n background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */\n border-radius: var(--borderRadius-medium);\n flex-shrink: 0;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 1px var(--avatar-borderColor);\n}\n\n.avatar-link {\n float: left;\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n display: inline-block;\n margin-bottom: var(--base-size-4);\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n width: var(--base-size-16);\n height: var(--base-size-16);\n}\n\n.avatar-2 {\n width: var(--base-size-20);\n height: var(--base-size-20);\n}\n\n.avatar-3 {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.avatar-4 {\n width: var(--base-size-28);\n height: var(--base-size-28);\n}\n\n.avatar-5 {\n width: var(--base-size-32);\n height: var(--base-size-32);\n}\n\n.avatar-6 {\n width: var(--base-size-40);\n height: var(--base-size-40);\n}\n\n.avatar-7 {\n width: var(--base-size-48);\n height: var(--base-size-48);\n}\n\n.avatar-8 {\n width: var(--base-size-64);\n height: var(--base-size-64);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.AvatarStack{
|
|
1
|
+
.AvatarStack{position:relative;min-width:26px;height:20px}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{display:flex;background:var(--bgColor-default);border-radius:100px}.AvatarStack-body .avatar{position:relative;z-index:2;display:flex;width:20px;height:20px;box-sizing:initial;margin-right:-11px;background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);transition:margin .1s ease-in-out}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}.AvatarStack-body span:nth-child(n+4) .avatar,:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar{margin-right:var(--base-size-4)}:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar:nth-child(n+4),:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) span:nth-child(n+4) .avatar{display:flex;opacity:1}:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar-more{display:none!important}.AvatarStack-body[data-disable-expand]{position:relative}.avatar.avatar-more{z-index:1;margin-right:0;background:var(--bgColor-muted)}.avatar.avatar-more:after,.avatar.avatar-more:before{position:absolute;display:block;height:20px;content:"";border-radius:2px;outline:var(--borderWidth-thin) solid var(--bgColor-default)}.avatar.avatar-more:before{width:17px;background:var(--avatarStack-fade-bgColor-muted)}.avatar.avatar-more:after{width:14px;background:var(--avatarStack-fade-bgColor-default)}.AvatarStack--right .AvatarStack-body{right:0;flex-direction:row-reverse}:is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar{margin-right:0;margin-left:var(--base-size-4)}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{width:2px;background:var(--bgColor-muted)}.AvatarStack--right .avatar{margin-right:0;margin-left:-11px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAUA,
|
|
1
|
+
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAUA,aACE,iBAAkB,CAClB,cAAe,CACf,WAaF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBACE,YAAa,CACb,iCAAkC,CAElC,mBAgEF,CA9DE,0BACE,iBAAkB,CAClB,SAAU,CACV,YAAa,CACb,UAAW,CACX,WAAY,CACZ,kBAAuB,CAEvB,kBAAmB,CACnB,uCAAwC,CACxC,uCAAwC,CACxC,iCAoBF,CAlBE,2CACE,SACF,CAEA,0CACE,SACF,CAGA,mCACE,uCACF,CASF,4FACE,YAAa,CACb,SACF,CAIE,0HACE,+BACF,CAOA,uRACE,YAAa,CACb,SACF,CAEA,+HACE,sBACF,CAGF,uCACE,iBACF,CAGF,oBACE,SAAU,CACV,cAAe,CACf,+BAsBF,CApBE,qDAEE,iBAAkB,CAClB,aAAc,CACd,WAAY,CACZ,UAAW,CAEX,iBAAkB,CAClB,4DACF,CAEA,2BACE,UAAW,CACX,gDACF,CAEA,0BACE,UAAW,CACX,kDACF,CAMA,sCACE,OAAQ,CACR,0BAMF,CAJE,oFACE,cAAe,CACf,8BACF,CAGF,wCACE,kDAUF,CARE,oDACE,SACF,CAEA,mDACE,SAAU,CACV,+BACF,CAGF,4BACE,cAAe,CAEf,iBACF","file":"avatar_stack.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* The selector-max-specificity rule is disabled here because the nested selectors\n in AvatarStack require high specificity to properly override default styles and \n achieve the intended visual stacking. */\n\n/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n position: relative;\n min-width: 26px;\n height: 20px;\n\n & .AvatarStack-body {\n position: absolute;\n }\n\n &.AvatarStack--two {\n min-width: 36px;\n }\n\n &.AvatarStack--three-plus {\n min-width: 46px;\n }\n}\n\n.AvatarStack-body {\n display: flex;\n background: var(--bgColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 100px;\n\n & .avatar {\n position: relative;\n z-index: 2;\n display: flex;\n width: 20px;\n height: 20px;\n box-sizing: content-box;\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -11px;\n background-color: var(--bgColor-default);\n border-radius: var(--borderRadius-small);\n transition: margin 0.1s ease-in-out;\n\n &:first-child {\n z-index: 3;\n }\n\n &:last-child {\n z-index: 1;\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & img {\n border-radius: var(--borderRadius-small);\n }\n\n /* Account for 4+ avatars */\n &:nth-child(n + 4) {\n display: none;\n opacity: 0;\n }\n }\n /* stylelint-disable-next-line selector-max-type */\n & span:nth-child(n + 4) .avatar {\n display: none;\n opacity: 0;\n }\n\n &:hover:not([data-disable-expand]),\n &:focus-within:not([data-disable-expand]) {\n & .avatar {\n margin-right: var(--base-size-4);\n }\n\n & .avatar:nth-child(n + 4) {\n display: flex;\n opacity: 1;\n }\n /* stylelint-disable-next-line selector-max-type */\n & span:nth-child(n + 4) .avatar {\n display: flex;\n opacity: 1;\n }\n\n & .avatar-more {\n display: none !important;\n }\n }\n\n &[data-disable-expand] {\n position: relative;\n }\n}\n\n.avatar.avatar-more {\n z-index: 1;\n margin-right: 0;\n background: var(--bgColor-muted);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n height: 20px;\n content: '';\n /* stylelint-disable-next-line primer/borders */\n border-radius: 2px;\n outline: var(--borderWidth-thin) solid var(--bgColor-default);\n }\n\n &::before {\n width: 17px;\n background: var(--avatarStack-fade-bgColor-muted);\n }\n\n &::after {\n width: 14px;\n background: var(--avatarStack-fade-bgColor-default);\n }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n & .AvatarStack-body {\n right: 0;\n flex-direction: row-reverse;\n\n &:hover:not([data-disable-expand]) .avatar {\n margin-right: 0;\n margin-left: var(--base-size-4);\n }\n }\n\n & .avatar.avatar-more {\n background: var(--avatarStack-fade-bgColor-default);\n\n &::before {\n width: 5px;\n }\n\n &::after {\n width: 2px;\n background: var(--bgColor-muted);\n }\n }\n\n & .avatar {\n margin-right: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -11px;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
|
|
1
|
+
.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);position:relative;padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);text-align:center}.blankslate p{color:var(--fgColor-muted);max-width:56rem;margin:auto}.blankslate code,.blankslate p{font-size:var(--text-body-size-medium)}.blankslate code{padding:var(--base-size-2) var(--base-size-4) var(--base-size-4);background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium)}.blankslate img{width:56px;height:56px}.blankslate-icon{margin-right:var(--control-small-gap);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);color:var(--fgColor-muted)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{margin-bottom:var(--base-size-4);font-size:var(--text-title-size-small);font-weight:var(--text-title-weight-medium);text-wrap:balance}.blankslate-description{text-wrap:balance}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{max-width:485px;margin:0 auto}.blankslate-large img{width:80px;height:80px}.blankslate-large h3{margin:var(--stack-gap-normal) 0;font-size:24px}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,
|
|
1
|
+
{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAEtD,iBAAkB,CAElB,oFAAqF,CACrF,iBAwBF,CArBE,cAEE,0BAA2B,CAC3B,eAAgB,CAChB,WACF,CAGA,+BAPE,sCAaF,CANA,iBACE,gEAAiE,CAEjE,iCAAkC,CAClC,6DAA8D,CAC9D,wCACF,CAGA,gBACE,UAAW,CACX,WACF,CAGF,iBACE,qCAAsC,CACtC,wCAAyC,CACzC,oCAAqC,CACrC,0BACF,CAEA,kBACE,qCACF,CAEA,oBACE,gCAAiC,CACjC,sCAAuC,CACvC,2CAA4C,CAC5C,iBACF,CAEA,wBACE,iBACF,CAEA,mBACE,kCASF,CAPE,iCACE,oCACF,CAEA,gCACE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBACE,eAAgB,CAChB,aACF,CAME,sBACE,UAAW,CACX,WACF,CAGA,qBACE,gCAAiC,CAIjC,cACF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n container-type: inline-size;\n width: 100%;\n}\n\n.blankslate {\n --blankslate-outer-padding-block: var(--base-size-32);\n --blankslate-outer-padding-inline: var(--base-size-32);\n\n position: relative;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n text-align: center;\n\n /* stylelint-disable-next-line selector-max-type */\n & p {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n max-width: 56rem;\n margin: auto;\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & code {\n padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n font-size: var(--text-body-size-medium);\n background: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--borderColor-muted);\n border-radius: var(--borderRadius-medium);\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & img {\n width: 56px;\n height: 56px;\n }\n}\n\n.blankslate-icon {\n margin-right: var(--control-small-gap);\n margin-bottom: var(--stack-gap-condensed);\n margin-left: var(--control-small-gap);\n color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n margin-bottom: var(--base-size-4);\n font-size: var(--text-title-size-small);\n font-weight: var(--text-title-weight-medium);\n text-wrap: balance;\n}\n\n.blankslate-description {\n text-wrap: balance;\n}\n\n.blankslate-action {\n margin-top: var(--stack-gap-normal);\n\n &:first-of-type {\n margin-top: var(--stack-gap-spacious);\n }\n\n &:last-of-type {\n margin-bottom: var(--stack-gap-condensed);\n }\n}\n\n.blankslate-capped {\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n --blankslate-outer-padding-block: var(--base-size-80);\n --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n max-width: 485px;\n margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n /* stylelint-disable-next-line selector-max-type */\n & img {\n width: 80px;\n height: 80px;\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & h3 {\n margin: var(--stack-gap-normal) 0;\n\n /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n /* stylelint-disable-next-line primer/typography */\n font-size: 24px;\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & p {\n font-size: var(--text-body-size-large);\n }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n border: 0;\n}\n"]}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
/* stylelint-disable-next-line selector-max-type */
|
|
18
18
|
& p {
|
|
19
|
-
font-size: var(--text-body-size-
|
|
19
|
+
font-size: var(--text-body-size-medium);
|
|
20
20
|
color: var(--fgColor-muted);
|
|
21
21
|
max-width: 56rem;
|
|
22
22
|
margin: auto;
|
|
@@ -39,23 +39,19 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.blankslate-icon {
|
|
42
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
43
42
|
margin-right: var(--control-small-gap);
|
|
44
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
45
43
|
margin-bottom: var(--stack-gap-condensed);
|
|
46
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
47
44
|
margin-left: var(--control-small-gap);
|
|
48
45
|
color: var(--fgColor-muted);
|
|
49
46
|
}
|
|
50
47
|
|
|
51
48
|
.blankslate-image {
|
|
52
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
53
49
|
margin-bottom: var(--stack-gap-normal);
|
|
54
50
|
}
|
|
55
51
|
|
|
56
52
|
.blankslate-heading {
|
|
57
53
|
margin-bottom: var(--base-size-4);
|
|
58
|
-
font-size: var(--text-title-size-
|
|
54
|
+
font-size: var(--text-title-size-small);
|
|
59
55
|
font-weight: var(--text-title-weight-medium);
|
|
60
56
|
text-wrap: balance;
|
|
61
57
|
}
|
|
@@ -65,16 +61,13 @@
|
|
|
65
61
|
}
|
|
66
62
|
|
|
67
63
|
.blankslate-action {
|
|
68
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
69
64
|
margin-top: var(--stack-gap-normal);
|
|
70
65
|
|
|
71
66
|
&:first-of-type {
|
|
72
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
73
67
|
margin-top: var(--stack-gap-spacious);
|
|
74
68
|
}
|
|
75
69
|
|
|
76
70
|
&:last-of-type {
|
|
77
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
78
71
|
margin-bottom: var(--stack-gap-condensed);
|
|
79
72
|
}
|
|
80
73
|
}
|
|
@@ -104,7 +97,6 @@
|
|
|
104
97
|
|
|
105
98
|
/* stylelint-disable-next-line selector-max-type */
|
|
106
99
|
& h3 {
|
|
107
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
108
100
|
margin: var(--stack-gap-normal) 0;
|
|
109
101
|
|
|
110
102
|
/* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
|
|
@@ -123,46 +115,3 @@
|
|
|
123
115
|
.blankslate-clean-background {
|
|
124
116
|
border: 0;
|
|
125
117
|
}
|
|
126
|
-
|
|
127
|
-
/* At the time these styles were written,
|
|
128
|
-
`34rem` was our "small" breakpoint width */
|
|
129
|
-
@container (max-width: 34rem) {
|
|
130
|
-
.blankslate {
|
|
131
|
-
--blankslate-outer-padding-block: var(--base-size-20);
|
|
132
|
-
--blankslate-outer-padding-inline: var(--base-size-20);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.blankslate-spacious {
|
|
136
|
-
--blankslate-outer-padding-block: var(--base-size-44);
|
|
137
|
-
--blankslate-outer-padding-inline: var(--base-size-28);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.blankslate-icon {
|
|
141
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
142
|
-
margin-bottom: var(--stack-gap-condensed);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.blankslate-heading {
|
|
146
|
-
font-size: var(--text-title-size-small);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
/* stylelint-disable-next-line selector-max-type */
|
|
150
|
-
.blankslate p {
|
|
151
|
-
font-size: var(--text-body-size-medium);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.blankslate-action {
|
|
155
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
156
|
-
margin-top: var(--stack-gap-condensed);
|
|
157
|
-
|
|
158
|
-
&:first-of-type {
|
|
159
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
160
|
-
margin-top: var(--stack-gap-normal);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
&:last-of-type {
|
|
164
|
-
/* stylelint-disable-next-line primer/spacing */
|
|
165
|
-
margin-bottom: calc(var(--stack-gap-condensed) / 2);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-
|
|
1
|
+
.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);line-height:1.25}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{padding:var(--stack-padding-spacious);line-height:1.25}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){padding:var(--stack-padding-spacious);margin:calc(var(--stack-gap-spacious)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{padding:var(--stack-padding-normal);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{padding:var(--stack-padding-normal);border-bottom:var(--borderWidth-thin) solid var(--borderColor-default)}.Box-body:last-of-type{margin-bottom:calc(var(--borderWidth-thin)*-1);border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box-row{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);list-style-type:none;border-top:var(--borderWidth-thin) solid var(--borderColor-muted)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-row:last-of-type{border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted)}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted)}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted)}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted)}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default)}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent)}}.Box-row--drag-button{opacity:0}.Box-footer{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);border-top:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted)}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted)}.Box--danger,:is(.Box--danger .Box-body):last-of-type,:is(.Box--danger .Box-row):first-of-type{border-color:var(--borderColor-danger-emphasis)}.Box-header--blue{background-color:var(--bgColor-accent-muted);border-color:var(--borderColor-accent-muted)}.Box-row--yellow{background-color:var(--bgColor-attention-muted)}.Box-row--blue{background-color:var(--bgColor-accent-muted)}.Box-row--gray{background-color:var(--bgColor-muted)}.Box-btn-octicon.btn-octicon{padding:var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-small-gap-spacious)*-1);line-height:var(--text-title-lineHeight-large)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,
|
|
1
|
+
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,wCACF,CAGA,gBACE,gBAyBF,CAfE,kFACE,kEACF,CAGE,kDACE,kGAAmG,CACnG,wGAA6G,CAC7G,gBACF,CAGF,yBACE,kEACF,CAIA,2BACE,qCAAsC,CACtC,gBACF,CAEA,0BACE,uCACF,CAMA,oDACE,qCACF,CAGE,iDACE,qCAAsC,CACtC,yCACF,CAGF,wBACE,qCACF,CAGF,YACE,mCAAoC,CACpC,0EAA+E,CAC/E,qCAAsC,CACtC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,iDAAkD,CAClD,kDACF,CAEA,WACE,sCAAuC,CACvC,4CACF,CAEA,UACE,mCAAoC,CACpC,sEAQF,CALE,uBACE,8CAAiD,CACjD,qDAAsD,CACtD,oDACF,CAIF,SACE,mCAAoC,CACpC,2CAA8C,CAC9C,oBAAqB,CAGrB,iEAiDF,CA/CE,uBACE,iDAAkD,CAClD,kDACF,CAEA,sBACE,qDAAsD,CACtD,oDACF,CAIA,yCAIE,2DACF,CAIE,gDACE,2BAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,qCAMF,CAHE,6DACE,SACF,CAMJ,sCACE,qCACF,CAIA,sCACE,4CACF,CAIA,2BACE,qCACF,CAIA,2BACE,4CACF,CAOA,yBADF,cAEI,4BAQJ,CALI,kCAFA,4BAAqB,CAArB,oBAKA,CAHA,oBACE,2BAEF,CACF,CAKF,sBACE,SACF,CAEA,YACE,mCAAoC,CACpC,2CAA8C,CAG9C,mEAAyC,CACzC,uEACF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,4CAKA,CAHA,uBACE,4CAEF,CAUA,gEACE,4CACF,CAeE,+FACE,+CACF,CAIJ,kBACE,4CAA6C,CAC7C,4CACF,CAIA,iBACE,+CACF,CAEA,eACE,4CACF,CAEA,eACE,qCACF,CAKE,6BACE,oDAAqD,CACrD,sDAAyD,CACzD,8CACF","file":"border_box.css","sourcesContent":["/* stylelint-disable primer/spacing */\n/* stylelint-disable primer/typography */\n\n/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n background-color: var(--bgColor-default);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n line-height: 1.25;\n\n & .Box-header {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-body {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n line-height: 1.25;\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n}\n\n.Box--spacious {\n & .Box-header {\n padding: var(--stack-padding-spacious);\n line-height: 1.25;\n }\n\n & .Box-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Box-body {\n padding: var(--stack-padding-spacious);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-spacious);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--stack-padding-spacious);\n margin: calc(var(--stack-gap-spacious) * -1);\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-spacious);\n }\n}\n\n.Box-header {\n padding: var(--stack-padding-normal);\n margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n background-color: var(--bgColor-muted);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n padding: var(--stack-padding-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n &:last-of-type {\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n}\n\n/* Box rows */\n.Box-row {\n padding: var(--stack-padding-normal);\n margin-top: calc(var(--borderWidth-thin) * -1);\n list-style-type: none; /* To account for applying Box component to a list */\n border-top-color: var(--borderColor-muted);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin);\n\n &:first-of-type {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n }\n\n &:last-of-type {\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n /* Adds a blue vertical line to the left of the row\n ** For indicating a row item is unread */\n &.Box-row--unread,\n /* .unread to be deprecated with .Box-row-unread */\n &.unread {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n }\n\n &.navigation-focus {\n /* Focus styles for when drag icon */\n & .Box-row--drag-button {\n color: var(--fgColor-accent);\n cursor: grab;\n opacity: 100;\n }\n\n /* Grabbing while row is dragged */\n &.is-dragging .Box-row--drag-button {\n cursor: grabbing;\n }\n\n /* Row dragging styles */\n &.sortable-chosen {\n background-color: var(--bgColor-muted);\n }\n\n /* Makes dragging row background gray */\n &.sortable-ghost {\n background-color: var(--bgColor-muted);\n\n /* Hides contents of row while dragging so row looks solid gray */\n & .Box-row--drag-hide {\n opacity: 0;\n }\n }\n }\n}\n\n.Box-row--focus-gray {\n &.navigation-focus {\n background-color: var(--bgColor-muted);\n }\n}\n\n.Box-row--focus-blue {\n &.navigation-focus {\n background-color: var(--bgColor-accent-muted);\n }\n}\n\n.Box-row--hover-gray {\n &:hover {\n background-color: var(--bgColor-muted);\n }\n}\n\n.Box-row--hover-blue {\n &:hover {\n background-color: var(--bgColor-accent-muted);\n }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n @media (min-width: 768px) {\n color: var(--fgColor-default);\n text-decoration: none;\n\n &:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n }\n }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n opacity: 0;\n}\n\n.Box-footer {\n padding: var(--stack-padding-normal);\n margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n border-top-color: var(--borderColor-default);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin);\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n max-height: 324px;\n overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n border-color: var(--borderColor-accent-muted);\n\n & .Box-header {\n background-color: var(--bgColor-accent-muted);\n border-color: var(--borderColor-accent-muted);\n }\n\n & .Box-body {\n border-color: var(--borderColor-accent-muted);\n }\n\n & .Box-row {\n border-color: var(--borderColor-accent-muted);\n }\n\n & .Box-footer {\n border-color: var(--borderColor-accent-muted);\n }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n border-color: var(--borderColor-danger-emphasis);\n\n & .Box-row {\n &:first-of-type {\n border-color: var(--borderColor-danger-emphasis);\n }\n }\n\n & .Box-body {\n &:last-of-type {\n border-color: var(--borderColor-danger-emphasis);\n }\n }\n}\n\n.Box-header--blue {\n background-color: var(--bgColor-accent-muted);\n border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--controlStack-small-gap-spacious) * -1);\n line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */\n }\n}\n"]}
|
|
@@ -71,9 +71,12 @@ module Primer
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
# @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
|
|
74
|
+
# @param list_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
75
|
+
# @param list_id [String] Deprecated. Use <code>list_arguments: { id: ... }</code> instead.
|
|
74
76
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
75
|
-
def initialize(padding: DEFAULT_PADDING, **system_arguments)
|
|
77
|
+
def initialize(padding: DEFAULT_PADDING, list_arguments: {}, **system_arguments)
|
|
76
78
|
list_id = system_arguments.delete(:list_id)
|
|
79
|
+
deprecation_warn("The `list_id:` param is deprecated. Use `list_arguments: { id: ... }` instead. It will be removed in a future version.") if list_id
|
|
77
80
|
|
|
78
81
|
@system_arguments = deny_tag_argument(**system_arguments)
|
|
79
82
|
@system_arguments[:tag] = :div
|
|
@@ -84,9 +87,10 @@ module Primer
|
|
|
84
87
|
)
|
|
85
88
|
|
|
86
89
|
@system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
|
|
87
|
-
@list_arguments =
|
|
88
|
-
@list_arguments[:
|
|
89
|
-
@list_arguments[:
|
|
90
|
+
@list_arguments = deny_tag_argument(**list_arguments)
|
|
91
|
+
@list_arguments[:tag] = :ul
|
|
92
|
+
@list_arguments[:id] ||= list_id if list_id
|
|
93
|
+
@list_arguments[:classes] = class_names("Box-list", @list_arguments[:classes])
|
|
90
94
|
end
|
|
91
95
|
|
|
92
96
|
def render?
|
|
@@ -98,9 +102,16 @@ module Primer
|
|
|
98
102
|
def before_render
|
|
99
103
|
return unless header
|
|
100
104
|
|
|
101
|
-
@list_arguments[:aria] =
|
|
102
|
-
|
|
103
|
-
|
|
105
|
+
@list_arguments[:aria] = merge_aria(
|
|
106
|
+
@list_arguments,
|
|
107
|
+
{ aria: { labelledby: header.id } }
|
|
108
|
+
)
|
|
109
|
+
end
|
|
110
|
+
|
|
111
|
+
def deprecation_warn(message)
|
|
112
|
+
return if Rails.env.production? || silence_deprecations?
|
|
113
|
+
|
|
114
|
+
::Primer::ViewComponents.deprecation.warn(message)
|
|
104
115
|
end
|
|
105
116
|
end
|
|
106
117
|
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{
|
|
1
|
+
.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{display:inline-block;height:.8em;margin:0 .15em 0 .5em;content:"";border-right:.1em solid var(--borderColor-neutral-emphasis);transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);-webkit-text-decoration:none!important;text-decoration:none!important;cursor:default!important}
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
"selectors": [
|
|
4
4
|
".breadcrumb-item",
|
|
5
5
|
".breadcrumb-item:after",
|
|
6
|
-
"
|
|
6
|
+
".breadcrumb-item-selected:after",
|
|
7
|
+
".breadcrumb-item[aria-current]:not([aria-current=false]):after",
|
|
7
8
|
".breadcrumb-item-selected a"
|
|
8
9
|
]
|
|
9
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,eAAgB,CAChB,cAYF,CAVE,
|
|
1
|
+
{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,eAAgB,CAChB,cAYF,CAVE,uBACE,oBAAqB,CACrB,WAAa,CAEb,qBAAwB,CACxB,UAAW,CAEX,2DAA6D,CAC7D,2CACF,CAMF,+FAEE,YACF,CAGA,4BACE,4BAA6B,CAC7B,sCAAgC,CAAhC,8BAAgC,CAChC,wBACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n list-style: none;\n max-width: 100%;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n /* stylelint-disable-next-line primer/spacing */\n margin: 0 0.15em 0 0.5em;\n content: '';\n /* stylelint-disable-next-line primer/borders */\n border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n transform: rotate(15deg) translateY(0.0625em);\n }\n}\n\n/* Expanded per-class so each selector buckets by its own class during style\n** recalc, instead of compiling to a merged `:is(...)` that Blink cannot\n** fast-reject. */\n.breadcrumb-item-selected::after,\n.breadcrumb-item[aria-current]:not([aria-current='false'])::after {\n content: none;\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n color: var(--fgColor-default);\n text-decoration: none !important;\n cursor: default !important;\n}"]}
|