primer_view_components 0.1.4 → 0.1.6
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 +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/heading.html.erb +1 -1
- data/app/components/primer/alpha/action_list/heading.rb +5 -3
- data/app/components/primer/alpha/action_list/item.html.erb +9 -0
- data/app/components/primer/alpha/action_list/item.rb +32 -11
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +4 -41
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +19 -20
- data/app/components/primer/alpha/action_list.rb +54 -6
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +23 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +165 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +168 -0
- data/app/components/primer/alpha/action_menu/list.rb +91 -0
- data/app/components/primer/alpha/action_menu.html.erb +26 -0
- data/app/components/primer/alpha/action_menu.rb +361 -0
- data/app/components/primer/alpha/auto_complete.css.json +0 -11
- data/app/components/primer/alpha/banner.css.json +0 -14
- data/app/components/primer/alpha/button_marketing.css.json +0 -10
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +0 -65
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +0 -4
- data/app/components/primer/alpha/dialog.rb +6 -2
- data/app/components/primer/alpha/dropdown/menu.rb +1 -1
- data/app/components/primer/alpha/dropdown.css.json +0 -21
- data/app/components/primer/alpha/layout.css.json +0 -27
- data/app/components/primer/alpha/menu.css.json +0 -11
- data/app/components/primer/alpha/modal_dialog.js +12 -0
- data/app/components/primer/alpha/modal_dialog.ts +17 -0
- data/app/components/primer/alpha/nav_list/item.rb +5 -0
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.json +0 -3
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +1 -0
- data/app/components/primer/alpha/overlay.rb +19 -19
- data/app/components/primer/alpha/segmented_control.css.json +0 -15
- data/app/components/primer/alpha/tab_nav.css.json +0 -10
- data/app/components/primer/alpha/text_field.css.json +0 -38
- data/app/components/primer/alpha/toggle_switch.css.json +0 -16
- data/app/components/primer/alpha/underline_nav.css.json +0 -13
- data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -1
- data/app/components/primer/beta/auto_complete.rb +19 -1
- data/app/components/primer/beta/avatar.css.json +0 -14
- data/app/components/primer/beta/avatar_stack.css.json +0 -9
- data/app/components/primer/beta/blankslate.css.json +0 -12
- data/app/components/primer/beta/border_box.css.json +0 -32
- data/app/components/primer/beta/border_box.rb +3 -3
- data/app/components/primer/beta/breadcrumbs.css.json +0 -4
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +0 -24
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +5 -7
- data/app/components/primer/beta/counter.css.json +0 -6
- data/app/components/primer/beta/flash.css.json +0 -15
- data/app/components/primer/beta/label.css.json +0 -20
- data/app/components/primer/beta/link.css.json +0 -8
- data/app/components/primer/beta/popover.css.json +0 -18
- data/app/components/primer/beta/progress_bar.css.json +0 -6
- data/app/components/primer/beta/state.css.json +0 -10
- data/app/components/primer/beta/subhead.css.json +0 -8
- data/app/components/primer/beta/timeline_item.css.json +0 -9
- data/app/components/primer/beta/truncate.css.json +0 -6
- data/app/components/primer/focus_group.d.ts +19 -0
- data/app/components/primer/focus_group.js +144 -0
- data/app/components/primer/focus_group.ts +137 -0
- data/app/components/primer/icon_button.rb +1 -1
- data/app/components/primer/primer.d.ts +2 -0
- data/app/components/primer/primer.js +2 -0
- data/app/components/primer/primer.ts +2 -0
- data/app/components/primer/truncate.css.json +0 -7
- data/app/lib/primer/css/layout.css.json +0 -263
- data/app/lib/primer/css/utilities.css.json +0 -1636
- data/lib/primer/static/generate_arguments.rb +55 -0
- data/lib/primer/static/generate_audited_at.rb +17 -0
- data/lib/primer/static/generate_constants.rb +19 -0
- data/lib/primer/static/generate_info_arch.rb +156 -0
- data/lib/primer/static/generate_previews.rb +45 -0
- data/lib/primer/static/generate_statuses.rb +17 -0
- data/lib/primer/static.rb +72 -0
- data/lib/primer/view_components/linters/disallow_component_css_counter.rb +43 -4
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/view_components.rb +0 -48
- data/lib/primer/yard/component_manifest.rb +1 -0
- data/lib/primer/yard/component_ref.rb +14 -0
- data/lib/primer/yard/docs_helper.rb +3 -0
- data/lib/primer/yard/info_arch_docs_helper.rb +31 -0
- data/lib/primer/yard/legacy_gatsby_backend.rb +3 -35
- data/lib/primer/yard/registry.rb +2 -1
- data/lib/primer/yard.rb +1 -0
- data/lib/tasks/docs.rake +10 -12
- data/lib/tasks/static.rake +20 -28
- data/previews/primer/alpha/action_list_preview.rb +4 -1
- data/previews/primer/alpha/action_menu_preview/align_end.html.erb +6 -0
- data/previews/primer/alpha/action_menu_preview/content_labels.html.erb +9 -0
- data/previews/primer/alpha/action_menu_preview/opens_dialog.html.erb +21 -0
- data/previews/primer/alpha/action_menu_preview.rb +245 -0
- data/previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -3
- data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +4 -4
- data/previews/primer/alpha/dialog_preview/test.html.erb +3 -3
- data/previews/primer/alpha/dialog_preview/with_footer.html.erb +3 -3
- data/previews/primer/alpha/dialog_preview/with_form.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview.rb +7 -2
- data/previews/primer/beta/auto_complete_item_preview.rb +1 -0
- data/previews/primer/beta/auto_complete_preview.rb +36 -23
- data/static/arguments.json +3085 -1405
- data/static/audited_at.json +2 -0
- data/static/classes.json +576 -311
- data/static/constants.json +53 -2
- data/static/info_arch.json +8888 -0
- data/static/previews.json +226 -101
- data/static/statuses.json +2 -0
- metadata +28 -6
@@ -0,0 +1,361 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Primer
|
5
|
+
module Alpha
|
6
|
+
# The ActionMenu should be used when a user can select a single option triggering an action from a list of items. Primer will automatically nest an `Item` within a presentational `<li>` tag.
|
7
|
+
#
|
8
|
+
# The only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. If one isn't selected, a fallback `:span` will be used. To add functionality, use a `.js` class to create the functionality, or an `onclick` handler.
|
9
|
+
#
|
10
|
+
# @accessibility
|
11
|
+
# The action for the menu item needs to be on the element with `role="menuitem"`. Semantics are removed for everything nested inside of it. When a menu item is selected, the menu will close immediately.
|
12
|
+
#
|
13
|
+
# Additional information around the keyboard functionality and implementation can be found on the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
|
14
|
+
class ActionMenu < Primer::Component
|
15
|
+
status :alpha
|
16
|
+
|
17
|
+
DEFAULT_PRELOAD = false
|
18
|
+
|
19
|
+
DEFAULT_SELECT_VARIANT = :none
|
20
|
+
SELECT_VARIANT_OPTIONS = [
|
21
|
+
:single,
|
22
|
+
:multiple,
|
23
|
+
DEFAULT_SELECT_VARIANT
|
24
|
+
].freeze
|
25
|
+
|
26
|
+
attr_reader :list, :preload
|
27
|
+
|
28
|
+
alias preload? preload
|
29
|
+
|
30
|
+
# @example Default
|
31
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-0") do |c| %>
|
32
|
+
# <% c.with_show_button { "Menu" } %>
|
33
|
+
# <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
|
34
|
+
# Primer Design
|
35
|
+
# <% end %>
|
36
|
+
# <% c.with_item(tag: :button, type: "button", onclick: "() => {}") do %>
|
37
|
+
# Quote Reply
|
38
|
+
# <% end %>
|
39
|
+
# <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
|
40
|
+
# Copy Text
|
41
|
+
# <% end %>
|
42
|
+
# <% end %>
|
43
|
+
#
|
44
|
+
# @example With caret
|
45
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
|
46
|
+
# <% c.with_show_button do |button| %>
|
47
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
48
|
+
# Menu
|
49
|
+
# <% end %>
|
50
|
+
# <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
|
51
|
+
# Primer Design
|
52
|
+
# <% end %>
|
53
|
+
# <% c.with_item(tag: :button, type: "button") do %>
|
54
|
+
# Quote Reply
|
55
|
+
# <% end %>
|
56
|
+
# <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
|
57
|
+
# Copy Text
|
58
|
+
# <% end %>
|
59
|
+
# <% end %>
|
60
|
+
#
|
61
|
+
# @example With `IconButton` trigger
|
62
|
+
# @description
|
63
|
+
# Set `icon:` to the octicon you want to use. Always provide an accessible name for the menu by setting `aria-label`.
|
64
|
+
# @code
|
65
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-2") do |c| %>
|
66
|
+
# <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
|
67
|
+
# <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
|
68
|
+
# Primer Design Link
|
69
|
+
# <% end %>
|
70
|
+
# <% c.with_item(tag: :button, type: "button") do %>
|
71
|
+
# Quote Reply
|
72
|
+
# <% end %>
|
73
|
+
# <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
|
74
|
+
# Copy Text
|
75
|
+
# <% end %>
|
76
|
+
# <% end %>
|
77
|
+
#
|
78
|
+
# @example With divider
|
79
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3") do |c| %>
|
80
|
+
# <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
|
81
|
+
# <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
|
82
|
+
# Primer Design Link
|
83
|
+
# <% end %>
|
84
|
+
# <% c.with_item(tag: :button, type: "button") do %>
|
85
|
+
# Quote Reply
|
86
|
+
# <% end %>
|
87
|
+
# <% c.with_divider %>
|
88
|
+
# <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
|
89
|
+
# Copy Text
|
90
|
+
# <% end %>
|
91
|
+
# <% end %>
|
92
|
+
#
|
93
|
+
# @example With danger item
|
94
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-4") do |c| %>
|
95
|
+
# <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
|
96
|
+
# <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
|
97
|
+
# Primer Design Link
|
98
|
+
# <% end %>
|
99
|
+
# <% c.with_item(tag: :button, type: "button") do %>
|
100
|
+
# Quote Reply
|
101
|
+
# <% end %>
|
102
|
+
# <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
|
103
|
+
# Copy Text
|
104
|
+
# <% end %>
|
105
|
+
# <% c.with_item(tag: :button, type: "button", is_dangerous: true) do %>
|
106
|
+
# Delete
|
107
|
+
# <% end %>
|
108
|
+
# <% end %>
|
109
|
+
#
|
110
|
+
# @example With center align
|
111
|
+
# @description
|
112
|
+
# Align the menu to the center of the trigger button
|
113
|
+
# @code
|
114
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
|
115
|
+
# <% c.with_show_button do |button| %>
|
116
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
117
|
+
# Outside top
|
118
|
+
# <% end %>
|
119
|
+
# <% c.with_item do %>
|
120
|
+
# Item 1 that does something
|
121
|
+
# <% end %>
|
122
|
+
# <% c.with_item do %>
|
123
|
+
# Item 2 that does another thing
|
124
|
+
# <% end %>
|
125
|
+
# <% end %>
|
126
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
|
127
|
+
# <% c.with_show_button do |button| %>
|
128
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
129
|
+
# Outside left
|
130
|
+
# <% end %>
|
131
|
+
# <% c.with_item do %>
|
132
|
+
# Item 1 that does something
|
133
|
+
# <% end %>
|
134
|
+
# <% c.with_item do %>
|
135
|
+
# Item 2 that does another thing
|
136
|
+
# <% end %>
|
137
|
+
# <% end %>
|
138
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
|
139
|
+
# <% c.with_show_button do |button| %>
|
140
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
141
|
+
# Outside right
|
142
|
+
# <% end %>
|
143
|
+
# <% c.with_item do %>
|
144
|
+
# Item 1 that does something
|
145
|
+
# <% end %>
|
146
|
+
# <% c.with_item do %>
|
147
|
+
# Item 2 that does another thing
|
148
|
+
# <% end %>
|
149
|
+
# <% end %>
|
150
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
|
151
|
+
# <% c.with_show_button do |button| %>
|
152
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
153
|
+
# Outside bottom
|
154
|
+
# <% end %>
|
155
|
+
# <% c.with_item do %>
|
156
|
+
# Item 1 that does something
|
157
|
+
# <% end %>
|
158
|
+
# <% c.with_item do %>
|
159
|
+
# Item 2 that does another thing
|
160
|
+
# <% end %>
|
161
|
+
# <% end %>
|
162
|
+
#
|
163
|
+
# @example With start align
|
164
|
+
# @description
|
165
|
+
# Align the menu to the start of the trigger button
|
166
|
+
# @code
|
167
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
|
168
|
+
# <% c.with_show_button do |button| %>
|
169
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
170
|
+
# Outside top
|
171
|
+
# <% end %>
|
172
|
+
# <% c.with_item do %>
|
173
|
+
# Item 1 that does something
|
174
|
+
# <% end %>
|
175
|
+
# <% c.with_item do %>
|
176
|
+
# Item 2 that does another thing
|
177
|
+
# <% end %>
|
178
|
+
# <% end %>
|
179
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
|
180
|
+
# <% c.with_show_button do |button| %>
|
181
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
182
|
+
# Outside left
|
183
|
+
# <% end %>
|
184
|
+
# <% c.with_item do %>
|
185
|
+
# Item 1 that does something
|
186
|
+
# <% end %>
|
187
|
+
# <% c.with_item do %>
|
188
|
+
# Item 2 that does another thing
|
189
|
+
# <% end %>
|
190
|
+
# <% end %>
|
191
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
|
192
|
+
# <% c.with_show_button do |button| %>
|
193
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
194
|
+
# Outside right
|
195
|
+
# <% end %>
|
196
|
+
# <% c.with_item do %>
|
197
|
+
# Item 1 that does something
|
198
|
+
# <% end %>
|
199
|
+
# <% c.with_item do %>
|
200
|
+
# Item 2 that does another thing
|
201
|
+
# <% end %>
|
202
|
+
# <% end %>
|
203
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
|
204
|
+
# <% c.with_show_button do |button| %>
|
205
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
206
|
+
# Outside bottom
|
207
|
+
# <% end %>
|
208
|
+
# <% c.with_item do %>
|
209
|
+
# Item 1 that does something
|
210
|
+
# <% end %>
|
211
|
+
# <% c.with_item do %>
|
212
|
+
# Item 2 that does another thing
|
213
|
+
# <% end %>
|
214
|
+
# <% end %>
|
215
|
+
#
|
216
|
+
# @example With end align
|
217
|
+
# @description
|
218
|
+
# Align the menu to the end of the trigger button
|
219
|
+
# @code
|
220
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
|
221
|
+
# <% c.with_show_button do |button| %>
|
222
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
223
|
+
# Outside top
|
224
|
+
# <% end %>
|
225
|
+
# <% c.with_item do %>
|
226
|
+
# Item 1 that does something
|
227
|
+
# <% end %>
|
228
|
+
# <% c.with_item do %>
|
229
|
+
# Item 2 that does another thing
|
230
|
+
# <% end %>
|
231
|
+
# <% end %>
|
232
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
|
233
|
+
# <% c.with_show_button do |button| %>
|
234
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
235
|
+
# Outside left
|
236
|
+
# <% end %>
|
237
|
+
# <% c.with_item do %>
|
238
|
+
# Item 1 that does something
|
239
|
+
# <% end %>
|
240
|
+
# <% c.with_item do %>
|
241
|
+
# Item 2 that does another thing
|
242
|
+
# <% end %>
|
243
|
+
# <% end %>
|
244
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
|
245
|
+
# <% c.with_show_button do |button| %>
|
246
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
247
|
+
# Outside right
|
248
|
+
# <% end %>
|
249
|
+
# <% c.with_item do %>
|
250
|
+
# Item 1 that does something
|
251
|
+
# <% end %>
|
252
|
+
# <% c.with_item do %>
|
253
|
+
# Item 2 that does another thing
|
254
|
+
# <% end %>
|
255
|
+
# <% end %>
|
256
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
|
257
|
+
# <% c.with_show_button do |button| %>
|
258
|
+
# <% button.with_trailing_action_icon(icon: "triangle-down") %>
|
259
|
+
# Outside bottom
|
260
|
+
# <% end %>
|
261
|
+
# <% c.with_item do %>
|
262
|
+
# Item 1 that does something
|
263
|
+
# <% end %>
|
264
|
+
# <% c.with_item do %>
|
265
|
+
# Item 2 that does another thing
|
266
|
+
# <% end %>
|
267
|
+
# <% end %>
|
268
|
+
#
|
269
|
+
# @example With deferred menu content loaded with an `include-fragment`
|
270
|
+
# <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-17", src: "/") do |c| %>
|
271
|
+
# <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
|
272
|
+
# <% end %>
|
273
|
+
#
|
274
|
+
# @param menu_id [String] Id of the menu.
|
275
|
+
# @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
|
276
|
+
# @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.
|
277
|
+
# @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
|
278
|
+
# @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
|
279
|
+
# @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
|
280
|
+
# @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
|
281
|
+
# @param select_variant [Symbol]. <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>.
|
282
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
|
283
|
+
def initialize(
|
284
|
+
menu_id: self.class.generate_id,
|
285
|
+
anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
|
286
|
+
anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
|
287
|
+
src: nil,
|
288
|
+
preload: DEFAULT_PRELOAD,
|
289
|
+
dynamic_label: false,
|
290
|
+
dynamic_label_prefix: nil,
|
291
|
+
select_variant: DEFAULT_SELECT_VARIANT,
|
292
|
+
**system_arguments
|
293
|
+
)
|
294
|
+
@menu_id = menu_id
|
295
|
+
@src = src
|
296
|
+
@preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD)
|
297
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
298
|
+
|
299
|
+
@system_arguments[:preload] = true if @src.present? && preload?
|
300
|
+
|
301
|
+
select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
|
302
|
+
|
303
|
+
@system_arguments[:tag] = :"action-menu"
|
304
|
+
@system_arguments[:"data-select-variant"] = select_variant
|
305
|
+
@system_arguments[:"data-dynamic-label"] = "" if dynamic_label
|
306
|
+
@system_arguments[:"data-dynamic-label-prefix"] = dynamic_label_prefix if dynamic_label_prefix.present?
|
307
|
+
|
308
|
+
@overlay = Primer::Alpha::Overlay.new(
|
309
|
+
id: "#{@menu_id}-overlay",
|
310
|
+
title: "Menu",
|
311
|
+
visually_hide_title: true,
|
312
|
+
anchor_align: anchor_align,
|
313
|
+
anchor_side: anchor_side
|
314
|
+
)
|
315
|
+
|
316
|
+
@list = Primer::Alpha::ActionMenu::List.new(
|
317
|
+
menu_id: @menu_id,
|
318
|
+
select_variant: select_variant
|
319
|
+
)
|
320
|
+
end
|
321
|
+
|
322
|
+
# Button to activate the menu.
|
323
|
+
#
|
324
|
+
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
|
325
|
+
def with_show_button(**system_arguments, &block)
|
326
|
+
@overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
|
327
|
+
end
|
328
|
+
|
329
|
+
# Adds a new item to the list.
|
330
|
+
#
|
331
|
+
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
|
332
|
+
def with_item(**system_arguments, &block)
|
333
|
+
@list.with_item(**system_arguments, &block)
|
334
|
+
end
|
335
|
+
|
336
|
+
# Retrieves the list of items.
|
337
|
+
def items
|
338
|
+
@list.items
|
339
|
+
end
|
340
|
+
|
341
|
+
# Adds a divider to the list.
|
342
|
+
#
|
343
|
+
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `divider` slot.
|
344
|
+
def with_divider(**system_arguments, &block)
|
345
|
+
@list.with_divider(**system_arguments, &block)
|
346
|
+
end
|
347
|
+
|
348
|
+
private
|
349
|
+
|
350
|
+
def before_render
|
351
|
+
content
|
352
|
+
|
353
|
+
raise ArgumentError, "`items` cannot be set when `src` is specified" if @src.present? && items.any?
|
354
|
+
end
|
355
|
+
|
356
|
+
def render?
|
357
|
+
items.any? || @src.present?
|
358
|
+
end
|
359
|
+
end
|
360
|
+
end
|
361
|
+
end
|
@@ -19,16 +19,5 @@
|
|
19
19
|
".autocomplete-item.navigation-focus *",
|
20
20
|
".autocomplete-item.selected *",
|
21
21
|
".autocomplete-item[aria-selected=true] *"
|
22
|
-
],
|
23
|
-
"classes": [
|
24
|
-
"autocomplete-label-stacked",
|
25
|
-
"autocomplete-label-inline",
|
26
|
-
"autocomplete-body",
|
27
|
-
"autocomplete-embedded-icon-wrap",
|
28
|
-
"form-control",
|
29
|
-
"autocomplete-results",
|
30
|
-
"autocomplete-item",
|
31
|
-
"navigation-focus",
|
32
|
-
"selected"
|
33
22
|
]
|
34
23
|
}
|
@@ -20,19 +20,5 @@
|
|
20
20
|
".Banner.Banner--success .Banner-visual .octicon",
|
21
21
|
".Banner.Banner--full",
|
22
22
|
".Banner.Banner--full-whenNarrow"
|
23
|
-
],
|
24
|
-
"classes": [
|
25
|
-
"Banner",
|
26
|
-
"Banner-actions",
|
27
|
-
"Banner-visual",
|
28
|
-
"octicon",
|
29
|
-
"Banner-message",
|
30
|
-
"Banner-title",
|
31
|
-
"Banner-close",
|
32
|
-
"Banner--warning",
|
33
|
-
"Banner--error",
|
34
|
-
"Banner--success",
|
35
|
-
"Banner--full",
|
36
|
-
"Banner--full-whenNarrow"
|
37
23
|
]
|
38
24
|
}
|
@@ -29,15 +29,5 @@
|
|
29
29
|
".btn-signup-mktg:focus-visible",
|
30
30
|
".btn-small-mktg",
|
31
31
|
".btn-large-mktg"
|
32
|
-
],
|
33
|
-
"classes": [
|
34
|
-
"btn-mktg",
|
35
|
-
"focus",
|
36
|
-
"disabled",
|
37
|
-
"btn-muted-mktg",
|
38
|
-
"btn-subtle-mktg",
|
39
|
-
"btn-signup-mktg",
|
40
|
-
"btn-small-mktg",
|
41
|
-
"btn-large-mktg"
|
42
32
|
]
|
43
33
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor .Overlay{width:auto}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor-whenNarrow .Overlay{width:auto}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
1
|
+
.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
|
@@ -52,7 +52,6 @@
|
|
52
52
|
".Overlay-closeButton.close-button",
|
53
53
|
".Overlay-backdrop--center",
|
54
54
|
".Overlay-backdrop--anchor",
|
55
|
-
".Overlay-backdrop--anchor .Overlay",
|
56
55
|
".Overlay-backdrop--side",
|
57
56
|
".Overlay-backdrop--side.Overlay-backdrop--placement-left",
|
58
57
|
".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",
|
@@ -66,7 +65,6 @@
|
|
66
65
|
".Overlay-backdrop--full .Overlay",
|
67
66
|
".Overlay-backdrop--center-whenNarrow",
|
68
67
|
".Overlay-backdrop--anchor-whenNarrow",
|
69
|
-
".Overlay-backdrop--anchor-whenNarrow .Overlay",
|
70
68
|
".Overlay-backdrop--side-whenNarrow",
|
71
69
|
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",
|
72
70
|
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",
|
@@ -78,68 +76,5 @@
|
|
78
76
|
".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",
|
79
77
|
".Overlay-backdrop--full-whenNarrow",
|
80
78
|
".Overlay-backdrop--full-whenNarrow .Overlay"
|
81
|
-
],
|
82
|
-
"classes": [
|
83
|
-
"Overlay--hidden",
|
84
|
-
"Overlay--visibilityHidden",
|
85
|
-
"Overlay",
|
86
|
-
"Overlay--size-auto",
|
87
|
-
"Overlay--size-full",
|
88
|
-
"Overlay--size-xsmall",
|
89
|
-
"Overlay--size-small",
|
90
|
-
"Overlay--size-small-portrait",
|
91
|
-
"Overlay--size-medium",
|
92
|
-
"Overlay--size-medium-portrait",
|
93
|
-
"Overlay--size-large",
|
94
|
-
"Overlay--size-xlarge",
|
95
|
-
"Overlay--height-auto",
|
96
|
-
"Overlay--height-xsmall",
|
97
|
-
"Overlay--height-small",
|
98
|
-
"Overlay--height-medium",
|
99
|
-
"Overlay--height-large",
|
100
|
-
"Overlay--height-xlarge",
|
101
|
-
"Overlay--width-auto",
|
102
|
-
"Overlay--width-small",
|
103
|
-
"Overlay--width-medium",
|
104
|
-
"Overlay--width-large",
|
105
|
-
"Overlay--width-xlarge",
|
106
|
-
"Overlay--width-xxlarge",
|
107
|
-
"Overlay--motion-scaleFade",
|
108
|
-
"Overlay-form",
|
109
|
-
"Overlay-header",
|
110
|
-
"Overlay-header--divided",
|
111
|
-
"Overlay-body",
|
112
|
-
"Overlay-header--large",
|
113
|
-
"Overlay-headerContentWrap",
|
114
|
-
"Overlay-titleWrap",
|
115
|
-
"Overlay-title",
|
116
|
-
"Overlay-description",
|
117
|
-
"Overlay-actionWrap",
|
118
|
-
"Overlay-body--paddingCondensed",
|
119
|
-
"Overlay-body--paddingNone",
|
120
|
-
"Overlay-footer",
|
121
|
-
"Overlay-footer--divided",
|
122
|
-
"Overlay-footer--alignStart",
|
123
|
-
"Overlay-footer--alignCenter",
|
124
|
-
"Overlay-footer--alignEnd",
|
125
|
-
"Overlay-closeButton",
|
126
|
-
"close-button",
|
127
|
-
"Overlay-backdrop--center",
|
128
|
-
"Overlay-backdrop--anchor",
|
129
|
-
"Overlay-backdrop--side",
|
130
|
-
"Overlay-backdrop--placement-left",
|
131
|
-
"Overlay-backdrop--placement-right",
|
132
|
-
"Overlay-backdrop--placement-bottom",
|
133
|
-
"Overlay-backdrop--placement-top",
|
134
|
-
"Overlay-backdrop--full",
|
135
|
-
"Overlay-backdrop--center-whenNarrow",
|
136
|
-
"Overlay-backdrop--anchor-whenNarrow",
|
137
|
-
"Overlay-backdrop--side-whenNarrow",
|
138
|
-
"Overlay-backdrop--placement-left-whenNarrow",
|
139
|
-
"Overlay-whenNarrow",
|
140
|
-
"Overlay-backdrop--placement-right-whenNarrow",
|
141
|
-
"Overlay-backdrop--placement-bottom-whenNarrow",
|
142
|
-
"Overlay-backdrop--placement-top-whenNarrow",
|
143
|
-
"Overlay-backdrop--full-whenNarrow"
|
144
79
|
]
|
145
80
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"AAEA,iBACE,sBACF,CAEA,2BACE,QAAS,CAGT,SAAU,CAFV,eAAgB,CAChB,iBAEF,CAEA,SAOE,4CAA6C,CAC7C,mDAAqD,CACrD,sCAAuC,CARvC,YAAa,CAKb,qBAAsB,CAFtB,wDAA0D,CAD1D,eAAgB,CAOhB,SAAU,CALV,kBAAmB,CAHnB,4CAiHF,CAvGE,4BAGE,6BAA8B,CAD9B,4BAA6B,CAD7B,eAGF,CAEA,4BAEE,YAAa,CADb,WAEF,CAEA,8BACE,qBAAsB,CAEtB,6BACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,sCACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,uCACE,sBAAuB,CACvB,qBACF,CAEA,6BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,sBAAuB,CACvB,qBACF,CAEA,8BACE,WACF,CAGA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,+BACE,8BACF,CAEA,gCACE,8BACF,CAEA,6BACE,UACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,8BACE,6BACF,CAEA,+BACE,6BACF,CAEA,gCACE,6BACF,CAKE,yDADF,mCAEI,0FAEJ,CADE,CAIJ,qCACE,GACE,SAAU,CACV,mBACF,CAEA,GACE,SAAU,CACV,kBACF,CACF,CAGA,cAIE,WAAY,CAFZ,aAGF,CAEA,8BANE,YAAa,CAEb,qBAmEF,CA/DA,gBACE,SA8DF,CA1DE,wCAEE,2FAA8F,CAD9F,wDAMF,CAHE,sDACE,mDACF,CAKE,oFACE,yCASF,CAPE,mGACE,mDACF,CAEA,yGACE,kDACF,CAKN,2CAEE,sBAAuB,CADvB,YAAa,CAEb,yCAA2C,CAC3C,2HA4BF,CA1BE,+DACE,YAAa,CACb,kBAAmB,CACnB,yCACF,CAEA,8DACE,YAAa,CAEb,qBAAsB,CACtB,WAAY,CACZ,uCAAyC,CAHzC,iJAiBF,CAZE,6EAEE,kDAAoD,CACpD,gDAAkD,CAFlD,QAGF,CAEA,mFAIE,2BAA4B,CAF5B,iDAAmD,CACnD,8CAAgD,CAFhD,QAIF,CAMN,cAME,WAAY,CADZ,kDAAoD,CAFpD,eAAgB,CAFhB,+CAAiD,CACjD,aAAc,CAEd,oBAYF,CARE,6CACE,iDAAmD,CACnD,aACF,CAEA,wCACE,SACF,CAIF,gBAEE,YAAa,CAEb,kBAAmB,CACnB,aAAc,CACd,cAAe,CAHf,iIAAqI,CAFrI,SA0BF,CAnBE,wCAEE,iFAAmF,CADnF,mDAEF,CAEA,2CAEE,yCAA2C,CAD3C,0BAEF,CAEA,4CAEE,yCAA2C,CAD3C,sBAEF,CAEA,yCAEE,yCAA2C,CAD3C,wBAEF,CAIF,qBAeE,qBAAsB,CANtB,wBAA6B,CAC7B,qDAA6D,CAC7D,mDAAqD,CALrD,2BAA4B,CAC5B,cAAe,CALf,YAAa,CAcb,aAAc,CAZd,+BAAiC,CACjC,SAAU,CASV,oBAAqB,CAbrB,iBAAkB,CAWlB,sCAA6C,CAC7C,uDAA0D,CAL1D,wBAAiB,CAAjB,gBAAiB,CALjB,8BAyBF,CAVE,sDAEE,0CAA2C,CAC3C,yEACF,CAGA,kCACE,qDACF,CAoIF,0BAxGE,kBAAmB,CAjBnB,2CAA4C,CAJ5C,QAAS,CAGT,YAAa,CAmBb,sBAAuB,CArBvB,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WA6HF,CAEA,0BAvHE,wBAA6B,CAF7B,iBAAkB,CAClB,WA0HF,CAtGE,mCACE,UACF,CAsGF,wBAjIE,2CAA4C,CAJ5C,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAqIF,CA7FE,iFAHA,kBAAmB,CACnB,oBAiBA,CAXE,kEAGE,mDAAqD,CAErD,2BAA4B,CAD5B,wBAAyB,CAHzB,YAAa,CACb,gBAQF,CAHE,yDAPF,kEAQI,8FAEJ,CADE,CAIJ,0DACE,kBAAmB,CACnB,qBAaF,CAXE,mEAGE,mDAAqD,CAErD,4BAA6B,CAD7B,yBAA0B,CAH1B,YAAa,CACb,gBAQF,CAHE,yDAPF,mEAQI,6FAEJ,CADE,CAIJ,2DACE,eAAgB,CAChB,sBAcF,CAZE,oEAIE,mDAAqD,CAErD,2BAA4B,CAD5B,4BAA6B,CAH7B,WAAY,CACZ,6BAA8B,CAF9B,WAUF,CAHE,yDARF,oEASI,yFAEJ,CADE,CAIJ,wDACE,iBAAkB,CAClB,sBAWF,CATE,iEACE,mDAAqD,CACrD,wBAAyB,CACzB,yBAKF,CAHE,yDALF,iEAMI,2FAEJ,CADE,CAgCN,wBArIE,2CAA4C,CAJ5C,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAyIF,CAzBE,iCAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CAuBF,yBACE,qCA5HA,kBAAmB,CAjBnB,2CAA4C,CAJ5C,QAAS,CAGT,YAAa,CAmBb,sBAAuB,CArBvB,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAiJA,CAEA,qCA3IA,wBAA6B,CAF7B,iBAAkB,CAClB,WA8IA,CA1HA,8CACE,UACF,CA0HA,mCArJA,2CAA4C,CAJ5C,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WAyJA,CAjHA,kHAHA,kBAAmB,CACnB,oBAiBA,CAXE,mGAGE,mDAAqD,CAErD,2BAA4B,CAD5B,wBAAyB,CAHzB,YAAa,CACb,gBAQF,CAHE,yDAPF,mGAQI,8FAEJ,CADE,CAIJ,gFACE,kBAAmB,CACnB,qBAaF,CAXE,oGAGE,mDAAqD,CAErD,4BAA6B,CAD7B,yBAA0B,CAH1B,YAAa,CACb,gBAQF,CAHE,yDAPF,oGAQI,6FAEJ,CADE,CAIJ,iFACE,eAAgB,CAChB,sBAcF,CAZE,qGAIE,mDAAqD,CAErD,2BAA4B,CAD5B,4BAA6B,CAH7B,WAAY,CACZ,6BAA8B,CAF9B,WAUF,CAHE,yDARF,qGASI,yFAEJ,CADE,CAIJ,8EACE,iBAAkB,CAClB,sBAWF,CATE,kGACE,mDAAqD,CACrD,wBAAyB,CACzB,yBAKF,CAHE,yDALF,kGAMI,2FAEJ,CADE,CAoDJ,mCAzJA,2CAA4C,CAJ5C,QAAS,CAGT,YAAa,CAFb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAAM,CAIN,WA6JA,CA7CA,4CAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,gBAAiB,CAFjB,eAAgB,CADhB,UAMF,CAuCF,CAEA,qCACE,GACE,2BACF,CACF,CAEA,mCACE,GACE,0BACF,CACF,CAEA,wCACE,GACE,2BACF,CACF,CAEA,uCACE,GACE,0BACF,CACF","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n.Overlay {\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--color-canvas-overlay);\n border-radius: var(--primer-borderRadius-large, 12px);\n box-shadow: var(--color-overlay-shadow);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n\n &.Overlay--motion-scaleFade {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--primer-stack-padding-condensed, 8px);\n box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n & + .Overlay-body {\n padding-top: var(--primer-stack-padding-normal, 16px);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--primer-stack-gap-condensed, 8px);\n\n & .Overlay-title {\n font-size: var(--primer-text-title-size-medium, 20px);\n }\n\n & .Overlay-description {\n font-size: var(--primer-text-body-size-medium, 14px);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--primer-stack-gap-condensed, 8px);\n padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--primer-control-small-gap, 4px);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n color: var(--color-fg-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--primer-stack-padding-normal, 16px);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--primer-text-body-size-medium, 14px);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--primer-stack-padding-condensed, 8px);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--primer-stack-padding-normal, 16px);\n box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--color-btn-hover-bg);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n }\n}\n\n@define-mixin Overlay-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 999;\n display: flex;\n background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n position: absolute;\n z-index: 999;\n background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n @mixin Overlay-backdrop;\n\n align-items: center;\n justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--transparent;\n\n & .Overlay {\n width: auto;\n }\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n @mixin Overlay-backdrop;\n\n /* default left */\n align-items: center;\n justify-content: left;\n\n &.Overlay-backdrop--placement-left$(responsiveVariant) {\n align-items: center;\n justify-content: left;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n }\n }\n }\n\n &.Overlay-backdrop--placement-right$(responsiveVariant) {\n align-items: center;\n justify-content: right;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n }\n }\n }\n\n &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n align-items: end;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n width: 100vw;\n height: auto;\n max-height: calc(100vh - 2rem);\n border-radius: var(--primer-borderRadius-large, 12px);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n }\n }\n }\n\n &.Overlay-backdrop--placement-top$(responsiveVariant) {\n align-items: start;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n }\n }\n }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n @mixin Overlay-backdrop;\n\n & .Overlay {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --primer-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay-backdrop--center-whenNarrow {\n @mixin Overlay-backdrop--center;\n }\n\n .Overlay-backdrop--anchor-whenNarrow {\n @mixin Overlay-backdrop--anchor;\n }\n\n .Overlay-backdrop--side-whenNarrow {\n @mixin Overlay-backdrop--side -whenNarrow;\n }\n\n .Overlay-backdrop--full-whenNarrow {\n @mixin Overlay-backdrop--full;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
|
1
|
+
{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n.Overlay {\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--color-canvas-overlay);\n border-radius: var(--primer-borderRadius-large, 12px);\n box-shadow: var(--color-overlay-shadow);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n\n &.Overlay--motion-scaleFade {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--primer-stack-padding-condensed, 8px);\n box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n & + .Overlay-body {\n padding-top: var(--primer-stack-padding-normal, 16px);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--primer-stack-gap-condensed, 8px);\n\n & .Overlay-title {\n font-size: var(--primer-text-title-size-medium, 20px);\n }\n\n & .Overlay-description {\n font-size: var(--primer-text-body-size-medium, 14px);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--primer-stack-gap-condensed, 8px);\n padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--primer-control-small-gap, 4px);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n color: var(--color-fg-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--primer-stack-padding-normal, 16px);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--primer-text-body-size-medium, 14px);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--primer-stack-padding-condensed, 8px);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--primer-stack-padding-normal, 16px);\n box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--primer-stack-gap-condensed, 8px);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--color-btn-hover-bg);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n }\n}\n\n@define-mixin Overlay-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 999;\n display: flex;\n background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n position: absolute;\n z-index: 999;\n background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n @mixin Overlay-backdrop;\n\n align-items: center;\n justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--transparent;\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n @mixin Overlay-backdrop;\n\n /* default left */\n align-items: center;\n justify-content: left;\n\n &.Overlay-backdrop--placement-left$(responsiveVariant) {\n align-items: center;\n justify-content: left;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n }\n }\n }\n\n &.Overlay-backdrop--placement-right$(responsiveVariant) {\n align-items: center;\n justify-content: right;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n }\n }\n }\n\n &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n align-items: end;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n width: 100vw;\n height: auto;\n max-height: calc(100vh - 2rem);\n border-radius: var(--primer-borderRadius-large, 12px);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n }\n }\n }\n\n &.Overlay-backdrop--placement-top$(responsiveVariant) {\n align-items: start;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n border-radius: var(--primer-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n }\n }\n }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n @mixin Overlay-backdrop;\n\n & .Overlay {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --primer-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay-backdrop--center-whenNarrow {\n @mixin Overlay-backdrop--center;\n }\n\n .Overlay-backdrop--anchor-whenNarrow {\n @mixin Overlay-backdrop--anchor;\n }\n\n .Overlay-backdrop--side-whenNarrow {\n @mixin Overlay-backdrop--side -whenNarrow;\n }\n\n .Overlay-backdrop--full-whenNarrow {\n @mixin Overlay-backdrop--full;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
|