primer_view_components 0.0.120 → 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 +58 -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/item.rb +1 -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/segmented_control.rb +30 -0
- 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 +16 -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/base_component.rb +3 -3
- 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/close_button.rb +1 -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/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
- data/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
- data/app/components/primer/{local_time.ts → beta/relative_time.ts} +0 -0
- 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 +12 -3
- data/app/components/primer/primer.d.ts +1 -2
- data/app/components/primer/primer.js +1 -2
- data/app/components/primer/primer.ts +1 -2
- data/app/components/primer/truncate.css.json +13 -1
- data/app/forms/example_toggle_switch_form.rb +1 -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/app/lib/primer/view_helper.rb +0 -1
- data/lib/primer/deprecations.yml +0 -78
- data/lib/primer/form_components.rb +26 -6
- data/lib/primer/forms/acts_as_component.rb +12 -1
- 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/toggle_switch_form.rb +10 -3
- 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 -27
- 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/lib/tasks/static.rake +22 -0
- 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/auto_complete_preview.rb +6 -6
- 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/segmented_control_preview/with_label_and_caption.html.erb +9 -0
- data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb +11 -0
- data/previews/primer/alpha/segmented_control_preview.rb +7 -1
- 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 +24 -1
- data/previews/primer/alpha/toggle_switch_preview.rb +9 -9
- data/previews/primer/beta/auto_complete_preview.rb +17 -17
- 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/previews/primer/url_helpers.rb +1 -1
- data/static/arguments.json +1348 -1412
- data/static/audited_at.json +12 -21
- data/static/constants.json +20 -51
- data/static/previews.json +1812 -0
- data/static/statuses.json +10 -19
- metadata +47 -32
- data/app/components/primer/dropdown/menu.rb +0 -14
- data/app/components/primer/dropdown.rb +0 -7
- data/app/components/primer/hellip_button.rb +0 -7
- data/app/components/primer/label_component.rb +0 -7
- data/app/components/primer/link_component.rb +0 -7
- data/app/components/primer/local_time.rb +0 -63
- data/app/components/primer/markdown.rb +0 -7
- data/app/components/primer/menu_component.rb +0 -7
- data/app/components/primer/octicon_component.rb +0 -7
- data/app/components/primer/octicon_symbols_component.rb +0 -7
- data/app/components/primer/popover_component.rb +0 -8
- data/app/components/primer/spinner_component.rb +0 -7
- data/app/components/primer/state_component.rb +0 -7
- data/app/components/primer/subhead_component.rb +0 -7
- data/app/components/primer/tab_container_component.rb +0 -7
- data/app/components/primer/time_ago_component.d.ts +0 -1
- data/app/components/primer/time_ago_component.js +0 -1
- data/app/components/primer/time_ago_component.rb +0 -51
- data/app/components/primer/time_ago_component.ts +0 -1
- data/app/components/primer/timeline_item_component.rb +0 -13
- data/previews/primer/local_time_component_preview.rb +0 -57
- data/previews/primer/time_ago_component_preview.rb +0 -27
|
@@ -4,8 +4,14 @@ module Primer
|
|
|
4
4
|
module Alpha
|
|
5
5
|
TextField = Primer::FormComponents.from_input(Primer::Forms::Dsl::TextFieldInput)
|
|
6
6
|
|
|
7
|
-
#
|
|
8
|
-
#
|
|
7
|
+
# Text fields are single-line text inputs rendered as `<input type="text">` in HTML.
|
|
8
|
+
#
|
|
9
|
+
# @form_usage
|
|
10
|
+
# class ExampleForm < ApplicationForm
|
|
11
|
+
# form do |example_form|
|
|
12
|
+
# example_form.text_field(attributes)
|
|
13
|
+
# end
|
|
14
|
+
# end
|
|
9
15
|
class TextField < Primer::Component
|
|
10
16
|
status :alpha
|
|
11
17
|
|
|
@@ -79,27 +85,17 @@ module Primer
|
|
|
79
85
|
# )
|
|
80
86
|
# ) %>
|
|
81
87
|
#
|
|
82
|
-
# @
|
|
83
|
-
# @
|
|
84
|
-
# @
|
|
85
|
-
#
|
|
86
|
-
# @param caption [String] Caption text to render below the input.
|
|
87
|
-
# @param label [String] Label text displayed above the input.
|
|
88
|
-
# @param visually_hide_label [Boolean] Whether or not to visually hide the label. If `true` the label will be hidden visually but still available to screen readers.
|
|
89
|
-
# @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
|
|
90
|
-
# @param show_clear_button [Boolean] Whether or not to include a clear button inside the input that clears the input's contents when clicked.
|
|
91
|
-
# @param clear_button_id [String] The HTML id attribute of the clear button.
|
|
92
|
-
# @param full_width [Boolean] Controls whether or not the input takes the full width of its container.
|
|
93
|
-
# @param disabled [Boolean] Whether or not the input should accept keyboard and mouse input.
|
|
94
|
-
# @param invalid [Boolean] If `true`, renders the input in a visually invalid state.
|
|
88
|
+
# @macro form_size_arguments
|
|
89
|
+
# @macro form_full_width_arguments
|
|
90
|
+
# @macro form_input_arguments
|
|
91
|
+
#
|
|
95
92
|
# @param placeholder [String] Placeholder text.
|
|
96
93
|
# @param inset [Boolean] If `true`, renders the input in a visually inset state.
|
|
97
94
|
# @param monospace [Boolean] If `true`, uses a monospace font for the input field.
|
|
98
|
-
# @param
|
|
99
|
-
# @param
|
|
100
|
-
# @param
|
|
101
|
-
# @param
|
|
102
|
-
# @param block [Proc] Unused.
|
|
95
|
+
# @param auto_check_src [String] When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message.
|
|
96
|
+
# @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's <%= link_to_component(Primer::Beta::Octicon) %> component.
|
|
97
|
+
# @param show_clear_button [Boolean] Whether or not to include a clear button inside the input that clears the input's contents when clicked.
|
|
98
|
+
# @param clear_button_id [String] The HTML id attribute of the clear button.
|
|
103
99
|
end
|
|
104
100
|
end
|
|
105
101
|
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch
|
|
1
|
+
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--primer-borderRadius-medium,6px);cursor:pointer;display:block;height:var(--primer-control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-checked=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-knob-border);border-radius:var(--primer-borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--primer-text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--primer-control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
|
|
@@ -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
|
+
}
|
|
@@ -134,12 +134,12 @@ module Primer
|
|
|
134
134
|
#
|
|
135
135
|
# | Name | Type | Description |
|
|
136
136
|
# | :- | :- | :- |
|
|
137
|
-
# | `font_family` | Symbol | Font
|
|
137
|
+
# | `font_family` | Symbol | Font family. <%= one_of([:mono]) %> |
|
|
138
138
|
# | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
|
|
139
|
-
# | `font_style` | Symbol | Font
|
|
139
|
+
# | `font_style` | Symbol | Font style. <%= one_of([:italic]) %> |
|
|
140
140
|
# | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
|
|
141
141
|
# | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
|
|
142
|
-
# | `text_transform` | Symbol | Text
|
|
142
|
+
# | `text_transform` | Symbol | Text transformation. <%= one_of([:uppercase]) %> |
|
|
143
143
|
# | `underline` | Boolean | Whether text should be underlined. |
|
|
144
144
|
# | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
|
|
145
145
|
#
|
|
@@ -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
|
+
}
|