primer_view_components 0.0.113 → 0.0.115
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +44 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/divider.rb +2 -0
- data/app/components/primer/alpha/action_list/heading.rb +2 -0
- data/app/components/primer/alpha/action_list/item.rb +8 -6
- data/app/components/primer/alpha/action_list.rb +1 -0
- data/app/components/primer/alpha/auto_complete/auto_complete.html.erb +1 -1
- data/app/components/primer/alpha/auto_complete/item.rb +1 -0
- data/app/components/primer/alpha/auto_complete.rb +3 -2
- data/app/components/primer/alpha/banner.html.erb +1 -1
- data/app/components/primer/alpha/banner.rb +1 -0
- data/app/components/primer/alpha/button_marketing.rb +2 -0
- data/app/components/primer/alpha/dialog.rb +3 -0
- data/app/components/primer/alpha/image.rb +1 -0
- data/app/components/primer/alpha/image_crop.html.erb +1 -1
- data/app/components/primer/alpha/layout.css +1 -0
- data/app/components/primer/alpha/layout.css.json +1 -0
- data/app/components/primer/alpha/layout.css.map +1 -0
- data/app/components/primer/alpha/layout.pcss +268 -0
- data/app/components/primer/{menu_component.css → alpha/menu.css} +0 -0
- data/app/components/primer/alpha/menu.css.json +1 -0
- data/app/components/primer/alpha/menu.css.map +1 -0
- data/app/components/primer/{menu_component.html.erb → alpha/menu.html.erb} +0 -0
- data/app/components/primer/{menu_component.pcss → alpha/menu.pcss} +0 -0
- data/app/components/primer/alpha/menu.rb +76 -0
- data/app/components/primer/{octicon_symbols_component.html.erb → alpha/octicon_symbols.html.erb} +0 -0
- data/app/components/primer/alpha/octicon_symbols.rb +61 -0
- data/app/components/primer/alpha/text_field.rb +1 -0
- data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
- data/app/components/primer/alpha/toggle_switch.rb +2 -0
- data/app/components/primer/alpha/tool_tip.js +77 -69
- data/app/components/primer/alpha/tool_tip.ts +63 -51
- data/app/components/primer/alpha/tooltip.rb +2 -0
- data/app/components/primer/beta/auto_complete/item.rb +4 -4
- data/app/components/primer/beta/auto_complete.rb +3 -3
- data/app/components/primer/beta/avatar.rb +1 -0
- data/app/components/primer/beta/base_button.rb +1 -0
- data/app/components/primer/beta/blankslate.rb +5 -5
- data/app/components/primer/beta/button.rb +7 -7
- data/app/components/primer/beta/clipboard_copy.html.erb +2 -2
- data/app/components/primer/beta/clipboard_copy.rb +1 -0
- data/app/components/primer/beta/close_button.rb +2 -1
- data/app/components/primer/beta/counter.rb +1 -0
- data/app/components/primer/beta/heading.rb +1 -0
- data/app/components/primer/beta/icon_button.html.erb +1 -1
- data/app/components/primer/beta/icon_button.rb +1 -0
- data/app/components/primer/beta/label.rb +1 -0
- data/app/components/primer/beta/markdown.rb +291 -0
- data/app/components/primer/{octicon_component.html.erb → beta/octicon.html.erb} +0 -0
- data/app/components/primer/beta/octicon.rb +88 -0
- data/app/components/primer/beta/relative_time.rb +2 -1
- data/app/components/primer/{spinner_component.html.erb → beta/spinner.html.erb} +0 -0
- data/app/components/primer/beta/spinner.rb +46 -0
- data/app/components/primer/beta/text.rb +1 -0
- data/app/components/primer/blankslate_component.rb +3 -3
- data/app/components/primer/box.rb +1 -0
- data/app/components/primer/button_component.rb +3 -3
- data/app/components/primer/conditional_wrapper.rb +2 -0
- data/app/components/primer/hellip_button.rb +2 -0
- data/app/components/primer/icon_button.html.erb +2 -2
- data/app/components/primer/icon_button.rb +1 -0
- data/app/components/primer/layout_component.rb +2 -0
- data/app/components/primer/local_time.rb +3 -0
- data/app/components/primer/markdown.rb +2 -283
- data/app/components/primer/menu_component.rb +2 -69
- data/app/components/primer/navigation/tab_component.rb +2 -2
- data/app/components/primer/octicon_component.rb +3 -81
- data/app/components/primer/octicon_symbols_component.rb +2 -52
- data/app/components/primer/primer.d.ts +2 -0
- data/app/components/primer/primer.js +2 -0
- data/app/components/primer/primer.pcss +2 -3
- data/app/components/primer/primer.ts +2 -0
- data/app/components/primer/spinner_component.rb +2 -38
- data/app/components/primer/state_component.rb +1 -0
- data/app/components/primer/subhead_component.rb +2 -0
- data/app/components/primer/tab_container_component.rb +2 -0
- data/app/components/primer/time_ago_component.rb +2 -1
- data/app/components/primer/timeline_item_component.rb +3 -2
- data/app/components/primer/tooltip.rb +1 -0
- data/app/components/primer/truncate.rb +2 -0
- data/app/forms/immediate_validation_form.rb +29 -0
- data/app/forms/multi_input_form.rb +4 -2
- data/app/lib/primer/css/layout.css +1 -378
- data/app/lib/primer/css/layout.css.json +1 -1
- data/app/lib/primer/octicon/cache.rb +1 -1
- data/app/lib/primer/view_helper.rb +1 -1
- data/lib/primer/deprecations.yml +30 -0
- data/lib/primer/forms/builder.rb +48 -8
- data/lib/primer/forms/check_box.html.erb +3 -1
- data/lib/primer/forms/dsl/input.rb +23 -1
- data/lib/primer/forms/dsl/multi_input.rb +6 -9
- data/lib/primer/forms/dsl/select_list_input.rb +1 -1
- data/lib/primer/forms/dsl/text_field_input.rb +31 -1
- data/lib/primer/forms/form_control.html.erb +17 -13
- data/lib/primer/forms/form_control.rb +2 -0
- data/lib/primer/forms/multi.html.erb +6 -2
- data/lib/primer/forms/primer_multi_input.d.ts +10 -0
- data/lib/primer/forms/primer_multi_input.js +45 -0
- data/lib/primer/forms/primer_multi_input.ts +46 -0
- data/lib/primer/forms/primer_text_field.d.ts +1 -0
- data/lib/primer/forms/primer_text_field.js +62 -0
- data/lib/primer/forms/primer_text_field.ts +48 -0
- data/lib/primer/forms/radio_button.html.erb +3 -1
- data/lib/primer/forms/text_field.html.erb +8 -8
- data/lib/primer/forms/text_field.rb +11 -0
- data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +6 -6
- data/lib/tasks/helpers/ast_traverser.rb +1 -1
- data/previews/primer/alpha/action_list_preview.rb +1 -1
- data/previews/primer/alpha/auto_complete_preview.rb +62 -6
- data/previews/primer/alpha/layout_preview.rb +179 -6
- data/previews/primer/{menu_component_preview → alpha/menu_preview}/default.html.erb +3 -3
- data/previews/primer/{menu_component_preview → alpha/menu_preview}/playground.html.erb +3 -3
- data/previews/primer/alpha/menu_preview.rb +14 -0
- data/previews/primer/alpha/toggle_switch_preview.rb +11 -9
- data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +1 -1
- data/previews/primer/beta/auto_complete_preview.rb +19 -17
- data/previews/primer/{markdown_preview.rb → beta/markdown_preview.rb} +14 -12
- data/previews/primer/beta/octicon_preview.rb +24 -0
- data/previews/primer/beta/spinner_preview.rb +22 -0
- data/previews/primer/forms/forms_preview/immediate_validation_form.html.erb +3 -0
- data/previews/primer/forms/forms_preview/multi_input_form.html.erb +12 -1
- data/previews/primer/forms/forms_preview.rb +2 -0
- data/previews/primer/url_helpers.rb +15 -0
- data/static/arguments.json +178 -178
- data/static/audited_at.json +5 -0
- data/static/constants.json +50 -40
- data/static/statuses.json +12 -7
- metadata +34 -24
- data/app/components/primer/beta/button_group.css +0 -1
- data/app/components/primer/beta/button_group.css.json +0 -1
- data/app/components/primer/beta/button_group.css.map +0 -1
- data/app/components/primer/beta/button_group.pcss +0 -92
- data/app/components/primer/button_component.css +0 -1
- data/app/components/primer/button_component.css.json +0 -1
- data/app/components/primer/button_component.css.map +0 -1
- data/app/components/primer/button_component.pcss +0 -557
- data/app/components/primer/menu_component.css.json +0 -1
- data/app/components/primer/menu_component.css.map +0 -1
- data/previews/primer/menu_component_preview.rb +0 -12
- data/previews/primer/octicon_component_preview.rb +0 -22
- data/previews/primer/spinner_component_preview.rb +0 -20
data/static/audited_at.json
CHANGED
@@ -20,9 +20,11 @@
|
|
20
20
|
"Primer::Alpha::Layout": "",
|
21
21
|
"Primer::Alpha::Layout::Main": "",
|
22
22
|
"Primer::Alpha::Layout::Sidebar": "",
|
23
|
+
"Primer::Alpha::Menu": "",
|
23
24
|
"Primer::Alpha::NavList": "",
|
24
25
|
"Primer::Alpha::NavList::Item": "",
|
25
26
|
"Primer::Alpha::NavList::Section": "",
|
27
|
+
"Primer::Alpha::OcticonSymbols": "",
|
26
28
|
"Primer::Alpha::SegmentedControl": "",
|
27
29
|
"Primer::Alpha::SegmentedControl::Item": "",
|
28
30
|
"Primer::Alpha::TabNav": "",
|
@@ -54,9 +56,12 @@
|
|
54
56
|
"Primer::Beta::IconButton": "",
|
55
57
|
"Primer::Beta::Label": "",
|
56
58
|
"Primer::Beta::Link": "",
|
59
|
+
"Primer::Beta::Markdown": "",
|
60
|
+
"Primer::Beta::Octicon": "",
|
57
61
|
"Primer::Beta::Popover": "",
|
58
62
|
"Primer::Beta::ProgressBar": "",
|
59
63
|
"Primer::Beta::RelativeTime": "",
|
64
|
+
"Primer::Beta::Spinner": "",
|
60
65
|
"Primer::Beta::Text": "",
|
61
66
|
"Primer::Beta::Truncate": "",
|
62
67
|
"Primer::Beta::Truncate::TruncateText": "",
|
data/static/constants.json
CHANGED
@@ -300,6 +300,17 @@
|
|
300
300
|
"section"
|
301
301
|
]
|
302
302
|
},
|
303
|
+
"Primer::Alpha::Menu": {
|
304
|
+
"HEADING_TAG_FALLBACK": "h2",
|
305
|
+
"HEADING_TAG_OPTIONS": [
|
306
|
+
"h1",
|
307
|
+
"h2",
|
308
|
+
"h3",
|
309
|
+
"h4",
|
310
|
+
"h5",
|
311
|
+
"h6"
|
312
|
+
]
|
313
|
+
},
|
303
314
|
"Primer::Alpha::NavList": {
|
304
315
|
"Item": "Primer::Alpha::NavList::Item",
|
305
316
|
"Section": "Primer::Alpha::NavList::Section"
|
@@ -308,6 +319,8 @@
|
|
308
319
|
},
|
309
320
|
"Primer::Alpha::NavList::Section": {
|
310
321
|
},
|
322
|
+
"Primer::Alpha::OcticonSymbols": {
|
323
|
+
},
|
311
324
|
"Primer::Alpha::SegmentedControl": {
|
312
325
|
"FULL_WIDTH_DEFAULT": false,
|
313
326
|
"HIDE_LABELS_DEFAULT": false,
|
@@ -709,6 +722,29 @@
|
|
709
722
|
"span"
|
710
723
|
]
|
711
724
|
},
|
725
|
+
"Primer::Beta::Markdown": {
|
726
|
+
"DEFAULT_TAG": "div",
|
727
|
+
"TAG_OPTIONS": [
|
728
|
+
"div",
|
729
|
+
"article",
|
730
|
+
"td"
|
731
|
+
]
|
732
|
+
},
|
733
|
+
"Primer::Beta::Octicon": {
|
734
|
+
"SIZE_DEFAULT": "small",
|
735
|
+
"SIZE_MAPPINGS": {
|
736
|
+
"xsmall": 12,
|
737
|
+
"small": 16,
|
738
|
+
"medium": 24
|
739
|
+
},
|
740
|
+
"SIZE_MEDIUM": "medium",
|
741
|
+
"SIZE_OPTIONS": [
|
742
|
+
"xsmall",
|
743
|
+
"small",
|
744
|
+
"medium"
|
745
|
+
],
|
746
|
+
"SIZE_XSMALL": "xsmall"
|
747
|
+
},
|
712
748
|
"Primer::Beta::Popover": {
|
713
749
|
"CARET_DEFAULT": "top",
|
714
750
|
"CARET_MAPPINGS": {
|
@@ -862,6 +898,20 @@
|
|
862
898
|
"two_digit"
|
863
899
|
]
|
864
900
|
},
|
901
|
+
"Primer::Beta::Spinner": {
|
902
|
+
"DEFAULT_SIZE": "medium",
|
903
|
+
"DEFAULT_STYLE": "box-sizing: content-box; color: var(--color-icon-primary);",
|
904
|
+
"SIZE_MAPPINGS": {
|
905
|
+
"small": 16,
|
906
|
+
"medium": 32,
|
907
|
+
"large": 64
|
908
|
+
},
|
909
|
+
"SIZE_OPTIONS": [
|
910
|
+
"small",
|
911
|
+
"medium",
|
912
|
+
"large"
|
913
|
+
]
|
914
|
+
},
|
865
915
|
"Primer::Beta::Text": {
|
866
916
|
"DEFAULT_TAG": "span"
|
867
917
|
},
|
@@ -987,23 +1037,8 @@
|
|
987
1037
|
]
|
988
1038
|
},
|
989
1039
|
"Primer::Markdown": {
|
990
|
-
"DEFAULT_TAG": "div",
|
991
|
-
"TAG_OPTIONS": [
|
992
|
-
"div",
|
993
|
-
"article",
|
994
|
-
"td"
|
995
|
-
]
|
996
1040
|
},
|
997
1041
|
"Primer::MenuComponent": {
|
998
|
-
"HEADING_TAG_FALLBACK": "h2",
|
999
|
-
"HEADING_TAG_OPTIONS": [
|
1000
|
-
"h1",
|
1001
|
-
"h2",
|
1002
|
-
"h3",
|
1003
|
-
"h4",
|
1004
|
-
"h5",
|
1005
|
-
"h6"
|
1006
|
-
]
|
1007
1042
|
},
|
1008
1043
|
"Primer::Navigation::TabComponent": {
|
1009
1044
|
"ARIA_CURRENT_OPTIONS_FOR_ANCHOR": [
|
@@ -1013,37 +1048,12 @@
|
|
1013
1048
|
"DEFAULT_ARIA_CURRENT_FOR_ANCHOR": "page"
|
1014
1049
|
},
|
1015
1050
|
"Primer::OcticonComponent": {
|
1016
|
-
"SIZE_DEFAULT": "small",
|
1017
|
-
"SIZE_MAPPINGS": {
|
1018
|
-
"xsmall": 12,
|
1019
|
-
"small": 16,
|
1020
|
-
"medium": 24
|
1021
|
-
},
|
1022
|
-
"SIZE_MEDIUM": "medium",
|
1023
|
-
"SIZE_OPTIONS": [
|
1024
|
-
"xsmall",
|
1025
|
-
"small",
|
1026
|
-
"medium"
|
1027
|
-
],
|
1028
|
-
"SIZE_XSMALL": "xsmall"
|
1029
1051
|
},
|
1030
1052
|
"Primer::OcticonSymbolsComponent": {
|
1031
1053
|
},
|
1032
1054
|
"Primer::PopoverComponent": {
|
1033
1055
|
},
|
1034
1056
|
"Primer::SpinnerComponent": {
|
1035
|
-
"DEFAULT_SIZE": "medium",
|
1036
|
-
"DEFAULT_STYLE": "box-sizing: content-box; color: var(--color-icon-primary);",
|
1037
|
-
"SIZE_MAPPINGS": {
|
1038
|
-
"small": 16,
|
1039
|
-
"medium": 32,
|
1040
|
-
"large": 64
|
1041
|
-
},
|
1042
|
-
"SIZE_OPTIONS": [
|
1043
|
-
"small",
|
1044
|
-
"medium",
|
1045
|
-
"large"
|
1046
|
-
]
|
1047
1057
|
},
|
1048
1058
|
"Primer::StateComponent": {
|
1049
1059
|
"DEPRECATED_SCHEME_MAPPINGS": {
|
data/static/statuses.json
CHANGED
@@ -20,9 +20,11 @@
|
|
20
20
|
"Primer::Alpha::Layout": "alpha",
|
21
21
|
"Primer::Alpha::Layout::Main": "alpha",
|
22
22
|
"Primer::Alpha::Layout::Sidebar": "alpha",
|
23
|
+
"Primer::Alpha::Menu": "alpha",
|
23
24
|
"Primer::Alpha::NavList": "alpha",
|
24
25
|
"Primer::Alpha::NavList::Item": "alpha",
|
25
26
|
"Primer::Alpha::NavList::Section": "alpha",
|
27
|
+
"Primer::Alpha::OcticonSymbols": "alpha",
|
26
28
|
"Primer::Alpha::SegmentedControl": "alpha",
|
27
29
|
"Primer::Alpha::SegmentedControl::Item": "alpha",
|
28
30
|
"Primer::Alpha::TabNav": "alpha",
|
@@ -54,9 +56,12 @@
|
|
54
56
|
"Primer::Beta::IconButton": "beta",
|
55
57
|
"Primer::Beta::Label": "beta",
|
56
58
|
"Primer::Beta::Link": "beta",
|
59
|
+
"Primer::Beta::Markdown": "beta",
|
60
|
+
"Primer::Beta::Octicon": "beta",
|
57
61
|
"Primer::Beta::Popover": "beta",
|
58
62
|
"Primer::Beta::ProgressBar": "beta",
|
59
63
|
"Primer::Beta::RelativeTime": "beta",
|
64
|
+
"Primer::Beta::Spinner": "beta",
|
60
65
|
"Primer::Beta::Text": "beta",
|
61
66
|
"Primer::Beta::Truncate": "beta",
|
62
67
|
"Primer::Beta::Truncate::TruncateText": "alpha",
|
@@ -76,18 +81,18 @@
|
|
76
81
|
"Primer::LabelComponent": "deprecated",
|
77
82
|
"Primer::LayoutComponent": "alpha",
|
78
83
|
"Primer::LinkComponent": "deprecated",
|
79
|
-
"Primer::LocalTime": "
|
80
|
-
"Primer::Markdown": "
|
81
|
-
"Primer::MenuComponent": "
|
84
|
+
"Primer::LocalTime": "deprecated",
|
85
|
+
"Primer::Markdown": "deprecated",
|
86
|
+
"Primer::MenuComponent": "deprecated",
|
82
87
|
"Primer::Navigation::TabComponent": "alpha",
|
83
|
-
"Primer::OcticonComponent": "
|
84
|
-
"Primer::OcticonSymbolsComponent": "
|
88
|
+
"Primer::OcticonComponent": "deprecated",
|
89
|
+
"Primer::OcticonSymbolsComponent": "deprecated",
|
85
90
|
"Primer::PopoverComponent": "deprecated",
|
86
|
-
"Primer::SpinnerComponent": "
|
91
|
+
"Primer::SpinnerComponent": "deprecated",
|
87
92
|
"Primer::StateComponent": "beta",
|
88
93
|
"Primer::SubheadComponent": "beta",
|
89
94
|
"Primer::TabContainerComponent": "alpha",
|
90
|
-
"Primer::TimeAgoComponent": "
|
95
|
+
"Primer::TimeAgoComponent": "deprecated",
|
91
96
|
"Primer::TimelineItemComponent": "beta",
|
92
97
|
"Primer::TimelineItemComponent::BadgeComponent": "alpha",
|
93
98
|
"Primer::Tooltip": "deprecated",
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.115
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-12-
|
11
|
+
date: 2022-12-13 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -468,8 +468,18 @@ files:
|
|
468
468
|
- app/components/primer/alpha/image_crop.js
|
469
469
|
- app/components/primer/alpha/image_crop.rb
|
470
470
|
- app/components/primer/alpha/image_crop.ts
|
471
|
+
- app/components/primer/alpha/layout.css
|
472
|
+
- app/components/primer/alpha/layout.css.json
|
473
|
+
- app/components/primer/alpha/layout.css.map
|
471
474
|
- app/components/primer/alpha/layout.html.erb
|
475
|
+
- app/components/primer/alpha/layout.pcss
|
472
476
|
- app/components/primer/alpha/layout.rb
|
477
|
+
- app/components/primer/alpha/menu.css
|
478
|
+
- app/components/primer/alpha/menu.css.json
|
479
|
+
- app/components/primer/alpha/menu.css.map
|
480
|
+
- app/components/primer/alpha/menu.html.erb
|
481
|
+
- app/components/primer/alpha/menu.pcss
|
482
|
+
- app/components/primer/alpha/menu.rb
|
473
483
|
- app/components/primer/alpha/modal_dialog.d.ts
|
474
484
|
- app/components/primer/alpha/modal_dialog.js
|
475
485
|
- app/components/primer/alpha/modal_dialog.ts
|
@@ -482,6 +492,8 @@ files:
|
|
482
492
|
- app/components/primer/alpha/nav_list/item.rb
|
483
493
|
- app/components/primer/alpha/nav_list/section.html.erb
|
484
494
|
- app/components/primer/alpha/nav_list/section.rb
|
495
|
+
- app/components/primer/alpha/octicon_symbols.html.erb
|
496
|
+
- app/components/primer/alpha/octicon_symbols.rb
|
485
497
|
- app/components/primer/alpha/segmented_control.css
|
486
498
|
- app/components/primer/alpha/segmented_control.css.json
|
487
499
|
- app/components/primer/alpha/segmented_control.css.map
|
@@ -576,11 +588,7 @@ files:
|
|
576
588
|
- app/components/primer/beta/button.html.erb
|
577
589
|
- app/components/primer/beta/button.pcss
|
578
590
|
- app/components/primer/beta/button.rb
|
579
|
-
- app/components/primer/beta/button_group.css
|
580
|
-
- app/components/primer/beta/button_group.css.json
|
581
|
-
- app/components/primer/beta/button_group.css.map
|
582
591
|
- app/components/primer/beta/button_group.html.erb
|
583
|
-
- app/components/primer/beta/button_group.pcss
|
584
592
|
- app/components/primer/beta/button_group.rb
|
585
593
|
- app/components/primer/beta/clipboard_copy.d.ts
|
586
594
|
- app/components/primer/beta/clipboard_copy.html.erb
|
@@ -614,6 +622,9 @@ files:
|
|
614
622
|
- app/components/primer/beta/link.css.map
|
615
623
|
- app/components/primer/beta/link.pcss
|
616
624
|
- app/components/primer/beta/link.rb
|
625
|
+
- app/components/primer/beta/markdown.rb
|
626
|
+
- app/components/primer/beta/octicon.html.erb
|
627
|
+
- app/components/primer/beta/octicon.rb
|
617
628
|
- app/components/primer/beta/popover.css
|
618
629
|
- app/components/primer/beta/popover.css.json
|
619
630
|
- app/components/primer/beta/popover.css.map
|
@@ -627,6 +638,8 @@ files:
|
|
627
638
|
- app/components/primer/beta/progress_bar.pcss
|
628
639
|
- app/components/primer/beta/progress_bar.rb
|
629
640
|
- app/components/primer/beta/relative_time.rb
|
641
|
+
- app/components/primer/beta/spinner.html.erb
|
642
|
+
- app/components/primer/beta/spinner.rb
|
630
643
|
- app/components/primer/beta/text.rb
|
631
644
|
- app/components/primer/beta/truncate.css
|
632
645
|
- app/components/primer/beta/truncate.css.json
|
@@ -638,11 +651,7 @@ files:
|
|
638
651
|
- app/components/primer/blankslate_component.rb
|
639
652
|
- app/components/primer/box.rb
|
640
653
|
- app/components/primer/box_component.rb
|
641
|
-
- app/components/primer/button_component.css
|
642
|
-
- app/components/primer/button_component.css.json
|
643
|
-
- app/components/primer/button_component.css.map
|
644
654
|
- app/components/primer/button_component.html.erb
|
645
|
-
- app/components/primer/button_component.pcss
|
646
655
|
- app/components/primer/button_component.rb
|
647
656
|
- app/components/primer/clipboard_copy.rb
|
648
657
|
- app/components/primer/component.rb
|
@@ -664,24 +673,16 @@ files:
|
|
664
673
|
- app/components/primer/local_time.rb
|
665
674
|
- app/components/primer/local_time.ts
|
666
675
|
- app/components/primer/markdown.rb
|
667
|
-
- app/components/primer/menu_component.css
|
668
|
-
- app/components/primer/menu_component.css.json
|
669
|
-
- app/components/primer/menu_component.css.map
|
670
|
-
- app/components/primer/menu_component.html.erb
|
671
|
-
- app/components/primer/menu_component.pcss
|
672
676
|
- app/components/primer/menu_component.rb
|
673
677
|
- app/components/primer/navigation/tab_component.html.erb
|
674
678
|
- app/components/primer/navigation/tab_component.rb
|
675
|
-
- app/components/primer/octicon_component.html.erb
|
676
679
|
- app/components/primer/octicon_component.rb
|
677
|
-
- app/components/primer/octicon_symbols_component.html.erb
|
678
680
|
- app/components/primer/octicon_symbols_component.rb
|
679
681
|
- app/components/primer/popover_component.rb
|
680
682
|
- app/components/primer/primer.d.ts
|
681
683
|
- app/components/primer/primer.js
|
682
684
|
- app/components/primer/primer.pcss
|
683
685
|
- app/components/primer/primer.ts
|
684
|
-
- app/components/primer/spinner_component.html.erb
|
685
686
|
- app/components/primer/spinner_component.rb
|
686
687
|
- app/components/primer/state_component.css
|
687
688
|
- app/components/primer/state_component.css.json
|
@@ -731,6 +732,7 @@ files:
|
|
731
732
|
- app/forms/composed_form.rb
|
732
733
|
- app/forms/first_name_form.rb
|
733
734
|
- app/forms/horizontal_form.rb
|
735
|
+
- app/forms/immediate_validation_form.rb
|
734
736
|
- app/forms/invalid_form.rb
|
735
737
|
- app/forms/last_name_form.rb
|
736
738
|
- app/forms/multi_input_form.rb
|
@@ -816,6 +818,12 @@ files:
|
|
816
818
|
- lib/primer/forms/hidden_field.rb
|
817
819
|
- lib/primer/forms/multi.html.erb
|
818
820
|
- lib/primer/forms/multi.rb
|
821
|
+
- lib/primer/forms/primer_multi_input.d.ts
|
822
|
+
- lib/primer/forms/primer_multi_input.js
|
823
|
+
- lib/primer/forms/primer_multi_input.ts
|
824
|
+
- lib/primer/forms/primer_text_field.d.ts
|
825
|
+
- lib/primer/forms/primer_text_field.js
|
826
|
+
- lib/primer/forms/primer_text_field.ts
|
819
827
|
- lib/primer/forms/radio_button.html.erb
|
820
828
|
- lib/primer/forms/radio_button.rb
|
821
829
|
- lib/primer/forms/radio_button_group.html.erb
|
@@ -910,6 +918,9 @@ files:
|
|
910
918
|
- previews/primer/alpha/hidden_text_expander_preview.rb
|
911
919
|
- previews/primer/alpha/image_crop_preview.rb
|
912
920
|
- previews/primer/alpha/layout_preview.rb
|
921
|
+
- previews/primer/alpha/menu_preview.rb
|
922
|
+
- previews/primer/alpha/menu_preview/default.html.erb
|
923
|
+
- previews/primer/alpha/menu_preview/playground.html.erb
|
913
924
|
- previews/primer/alpha/nav_list_preview.rb
|
914
925
|
- previews/primer/alpha/segmented_control_preview.rb
|
915
926
|
- previews/primer/alpha/tab_nav_preview.rb
|
@@ -953,9 +964,12 @@ files:
|
|
953
964
|
- previews/primer/beta/icon_button_preview.rb
|
954
965
|
- previews/primer/beta/label_preview.rb
|
955
966
|
- previews/primer/beta/link_preview.rb
|
967
|
+
- previews/primer/beta/markdown_preview.rb
|
968
|
+
- previews/primer/beta/octicon_preview.rb
|
956
969
|
- previews/primer/beta/popover_preview.rb
|
957
970
|
- previews/primer/beta/progress_bar_preview.rb
|
958
971
|
- previews/primer/beta/relative_time_preview.rb
|
972
|
+
- previews/primer/beta/spinner_preview.rb
|
959
973
|
- previews/primer/beta/text_preview.rb
|
960
974
|
- previews/primer/beta/truncate_preview.rb
|
961
975
|
- previews/primer/forms/forms_preview.rb
|
@@ -966,6 +980,7 @@ files:
|
|
966
980
|
- previews/primer/forms/forms_preview/check_box_with_nested_form.html.erb
|
967
981
|
- previews/primer/forms/forms_preview/composed_form.html.erb
|
968
982
|
- previews/primer/forms/forms_preview/horizontal_form.html.erb
|
983
|
+
- previews/primer/forms/forms_preview/immediate_validation_form.html.erb
|
969
984
|
- previews/primer/forms/forms_preview/invalid_form.html.erb
|
970
985
|
- previews/primer/forms/forms_preview/multi_input_form.html.erb
|
971
986
|
- previews/primer/forms/forms_preview/multi_text_field_form.html.erb
|
@@ -979,16 +994,11 @@ files:
|
|
979
994
|
- previews/primer/hellip_button_preview.rb
|
980
995
|
- previews/primer/layout_component_preview.rb
|
981
996
|
- previews/primer/local_time_component_preview.rb
|
982
|
-
- previews/primer/markdown_preview.rb
|
983
|
-
- previews/primer/menu_component_preview.rb
|
984
|
-
- previews/primer/menu_component_preview/default.html.erb
|
985
|
-
- previews/primer/menu_component_preview/playground.html.erb
|
986
|
-
- previews/primer/octicon_component_preview.rb
|
987
|
-
- previews/primer/spinner_component_preview.rb
|
988
997
|
- previews/primer/state_component_preview.rb
|
989
998
|
- previews/primer/subhead_component_preview.rb
|
990
999
|
- previews/primer/time_ago_component_preview.rb
|
991
1000
|
- previews/primer/timeline_item_component_preview.rb
|
1001
|
+
- previews/primer/url_helpers.rb
|
992
1002
|
- static/arguments.json
|
993
1003
|
- static/assets/view-components.svg
|
994
1004
|
- static/audited_at.json
|
@@ -1 +0,0 @@
|
|
1
|
-
.BtnGroup{display:inline-block;vertical-align:middle}.BtnGroup:after,.BtnGroup:before{content:"";display:table}.BtnGroup:after{clear:both}.BtnGroup+.BtnGroup,.BtnGroup+.btn{margin-left:var(--primer-control-small-gap,4px)}.BtnGroup-item.btn{border-radius:0;border-right-width:0;float:left;position:relative}.BtnGroup-item.btn:first-child{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-top-left-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-item.btn:last-child{border-bottom-right-radius:var(--primer-borderRadius-medium,6px);border-right-width:var(--primer-borderWidth-thin,1px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-item.btn.selected,.BtnGroup-item.btn:active,.BtnGroup-item.btn:focus,.BtnGroup-item.btn:hover,.BtnGroup-item.btn[aria-selected=true]{border-right-width:var(--primer-borderWidth-thin,1px)}.BtnGroup-item.btn.selected+.BtnGroup-item,.BtnGroup-item.btn.selected+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn:active+.BtnGroup-item,.BtnGroup-item.btn:active+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn:focus+.BtnGroup-item,.BtnGroup-item.btn:focus+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn:hover+.BtnGroup-item,.BtnGroup-item.btn:hover+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item.btn[aria-selected=true]+.BtnGroup-item,.BtnGroup-item.btn[aria-selected=true]+.BtnGroup-parent .BtnGroup-item{border-left-width:0}.BtnGroup-parent{float:left}.BtnGroup-parent:first-child .BtnGroup-item{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-top-left-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-parent:last-child .BtnGroup-item{border-bottom-right-radius:var(--primer-borderRadius-medium,6px);border-right-width:var(--primer-borderWidth-thin,1px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.BtnGroup-parent .BtnGroup-item{border-radius:0;border-right-width:0}.BtnGroup-parent.selected .BtnGroup-item,.BtnGroup-parent:active .BtnGroup-item,.BtnGroup-parent:focus .BtnGroup-item,.BtnGroup-parent:hover .BtnGroup-item,.BtnGroup-parent[aria-selected=true] .BtnGroup-item{border-right-width:var(--primer-borderWidth-thin,1px)}.BtnGroup-parent.selected+.BtnGroup-item,.BtnGroup-parent.selected+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:active+.BtnGroup-item,.BtnGroup-parent:active+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:focus+.BtnGroup-item,.BtnGroup-parent:focus+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:hover+.BtnGroup-item,.BtnGroup-parent:hover+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent[aria-selected=true]+.BtnGroup-item,.BtnGroup-parent[aria-selected=true]+.BtnGroup-parent .BtnGroup-item{border-left-width:0}.BtnGroup-item:active,.BtnGroup-item:focus,.BtnGroup-parent:active,.BtnGroup-parent:focus{z-index:1}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"name":"beta/button_group","selectors":[".BtnGroup",".BtnGroup:after",".BtnGroup:before",".BtnGroup+.BtnGroup",".BtnGroup+.btn",".BtnGroup-item.btn",".BtnGroup-item.btn:first-child",".BtnGroup-item.btn:last-child",".BtnGroup-item.btn.selected",".BtnGroup-item.btn:active",".BtnGroup-item.btn:focus",".BtnGroup-item.btn:hover",".BtnGroup-item.btn[aria-selected=true]",".BtnGroup-item.btn.selected+.BtnGroup-item",".BtnGroup-item.btn.selected+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn:active+.BtnGroup-item",".BtnGroup-item.btn:active+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn:focus+.BtnGroup-item",".BtnGroup-item.btn:focus+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn:hover+.BtnGroup-item",".BtnGroup-item.btn:hover+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item.btn[aria-selected=true]+.BtnGroup-item",".BtnGroup-item.btn[aria-selected=true]+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent",".BtnGroup-parent:first-child .BtnGroup-item",".BtnGroup-parent:last-child .BtnGroup-item",".BtnGroup-parent .BtnGroup-item",".BtnGroup-parent.selected .BtnGroup-item",".BtnGroup-parent:active .BtnGroup-item",".BtnGroup-parent:focus .BtnGroup-item",".BtnGroup-parent:hover .BtnGroup-item",".BtnGroup-parent[aria-selected=true] .BtnGroup-item",".BtnGroup-parent.selected+.BtnGroup-item",".BtnGroup-parent.selected+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent:active+.BtnGroup-item",".BtnGroup-parent:active+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent:focus+.BtnGroup-item",".BtnGroup-parent:focus+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent:hover+.BtnGroup-item",".BtnGroup-parent:hover+.BtnGroup-parent .BtnGroup-item",".BtnGroup-parent[aria-selected=true]+.BtnGroup-item",".BtnGroup-parent[aria-selected=true]+.BtnGroup-parent .BtnGroup-item",".BtnGroup-item:active",".BtnGroup-item:focus",".BtnGroup-parent:active",".BtnGroup-parent:focus"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["button_group.pcss","../../../../lib/postcss_mixins/clearfix.pcss"],"names":[],"mappings":"AAKA,UACE,oBAAqB,CACrB,qBASF,CCVE,iCAHE,UAAW,CADX,aAQF,CAJA,gBAEE,UAEF,CDEA,mCAEE,+CACF,CAGF,mBAIE,eAAgB,CADhB,oBAAqB,CADrB,UAAW,CADX,iBA4BF,CAvBE,+BAEE,+DAAiE,CADjE,4DAEF,CAEA,8BAGE,gEAAkE,CAFlE,qDAAuD,CACvD,6DAEF,CAEA,+IAKE,qDAMF,CAJE,ygBAEE,mBACF,CAIJ,iBACE,UAgCF,CA9BE,4CAEE,+DAAiE,CADjE,4DAEF,CAEA,2CAGE,gEAAkE,CAFlE,qDAAuD,CACvD,6DAEF,CAEA,gCAEE,eAAgB,CADhB,oBAEF,CAOE,gNACE,qDACF,CAEA,qfAEE,mBACF,CAOF,0FAEE,SACF","file":"button_group.css","sourcesContent":["/* BtnGroup */\n\n/* A button group is a series of buttons laid out next to each other, all part\n** of one visual button, but separated by rules to be separate. */\n\n.BtnGroup {\n display: inline-block;\n vertical-align: middle;\n\n @mixin clearfix;\n\n /* Proper spacing for multiple button groups (a la, gollum editor) */\n & + .BtnGroup,\n & + .btn {\n margin-left: var(--primer-control-small-gap, 4px);\n }\n}\n\n.BtnGroup-item.btn {\n position: relative;\n float: left;\n border-right-width: 0;\n border-radius: 0;\n\n &:first-child {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &:last-child {\n border-right-width: var(--primer-borderWidth-thin, 1px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &.selected,\n &[aria-selected='true'],\n &:focus,\n &:active,\n &:hover {\n border-right-width: var(--primer-borderWidth-thin, 1px);\n\n & + .BtnGroup-item,\n & + .BtnGroup-parent .BtnGroup-item {\n border-left-width: 0;\n }\n }\n}\n\n.BtnGroup-parent {\n float: left;\n\n &:first-child .BtnGroup-item {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &:last-child .BtnGroup-item {\n border-right-width: var(--primer-borderWidth-thin, 1px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n & .BtnGroup-item {\n border-right-width: 0;\n border-radius: 0;\n }\n\n &.selected,\n &[aria-selected='true'],\n &:focus,\n &:active,\n &:hover {\n & .BtnGroup-item {\n border-right-width: var(--primer-borderWidth-thin, 1px);\n }\n\n & + .BtnGroup-item,\n & + .BtnGroup-parent .BtnGroup-item {\n border-left-width: 0;\n }\n }\n}\n\n/* ensure that the focus ring sits above the adjacent buttons */\n.BtnGroup-item,\n.BtnGroup-parent {\n &:focus,\n &:active {\n z-index: 1;\n }\n}\n","@define-mixin clearfix {\n &::before {\n display: table;\n content: '';\n }\n\n &::after {\n display: table;\n clear: both;\n content: '';\n }\n}\n"]}
|
@@ -1,92 +0,0 @@
|
|
1
|
-
/* BtnGroup */
|
2
|
-
|
3
|
-
/* A button group is a series of buttons laid out next to each other, all part
|
4
|
-
** of one visual button, but separated by rules to be separate. */
|
5
|
-
|
6
|
-
.BtnGroup {
|
7
|
-
display: inline-block;
|
8
|
-
vertical-align: middle;
|
9
|
-
|
10
|
-
@mixin clearfix;
|
11
|
-
|
12
|
-
/* Proper spacing for multiple button groups (a la, gollum editor) */
|
13
|
-
& + .BtnGroup,
|
14
|
-
& + .btn {
|
15
|
-
margin-left: var(--primer-control-small-gap, 4px);
|
16
|
-
}
|
17
|
-
}
|
18
|
-
|
19
|
-
.BtnGroup-item.btn {
|
20
|
-
position: relative;
|
21
|
-
float: left;
|
22
|
-
border-right-width: 0;
|
23
|
-
border-radius: 0;
|
24
|
-
|
25
|
-
&:first-child {
|
26
|
-
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
|
27
|
-
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
|
28
|
-
}
|
29
|
-
|
30
|
-
&:last-child {
|
31
|
-
border-right-width: var(--primer-borderWidth-thin, 1px);
|
32
|
-
border-top-right-radius: var(--primer-borderRadius-medium, 6px);
|
33
|
-
border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
|
34
|
-
}
|
35
|
-
|
36
|
-
&.selected,
|
37
|
-
&[aria-selected='true'],
|
38
|
-
&:focus,
|
39
|
-
&:active,
|
40
|
-
&:hover {
|
41
|
-
border-right-width: var(--primer-borderWidth-thin, 1px);
|
42
|
-
|
43
|
-
& + .BtnGroup-item,
|
44
|
-
& + .BtnGroup-parent .BtnGroup-item {
|
45
|
-
border-left-width: 0;
|
46
|
-
}
|
47
|
-
}
|
48
|
-
}
|
49
|
-
|
50
|
-
.BtnGroup-parent {
|
51
|
-
float: left;
|
52
|
-
|
53
|
-
&:first-child .BtnGroup-item {
|
54
|
-
border-top-left-radius: var(--primer-borderRadius-medium, 6px);
|
55
|
-
border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
|
56
|
-
}
|
57
|
-
|
58
|
-
&:last-child .BtnGroup-item {
|
59
|
-
border-right-width: var(--primer-borderWidth-thin, 1px);
|
60
|
-
border-top-right-radius: var(--primer-borderRadius-medium, 6px);
|
61
|
-
border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
|
62
|
-
}
|
63
|
-
|
64
|
-
& .BtnGroup-item {
|
65
|
-
border-right-width: 0;
|
66
|
-
border-radius: 0;
|
67
|
-
}
|
68
|
-
|
69
|
-
&.selected,
|
70
|
-
&[aria-selected='true'],
|
71
|
-
&:focus,
|
72
|
-
&:active,
|
73
|
-
&:hover {
|
74
|
-
& .BtnGroup-item {
|
75
|
-
border-right-width: var(--primer-borderWidth-thin, 1px);
|
76
|
-
}
|
77
|
-
|
78
|
-
& + .BtnGroup-item,
|
79
|
-
& + .BtnGroup-parent .BtnGroup-item {
|
80
|
-
border-left-width: 0;
|
81
|
-
}
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
/* ensure that the focus ring sits above the adjacent buttons */
|
86
|
-
.BtnGroup-item,
|
87
|
-
.BtnGroup-parent {
|
88
|
-
&:focus,
|
89
|
-
&:active {
|
90
|
-
z-index: 1;
|
91
|
-
}
|
92
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
.btn{-webkit-appearance:none;appearance:none;border:var(--primer-borderWidth-thin,1px) solid;border-radius:var(--primer-borderRadius-medium,6px);cursor:pointer;display:inline-block;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);line-height:20px;padding:5px var(--primer-control-medium-paddingInline-spacious,16px);position:relative;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:hover{text-decoration:none}.btn.disabled,.btn:disabled,.btn[aria-disabled=true]{cursor:default}.btn i{font-style:normal;font-weight:var(--base-text-weight-medium,500);opacity:.75}.btn .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-small-gap,4px);vertical-align:text-bottom}.btn .octicon:only-child{margin-right:0}.btn .Counter{background-color:var(--color-btn-counter-bg);color:inherit;margin-left:2px;text-shadow:none;vertical-align:top}.btn .dropdown-caret{margin-left:var(--primer-control-small-gap,4px);opacity:.8}.btn{background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color}.btn [open]>.btn,.btn.hover,.btn:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border);transition-duration:.1s}.btn:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border);transition:none}.btn.selected,.btn[aria-selected=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.btn.disabled,.btn[aria-disabled=true]{background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.btn.disabled .octicon,.btn[aria-disabled=true] .octicon{color:var(--color-primer-fg-disabled)}.btn-primary{background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.btn-primary [open]>.btn-primary,.btn-primary.hover,.btn-primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.btn-primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.btn-primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.btn-primary.selected,.btn-primary:active,.btn-primary[aria-selected=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.btn-primary.disabled,.btn-primary:disabled,.btn-primary[aria-disabled=true]{background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.btn-primary.disabled .octicon,.btn-primary:disabled .octicon,.btn-primary[aria-disabled=true] .octicon{color:var(--color-btn-primary-disabled-text)}.btn-primary .Counter{background-color:var(--color-btn-primary-counter-bg);color:inherit}.btn-primary .octicon{color:var(--color-btn-primary-icon)}a.btn-primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}a.btn-primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}a.btn-primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.btn-outline{color:var(--color-btn-outline-text)}.btn-outline [open]>.btn-outline,.btn-outline:hover{background-color:var(--color-btn-outline-hover-bg);border-color:var(--color-btn-outline-hover-border);box-shadow:var(--color-btn-outline-hover-shadow),var(--color-btn-outline-hover-inset-shadow);color:var(--color-btn-outline-hover-text)}:is(.btn-outline:hover,.btn-outline [open]>.btn-outline) .Counter{background-color:var(--color-btn-outline-hover-counter-bg)}:is(.btn-outline:hover,.btn-outline [open]>.btn-outline) .octicon{color:inherit}.btn-outline.selected,.btn-outline:active,.btn-outline[aria-selected=true]{background-color:var(--color-btn-outline-selected-bg);border-color:var(--color-btn-outline-selected-border);box-shadow:var(--color-btn-outline-selected-shadow);color:var(--color-btn-outline-selected-text)}.btn-outline.selected:focus,.btn-outline:active:focus,.btn-outline[aria-selected=true]:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.btn-outline.selected:focus:not(:focus-visible),.btn-outline:active:focus:not(:focus-visible),.btn-outline[aria-selected=true]:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-outline.selected:focus-visible,.btn-outline:active:focus-visible,.btn-outline[aria-selected=true]:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.btn-outline.disabled,.btn-outline:disabled,.btn-outline[aria-disabled=true]{background-color:var(--color-btn-outline-disabled-bg);border-color:var(--color-btn-border);box-shadow:none;color:var(--color-btn-outline-disabled-text)}.btn-outline.disabled .Counter,.btn-outline:disabled .Counter,.btn-outline[aria-disabled=true] .Counter{background-color:var(--color-btn-outline-disabled-counter-bg)}.btn-outline .Counter{background-color:var(--color-btn-outline-counter-bg);color:inherit}.btn-danger{color:var(--color-btn-danger-text)}.btn-danger .octicon{color:var(--color-btn-danger-icon)}.btn-danger [open]>.btn-danger,.btn-danger:hover{background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}:is(.btn-danger:hover,.btn-danger [open]>.btn-danger) .Counter{background-color:var(--color-btn-danger-hover-counter-bg)}:is(.btn-danger:hover,.btn-danger [open]>.btn-danger) .octicon{color:var(--color-btn-danger-hover-icon)}.btn-danger.selected,.btn-danger:active,.btn-danger[aria-selected=true]{background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.btn-danger.disabled,.btn-danger:disabled,.btn-danger[aria-disabled=true]{background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);box-shadow:none;color:var(--color-btn-danger-disabled-text)}.btn-danger.disabled .Counter,.btn-danger:disabled .Counter,.btn-danger[aria-disabled=true] .Counter{background-color:var(--color-btn-danger-disabled-counter-bg)}.btn-danger.disabled .octicon,.btn-danger:disabled .octicon,.btn-danger[aria-disabled=true] .octicon{color:var(--color-btn-danger-disabled-text)}.btn-danger .Counter{background-color:var(--color-btn-danger-counter-bg);color:inherit}.btn-sm{font-size:var(--primer-text-body-size-small,12px);line-height:20px;padding:3px 12px}.btn-sm .octicon{vertical-align:text-top}.btn-large{border-radius:.5em;font-size:inherit;line-height:1.5;padding:.75em 1.5em}.btn-block{display:block;text-align:center;width:100%}.btn-link{-webkit-appearance:none;appearance:none;background-color:initial;border:0;color:var(--color-accent-fg);cursor:pointer;display:inline-block;font-size:inherit;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn-link:hover{text-decoration:underline}.btn-link:disabled,.btn-link:disabled:hover,.btn-link[aria-disabled=true],.btn-link[aria-disabled=true]:hover{color:var(--color-primer-fg-disabled);cursor:default}.btn-link:not(.dropdown-item):focus,.btn-link:not(.dropdown-item):focus-visible{border-radius:var(--primer-borderRadius-medium,6px);outline-offset:0}.btn-invisible{background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);box-shadow:none;color:var(--color-accent-fg)}.btn-invisible.zeroclipboard-is-hover,.btn-invisible:hover{background-color:var(--color-btn-hover-bg);box-shadow:none;color:var(--color-accent-fg);outline:none}.btn-invisible.selected,.btn-invisible.zeroclipboard-is-active,.btn-invisible:active,.btn-invisible[aria-selected=true]{background:none;border-color:var(--color-btn-active-border);box-shadow:none;color:var(--color-accent-fg);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.btn-invisible:active .btn-invisible.zeroclipboard-is-active{background-color:var(--color-btn-selected-bg)}.btn-invisible.disabled,.btn-invisible:disabled,.btn-invisible[aria-disabled=true]{background-color:initial;color:var(--color-primer-fg-disabled)}.btn-octicon{background:#0000;border:0;box-shadow:none;color:var(--color-fg-muted);display:inline-block;line-height:1;margin-left:5px;padding:5px;vertical-align:middle}.btn-octicon:hover{color:var(--color-accent-fg)}.btn-octicon:focus,.btn-octicon:focus-visible{border-radius:var(--primer-borderRadius-medium,6px)}.btn-octicon.disabled,.btn-octicon[aria-disabled=true]{color:var(--color-primer-fg-disabled);cursor:default}.btn-octicon.disabled:hover,.btn-octicon[aria-disabled=true]:hover{color:var(--color-primer-fg-disabled)}.btn-octicon-danger:hover{color:var(--color-danger-fg)}.close-button{background:#0000;border:0;color:var(--color-fg-muted);padding:0}.close-button:hover{color:var(--color-fg-default)}.close-button:active{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:-2px}.hidden-text-expander{display:block}.hidden-text-expander.inline{display:inline-block;line-height:0;margin-left:5px;position:relative;top:-1px}.ellipsis-expander,.hidden-text-expander a{background:var(--color-neutral-muted);border:0;border-radius:1px;color:var(--color-fg-default);display:inline-block;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);height:12px;line-height:6px;padding:0 5px 5px;text-decoration:none;vertical-align:middle}:is(.hidden-text-expander a,.ellipsis-expander):hover{background-color:var(--color-accent-muted);text-decoration:none}:is(.hidden-text-expander a,.ellipsis-expander):active{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis)}.btn-with-count{border-bottom-right-radius:0;border-top-right-radius:0;float:left}.btn-with-count:focus{z-index:1}.social-count{background-color:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-border);border-bottom-right-radius:var(--primer-borderRadius-medium,6px);border-left:0;border-top-right-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-small),var(--color-primer-shadow-highlight);color:var(--color-fg-default);float:left;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:20px;padding:3px 12px;position:relative;vertical-align:middle}.social-count:active,.social-count:hover{text-decoration:none}.social-count:hover{color:var(--color-accent-fg);cursor:pointer}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"name":"button_component","selectors":[".btn",".btn:hover",".btn.disabled",".btn:disabled",".btn[aria-disabled=true]",".btn i",".btn .octicon",".btn .octicon:only-child",".btn .Counter",".btn .dropdown-caret",".btn [open]>.btn",".btn.hover",".btn:active",".btn.selected",".btn[aria-selected=true]",".btn.disabled .octicon",".btn[aria-disabled=true] .octicon",".btn-primary",".btn-primary [open]>.btn-primary",".btn-primary.hover",".btn-primary:hover",".btn-primary:focus",".btn-primary:focus:not(:focus-visible)",".btn-primary:focus-visible",".btn-primary.selected",".btn-primary:active",".btn-primary[aria-selected=true]",".btn-primary.disabled",".btn-primary:disabled",".btn-primary[aria-disabled=true]",".btn-primary.disabled .octicon",".btn-primary:disabled .octicon",".btn-primary[aria-disabled=true] .octicon",".btn-primary .Counter",".btn-primary .octicon","a.btn-primary:focus","a.btn-primary:focus:not(:focus-visible)","a.btn-primary:focus-visible",".btn-outline",".btn-outline [open]>.btn-outline",".btn-outline:hover",":is(.btn-outline:hover",".btn-outline [open]>.btn-outline) .Counter",".btn-outline [open]>.btn-outline) .octicon",".btn-outline.selected",".btn-outline:active",".btn-outline[aria-selected=true]",".btn-outline.selected:focus",".btn-outline:active:focus",".btn-outline[aria-selected=true]:focus",".btn-outline.selected:focus:not(:focus-visible)",".btn-outline:active:focus:not(:focus-visible)",".btn-outline[aria-selected=true]:focus:not(:focus-visible)",".btn-outline.selected:focus-visible",".btn-outline:active:focus-visible",".btn-outline[aria-selected=true]:focus-visible",".btn-outline.disabled",".btn-outline:disabled",".btn-outline[aria-disabled=true]",".btn-outline.disabled .Counter",".btn-outline:disabled .Counter",".btn-outline[aria-disabled=true] .Counter",".btn-outline .Counter",".btn-danger",".btn-danger .octicon",".btn-danger [open]>.btn-danger",".btn-danger:hover",":is(.btn-danger:hover",".btn-danger [open]>.btn-danger) .Counter",".btn-danger [open]>.btn-danger) .octicon",".btn-danger.selected",".btn-danger:active",".btn-danger[aria-selected=true]",".btn-danger.disabled",".btn-danger:disabled",".btn-danger[aria-disabled=true]",".btn-danger.disabled .Counter",".btn-danger:disabled .Counter",".btn-danger[aria-disabled=true] .Counter",".btn-danger.disabled .octicon",".btn-danger:disabled .octicon",".btn-danger[aria-disabled=true] .octicon",".btn-danger .Counter",".btn-sm",".btn-sm .octicon",".btn-large",".btn-block",".btn-link",".btn-link:hover",".btn-link:disabled",".btn-link:disabled:hover",".btn-link[aria-disabled=true]",".btn-link[aria-disabled=true]:hover",".btn-link:not(.dropdown-item):focus",".btn-link:not(.dropdown-item):focus-visible",".btn-invisible",".btn-invisible.zeroclipboard-is-hover",".btn-invisible:hover",".btn-invisible.selected",".btn-invisible.zeroclipboard-is-active",".btn-invisible:active",".btn-invisible[aria-selected=true]",".btn-invisible:active .btn-invisible.zeroclipboard-is-active",".btn-invisible.disabled",".btn-invisible:disabled",".btn-invisible[aria-disabled=true]",".btn-octicon",".btn-octicon:hover",".btn-octicon:focus",".btn-octicon:focus-visible",".btn-octicon.disabled",".btn-octicon[aria-disabled=true]",".btn-octicon.disabled:hover",".btn-octicon[aria-disabled=true]:hover",".btn-octicon-danger:hover",".close-button",".close-button:hover",".close-button:active",".hidden-text-expander",".hidden-text-expander.inline",".ellipsis-expander",".hidden-text-expander a",":is(.hidden-text-expander a",".ellipsis-expander):hover",".ellipsis-expander):active",".btn-with-count",".btn-with-count:focus",".social-count",".social-count:active",".social-count:hover"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["button_component.pcss","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss","../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"button_component.css","sourcesContent":["/* btn */\n\n/* Base button styles */\n.btn {\n position: relative;\n display: inline-block;\n padding: 5px var(--primer-control-medium-paddingInline-spacious, 16px);\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n line-height: 20px; /* Specifically not inherit our `<body>` default */\n white-space: nowrap;\n vertical-align: middle;\n cursor: pointer;\n user-select: none;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-radius: var(--primer-borderRadius-medium, 6px);\n appearance: none; /* Corrects inability to style clickable `input` types in iOS. */\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n cursor: default;\n }\n\n & i {\n font-style: normal;\n font-weight: var(--base-text-weight-medium, 500);\n opacity: 0.75;\n }\n\n & .octicon {\n margin-right: var(--primer-control-small-gap, 4px);\n color: var(--color-fg-muted);\n vertical-align: text-bottom;\n\n &:only-child {\n margin-right: 0;\n }\n }\n\n & .Counter {\n margin-left: 2px;\n color: inherit;\n text-shadow: none;\n vertical-align: top;\n background-color: var(--color-btn-counter-bg);\n }\n\n & .dropdown-caret {\n margin-left: var(--primer-control-small-gap, 4px);\n opacity: 0.8;\n }\n\n /* Default button */\n\n color: var(--color-btn-text);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n\n &:hover,\n &.hover,\n & [open] > & {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n transition-duration: 0.1s;\n }\n\n &:active {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n transition: none;\n }\n\n &.selected,\n &[aria-selected='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n\n & .octicon {\n color: var(--color-primer-fg-disabled);\n }\n }\n}\n\n/* Primary button */\n\n.btn-primary {\n color: var(--color-btn-primary-text);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover,\n &.hover,\n & [open] > & {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active,\n &.selected,\n &[aria-selected='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n\n & .octicon {\n color: var(--color-btn-primary-disabled-text);\n }\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-primary-counter-bg);\n }\n\n & .octicon {\n color: var(--color-btn-primary-icon);\n }\n}\n\n/* ensure links styled as button primary gets proper focus style */\na.btn-primary {\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n}\n\n/* Outline button */\n\n.btn-outline {\n color: var(--color-btn-outline-text);\n\n &:hover,\n & [open] > & {\n color: var(--color-btn-outline-hover-text);\n background-color: var(--color-btn-outline-hover-bg);\n border-color: var(--color-btn-outline-hover-border);\n box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);\n\n & .Counter {\n background-color: var(--color-btn-outline-hover-counter-bg);\n }\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:active,\n &.selected,\n &[aria-selected='true'] {\n color: var(--color-btn-outline-selected-text);\n background-color: var(--color-btn-outline-selected-bg);\n border-color: var(--color-btn-outline-selected-border);\n box-shadow: var(--color-btn-outline-selected-shadow);\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-outline-disabled-text);\n background-color: var(--color-btn-outline-disabled-bg);\n border-color: var(--color-btn-border);\n box-shadow: none;\n\n & .Counter {\n background-color: var(--color-btn-outline-disabled-counter-bg);\n }\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-outline-counter-bg);\n }\n}\n\n/* Danger button */\n\n.btn-danger {\n color: var(--color-btn-danger-text);\n\n & .octicon {\n color: var(--color-btn-danger-icon);\n }\n\n &:hover,\n & [open] > & {\n color: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n\n & .Counter {\n background-color: var(--color-btn-danger-hover-counter-bg);\n }\n\n & .octicon {\n color: var(--color-btn-danger-hover-icon);\n }\n }\n\n &:active,\n &.selected,\n &[aria-selected='true'] {\n color: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n box-shadow: none;\n\n & .Counter {\n background-color: var(--color-btn-danger-disabled-counter-bg);\n }\n\n & .octicon {\n color: var(--color-btn-danger-disabled-text);\n }\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-danger-counter-bg);\n }\n}\n\n/* Sizes\n**\n** Tweak `line-height` to make them smaller. */\n.btn-sm {\n padding: 3px 12px;\n font-size: var(--primer-text-body-size-small, 12px);\n line-height: 20px;\n\n & .octicon {\n vertical-align: text-top;\n }\n}\n\n/* Large button adds more padding around text. Use font-size utils to increase font-size..\n** e.g, <p class=\"text-gamma\"><button class=\"btn btn-large btn-primary\" type=\"button\">Big green button</button></p> */\n.btn-large {\n padding: 0.75em 1.5em;\n font-size: inherit;\n line-height: 1.5;\n border-radius: 0.5em;\n}\n\n/* Full-width button\n**\n** These buttons expand to the full width of their parent container */\n.btn-block {\n display: block;\n width: 100%;\n text-align: center;\n}\n\n\n/* Link-like buttons\n**\n** This class is for styling <button> and <input> elements to look like links */\n\n.btn-link {\n display: inline-block;\n padding: 0;\n font-size: inherit;\n color: var(--color-accent-fg);\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: 0;\n appearance: none; /* Corrects inability to style clickable `input` types in iOS. */\n\n &:hover {\n text-decoration: underline;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n &,\n &:hover {\n color: var(--color-primer-fg-disabled);\n cursor: default;\n }\n }\n\n &:not(.dropdown-item) {\n &:focus,\n &:focus-visible {\n border-radius: var(--primer-borderRadius-medium, 6px);\n outline-offset: 0;\n }\n }\n}\n\n/* Invisible button\n**\n** Typically used as a \"cancel\" button next to a .btn */\n\n.btn-invisible {\n color: var(--color-accent-fg);\n background-color: transparent; /* Reset default gradient backgrounds and colors */\n border: 0;\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: none;\n\n &:hover,\n &.zeroclipboard-is-hover {\n color: var(--color-accent-fg);\n background-color: var(--color-btn-hover-bg);\n outline: none;\n box-shadow: none;\n }\n\n &:active,\n &.selected,\n &[aria-selected='true'],\n &.zeroclipboard-is-active {\n color: var(--color-accent-fg);\n background: none;\n border-color: var(--color-btn-active-border);\n\n @mixin focusOutline;\n }\n\n &:active &.zeroclipboard-is-active {\n background-color: var(--color-btn-selected-bg);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n }\n}\n\n/* Octicon button\n**\n** Icon-only buttons */\n\n.btn-octicon {\n display: inline-block;\n padding: 5px;\n margin-left: 5px;\n line-height: 1;\n color: var(--color-fg-muted);\n vertical-align: middle;\n\n /* For `<button>` elements */\n background: transparent;\n border: 0;\n box-shadow: none;\n\n &:hover {\n color: var(--color-accent-fg);\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n cursor: default;\n\n &:hover {\n color: var(--color-primer-fg-disabled);\n }\n }\n}\n\n.btn-octicon-danger:hover {\n color: var(--color-danger-fg);\n}\n\n/* Close button\n**\n** Typically used with an octicon-x */\n\n.close-button {\n padding: 0;\n color: var(--color-fg-muted);\n background: transparent;\n border: 0;\n\n &:hover {\n color: var(--color-fg-default);\n }\n\n &:active {\n @mixin focusOutline;\n }\n}\n\n/* Hidden text button\n**\n** Use `.hidden-text-expander` to indicate and expand hidden text. */\n\n.hidden-text-expander {\n display: block;\n\n &.inline {\n position: relative;\n top: -1px;\n display: inline-block;\n margin-left: 5px;\n line-height: 0;\n }\n}\n\n.hidden-text-expander a,\n.ellipsis-expander {\n display: inline-block;\n height: 12px;\n padding: 0 5px 5px;\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n line-height: 6px;\n color: var(--color-fg-default);\n text-decoration: none;\n vertical-align: middle;\n background: var(--color-neutral-muted);\n border: 0;\n border-radius: 1px;\n\n &:hover {\n text-decoration: none;\n background-color: var(--color-accent-muted);\n }\n\n &:active {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-accent-emphasis);\n }\n}\n\n/* Social button count\n** TODO: Deprecate? Use BtnGroup instead? */\n\n.btn-with-count {\n float: left;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n &:focus {\n z-index: 1;\n }\n}\n\n/* Social count bubble\n**\n** A container that is used for social bubbles counts. */\n\n.social-count {\n position: relative;\n float: left;\n padding: 3px 12px;\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n line-height: 20px;\n color: var(--color-fg-default);\n vertical-align: middle;\n background-color: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-border);\n border-left: 0;\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);\n\n &:hover,\n &:active {\n text-decoration: none;\n }\n\n &:hover {\n color: var(--color-accent-fg);\n cursor: pointer;\n }\n}\n","/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
|