primer_view_components 0.0.111 → 0.0.113
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +68 -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 +3 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +0 -15
- data/app/components/primer/alpha/auto_complete.css +1 -0
- data/app/components/primer/alpha/auto_complete.css.json +1 -0
- data/app/components/primer/alpha/auto_complete.css.map +1 -0
- data/app/components/primer/alpha/auto_complete.pcss +118 -0
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +0 -1
- data/app/components/primer/alpha/button_marketing.css +1 -0
- data/app/components/primer/alpha/button_marketing.css.json +1 -0
- data/app/components/primer/alpha/button_marketing.css.map +1 -0
- data/app/components/primer/alpha/button_marketing.pcss +175 -0
- data/app/components/primer/alpha/dialog/body.rb +3 -0
- data/app/components/primer/alpha/dialog/footer.rb +3 -0
- data/app/components/primer/alpha/dialog/header.rb +3 -0
- data/app/components/primer/alpha/dialog.css +1 -0
- data/app/components/primer/alpha/dialog.css.json +1 -0
- data/app/components/primer/alpha/dialog.css.map +1 -0
- data/app/components/primer/alpha/dialog.pcss +484 -0
- data/app/components/primer/alpha/dialog.rb +3 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.d.ts +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.html.erb +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.js +0 -0
- data/app/components/primer/alpha/dropdown/menu.rb +105 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.ts +0 -0
- data/app/components/primer/alpha/dropdown.css +1 -0
- data/app/components/primer/alpha/dropdown.css.json +1 -0
- data/app/components/primer/{dropdown.css.map → alpha/dropdown.css.map} +1 -1
- data/app/components/primer/{dropdown.d.ts → alpha/dropdown.d.ts} +0 -0
- data/app/components/primer/{dropdown.html.erb → alpha/dropdown.html.erb} +0 -0
- data/app/components/primer/{dropdown.js → alpha/dropdown.js} +0 -0
- data/app/components/primer/{dropdown.pcss → alpha/dropdown.pcss} +1 -1
- data/app/components/primer/alpha/dropdown.rb +154 -0
- data/app/components/primer/{dropdown.ts → alpha/dropdown.ts} +0 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.css +1 -0
- data/app/components/primer/alpha/tab_nav.css.json +1 -0
- data/app/components/primer/alpha/tab_nav.css.map +1 -0
- data/app/components/primer/alpha/tab_nav.pcss +100 -0
- data/app/components/primer/alpha/text_field.css +3 -0
- data/app/components/primer/alpha/text_field.css.json +1 -0
- data/app/components/primer/alpha/text_field.css.map +1 -0
- data/app/components/primer/alpha/text_field.pcss +683 -0
- data/app/components/primer/alpha/toggle_switch.d.ts +1 -1
- data/app/components/primer/alpha/toggle_switch.js +7 -4
- data/app/components/primer/alpha/toggle_switch.ts +7 -3
- data/app/components/primer/alpha/underline_nav.css +1 -0
- data/app/components/primer/alpha/underline_nav.css.json +1 -0
- data/app/components/primer/alpha/underline_nav.css.map +1 -0
- data/app/components/primer/alpha/underline_nav.pcss +133 -0
- data/app/components/primer/beta/border_box.css +1 -0
- data/app/components/primer/beta/border_box.css.json +1 -0
- data/app/components/primer/beta/border_box.css.map +1 -0
- data/app/components/primer/beta/border_box.pcss +284 -0
- data/app/components/primer/beta/button_group.css +1 -0
- data/app/components/primer/beta/button_group.css.json +1 -0
- data/app/components/primer/beta/button_group.css.map +1 -0
- data/app/components/primer/beta/button_group.pcss +92 -0
- data/app/components/primer/{clipboard_copy.d.ts → beta/clipboard_copy.d.ts} +0 -0
- data/app/components/primer/{clipboard_copy.html.erb → beta/clipboard_copy.html.erb} +0 -0
- data/app/components/primer/{clipboard_copy.js → beta/clipboard_copy.js} +0 -0
- data/app/components/primer/beta/clipboard_copy.rb +50 -0
- data/app/components/primer/{clipboard_copy.ts → beta/clipboard_copy.ts} +0 -0
- data/app/components/primer/beta/link.css +1 -0
- data/app/components/primer/beta/link.css.json +1 -0
- data/app/components/primer/beta/link.css.map +1 -0
- data/app/components/primer/beta/link.pcss +60 -0
- data/app/components/primer/{popover_component.css → beta/popover.css} +0 -0
- data/app/components/primer/beta/popover.css.json +1 -0
- data/app/components/primer/beta/popover.css.map +1 -0
- data/app/components/primer/{popover_component.html.erb → beta/popover.html.erb} +0 -0
- data/app/components/primer/{popover_component.pcss → beta/popover.pcss} +5 -5
- data/app/components/primer/beta/popover.rb +127 -0
- data/app/components/primer/beta/relative_time.rb +160 -0
- data/app/components/primer/button_component.css +1 -0
- data/app/components/primer/button_component.css.json +1 -0
- data/app/components/primer/button_component.css.map +1 -0
- data/app/components/primer/button_component.pcss +557 -0
- data/app/components/primer/button_component.rb +1 -1
- data/app/components/primer/clipboard_copy.rb +2 -43
- data/app/components/primer/component.rb +6 -2
- data/app/components/primer/dropdown/menu.rb +5 -90
- data/app/components/primer/dropdown.rb +2 -145
- data/app/components/primer/local_time.d.ts +1 -1
- data/app/components/primer/local_time.js +1 -1
- data/app/components/primer/local_time.rb +3 -1
- data/app/components/primer/local_time.ts +1 -1
- data/app/components/primer/menu_component.css +1 -0
- data/app/components/primer/menu_component.css.json +1 -0
- data/app/components/primer/menu_component.css.map +1 -0
- data/app/components/primer/menu_component.pcss +119 -0
- data/app/components/primer/popover_component.rb +3 -120
- data/app/components/primer/primer.d.ts +2 -2
- data/app/components/primer/primer.js +2 -2
- data/app/components/primer/primer.pcss +20 -3
- data/app/components/primer/primer.ts +2 -2
- data/app/components/primer/time_ago_component.d.ts +1 -1
- data/app/components/primer/time_ago_component.js +1 -1
- data/app/components/primer/time_ago_component.rb +2 -1
- data/app/components/primer/time_ago_component.ts +1 -1
- data/app/forms/submit_button_form.rb +8 -2
- data/app/helpers/primer/form_helper.rb +12 -0
- data/lib/postcss_mixins/clearfix.pcss +12 -0
- data/lib/primer/deprecations.rb +96 -24
- data/lib/primer/deprecations.yml +68 -0
- data/lib/primer/forms/base.rb +7 -20
- data/lib/primer/forms/base_component.rb +15 -1
- data/lib/primer/forms/button.html.erb +4 -0
- data/lib/primer/forms/button.rb +68 -0
- data/lib/primer/forms/check_box.html.erb +2 -2
- data/lib/primer/forms/check_box.rb +1 -1
- data/lib/primer/forms/check_box_group.html.erb +2 -2
- data/lib/primer/forms/dsl/button_input.rb +29 -0
- data/lib/primer/forms/dsl/input_methods.rb +7 -2
- data/lib/primer/forms/dsl/submit_button_input.rb +1 -0
- data/lib/primer/forms/dsl/text_field_input.rb +0 -7
- data/lib/primer/forms/radio_button.html.erb +2 -2
- data/lib/primer/forms/radio_button.rb +1 -1
- data/lib/primer/forms/radio_button_group.html.erb +2 -2
- data/lib/primer/forms/select_list.html.erb +1 -1
- data/lib/primer/forms/select_list.rb +4 -1
- data/lib/primer/forms/submit_button.html.erb +1 -4
- data/lib/primer/forms/submit_button.rb +1 -37
- data/lib/primer/forms/text_area.html.erb +1 -1
- data/lib/primer/forms/text_area.rb +5 -1
- data/lib/primer/forms/text_field.html.erb +1 -1
- data/lib/primer/forms/text_field.rb +11 -0
- data/lib/primer/forms/utils.rb +28 -0
- data/lib/primer/view_components/audited.rb +14 -0
- data/lib/primer/view_components/engine.rb +1 -0
- data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +2 -2
- data/lib/primer/view_components/linters/deprecated_components_counter.rb +15 -4
- data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +3 -18
- data/lib/primer/view_components/linters/severity_schema.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/cop/primer/component_name_migration.rb +2 -2
- data/lib/tasks/docs.rake +6 -5
- data/previews/primer/alpha/auto_complete_preview.rb +12 -0
- data/previews/primer/alpha/button_marketing_preview.rb +36 -0
- data/previews/primer/alpha/dropdown_preview.rb +210 -0
- data/previews/primer/alpha/segmented_control_preview.rb +9 -6
- data/previews/primer/alpha/tab_nav_preview.rb +55 -0
- data/previews/primer/alpha/text_field_preview.rb +77 -52
- data/previews/primer/beta/border_box_preview.rb +65 -13
- data/previews/primer/beta/clipboard_copy_preview/element.html.erb +2 -0
- data/previews/primer/beta/clipboard_copy_preview.rb +39 -0
- data/previews/primer/beta/link_preview.rb +28 -0
- data/previews/primer/beta/popover_preview.rb +79 -0
- data/previews/primer/beta/relative_time_preview.rb +271 -0
- data/previews/primer/forms/forms_preview.rb +1 -0
- data/static/arguments.json +183 -73
- data/static/audited_at.json +10 -6
- data/static/constants.json +180 -50
- data/static/statuses.json +12 -8
- metadata +86 -29
- data/app/components/primer/dropdown.css +0 -1
- data/app/components/primer/dropdown.css.json +0 -1
- data/app/components/primer/image.rb +0 -7
- data/app/components/primer/popover_component.css.json +0 -1
- data/app/components/primer/popover_component.css.map +0 -1
- data/app/components/primer/progress_bar_component.rb +0 -7
- data/previews/primer/clipboard_copy_preview/element.html.erb +0 -2
- data/previews/primer/clipboard_copy_preview.rb +0 -37
- data/previews/primer/dropdown_preview.rb +0 -208
- data/previews/primer/popover_component_preview.rb +0 -34
@@ -0,0 +1,50 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Beta
|
5
|
+
# Use `ClipboardCopy` to copy element text content or input values to the clipboard.
|
6
|
+
#
|
7
|
+
# @accessibility
|
8
|
+
# Always set an accessible label to help the user interact with the component.
|
9
|
+
class ClipboardCopy < Primer::Component
|
10
|
+
status :beta
|
11
|
+
|
12
|
+
# @example Default
|
13
|
+
# <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
|
14
|
+
#
|
15
|
+
# @example With text instead of icons
|
16
|
+
# <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy")) do %>
|
17
|
+
# Click to copy!
|
18
|
+
# <% end %>
|
19
|
+
#
|
20
|
+
# @example Copying from an element
|
21
|
+
# <%= render(Primer::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
|
22
|
+
# <div id="blob-path">src/index.js</div>
|
23
|
+
#
|
24
|
+
# @param aria-label [String] String that will be read to screenreaders when the component is focused
|
25
|
+
# @param value [String] Text to copy into the users clipboard when they click the component.
|
26
|
+
# @param for [String] Element id from where to get the copied value.
|
27
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
28
|
+
def initialize(value: nil, **system_arguments)
|
29
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
30
|
+
@value = value
|
31
|
+
|
32
|
+
validate!
|
33
|
+
|
34
|
+
@system_arguments[:tag] = "clipboard-copy"
|
35
|
+
@system_arguments[:value] = value if value.present?
|
36
|
+
end
|
37
|
+
|
38
|
+
# :nodoc:
|
39
|
+
def before_render
|
40
|
+
validate_aria_label if content.blank?
|
41
|
+
end
|
42
|
+
|
43
|
+
private
|
44
|
+
|
45
|
+
def validate!
|
46
|
+
raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
|
47
|
+
end
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
File without changes
|
@@ -0,0 +1 @@
|
|
1
|
+
.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"beta/link","selectors":[".Link",".Link:hover",".Link:focus",".Link:focus-visible",".Link--primary",".Link--primary:hover",".Link--secondary",".Link--secondary:hover",".Link--muted",".Link--muted:hover",".Link--onHover:hover",".Link--muted:hover [class*=color-fg]",".Link--primary:hover [class*=color-fg]",".Link--secondary:hover [class*=color-fg]"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,4BAWF,CATE,YAEE,cAAe,CADf,yBAEF,CAEA,gCAEE,gBACF,CAGF,eACE,uCAKF,CAHE,qBACE,sCACF,CAGF,iBACE,qCAKF,CAHE,uBACE,sCACF,CAGF,aACE,qCAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,sCAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n color: var(--color-accent-fg);\n\n &:hover {\n text-decoration: underline;\n cursor: pointer;\n }\n\n &:focus,\n &:focus-visible {\n outline-offset: 0;\n }\n}\n\n.Link--primary {\n color: var(--color-fg-default) !important;\n\n &:hover {\n color: var(--color-accent-fg) !important;\n }\n}\n\n.Link--secondary {\n color: var(--color-fg-muted) !important;\n\n &:hover {\n color: var(--color-accent-fg) !important;\n }\n}\n\n.Link--muted {\n color: var(--color-fg-muted) !important;\n\n &:hover {\n color: var(--color-accent-fg) !important;\n text-decoration: none;\n }\n}\n\n/* Set the link color only on hover\n Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n &:hover {\n color: var(--color-accent-fg) !important;\n text-decoration: underline;\n cursor: pointer;\n }\n}\n\n/* When using a color utility class inside of a link class\n color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n &:hover [class*='color-fg'] {\n color: inherit !important;\n }\n}\n"]}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
/* Links */
|
2
|
+
|
3
|
+
.Link {
|
4
|
+
color: var(--color-accent-fg);
|
5
|
+
|
6
|
+
&:hover {
|
7
|
+
text-decoration: underline;
|
8
|
+
cursor: pointer;
|
9
|
+
}
|
10
|
+
|
11
|
+
&:focus,
|
12
|
+
&:focus-visible {
|
13
|
+
outline-offset: 0;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
.Link--primary {
|
18
|
+
color: var(--color-fg-default) !important;
|
19
|
+
|
20
|
+
&:hover {
|
21
|
+
color: var(--color-accent-fg) !important;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
.Link--secondary {
|
26
|
+
color: var(--color-fg-muted) !important;
|
27
|
+
|
28
|
+
&:hover {
|
29
|
+
color: var(--color-accent-fg) !important;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
.Link--muted {
|
34
|
+
color: var(--color-fg-muted) !important;
|
35
|
+
|
36
|
+
&:hover {
|
37
|
+
color: var(--color-accent-fg) !important;
|
38
|
+
text-decoration: none;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
/* Set the link color only on hover
|
43
|
+
Useful when you want only part of a link to turn blue on hover */
|
44
|
+
.Link--onHover {
|
45
|
+
&:hover {
|
46
|
+
color: var(--color-accent-fg) !important;
|
47
|
+
text-decoration: underline;
|
48
|
+
cursor: pointer;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
/* When using a color utility class inside of a link class
|
53
|
+
color should change with link on hover. */
|
54
|
+
.Link--secondary,
|
55
|
+
.Link--primary,
|
56
|
+
.Link--muted {
|
57
|
+
&:hover [class*='color-fg'] {
|
58
|
+
color: inherit !important;
|
59
|
+
}
|
60
|
+
}
|
File without changes
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"beta/popover","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".Popover-message--bottom-left:after",".Popover-message--bottom-left:before",".Popover-message--bottom-right:after",".Popover-message--bottom-right:before",".Popover-message--bottom:after",".Popover-message--bottom:before",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".Popover-message--left-bottom:after",".Popover-message--left-bottom:before",".Popover-message--left-top:after",".Popover-message--left-top:before",".Popover-message--left:after",".Popover-message--left:before",".Popover-message--right-bottom:after",".Popover-message--right-bottom:before",".Popover-message--right-top:after",".Popover-message--right-top:before",".Popover-message--right:after",".Popover-message--right:before",".Popover-message--large",".Popover-message>.btn-octicon"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,4CAA8C,CAJ9C,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,wEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--color-canvas-overlay);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--color-border-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--color-canvas-overlay);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--color-border-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--color-canvas-overlay);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--color-border-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--color-canvas-overlay);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--color-border-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--color-canvas-overlay);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--primer-stack-gap-condensed, 8px);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
|
File without changes
|
@@ -67,7 +67,7 @@
|
|
67
67
|
}
|
68
68
|
}
|
69
69
|
|
70
|
-
/* Top
|
70
|
+
/* Top and Bottom: Right-oriented carets */
|
71
71
|
.Popover-message--top-right,
|
72
72
|
.Popover-message--bottom-right {
|
73
73
|
right: -9px;
|
@@ -88,7 +88,7 @@
|
|
88
88
|
}
|
89
89
|
}
|
90
90
|
|
91
|
-
/* Top
|
91
|
+
/* Top and Bottom: Left-oriented carets */
|
92
92
|
.Popover-message--top-left,
|
93
93
|
.Popover-message--bottom-left {
|
94
94
|
left: -9px;
|
@@ -105,7 +105,7 @@
|
|
105
105
|
}
|
106
106
|
}
|
107
107
|
|
108
|
-
/* Right-
|
108
|
+
/* Right- and Left-oriented carets */
|
109
109
|
.Popover-message--right,
|
110
110
|
.Popover-message--right-top,
|
111
111
|
.Popover-message--right-bottom,
|
@@ -159,7 +159,7 @@
|
|
159
159
|
}
|
160
160
|
}
|
161
161
|
|
162
|
-
/* Right
|
162
|
+
/* Right and Left: Top-oriented carets */
|
163
163
|
.Popover-message--right-top,
|
164
164
|
.Popover-message--left-top {
|
165
165
|
&::before,
|
@@ -168,7 +168,7 @@
|
|
168
168
|
}
|
169
169
|
}
|
170
170
|
|
171
|
-
/* Right
|
171
|
+
/* Right and Left: Bottom-oriented carets */
|
172
172
|
.Popover-message--right-bottom,
|
173
173
|
.Popover-message--left-bottom {
|
174
174
|
&::before,
|
@@ -0,0 +1,127 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Beta
|
5
|
+
# Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
|
6
|
+
#
|
7
|
+
# By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
|
8
|
+
class Popover < Primer::Component
|
9
|
+
status :beta
|
10
|
+
|
11
|
+
CARET_DEFAULT = :top
|
12
|
+
CARET_MAPPINGS = {
|
13
|
+
CARET_DEFAULT => "",
|
14
|
+
:bottom => "Popover-message--bottom",
|
15
|
+
:bottom_right => "Popover-message--bottom-right",
|
16
|
+
:bottom_left => "Popover-message--bottom-left",
|
17
|
+
:left => "Popover-message--left",
|
18
|
+
:left_bottom => "Popover-message--left-bottom",
|
19
|
+
:left_top => "Popover-message--left-top",
|
20
|
+
:right => "Popover-message--right",
|
21
|
+
:right_bottom => "Popover-message--right-bottom",
|
22
|
+
:right_top => "Popover-message--right-top",
|
23
|
+
:top_left => "Popover-message--top-left",
|
24
|
+
:top_right => "Popover-message--top-right"
|
25
|
+
}.freeze
|
26
|
+
|
27
|
+
DEFAULT_HEADING_TAG = :h4
|
28
|
+
|
29
|
+
# The heading
|
30
|
+
#
|
31
|
+
# @param tag [Symbol] (Primer::Beta::Popover::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
|
32
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
33
|
+
renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
|
34
|
+
system_arguments[:tag] = tag
|
35
|
+
system_arguments[:mb] ||= 2
|
36
|
+
|
37
|
+
Primer::Beta::Heading.new(**system_arguments)
|
38
|
+
}
|
39
|
+
|
40
|
+
# The body
|
41
|
+
#
|
42
|
+
# @param caret [Symbol] <%= one_of(Primer::Beta::Popover::CARET_MAPPINGS.keys) %>
|
43
|
+
# @param large [Boolean] Whether to use the large version of the component.
|
44
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
45
|
+
renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
|
46
|
+
@body_arguments = system_arguments
|
47
|
+
@body_arguments[:classes] = class_names(
|
48
|
+
@body_arguments[:classes],
|
49
|
+
"Popover-message Box",
|
50
|
+
CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
|
51
|
+
"Popover-message--large" => large
|
52
|
+
)
|
53
|
+
@body_arguments[:p] ||= 4
|
54
|
+
@body_arguments[:mt] ||= 2
|
55
|
+
@body_arguments[:mx] ||= :auto
|
56
|
+
@body_arguments[:text_align] ||= :left
|
57
|
+
@body_arguments[:box_shadow] ||= :large
|
58
|
+
|
59
|
+
Primer::Content.new
|
60
|
+
}
|
61
|
+
|
62
|
+
# @example Default
|
63
|
+
# <%= render Primer::Beta::Popover.new do |component| %>
|
64
|
+
# <% component.with_heading do %>
|
65
|
+
# Activity feed
|
66
|
+
# <% end %>
|
67
|
+
# <% component.with_body do %>
|
68
|
+
# This is the Popover body.
|
69
|
+
# <% end %>
|
70
|
+
# <% end %>
|
71
|
+
#
|
72
|
+
# @example Large
|
73
|
+
# <%= render Primer::Beta::Popover.new do |component| %>
|
74
|
+
# <% component.with_heading do %>
|
75
|
+
# Activity feed
|
76
|
+
# <% end %>
|
77
|
+
# <% component.with_body(large: true) do %>
|
78
|
+
# This is the large Popover body.
|
79
|
+
# <% end %>
|
80
|
+
# <% end %>
|
81
|
+
#
|
82
|
+
# @example Caret position
|
83
|
+
# <%= render Primer::Beta::Popover.new do |component| %>
|
84
|
+
# <% component.with_heading do %>
|
85
|
+
# Activity feed
|
86
|
+
# <% end %>
|
87
|
+
# <% component.with_body(caret: :left) do %>
|
88
|
+
# This is the Popover body.
|
89
|
+
# <% end %>
|
90
|
+
# <% end %>
|
91
|
+
#
|
92
|
+
# @example With multiple elements in the body
|
93
|
+
# <%= render Primer::Beta::Popover.new do |component| %>
|
94
|
+
# <% component.with_heading do %>
|
95
|
+
# Activity feed
|
96
|
+
# <% end %>
|
97
|
+
# <% component.with_body(caret: :left) do %>
|
98
|
+
# <p>This is the Popover body.</p>
|
99
|
+
# <%= render Primer::ButtonComponent.new(type: :submit) do %>
|
100
|
+
# Got it!
|
101
|
+
# <% end %>
|
102
|
+
# <% end %>
|
103
|
+
# <% end %>
|
104
|
+
#
|
105
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
106
|
+
def initialize(**system_arguments)
|
107
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
108
|
+
@system_arguments[:tag] = :div
|
109
|
+
@system_arguments[:classes] = class_names(
|
110
|
+
system_arguments[:classes],
|
111
|
+
"Popover"
|
112
|
+
)
|
113
|
+
@system_arguments[:position] ||= :relative
|
114
|
+
@system_arguments[:right] = false unless @system_arguments.delete(:right)
|
115
|
+
@system_arguments[:left] = false unless @system_arguments.delete(:left)
|
116
|
+
end
|
117
|
+
|
118
|
+
def render?
|
119
|
+
body.present?
|
120
|
+
end
|
121
|
+
|
122
|
+
def body_component
|
123
|
+
Primer::Box.new(**@body_arguments)
|
124
|
+
end
|
125
|
+
end
|
126
|
+
end
|
127
|
+
end
|
@@ -0,0 +1,160 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Beta
|
5
|
+
# Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
|
6
|
+
class RelativeTime < Primer::Component
|
7
|
+
status :beta
|
8
|
+
|
9
|
+
TENSE_DEFAULT = :auto
|
10
|
+
TENSE_OPTIONS = [TENSE_DEFAULT, :past, :future].freeze
|
11
|
+
|
12
|
+
FORMAT_DEFAULT = :auto
|
13
|
+
FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze
|
14
|
+
|
15
|
+
SECOND_DEFAULT = nil
|
16
|
+
SECOND_MAPPINGS = {
|
17
|
+
SECOND_DEFAULT => nil,
|
18
|
+
:numeric => "numeric",
|
19
|
+
:two_digit => "2-digit"
|
20
|
+
}.freeze
|
21
|
+
SECOND_OPTIONS = SECOND_MAPPINGS.keys
|
22
|
+
|
23
|
+
MINUTE_DEFAULT = nil
|
24
|
+
MINUTE_MAPPINGS = {
|
25
|
+
MINUTE_DEFAULT => nil,
|
26
|
+
:numeric => "numeric",
|
27
|
+
:two_digit => "2-digit"
|
28
|
+
}.freeze
|
29
|
+
MINUTE_OPTIONS = MINUTE_MAPPINGS.keys
|
30
|
+
|
31
|
+
HOUR_DEFAULT = nil
|
32
|
+
HOUR_MAPPINGS = {
|
33
|
+
HOUR_DEFAULT => nil,
|
34
|
+
:numeric => "numeric",
|
35
|
+
:two_digit => "2-digit"
|
36
|
+
}.freeze
|
37
|
+
HOUR_OPTIONS = HOUR_MAPPINGS.keys
|
38
|
+
|
39
|
+
WEEKDAY_DEFAULT = nil
|
40
|
+
WEEKDAY_OPTIONS = [WEEKDAY_DEFAULT, :long, :short, :narrow].freeze
|
41
|
+
|
42
|
+
DAY_DEFAULT = nil
|
43
|
+
DAY_MAPPINGS = {
|
44
|
+
DAY_DEFAULT => nil,
|
45
|
+
:numeric => "numeric",
|
46
|
+
:two_digit => "2-digit"
|
47
|
+
}.freeze
|
48
|
+
DAY_OPTIONS = DAY_MAPPINGS.keys
|
49
|
+
|
50
|
+
MONTH_DEFAULT = nil
|
51
|
+
MONTH_MAPPINGS = {
|
52
|
+
DAY_DEFAULT => nil,
|
53
|
+
:numeric => "numeric",
|
54
|
+
:two_digit => "2-digit",
|
55
|
+
:short => "short",
|
56
|
+
:long => "long",
|
57
|
+
:narrow => "narrow"
|
58
|
+
}.freeze
|
59
|
+
MONTH_OPTIONS = MONTH_MAPPINGS.keys
|
60
|
+
|
61
|
+
YEAR_DEFAULT = nil
|
62
|
+
YEAR_MAPPINGS = {
|
63
|
+
DAY_DEFAULT => nil,
|
64
|
+
:numeric => "numeric",
|
65
|
+
:two_digit => "2-digit"
|
66
|
+
}.freeze
|
67
|
+
YEAR_OPTIONS = YEAR_MAPPINGS.keys
|
68
|
+
|
69
|
+
TIMEZONENAME_DEFAULT = nil
|
70
|
+
TIMEZONE_MAPPINGS = {
|
71
|
+
DAY_DEFAULT => nil,
|
72
|
+
:long => "long",
|
73
|
+
:short => "short",
|
74
|
+
:short_offset => "shortOffset",
|
75
|
+
:long_offset => "longOffset",
|
76
|
+
:short_generic => "shortGeneric",
|
77
|
+
:long_generic => "longGeneric"
|
78
|
+
}.freeze
|
79
|
+
TIMEZONENAME_OPTIONS = TIMEZONE_MAPPINGS.keys
|
80
|
+
|
81
|
+
PRECISION_DEFAULT = nil
|
82
|
+
PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
|
83
|
+
|
84
|
+
# @example Default
|
85
|
+
# <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400))) %>
|
86
|
+
#
|
87
|
+
# @example Past Time
|
88
|
+
# <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), tense: :past)) %>
|
89
|
+
#
|
90
|
+
# @example Elapsed Time
|
91
|
+
# <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), format: :elapsed)) %>
|
92
|
+
#
|
93
|
+
# @param datetime [Time] The time to be formatted.
|
94
|
+
# @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
|
95
|
+
# @param prefix [sring] What to prefix the relative ime display with.
|
96
|
+
# @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
|
97
|
+
# @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
|
98
|
+
# @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
|
99
|
+
# @param weekday [Symbol] What format weekdays should take. <%= one_of(Primer::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
|
100
|
+
# @param day [Symbol] What format days should take. <%= one_of(Primer::Beta::RelativeTime::DAY_OPTIONS) %>
|
101
|
+
# @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
|
102
|
+
# @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
|
103
|
+
# @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
|
104
|
+
# @param threshold [string] The threshold at which relative time displays become absolute.
|
105
|
+
# @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
|
106
|
+
# @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
|
107
|
+
# @param lang [string] The language to use.
|
108
|
+
# @param title [string] Provide a custom title to the element.
|
109
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
110
|
+
def initialize(
|
111
|
+
datetime:,
|
112
|
+
tense: TENSE_DEFAULT,
|
113
|
+
prefix: nil,
|
114
|
+
second: SECOND_DEFAULT,
|
115
|
+
minute: MINUTE_DEFAULT,
|
116
|
+
hour: HOUR_DEFAULT,
|
117
|
+
weekday: WEEKDAY_DEFAULT,
|
118
|
+
day: DAY_DEFAULT,
|
119
|
+
month: MONTH_DEFAULT,
|
120
|
+
year: YEAR_DEFAULT,
|
121
|
+
time_zone_name: TIMEZONENAME_DEFAULT,
|
122
|
+
threshold: nil,
|
123
|
+
precision: PRECISION_DEFAULT,
|
124
|
+
format: nil,
|
125
|
+
lang: nil,
|
126
|
+
title: nil,
|
127
|
+
**system_arguments
|
128
|
+
)
|
129
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
130
|
+
@system_arguments[:tag] = "relative-time"
|
131
|
+
@system_arguments[:tense] = tense if tense.present?
|
132
|
+
@system_arguments[:prefix] = prefix if prefix.present?
|
133
|
+
@system_arguments[:second] = fetch_or_fallback(SECOND_OPTIONS, second, SECOND_DEFAULT) if second.present?
|
134
|
+
@system_arguments[:minute] = fetch_or_fallback(MINUTE_OPTIONS, minute, MINUTE_DEFAULT) if minute.present?
|
135
|
+
@system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
|
136
|
+
@system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
|
137
|
+
@system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
|
138
|
+
@system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
|
139
|
+
@system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
|
140
|
+
@system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
|
141
|
+
@system_arguments[:threshold] = threshold if threshold.present?
|
142
|
+
@system_arguments[:precision] = precision if precision.present?
|
143
|
+
@system_arguments[:title] = title if title.present?
|
144
|
+
@system_arguments[:lang] = lang if lang.present?
|
145
|
+
@system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
|
146
|
+
if datetime.present? && datetime.respond_to?(:iso8601)
|
147
|
+
@datetime = datetime
|
148
|
+
@system_arguments[:datetime] = datetime.iso8601
|
149
|
+
elsif datetime.present?
|
150
|
+
@datetime = Time.iso8601 datetime
|
151
|
+
@system_arguments[:datetime] = @datetime
|
152
|
+
end
|
153
|
+
end
|
154
|
+
|
155
|
+
def call
|
156
|
+
render(Primer::BaseComponent.new(**@system_arguments).with_content(@datetime.strftime("%B %-d, %Y %H:%M")))
|
157
|
+
end
|
158
|
+
end
|
159
|
+
end
|
160
|
+
end
|
@@ -0,0 +1 @@
|
|
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}
|
@@ -0,0 +1 @@
|
|
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"]}
|
@@ -0,0 +1 @@
|
|
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"]}
|