primer_view_components 0.1.4 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +14 -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/heading.html.erb +1 -1
- data/app/components/primer/alpha/action_list/heading.rb +5 -3
- data/app/components/primer/alpha/action_list/item.html.erb +9 -0
- data/app/components/primer/alpha/action_list/item.rb +31 -10
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +4 -41
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +19 -20
- data/app/components/primer/alpha/action_list.rb +54 -6
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +22 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +139 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +137 -0
- data/app/components/primer/alpha/action_menu/list.rb +81 -0
- data/app/components/primer/alpha/action_menu.html.erb +26 -0
- data/app/components/primer/alpha/action_menu.rb +322 -0
- data/app/components/primer/alpha/auto_complete.css.json +0 -11
- data/app/components/primer/alpha/banner.css.json +0 -14
- data/app/components/primer/alpha/button_marketing.css.json +0 -10
- data/app/components/primer/alpha/dialog.css.json +0 -63
- data/app/components/primer/alpha/dialog.rb +6 -2
- data/app/components/primer/alpha/dropdown.css.json +0 -21
- data/app/components/primer/alpha/layout.css.json +0 -27
- data/app/components/primer/alpha/menu.css.json +0 -11
- data/app/components/primer/alpha/nav_list/item.rb +5 -0
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.json +0 -3
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +1 -0
- data/app/components/primer/alpha/overlay.rb +14 -18
- data/app/components/primer/alpha/segmented_control.css.json +0 -15
- data/app/components/primer/alpha/tab_nav.css.json +0 -10
- data/app/components/primer/alpha/text_field.css.json +0 -38
- data/app/components/primer/alpha/toggle_switch.css.json +0 -16
- data/app/components/primer/alpha/underline_nav.css.json +0 -13
- data/app/components/primer/beta/avatar.css.json +0 -14
- data/app/components/primer/beta/avatar_stack.css.json +0 -9
- data/app/components/primer/beta/blankslate.css.json +0 -12
- data/app/components/primer/beta/border_box.css.json +0 -32
- data/app/components/primer/beta/border_box.rb +3 -3
- data/app/components/primer/beta/breadcrumbs.css.json +0 -4
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +0 -22
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +3 -3
- data/app/components/primer/beta/counter.css.json +0 -6
- data/app/components/primer/beta/flash.css.json +0 -15
- data/app/components/primer/beta/label.css.json +0 -20
- data/app/components/primer/beta/link.css.json +0 -8
- data/app/components/primer/beta/popover.css.json +0 -18
- data/app/components/primer/beta/progress_bar.css.json +0 -6
- data/app/components/primer/beta/state.css.json +0 -10
- data/app/components/primer/beta/subhead.css.json +0 -8
- data/app/components/primer/beta/timeline_item.css.json +0 -9
- data/app/components/primer/beta/truncate.css.json +0 -6
- data/app/components/primer/focus_group.d.ts +19 -0
- data/app/components/primer/focus_group.js +144 -0
- data/app/components/primer/focus_group.ts +137 -0
- data/app/components/primer/icon_button.rb +1 -1
- data/app/components/primer/primer.d.ts +2 -0
- data/app/components/primer/primer.js +2 -0
- data/app/components/primer/primer.ts +2 -0
- data/app/components/primer/truncate.css.json +0 -7
- data/app/lib/primer/css/layout.css.json +0 -263
- data/app/lib/primer/css/utilities.css.json +0 -1636
- data/lib/primer/static/generate_arguments.rb +55 -0
- data/lib/primer/static/generate_audited_at.rb +17 -0
- data/lib/primer/static/generate_constants.rb +19 -0
- data/lib/primer/static/generate_info_arch.rb +156 -0
- data/lib/primer/static/generate_previews.rb +45 -0
- data/lib/primer/static/generate_statuses.rb +17 -0
- data/lib/primer/static.rb +72 -0
- data/lib/primer/view_components/linters/disallow_component_css_counter.rb +43 -4
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/view_components.rb +0 -48
- data/lib/primer/yard/component_manifest.rb +1 -0
- data/lib/primer/yard/component_ref.rb +14 -0
- data/lib/primer/yard/docs_helper.rb +3 -0
- data/lib/primer/yard/info_arch_docs_helper.rb +31 -0
- data/lib/primer/yard/legacy_gatsby_backend.rb +3 -35
- data/lib/primer/yard/registry.rb +2 -1
- data/lib/primer/yard.rb +1 -0
- data/lib/tasks/docs.rake +10 -12
- data/lib/tasks/static.rake +20 -28
- data/previews/primer/alpha/action_list_preview.rb +4 -1
- data/previews/primer/alpha/action_menu_preview/align_end.html.erb +6 -0
- data/previews/primer/alpha/action_menu_preview/opens_dialog.html.erb +21 -0
- data/previews/primer/alpha/action_menu_preview.rb +238 -0
- data/previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -3
- data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +4 -4
- data/previews/primer/alpha/dialog_preview/test.html.erb +3 -3
- data/previews/primer/alpha/dialog_preview/with_footer.html.erb +3 -3
- data/previews/primer/alpha/dialog_preview/with_form.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview.rb +7 -2
- data/previews/primer/beta/auto_complete_item_preview.rb +1 -0
- data/static/arguments.json +3078 -1404
- data/static/audited_at.json +2 -0
- data/static/classes.json +576 -311
- data/static/constants.json +42 -2
- data/static/info_arch.json +8859 -0
- data/static/previews.json +221 -101
- data/static/statuses.json +2 -0
- metadata +23 -2
|
@@ -27,20 +27,5 @@
|
|
|
27
27
|
".SegmentedControl--fullWidth .SegmentedControl-item",
|
|
28
28
|
".SegmentedControl--fullWidth .Button--iconOnly",
|
|
29
29
|
".SegmentedControl--fullWidth .Button-withTooltip"
|
|
30
|
-
],
|
|
31
|
-
"classes": [
|
|
32
|
-
"SegmentedControl",
|
|
33
|
-
"SegmentedControl-item",
|
|
34
|
-
"SegmentedControl-item--selected",
|
|
35
|
-
"Button",
|
|
36
|
-
"Button-label",
|
|
37
|
-
"Button--small",
|
|
38
|
-
"Button--iconOnly",
|
|
39
|
-
"Button--medium",
|
|
40
|
-
"Button--large",
|
|
41
|
-
"Button--invisible",
|
|
42
|
-
"Button--invisible-noVisuals",
|
|
43
|
-
"SegmentedControl--fullWidth",
|
|
44
|
-
"Button-withTooltip"
|
|
45
30
|
]
|
|
46
31
|
}
|
|
@@ -130,43 +130,5 @@
|
|
|
130
130
|
"input.FormControl-radio[type=radio]:checked",
|
|
131
131
|
"input.FormControl-radio[type=radio]:checked:disabled",
|
|
132
132
|
"input.FormControl-radio[type=radio]:focus-visible"
|
|
133
|
-
],
|
|
134
|
-
"classes": [
|
|
135
|
-
"FormControl",
|
|
136
|
-
"FormControl--fullWidth",
|
|
137
|
-
"FormControl-label",
|
|
138
|
-
"FormControl-caption",
|
|
139
|
-
"FormControl-inlineValidation",
|
|
140
|
-
"FormControl-spacingWrapper",
|
|
141
|
-
"FormControl-horizontalGroup",
|
|
142
|
-
"FormControl-input",
|
|
143
|
-
"FormControl-select",
|
|
144
|
-
"FormControl-textarea",
|
|
145
|
-
"FormControl-small",
|
|
146
|
-
"FormControl-medium",
|
|
147
|
-
"FormControl-large",
|
|
148
|
-
"FormControl-inset",
|
|
149
|
-
"FormControl-monospace",
|
|
150
|
-
"FormControl-error",
|
|
151
|
-
"FormControl-success",
|
|
152
|
-
"FormControl-warning",
|
|
153
|
-
"FormControl-toggleSwitchInput",
|
|
154
|
-
"FormControl-input-wrap",
|
|
155
|
-
"FormControl-input-leadingVisualWrap",
|
|
156
|
-
"FormControl-input-leadingVisual",
|
|
157
|
-
"FormControl-input-trailingAction",
|
|
158
|
-
"FormControl-input-trailingAction--divider",
|
|
159
|
-
"FormControl-input-wrap--leadingVisual",
|
|
160
|
-
"FormControl-input-wrap--trailingAction",
|
|
161
|
-
"FormControl-input-wrap-trailingAction--divider",
|
|
162
|
-
"FormControl-select-wrap",
|
|
163
|
-
"FormControl-checkbox-wrap",
|
|
164
|
-
"FormControl-radio-wrap",
|
|
165
|
-
"FormControl-checkbox-labelWrap",
|
|
166
|
-
"FormControl-radio-labelWrap",
|
|
167
|
-
"FormControl-check-group-wrap",
|
|
168
|
-
"FormControl-radio-group-wrap",
|
|
169
|
-
"FormControl-checkbox",
|
|
170
|
-
"FormControl-radio"
|
|
171
133
|
]
|
|
172
134
|
}
|
|
@@ -36,21 +36,5 @@
|
|
|
36
36
|
".ToggleSwitch-statusOff",
|
|
37
37
|
".ToggleSwitch--statusAtEnd",
|
|
38
38
|
".ToggleSwitch--statusAtEnd .ToggleSwitch-status"
|
|
39
|
-
],
|
|
40
|
-
"classes": [
|
|
41
|
-
"ToggleSwitch",
|
|
42
|
-
"ToggleSwitch--checked",
|
|
43
|
-
"ToggleSwitch-statusOn",
|
|
44
|
-
"ToggleSwitch-statusOff",
|
|
45
|
-
"ToggleSwitch-track",
|
|
46
|
-
"ToggleSwitch-knob",
|
|
47
|
-
"ToggleSwitch-lineIcon",
|
|
48
|
-
"ToggleSwitch-circleIcon",
|
|
49
|
-
"ToggleSwitch-icons",
|
|
50
|
-
"ToggleSwitch-status",
|
|
51
|
-
"ToggleSwitch-statusIcon",
|
|
52
|
-
"ToggleSwitch--small",
|
|
53
|
-
"ToggleSwitch--disabled",
|
|
54
|
-
"ToggleSwitch--statusAtEnd"
|
|
55
39
|
]
|
|
56
40
|
}
|
|
@@ -24,18 +24,5 @@
|
|
|
24
24
|
".UnderlineNav--full .UnderlineNav-body",
|
|
25
25
|
".UnderlineNav-octicon",
|
|
26
26
|
".UnderlineNav-container"
|
|
27
|
-
],
|
|
28
|
-
"classes": [
|
|
29
|
-
"UnderlineNav",
|
|
30
|
-
"Counter",
|
|
31
|
-
"Counter--primary",
|
|
32
|
-
"UnderlineNav-body",
|
|
33
|
-
"UnderlineNav-item",
|
|
34
|
-
"selected",
|
|
35
|
-
"UnderlineNav--right",
|
|
36
|
-
"UnderlineNav-actions",
|
|
37
|
-
"UnderlineNav--full",
|
|
38
|
-
"UnderlineNav-octicon",
|
|
39
|
-
"UnderlineNav-container"
|
|
40
27
|
]
|
|
41
28
|
}
|
|
@@ -13,19 +13,5 @@
|
|
|
13
13
|
".avatar-6",
|
|
14
14
|
".avatar-7",
|
|
15
15
|
".avatar-8"
|
|
16
|
-
],
|
|
17
|
-
"classes": [
|
|
18
|
-
"avatar",
|
|
19
|
-
"avatar-link",
|
|
20
|
-
"avatar-group-item",
|
|
21
|
-
"avatar-1",
|
|
22
|
-
"avatar-2",
|
|
23
|
-
"avatar-small",
|
|
24
|
-
"avatar-3",
|
|
25
|
-
"avatar-4",
|
|
26
|
-
"avatar-5",
|
|
27
|
-
"avatar-6",
|
|
28
|
-
"avatar-7",
|
|
29
|
-
"avatar-8"
|
|
30
16
|
]
|
|
31
17
|
}
|
|
@@ -24,14 +24,5 @@
|
|
|
24
24
|
".AvatarStack--right .avatar.avatar-more:before",
|
|
25
25
|
".AvatarStack--right .avatar.avatar-more:after",
|
|
26
26
|
".AvatarStack--right .avatar"
|
|
27
|
-
],
|
|
28
|
-
"classes": [
|
|
29
|
-
"AvatarStack",
|
|
30
|
-
"AvatarStack-body",
|
|
31
|
-
"AvatarStack--two",
|
|
32
|
-
"AvatarStack--three-plus",
|
|
33
|
-
"avatar",
|
|
34
|
-
"avatar-more",
|
|
35
|
-
"AvatarStack--right"
|
|
36
27
|
]
|
|
37
28
|
}
|
|
@@ -18,17 +18,5 @@
|
|
|
18
18
|
".blankslate-large h3",
|
|
19
19
|
".blankslate-large p",
|
|
20
20
|
".blankslate-clean-background"
|
|
21
|
-
],
|
|
22
|
-
"classes": [
|
|
23
|
-
"blankslate",
|
|
24
|
-
"blankslate-icon",
|
|
25
|
-
"blankslate-image",
|
|
26
|
-
"blankslate-heading",
|
|
27
|
-
"blankslate-action",
|
|
28
|
-
"blankslate-capped",
|
|
29
|
-
"blankslate-spacious",
|
|
30
|
-
"blankslate-narrow",
|
|
31
|
-
"blankslate-large",
|
|
32
|
-
"blankslate-clean-background"
|
|
33
21
|
]
|
|
34
22
|
}
|
|
@@ -50,37 +50,5 @@
|
|
|
50
50
|
".Box-row--blue",
|
|
51
51
|
".Box-row--gray",
|
|
52
52
|
".Box-btn-octicon.btn-octicon"
|
|
53
|
-
],
|
|
54
|
-
"classes": [
|
|
55
|
-
"Box",
|
|
56
|
-
"Box--condensed",
|
|
57
|
-
"Box-body",
|
|
58
|
-
"Box-footer",
|
|
59
|
-
"Box-header",
|
|
60
|
-
"Box-btn-octicon",
|
|
61
|
-
"btn-octicon",
|
|
62
|
-
"Box-row",
|
|
63
|
-
"Box--spacious",
|
|
64
|
-
"Box-title",
|
|
65
|
-
"Box-row--unread",
|
|
66
|
-
"unread",
|
|
67
|
-
"navigation-focus",
|
|
68
|
-
"Box-row--drag-button",
|
|
69
|
-
"is-dragging",
|
|
70
|
-
"sortable-chosen",
|
|
71
|
-
"sortable-ghost",
|
|
72
|
-
"Box-row--drag-hide",
|
|
73
|
-
"Box-row--focus-gray",
|
|
74
|
-
"Box-row--focus-blue",
|
|
75
|
-
"Box-row--hover-gray",
|
|
76
|
-
"Box-row--hover-blue",
|
|
77
|
-
"Box-row-link",
|
|
78
|
-
"Box--scrollable",
|
|
79
|
-
"Box--blue",
|
|
80
|
-
"Box--danger",
|
|
81
|
-
"Box-header--blue",
|
|
82
|
-
"Box-row--yellow",
|
|
83
|
-
"Box-row--blue",
|
|
84
|
-
"Box-row--gray"
|
|
85
53
|
]
|
|
86
54
|
}
|
|
@@ -26,7 +26,7 @@ module Primer
|
|
|
26
26
|
#
|
|
27
27
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
28
28
|
# @accessibility
|
|
29
|
-
# When using header.
|
|
29
|
+
# When using header.with_title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
|
|
30
30
|
renders_one :header, "Primer::Beta::BorderBox::Header"
|
|
31
31
|
|
|
32
32
|
# Optional Body.
|
|
@@ -72,8 +72,8 @@ module Primer
|
|
|
72
72
|
|
|
73
73
|
# @example Header with title, body, rows, and footer
|
|
74
74
|
# <%= render(Primer::Beta::BorderBox.new) do |component| %>
|
|
75
|
-
# <% component.with_header do |
|
|
76
|
-
# <%
|
|
75
|
+
# <% component.with_header do |header| %>
|
|
76
|
+
# <% header.with_title(tag: :h2) do %>
|
|
77
77
|
# Header
|
|
78
78
|
# <% end %>
|
|
79
79
|
# <% end %>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--
|
|
1
|
+
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,4px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);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)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);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)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);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-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);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)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);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)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
|
|
@@ -67,27 +67,5 @@
|
|
|
67
67
|
".Button--iconOnly",
|
|
68
68
|
".Button--iconOnly.Button--small",
|
|
69
69
|
".Button--iconOnly.Button--large"
|
|
70
|
-
],
|
|
71
|
-
"classes": [
|
|
72
|
-
"Button",
|
|
73
|
-
"Button-withTooltip",
|
|
74
|
-
"Button-content",
|
|
75
|
-
"Button-content--alignStart",
|
|
76
|
-
"Button-visual",
|
|
77
|
-
"Counter",
|
|
78
|
-
"Button-label",
|
|
79
|
-
"Button-leadingVisual",
|
|
80
|
-
"Button-trailingVisual",
|
|
81
|
-
"Button-trailingAction",
|
|
82
|
-
"Button--small",
|
|
83
|
-
"Button--large",
|
|
84
|
-
"Button--fullWidth",
|
|
85
|
-
"Button--primary",
|
|
86
|
-
"Button--secondary",
|
|
87
|
-
"Button--invisible",
|
|
88
|
-
"Button--invisible-noVisuals",
|
|
89
|
-
"Button--link",
|
|
90
|
-
"Button--danger",
|
|
91
|
-
"Button--iconOnly"
|
|
92
70
|
]
|
|
93
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\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:not(:disabled) {\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:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\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 fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\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\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='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 fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\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 fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\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\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: 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\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: 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 &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* 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"]}
|
|
1
|
+
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4, 4px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\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:not(:disabled) {\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:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\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 fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\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\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='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 fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\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 fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\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\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: 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\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: 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 &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* 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"]}
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
flex-direction: row;
|
|
28
28
|
justify-content: space-between;
|
|
29
29
|
align-items: center;
|
|
30
|
-
gap: var(--
|
|
30
|
+
gap: var(--base-size-4, 4px);
|
|
31
31
|
min-width: max-content;
|
|
32
32
|
|
|
33
33
|
/* mobile friendly sizing */
|
|
@@ -280,7 +280,8 @@ summary.Button {
|
|
|
280
280
|
text-decoration: underline;
|
|
281
281
|
}
|
|
282
282
|
|
|
283
|
-
&:focus-visible,
|
|
283
|
+
&:focus-visible,
|
|
284
|
+
&:focus {
|
|
284
285
|
outline-offset: 2px;
|
|
285
286
|
}
|
|
286
287
|
|
|
@@ -327,7 +328,6 @@ summary.Button {
|
|
|
327
328
|
}
|
|
328
329
|
}
|
|
329
330
|
|
|
330
|
-
|
|
331
331
|
.Button--iconOnly {
|
|
332
332
|
display: grid;
|
|
333
333
|
place-content: center;
|
|
@@ -23,20 +23,5 @@
|
|
|
23
23
|
".flash-banner",
|
|
24
24
|
".flash-full",
|
|
25
25
|
".warning"
|
|
26
|
-
],
|
|
27
|
-
"classes": [
|
|
28
|
-
"flash",
|
|
29
|
-
"octicon",
|
|
30
|
-
"flash-messages",
|
|
31
|
-
"flash-close",
|
|
32
|
-
"flash-action",
|
|
33
|
-
"btn",
|
|
34
|
-
"btn-primary",
|
|
35
|
-
"flash-warn",
|
|
36
|
-
"flash-error",
|
|
37
|
-
"flash-success",
|
|
38
|
-
"flash-full",
|
|
39
|
-
"flash-banner",
|
|
40
|
-
"warning"
|
|
41
26
|
]
|
|
42
27
|
}
|
|
@@ -21,25 +21,5 @@
|
|
|
21
21
|
".Label--closed",
|
|
22
22
|
".Label--done",
|
|
23
23
|
".Label--sponsors"
|
|
24
|
-
],
|
|
25
|
-
"classes": [
|
|
26
|
-
"labels",
|
|
27
|
-
"Label",
|
|
28
|
-
"label",
|
|
29
|
-
"Label--large",
|
|
30
|
-
"Label--inline",
|
|
31
|
-
"Label--primary",
|
|
32
|
-
"Label--secondary",
|
|
33
|
-
"Label--accent",
|
|
34
|
-
"Label--info",
|
|
35
|
-
"Label--success",
|
|
36
|
-
"Label--attention",
|
|
37
|
-
"Label--warning",
|
|
38
|
-
"Label--severe",
|
|
39
|
-
"Label--danger",
|
|
40
|
-
"Label--open",
|
|
41
|
-
"Label--closed",
|
|
42
|
-
"Label--done",
|
|
43
|
-
"Label--sponsors"
|
|
44
24
|
]
|
|
45
25
|
}
|
|
@@ -15,13 +15,5 @@
|
|
|
15
15
|
".Link--muted:hover [class*=color-fg]",
|
|
16
16
|
".Link--primary:hover [class*=color-fg]",
|
|
17
17
|
".Link--secondary:hover [class*=color-fg]"
|
|
18
|
-
],
|
|
19
|
-
"classes": [
|
|
20
|
-
"Link",
|
|
21
|
-
"Link--primary",
|
|
22
|
-
"Link--secondary",
|
|
23
|
-
"Link--muted",
|
|
24
|
-
"Link--onHover",
|
|
25
|
-
"color-fg"
|
|
26
18
|
]
|
|
27
19
|
}
|
|
@@ -35,23 +35,5 @@
|
|
|
35
35
|
".Popover-message--right:before",
|
|
36
36
|
".Popover-message--large",
|
|
37
37
|
".Popover-message>.btn-octicon"
|
|
38
|
-
],
|
|
39
|
-
"classes": [
|
|
40
|
-
"Popover",
|
|
41
|
-
"Popover-message",
|
|
42
|
-
"Popover-message--no-caret",
|
|
43
|
-
"Popover-message--bottom-left",
|
|
44
|
-
"Popover-message--bottom-right",
|
|
45
|
-
"Popover-message--bottom",
|
|
46
|
-
"Popover-message--top-right",
|
|
47
|
-
"Popover-message--top-left",
|
|
48
|
-
"Popover-message--left-bottom",
|
|
49
|
-
"Popover-message--left-top",
|
|
50
|
-
"Popover-message--left",
|
|
51
|
-
"Popover-message--right-bottom",
|
|
52
|
-
"Popover-message--right-top",
|
|
53
|
-
"Popover-message--right",
|
|
54
|
-
"Popover-message--large",
|
|
55
|
-
"btn-octicon"
|
|
56
38
|
]
|
|
57
39
|
}
|
|
@@ -8,13 +8,5 @@
|
|
|
8
8
|
".Subhead-description",
|
|
9
9
|
".Subhead-actions",
|
|
10
10
|
".Subhead-actions+.Subhead-description"
|
|
11
|
-
],
|
|
12
|
-
"classes": [
|
|
13
|
-
"Subhead",
|
|
14
|
-
"Subhead--spacious",
|
|
15
|
-
"Subhead-heading",
|
|
16
|
-
"Subhead-heading--danger",
|
|
17
|
-
"Subhead-description",
|
|
18
|
-
"Subhead-actions"
|
|
19
11
|
]
|
|
20
12
|
}
|
|
@@ -12,14 +12,5 @@
|
|
|
12
12
|
".TimelineItem--condensed",
|
|
13
13
|
".TimelineItem--condensed:last-child",
|
|
14
14
|
".TimelineItem--condensed .TimelineItem-badge"
|
|
15
|
-
],
|
|
16
|
-
"classes": [
|
|
17
|
-
"TimelineItem",
|
|
18
|
-
"TimelineItem-badge",
|
|
19
|
-
"TimelineItem-badge--success",
|
|
20
|
-
"TimelineItem-body",
|
|
21
|
-
"TimelineItem-avatar",
|
|
22
|
-
"TimelineItem-break",
|
|
23
|
-
"TimelineItem--condensed"
|
|
24
15
|
]
|
|
25
16
|
}
|
|
@@ -8,11 +8,5 @@
|
|
|
8
8
|
".Truncate>.Truncate-text.Truncate-text--expandable:active",
|
|
9
9
|
".Truncate>.Truncate-text.Truncate-text--expandable:focus",
|
|
10
10
|
".Truncate>.Truncate-text.Truncate-text--expandable:hover"
|
|
11
|
-
],
|
|
12
|
-
"classes": [
|
|
13
|
-
"Truncate",
|
|
14
|
-
"Truncate-text",
|
|
15
|
-
"Truncate-text--primary",
|
|
16
|
-
"Truncate-text--expandable"
|
|
17
11
|
]
|
|
18
12
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import '@oddbird/popover-polyfill';
|
|
2
|
+
export default class FocusGroupElement extends HTMLElement {
|
|
3
|
+
#private;
|
|
4
|
+
get nowrap(): boolean;
|
|
5
|
+
set nowrap(value: boolean);
|
|
6
|
+
get direction(): 'horizontal' | 'vertical' | 'both';
|
|
7
|
+
set direction(value: 'horizontal' | 'vertical' | 'both');
|
|
8
|
+
get retain(): boolean;
|
|
9
|
+
set retain(value: boolean);
|
|
10
|
+
get mnemonics(): boolean;
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
disconnectedCallback(): void;
|
|
13
|
+
handleEvent(event: Event): void;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
interface Window {
|
|
17
|
+
FocusGroupElement: typeof FocusGroupElement;
|
|
18
|
+
}
|
|
19
|
+
}
|