primer_view_components 0.0.121 → 0.0.122
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +20 -0
- 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.css.json +123 -1
- data/app/components/primer/alpha/auto_complete.css.json +23 -1
- data/app/components/primer/alpha/banner.css.json +24 -1
- data/app/components/primer/alpha/button_marketing.css.json +33 -1
- data/app/components/primer/alpha/check_box.rb +74 -0
- data/app/components/primer/alpha/check_box_group.rb +36 -0
- data/app/components/primer/alpha/dialog.css.json +82 -1
- data/app/components/primer/alpha/dialog.rb +1 -1
- data/app/components/primer/alpha/dropdown.css.json +40 -1
- data/app/components/primer/alpha/form_button.rb +32 -0
- data/app/components/primer/alpha/form_control.html.erb +26 -0
- data/app/components/primer/alpha/form_control.rb +105 -0
- data/app/components/primer/alpha/layout.css.json +80 -1
- data/app/components/primer/alpha/menu.css.json +28 -1
- data/app/components/primer/alpha/multi_input.rb +81 -0
- data/app/components/primer/alpha/radio_button.rb +25 -0
- data/app/components/primer/alpha/radio_button_group.rb +36 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +31 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +43 -12
- data/app/components/primer/alpha/select.rb +37 -0
- data/app/components/primer/alpha/submit_button.rb +32 -0
- data/app/components/primer/alpha/tab_nav.css.json +24 -1
- data/app/components/primer/alpha/tab_panels.rb +7 -0
- data/app/components/primer/alpha/text_area.rb +24 -0
- data/app/components/primer/alpha/text_field.css +2 -2
- data/app/components/primer/alpha/text_field.css.json +134 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +27 -0
- data/app/components/primer/alpha/text_field.rb +15 -20
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.json +40 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +31 -61
- data/app/components/primer/alpha/underline_nav.css.json +28 -1
- data/app/components/primer/beta/avatar.css.json +17 -1
- data/app/components/primer/beta/avatar_stack.css.json +28 -1
- data/app/components/primer/beta/blankslate.css.json +22 -1
- data/app/components/primer/beta/border_box.css.json +54 -1
- data/app/components/primer/beta/breadcrumbs.css.json +11 -1
- data/app/components/primer/beta/button.css.json +71 -1
- data/app/components/primer/beta/counter.css.json +10 -1
- data/app/components/primer/beta/flash.css.json +27 -1
- data/app/components/primer/beta/label.css.json +25 -1
- data/app/components/primer/beta/link.css.json +19 -1
- data/app/components/primer/beta/popover.css.json +39 -1
- data/app/components/primer/beta/progress_bar.css.json +10 -1
- data/app/components/primer/beta/state.css.json +13 -1
- data/app/components/primer/beta/subhead.css.json +12 -1
- data/app/components/primer/beta/timeline_item.css.json +16 -1
- data/app/components/primer/beta/truncate.css.json +12 -1
- data/app/components/primer/component.rb +10 -2
- data/app/components/primer/truncate.css.json +13 -1
- data/app/forms/{select_list_form.rb → select_form.rb} +1 -1
- data/app/lib/primer/css/layout.css.json +316 -1
- data/app/lib/primer/css/utilities.css.json +1659 -1
- data/lib/primer/form_components.rb +26 -6
- data/lib/primer/forms/builder.rb +1 -17
- data/lib/primer/forms/button.rb +4 -1
- data/lib/primer/forms/check_box_group.html.erb +14 -9
- data/lib/primer/forms/check_box_group.rb +5 -0
- data/lib/primer/forms/dsl/check_box_group_input.rb +3 -4
- data/lib/primer/forms/dsl/input.rb +33 -2
- data/lib/primer/forms/dsl/input_methods.rb +49 -1
- data/lib/primer/forms/dsl/radio_button_group_input.rb +2 -3
- data/lib/primer/forms/dsl/{select_list_input.rb → select_input.rb} +2 -2
- data/lib/primer/forms/dsl/text_field_input.rb +7 -5
- data/lib/primer/forms/form_control.rb +0 -1
- data/lib/primer/forms/group.html.erb +1 -1
- data/lib/primer/forms/multi.html.erb +8 -6
- data/lib/primer/forms/multi.rb +2 -0
- data/lib/primer/forms/radio_button_group.html.erb +14 -9
- data/lib/primer/forms/radio_button_group.rb +5 -0
- data/lib/primer/forms/{select_list.html.erb → select.html.erb} +0 -0
- data/lib/primer/forms/{select_list.rb → select.rb} +2 -2
- data/lib/primer/forms/spacing_wrapper.html.erb +1 -1
- data/lib/primer/forms/text_area.rb +1 -1
- data/lib/primer/forms/text_field.rb +5 -1
- data/lib/primer/forms/utils.rb +20 -0
- data/lib/primer/view_components/engine.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/backend.rb +1 -15
- data/lib/primer/yard/component_manifest.rb +44 -25
- data/lib/primer/yard/component_ref.rb +40 -0
- data/lib/primer/yard/docs_helper.rb +16 -2
- data/lib/primer/yard/legacy_gatsby_backend.rb +9 -15
- data/lib/primer/yard/lookbook_docs_helper.rb +32 -0
- data/lib/primer/yard/lookbook_pages_backend.rb +194 -0
- data/lib/primer/yard/registry.rb +6 -21
- data/lib/primer/yard/renders_many_handler.rb +1 -1
- data/lib/primer/yard/renders_one_handler.rb +1 -1
- data/lib/primer/yard.rb +14 -0
- data/lib/tasks/docs.rake +26 -13
- data/previews/pages/forms/01_introduction.md.erb +44 -0
- data/previews/pages/forms/02_getting_started.md.erb +125 -0
- data/previews/pages/forms/03_caption_templates.md.erb +30 -0
- data/previews/pages/forms/04_after_content.md.erb +39 -0
- data/previews/pages/forms/05_groups_layouts.md.erb +22 -0
- data/previews/pages/forms/06_miscellaneous_inputs.md.erb +43 -0
- data/previews/pages/forms/07_toggle_switch_forms.md.erb +58 -0
- data/previews/pages/forms/08_validations.md.erb +28 -0
- data/previews/pages/forms/09_compound_forms.md.erb +97 -0
- data/previews/primer/alpha/check_box_group_preview.rb +89 -0
- data/previews/primer/alpha/check_box_preview.rb +62 -0
- data/previews/primer/alpha/form_control_preview/playground.html.erb +9 -0
- data/previews/primer/alpha/form_control_preview.rb +106 -0
- data/previews/primer/alpha/multi_input_preview/playground.html.erb +41 -0
- data/previews/primer/alpha/multi_input_preview.rb +80 -0
- data/previews/primer/alpha/radio_button_group_preview.rb +83 -0
- data/previews/primer/alpha/radio_button_preview.rb +62 -0
- data/previews/primer/alpha/select_preview.rb +130 -0
- data/previews/primer/alpha/text_area_preview.rb +87 -0
- data/previews/primer/alpha/text_field_preview.rb +10 -1
- data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +2 -2
- data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb} +1 -1
- data/previews/primer/forms/forms_preview.rb +3 -1
- data/static/arguments.json +1358 -1328
- data/static/audited_at.json +10 -0
- data/static/constants.json +20 -0
- data/static/previews.json +218 -40
- data/static/statuses.json +10 -0
- metadata +41 -7
|
@@ -1 +1,40 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/toggle_switch",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".ToggleSwitch",
|
|
5
|
+
".ToggleSwitch.ToggleSwitch",
|
|
6
|
+
".ToggleSwitch--checked .ToggleSwitch-statusOn",
|
|
7
|
+
".ToggleSwitch--checked .ToggleSwitch-statusOff",
|
|
8
|
+
".ToggleSwitch-track",
|
|
9
|
+
".ToggleSwitch-track:focus",
|
|
10
|
+
".ToggleSwitch-track:focus-visible",
|
|
11
|
+
".ToggleSwitch-track:hover",
|
|
12
|
+
".ToggleSwitch-track:active",
|
|
13
|
+
".ToggleSwitch-track:before",
|
|
14
|
+
".ToggleSwitch-track *",
|
|
15
|
+
".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",
|
|
16
|
+
".ToggleSwitch-track[aria-checked=true]",
|
|
17
|
+
".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover",
|
|
18
|
+
".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active",
|
|
19
|
+
".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob",
|
|
20
|
+
".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon",
|
|
21
|
+
".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon",
|
|
22
|
+
".ToggleSwitch-track[aria-disabled=true]",
|
|
23
|
+
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",
|
|
24
|
+
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",
|
|
25
|
+
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",
|
|
26
|
+
".ToggleSwitch-icons",
|
|
27
|
+
".ToggleSwitch-lineIcon",
|
|
28
|
+
".ToggleSwitch-circleIcon",
|
|
29
|
+
".ToggleSwitch-knob",
|
|
30
|
+
".ToggleSwitch-status",
|
|
31
|
+
".ToggleSwitch-statusIcon",
|
|
32
|
+
".ToggleSwitch--small .ToggleSwitch-status",
|
|
33
|
+
".ToggleSwitch--small .ToggleSwitch-track",
|
|
34
|
+
".ToggleSwitch--disabled .ToggleSwitch-status",
|
|
35
|
+
".ToggleSwitch-statusOn",
|
|
36
|
+
".ToggleSwitch-statusOff",
|
|
37
|
+
".ToggleSwitch--statusAtEnd",
|
|
38
|
+
".ToggleSwitch--statusAtEnd .ToggleSwitch-status"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,
|
|
1
|
+
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,uDACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,6CAA8C,CAC9C,gFAAkF,CAClF,mDAAqD,CAJrD,cAAe,CANf,aAAc,CAEd,6CAA+C,CAE/C,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,8BAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,mDACF,CAEA,2BACE,oDACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,2DACE,sDAAuD,CAEvD,kBAAyB,CADzB,mDAEF,CAEA,uCACE,qDAAsD,CACtD,qDAyBF,CAtBI,uEACE,2DACF,CAEA,wEACE,4DACF,CAGF,0DACE,oDAAqD,CACrD,oDAAqD,CACrD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,wCAEE,sDAAuD,CACvD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,2DACE,wCAAyC,CACzC,eACF,CAMA,gIACE,2CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,0CAA2C,CAG3C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,kCAAmC,CAGnC,uBAEF,CAEA,mBAME,4CAA6C,CAC7C,+EAAiF,CACjF,mDAAqD,CALrD,QAAS,CAMT,mEAAqE,CARrE,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,6BAA8B,CAF9B,kDAAoD,CACpD,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,8BAGF,CAGE,0CACE,iDACF,CAEA,yCAEE,6CAA+C,CAD/C,8BAEF,CAIA,6CACE,2BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n display: inline-flex;\n}\n\n.ToggleSwitch {\n align-items: center;\n display: inline-flex;\n gap: var(--primer-controlStack-medium-gap-condensed, 8px);\n}\n\n.ToggleSwitch--checked {\n & .ToggleSwitch-statusOn {\n height: auto;\n visibility: visible;\n }\n\n & .ToggleSwitch-statusOff {\n height: 0;\n visibility: hidden;\n }\n}\n\n.ToggleSwitch-track {\n position: relative;\n display: block;\n width: var(--base-size-64, 64px);\n height: var(--primer-control-medium-size, 32px);\n padding: 0;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: var(--color-switch-track-bg);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: background-color, border-color;\n appearance: none;\n\n &:focus,\n &:focus-visible {\n outline-offset: 1px;\n }\n\n &:hover {\n background-color: var(--color-switch-track-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-active-bg);\n }\n\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 44px;\n }\n }\n\n @media (prefers-reduced-motion) {\n transition: none;\n\n & * {\n transition: none;\n }\n }\n}\n\n.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {\n background-color: var(--color-switch-track-disabled-bg);\n color: var(--color-switch-track-checked-disabled-fg);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-checked='true'] {\n background-color: var(--color-switch-track-checked-bg);\n border-color: var(--color-switch-track-checked-border);\n\n &:not([aria-disabled='true']) {\n &:hover {\n background-color: var(--color-switch-track-checked-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-checked-active-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-bg);\n border-color: var(--color-switch-knob-checked-border);\n transform: translateX(100%);\n }\n\n & .ToggleSwitch-lineIcon {\n transform: translateX(0%);\n }\n\n & .ToggleSwitch-circleIcon {\n transform: translateX(100%);\n }\n}\n\n.ToggleSwitch-track[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: var(--color-switch-track-disabled-bg);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--color-border-default);\n box-shadow: none;\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--color-switch-track-disabled-fg);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--color-switch-track-disabled-fg);\n }\n}\n\n.ToggleSwitch-icons {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n line-height: 0;\n color: var(--color-switch-track-checked-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-100%);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n line-height: 0;\n color: var(--color-switch-track-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(0);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n width: 50%;\n background-color: var(--color-switch-knob-bg);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-knob-border);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: transform;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.ToggleSwitch-status {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n line-height: 1.5;\n color: var(--color-fg-default);\n text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n width: var(--base-size-16, 16px);\n display: flex;\n margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n & .ToggleSwitch-status {\n font-size: var(--primer-text-body-size-small, 12px);\n }\n\n & .ToggleSwitch-track {\n width: var(--base-size-48, 48px);\n height: var(--primer-control-xsmall-size, 24px);\n }\n}\n\n.ToggleSwitch--disabled {\n & .ToggleSwitch-status {\n color: var(--color-fg-muted);\n }\n}\n\n.ToggleSwitch-statusOn {\n height: 0;\n visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n height: auto;\n visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n flex-direction: row-reverse;\n\n & .ToggleSwitch-status {\n text-align: left;\n }\n}\n",null]}
|
|
@@ -10,18 +10,6 @@
|
|
|
10
10
|
align-items: center;
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
gap: var(--primer-controlStack-medium-gap-condensed, 8px);
|
|
13
|
-
|
|
14
|
-
&:hover {
|
|
15
|
-
& .ToggleSwitch-knob {
|
|
16
|
-
background-color: var(--color-btn-hover-bg);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&:active {
|
|
21
|
-
& .ToggleSwitch-knob {
|
|
22
|
-
background-color: var(--color-btn-active-bg);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
13
|
}
|
|
26
14
|
|
|
27
15
|
.ToggleSwitch--checked {
|
|
@@ -56,7 +44,15 @@
|
|
|
56
44
|
|
|
57
45
|
&:focus,
|
|
58
46
|
&:focus-visible {
|
|
59
|
-
outline-offset:
|
|
47
|
+
outline-offset: 1px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:hover {
|
|
51
|
+
background-color: var(--color-switch-track-hover-bg);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:active {
|
|
55
|
+
background-color: var(--color-switch-track-active-bg);
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
@media (pointer: coarse) {
|
|
@@ -75,42 +71,29 @@
|
|
|
75
71
|
}
|
|
76
72
|
|
|
77
73
|
.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
|
|
78
|
-
background-color: var(--color-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
&:hover,
|
|
82
|
-
&:active {
|
|
83
|
-
background-color: var(--color-canvas-subtle);
|
|
84
|
-
|
|
85
|
-
/* This is the most straightforward way of setting the knob's styles when the
|
|
86
|
-
** switch is both checked and disabled. */
|
|
87
|
-
|
|
88
|
-
& .ToggleSwitch-knob {
|
|
89
|
-
background-color: var(--color-switch-knob-checked-disabled-bg);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
& .ToggleSwitch-knob {
|
|
94
|
-
background-color: var(--color-switch-knob-checked-disabled-bg);
|
|
95
|
-
}
|
|
74
|
+
background-color: var(--color-switch-track-disabled-bg);
|
|
75
|
+
color: var(--color-switch-track-checked-disabled-fg);
|
|
76
|
+
border-color: transparent;
|
|
96
77
|
}
|
|
97
78
|
|
|
98
79
|
.ToggleSwitch-track[aria-checked='true'] {
|
|
99
80
|
background-color: var(--color-switch-track-checked-bg);
|
|
100
81
|
border-color: var(--color-switch-track-checked-border);
|
|
101
82
|
|
|
102
|
-
&:
|
|
103
|
-
|
|
104
|
-
|
|
83
|
+
&:not([aria-disabled='true']) {
|
|
84
|
+
&:hover {
|
|
85
|
+
background-color: var(--color-switch-track-checked-hover-bg);
|
|
86
|
+
}
|
|
105
87
|
|
|
106
|
-
|
|
107
|
-
|
|
88
|
+
&:active {
|
|
89
|
+
background-color: var(--color-switch-track-checked-active-bg);
|
|
90
|
+
}
|
|
108
91
|
}
|
|
109
92
|
|
|
110
93
|
& .ToggleSwitch-knob {
|
|
111
94
|
background-color: var(--color-switch-knob-checked-bg);
|
|
112
|
-
border:
|
|
113
|
-
transform: translateX(
|
|
95
|
+
border-color: var(--color-switch-knob-checked-border);
|
|
96
|
+
transform: translateX(100%);
|
|
114
97
|
}
|
|
115
98
|
|
|
116
99
|
& .ToggleSwitch-lineIcon {
|
|
@@ -124,33 +107,21 @@
|
|
|
124
107
|
|
|
125
108
|
.ToggleSwitch-track[aria-disabled='true'] {
|
|
126
109
|
cursor: not-allowed;
|
|
127
|
-
background-color: var(--color-
|
|
128
|
-
border-color:
|
|
110
|
+
background-color: var(--color-switch-track-disabled-bg);
|
|
111
|
+
border-color: transparent;
|
|
129
112
|
transition-property: none;
|
|
130
113
|
|
|
131
|
-
&:hover,
|
|
132
|
-
&:active {
|
|
133
|
-
& .ToggleSwitch-knob {
|
|
134
|
-
background-color: var(--color-btn-bg);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
114
|
& .ToggleSwitch-knob {
|
|
139
115
|
border-color: var(--color-border-default);
|
|
140
116
|
box-shadow: none;
|
|
141
|
-
|
|
142
|
-
&:hover,
|
|
143
|
-
&:active {
|
|
144
|
-
background-color: var(--color-btn-bg);
|
|
145
|
-
}
|
|
146
117
|
}
|
|
147
118
|
|
|
148
119
|
& .ToggleSwitch-lineIcon {
|
|
149
|
-
color: var(--color-fg
|
|
120
|
+
color: var(--color-switch-track-disabled-fg);
|
|
150
121
|
}
|
|
151
122
|
|
|
152
123
|
& .ToggleSwitch-circleIcon {
|
|
153
|
-
color: var(--color-fg
|
|
124
|
+
color: var(--color-switch-track-disabled-fg);
|
|
154
125
|
}
|
|
155
126
|
}
|
|
156
127
|
|
|
@@ -164,7 +135,7 @@
|
|
|
164
135
|
|
|
165
136
|
.ToggleSwitch-lineIcon {
|
|
166
137
|
line-height: 0;
|
|
167
|
-
color: var(--color-
|
|
138
|
+
color: var(--color-switch-track-checked-fg);
|
|
168
139
|
transition-duration: 80ms;
|
|
169
140
|
transition-property: transform;
|
|
170
141
|
transform: translateX(-100%);
|
|
@@ -173,7 +144,7 @@
|
|
|
173
144
|
|
|
174
145
|
.ToggleSwitch-circleIcon {
|
|
175
146
|
line-height: 0;
|
|
176
|
-
color: var(--color-fg
|
|
147
|
+
color: var(--color-switch-track-fg);
|
|
177
148
|
transition-duration: 80ms;
|
|
178
149
|
transition-property: transform;
|
|
179
150
|
transform: translateX(0);
|
|
@@ -182,18 +153,17 @@
|
|
|
182
153
|
|
|
183
154
|
.ToggleSwitch-knob {
|
|
184
155
|
position: absolute;
|
|
185
|
-
top:
|
|
186
|
-
bottom:
|
|
156
|
+
top: 0;
|
|
157
|
+
bottom: 0;
|
|
187
158
|
z-index: 1;
|
|
188
159
|
width: 50%;
|
|
189
|
-
background-color: var(--color-
|
|
190
|
-
border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-
|
|
160
|
+
background-color: var(--color-switch-knob-bg);
|
|
161
|
+
border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-knob-border);
|
|
191
162
|
border-radius: var(--primer-borderRadius-medium, 6px);
|
|
192
163
|
box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
|
|
193
164
|
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
|
194
165
|
transition-duration: 80ms;
|
|
195
166
|
transition-property: transform;
|
|
196
|
-
transform: translateX(-1px);
|
|
197
167
|
|
|
198
168
|
@media (prefers-reduced-motion) {
|
|
199
169
|
transition: none;
|
|
@@ -1 +1,28 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "alpha/underline_nav",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".UnderlineNav",
|
|
5
|
+
".UnderlineNav .Counter",
|
|
6
|
+
".UnderlineNav .Counter--primary",
|
|
7
|
+
".UnderlineNav-body",
|
|
8
|
+
".UnderlineNav-item",
|
|
9
|
+
".UnderlineNav-item:focus",
|
|
10
|
+
".UnderlineNav-item:focus-visible",
|
|
11
|
+
".UnderlineNav-item:hover",
|
|
12
|
+
".UnderlineNav-item [data-content]:before",
|
|
13
|
+
".UnderlineNav-item:before",
|
|
14
|
+
".UnderlineNav-item.selected",
|
|
15
|
+
".UnderlineNav-item[aria-current]:not([aria-current=false])",
|
|
16
|
+
".UnderlineNav-item[role=tab][aria-selected=true]",
|
|
17
|
+
".UnderlineNav-item.selected:after",
|
|
18
|
+
".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
|
|
19
|
+
".UnderlineNav-item[role=tab][aria-selected=true]:after",
|
|
20
|
+
".UnderlineNav--right",
|
|
21
|
+
".UnderlineNav--right .UnderlineNav-actions",
|
|
22
|
+
".UnderlineNav-actions",
|
|
23
|
+
".UnderlineNav--full",
|
|
24
|
+
".UnderlineNav--full .UnderlineNav-body",
|
|
25
|
+
".UnderlineNav-octicon",
|
|
26
|
+
".UnderlineNav-container"
|
|
27
|
+
]
|
|
28
|
+
}
|
|
@@ -1 +1,17 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/avatar",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".avatar",
|
|
5
|
+
".avatar-link",
|
|
6
|
+
".avatar-group-item",
|
|
7
|
+
".avatar-1",
|
|
8
|
+
".avatar-2",
|
|
9
|
+
".avatar-small",
|
|
10
|
+
".avatar-3",
|
|
11
|
+
".avatar-4",
|
|
12
|
+
".avatar-5",
|
|
13
|
+
".avatar-6",
|
|
14
|
+
".avatar-7",
|
|
15
|
+
".avatar-8"
|
|
16
|
+
]
|
|
17
|
+
}
|
|
@@ -1 +1,28 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/avatar_stack",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".AvatarStack",
|
|
5
|
+
".AvatarStack .AvatarStack-body",
|
|
6
|
+
".AvatarStack.AvatarStack--two",
|
|
7
|
+
".AvatarStack.AvatarStack--three-plus",
|
|
8
|
+
".AvatarStack-body",
|
|
9
|
+
".AvatarStack-body .avatar",
|
|
10
|
+
".AvatarStack-body .avatar:first-child",
|
|
11
|
+
".AvatarStack-body .avatar:last-child",
|
|
12
|
+
".AvatarStack-body .avatar img",
|
|
13
|
+
".AvatarStack-body .avatar:nth-child(n+4)",
|
|
14
|
+
".AvatarStack-body:hover .avatar",
|
|
15
|
+
".AvatarStack-body:hover .avatar:nth-child(n+4)",
|
|
16
|
+
".AvatarStack-body:hover .avatar-more",
|
|
17
|
+
".avatar.avatar-more",
|
|
18
|
+
".avatar.avatar-more:after",
|
|
19
|
+
".avatar.avatar-more:before",
|
|
20
|
+
".AvatarStack--right .AvatarStack-body",
|
|
21
|
+
".AvatarStack--right .AvatarStack-body:hover .avatar",
|
|
22
|
+
".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
|
|
23
|
+
".AvatarStack--right .avatar.avatar-more",
|
|
24
|
+
".AvatarStack--right .avatar.avatar-more:before",
|
|
25
|
+
".AvatarStack--right .avatar.avatar-more:after",
|
|
26
|
+
".AvatarStack--right .avatar"
|
|
27
|
+
]
|
|
28
|
+
}
|
|
@@ -1 +1,22 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/blankslate",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".blankslate",
|
|
5
|
+
".blankslate p",
|
|
6
|
+
".blankslate code",
|
|
7
|
+
".blankslate img",
|
|
8
|
+
".blankslate-icon",
|
|
9
|
+
".blankslate-image",
|
|
10
|
+
".blankslate-heading",
|
|
11
|
+
".blankslate-action",
|
|
12
|
+
".blankslate-action:first-of-type",
|
|
13
|
+
".blankslate-action:last-of-type",
|
|
14
|
+
".blankslate-capped",
|
|
15
|
+
".blankslate-spacious",
|
|
16
|
+
".blankslate-narrow",
|
|
17
|
+
".blankslate-large img",
|
|
18
|
+
".blankslate-large h3",
|
|
19
|
+
".blankslate-large p",
|
|
20
|
+
".blankslate-clean-background"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
@@ -1 +1,54 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/border_box",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".Box",
|
|
5
|
+
".Box--condensed",
|
|
6
|
+
".Box--condensed .Box-body",
|
|
7
|
+
".Box--condensed .Box-footer",
|
|
8
|
+
".Box--condensed .Box-header",
|
|
9
|
+
".Box--condensed .Box-btn-octicon.btn-octicon",
|
|
10
|
+
".Box--condensed .Box-row",
|
|
11
|
+
".Box--spacious .Box-header",
|
|
12
|
+
".Box--spacious .Box-title",
|
|
13
|
+
".Box--spacious .Box-body",
|
|
14
|
+
".Box--spacious .Box-btn-octicon.btn-octicon",
|
|
15
|
+
".Box--spacious .Box-footer",
|
|
16
|
+
".Box--spacious .Box-row",
|
|
17
|
+
".Box-header",
|
|
18
|
+
".Box-title",
|
|
19
|
+
".Box-body",
|
|
20
|
+
".Box-body:last-of-type",
|
|
21
|
+
".Box-row",
|
|
22
|
+
".Box-row:first-of-type",
|
|
23
|
+
".Box-row:last-of-type",
|
|
24
|
+
".Box-row.Box-row--unread",
|
|
25
|
+
".Box-row.unread",
|
|
26
|
+
".Box-row.navigation-focus .Box-row--drag-button",
|
|
27
|
+
".Box-row.navigation-focus.is-dragging .Box-row--drag-button",
|
|
28
|
+
".Box-row.navigation-focus.sortable-chosen",
|
|
29
|
+
".Box-row.navigation-focus.sortable-ghost",
|
|
30
|
+
".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",
|
|
31
|
+
".Box-row--focus-gray.navigation-focus",
|
|
32
|
+
".Box-row--focus-blue.navigation-focus",
|
|
33
|
+
".Box-row--hover-gray:hover",
|
|
34
|
+
".Box-row--hover-blue:hover",
|
|
35
|
+
".Box-row-link",
|
|
36
|
+
".Box-row-link:hover",
|
|
37
|
+
".Box-row--drag-button",
|
|
38
|
+
".Box-footer",
|
|
39
|
+
".Box--scrollable",
|
|
40
|
+
".Box--blue",
|
|
41
|
+
".Box--blue .Box-header",
|
|
42
|
+
".Box--blue .Box-body",
|
|
43
|
+
".Box--blue .Box-footer",
|
|
44
|
+
".Box--blue .Box-row",
|
|
45
|
+
".Box--danger",
|
|
46
|
+
".Box--danger .Box-body:last-of-type",
|
|
47
|
+
".Box--danger .Box-row:first-of-type",
|
|
48
|
+
".Box-header--blue",
|
|
49
|
+
".Box-row--yellow",
|
|
50
|
+
".Box-row--blue",
|
|
51
|
+
".Box-row--gray",
|
|
52
|
+
".Box-btn-octicon.btn-octicon"
|
|
53
|
+
]
|
|
54
|
+
}
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/breadcrumbs",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".breadcrumb-item",
|
|
5
|
+
".breadcrumb-item:after",
|
|
6
|
+
".breadcrumb-item:first-child",
|
|
7
|
+
".breadcrumb-item-selected:after",
|
|
8
|
+
".breadcrumb-item[aria-current]:not([aria-current=false]):after",
|
|
9
|
+
".breadcrumb-item-selected a"
|
|
10
|
+
]
|
|
11
|
+
}
|
|
@@ -1 +1,71 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/button",
|
|
3
|
+
"selectors": [
|
|
4
|
+
":root",
|
|
5
|
+
".Button",
|
|
6
|
+
".Button:before",
|
|
7
|
+
".Button:hover",
|
|
8
|
+
".Button:active",
|
|
9
|
+
".Button:disabled",
|
|
10
|
+
".Button[aria-disabled=true]",
|
|
11
|
+
".Button-withTooltip",
|
|
12
|
+
"a.Button",
|
|
13
|
+
"summary.Button",
|
|
14
|
+
"a.Button:hover",
|
|
15
|
+
"summary.Button:hover",
|
|
16
|
+
".Button-content",
|
|
17
|
+
".Button-content>:not(:last-child)",
|
|
18
|
+
".Button-content--alignStart",
|
|
19
|
+
".Button-visual",
|
|
20
|
+
".Button-visual .Counter",
|
|
21
|
+
".Button-label",
|
|
22
|
+
".Button-leadingVisual",
|
|
23
|
+
".Button-trailingVisual",
|
|
24
|
+
".Button-trailingAction",
|
|
25
|
+
".Button--small",
|
|
26
|
+
".Button--small .Button-label",
|
|
27
|
+
".Button--small .Button-content>:not(:last-child)",
|
|
28
|
+
".Button--large",
|
|
29
|
+
".Button--large .Button-label",
|
|
30
|
+
".Button--large .Button-content>:not(:last-child)",
|
|
31
|
+
".Button--fullWidth",
|
|
32
|
+
".Button--primary",
|
|
33
|
+
".Button--primary:hover:not(:disabled)",
|
|
34
|
+
".Button--primary:focus",
|
|
35
|
+
".Button--primary:focus:not(:focus-visible)",
|
|
36
|
+
".Button--primary:focus-visible",
|
|
37
|
+
".Button--primary:active:not(:disabled)",
|
|
38
|
+
".Button--primary[aria-pressed=true]",
|
|
39
|
+
".Button--primary:disabled",
|
|
40
|
+
".Button--primary[aria-disabled=true]",
|
|
41
|
+
".Button--secondary",
|
|
42
|
+
".Button--secondary:hover:not(:disabled)",
|
|
43
|
+
".Button--secondary:active:not(:disabled)",
|
|
44
|
+
".Button--secondary[aria-pressed=true]",
|
|
45
|
+
".Button--secondary:disabled",
|
|
46
|
+
".Button--secondary[aria-disabled=true]",
|
|
47
|
+
".Button--invisible",
|
|
48
|
+
".Button--invisible:hover:not(:disabled)",
|
|
49
|
+
".Button--invisible:active:not(:disabled)",
|
|
50
|
+
".Button--invisible[aria-pressed=true]",
|
|
51
|
+
".Button--invisible:disabled",
|
|
52
|
+
".Button--invisible[aria-disabled=true]",
|
|
53
|
+
".Button--invisible.Button--invisible-noVisuals .Button-label",
|
|
54
|
+
".Button--invisible .Button-visual",
|
|
55
|
+
".Button--link",
|
|
56
|
+
".Button--link:hover:not(:disabled)",
|
|
57
|
+
".Button--link:focus",
|
|
58
|
+
".Button--link:focus-visible",
|
|
59
|
+
".Button--link:disabled",
|
|
60
|
+
".Button--link[aria-disabled=true]",
|
|
61
|
+
".Button--danger",
|
|
62
|
+
".Button--danger:hover:not(:disabled)",
|
|
63
|
+
".Button--danger:active:not(:disabled)",
|
|
64
|
+
".Button--danger[aria-pressed=true]",
|
|
65
|
+
".Button--danger:disabled",
|
|
66
|
+
".Button--danger[aria-disabled=true]",
|
|
67
|
+
".Button--iconOnly",
|
|
68
|
+
".Button--iconOnly.Button--small",
|
|
69
|
+
".Button--iconOnly.Button--large"
|
|
70
|
+
]
|
|
71
|
+
}
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/counter",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".Counter",
|
|
5
|
+
".Counter:empty",
|
|
6
|
+
".Counter .octicon",
|
|
7
|
+
".Counter--primary",
|
|
8
|
+
".Counter--secondary"
|
|
9
|
+
]
|
|
10
|
+
}
|
|
@@ -1 +1,27 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/flash",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".flash:not(.Banner)",
|
|
5
|
+
".flash:not(.Banner) .octicon",
|
|
6
|
+
".flash:not(.Banner) p:last-child",
|
|
7
|
+
".flash-messages",
|
|
8
|
+
".flash-close:not(.Banner-close)",
|
|
9
|
+
".flash-close:not(.Banner-close):hover",
|
|
10
|
+
".flash-close:not(.Banner-close):active",
|
|
11
|
+
".flash-close:not(.Banner-close) .octicon",
|
|
12
|
+
".flash-action:not(.Banner-actions)",
|
|
13
|
+
".flash-action.btn:not(.Banner-actions) .octicon",
|
|
14
|
+
".flash-action.btn-primary:not(.Banner-actions)",
|
|
15
|
+
".flash-action.btn-primary:not(.Banner-actions) .octicon",
|
|
16
|
+
".flash-warn:not(.Banner)",
|
|
17
|
+
".flash-warn:not(.Banner) .octicon",
|
|
18
|
+
".flash-error:not(.Banner)",
|
|
19
|
+
".flash-error:not(.Banner) .octicon",
|
|
20
|
+
".flash-success:not(.Banner)",
|
|
21
|
+
".flash-success:not(.Banner) .octicon",
|
|
22
|
+
".flash-full:not(.Banner)",
|
|
23
|
+
".flash-banner",
|
|
24
|
+
".flash-full",
|
|
25
|
+
".warning"
|
|
26
|
+
]
|
|
27
|
+
}
|
|
@@ -1 +1,25 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/label",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".labels",
|
|
5
|
+
".Label",
|
|
6
|
+
".label",
|
|
7
|
+
".Label:hover",
|
|
8
|
+
".label:hover",
|
|
9
|
+
".Label--large",
|
|
10
|
+
".Label--inline",
|
|
11
|
+
".Label--primary",
|
|
12
|
+
".Label--secondary",
|
|
13
|
+
".Label--accent",
|
|
14
|
+
".Label--info",
|
|
15
|
+
".Label--success",
|
|
16
|
+
".Label--attention",
|
|
17
|
+
".Label--warning",
|
|
18
|
+
".Label--severe",
|
|
19
|
+
".Label--danger",
|
|
20
|
+
".Label--open",
|
|
21
|
+
".Label--closed",
|
|
22
|
+
".Label--done",
|
|
23
|
+
".Label--sponsors"
|
|
24
|
+
]
|
|
25
|
+
}
|
|
@@ -1 +1,19 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/link",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".Link",
|
|
5
|
+
".Link:hover",
|
|
6
|
+
".Link:focus",
|
|
7
|
+
".Link:focus-visible",
|
|
8
|
+
".Link--primary",
|
|
9
|
+
".Link--primary:hover",
|
|
10
|
+
".Link--secondary",
|
|
11
|
+
".Link--secondary:hover",
|
|
12
|
+
".Link--muted",
|
|
13
|
+
".Link--muted:hover",
|
|
14
|
+
".Link--onHover:hover",
|
|
15
|
+
".Link--muted:hover [class*=color-fg]",
|
|
16
|
+
".Link--primary:hover [class*=color-fg]",
|
|
17
|
+
".Link--secondary:hover [class*=color-fg]"
|
|
18
|
+
]
|
|
19
|
+
}
|
|
@@ -1 +1,39 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"name": "beta/popover",
|
|
3
|
+
"selectors": [
|
|
4
|
+
".Popover",
|
|
5
|
+
".Popover-message",
|
|
6
|
+
".Popover-message:after",
|
|
7
|
+
".Popover-message:before",
|
|
8
|
+
".Popover-message--no-caret:after",
|
|
9
|
+
".Popover-message--no-caret:before",
|
|
10
|
+
".Popover-message--bottom-left:after",
|
|
11
|
+
".Popover-message--bottom-left:before",
|
|
12
|
+
".Popover-message--bottom-right:after",
|
|
13
|
+
".Popover-message--bottom-right:before",
|
|
14
|
+
".Popover-message--bottom:after",
|
|
15
|
+
".Popover-message--bottom:before",
|
|
16
|
+
".Popover-message--bottom-right",
|
|
17
|
+
".Popover-message--top-right",
|
|
18
|
+
".Popover-message--top-right:after",
|
|
19
|
+
".Popover-message--top-right:before",
|
|
20
|
+
".Popover-message--bottom-left",
|
|
21
|
+
".Popover-message--top-left",
|
|
22
|
+
".Popover-message--top-left:after",
|
|
23
|
+
".Popover-message--top-left:before",
|
|
24
|
+
".Popover-message--left-bottom:after",
|
|
25
|
+
".Popover-message--left-bottom:before",
|
|
26
|
+
".Popover-message--left-top:after",
|
|
27
|
+
".Popover-message--left-top:before",
|
|
28
|
+
".Popover-message--left:after",
|
|
29
|
+
".Popover-message--left:before",
|
|
30
|
+
".Popover-message--right-bottom:after",
|
|
31
|
+
".Popover-message--right-bottom:before",
|
|
32
|
+
".Popover-message--right-top:after",
|
|
33
|
+
".Popover-message--right-top:before",
|
|
34
|
+
".Popover-message--right:after",
|
|
35
|
+
".Popover-message--right:before",
|
|
36
|
+
".Popover-message--large",
|
|
37
|
+
".Popover-message>.btn-octicon"
|
|
38
|
+
]
|
|
39
|
+
}
|