primer_view_components 0.3.0 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +22 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +16 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +30 -0
- data/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts +18 -0
- data/app/assets/javascripts/app/components/primer/alpha/nav_list.d.ts +28 -0
- data/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts +12 -0
- data/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +30 -0
- data/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts +26 -0
- data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +11 -0
- data/app/assets/javascripts/app/components/primer/anchored_position.d.ts +27 -0
- data/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/focus_group.d.ts +19 -0
- data/app/assets/javascripts/app/components/primer/primer.d.ts +21 -0
- data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +10 -0
- data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +1 -0
- data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +5 -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/action_bar/divider.rb +30 -0
- data/app/components/primer/alpha/action_bar/item.rb +26 -0
- data/app/components/primer/alpha/action_bar.css +1 -0
- data/app/components/primer/alpha/action_bar.css.json +17 -0
- data/app/components/primer/alpha/action_bar.css.map +1 -0
- data/app/components/primer/alpha/action_bar.html.erb +12 -0
- data/app/components/primer/alpha/action_bar.pcss +69 -0
- data/app/components/primer/alpha/action_bar.rb +110 -0
- data/app/components/primer/alpha/action_bar_element.d.ts +16 -0
- data/app/components/primer/alpha/action_bar_element.js +172 -0
- data/app/components/primer/alpha/action_bar_element.ts +175 -0
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +42 -42
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -2
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +10 -10
- 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 +16 -16
- data/app/components/primer/alpha/button_marketing.css +1 -1
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.pcss +9 -9
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +9 -9
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.pcss +16 -16
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +3 -3
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.pcss +13 -13
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +6 -6
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +10 -10
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +38 -38
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +23 -23
- data/app/components/primer/alpha/tool_tip.d.ts +3 -2
- data/app/components/primer/alpha/tool_tip.js +89 -44
- data/app/components/primer/alpha/tool_tip.ts +88 -41
- data/app/components/primer/alpha/tooltip.rb +1 -0
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +15 -15
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.pcss +2 -2
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +10 -10
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.pcss +4 -4
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.pcss +31 -31
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.pcss +2 -2
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +70 -70
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +7 -7
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +19 -19
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +23 -23
- data/app/components/primer/beta/link.css +1 -1
- data/app/components/primer/beta/link.css.map +1 -1
- data/app/components/primer/beta/link.pcss +12 -8
- data/app/components/primer/beta/link.rb +6 -10
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +10 -10
- data/app/components/primer/beta/progress_bar.css +1 -1
- data/app/components/primer/beta/progress_bar.css.map +1 -1
- data/app/components/primer/beta/progress_bar.pcss +1 -1
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +8 -8
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +3 -3
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.pcss +13 -13
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.pcss +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
- data/lib/postcss_mixins/focusBoxShadowInset.pcss +2 -2
- data/lib/postcss_mixins/focusOutline.pcss +1 -1
- data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss +2 -2
- data/lib/postcss_mixins/targetBoxShadow.pcss +1 -2
- data/lib/primer/static/generate_previews.rb +9 -0
- data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -3
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard.rb +5 -0
- data/previews/primer/alpha/action_bar_preview/inline.html.erb +16 -0
- data/previews/primer/alpha/action_bar_preview.rb +77 -0
- data/previews/primer/alpha/action_list_preview.rb +10 -0
- data/previews/primer/alpha/action_menu_preview.rb +5 -0
- data/previews/primer/alpha/auto_complete_preview.rb +1 -0
- data/previews/primer/alpha/banner_preview.rb +9 -1
- data/previews/primer/alpha/button_marketing_preview.rb +2 -0
- data/previews/primer/alpha/check_box_group_preview.rb +1 -0
- data/previews/primer/alpha/check_box_preview.rb +6 -0
- data/previews/primer/alpha/dialog_preview.rb +1 -0
- data/previews/primer/alpha/dropdown_preview.rb +1 -0
- data/previews/primer/alpha/hellip_button_preview.rb +1 -0
- data/previews/primer/alpha/hidden_text_expander_preview.rb +1 -0
- data/previews/primer/alpha/layout_preview.rb +4 -0
- data/previews/primer/alpha/menu_preview.rb +1 -0
- data/previews/primer/alpha/multi_input_preview.rb +4 -0
- data/previews/primer/alpha/nav_list_preview.rb +3 -0
- data/previews/primer/alpha/radio_button_group_preview.rb +2 -0
- data/previews/primer/alpha/radio_button_preview.rb +10 -0
- data/previews/primer/alpha/segmented_control_preview.rb +13 -0
- data/previews/primer/alpha/select_preview.rb +6 -0
- data/previews/primer/alpha/tab_nav_preview.rb +3 -0
- data/previews/primer/alpha/tab_panels_preview.rb +1 -0
- data/previews/primer/alpha/text_area_preview.rb +7 -0
- data/previews/primer/alpha/text_field_preview.rb +15 -0
- data/previews/primer/alpha/toggle_switch_preview.rb +7 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +20 -0
- data/previews/primer/alpha/tooltip_preview.rb +7 -0
- data/previews/primer/alpha/underline_nav_preview.rb +2 -0
- data/previews/primer/beta/auto_complete_item_preview.rb +2 -0
- data/previews/primer/beta/auto_complete_preview.rb +7 -0
- data/previews/primer/beta/avatar_preview.rb +10 -0
- data/previews/primer/beta/avatar_stack_preview.rb +3 -0
- data/previews/primer/beta/blankslate_preview.rb +9 -0
- data/previews/primer/beta/border_box_preview.rb +4 -0
- data/previews/primer/beta/breadcrumbs_preview.rb +1 -0
- data/previews/primer/beta/button_group_preview.rb +4 -0
- data/previews/primer/beta/button_preview.rb +10 -0
- data/previews/primer/beta/clipboard_copy_preview.rb +2 -0
- data/previews/primer/beta/close_button_preview.rb +1 -0
- data/previews/primer/beta/counter_preview.rb +11 -0
- data/previews/primer/beta/flash_preview.rb +8 -0
- data/previews/primer/beta/heading_preview.rb +1 -0
- data/previews/primer/beta/icon_button_preview.rb +3 -0
- data/previews/primer/beta/label_preview.rb +13 -0
- data/previews/primer/beta/link_preview.rb +11 -9
- data/previews/primer/beta/markdown_preview.rb +1 -0
- data/previews/primer/beta/octicon_preview.rb +1 -0
- data/previews/primer/beta/popover_preview.rb +6 -0
- data/previews/primer/beta/progress_bar_preview.rb +4 -0
- data/previews/primer/beta/spinner_preview.rb +1 -0
- data/previews/primer/beta/state_preview.rb +6 -0
- data/previews/primer/beta/subhead_preview.rb +4 -0
- data/previews/primer/beta/text_preview.rb +1 -0
- data/previews/primer/beta/timeline_item_preview.rb +1 -0
- data/previews/primer/beta/truncate_preview.rb +1 -0
- data/previews/primer/box_preview.rb +2 -0
- data/static/arguments.json +131 -11
- data/static/audited_at.json +4 -0
- data/static/classes.json +21 -0
- data/static/constants.json +23 -6
- data/static/info_arch.json +890 -48
- data/static/previews.json +619 -0
- data/static/statuses.json +4 -0
- metadata +43 -8
@@ -17,7 +17,7 @@
|
|
17
17
|
border: var(--borderWidth-thin) solid;
|
18
18
|
border-color: transparent;
|
19
19
|
border-radius: var(--borderRadius-medium);
|
20
|
-
color: var(--
|
20
|
+
color: var(--color-btn-text);
|
21
21
|
transition: var(--duration-fast) var(--easing-easeInOut);
|
22
22
|
transition-property: color, fill, background-color, border-color;
|
23
23
|
text-align: center;
|
@@ -96,7 +96,7 @@ summary.Button {
|
|
96
96
|
|
97
97
|
& .Counter {
|
98
98
|
color: inherit;
|
99
|
-
background-color: var(--
|
99
|
+
background-color: var(--color-btn-counter-bg);
|
100
100
|
}
|
101
101
|
}
|
102
102
|
|
@@ -161,15 +161,15 @@ summary.Button {
|
|
161
161
|
|
162
162
|
/* primary */
|
163
163
|
.Button--primary {
|
164
|
-
color: var(--
|
165
|
-
fill: var(--
|
166
|
-
background-color: var(--
|
167
|
-
border-color: var(--
|
168
|
-
box-shadow: var(--
|
164
|
+
color: var(--color-btn-primary-text);
|
165
|
+
fill: var(--color-btn-primary-icon);
|
166
|
+
background-color: var(--color-btn-primary-bg);
|
167
|
+
border-color: var(--color-btn-primary-border);
|
168
|
+
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
|
169
169
|
|
170
170
|
&:hover:not(:disabled) {
|
171
|
-
background-color: var(--
|
172
|
-
border-color: var(--
|
171
|
+
background-color: var(--color-btn-primary-hover-bg);
|
172
|
+
border-color: var(--color-btn-primary-hover-border);
|
173
173
|
}
|
174
174
|
|
175
175
|
/* fallback :focus state */
|
@@ -190,93 +190,93 @@ summary.Button {
|
|
190
190
|
|
191
191
|
&:active:not(:disabled),
|
192
192
|
&[aria-pressed='true'] {
|
193
|
-
background-color: var(--
|
194
|
-
box-shadow: var(--
|
193
|
+
background-color: var(--color-btn-primary-selected-bg);
|
194
|
+
box-shadow: var(--color-btn-primary-selected-shadow);
|
195
195
|
}
|
196
196
|
|
197
197
|
&:disabled,
|
198
198
|
&[aria-disabled='true'] {
|
199
|
-
color: var(--
|
200
|
-
background-color: var(--
|
201
|
-
border-color: var(--
|
202
|
-
fill: var(--
|
199
|
+
color: var(--color-btn-primary-disabled-text);
|
200
|
+
background-color: var(--color-btn-primary-disabled-bg);
|
201
|
+
border-color: var(--color-btn-primary-disabled-border);
|
202
|
+
fill: var(--color-btn-primary-disabled-text);
|
203
203
|
}
|
204
204
|
|
205
205
|
& .Counter {
|
206
206
|
color: inherit;
|
207
|
-
background-color: var(--
|
207
|
+
background-color: var(--color-btn-primary-counter-bg);
|
208
208
|
}
|
209
209
|
}
|
210
210
|
|
211
211
|
/* default (secondary) */
|
212
212
|
.Button--secondary {
|
213
|
-
color: var(--
|
214
|
-
fill: var(--
|
215
|
-
background-color: var(--
|
216
|
-
border-color: var(--
|
217
|
-
box-shadow: var(--
|
213
|
+
color: var(--color-btn-text);
|
214
|
+
fill: var(--color-fg-muted); /* help this */
|
215
|
+
background-color: var(--color-btn-bg);
|
216
|
+
border-color: var(--color-btn-border);
|
217
|
+
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
|
218
218
|
|
219
219
|
&:hover:not(:disabled) {
|
220
|
-
background-color: var(--
|
221
|
-
border-color: var(--
|
220
|
+
background-color: var(--color-btn-hover-bg);
|
221
|
+
border-color: var(--color-btn-hover-border);
|
222
222
|
}
|
223
223
|
|
224
224
|
&:active:not(:disabled) {
|
225
|
-
background-color: var(--
|
226
|
-
border-color: var(--
|
225
|
+
background-color: var(--color-btn-active-bg);
|
226
|
+
border-color: var(--color-btn-active-border);
|
227
227
|
}
|
228
228
|
|
229
229
|
&[aria-pressed='true'] {
|
230
|
-
background-color: var(--
|
231
|
-
box-shadow: var(--shadow-inset);
|
230
|
+
background-color: var(--color-btn-selected-bg);
|
231
|
+
box-shadow: var(--color-primer-shadow-inset);
|
232
232
|
}
|
233
233
|
|
234
234
|
&:disabled,
|
235
235
|
&[aria-disabled='true'] {
|
236
|
-
color: var(--
|
237
|
-
background-color: var(--
|
238
|
-
border-color: var(--
|
239
|
-
fill: var(--
|
236
|
+
color: var(--color-primer-fg-disabled);
|
237
|
+
background-color: var(--color-btn-bg);
|
238
|
+
border-color: var(--color-btn-border);
|
239
|
+
fill: var(--color-primer-fg-disabled);
|
240
240
|
}
|
241
241
|
}
|
242
242
|
|
243
243
|
.Button--invisible {
|
244
|
-
color: var(--
|
244
|
+
color: var(--color-btn-text);
|
245
245
|
|
246
246
|
&:hover:not(:disabled) {
|
247
|
-
background-color: var(--
|
247
|
+
background-color: var(--color-action-list-item-default-hover-bg);
|
248
248
|
}
|
249
249
|
|
250
250
|
&[aria-pressed='true'],
|
251
251
|
&:active:not(:disabled) {
|
252
|
-
background-color: var(--
|
252
|
+
background-color: var(--color-action-list-item-default-active-bg);
|
253
253
|
}
|
254
254
|
|
255
255
|
&:disabled,
|
256
256
|
&[aria-disabled='true'] {
|
257
|
-
color: var(--
|
258
|
-
background-color: var(--
|
259
|
-
border-color:
|
260
|
-
fill: var(--
|
257
|
+
color: var(--color-primer-fg-disabled);
|
258
|
+
background-color: var(--color-btn-bg);
|
259
|
+
border-color: var(--color-btn-border);
|
260
|
+
fill: var(--color-primer-fg-disabled);
|
261
261
|
}
|
262
262
|
|
263
263
|
/* if button has no visuals, use link blue for text */
|
264
264
|
&.Button--invisible-noVisuals .Button-label {
|
265
|
-
color: var(--
|
265
|
+
color: var(--color-accent-fg);
|
266
266
|
}
|
267
267
|
|
268
268
|
& .Button-visual {
|
269
|
-
color: var(--
|
269
|
+
color: var(--color-fg-muted);
|
270
270
|
|
271
271
|
& .Counter {
|
272
|
-
color: var(--
|
272
|
+
color: var(--color-fg-default);
|
273
273
|
}
|
274
274
|
}
|
275
275
|
}
|
276
276
|
|
277
277
|
.Button--link {
|
278
|
-
color: var(--
|
279
|
-
fill: var(--
|
278
|
+
color: var(--color-accent-fg);
|
279
|
+
fill: var(--color-accent-fg);
|
280
280
|
display: inline-block;
|
281
281
|
font-size: inherit;
|
282
282
|
border: none;
|
@@ -294,59 +294,59 @@ summary.Button {
|
|
294
294
|
|
295
295
|
&:disabled,
|
296
296
|
&[aria-disabled='true'] {
|
297
|
-
color: var(--
|
297
|
+
color: var(--color-primer-fg-disabled);
|
298
298
|
background-color: transparent;
|
299
299
|
border-color: transparent;
|
300
|
-
fill: var(--
|
300
|
+
fill: var(--color-primer-fg-disabled);
|
301
301
|
}
|
302
302
|
}
|
303
303
|
|
304
304
|
/* danger */
|
305
305
|
.Button--danger {
|
306
|
-
color: var(--
|
307
|
-
fill: var(--
|
308
|
-
background-color: var(--
|
309
|
-
border-color: var(--
|
310
|
-
box-shadow: var(--
|
306
|
+
color: var(--color-btn-danger-text);
|
307
|
+
fill: var(--color-btn-danger-icon);
|
308
|
+
background-color: var(--color-btn-bg);
|
309
|
+
border-color: var(--color-btn-border);
|
310
|
+
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
|
311
311
|
|
312
312
|
&:hover:not(:disabled) {
|
313
|
-
color: var(--
|
314
|
-
fill: var(--
|
315
|
-
background-color: var(--
|
316
|
-
border-color: var(--
|
317
|
-
box-shadow: var(--
|
313
|
+
color: var(--color-btn-danger-hover-text);
|
314
|
+
fill: var(--color-btn-danger-hover-text);
|
315
|
+
background-color: var(--color-btn-danger-hover-bg);
|
316
|
+
border-color: var(--color-btn-danger-hover-border);
|
317
|
+
box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
|
318
318
|
|
319
319
|
& .Counter {
|
320
|
-
color: var(--
|
321
|
-
background-color: var(--
|
320
|
+
color: var(--color-btn-danger-hover-counter-fg);
|
321
|
+
background-color: var(--color-btn-danger-hover-counter-bg);
|
322
322
|
}
|
323
323
|
}
|
324
324
|
|
325
325
|
&:active:not(:disabled),
|
326
326
|
&[aria-pressed='true'] {
|
327
|
-
color: var(--
|
328
|
-
fill: var(--
|
329
|
-
background-color: var(--
|
330
|
-
border-color: var(--
|
331
|
-
box-shadow: var(--
|
327
|
+
color: var(--color-btn-danger-selected-text);
|
328
|
+
fill: var(--color-btn-danger-selected-text);
|
329
|
+
background-color: var(--color-btn-danger-selected-bg);
|
330
|
+
border-color: var(--color-btn-danger-selected-border);
|
331
|
+
box-shadow: var(--color-btn-danger-selected-shadow);
|
332
332
|
}
|
333
333
|
|
334
334
|
&:disabled,
|
335
335
|
&[aria-disabled='true'] {
|
336
|
-
color: var(--
|
337
|
-
fill: var(--
|
338
|
-
background-color: var(--
|
339
|
-
border-color: var(--
|
336
|
+
color: var(--color-btn-danger-disabled-text);
|
337
|
+
fill: var(--color-btn-danger-disabled-text);
|
338
|
+
background-color: var(--color-btn-danger-disabled-bg);
|
339
|
+
border-color: var(--color-btn-border);
|
340
340
|
|
341
341
|
& .Counter {
|
342
|
-
color: var(--
|
343
|
-
background-color: var(--
|
342
|
+
color: var(--color-btn-danger-disabled-counter-fg);
|
343
|
+
background-color: var(--color-btn-danger-disabled-counter-bg);
|
344
344
|
}
|
345
345
|
}
|
346
346
|
|
347
347
|
& .Counter {
|
348
|
-
color: var(--
|
349
|
-
background-color: var(--
|
348
|
+
color: var(--color-btn-danger-counter-fg);
|
349
|
+
background-color: var(--color-btn-danger-counter-bg);
|
350
350
|
}
|
351
351
|
}
|
352
352
|
|
@@ -1 +1 @@
|
|
1
|
-
.Counter{background-color:var(--
|
1
|
+
.Counter{background-color:var(--color-neutral-muted);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-counter-border);border-radius:2em;color:var(--color-fg-default);display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.Counter--secondary{background-color:var(--color-neutral-subtle);color:var(--color-fg-muted)}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,
|
1
|
+
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,2CAA4C,CAC5C,kFAAiE,CACjE,iBAAkB,CAJlB,6BAA8B,CAN9B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,8CAA+C,CAD/C,iCAEF,CAEA,oBAEE,4CAA6C,CAD7C,2BAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--color-fg-default);\n text-align: center;\n background-color: var(--color-neutral-muted);\n border: var(--borderWidth-thin) solid var(--color-counter-border);\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--color-fg-muted);\n background-color: var(--color-neutral-subtle);\n}\n"]}
|
@@ -7,10 +7,10 @@
|
|
7
7
|
font-size: var(--text-body-size-small);
|
8
8
|
font-weight: var(--base-text-weight-medium);
|
9
9
|
line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
|
10
|
-
color: var(--
|
10
|
+
color: var(--color-fg-default);
|
11
11
|
text-align: center;
|
12
|
-
background-color: var(--
|
13
|
-
border: var(--borderWidth-thin) solid var(--counter-
|
12
|
+
background-color: var(--color-neutral-muted);
|
13
|
+
border: var(--borderWidth-thin) solid var(--color-counter-border);
|
14
14
|
border-radius: 2em;
|
15
15
|
|
16
16
|
&:empty {
|
@@ -25,11 +25,11 @@
|
|
25
25
|
}
|
26
26
|
|
27
27
|
.Counter--primary {
|
28
|
-
color: var(--
|
29
|
-
background-color: var(--
|
28
|
+
color: var(--color-fg-on-emphasis);
|
29
|
+
background-color: var(--color-neutral-emphasis);
|
30
30
|
}
|
31
31
|
|
32
32
|
.Counter--secondary {
|
33
|
-
color: var(--
|
34
|
-
background-color: var(--
|
33
|
+
color: var(--color-fg-muted);
|
34
|
+
background-color: var(--color-neutral-subtle);
|
35
35
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.flash:not(.Banner){background-image:linear-gradient(var(--
|
1
|
+
.flash:not(.Banner){background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border-color:var(--color-accent-muted);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--color-fg-default);padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--color-accent-fg);margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--color-fg-muted);margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.flash-warn:not(.Banner) .octicon{color:var(--color-attention-fg)}.flash-error:not(.Banner){background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.flash-error:not(.Banner) .octicon{color:var(--color-danger-fg)}.flash-success:not(.Banner){background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.flash-success:not(.Banner) .octicon{color:var(--color-success-fg)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--color-canvas-default)}.warning{background-color:var(--color-attention-subtle);font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,
|
1
|
+
{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uFAAyF,CACzF,sCAAuC,CALvC,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,6BAA8B,CAN9B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,4BAA6B,CAC7B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,2BAA4B,CAD5B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,kCACE,+BACF,CAGF,0BAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,mCACE,4BACF,CAGF,4BAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,qCACE,6BACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,4CACF,CAGA,SAIE,8CAA+C,CAD/C,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n border-color: var(--color-accent-muted);\n\n & .octicon {\n color: var(--color-accent-fg);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--color-fg-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n border-color: var(--color-attention-muted);\n\n & .octicon {\n color: var(--color-attention-fg);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n border-color: var(--color-danger-muted);\n\n & .octicon {\n color: var(--color-danger-fg);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n border-color: var(--color-success-muted);\n\n & .octicon {\n color: var(--color-success-fg);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--color-canvas-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--color-attention-subtle);\n}\n"]}
|
@@ -9,12 +9,12 @@
|
|
9
9
|
border-radius: var(--borderRadius-medium);
|
10
10
|
|
11
11
|
/* Default color */
|
12
|
-
color: var(--
|
13
|
-
background-image: linear-gradient(var(--
|
14
|
-
border-color: var(--
|
12
|
+
color: var(--color-fg-default);
|
13
|
+
background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
|
14
|
+
border-color: var(--color-accent-muted);
|
15
15
|
|
16
16
|
& .octicon {
|
17
|
-
color: var(--
|
17
|
+
color: var(--color-accent-fg);
|
18
18
|
margin-right: var(--base-size-12);
|
19
19
|
}
|
20
20
|
|
@@ -63,7 +63,7 @@
|
|
63
63
|
|
64
64
|
&.btn .octicon {
|
65
65
|
margin-right: var(--control-small-gap);
|
66
|
-
color: var(--
|
66
|
+
color: var(--color-fg-muted);
|
67
67
|
}
|
68
68
|
|
69
69
|
&.btn-primary {
|
@@ -78,32 +78,32 @@
|
|
78
78
|
/* Color variations */
|
79
79
|
|
80
80
|
.flash-warn:not(.Banner) {
|
81
|
-
color: var(--
|
82
|
-
background-image: linear-gradient(var(--
|
83
|
-
border-color: var(--
|
81
|
+
color: var(--color-fg-default);
|
82
|
+
background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
|
83
|
+
border-color: var(--color-attention-muted);
|
84
84
|
|
85
85
|
& .octicon {
|
86
|
-
color: var(--
|
86
|
+
color: var(--color-attention-fg);
|
87
87
|
}
|
88
88
|
}
|
89
89
|
|
90
90
|
.flash-error:not(.Banner) {
|
91
|
-
color: var(--
|
92
|
-
background-image: linear-gradient(var(--
|
93
|
-
border-color: var(--
|
91
|
+
color: var(--color-fg-default);
|
92
|
+
background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
|
93
|
+
border-color: var(--color-danger-muted);
|
94
94
|
|
95
95
|
& .octicon {
|
96
|
-
color: var(--
|
96
|
+
color: var(--color-danger-fg);
|
97
97
|
}
|
98
98
|
}
|
99
99
|
|
100
100
|
.flash-success:not(.Banner) {
|
101
|
-
color: var(--
|
102
|
-
background-image: linear-gradient(var(--
|
103
|
-
border-color: var(--
|
101
|
+
color: var(--color-fg-default);
|
102
|
+
background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
|
103
|
+
border-color: var(--color-success-muted);
|
104
104
|
|
105
105
|
& .octicon {
|
106
|
-
color: var(--
|
106
|
+
color: var(--color-success-fg);
|
107
107
|
}
|
108
108
|
}
|
109
109
|
|
@@ -130,7 +130,7 @@
|
|
130
130
|
/* Makes sure the background is opaque to cover any content underneath */
|
131
131
|
.flash-full,
|
132
132
|
.flash-banner {
|
133
|
-
background-color: var(--
|
133
|
+
background-color: var(--color-canvas-default);
|
134
134
|
}
|
135
135
|
|
136
136
|
/* FIXME deprecate this */
|
@@ -138,5 +138,5 @@
|
|
138
138
|
padding: 0.5em;
|
139
139
|
margin-bottom: 0.8em;
|
140
140
|
font-weight: var(--base-text-weight-semibold);
|
141
|
-
background-color: var(--
|
141
|
+
background-color: var(--color-attention-subtle);
|
142
142
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--
|
1
|
+
.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--color-neutral-emphasis);color:var(--color-fg-default)}.Label--secondary{border-color:var(--color-border-default);color:var(--color-fg-muted)}.Label--accent,.Label--info{border-color:var(--color-accent-emphasis);color:var(--color-accent-fg)}.Label--success{border-color:var(--color-success-emphasis);color:var(--color-success-fg)}.Label--attention,.Label--warning{border-color:var(--color-attention-emphasis);color:var(--color-attention-fg)}.Label--severe{border-color:var(--color-severe-emphasis);color:var(--color-severe-fg)}.Label--danger{border-color:var(--color-danger-emphasis);color:var(--color-danger-fg)}.Label--open{border-color:var(--color-open-emphasis);color:var(--color-open-fg)}.Label--closed{border-color:var(--color-closed-emphasis);color:var(--color-closed-fg)}.Label--done{border-color:var(--color-done-emphasis);color:var(--color-done-fg)}.Label--sponsors{border-color:var(--color-sponsors-emphasis);color:var(--color-sponsors-fg)}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,
|
1
|
+
{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,kFAAiE,CACjE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kBAEE,wCAAyC,CADzC,2BAEF,CAIA,4BAGE,yCAA0C,CAD1C,4BAEF,CAEA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kCAGE,4CAA6C,CAD7C,+BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,iBAEE,2CAA4C,CAD5C,8BAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--color-border-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--color-fg-default);\n border-color: var(--color-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--color-fg-muted);\n border-color: var(--color-border-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--color-accent-fg);\n border-color: var(--color-accent-emphasis);\n}\n\n.Label--success {\n color: var(--color-success-fg);\n border-color: var(--color-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--color-attention-fg);\n border-color: var(--color-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--color-severe-fg);\n border-color: var(--color-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--color-danger-fg);\n border-color: var(--color-danger-emphasis);\n}\n\n.Label--open {\n color: var(--color-open-fg);\n border-color: var(--color-open-emphasis);\n}\n\n.Label--closed {\n color: var(--color-closed-fg);\n border-color: var(--color-closed-emphasis);\n}\n\n.Label--done {\n color: var(--color-done-fg);\n border-color: var(--color-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--color-sponsors-fg);\n border-color: var(--color-sponsors-emphasis);\n}\n"]}
|
@@ -15,7 +15,7 @@
|
|
15
15
|
font-weight: var(--base-text-weight-medium);
|
16
16
|
line-height: 18px;
|
17
17
|
white-space: nowrap;
|
18
|
-
border: var(--borderWidth-thin) solid var(--
|
18
|
+
border: var(--borderWidth-thin) solid var(--color-border-default);
|
19
19
|
border-radius: 2em;
|
20
20
|
|
21
21
|
&:hover {
|
@@ -44,60 +44,60 @@
|
|
44
44
|
/* Contrast */
|
45
45
|
|
46
46
|
.Label--primary {
|
47
|
-
color: var(--
|
48
|
-
border-color: var(--
|
47
|
+
color: var(--color-fg-default);
|
48
|
+
border-color: var(--color-neutral-emphasis);
|
49
49
|
}
|
50
50
|
|
51
51
|
.Label--secondary {
|
52
|
-
color: var(--
|
53
|
-
border-color: var(--
|
52
|
+
color: var(--color-fg-muted);
|
53
|
+
border-color: var(--color-border-default);
|
54
54
|
}
|
55
55
|
|
56
56
|
/* Colors */
|
57
57
|
|
58
58
|
.Label--info, /* TODO: deprecate */
|
59
59
|
.Label--accent {
|
60
|
-
color: var(--
|
61
|
-
border-color: var(--
|
60
|
+
color: var(--color-accent-fg);
|
61
|
+
border-color: var(--color-accent-emphasis);
|
62
62
|
}
|
63
63
|
|
64
64
|
.Label--success {
|
65
|
-
color: var(--
|
66
|
-
border-color: var(--
|
65
|
+
color: var(--color-success-fg);
|
66
|
+
border-color: var(--color-success-emphasis);
|
67
67
|
}
|
68
68
|
|
69
69
|
.Label--warning, /* TODO: deprecate */
|
70
70
|
.Label--attention {
|
71
|
-
color: var(--
|
72
|
-
border-color: var(--
|
71
|
+
color: var(--color-attention-fg);
|
72
|
+
border-color: var(--color-attention-emphasis);
|
73
73
|
}
|
74
74
|
|
75
75
|
.Label--severe {
|
76
|
-
color: var(--
|
77
|
-
border-color: var(--
|
76
|
+
color: var(--color-severe-fg);
|
77
|
+
border-color: var(--color-severe-emphasis);
|
78
78
|
}
|
79
79
|
|
80
80
|
.Label--danger {
|
81
|
-
color: var(--
|
82
|
-
border-color: var(--
|
81
|
+
color: var(--color-danger-fg);
|
82
|
+
border-color: var(--color-danger-emphasis);
|
83
83
|
}
|
84
84
|
|
85
85
|
.Label--open {
|
86
|
-
color: var(--
|
87
|
-
border-color: var(--
|
86
|
+
color: var(--color-open-fg);
|
87
|
+
border-color: var(--color-open-emphasis);
|
88
88
|
}
|
89
89
|
|
90
90
|
.Label--closed {
|
91
|
-
color: var(--
|
92
|
-
border-color: var(--
|
91
|
+
color: var(--color-closed-fg);
|
92
|
+
border-color: var(--color-closed-emphasis);
|
93
93
|
}
|
94
94
|
|
95
95
|
.Label--done {
|
96
|
-
color: var(--
|
97
|
-
border-color: var(--
|
96
|
+
color: var(--color-done-fg);
|
97
|
+
border-color: var(--color-done-emphasis);
|
98
98
|
}
|
99
99
|
|
100
100
|
.Label--sponsors {
|
101
|
-
color: var(--
|
102
|
-
border-color: var(--
|
101
|
+
color: var(--color-sponsors-fg);
|
102
|
+
border-color: var(--color-sponsors-emphasis);
|
103
103
|
}
|
@@ -1 +1 @@
|
|
1
|
-
.Link{color:var(--
|
1
|
+
.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,
|
1
|
+
{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,4BAeF,CAbE,YAEE,cACF,CAEA,wBAJE,yBAMF,CAEA,gCAEE,gBACF,CAGF,eACE,uCAKF,CAHE,qBACE,sCACF,CAGF,iBACE,qCAKF,CAHE,uBACE,sCACF,CAGF,aACE,qCAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,sCAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n color: var(--color-accent-fg);\n\n &:hover {\n text-decoration: underline;\n cursor: pointer;\n }\n\n &:focus {\n text-decoration: underline;\n }\n\n &:focus,\n &:focus-visible {\n outline-offset: 0;\n }\n}\n\n.Link--primary {\n color: var(--color-fg-default) !important;\n\n &:hover {\n color: var(--color-accent-fg) !important;\n }\n}\n\n.Link--secondary {\n color: var(--color-fg-muted) !important;\n\n &:hover {\n color: var(--color-accent-fg) !important;\n }\n}\n\n.Link--muted {\n color: var(--color-fg-muted) !important;\n\n &:hover {\n color: var(--color-accent-fg) !important;\n text-decoration: none;\n }\n}\n\n/* Set the link color only on hover\n Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n &:hover {\n color: var(--color-accent-fg) !important;\n text-decoration: underline;\n cursor: pointer;\n }\n}\n\n/* When using a color utility class inside of a link class\n color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n &:hover [class*='color-fg'] {\n color: inherit !important;\n }\n}\n"]}
|
@@ -1,13 +1,17 @@
|
|
1
1
|
/* Links */
|
2
2
|
|
3
3
|
.Link {
|
4
|
-
color: var(--
|
4
|
+
color: var(--color-accent-fg);
|
5
5
|
|
6
6
|
&:hover {
|
7
7
|
text-decoration: underline;
|
8
8
|
cursor: pointer;
|
9
9
|
}
|
10
10
|
|
11
|
+
&:focus {
|
12
|
+
text-decoration: underline;
|
13
|
+
}
|
14
|
+
|
11
15
|
&:focus,
|
12
16
|
&:focus-visible {
|
13
17
|
outline-offset: 0;
|
@@ -15,26 +19,26 @@
|
|
15
19
|
}
|
16
20
|
|
17
21
|
.Link--primary {
|
18
|
-
color: var(--
|
22
|
+
color: var(--color-fg-default) !important;
|
19
23
|
|
20
24
|
&:hover {
|
21
|
-
color: var(--
|
25
|
+
color: var(--color-accent-fg) !important;
|
22
26
|
}
|
23
27
|
}
|
24
28
|
|
25
29
|
.Link--secondary {
|
26
|
-
color: var(--
|
30
|
+
color: var(--color-fg-muted) !important;
|
27
31
|
|
28
32
|
&:hover {
|
29
|
-
color: var(--
|
33
|
+
color: var(--color-accent-fg) !important;
|
30
34
|
}
|
31
35
|
}
|
32
36
|
|
33
37
|
.Link--muted {
|
34
|
-
color: var(--
|
38
|
+
color: var(--color-fg-muted) !important;
|
35
39
|
|
36
40
|
&:hover {
|
37
|
-
color: var(--
|
41
|
+
color: var(--color-accent-fg) !important;
|
38
42
|
text-decoration: none;
|
39
43
|
}
|
40
44
|
}
|
@@ -43,7 +47,7 @@
|
|
43
47
|
Useful when you want only part of a link to turn blue on hover */
|
44
48
|
.Link--onHover {
|
45
49
|
&:hover {
|
46
|
-
color: var(--
|
50
|
+
color: var(--color-accent-fg) !important;
|
47
51
|
text-decoration: underline;
|
48
52
|
cursor: pointer;
|
49
53
|
}
|