primer_view_components 0.33.0 → 0.35.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 +67 -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.css +1 -0
- data/app/components/primer/alpha/select_panel.css.json +7 -0
- data/app/components/primer/alpha/select_panel.css.map +1 -0
- data/app/components/primer/alpha/select_panel.html.erb +21 -17
- data/app/components/primer/alpha/select_panel.pcss +7 -0
- data/app/components/primer/alpha/select_panel.rb +69 -5
- data/app/components/primer/alpha/select_panel_element.js +15 -9
- data/app/components/primer/alpha/select_panel_element.ts +16 -9
- 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 +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +7 -4
- 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/component.rb +4 -0
- data/app/components/primer/dialog_helper.js +0 -1
- data/app/components/primer/dialog_helper.ts +0 -1
- data/app/components/primer/primer.d.ts +3 -4
- data/app/components/primer/primer.js +3 -4
- data/app/components/primer/primer.pcss +6 -3
- 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/primer_text_field.js +1 -0
- data/{lib → app/lib}/primer/forms/primer_text_field.ts +1 -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 +1 -1
- data/lib/primer/yard/component_manifest.rb +0 -1
- data/lib/rubocop/cop/primer/primer_octicon.rb +1 -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/list_of_links.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +2 -1
- 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 +47 -9
- 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/static/arguments.json +112 -30
- data/static/audited_at.json +2 -1
- data/static/classes.json +12 -0
- data/static/constants.json +155 -8
- data/static/info_arch.json +248 -98
- data/static/previews.json +107 -47
- data/static/statuses.json +2 -1
- metadata +138 -117
- 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/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/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
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.ToggleSwitch-track[aria-pressed='true'][disabled] {
|
|
74
|
-
background-color: var(--controlTrack-bgColor-disabled);
|
|
75
74
|
color: var(--control-checked-fgColor-disabled);
|
|
75
|
+
background-color: var(--controlTrack-bgColor-disabled);
|
|
76
76
|
border-color: transparent;
|
|
77
77
|
}
|
|
78
78
|
|
|
@@ -134,6 +134,7 @@
|
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
.ToggleSwitch-lineIcon {
|
|
137
|
+
/* stylelint-disable-next-line primer/typography */
|
|
137
138
|
line-height: 0;
|
|
138
139
|
color: var(--control-checked-fgColor-rest);
|
|
139
140
|
transition-duration: 80ms;
|
|
@@ -143,6 +144,7 @@
|
|
|
143
144
|
}
|
|
144
145
|
|
|
145
146
|
.ToggleSwitch-circleIcon {
|
|
147
|
+
/* stylelint-disable-next-line primer/typography */
|
|
146
148
|
line-height: 0;
|
|
147
149
|
color: var(--controlTrack-fgColor-rest);
|
|
148
150
|
transition-duration: 80ms;
|
|
@@ -173,14 +175,15 @@
|
|
|
173
175
|
.ToggleSwitch-status {
|
|
174
176
|
position: relative;
|
|
175
177
|
font-size: var(--text-body-size-medium);
|
|
176
|
-
line-height:
|
|
178
|
+
line-height: var(--text-title-lineHeight-large);
|
|
177
179
|
color: var(--fgColor-default);
|
|
178
180
|
text-align: right;
|
|
179
181
|
}
|
|
180
182
|
|
|
181
183
|
.ToggleSwitch-statusIcon {
|
|
182
|
-
width: var(--base-size-16);
|
|
183
184
|
display: flex;
|
|
185
|
+
width: var(--base-size-16);
|
|
186
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
184
187
|
margin-top: 0.063rem;
|
|
185
188
|
}
|
|
186
189
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}:is(.UnderlineNav-item:before){content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);bottom:calc(50% -
|
|
1
|
+
.UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}:is(.UnderlineNav-item:before){content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);bottom:calc(50% - var(--base-size-24));content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.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{color:var(--fgColor-muted);display:inline!important;margin-right:var(--control-medium-gap);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,cAME,kDAAmD,CALnD,YAAa,CACb,8BAA+B,CAC/B,eAAgB,CAChB,iBAAkB,CAGlB,+BAAgC,CAChC,6BAaF,CAXE,uBAIE,wEAA0E,CAD1E,4BAA6B,CAD7B,qCAGF,CAEA,gCAEE,gDAAiD,CADjD,+BAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,6BAA8B,CAC9B,eACF,CAEA,mBAeE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,wCAAyC,CANzC,4BAA6B,CAG7B,cAAe,CATf,YAAa,CAGb,sCAAuC,CAEvC,gBAAiB,CAHjB,uDAAwD,CAHxD,iBAAkB,CAQlB,iBAAkB,CAClB,kBA+DF,CAxDE,mFAKE,oDAAqD,CAFrD,4BAA6B,CAG7B,mBAAoB,CAFpB,4BAAqB,CAArB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,+BCtEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDsE8B,CAI5B,sBACE,yBAGE,mDAAoD,CAFpD,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,0DAA2D,CAD3D,4BAA6B,CAD7B,4CAkBF,CAbE,mJASE,iDAAkD,CAClD,wCAAyC,CAPzC,sCAAuC,CAIvC,UAAW,CADX,UAAW,CALX,iBAAkB,CAClB,SAAU,CASV,6BAA+B,CAN/B,UAAW,CADX,SAQF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,8BACF,CAGF,sBAIE,0BAA2B,CAH3B,wBAA0B,CAE1B,sCAAuC,CAEvC,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 /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/spacing */\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]}
|
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
min-height: var(--base-size-48);
|
|
6
6
|
overflow-x: auto;
|
|
7
7
|
overflow-y: hidden;
|
|
8
|
+
/* stylelint-disable-next-line primer/box-shadow */
|
|
8
9
|
box-shadow: inset 0 -1px 0 var(--borderColor-muted);
|
|
9
10
|
-webkit-overflow-scrolling: auto;
|
|
10
11
|
justify-content: space-between;
|
|
11
12
|
|
|
12
13
|
& .Counter {
|
|
14
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
13
15
|
margin-left: var(--control-medium-gap);
|
|
14
16
|
color: var(--fgColor-default);
|
|
15
17
|
background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
|
|
@@ -31,8 +33,10 @@
|
|
|
31
33
|
.UnderlineNav-item {
|
|
32
34
|
position: relative;
|
|
33
35
|
display: flex;
|
|
36
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
34
37
|
padding: 0 var(--control-medium-paddingInline-condensed);
|
|
35
38
|
font-size: var(--text-body-size-medium);
|
|
39
|
+
/* stylelint-disable-next-line primer/typography */
|
|
36
40
|
line-height: 30px;
|
|
37
41
|
color: var(--fgColor-default);
|
|
38
42
|
text-align: center;
|
|
@@ -87,12 +91,13 @@
|
|
|
87
91
|
/* current/selected underline */
|
|
88
92
|
&::after {
|
|
89
93
|
position: absolute;
|
|
90
|
-
z-index: 1; /* raise above full-width flash banner */
|
|
91
94
|
right: 50%;
|
|
92
|
-
bottom: calc(50% -
|
|
95
|
+
bottom: calc(50% - var(--base-size-24)); /* 48px total height / 2 (24px) + 1px */
|
|
96
|
+
z-index: 1; /* raise above full-width flash banner */
|
|
93
97
|
width: 100%;
|
|
94
98
|
height: 2px;
|
|
95
99
|
content: '';
|
|
100
|
+
/* stylelint-disable-next-line primer/colors */
|
|
96
101
|
background: var(--underlineNav-borderColor-active);
|
|
97
102
|
border-radius: var(--borderRadius-medium);
|
|
98
103
|
transform: translate(50%, -50%);
|
|
@@ -123,6 +128,7 @@
|
|
|
123
128
|
|
|
124
129
|
.UnderlineNav-octicon {
|
|
125
130
|
display: inline !important;
|
|
131
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
126
132
|
margin-right: var(--control-medium-gap);
|
|
127
133
|
color: var(--fgColor-muted);
|
|
128
134
|
fill: var(--fgColor-muted);
|
|
@@ -128,7 +128,7 @@ module Primer
|
|
|
128
128
|
# | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Utilities.mappings(:pb)) %> |
|
|
129
129
|
# | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pl)) %> |
|
|
130
130
|
# | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Utilities.mappings(:pr)) %> |
|
|
131
|
-
# | `pt` | Integer | Padding
|
|
131
|
+
# | `pt` | Integer | Padding top. <%= one_of(Primer::Classify::Utilities.mappings(:pt)) %> |
|
|
132
132
|
# | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Utilities.mappings(:px)) %> |
|
|
133
133
|
# | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Utilities.mappings(:py)) %> |
|
|
134
134
|
#
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.avatar{background-color:var(--avatar-bgColor);border-radius:var(--borderRadius-medium);box-shadow:0 0 0 1px var(--avatar-borderColor);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:
|
|
1
|
+
.avatar{background-color:var(--avatar-bgColor);border-radius:var(--borderRadius-medium);box-shadow:0 0 0 1px var(--avatar-borderColor);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.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{height:var(--base-size-16);width:var(--base-size-16)}.avatar-2{height:var(--base-size-20);width:var(--base-size-20)}.avatar-3{height:var(--base-size-24);width:var(--base-size-24)}.avatar-4{height:var(--base-size-28);width:var(--base-size-28)}.avatar-5{height:var(--base-size-32);width:var(--base-size-32)}.avatar-6{height:var(--base-size-40);width:var(--base-size-40)}.avatar-7{height:var(--base-size-48);width:var(--base-size-48)}.avatar-8{height:var(--base-size-64);width:var(--base-size-64)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAME,sCAAuC,CACvC,wCAAyC,CAGzC,8CAA+C,CAT/C,oBAAqB,CAOrB,aAAc,CAJd,aAAc,CAFd,eAAgB,CAGhB,qBAMF,CAEA,aACE,UAAW,CAEX,aACF,CAGA,mBACE,oBAAqB,CACrB,gCACF,CAIA,kCAGE,uCACF,CAIA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF,CAEA,UAEE,0BAA2B,CAD3B,yBAEF","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"]}
|
|
@@ -3,23 +3,26 @@
|
|
|
3
3
|
.avatar {
|
|
4
4
|
display: inline-block;
|
|
5
5
|
overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
|
|
6
|
+
/* stylelint-disable-next-line primer/typography */
|
|
6
7
|
line-height: 1;
|
|
7
8
|
vertical-align: middle;
|
|
8
9
|
background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */
|
|
9
10
|
border-radius: var(--borderRadius-medium);
|
|
10
11
|
flex-shrink: 0;
|
|
12
|
+
/* stylelint-disable-next-line primer/box-shadow */
|
|
11
13
|
box-shadow: 0 0 0 1px var(--avatar-borderColor);
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
.avatar-link {
|
|
15
17
|
float: left;
|
|
18
|
+
/* stylelint-disable-next-line primer/typography */
|
|
16
19
|
line-height: 1;
|
|
17
20
|
}
|
|
18
21
|
|
|
19
22
|
/* User for example on /stars and /user for grids of avatars */
|
|
20
23
|
.avatar-group-item {
|
|
21
24
|
display: inline-block;
|
|
22
|
-
margin-bottom:
|
|
25
|
+
margin-bottom: var(--base-size-4);
|
|
23
26
|
}
|
|
24
27
|
|
|
25
28
|
/* Border radius */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{border-right:0;z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:
|
|
1
|
+
.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{border-right:0;z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:var(--base-size-4)}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}:is(.AvatarStack--right .AvatarStack-body):hover .avatar{margin-left:var(--base-size-4);margin-right:0}:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child){border-left:0}.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{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin) solid var(--bgColor-default);border-right:0;margin-left:-11px;margin-right:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,
|
|
1
|
+
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,CAElC,mBAAoB,CAHpB,YAwDF,CAnDE,0BASE,uCAAwC,CAGxC,uCAAwC,CADxC,iEAAkE,CAElE,eAAgB,CAPhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAGZ,kBAAmB,CAPnB,iBAAkB,CAalB,iCAAmC,CAVnC,UAAW,CAFX,SAiCF,CAnBE,2CACE,SACF,CAEA,0CAEE,cAAe,CADf,SAEF,CAGA,mCACE,uCACF,CAGA,8CACE,YAAa,CACb,SACF,CAIA,gCACE,+BACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,+BAAgC,CADhC,cAAe,CADf,SAwBF,CApBE,qDAOE,iBAAkB,CAFlB,UAAW,CAFX,aAAc,CACd,WAAY,CAIZ,4DAA6D,CAN7D,iBAOF,CAEA,2BAEE,gDAAiD,CADjD,UAEF,CAEA,0BAEE,kDAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,yDAEE,8BAA+B,CAD/B,cAEF,CAEA,oEACE,aACF,CAGF,wCACE,kDAUF,CARE,oDACE,SACF,CAEA,mDAEE,+BAAgC,CADhC,SAEF,CAGF,4BAME,gEAAiE,CAFjE,cAAe,CADf,iBAAkB,CAFlB,cAMF","file":"avatar_stack.css","sourcesContent":["/* 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 /* stylelint-disable-next-line primer/colors */\n border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n border-radius: var(--borderRadius-small);\n box-shadow: none;\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 border-right: 0;\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\n &:hover {\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\n & .avatar-more {\n display: none !important;\n }\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 .avatar {\n margin-right: 0;\n margin-left: var(--base-size-4);\n }\n\n & .avatar:not(:last-child) {\n border-left: 0;\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 border-right: 0;\n /* stylelint-disable-next-line primer/colors */\n border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n }\n}\n"]}
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
.AvatarStack-body {
|
|
25
25
|
display: flex;
|
|
26
26
|
background: var(--bgColor-default);
|
|
27
|
+
/* stylelint-disable-next-line primer/borders */
|
|
27
28
|
border-radius: 100px;
|
|
28
29
|
|
|
29
30
|
& .avatar {
|
|
@@ -33,8 +34,10 @@
|
|
|
33
34
|
width: 20px;
|
|
34
35
|
height: 20px;
|
|
35
36
|
box-sizing: content-box;
|
|
37
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
36
38
|
margin-right: -11px;
|
|
37
39
|
background-color: var(--bgColor-default);
|
|
40
|
+
/* stylelint-disable-next-line primer/colors */
|
|
38
41
|
border-right: var(--borderWidth-thin) solid var(--bgColor-default);
|
|
39
42
|
border-radius: var(--borderRadius-small);
|
|
40
43
|
box-shadow: none;
|
|
@@ -49,6 +52,7 @@
|
|
|
49
52
|
border-right: 0;
|
|
50
53
|
}
|
|
51
54
|
|
|
55
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
52
56
|
& img {
|
|
53
57
|
border-radius: var(--borderRadius-small);
|
|
54
58
|
}
|
|
@@ -62,7 +66,7 @@
|
|
|
62
66
|
|
|
63
67
|
&:hover {
|
|
64
68
|
& .avatar {
|
|
65
|
-
margin-right:
|
|
69
|
+
margin-right: var(--base-size-4);
|
|
66
70
|
}
|
|
67
71
|
|
|
68
72
|
& .avatar:nth-child(n + 4) {
|
|
@@ -87,6 +91,7 @@
|
|
|
87
91
|
display: block;
|
|
88
92
|
height: 20px;
|
|
89
93
|
content: '';
|
|
94
|
+
/* stylelint-disable-next-line primer/borders */
|
|
90
95
|
border-radius: 2px;
|
|
91
96
|
outline: var(--borderWidth-thin) solid var(--bgColor-default);
|
|
92
97
|
}
|
|
@@ -111,7 +116,7 @@
|
|
|
111
116
|
|
|
112
117
|
&:hover .avatar {
|
|
113
118
|
margin-right: 0;
|
|
114
|
-
margin-left:
|
|
119
|
+
margin-left: var(--base-size-4);
|
|
115
120
|
}
|
|
116
121
|
|
|
117
122
|
& .avatar:not(:last-child) {
|
|
@@ -134,8 +139,10 @@
|
|
|
134
139
|
|
|
135
140
|
& .avatar {
|
|
136
141
|
margin-right: 0;
|
|
142
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
137
143
|
margin-left: -11px;
|
|
138
144
|
border-right: 0;
|
|
145
|
+
/* stylelint-disable-next-line primer/colors */
|
|
139
146
|
border-left: var(--borderWidth-thin) solid var(--bgColor-default);
|
|
140
147
|
}
|
|
141
148
|
}
|
|
@@ -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);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large)}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:
|
|
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);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large)}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4)}.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{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}
|
|
@@ -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,CAItD,oFAAqF,CAFrF,iBAAkB,CAGlB,iBAsBF,CAnBE,cAEE,0BAA2B,CAD3B,qCAEF,CAGA,iBAGE,iCAAkC,CAClC,6DAA8D,CAC9D,wCAAyC,CAHzC,sCAAuC,CADvC,gEAKF,CAGA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAOE,0BAA2B,CAH3B,wCAAyC,CAEzC,oCAAqC,CAJrC,qCAMF,CAEA,kBAEE,qCACF,CAEA,oBAEE,uCAAwC,CACxC,2CAA4C,CAF5C,gCAGF,CAEA,mBAEE,kCAWF,CATE,iCAEE,oCACF,CAEA,gCAEE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAME,sBAEE,WAAY,CADZ,UAEF,CAGA,qBAME,cAAe,CAJf,gCAKF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,oDAAqD,CACrD,qDACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,iBAEE,wCACF,CAEA,oBACE,sCACF,CAGA,cACE,sCACF,CAEA,mBAEE,qCAWF,CATE,iCAEE,kCACF,CAEA,gCAEE,gDACF,CAEJ","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-large);\n color: var(--fgColor-muted);\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 /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-small-gap);\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--stack-gap-condensed);\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--control-small-gap);\n color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n /* stylelint-disable-next-line primer/spacing */\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-medium);\n font-weight: var(--text-title-weight-medium);\n}\n\n.blankslate-action {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--stack-gap-normal);\n\n &:first-of-type {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--stack-gap-spacious);\n }\n\n &:last-of-type {\n /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/spacing */\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\n/* At the time these styles were written,\n `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n .blankslate {\n --blankslate-outer-padding-block: var(--base-size-20);\n --blankslate-outer-padding-inline: var(--base-size-20);\n }\n\n .blankslate-spacious {\n --blankslate-outer-padding-block: var(--base-size-44);\n --blankslate-outer-padding-inline: var(--base-size-28);\n }\n\n .blankslate-icon {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--stack-gap-condensed);\n }\n\n .blankslate-heading {\n font-size: var(--text-title-size-small);\n }\n\n /* stylelint-disable-next-line selector-max-type */\n .blankslate p {\n font-size: var(--text-body-size-medium);\n }\n\n .blankslate-action {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--stack-gap-condensed);\n\n &:first-of-type {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--stack-gap-normal);\n }\n\n &:last-of-type {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: calc(var(--stack-gap-condensed) / 2);\n }\n }\n}\n"]}
|
|
@@ -10,22 +10,26 @@
|
|
|
10
10
|
--blankslate-outer-padding-inline: var(--base-size-32);
|
|
11
11
|
|
|
12
12
|
position: relative;
|
|
13
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
13
14
|
padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
|
|
14
15
|
text-align: center;
|
|
15
16
|
|
|
17
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
16
18
|
& p {
|
|
17
|
-
color: var(--fgColor-muted);
|
|
18
19
|
font-size: var(--text-body-size-large);
|
|
20
|
+
color: var(--fgColor-muted);
|
|
19
21
|
}
|
|
20
22
|
|
|
23
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
21
24
|
& code {
|
|
22
|
-
padding:
|
|
25
|
+
padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);
|
|
23
26
|
font-size: var(--text-body-size-medium);
|
|
24
27
|
background: var(--bgColor-default);
|
|
25
28
|
border: var(--borderWidth-thin) solid var(--borderColor-muted);
|
|
26
29
|
border-radius: var(--borderRadius-medium);
|
|
27
30
|
}
|
|
28
31
|
|
|
32
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
29
33
|
& img {
|
|
30
34
|
width: 56px;
|
|
31
35
|
height: 56px;
|
|
@@ -33,30 +37,37 @@
|
|
|
33
37
|
}
|
|
34
38
|
|
|
35
39
|
.blankslate-icon {
|
|
40
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
36
41
|
margin-right: var(--control-small-gap);
|
|
42
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
37
43
|
margin-bottom: var(--stack-gap-condensed);
|
|
44
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
38
45
|
margin-left: var(--control-small-gap);
|
|
39
46
|
color: var(--fgColor-muted);
|
|
40
47
|
}
|
|
41
48
|
|
|
42
49
|
.blankslate-image {
|
|
50
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
43
51
|
margin-bottom: var(--stack-gap-normal);
|
|
44
52
|
}
|
|
45
53
|
|
|
46
54
|
.blankslate-heading {
|
|
55
|
+
margin-bottom: var(--base-size-4);
|
|
47
56
|
font-size: var(--text-title-size-medium);
|
|
48
57
|
font-weight: var(--text-title-weight-medium);
|
|
49
|
-
margin-bottom: var(--base-size-4);
|
|
50
58
|
}
|
|
51
59
|
|
|
52
60
|
.blankslate-action {
|
|
61
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
53
62
|
margin-top: var(--stack-gap-normal);
|
|
54
63
|
|
|
55
64
|
&:first-of-type {
|
|
65
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
56
66
|
margin-top: var(--stack-gap-spacious);
|
|
57
67
|
}
|
|
58
68
|
|
|
59
69
|
&:last-of-type {
|
|
70
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
60
71
|
margin-bottom: var(--stack-gap-condensed);
|
|
61
72
|
}
|
|
62
73
|
}
|
|
@@ -78,18 +89,23 @@
|
|
|
78
89
|
/* was .large-format
|
|
79
90
|
** QUESTION: should we deprecate this? */
|
|
80
91
|
.blankslate-large {
|
|
92
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
81
93
|
& img {
|
|
82
94
|
width: 80px;
|
|
83
95
|
height: 80px;
|
|
84
96
|
}
|
|
85
97
|
|
|
98
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
86
99
|
& h3 {
|
|
100
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
87
101
|
margin: var(--stack-gap-normal) 0;
|
|
88
102
|
|
|
89
103
|
/* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
|
|
104
|
+
/* stylelint-disable-next-line primer/typography */
|
|
90
105
|
font-size: 24px;
|
|
91
106
|
}
|
|
92
107
|
|
|
108
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
93
109
|
& p {
|
|
94
110
|
font-size: var(--text-body-size-large);
|
|
95
111
|
}
|
|
@@ -115,6 +131,7 @@
|
|
|
115
131
|
}
|
|
116
132
|
|
|
117
133
|
.blankslate-icon {
|
|
134
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
118
135
|
margin-bottom: var(--stack-gap-condensed);
|
|
119
136
|
}
|
|
120
137
|
|
|
@@ -122,18 +139,22 @@
|
|
|
122
139
|
font-size: var(--text-title-size-small);
|
|
123
140
|
}
|
|
124
141
|
|
|
142
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
125
143
|
.blankslate p {
|
|
126
144
|
font-size: var(--text-body-size-medium);
|
|
127
145
|
}
|
|
128
146
|
|
|
129
147
|
.blankslate-action {
|
|
148
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
130
149
|
margin-top: var(--stack-gap-condensed);
|
|
131
150
|
|
|
132
151
|
&:first-of-type {
|
|
152
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
133
153
|
margin-top: var(--stack-gap-normal);
|
|
134
154
|
}
|
|
135
155
|
|
|
136
156
|
&:last-of-type {
|
|
157
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
137
158
|
margin-bottom: calc(var(--stack-gap-condensed) / 2);
|
|
138
159
|
}
|
|
139
160
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin)}.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){line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious)}.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){margin:calc(var(--stack-gap-spacious)*-1)
|
|
1
|
+
.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin)}.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){line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious)}.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){margin:calc(var(--stack-gap-spacious)*-1);padding:var(--stack-padding-spacious)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium);border-width:var(--borderWidth-thin);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;padding:var(--stack-padding-normal)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);padding:var(--stack-padding-normal)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium);margin-bottom:calc(var(--borderWidth-thin)*-1)}.Box-row{border-top:var(--borderWidth-thin) solid var(--borderColor-muted);list-style-type:none;margin-top:calc(var(--borderWidth-thin)*-1);padding:var(--stack-padding-normal)}.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-left-radius:var(--borderRadius-medium);border-bottom-right-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{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium);border-top:var(--borderWidth-thin) solid var(--borderColor-default);margin-top:calc(var(--borderWidth-thin)*-1);padding:var(--stack-padding-normal)}.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{line-height:var(--text-title-lineHeight-large);margin:calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-spacious)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,CAGxC,wCAAyC,CAFzC,kBAAmB,CACnB,oCAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,kEACF,CAGE,kDAGE,gBAAiB,CADjB,wGAA6G,CAD7G,kGAGF,CAGF,yBACE,kEACF,CAIA,2BAEE,gBAAiB,CADjB,qCAEF,CAEA,0BACE,uCACF,CAMA,oDACE,qCACF,CAGE,iDAEE,yCAA4C,CAD5C,qCAEF,CAGF,wBACE,qCACF,CAGF,YAGE,qCAAsC,CACtC,uCAAwC,CACxC,kBAAmB,CAEnB,iDAAkD,CAClD,kDAAmD,CAFnD,oCAAqC,CAJrC,0EAA+E,CAD/E,mCAQF,CAEA,WACE,sCAAuC,CACvC,4CACF,CAEA,UAEE,sEAAuE,CADvE,mCASF,CALE,uBAGE,oDAAqD,CADrD,qDAAsD,CADtD,8CAGF,CAIF,SAME,iEAAyC,CAHzC,oBAAqB,CADrB,2CAA8C,CAD9C,mCAsDF,CA/CE,uBACE,iDAAkD,CAClD,kDACF,CAEA,sBAEE,oDAAqD,CADrD,qDAEF,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,YAME,uEAAwE,CADxE,mEAAyC,CAHzC,2CAA8C,CAD9C,mCAMF,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,6BAGE,8CAA+C,CAD/C,sDAAyD,CADzD,oDAGF","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"]}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/* stylelint-disable primer/spacing */
|
|
2
|
+
/* stylelint-disable primer/typography */
|
|
3
|
+
|
|
1
4
|
/* BorderBox */
|
|
2
5
|
|
|
3
6
|
/* TODO: Rename to BorderBox to match PVC */
|
|
@@ -59,7 +62,7 @@
|
|
|
59
62
|
& .Box-btn-octicon {
|
|
60
63
|
&.btn-octicon {
|
|
61
64
|
padding: var(--stack-padding-spacious);
|
|
62
|
-
margin: calc(var(--stack-gap-spacious) * -1)
|
|
65
|
+
margin: calc(var(--stack-gap-spacious) * -1);
|
|
63
66
|
}
|
|
64
67
|
}
|
|
65
68
|
|
|
@@ -120,6 +123,7 @@
|
|
|
120
123
|
&.Box-row--unread,
|
|
121
124
|
/* .unread to be deprecated with .Box-row-unread */
|
|
122
125
|
&.unread {
|
|
126
|
+
/* stylelint-disable-next-line primer/box-shadow */
|
|
123
127
|
box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
|
|
124
128
|
}
|
|
125
129
|
|
|
@@ -277,8 +281,8 @@
|
|
|
277
281
|
.Box-btn-octicon {
|
|
278
282
|
/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
|
|
279
283
|
&.btn-octicon {
|
|
280
|
-
padding: var(--control-medium-paddingInline-spacious)
|
|
281
|
-
margin: calc(var(--controlStack-small-gap-spacious) * -1)
|
|
282
|
-
line-height:
|
|
284
|
+
padding: var(--control-medium-paddingInline-spacious);
|
|
285
|
+
margin: calc(var(--controlStack-small-gap-spacious) * -1);
|
|
286
|
+
line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */
|
|
283
287
|
}
|
|
284
288
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,
|
|
1
|
+
{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CADhB,kBAiBF,CAdE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,aAAe,CAIf,2CACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -0.35em;\n list-style: none;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n /* stylelint-disable-next-line primer/spacing */\n margin: 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 &:first-child {\n margin-left: 0;\n }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n &::after {\n content: none;\n }\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}\n"]}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
.breadcrumb-item {
|
|
2
2
|
display: inline-block;
|
|
3
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
3
4
|
margin-left: -0.35em;
|
|
4
5
|
list-style: none;
|
|
5
6
|
|
|
6
7
|
&::after {
|
|
7
8
|
display: inline-block;
|
|
8
9
|
height: 0.8em;
|
|
10
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
9
11
|
margin: 0 0.5em;
|
|
10
12
|
content: '';
|
|
13
|
+
/* stylelint-disable-next-line primer/borders */
|
|
11
14
|
border-right: 0.1em solid var(--borderColor-neutral-emphasis);
|
|
12
15
|
transform: rotate(15deg) translateY(0.0625em);
|
|
13
16
|
}
|
|
@@ -24,8 +27,9 @@
|
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
29
|
|
|
30
|
+
/* stylelint-disable-next-line selector-max-type */
|
|
27
31
|
.breadcrumb-item-selected a {
|
|
28
32
|
color: var(--fgColor-default);
|
|
29
|
-
cursor: default !important;
|
|
30
33
|
text-decoration: none !important;
|
|
34
|
+
cursor: default !important;
|
|
31
35
|
}
|