openproject-primer_view_components 0.48.1 → 0.49.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +51 -0
- data/app/assets/javascripts/{app/components → components}/primer/open_project/zen_mode_button.d.ts +4 -0
- data/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -4
- 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.map +1 -1
- data/app/components/primer/alpha/action_bar.pcss +7 -4
- data/app/components/primer/alpha/action_bar_element.js +0 -3
- data/app/components/primer/alpha/action_bar_element.ts +0 -4
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +25 -8
- data/app/components/primer/alpha/action_list.rb +1 -1
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +7 -7
- 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 +6 -2
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.pcss +11 -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 +39 -13
- data/app/components/primer/alpha/dialog.rb +5 -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/dropdown.pcss +45 -11
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +3 -2
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.pcss +7 -0
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +3 -3
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +15 -8
- data/app/components/primer/alpha/select_panel.html.erb +8 -5
- data/app/components/primer/alpha/select_panel.rb +26 -1
- data/app/components/primer/alpha/select_panel_element.js +9 -3
- data/app/components/primer/alpha/select_panel_element.ts +10 -4
- data/app/components/primer/alpha/stack.css +1 -0
- data/app/components/primer/alpha/stack.css.json +90 -0
- data/app/components/primer/alpha/stack.css.map +1 -0
- data/app/components/primer/alpha/stack.html.erb +3 -0
- data/app/components/primer/alpha/stack.pcss +297 -0
- data/app/components/primer/alpha/stack.rb +185 -0
- data/app/components/primer/alpha/stack_item.css +1 -0
- data/app/components/primer/alpha/stack_item.css.json +12 -0
- data/app/components/primer/alpha/stack_item.css.map +1 -0
- data/app/components/primer/alpha/stack_item.html.erb +3 -0
- data/app/components/primer/alpha/stack_item.pcss +31 -0
- data/app/components/primer/alpha/stack_item.rb +54 -0
- 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 +12 -3
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +29 -22
- 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 +6 -3
- 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 +8 -2
- data/app/components/primer/base_component.rb +1 -1
- 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.pcss +4 -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/avatar_stack.pcss +9 -2
- 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 +24 -3
- 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.pcss +8 -4
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.pcss +5 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +31 -27
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/button_group.pcss +1 -0
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +3 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +7 -4
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +4 -0
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +15 -7
- 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/progress_bar.pcss +2 -2
- 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 +6 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +3 -0
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.pcss +11 -0
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.pcss +1 -0
- data/app/components/primer/dialog_helper.js +0 -1
- data/app/components/primer/dialog_helper.ts +0 -1
- data/app/components/primer/open_project/zen_mode_button.d.ts +4 -0
- data/app/components/primer/open_project/zen_mode_button.js +14 -6
- data/app/components/primer/open_project/zen_mode_button.ts +18 -5
- data/app/components/primer/primer.d.ts +3 -4
- data/app/components/primer/primer.js +3 -4
- data/app/components/primer/primer.pcss +6 -4
- data/app/components/primer/primer.ts +3 -4
- data/app/components/primer/responsive_arg.rb +66 -0
- data/app/forms/caption_template_form/places_bellevue_caption.html.erb +1 -0
- data/app/forms/caption_template_form/places_lopez_caption.html.erb +1 -0
- data/app/forms/caption_template_form/places_seattle_caption.html.erb +1 -0
- data/app/forms/caption_template_form.rb +6 -0
- data/app/forms/check_box_group_form.rb +1 -1
- data/app/forms/radio_button_group_form.rb +5 -1
- data/app/lib/primer/attributes_helper.rb +1 -1
- data/{lib → app/lib}/primer/forms/base_component.rb +0 -8
- data/{lib → app/lib}/primer/forms/button.rb +5 -2
- data/{lib → app/lib}/primer/forms/check_box_group.html.erb +3 -3
- data/{lib → app/lib}/primer/forms/check_box_group.rb +1 -1
- data/{lib → app/lib}/primer/forms/dsl/check_box_input.rb +4 -8
- data/{lib → app/lib}/primer/forms/dsl/input.rb +13 -1
- data/{lib → app/lib}/primer/forms/dsl/radio_button_input.rb +4 -0
- data/{lib → app/lib}/primer/forms/group.html.erb +1 -1
- data/{lib → app/lib}/primer/forms/group.rb +5 -0
- data/{lib → app/lib}/primer/forms/radio_button_group.html.erb +3 -3
- data/{lib → app/lib}/primer/forms/radio_button_group.rb +1 -1
- data/{lib → app/lib}/primer/forms/select.html.erb +0 -1
- data/lib/primer/view_components/linters/details_menu_migration.rb +3 -2
- data/lib/primer/view_components/version.rb +2 -2
- data/lib/primer/yard/component_manifest.rb +0 -1
- data/previews/primer/alpha/action_bar_preview/inline.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -1
- data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +4 -4
- data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +11 -2
- data/previews/primer/alpha/dialog_preview/with_footer.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview/with_form.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview.rb +4 -2
- data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb +1 -1
- data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/custom_loading_description.html.erb +23 -0
- data/previews/primer/alpha/select_panel_preview/custom_loading_label.html.erb +21 -0
- data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +4 -2
- data/previews/primer/alpha/select_panel_preview/scroll_container.html.erb +49 -0
- data/previews/primer/alpha/select_panel_preview.rb +40 -2
- data/previews/primer/alpha/stack_item_preview/default.html.erb +5 -0
- data/previews/primer/alpha/stack_item_preview/playground.html.erb +11 -0
- data/previews/primer/alpha/stack_item_preview.rb +40 -0
- data/previews/primer/alpha/stack_preview/playground.html.erb +5 -0
- data/previews/primer/alpha/stack_preview.rb +88 -0
- data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb +1 -2
- data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +2 -2
- data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +1 -1
- data/previews/primer/alpha/underline_nav_preview/default.html.erb +1 -1
- data/previews/primer/alpha/underline_nav_preview/playground.html.erb +1 -1
- data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +18 -18
- data/previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb +3 -1
- data/previews/primer/beta/button_preview/summary_as_button.html.erb +0 -1
- data/previews/primer/beta/subhead_preview/actions.html.erb +0 -1
- data/previews/primer/open_project/feedback_dialog_preview/additional_content.html.erb +1 -1
- data/previews/primer/open_project/feedback_dialog_preview/custom_footer.html.erb +1 -1
- data/previews/primer/open_project/feedback_dialog_preview/playground.html.erb +2 -2
- data/previews/primer/open_project/page_header_preview/actions.html.erb +1 -1
- data/previews/primer/open_project/page_header_preview/playground.html.erb +2 -2
- data/previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb +1 -1
- data/static/arguments.json +112 -30
- data/static/audited_at.json +2 -1
- data/static/classes.json +6 -0
- data/static/constants.json +172 -9
- data/static/info_arch.json +248 -98
- data/static/previews.json +107 -47
- data/static/statuses.json +2 -1
- metadata +137 -120
- data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +0 -1
- data/app/components/primer/alpha/image_crop.d.ts +0 -1
- data/app/components/primer/alpha/image_crop.html.erb +0 -12
- data/app/components/primer/alpha/image_crop.js +0 -1
- data/app/components/primer/alpha/image_crop.rb +0 -28
- data/app/components/primer/alpha/image_crop.ts +0 -1
- data/previews/primer/alpha/image_crop_preview.rb +0 -31
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/open_project/page_header_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/open_project/sub_header_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/action_menu.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/action_menu.rb +0 -0
- /data/{lib → app/lib}/primer/forms/acts_as_component.rb +0 -0
- /data/{lib → app/lib}/primer/forms/auto_complete.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/auto_complete.rb +0 -0
- /data/{lib → app/lib}/primer/forms/base.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/base.rb +0 -0
- /data/{lib → app/lib}/primer/forms/buffer_rewriter.rb +0 -0
- /data/{lib → app/lib}/primer/forms/builder.rb +0 -0
- /data/{lib → app/lib}/primer/forms/button.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/caption.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/caption.rb +0 -0
- /data/{lib → app/lib}/primer/forms/check_box.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/check_box.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/action_menu_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/auto_complete_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/button_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/check_box_group_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/form_object.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/form_reference_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/hidden_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/input_group.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/input_methods.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/multi_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/radio_button_group_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/select_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/submit_button_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/text_area_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/text_field_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/toggle_switch_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/form_control.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/form_control.rb +0 -0
- /data/{lib → app/lib}/primer/forms/form_list.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/form_list.rb +0 -0
- /data/{lib → app/lib}/primer/forms/form_reference.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/form_reference.rb +0 -0
- /data/{lib → app/lib}/primer/forms/hidden_field.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/hidden_field.rb +0 -0
- /data/{lib → app/lib}/primer/forms/multi.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/multi.rb +0 -0
- /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.rb +0 -0
- /data/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
- /data/{lib → app/lib}/primer/forms/primer_multi_input.ts +0 -0
- /data/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
- /data/{lib → app/lib}/primer/forms/primer_text_field.ts +0 -0
- /data/{lib → app/lib}/primer/forms/radio_button.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/radio_button.rb +0 -0
- /data/{lib → app/lib}/primer/forms/select.rb +0 -0
- /data/{lib → app/lib}/primer/forms/separator.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/separator.rb +0 -0
- /data/{lib → app/lib}/primer/forms/spacing_wrapper.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/spacing_wrapper.rb +0 -0
- /data/{lib → app/lib}/primer/forms/submit_button.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/submit_button.rb +0 -0
- /data/{lib → app/lib}/primer/forms/text_area.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/text_area.rb +0 -0
- /data/{lib → app/lib}/primer/forms/text_field.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/text_field.rb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch.rb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_form.rb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_input.ts +0 -0
- /data/{lib → app/lib}/primer/forms/utils.rb +0 -0
- /data/{lib → app/lib}/primer/forms/validation_message.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/validation_message.rb +0 -0
- /data/{lib → app/lib}/primer/forms.rb +0 -0
@@ -0,0 +1,297 @@
|
|
1
|
+
.Stack {
|
2
|
+
display: flex;
|
3
|
+
flex-flow: column;
|
4
|
+
align-items: stretch;
|
5
|
+
align-content: flex-start;
|
6
|
+
gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
|
7
|
+
|
8
|
+
/* non-responsive values */
|
9
|
+
|
10
|
+
&[data-padding='none'],
|
11
|
+
&[data-padding-narrow='none'] {
|
12
|
+
padding: 0;
|
13
|
+
}
|
14
|
+
|
15
|
+
&[data-padding='condensed'],
|
16
|
+
&[data-padding-narrow='condensed'] {
|
17
|
+
/* stylelint-disable-next-line primer/spacing */
|
18
|
+
padding: var(--stack-padding-condensed, 8px);
|
19
|
+
}
|
20
|
+
|
21
|
+
&[data-padding='normal'],
|
22
|
+
&[data-padding-narrow='normal'] {
|
23
|
+
/* stylelint-disable-next-line primer/spacing */
|
24
|
+
padding: var(--stack-padding-normal, 16px);
|
25
|
+
}
|
26
|
+
|
27
|
+
&[data-padding='spacious'],
|
28
|
+
&[data-padding-narrow='spacious'] {
|
29
|
+
/* stylelint-disable-next-line primer/spacing */
|
30
|
+
padding: var(--stack-padding-spacious, 24px);
|
31
|
+
}
|
32
|
+
|
33
|
+
&[data-direction='horizontal'],
|
34
|
+
&[data-direction-narrow='horizontal'] {
|
35
|
+
flex-flow: row;
|
36
|
+
}
|
37
|
+
|
38
|
+
&[data-direction='vertical'],
|
39
|
+
&[data-direction-narrow='vertical'] {
|
40
|
+
flex-flow: column;
|
41
|
+
}
|
42
|
+
|
43
|
+
&[data-gap='none'],
|
44
|
+
&[data-gap-narrow='none'] {
|
45
|
+
--stack-gap: var(--stack-gap-none, 0);
|
46
|
+
}
|
47
|
+
|
48
|
+
&[data-gap='condensed'],
|
49
|
+
&[data-gap-narrow='condensed'] {
|
50
|
+
--stack-gap: var(--stack-gap-condensed, 0.5rem);
|
51
|
+
}
|
52
|
+
|
53
|
+
&[data-gap='normal'],
|
54
|
+
&[data-gap-narrow='normal'] {
|
55
|
+
--stack-gap: var(--stack-gap-normal, 1rem);
|
56
|
+
}
|
57
|
+
|
58
|
+
&[data-gap='spacious'],
|
59
|
+
&[data-gap-narrow='spacious'] {
|
60
|
+
--stack-gap: var(--stack-gap-spacious, 1.5rem);
|
61
|
+
}
|
62
|
+
|
63
|
+
&[data-align='start'],
|
64
|
+
&[data-align-narrow='start'] {
|
65
|
+
align-items: flex-start;
|
66
|
+
}
|
67
|
+
|
68
|
+
&[data-align='center'],
|
69
|
+
&[data-align-narrow='center'] {
|
70
|
+
align-items: center;
|
71
|
+
}
|
72
|
+
|
73
|
+
&[data-align='end'],
|
74
|
+
&[data-align-narrow='end'] {
|
75
|
+
align-items: flex-end;
|
76
|
+
}
|
77
|
+
|
78
|
+
&[data-align='baseline'],
|
79
|
+
&[data-align-narrow='baseline'] {
|
80
|
+
align-items: baseline;
|
81
|
+
}
|
82
|
+
|
83
|
+
&[data-justify='start'],
|
84
|
+
&[data-justify-narrow='start'] {
|
85
|
+
justify-content: flex-start;
|
86
|
+
}
|
87
|
+
|
88
|
+
&[data-justify='center'],
|
89
|
+
&[data-justify-narrow='center'] {
|
90
|
+
justify-content: center;
|
91
|
+
}
|
92
|
+
|
93
|
+
&[data-justify='end'],
|
94
|
+
&[data-justify-narrow='end'] {
|
95
|
+
justify-content: flex-end;
|
96
|
+
}
|
97
|
+
|
98
|
+
&[data-justify='space-between'],
|
99
|
+
&[data-justify-narrow='space-between'] {
|
100
|
+
justify-content: space-between;
|
101
|
+
}
|
102
|
+
|
103
|
+
&[data-justify='space-evenly'],
|
104
|
+
&[data-justify-narrow='space-evenly'] {
|
105
|
+
justify-content: space-evenly;
|
106
|
+
}
|
107
|
+
|
108
|
+
&[data-wrap='wrap'],
|
109
|
+
&[data-wrap-narrow='wrap'] {
|
110
|
+
flex-wrap: wrap;
|
111
|
+
}
|
112
|
+
|
113
|
+
&[data-wrap='nowrap'],
|
114
|
+
&[data-wrap-narrow='nowrap'] {
|
115
|
+
flex-wrap: nowrap;
|
116
|
+
}
|
117
|
+
|
118
|
+
/* @custom-media --veiwportRange-regular */
|
119
|
+
@media (min-width: 48rem) {
|
120
|
+
&[data-padding-regular='none'] {
|
121
|
+
padding: 0;
|
122
|
+
}
|
123
|
+
|
124
|
+
&[data-padding-regular='condensed'] {
|
125
|
+
/* stylelint-disable-next-line primer/spacing */
|
126
|
+
padding: var(--stack-padding-condensed, 8px);
|
127
|
+
}
|
128
|
+
|
129
|
+
&[data-padding-regular='normal'] {
|
130
|
+
/* stylelint-disable-next-line primer/spacing */
|
131
|
+
padding: var(--stack-padding-normal, 16px);
|
132
|
+
}
|
133
|
+
|
134
|
+
&[data-padding-regular='spacious'] {
|
135
|
+
/* stylelint-disable-next-line primer/spacing */
|
136
|
+
padding: var(--stack-padding-spacious, 24px);
|
137
|
+
}
|
138
|
+
|
139
|
+
&[data-direction-regular='horizontal'] {
|
140
|
+
flex-flow: row;
|
141
|
+
}
|
142
|
+
|
143
|
+
&[data-direction-regular='vertical'] {
|
144
|
+
flex-flow: column;
|
145
|
+
}
|
146
|
+
|
147
|
+
&[data-gap-regular='none'] {
|
148
|
+
--stack-gap: var(--stack-gap-none, 0);
|
149
|
+
}
|
150
|
+
|
151
|
+
&[data-gap-regular='condensed'] {
|
152
|
+
--stack-gap: var(--stack-gap-condensed, 0.5rem);
|
153
|
+
}
|
154
|
+
|
155
|
+
&[data-gap-regular='normal'] {
|
156
|
+
--stack-gap: var(--stack-gap-normal, 1rem);
|
157
|
+
}
|
158
|
+
|
159
|
+
&[data-gap-regular='spacious'] {
|
160
|
+
--stack-gap: var(--stack-gap-spacious, 1.5rem);
|
161
|
+
}
|
162
|
+
|
163
|
+
&[data-align-regular='start'] {
|
164
|
+
align-items: flex-start;
|
165
|
+
}
|
166
|
+
|
167
|
+
&[data-align-regular='center'] {
|
168
|
+
align-items: center;
|
169
|
+
}
|
170
|
+
|
171
|
+
&[data-align-regular='end'] {
|
172
|
+
align-items: flex-end;
|
173
|
+
}
|
174
|
+
|
175
|
+
&[data-align-regular='baseline'] {
|
176
|
+
align-items: baseline;
|
177
|
+
}
|
178
|
+
|
179
|
+
&[data-justify-regular='start'] {
|
180
|
+
justify-content: flex-start;
|
181
|
+
}
|
182
|
+
|
183
|
+
&[data-justify-regular='center'] {
|
184
|
+
justify-content: center;
|
185
|
+
}
|
186
|
+
|
187
|
+
&[data-justify-regular='end'] {
|
188
|
+
justify-content: flex-end;
|
189
|
+
}
|
190
|
+
|
191
|
+
&[data-justify-regular='space-between'] {
|
192
|
+
justify-content: space-between;
|
193
|
+
}
|
194
|
+
|
195
|
+
&[data-justify-regular='space-evenly'] {
|
196
|
+
justify-content: space-evenly;
|
197
|
+
}
|
198
|
+
|
199
|
+
&[data-wrap-regular='wrap'] {
|
200
|
+
flex-wrap: wrap;
|
201
|
+
}
|
202
|
+
|
203
|
+
&[data-wrap-regular='nowrap'] {
|
204
|
+
flex-wrap: nowrap;
|
205
|
+
}
|
206
|
+
}
|
207
|
+
|
208
|
+
/* @custom-media --viewportRange-wide */
|
209
|
+
@media (min-width: 87.5rem) {
|
210
|
+
&[data-padding-wide='none'] {
|
211
|
+
padding: 0;
|
212
|
+
}
|
213
|
+
|
214
|
+
&[data-padding-wide='condensed'] {
|
215
|
+
/* stylelint-disable-next-line primer/spacing */
|
216
|
+
padding: var(--stack-padding-condensed, 8px);
|
217
|
+
}
|
218
|
+
|
219
|
+
&[data-padding-wide='normal'] {
|
220
|
+
/* stylelint-disable-next-line primer/spacing */
|
221
|
+
padding: var(--stack-padding-normal, 16px);
|
222
|
+
}
|
223
|
+
|
224
|
+
&[data-padding-wide='spacious'] {
|
225
|
+
/* stylelint-disable-next-line primer/spacing */
|
226
|
+
padding: var(--stack-padding-spacious, 24px);
|
227
|
+
}
|
228
|
+
|
229
|
+
&[data-direction-wide='horizontal'] {
|
230
|
+
flex-flow: row;
|
231
|
+
}
|
232
|
+
|
233
|
+
&[data-direction-wide='vertical'] {
|
234
|
+
flex-flow: column;
|
235
|
+
}
|
236
|
+
|
237
|
+
&[data-gap-wide='none'] {
|
238
|
+
--stack-gap: var(--stack-gap-none, 0);
|
239
|
+
}
|
240
|
+
|
241
|
+
&[data-gap-wide='condensed'] {
|
242
|
+
--stack-gap: var(--stack-gap-condensed, 0.5rem);
|
243
|
+
}
|
244
|
+
|
245
|
+
&[data-gap-wide='normal'] {
|
246
|
+
--stack-gap: var(--stack-gap-normal, 1rem);
|
247
|
+
}
|
248
|
+
|
249
|
+
&[data-gap-wide='spacious'] {
|
250
|
+
--stack-gap: var(--stack-gap-spacious, 1.5rem);
|
251
|
+
}
|
252
|
+
|
253
|
+
&[data-align-wide='start'] {
|
254
|
+
align-items: flex-start;
|
255
|
+
}
|
256
|
+
|
257
|
+
&[data-align-wide='center'] {
|
258
|
+
align-items: center;
|
259
|
+
}
|
260
|
+
|
261
|
+
&[data-align-wide='end'] {
|
262
|
+
align-items: flex-end;
|
263
|
+
}
|
264
|
+
|
265
|
+
&[data-align-wide='baseline'] {
|
266
|
+
align-items: baseline;
|
267
|
+
}
|
268
|
+
|
269
|
+
&[data-justify-wide='start'] {
|
270
|
+
justify-content: flex-start;
|
271
|
+
}
|
272
|
+
|
273
|
+
&[data-justify-wide='center'] {
|
274
|
+
justify-content: center;
|
275
|
+
}
|
276
|
+
|
277
|
+
&[data-justify-wide='end'] {
|
278
|
+
justify-content: flex-end;
|
279
|
+
}
|
280
|
+
|
281
|
+
&[data-justify-wide='space-between'] {
|
282
|
+
justify-content: space-between;
|
283
|
+
}
|
284
|
+
|
285
|
+
&[data-justify-wide='space-evenly'] {
|
286
|
+
justify-content: space-evenly;
|
287
|
+
}
|
288
|
+
|
289
|
+
&[data-wrap-wide='wrap'] {
|
290
|
+
flex-wrap: wrap;
|
291
|
+
}
|
292
|
+
|
293
|
+
&[data-wrap-wide='nowrap'] {
|
294
|
+
flex-wrap: nowrap;
|
295
|
+
}
|
296
|
+
}
|
297
|
+
}
|
@@ -0,0 +1,185 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
# Stack is a layout component that creates responsive horizontal and vertical flows.
|
6
|
+
class Stack < Primer::Component
|
7
|
+
DEFAULT_TAG = :div
|
8
|
+
|
9
|
+
# Stack's justify argument. Used internally.
|
10
|
+
class JustifyArg < Primer::ResponsiveArg
|
11
|
+
attr_reader :values
|
12
|
+
DEFAULT = :start
|
13
|
+
MAPPING = {
|
14
|
+
DEFAULT => "start",
|
15
|
+
:center => "center",
|
16
|
+
:end => "end",
|
17
|
+
:space_between => "space-between",
|
18
|
+
:space_evenly => "space-evenly"
|
19
|
+
}.freeze
|
20
|
+
OPTIONS = [nil, *MAPPING.keys.freeze]
|
21
|
+
|
22
|
+
def initialize(values)
|
23
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT) do |value|
|
24
|
+
MAPPING[value]
|
25
|
+
end
|
26
|
+
end
|
27
|
+
|
28
|
+
def self.arg_name
|
29
|
+
:justify
|
30
|
+
end
|
31
|
+
end
|
32
|
+
|
33
|
+
# Stack's direction argument. Used internally.
|
34
|
+
class DirectionArg < Primer::ResponsiveArg
|
35
|
+
attr_reader :values
|
36
|
+
DEFAULT = :vertical
|
37
|
+
OPTIONS = [
|
38
|
+
nil,
|
39
|
+
DEFAULT,
|
40
|
+
:horizontal
|
41
|
+
].freeze
|
42
|
+
|
43
|
+
def initialize(values)
|
44
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
|
45
|
+
end
|
46
|
+
|
47
|
+
def self.arg_name
|
48
|
+
:direction
|
49
|
+
end
|
50
|
+
end
|
51
|
+
|
52
|
+
# Stack's align argument. Used internally.
|
53
|
+
class AlignArg < Primer::ResponsiveArg
|
54
|
+
attr_reader :values
|
55
|
+
DEFAULT = :stretch
|
56
|
+
OPTIONS = [
|
57
|
+
nil,
|
58
|
+
DEFAULT,
|
59
|
+
:start,
|
60
|
+
:center,
|
61
|
+
:end,
|
62
|
+
:baseline
|
63
|
+
].freeze
|
64
|
+
|
65
|
+
def initialize(values)
|
66
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
|
67
|
+
end
|
68
|
+
|
69
|
+
def self.arg_name
|
70
|
+
:align
|
71
|
+
end
|
72
|
+
end
|
73
|
+
|
74
|
+
# Stack's wrap argument. Used internally.
|
75
|
+
class WrapArg < Primer::ResponsiveArg
|
76
|
+
attr_reader :values
|
77
|
+
DEFAULT = :nowrap
|
78
|
+
OPTIONS = [
|
79
|
+
nil,
|
80
|
+
DEFAULT,
|
81
|
+
:wrap
|
82
|
+
].freeze
|
83
|
+
|
84
|
+
def initialize(values)
|
85
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
|
86
|
+
end
|
87
|
+
|
88
|
+
def self.arg_name
|
89
|
+
:wrap
|
90
|
+
end
|
91
|
+
end
|
92
|
+
|
93
|
+
# Stack's padding argument. Used internally.
|
94
|
+
class PaddingArg < Primer::ResponsiveArg
|
95
|
+
attr_reader :values
|
96
|
+
DEFAULT = :none
|
97
|
+
OPTIONS = [
|
98
|
+
nil,
|
99
|
+
DEFAULT,
|
100
|
+
:condensed,
|
101
|
+
:normal,
|
102
|
+
:spacious
|
103
|
+
].freeze
|
104
|
+
|
105
|
+
def initialize(values)
|
106
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
|
107
|
+
end
|
108
|
+
|
109
|
+
def self.arg_name
|
110
|
+
:padding
|
111
|
+
end
|
112
|
+
end
|
113
|
+
|
114
|
+
# Stack's gap argument. Used internally.
|
115
|
+
class GapArg < Primer::ResponsiveArg
|
116
|
+
attr_reader :values
|
117
|
+
DEFAULT = nil
|
118
|
+
OPTIONS = [
|
119
|
+
DEFAULT,
|
120
|
+
:condensed,
|
121
|
+
:normal,
|
122
|
+
:spacious
|
123
|
+
].freeze
|
124
|
+
|
125
|
+
def initialize(values)
|
126
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
|
127
|
+
end
|
128
|
+
|
129
|
+
def self.arg_name
|
130
|
+
:gap
|
131
|
+
end
|
132
|
+
end
|
133
|
+
|
134
|
+
ARG_CLASSES = [
|
135
|
+
JustifyArg,
|
136
|
+
DirectionArg,
|
137
|
+
AlignArg,
|
138
|
+
WrapArg,
|
139
|
+
PaddingArg,
|
140
|
+
GapArg
|
141
|
+
].freeze
|
142
|
+
|
143
|
+
|
144
|
+
# @param tag [Symbol] Customize the element type of the rendered container.
|
145
|
+
# @param gap [Symbol] Specify the gap between children elements in the stack. <%= one_of(Primer::Alpha::Stack::GapArg::OPTIONS) %>
|
146
|
+
# @param direction [Symbol] Specify the direction for the stack container. <%= one_of(Primer::Alpha::Stack::DirectionArg::OPTIONS) %>
|
147
|
+
# @param align [Symbol] Specify the alignment between items in the cross-axis of the direction. <%= one_of(Primer::Alpha::Stack::AlignArg::OPTIONS) %>
|
148
|
+
# @param wrap [Symbol] Specify whether items are forced onto one line or can wrap onto multiple lines. <%= one_of(Primer::Alpha::Stack::WrapArg::OPTIONS) %>
|
149
|
+
# @param justify [Symbol] Specify how items will be distributed in the stacking direction. <%= one_of(Primer::Alpha::Stack::JustifyArg::OPTIONS) %>
|
150
|
+
# @param padding [Symbol] Specify the padding of the stack container. <%= one_of(Primer::Alpha::Stack::PaddingArg::OPTIONS) %>
|
151
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
152
|
+
def initialize(
|
153
|
+
tag: DEFAULT_TAG,
|
154
|
+
justify: JustifyArg::DEFAULT,
|
155
|
+
gap: GapArg::DEFAULT,
|
156
|
+
direction: DirectionArg::DEFAULT,
|
157
|
+
align: AlignArg::DEFAULT,
|
158
|
+
wrap: WrapArg::DEFAULT,
|
159
|
+
padding: PaddingArg::DEFAULT,
|
160
|
+
**system_arguments
|
161
|
+
)
|
162
|
+
@system_arguments = system_arguments
|
163
|
+
|
164
|
+
@system_arguments[:tag] = tag
|
165
|
+
@system_arguments[:classes] = class_names(
|
166
|
+
@system_arguments.delete(:classes),
|
167
|
+
"Stack"
|
168
|
+
)
|
169
|
+
|
170
|
+
@system_arguments[:data] = merge_data(
|
171
|
+
@system_arguments, {
|
172
|
+
data: {
|
173
|
+
**JustifyArg.for(justify).to_data_attributes,
|
174
|
+
**GapArg.for(gap).to_data_attributes,
|
175
|
+
**DirectionArg.for(direction).to_data_attributes,
|
176
|
+
**AlignArg.for(align).to_data_attributes,
|
177
|
+
**WrapArg.for(wrap).to_data_attributes,
|
178
|
+
**PaddingArg.for(padding).to_data_attributes,
|
179
|
+
}
|
180
|
+
}
|
181
|
+
)
|
182
|
+
end
|
183
|
+
end
|
184
|
+
end
|
185
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
.StackItem{flex:0 1 auto;min-inline-size:0}.StackItem[data-grow-narrow=true],.StackItem[data-grow=true]{flex-grow:1}@media (min-width:48rem){.StackItem[data-grow-regular=true]{flex-grow:1}.StackItem[data-grow-regular=false]{flex-grow:0}}@media (min-width:87.5rem){.StackItem[data-grow-wide=true]{flex-grow:1}.StackItem[data-grow-wide=false]{flex-grow:0}}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
{
|
2
|
+
"name": "alpha/stack_item",
|
3
|
+
"selectors": [
|
4
|
+
".StackItem",
|
5
|
+
".StackItem[data-grow-narrow=true]",
|
6
|
+
".StackItem[data-grow=true]",
|
7
|
+
".StackItem[data-grow-regular=true]",
|
8
|
+
".StackItem[data-grow-regular=false]",
|
9
|
+
".StackItem[data-grow-wide=true]",
|
10
|
+
".StackItem[data-grow-wide=false]"
|
11
|
+
]
|
12
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["stack_item.pcss"],"names":[],"mappings":"AAAA,WACE,aAAc,CACd,iBA4BF,CA1BE,6DAEE,WACF,CAGA,yBACE,mCACE,WACF,CAEA,oCACE,WACF,CACF,CAGA,2BACE,gCACE,WACF,CAEA,iCACE,WACF,CACF","file":"stack_item.css","sourcesContent":[".StackItem {\n flex: 0 1 auto;\n min-inline-size: 0;\n\n &[data-grow='true'],\n &[data-grow-narrow='true'] {\n flex-grow: 1;\n }\n\n /* @custom-media --veiwportRange-regular */\n @media (min-width: 48rem) {\n &[data-grow-regular='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-regular='false'] {\n flex-grow: 0;\n }\n }\n\n /* @custom-media --viewportRange-wide */\n @media (min-width: 87.5rem) {\n &[data-grow-wide='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-wide='false'] {\n flex-grow: 0;\n }\n }\n}\n"]}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
.StackItem {
|
2
|
+
flex: 0 1 auto;
|
3
|
+
min-inline-size: 0;
|
4
|
+
|
5
|
+
&[data-grow='true'],
|
6
|
+
&[data-grow-narrow='true'] {
|
7
|
+
flex-grow: 1;
|
8
|
+
}
|
9
|
+
|
10
|
+
/* @custom-media --veiwportRange-regular */
|
11
|
+
@media (min-width: 48rem) {
|
12
|
+
&[data-grow-regular='true'] {
|
13
|
+
flex-grow: 1;
|
14
|
+
}
|
15
|
+
|
16
|
+
&[data-grow-regular='false'] {
|
17
|
+
flex-grow: 0;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
/* @custom-media --viewportRange-wide */
|
22
|
+
@media (min-width: 87.5rem) {
|
23
|
+
&[data-grow-wide='true'] {
|
24
|
+
flex-grow: 1;
|
25
|
+
}
|
26
|
+
|
27
|
+
&[data-grow-wide='false'] {
|
28
|
+
flex-grow: 0;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
# StackItem is a layout component designed to be used as the child of a Stack.
|
6
|
+
class StackItem < Primer::Component
|
7
|
+
DEFAULT_TAG = :div
|
8
|
+
|
9
|
+
# StackItem's grow argument. Used internally.
|
10
|
+
class GrowArg < Primer::ResponsiveArg
|
11
|
+
attr_reader :values
|
12
|
+
DEFAULT = false
|
13
|
+
OPTIONS = [
|
14
|
+
nil,
|
15
|
+
DEFAULT,
|
16
|
+
true
|
17
|
+
].freeze
|
18
|
+
|
19
|
+
def initialize(values)
|
20
|
+
@values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
|
21
|
+
end
|
22
|
+
|
23
|
+
def self.arg_name
|
24
|
+
:grow
|
25
|
+
end
|
26
|
+
end
|
27
|
+
|
28
|
+
ARG_CLASSES = [GrowArg].freeze
|
29
|
+
|
30
|
+
# @param tag [Symbol] Customize the element type of the rendered container.
|
31
|
+
# @param grow [Boolean] Allow item to keep size or expand to fill the available space.
|
32
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
33
|
+
def initialize(tag: DEFAULT_TAG, grow: false, **system_arguments)
|
34
|
+
@tag = tag
|
35
|
+
@grow = grow
|
36
|
+
@system_arguments = system_arguments
|
37
|
+
@system_arguments[:tag] = tag
|
38
|
+
|
39
|
+
@system_arguments[:classes] = class_names(
|
40
|
+
@system_arguments.delete(:classes),
|
41
|
+
"StackItem"
|
42
|
+
)
|
43
|
+
|
44
|
+
@system_arguments[:data] = merge_data(
|
45
|
+
@system_arguments, {
|
46
|
+
data: {
|
47
|
+
**GrowArg.for(grow).to_data_attributes
|
48
|
+
}
|
49
|
+
}
|
50
|
+
)
|
51
|
+
end
|
52
|
+
end
|
53
|
+
end
|
54
|
+
end
|
@@ -1 +1 @@
|
|
1
|
-
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:
|
1
|
+
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,
|
1
|
+
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eACF,CAEA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CACrB,aAAc,CAGd,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n display: flex;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n overflow: hidden;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: 23px;\n color: var(--fgColor-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default); /* cover bottom border */\n border-color: var(--borderColor-default);\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--fgColor-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--fgColor-muted);\n }\n\n & .octicon {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n & .Counter {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--control-small-gap);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n /* stylelint-disable-next-line primer/spacing */\n padding-top: 10px;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: 10px;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n\n & > .octicon {\n margin-right: var(--base-size-2);\n }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
|
@@ -3,12 +3,14 @@
|
|
3
3
|
/* Outer wrapper */
|
4
4
|
.tabnav {
|
5
5
|
margin-top: 0;
|
6
|
+
/* stylelint-disable-next-line primer/spacing */
|
6
7
|
margin-bottom: var(--stack-gap-normal);
|
7
8
|
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
|
8
9
|
}
|
9
10
|
|
10
11
|
.tabnav-tabs {
|
11
12
|
display: flex;
|
13
|
+
/* stylelint-disable-next-line primer/spacing */
|
12
14
|
margin-bottom: calc(var(--borderWidth-thin) * -1);
|
13
15
|
overflow: hidden;
|
14
16
|
}
|
@@ -16,8 +18,10 @@
|
|
16
18
|
.tabnav-tab {
|
17
19
|
display: inline-block;
|
18
20
|
flex-shrink: 0;
|
21
|
+
/* stylelint-disable-next-line primer/spacing */
|
19
22
|
padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
|
20
23
|
font-size: var(--text-body-size-medium);
|
24
|
+
/* stylelint-disable-next-line primer/typography */
|
21
25
|
line-height: 23px;
|
22
26
|
color: var(--fgColor-muted);
|
23
27
|
text-decoration: none;
|
@@ -56,11 +60,13 @@
|
|
56
60
|
}
|
57
61
|
|
58
62
|
& .octicon {
|
63
|
+
/* stylelint-disable-next-line primer/spacing */
|
59
64
|
margin-right: var(--control-small-gap);
|
60
65
|
color: var(--fgColor-muted);
|
61
66
|
}
|
62
67
|
|
63
68
|
& .Counter {
|
69
|
+
/* stylelint-disable-next-line primer/spacing */
|
64
70
|
margin-left: var(--control-small-gap);
|
65
71
|
color: inherit;
|
66
72
|
}
|
@@ -73,18 +79,20 @@
|
|
73
79
|
|
74
80
|
.tabnav-extra {
|
75
81
|
display: inline-block;
|
82
|
+
/* stylelint-disable-next-line primer/spacing */
|
76
83
|
padding-top: 10px;
|
84
|
+
/* stylelint-disable-next-line primer/spacing */
|
77
85
|
margin-left: 10px;
|
78
86
|
font-size: var(--text-body-size-small);
|
79
87
|
color: var(--fgColor-muted);
|
80
88
|
|
81
89
|
& > .octicon {
|
82
|
-
margin-right:
|
90
|
+
margin-right: var(--base-size-2);
|
83
91
|
}
|
84
92
|
}
|
85
93
|
|
86
|
-
/* When tabnav-extra are anchors
|
87
|
-
|
94
|
+
/* When tabnav-extra are anchors */
|
95
|
+
/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
|
88
96
|
a.tabnav-extra:hover {
|
89
97
|
color: var(--fgColor-accent);
|
90
98
|
text-decoration: none;
|
@@ -96,5 +104,6 @@ a.tabnav-extra:hover {
|
|
96
104
|
** the buttons to be floated or inline-block. */
|
97
105
|
|
98
106
|
.tabnav-btn {
|
107
|
+
/* stylelint-disable-next-line primer/spacing */
|
99
108
|
margin-left: var(--controlStack-medium-gap-condensed);
|
100
109
|
}
|