primer_view_components 0.0.111 → 0.0.112
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +30 -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 +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- 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 +2 -3
- 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/{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/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/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/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} +0 -0
- data/app/components/primer/beta/popover.rb +127 -0
- data/app/components/primer/component.rb +2 -2
- data/app/components/primer/dropdown/menu.rb +5 -90
- data/app/components/primer/dropdown.rb +2 -145
- 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 +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +10 -3
- data/app/components/primer/primer.ts +1 -1
- data/lib/primer/deprecations.rb +4 -2
- data/lib/primer/view_components/linters/deprecated_components_counter.rb +15 -4
- data/lib/primer/view_components/linters/severity_schema.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +3 -3
- data/previews/primer/alpha/button_marketing_preview.rb +36 -0
- data/previews/primer/alpha/dropdown_preview.rb +210 -0
- data/previews/primer/alpha/tab_nav_preview.rb +55 -0
- data/previews/primer/beta/border_box_preview.rb +65 -13
- data/previews/primer/beta/link_preview.rb +28 -0
- data/previews/primer/beta/popover_preview.rb +79 -0
- data/static/arguments.json +40 -40
- data/static/audited_at.json +4 -2
- data/static/constants.json +56 -50
- data/static/statuses.json +8 -6
- metadata +54 -23
- 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/dropdown_preview.rb +0 -208
- data/previews/primer/popover_component_preview.rb +0 -34
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
# `Dropdown` is a lightweight context menu for housing navigation and actions.
|
|
6
|
+
# They're great for instances where you don't need the full power (and code) of the SelectMenu.
|
|
7
|
+
class Dropdown < Primer::Component
|
|
8
|
+
status :alpha
|
|
9
|
+
|
|
10
|
+
# Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
|
|
11
|
+
# but it is locked as a `summary` tag.
|
|
12
|
+
renders_one :button, lambda { |**system_arguments|
|
|
13
|
+
@button_arguments = system_arguments
|
|
14
|
+
@button_arguments[:button] = true
|
|
15
|
+
@button_arguments[:dropdown] = @with_caret
|
|
16
|
+
|
|
17
|
+
Primer::Content.new
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
# Required context menu for the dropdown.
|
|
21
|
+
#
|
|
22
|
+
# @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
|
|
23
|
+
# @param direction [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>
|
|
24
|
+
# @param scheme [Symbol] Pass `:dark` for dark mode theming
|
|
25
|
+
# @param header [String] Optional string to display as the header
|
|
26
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
27
|
+
renders_one :menu, "Primer::Alpha::Dropdown::Menu"
|
|
28
|
+
|
|
29
|
+
# @example Default
|
|
30
|
+
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
|
|
31
|
+
# <% c.with_button do %>
|
|
32
|
+
# Dropdown
|
|
33
|
+
# <% end %>
|
|
34
|
+
#
|
|
35
|
+
# <% c.with_menu(header: "Options") do |menu|
|
|
36
|
+
# menu.item { "Item 1" }
|
|
37
|
+
# menu.item { "Item 2" }
|
|
38
|
+
# menu.item { "Item 3" }
|
|
39
|
+
# end %>
|
|
40
|
+
# <% end %>
|
|
41
|
+
#
|
|
42
|
+
# @example With dividers
|
|
43
|
+
#
|
|
44
|
+
# @description
|
|
45
|
+
# Dividers can be used to separate a group of items. They don't have any content.
|
|
46
|
+
# @code
|
|
47
|
+
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
|
|
48
|
+
# <% c.with_button do %>
|
|
49
|
+
# Dropdown
|
|
50
|
+
# <% end %>
|
|
51
|
+
#
|
|
52
|
+
# <% c.with_menu(header: "Options") do |menu|
|
|
53
|
+
# menu.item { "Item 1" }
|
|
54
|
+
# menu.item { "Item 2" }
|
|
55
|
+
# menu.item(divider: true)
|
|
56
|
+
# menu.item { "Item 3" }
|
|
57
|
+
# menu.item { "Item 4" }
|
|
58
|
+
# menu.item(divider: true)
|
|
59
|
+
# menu.item { "Item 5" }
|
|
60
|
+
# menu.item { "Item 6" }
|
|
61
|
+
# end %>
|
|
62
|
+
# <% end %>
|
|
63
|
+
#
|
|
64
|
+
# @example With direction
|
|
65
|
+
# <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c| %>
|
|
66
|
+
# <% c.with_button do %>
|
|
67
|
+
# Dropdown
|
|
68
|
+
# <% end %>
|
|
69
|
+
#
|
|
70
|
+
# <% c.with_menu(header: "Options", direction: :s) do |menu|
|
|
71
|
+
# menu.item { "Item 1" }
|
|
72
|
+
# menu.item { "Item 2" }
|
|
73
|
+
# menu.item { "Item 3" }
|
|
74
|
+
# menu.item { "Item 4" }
|
|
75
|
+
# end %>
|
|
76
|
+
# <% end %>
|
|
77
|
+
#
|
|
78
|
+
# @example With caret
|
|
79
|
+
# <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c| %>
|
|
80
|
+
# <% c.with_button do %>
|
|
81
|
+
# Dropdown
|
|
82
|
+
# <% end %>
|
|
83
|
+
#
|
|
84
|
+
# <% c.with_menu(header: "Options") do |menu|
|
|
85
|
+
# menu.item { "Item 1" }
|
|
86
|
+
# menu.item { "Item 2" }
|
|
87
|
+
# menu.item { "Item 3" }
|
|
88
|
+
# menu.item { "Item 4" }
|
|
89
|
+
# end %>
|
|
90
|
+
# <% end %>
|
|
91
|
+
#
|
|
92
|
+
# @example Customizing the button
|
|
93
|
+
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
|
|
94
|
+
# <% c.with_button(scheme: :primary, size: :small) do %>
|
|
95
|
+
# Dropdown
|
|
96
|
+
# <% end %>
|
|
97
|
+
#
|
|
98
|
+
# <% c.with_menu(header: "Options") do |menu|
|
|
99
|
+
# menu.item { "Item 1" }
|
|
100
|
+
# menu.item { "Item 2" }
|
|
101
|
+
# menu.item { "Item 3" }
|
|
102
|
+
# menu.item { "Item 4" }
|
|
103
|
+
# end %>
|
|
104
|
+
# <% end %>
|
|
105
|
+
#
|
|
106
|
+
# @example Menu as list
|
|
107
|
+
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
|
|
108
|
+
# <% c.with_button do %>
|
|
109
|
+
# Dropdown
|
|
110
|
+
# <% end %>
|
|
111
|
+
#
|
|
112
|
+
# <% c.with_menu(as: :list, header: "Options") do |menu|
|
|
113
|
+
# menu.item { "Item 1" }
|
|
114
|
+
# menu.item { "Item 2" }
|
|
115
|
+
# menu.item(divider: true)
|
|
116
|
+
# menu.item { "Item 3" }
|
|
117
|
+
# menu.item { "Item 4" }
|
|
118
|
+
# end %>
|
|
119
|
+
# <% end %>
|
|
120
|
+
#
|
|
121
|
+
# @example Customizing menu items
|
|
122
|
+
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
|
|
123
|
+
# <% c.with_button do %>
|
|
124
|
+
# Dropdown
|
|
125
|
+
# <% end %>
|
|
126
|
+
#
|
|
127
|
+
# <% c.with_menu(header: "Options") do |menu|
|
|
128
|
+
# menu.item(tag: :button) { "Item 1" }
|
|
129
|
+
# menu.item(classes: "custom-class") { "Item 2" }
|
|
130
|
+
# menu.item { "Item 3" }
|
|
131
|
+
# end %>
|
|
132
|
+
# <% end %>
|
|
133
|
+
#
|
|
134
|
+
# @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
|
|
135
|
+
# @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
|
|
136
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
137
|
+
def initialize(overlay: :default, with_caret: false, **system_arguments)
|
|
138
|
+
@with_caret = with_caret
|
|
139
|
+
|
|
140
|
+
@system_arguments = system_arguments
|
|
141
|
+
@system_arguments[:overlay] = overlay
|
|
142
|
+
@system_arguments[:reset] = true
|
|
143
|
+
@system_arguments[:classes] = class_names(
|
|
144
|
+
@system_arguments[:classes],
|
|
145
|
+
"dropdown"
|
|
146
|
+
)
|
|
147
|
+
end
|
|
148
|
+
|
|
149
|
+
def render?
|
|
150
|
+
button.present? && menu.present?
|
|
151
|
+
end
|
|
152
|
+
end
|
|
153
|
+
end
|
|
154
|
+
end
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.tabnav{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-bottom:var(--primer-stack-gap-normal,16px);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--primer-text-body-size-medium,14px);line-height:23px;padding:var(--base-size-8,8px) var(--primer-control-medium-paddingInline-spacious,16px);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--primer-control-small-gap,4px)}.tabnav-tab .Counter{color:inherit;margin-left:var(--primer-control-small-gap,4px)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--primer-text-body-size-small,12px);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"alpha/tab_nav","selectors":[".tabnav",".tabnav-tabs",".tabnav-tab",".tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])",".tabnav-tab[aria-selected=true]",":is(.tabnav-tab.selected",".tabnav-tab[aria-current]:not([aria-current=false])) .octicon",".tabnav-tab:hover",".tabnav-tab:focus",".tabnav-tab:focus-visible",".tabnav-tab .octicon",".tabnav-tab:active",".tabnav-tab .Counter",".tabnav-extra",".tabnav-extra>.octicon","a.tabnav-extra:hover",".tabnav-btn"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,kFAAoF,CADpF,iDAAmD,CADnD,YAGF,CAEA,aACE,YAAa,CACb,0DAA6D,CAC7D,aACF,CAEA,YAQE,wBAA6B,CAE7B,qDAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,kDAAoD,CACpD,gBAAiB,CAFjB,uFAA0F,CAI1F,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,6FAAgG,CAHhG,6BAQF,CAHE,uHACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,uGAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,gDAEF,CAEA,qBAEE,aAAc,CADd,+CAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,iDAAmD,CADnD,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,+DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n display: flex;\n margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n overflow: auto;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n font-size: var(--primer-text-body-size-medium, 14px);\n line-height: 23px;\n color: var(--color-fg-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--color-fg-default);\n background-color: var(--color-canvas-default); /* cover bottom border */\n border-color: var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--color-fg-muted);\n }\n\n & .octicon {\n margin-right: var(--primer-control-small-gap, 4px);\n color: var(--color-fg-muted);\n }\n\n & .Counter {\n margin-left: var(--primer-control-small-gap, 4px);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n padding-top: 10px;\n margin-left: 10px;\n font-size: var(--primer-text-body-size-small, 12px);\n color: var(--color-fg-muted);\n\n & > .octicon {\n margin-right: 2px;\n }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n color: var(--color-accent-fg);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n}\n"]}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/* tabnav */
|
|
2
|
+
|
|
3
|
+
/* Outer wrapper */
|
|
4
|
+
.tabnav {
|
|
5
|
+
margin-top: 0;
|
|
6
|
+
margin-bottom: var(--primer-stack-gap-normal, 16px);
|
|
7
|
+
border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tabnav-tabs {
|
|
11
|
+
display: flex;
|
|
12
|
+
margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
|
|
13
|
+
overflow: auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.tabnav-tab {
|
|
17
|
+
display: inline-block;
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
|
|
20
|
+
font-size: var(--primer-text-body-size-medium, 14px);
|
|
21
|
+
line-height: 23px;
|
|
22
|
+
color: var(--color-fg-muted);
|
|
23
|
+
text-decoration: none;
|
|
24
|
+
background-color: transparent;
|
|
25
|
+
border: var(--primer-borderWidth-thin, 1px) solid transparent;
|
|
26
|
+
border-bottom: 0;
|
|
27
|
+
transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
|
28
|
+
|
|
29
|
+
&.selected,
|
|
30
|
+
&[aria-selected='true'],
|
|
31
|
+
&[aria-current]:not([aria-current='false']) {
|
|
32
|
+
color: var(--color-fg-default);
|
|
33
|
+
background-color: var(--color-canvas-default); /* cover bottom border */
|
|
34
|
+
border-color: var(--color-border-default);
|
|
35
|
+
border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;
|
|
36
|
+
|
|
37
|
+
& .octicon {
|
|
38
|
+
color: inherit;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:hover {
|
|
43
|
+
color: var(--color-fg-default);
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
transition-duration: 0.1s;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:focus,
|
|
49
|
+
&:focus-visible {
|
|
50
|
+
border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;
|
|
51
|
+
outline-offset: -6px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:active {
|
|
55
|
+
color: var(--color-fg-muted);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
& .octicon {
|
|
59
|
+
margin-right: var(--primer-control-small-gap, 4px);
|
|
60
|
+
color: var(--color-fg-muted);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
& .Counter {
|
|
64
|
+
margin-left: var(--primer-control-small-gap, 4px);
|
|
65
|
+
color: inherit;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Tabnav extras
|
|
70
|
+
**
|
|
71
|
+
** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
|
|
72
|
+
** inline text or links. */
|
|
73
|
+
|
|
74
|
+
.tabnav-extra {
|
|
75
|
+
display: inline-block;
|
|
76
|
+
padding-top: 10px;
|
|
77
|
+
margin-left: 10px;
|
|
78
|
+
font-size: var(--primer-text-body-size-small, 12px);
|
|
79
|
+
color: var(--color-fg-muted);
|
|
80
|
+
|
|
81
|
+
& > .octicon {
|
|
82
|
+
margin-right: 2px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* When tabnav-extra are anchors
|
|
87
|
+
** stylelint-disable-next-line selector-no-qualifying-type */
|
|
88
|
+
a.tabnav-extra:hover {
|
|
89
|
+
color: var(--color-accent-fg);
|
|
90
|
+
text-decoration: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Tabnav buttons
|
|
94
|
+
**
|
|
95
|
+
** For when there are multiple buttons, space them out appropriately. Requires
|
|
96
|
+
** the buttons to be floated or inline-block. */
|
|
97
|
+
|
|
98
|
+
.tabnav-btn {
|
|
99
|
+
margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);
|
|
100
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--primer-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--primer-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--primer-text-body-size-medium,14px);line-height:30px;padding:0 var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--color-primer-border-active);border-radius:var(--primer-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--primer-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",":is(.UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])):after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,mJAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48, 48px);\n overflow-x: auto;\n overflow-y: hidden;\n box-shadow: inset 0 -1px 0 var(--color-border-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-default);\n background-color: var(--color-neutral-muted);\n }\n\n & .Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);\n font-size: var(--primer-text-body-size-medium, 14px);\n line-height: 30px;\n color: var(--color-fg-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--primer-borderRadius-medium, 6px);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--color-fg-default);\n text-decoration: none;\n border-bottom-color: var(--color-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n background: var(--color-action-list-item-default-hover-bg);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom-color: var(--color-primer-border-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n right: 50%;\n bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n width: 100%;\n height: 2px;\n content: '';\n background: var(--color-primer-border-active);\n border-radius: var(--primer-borderRadius-medium, 6px);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48, 48px);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-muted);\n fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/* UnderlineNav */
|
|
2
|
+
|
|
3
|
+
.UnderlineNav {
|
|
4
|
+
display: flex;
|
|
5
|
+
min-height: var(--base-size-48, 48px);
|
|
6
|
+
overflow-x: auto;
|
|
7
|
+
overflow-y: hidden;
|
|
8
|
+
box-shadow: inset 0 -1px 0 var(--color-border-muted);
|
|
9
|
+
-webkit-overflow-scrolling: auto;
|
|
10
|
+
justify-content: space-between;
|
|
11
|
+
|
|
12
|
+
& .Counter {
|
|
13
|
+
margin-left: var(--primer-control-medium-gap, 8px);
|
|
14
|
+
color: var(--color-fg-default);
|
|
15
|
+
background-color: var(--color-neutral-muted);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
& .Counter--primary {
|
|
19
|
+
color: var(--color-fg-on-emphasis);
|
|
20
|
+
background-color: var(--color-neutral-emphasis);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.UnderlineNav-body {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--primer-control-medium-gap, 8px);
|
|
28
|
+
list-style: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.UnderlineNav-item {
|
|
32
|
+
position: relative;
|
|
33
|
+
display: flex;
|
|
34
|
+
padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
|
|
35
|
+
font-size: var(--primer-text-body-size-medium, 14px);
|
|
36
|
+
line-height: 30px;
|
|
37
|
+
color: var(--color-fg-default);
|
|
38
|
+
text-align: center;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
background-color: transparent;
|
|
42
|
+
border: 0;
|
|
43
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
|
44
|
+
align-items: center;
|
|
45
|
+
|
|
46
|
+
&:hover,
|
|
47
|
+
&:focus,
|
|
48
|
+
&:focus-visible {
|
|
49
|
+
color: var(--color-fg-default);
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
border-bottom-color: var(--color-neutral-muted);
|
|
52
|
+
outline-offset: -2px;
|
|
53
|
+
transition: border-bottom-color 0.12s ease-out;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
|
|
57
|
+
& [data-content]::before {
|
|
58
|
+
display: block;
|
|
59
|
+
height: 0;
|
|
60
|
+
font-weight: var(--base-text-weight-semibold, 600);
|
|
61
|
+
visibility: hidden;
|
|
62
|
+
content: attr(data-content);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* increase touch target area */
|
|
66
|
+
&::before {
|
|
67
|
+
@mixin minTouchTarget 48px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* hover state was "sticking" on mobile after click */
|
|
71
|
+
@media (pointer: fine) {
|
|
72
|
+
&:hover {
|
|
73
|
+
color: var(--color-fg-default);
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
background: var(--color-action-list-item-default-hover-bg);
|
|
76
|
+
transition: background 0.12s ease-out;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.selected,
|
|
81
|
+
&[role='tab'][aria-selected='true'],
|
|
82
|
+
&[aria-current]:not([aria-current='false']) {
|
|
83
|
+
font-weight: var(--base-text-weight-semibold, 600);
|
|
84
|
+
color: var(--color-fg-default);
|
|
85
|
+
border-bottom-color: var(--color-primer-border-active);
|
|
86
|
+
|
|
87
|
+
/* current/selected underline */
|
|
88
|
+
&::after {
|
|
89
|
+
position: absolute;
|
|
90
|
+
right: 50%;
|
|
91
|
+
bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 2px;
|
|
94
|
+
content: '';
|
|
95
|
+
background: var(--color-primer-border-active);
|
|
96
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
|
97
|
+
transform: translate(50%, -50%);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.UnderlineNav--right {
|
|
103
|
+
justify-content: flex-end;
|
|
104
|
+
|
|
105
|
+
& .UnderlineNav-actions {
|
|
106
|
+
flex: 1 1 auto;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.UnderlineNav-actions {
|
|
111
|
+
align-self: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.UnderlineNav--full {
|
|
115
|
+
display: block;
|
|
116
|
+
|
|
117
|
+
/* required for underline to align with additional wrapper element */
|
|
118
|
+
& .UnderlineNav-body {
|
|
119
|
+
min-height: var(--base-size-48, 48px);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.UnderlineNav-octicon {
|
|
124
|
+
display: inline !important;
|
|
125
|
+
margin-right: var(--primer-control-medium-gap, 8px);
|
|
126
|
+
color: var(--color-fg-muted);
|
|
127
|
+
fill: var(--color-fg-muted);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.UnderlineNav-container {
|
|
131
|
+
display: flex;
|
|
132
|
+
justify-content: space-between;
|
|
133
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);border-style:solid;border-width:var(--primer-borderWidth-thin,1px)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--primer-stack-padding-condensed,8px) var(--primer-stack-padding-normal,16px)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--primer-controlStack-medium-gap-condensed, 8px)*-1) calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.Box--condensed .Box-row{padding:var(--primer-stack-padding-condensed,8px) var(--primer-stack-padding-normal,16px)}.Box--spacious .Box-header{line-height:1.25;padding:var(--primer-stack-padding-spacious,24px)}.Box--spacious .Box-title{font-size:var(--primer-text-title-size-medium,20px)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--primer-stack-padding-spacious,24px)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--primer-stack-gap-spacious, 24px)*-1) calc(var(--primer-stack-gap-spacious, 24px)*-1)}.Box--spacious .Box-row{padding:var(--primer-stack-padding-spacious,24px)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px);border-width:var(--primer-borderWidth-thin,1px);margin:calc(var(--primer-borderWidth-thin, 1px)*-1) calc(var(--primer-borderWidth-thin, 1px)*-1) 0;padding:var(--primer-stack-padding-normal,16px)}.Box-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);padding:var(--primer-stack-padding-normal,16px)}.Box-body:last-of-type{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px);margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1)}.Box-row{border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1);padding:var(--primer-stack-padding-normal,16px)}.Box-row:first-of-type{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--color-accent-fg);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px);border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1);padding:var(--primer-stack-padding-normal,16px)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1) calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-spacious,16px) var(--primer-control-medium-paddingInline-spacious,16px)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"beta/border_box","selectors":[".Box",".Box--condensed",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-header",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-footer",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-footer",".Box--blue .Box-row",".Box--danger",".Box--danger .Box-body:last-of-type",".Box--danger .Box-row:first-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,yFACF,CAGE,6CAGE,gBAAiB,CADjB,iIAAsI,CADtI,yHAGF,CAGF,yBACE,yFACF,CAIA,2BAEE,gBAAiB,CADjB,iDAEF,CAEA,0BACE,mDACF,CAWE,gGAJA,iDAOA,CAHA,4CAEE,sGACF,CAGF,wBACE,iDACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,4DAA8D,CAC9D,6DAA+D,CAF/D,+CAAiD,CAJjD,kGAAuG,CADvG,+CAQF,CAEA,WACE,kDAAoD,CACpD,gDACF,CAEA,UAEE,kFAAoF,CADpF,+CASF,CALE,uBAGE,+DAAiE,CADjE,gEAAkE,CADlE,0DAGF,CAIF,SAME,6EAAqD,CAHrD,oBAAqB,CADrB,uDAA0D,CAD1D,+CAqDF,CA9CE,uBACE,4DAA8D,CAC9D,6DACF,CAEA,sBAEE,+DAAiE,CADjE,gEAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,6FAAgG,CADhG,+EAAqD,CAHrD,uDAA0D,CAD1D,+CAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAGE,eAAgB,CADhB,gIAAqI,CADrI,yHAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n background-color: var(--color-canvas-default);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--primer-borderWidth-thin, 1px);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n line-height: 1.25;\n\n & .Box-header {\n padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n }\n\n & .Box-body {\n padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n }\n\n & .Box-footer {\n padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n line-height: 1.25;\n }\n }\n\n & .Box-row {\n padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n }\n}\n\n.Box--spacious {\n & .Box-header {\n padding: var(--primer-stack-padding-spacious, 24px);\n line-height: 1.25;\n }\n\n & .Box-title {\n font-size: var(--primer-text-title-size-medium, 20px);\n }\n\n & .Box-body {\n padding: var(--primer-stack-padding-spacious, 24px);\n }\n\n & .Box-footer {\n padding: var(--primer-stack-padding-spacious, 24px);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--primer-stack-padding-spacious, 24px);\n margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);\n }\n }\n\n & .Box-row {\n padding: var(--primer-stack-padding-spacious, 24px);\n }\n}\n\n.Box-header {\n padding: var(--primer-stack-padding-normal, 16px);\n margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;\n background-color: var(--color-canvas-subtle);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--primer-borderWidth-thin, 1px);\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.Box-title {\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n padding: var(--primer-stack-padding-normal, 16px);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n\n /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n &:last-of-type {\n margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n}\n\n/* Box rows */\n.Box-row {\n padding: var(--primer-stack-padding-normal, 16px);\n margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);\n list-style-type: none; /* To account for applying Box component to a list */\n border-top-color: var(--color-border-muted);\n border-top-style: solid;\n border-top-width: var(--primer-borderWidth-thin, 1px);\n\n &:first-of-type {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &:last-of-type {\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n /* Adds a blue vertical line to the left of the row\n ** For indicating a row item is unread */\n &.Box-row--unread,\n /* .unread to be deprecated with .Box-row-unread */\n &.unread {\n box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n }\n\n &.navigation-focus {\n /* Focus styles for when drag icon */\n & .Box-row--drag-button {\n color: var(--color-accent-fg);\n cursor: grab;\n opacity: 100;\n }\n\n /* Grabbing while row is dragged */\n &.is-dragging .Box-row--drag-button {\n cursor: grabbing;\n }\n\n /* Row dragging styles */\n &.sortable-chosen {\n background-color: var(--color-canvas-subtle);\n }\n\n /* Makes dragging row background gray */\n &.sortable-ghost {\n background-color: var(--color-canvas-subtle);\n\n /* Hides contents of row while dragging so row looks solid gray */\n & .Box-row--drag-hide {\n opacity: 0;\n }\n }\n }\n}\n\n.Box-row--focus-gray {\n &.navigation-focus {\n background-color: var(--color-canvas-subtle);\n }\n}\n\n.Box-row--focus-blue {\n &.navigation-focus {\n background-color: var(--color-accent-subtle);\n }\n}\n\n.Box-row--hover-gray {\n &:hover {\n background-color: var(--color-canvas-subtle);\n }\n}\n\n.Box-row--hover-blue {\n &:hover {\n background-color: var(--color-accent-subtle);\n }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n @media (min-width: 768px) {\n color: var(--color-fg-default);\n text-decoration: none;\n\n &:hover {\n color: var(--color-accent-fg);\n text-decoration: none;\n }\n }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n opacity: 0;\n}\n\n.Box-footer {\n padding: var(--primer-stack-padding-normal, 16px);\n margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n border-top-color: var(--color-border-default);\n border-top-style: solid;\n border-top-width: var(--primer-borderWidth-thin, 1px);\n border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n max-height: 324px;\n overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n border-color: var(--color-accent-muted);\n\n & .Box-header {\n background-color: var(--color-accent-subtle);\n border-color: var(--color-accent-muted);\n }\n\n & .Box-body {\n border-color: var(--color-accent-muted);\n }\n\n & .Box-row {\n border-color: var(--color-accent-muted);\n }\n\n & .Box-footer {\n border-color: var(--color-accent-muted);\n }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n border-color: var(--color-danger-emphasis);\n\n & .Box-row {\n &:first-of-type {\n border-color: var(--color-danger-emphasis);\n }\n }\n\n & .Box-body {\n &:last-of-type {\n border-color: var(--color-danger-emphasis);\n }\n }\n}\n\n.Box-header--blue {\n background-color: var(--color-accent-subtle);\n border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n &.btn-octicon {\n padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);\n margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n line-height: 1.5; /* override btn-octicon line-height */\n }\n}\n"]}
|