primer_view_components 0.0.108 → 0.0.110
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +38 -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_list.css.json +1 -1
- data/app/components/primer/{beta → alpha}/banner.css +0 -0
- data/app/components/primer/alpha/banner.css.json +1 -0
- data/app/components/primer/{beta → alpha}/banner.css.map +1 -1
- data/app/components/primer/{beta → alpha}/banner.html.erb +2 -2
- data/app/components/primer/{beta → alpha}/banner.pcss +1 -0
- data/app/components/primer/{beta → alpha}/banner.rb +14 -15
- data/app/components/primer/alpha/dialog.rb +0 -1
- data/app/components/primer/alpha/segmented_control/item.rb +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +1 -0
- data/app/components/primer/alpha/toggle_switch.css +1 -0
- data/app/components/primer/alpha/toggle_switch.css.json +1 -0
- data/app/components/primer/alpha/toggle_switch.css.map +1 -0
- data/app/components/primer/alpha/toggle_switch.pcss +244 -0
- data/app/components/primer/{beta → alpha}/x_banner.d.ts +1 -3
- data/app/components/primer/{beta → alpha}/x_banner.js +2 -4
- data/app/components/primer/{beta → alpha}/x_banner.ts +2 -3
- data/app/components/primer/beta/blankslate.css +1 -0
- data/app/components/primer/beta/blankslate.css.json +1 -0
- data/app/components/primer/beta/blankslate.css.map +1 -0
- data/app/components/primer/beta/blankslate.pcss +90 -0
- data/app/components/primer/beta/breadcrumbs.css +1 -0
- data/app/components/primer/beta/breadcrumbs.css.json +1 -0
- data/app/components/primer/beta/breadcrumbs.css.map +1 -0
- data/app/components/primer/beta/breadcrumbs.pcss +30 -0
- data/app/components/primer/beta/button.css.json +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +0 -4
- data/app/components/primer/beta/counter.css +1 -0
- data/app/components/primer/beta/counter.css.json +1 -0
- data/app/components/primer/beta/counter.css.map +1 -0
- data/app/components/primer/beta/counter.pcss +35 -0
- data/app/components/primer/beta/label.css +1 -0
- data/app/components/primer/beta/label.css.json +1 -0
- data/app/components/primer/beta/label.css.map +1 -0
- data/app/components/primer/beta/label.pcss +103 -0
- data/app/components/primer/beta/progress_bar.css +1 -0
- data/app/components/primer/beta/progress_bar.css.json +1 -0
- data/app/components/primer/beta/progress_bar.css.map +1 -0
- data/app/components/primer/{progress_bar_component.html.erb → beta/progress_bar.html.erb} +0 -0
- data/app/components/primer/beta/progress_bar.pcss +26 -0
- data/app/components/primer/beta/progress_bar.rb +72 -0
- data/app/components/primer/beta/truncate.css +1 -0
- data/app/components/primer/beta/truncate.css.json +1 -0
- data/app/components/primer/beta/truncate.css.map +1 -0
- data/app/components/primer/beta/truncate.pcss +31 -0
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +12 -2
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/progress_bar_component.rb +2 -65
- data/app/components/primer/state_component.css +1 -0
- data/app/components/primer/state_component.css.json +1 -0
- data/app/components/primer/state_component.css.map +1 -0
- data/app/components/primer/state_component.pcss +50 -0
- data/app/components/primer/subhead_component.css +1 -0
- data/app/components/primer/subhead_component.css.json +1 -0
- data/app/components/primer/subhead_component.css.map +1 -0
- data/app/components/primer/subhead_component.pcss +49 -0
- data/app/components/primer/truncate.css +1 -0
- data/app/components/primer/truncate.css.json +1 -0
- data/app/components/primer/truncate.css.map +1 -0
- data/app/components/primer/truncate.pcss +30 -0
- data/app/forms/name_with_question_mark_form/enabled_caption.html.erb +1 -0
- data/app/forms/name_with_question_mark_form.rb +11 -0
- data/app/lib/primer/css/layout.css +1918 -0
- data/app/lib/primer/css/layout.css.json +1 -0
- data/app/lib/primer/css/utilities.css +7304 -0
- data/app/lib/primer/css/utilities.css.json +1 -0
- data/lib/primer/classify/utilities.rb +1 -1
- data/lib/primer/deprecations.rb +2 -1
- data/lib/primer/forms/base.rb +7 -3
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +3 -3
- data/lib/tasks/test.rake +8 -0
- data/lib/tasks/utilities.rake +3 -18
- data/previews/primer/alpha/banner_preview/with_action_button.html.erb +4 -0
- data/previews/primer/{beta → alpha}/banner_preview/with_action_content.html.erb +1 -1
- data/previews/primer/alpha/banner_preview.rb +97 -0
- data/previews/primer/alpha/segmented_control_preview.rb +106 -20
- data/previews/primer/beta/counter_preview.rb +55 -8
- data/previews/primer/beta/progress_bar_preview.rb +60 -0
- data/previews/primer/forms/forms_preview/name_with_question_mark_form.html.erb +3 -0
- data/previews/primer/forms/forms_preview.rb +2 -0
- data/static/arguments.json +76 -76
- data/static/audited_at.json +2 -1
- data/static/constants.json +34 -26
- data/static/statuses.json +3 -2
- metadata +64 -16
- data/app/components/primer/beta/banner.css.json +0 -1
- data/previews/primer/beta/banner_preview/with_action_button.html.erb +0 -4
- data/previews/primer/beta/banner_preview.rb +0 -54
- data/previews/primer/progress_bar_component_preview.rb +0 -28
@@ -1,10 +1,10 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
module
|
4
|
+
module Alpha
|
5
5
|
# Use `Banner` to highlight important information.
|
6
6
|
class Banner < Primer::Component
|
7
|
-
status :
|
7
|
+
status :alpha
|
8
8
|
|
9
9
|
# A button or custom content that will render on the right-hand side of the component.
|
10
10
|
#
|
@@ -50,29 +50,29 @@ module Primer
|
|
50
50
|
|
51
51
|
# @example Schemes
|
52
52
|
# <div style="display: grid; row-gap: 15px">
|
53
|
-
# <%= render(Primer::
|
54
|
-
# <%= render(Primer::
|
55
|
-
# <%= render(Primer::
|
56
|
-
# <%= render(Primer::
|
53
|
+
# <%= render(Primer::Alpha::Banner.new) { "This is a banner message!" } %>
|
54
|
+
# <%= render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
|
55
|
+
# <%= render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
|
56
|
+
# <%= render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" } %>
|
57
57
|
# </div>
|
58
58
|
#
|
59
59
|
# @example Full width
|
60
|
-
# <%= render(Primer::
|
60
|
+
# <%= render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>
|
61
61
|
#
|
62
62
|
# @example Dismissible
|
63
|
-
# <%= render(Primer::
|
63
|
+
# <%= render(Primer::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissible banner!" } %>
|
64
64
|
#
|
65
65
|
# @example Custom icon
|
66
|
-
# <%= render(Primer::
|
66
|
+
# <%= render(Primer::Alpha::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
|
67
67
|
#
|
68
68
|
# @example With action button
|
69
|
-
# <%= render(Primer::
|
69
|
+
# <%= render(Primer::Alpha::Banner.new) do |component| %>
|
70
70
|
# This is a banner with an action button!
|
71
71
|
# <% component.with_action_button(size: :small) { "Take action" } %>
|
72
72
|
# <% end %>
|
73
73
|
#
|
74
74
|
# @example With custom action
|
75
|
-
# <%= render(Primer::
|
75
|
+
# <%= render(Primer::Alpha::Banner.new) do |component| %>
|
76
76
|
# Comment saved!
|
77
77
|
# <% component.with_action_content do %>
|
78
78
|
# <%= render(Primer::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
|
@@ -84,7 +84,7 @@ module Primer
|
|
84
84
|
# @param dismissible [Boolean] Whether the component can be dismissed with an "x" button.
|
85
85
|
# @param description [String] Description text rendered underneath the message.
|
86
86
|
# @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
|
87
|
-
# @param scheme [Symbol] <%= one_of(Primer::
|
87
|
+
# @param scheme [Symbol] <%= one_of(Primer::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
|
88
88
|
# @param reappear [Boolean] Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
|
89
89
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
90
90
|
def initialize(full: false, full_when_narrow: false, dismissible: false, description: nil, icon: nil, scheme: DEFAULT_SCHEME, reappear: false, **system_arguments)
|
@@ -96,9 +96,6 @@ module Primer
|
|
96
96
|
|
97
97
|
@system_arguments = deny_tag_argument(**system_arguments)
|
98
98
|
@system_arguments[:tag] = :div
|
99
|
-
@system_arguments[:data] ||= {}
|
100
|
-
@system_arguments[:data][:target] = catalyst_target(field: "root")
|
101
|
-
@system_arguments[:data][:reappear] = @reappear if @reappear
|
102
99
|
@system_arguments[:classes] = class_names(
|
103
100
|
@system_arguments[:classes],
|
104
101
|
"Banner",
|
@@ -118,6 +115,8 @@ module Primer
|
|
118
115
|
@wrapper_arguments = {
|
119
116
|
tag: custom_element_name
|
120
117
|
}
|
118
|
+
|
119
|
+
@wrapper_arguments[:data] = { reappear: @reappear } if @reappear
|
121
120
|
end
|
122
121
|
|
123
122
|
private
|
@@ -54,7 +54,6 @@ module Primer
|
|
54
54
|
system_arguments[:classes]
|
55
55
|
)
|
56
56
|
system_arguments[:id] = "dialog-show-#{@system_arguments[:id]}"
|
57
|
-
system_arguments["data-show-dialog-id"] = @system_arguments[:id]
|
58
57
|
system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
|
59
58
|
Primer::ButtonComponent.new(**system_arguments)
|
60
59
|
}
|
@@ -19,7 +19,7 @@ module Primer
|
|
19
19
|
@selected = selected
|
20
20
|
|
21
21
|
@system_arguments = system_arguments
|
22
|
-
@system_arguments[:"data-action"] = "click:segmented-control#select"
|
22
|
+
@system_arguments[:"data-action"] = "click:segmented-control#select" if system_arguments[:href].nil?
|
23
23
|
@system_arguments[:"aria-current"] = selected
|
24
24
|
@system_arguments[:scheme] = :invisible
|
25
25
|
end
|
@@ -1 +1 @@
|
|
1
|
-
{"name":"
|
1
|
+
{"name":"alpha/segmented_control","selectors":[".SegmentedControl",".SegmentedControl-item",".SegmentedControl-item.SegmentedControl-item--selected",".SegmentedControl-item.SegmentedControl-item--selected .Button",".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",".SegmentedControl-item.SegmentedControl-item--selected:before",".SegmentedControl-item .Button-label[data-content]:before",".SegmentedControl-item:before",".SegmentedControl-item .Button",".SegmentedControl-item .Button:focus-visible",".SegmentedControl-item .Button--small",".SegmentedControl-item .Button--small.Button--iconOnly",".SegmentedControl-item .Button--medium",".SegmentedControl-item .Button--medium.Button--iconOnly",".SegmentedControl-item .Button--large",".SegmentedControl-item .Button--large.Button--iconOnly",".SegmentedControl-item .Button--iconOnly",".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-item",".SegmentedControl--fullWidth .Button--iconOnly",".SegmentedControl--fullWidth .Button-withTooltip"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CACrD,mGAAuG,CAJvG,mBAAoB,CACpB,eAIF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA8FF,CAvFE,uDACE,oCAAqC,CACrC,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CAJlG,QAAiB,CAGjB,UAAW,CAHX,SAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAAkB,CAClB,OAAiB,CAAjB,KAKF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eAOF,CAJE,6CAEE,gEAAiE,CADjE,oHAEF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,yJACF,CAGF,uCACE,0JAA+J,CAC/J,mIAKF,CAHE,wDACE,yJACF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,wJACF,CAGF,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,
|
1
|
+
{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CACrD,mGAAuG,CAJvG,mBAAoB,CACpB,eAIF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA8FF,CAvFE,uDACE,oCAAqC,CACrC,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CAJlG,QAAiB,CAGjB,UAAW,CAHX,SAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAAkB,CAClB,OAAiB,CAAjB,KAKF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eAOF,CAJE,6CAEE,gEAAiE,CADjE,oHAEF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,yJACF,CAGF,uCACE,0JAA+J,CAC/J,mIAKF,CAHE,wDACE,yJACF,CAGF,sCACE,yJAA8J,CAC9J,oIAKF,CAHE,uDACE,wJACF,CAGF,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--color-segmented-control-bg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--color-btn-bg);\n border-color: var(--color-segmented-control-button-selected-border);\n\n & .Button {\n font-weight: var(--base-text-weight-semibold, 600);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--primer-control-medium-paddingBlock, 6px);\n margin-bottom: var(--primer-control-medium-paddingBlock, 6px);\n content: '';\n border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal, 400);\n transition: none;\n color: var(--color-btn-text);\n\n &:focus-visible {\n outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));\n border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n }\n }\n\n & .Button--medium {\n height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n }\n }\n\n & .Button--large {\n height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));\n\n &.Button--iconOnly {\n width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--color-btn-text);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch:hover .ToggleSwitch-knob{background-color:var(--color-btn-hover-bg)}.ToggleSwitch:active .ToggleSwitch-knob{background-color:var(--color-btn-active-bg)}.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:0}@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-canvas-subtle);border-color:var(--color-border-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover{background-color:var(--color-canvas-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.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]:hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=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:0;transform:translateX(calc(100% + 1px))}.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-canvas-subtle);border-color:var(--color-border-subtle);cursor:not-allowed;transition-property:none}.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-fg-subtle)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-accent-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-fg-default);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-btn-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--primer-borderRadius-medium,6px);bottom:-1px;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:-1px;transform:translateX(-1px);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--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}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"alpha/toggle_switch","selectors":[".ToggleSwitch",".ToggleSwitch.ToggleSwitch",".ToggleSwitch:hover .ToggleSwitch-knob",".ToggleSwitch:active .ToggleSwitch-knob",".ToggleSwitch--checked .ToggleSwitch-statusOn",".ToggleSwitch--checked .ToggleSwitch-statusOff",".ToggleSwitch-track",".ToggleSwitch-track:focus",".ToggleSwitch-track:focus-visible",".ToggleSwitch-track:before",".ToggleSwitch-track *",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover",".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true]",".ToggleSwitch-track[aria-checked=true]:hover",".ToggleSwitch-track[aria-checked=true]:active",".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon",".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon",".ToggleSwitch-track[aria-disabled=true]",".ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",".ToggleSwitch-icons",".ToggleSwitch-lineIcon",".ToggleSwitch-circleIcon",".ToggleSwitch-knob",".ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-track",".ToggleSwitch--disabled .ToggleSwitch-status",".ToggleSwitch-statusOn",".ToggleSwitch-statusOff",".ToggleSwitch--statusAtEnd",".ToggleSwitch--statusAtEnd .ToggleSwitch-status"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAmBF,CAhBA,cACE,kBAAmB,CAEnB,uDAaF,CAVI,uCACE,0CACF,CAIA,wCACE,2CACF,CAKF,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,8BAiCF,CAlBE,4DAEE,gBACF,CAEA,wBAEI,2BC/DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD+DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,2DACE,2CAA4C,CAC5C,uCAiBF,CAfE,mIAEE,2CAQF,CAEA,uPACE,6DACF,CAGF,uCACE,qDAAsD,CACtD,qDAuBF,CArBE,6CACE,2DACF,CAEA,8CACE,4DACF,CAEA,0DACE,oDAAqD,CACrD,QAAS,CACT,sCACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,wCAEE,2CAA4C,CAC5C,uCAAwC,CAFxC,kBAAmB,CAGnB,wBA0BF,CAtBI,mIACE,oCACF,CAGF,2DACE,wCAAyC,CACzC,eAMF,CAJE,mIAEE,oCACF,CAOF,gIACE,4BACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,4BAA6B,CAG7B,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,6BAA8B,CAG9B,uBAEF,CAEA,mBAME,oCAAqC,CACrC,gFAAkF,CAClF,mDAAqD,CALrD,WAAY,CAMZ,mEAAqE,CARrE,iBAAkB,CAClB,QAAS,CAWT,0BAA2B,CAF3B,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAcF,CAHE,gCAfF,mBAgBI,eAEJ,CADE,CAGF,qBAIE,6BAA8B,CAF9B,kDAAoD,CACpD,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,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 &:hover {\n & .ToggleSwitch-knob {\n background-color: var(--color-btn-hover-bg);\n }\n }\n\n &:active {\n & .ToggleSwitch-knob {\n background-color: var(--color-btn-active-bg);\n }\n }\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: 0;\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-canvas-subtle);\n border-color: var(--color-border-subtle);\n\n &:hover,\n &:active {\n background-color: var(--color-canvas-subtle);\n\n /* This is the most straightforward way of setting the knob's styles when the\n ** switch is both checked and disabled. */\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-disabled-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-disabled-bg);\n }\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 &: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 & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-bg);\n border: 0;\n transform: translateX(calc(100% + 1px));\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-canvas-subtle);\n border-color: var(--color-border-subtle);\n transition-property: none;\n\n &:hover,\n &:active {\n & .ToggleSwitch-knob {\n background-color: var(--color-btn-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n border-color: var(--color-border-default);\n box-shadow: none;\n\n &:hover,\n &:active {\n background-color: var(--color-btn-bg);\n }\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--color-fg-subtle);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--color-fg-subtle);\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-accent-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-fg-default);\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: -1px;\n bottom: -1px;\n z-index: 1;\n width: 50%;\n background-color: var(--color-btn-bg);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-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 transform: translateX(-1px);\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--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]}
|
@@ -0,0 +1,244 @@
|
|
1
|
+
/* ToggleSwitch */
|
2
|
+
|
3
|
+
/* Catalyst in dotcom applies a display: block to all web component elements. This
|
4
|
+
** rule overrides it so the status label and toggle switch are laid out correctly. */
|
5
|
+
.ToggleSwitch.ToggleSwitch {
|
6
|
+
display: inline-flex;
|
7
|
+
}
|
8
|
+
|
9
|
+
.ToggleSwitch {
|
10
|
+
align-items: center;
|
11
|
+
display: inline-flex;
|
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
|
+
}
|
26
|
+
|
27
|
+
.ToggleSwitch--checked {
|
28
|
+
& .ToggleSwitch-statusOn {
|
29
|
+
height: auto;
|
30
|
+
visibility: visible;
|
31
|
+
}
|
32
|
+
|
33
|
+
& .ToggleSwitch-statusOff {
|
34
|
+
height: 0;
|
35
|
+
visibility: hidden;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
.ToggleSwitch-track {
|
40
|
+
position: relative;
|
41
|
+
display: block;
|
42
|
+
width: var(--base-size-64, 64px);
|
43
|
+
height: var(--primer-control-medium-size, 32px);
|
44
|
+
padding: 0;
|
45
|
+
overflow: hidden;
|
46
|
+
text-decoration: none;
|
47
|
+
cursor: pointer;
|
48
|
+
user-select: none;
|
49
|
+
background-color: var(--color-switch-track-bg);
|
50
|
+
border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
|
51
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
52
|
+
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
53
|
+
transition-duration: 80ms;
|
54
|
+
transition-property: background-color, border-color;
|
55
|
+
appearance: none;
|
56
|
+
|
57
|
+
&:focus,
|
58
|
+
&:focus-visible {
|
59
|
+
outline-offset: 0;
|
60
|
+
}
|
61
|
+
|
62
|
+
@media (pointer: coarse) {
|
63
|
+
&::before {
|
64
|
+
@mixin minTouchTarget 44px;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
@media (prefers-reduced-motion) {
|
69
|
+
transition: none;
|
70
|
+
|
71
|
+
& * {
|
72
|
+
transition: none;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
|
78
|
+
background-color: var(--color-canvas-subtle);
|
79
|
+
border-color: var(--color-border-subtle);
|
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
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
.ToggleSwitch-track[aria-checked='true'] {
|
99
|
+
background-color: var(--color-switch-track-checked-bg);
|
100
|
+
border-color: var(--color-switch-track-checked-border);
|
101
|
+
|
102
|
+
&:hover {
|
103
|
+
background-color: var(--color-switch-track-checked-hover-bg);
|
104
|
+
}
|
105
|
+
|
106
|
+
&:active {
|
107
|
+
background-color: var(--color-switch-track-checked-active-bg);
|
108
|
+
}
|
109
|
+
|
110
|
+
& .ToggleSwitch-knob {
|
111
|
+
background-color: var(--color-switch-knob-checked-bg);
|
112
|
+
border: 0;
|
113
|
+
transform: translateX(calc(100% + 1px));
|
114
|
+
}
|
115
|
+
|
116
|
+
& .ToggleSwitch-lineIcon {
|
117
|
+
transform: translateX(0%);
|
118
|
+
}
|
119
|
+
|
120
|
+
& .ToggleSwitch-circleIcon {
|
121
|
+
transform: translateX(100%);
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
.ToggleSwitch-track[aria-disabled='true'] {
|
126
|
+
cursor: not-allowed;
|
127
|
+
background-color: var(--color-canvas-subtle);
|
128
|
+
border-color: var(--color-border-subtle);
|
129
|
+
transition-property: none;
|
130
|
+
|
131
|
+
&:hover,
|
132
|
+
&:active {
|
133
|
+
& .ToggleSwitch-knob {
|
134
|
+
background-color: var(--color-btn-bg);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
& .ToggleSwitch-knob {
|
139
|
+
border-color: var(--color-border-default);
|
140
|
+
box-shadow: none;
|
141
|
+
|
142
|
+
&:hover,
|
143
|
+
&:active {
|
144
|
+
background-color: var(--color-btn-bg);
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
& .ToggleSwitch-lineIcon {
|
149
|
+
color: var(--color-fg-subtle);
|
150
|
+
}
|
151
|
+
|
152
|
+
& .ToggleSwitch-circleIcon {
|
153
|
+
color: var(--color-fg-subtle);
|
154
|
+
}
|
155
|
+
}
|
156
|
+
|
157
|
+
.ToggleSwitch-icons {
|
158
|
+
display: flex;
|
159
|
+
align-items: center;
|
160
|
+
width: 100%;
|
161
|
+
height: 100%;
|
162
|
+
overflow: hidden;
|
163
|
+
}
|
164
|
+
|
165
|
+
.ToggleSwitch-lineIcon {
|
166
|
+
line-height: 0;
|
167
|
+
color: var(--color-accent-fg);
|
168
|
+
transition-duration: 80ms;
|
169
|
+
transition-property: transform;
|
170
|
+
transform: translateX(-100%);
|
171
|
+
flex: 1 0 50%;
|
172
|
+
}
|
173
|
+
|
174
|
+
.ToggleSwitch-circleIcon {
|
175
|
+
line-height: 0;
|
176
|
+
color: var(--color-fg-default);
|
177
|
+
transition-duration: 80ms;
|
178
|
+
transition-property: transform;
|
179
|
+
transform: translateX(0);
|
180
|
+
flex: 1 0 50%;
|
181
|
+
}
|
182
|
+
|
183
|
+
.ToggleSwitch-knob {
|
184
|
+
position: absolute;
|
185
|
+
top: -1px;
|
186
|
+
bottom: -1px;
|
187
|
+
z-index: 1;
|
188
|
+
width: 50%;
|
189
|
+
background-color: var(--color-btn-bg);
|
190
|
+
border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
|
191
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
192
|
+
box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
|
193
|
+
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
194
|
+
transition-duration: 80ms;
|
195
|
+
transition-property: transform;
|
196
|
+
transform: translateX(-1px);
|
197
|
+
|
198
|
+
@media (prefers-reduced-motion) {
|
199
|
+
transition: none;
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
203
|
+
.ToggleSwitch-status {
|
204
|
+
position: relative;
|
205
|
+
font-size: var(--primer-text-body-size-medium, 14px);
|
206
|
+
line-height: 1.5;
|
207
|
+
color: var(--color-fg-default);
|
208
|
+
text-align: right;
|
209
|
+
}
|
210
|
+
|
211
|
+
.ToggleSwitch--small {
|
212
|
+
& .ToggleSwitch-status {
|
213
|
+
font-size: var(--primer-text-body-size-small, 12px);
|
214
|
+
}
|
215
|
+
|
216
|
+
& .ToggleSwitch-track {
|
217
|
+
width: var(--base-size-48, 48px);
|
218
|
+
height: var(--primer-control-xsmall-size, 24px);
|
219
|
+
}
|
220
|
+
}
|
221
|
+
|
222
|
+
.ToggleSwitch--disabled {
|
223
|
+
& .ToggleSwitch-status {
|
224
|
+
color: var(--color-fg-muted);
|
225
|
+
}
|
226
|
+
}
|
227
|
+
|
228
|
+
.ToggleSwitch-statusOn {
|
229
|
+
height: 0;
|
230
|
+
visibility: hidden;
|
231
|
+
}
|
232
|
+
|
233
|
+
.ToggleSwitch-statusOff {
|
234
|
+
height: auto;
|
235
|
+
visibility: visible;
|
236
|
+
}
|
237
|
+
|
238
|
+
.ToggleSwitch--statusAtEnd {
|
239
|
+
flex-direction: row-reverse;
|
240
|
+
|
241
|
+
& .ToggleSwitch-status {
|
242
|
+
text-align: left;
|
243
|
+
}
|
244
|
+
}
|
@@ -1,5 +1,4 @@
|
|
1
|
-
declare class XBannerElement extends HTMLElement {
|
2
|
-
root: HTMLElement;
|
1
|
+
export declare class XBannerElement extends HTMLElement {
|
3
2
|
titleText: HTMLElement;
|
4
3
|
dismiss(): void;
|
5
4
|
private shouldReappear;
|
@@ -9,4 +8,3 @@ declare global {
|
|
9
8
|
XBannerElement: typeof XBannerElement;
|
10
9
|
}
|
11
10
|
}
|
12
|
-
export {};
|
@@ -20,18 +20,16 @@ let XBannerElement = class XBannerElement extends HTMLElement {
|
|
20
20
|
parentElement.removeChild(this);
|
21
21
|
}
|
22
22
|
shouldReappear() {
|
23
|
-
return this.
|
23
|
+
return this.getAttribute('data-reappear') === 'true';
|
24
24
|
}
|
25
25
|
};
|
26
|
-
__decorate([
|
27
|
-
target
|
28
|
-
], XBannerElement.prototype, "root", void 0);
|
29
26
|
__decorate([
|
30
27
|
target
|
31
28
|
], XBannerElement.prototype, "titleText", void 0);
|
32
29
|
XBannerElement = __decorate([
|
33
30
|
controller
|
34
31
|
], XBannerElement);
|
32
|
+
export { XBannerElement };
|
35
33
|
if (!window.customElements.get('x-banner')) {
|
36
34
|
window.XBannerElement = XBannerElement;
|
37
35
|
window.customElements.define('x-banner', XBannerElement);
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import {controller, target} from '@github/catalyst'
|
2
2
|
|
3
3
|
@controller
|
4
|
-
class XBannerElement extends HTMLElement {
|
5
|
-
@target root: HTMLElement
|
4
|
+
export class XBannerElement extends HTMLElement {
|
6
5
|
@target titleText: HTMLElement
|
7
6
|
|
8
7
|
dismiss() {
|
@@ -23,7 +22,7 @@ class XBannerElement extends HTMLElement {
|
|
23
22
|
}
|
24
23
|
|
25
24
|
private shouldReappear(): boolean {
|
26
|
-
return this.
|
25
|
+
return this.getAttribute('data-reappear') === 'true'
|
27
26
|
}
|
28
27
|
}
|
29
28
|
|
@@ -0,0 +1 @@
|
|
1
|
+
.blankslate{padding:var(--base-size-32,32px);position:relative;text-align:center}.blankslate p{color:var(--color-fg-muted)}.blankslate code{background:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);border-radius:var(--primer-borderRadius-medium,6px);font-size:var(--primer-text-body-size-medium,14px);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--color-fg-muted);margin-bottom:var(--primer-stack-gap-condensed,8px);margin-left:var(--primer-control-small-gap,4px);margin-right:var(--primer-control-small-gap,4px)}.blankslate-image{margin-bottom:var(--primer-stack-gap-normal,16px)}.blankslate-heading{margin-bottom:var(--base-size-4,4px)}.blankslate-action{margin-top:var(--primer-stack-gap-normal,16px)}.blankslate-action:first-of-type{margin-top:var(--primer-stack-gap-spacious,24px)}.blankslate-action:last-of-type{margin-bottom:var(--primer-stack-gap-condensed,8px)}.blankslate-capped{border-radius:0 0 var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,80px) var(--base-size-40,40px)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--primer-stack-gap-normal,16px) 0}.blankslate-large p{font-size:var(--primer-text-body-size-large,16px)}.blankslate-clean-background{border:0}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"beta/blankslate","selectors":[".blankslate",".blankslate p",".blankslate code",".blankslate img",".blankslate-icon",".blankslate-image",".blankslate-heading",".blankslate-action",".blankslate-action:first-of-type",".blankslate-action:last-of-type",".blankslate-capped",".blankslate-spacious",".blankslate-narrow",".blankslate-large img",".blankslate-large h3",".blankslate-large p",".blankslate-clean-background"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAAkC,CADlC,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,2BACF,CAEA,iBAGE,sCAAuC,CACvC,yEAA2E,CAC3E,mDAAqD,CAHrD,kDAAoD,CADpD,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,2BAA4B,CAF5B,mDAAqD,CACrD,+CAAiD,CAFjD,gDAIF,CAEA,kBACE,iDACF,CAEA,oBACE,oCACF,CAEA,mBACE,8CASF,CAPE,iCACE,gDACF,CAEA,gCACE,mDACF,CAGF,mBACE,6FACF,CAEA,qBACE,yDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,4CAIF,CAEA,oBACE,iDACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n position: relative;\n padding: var(--base-size-32, 32px);\n text-align: center;\n\n & p {\n color: var(--color-fg-muted);\n }\n\n & code {\n padding: 2px 5px 3px;\n font-size: var(--primer-text-body-size-medium, 14px);\n background: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n border-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n & img {\n width: 56px;\n height: 56px;\n }\n}\n\n.blankslate-icon {\n margin-right: var(--primer-control-small-gap, 4px);\n margin-bottom: var(--primer-stack-gap-condensed, 8px);\n margin-left: var(--primer-control-small-gap, 4px);\n color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n}\n\n.blankslate-heading {\n margin-bottom: var(--base-size-4, 4px);\n}\n\n.blankslate-action {\n margin-top: var(--primer-stack-gap-normal, 16px);\n\n &:first-of-type {\n margin-top: var(--primer-stack-gap-spacious, 24px);\n }\n\n &:last-of-type {\n margin-bottom: var(--primer-stack-gap-condensed, 8px);\n }\n}\n\n.blankslate-capped {\n border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);\n}\n\n.blankslate-spacious {\n padding: var(--base-size-80, 80px) var(--base-size-40, 40px);\n}\n\n.blankslate-narrow {\n max-width: 485px;\n margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n & img {\n width: 80px;\n height: 80px;\n }\n\n & h3 {\n margin: var(--primer-stack-gap-normal, 16px) 0;\n\n /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n font-size: 24px;\n }\n\n & p {\n font-size: var(--primer-text-body-size-large, 16px);\n }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n border: 0;\n}\n"]}
|
@@ -0,0 +1,90 @@
|
|
1
|
+
/* blankslate */
|
2
|
+
|
3
|
+
.blankslate {
|
4
|
+
position: relative;
|
5
|
+
padding: var(--base-size-32, 32px);
|
6
|
+
text-align: center;
|
7
|
+
|
8
|
+
& p {
|
9
|
+
color: var(--color-fg-muted);
|
10
|
+
}
|
11
|
+
|
12
|
+
& code {
|
13
|
+
padding: 2px 5px 3px;
|
14
|
+
font-size: var(--primer-text-body-size-medium, 14px);
|
15
|
+
background: var(--color-canvas-default);
|
16
|
+
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
|
17
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
18
|
+
}
|
19
|
+
|
20
|
+
& img {
|
21
|
+
width: 56px;
|
22
|
+
height: 56px;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
.blankslate-icon {
|
27
|
+
margin-right: var(--primer-control-small-gap, 4px);
|
28
|
+
margin-bottom: var(--primer-stack-gap-condensed, 8px);
|
29
|
+
margin-left: var(--primer-control-small-gap, 4px);
|
30
|
+
color: var(--color-fg-muted);
|
31
|
+
}
|
32
|
+
|
33
|
+
.blankslate-image {
|
34
|
+
margin-bottom: var(--primer-stack-gap-normal, 16px);
|
35
|
+
}
|
36
|
+
|
37
|
+
.blankslate-heading {
|
38
|
+
margin-bottom: var(--base-size-4, 4px);
|
39
|
+
}
|
40
|
+
|
41
|
+
.blankslate-action {
|
42
|
+
margin-top: var(--primer-stack-gap-normal, 16px);
|
43
|
+
|
44
|
+
&:first-of-type {
|
45
|
+
margin-top: var(--primer-stack-gap-spacious, 24px);
|
46
|
+
}
|
47
|
+
|
48
|
+
&:last-of-type {
|
49
|
+
margin-bottom: var(--primer-stack-gap-condensed, 8px);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
.blankslate-capped {
|
54
|
+
border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
|
55
|
+
}
|
56
|
+
|
57
|
+
.blankslate-spacious {
|
58
|
+
padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
|
59
|
+
}
|
60
|
+
|
61
|
+
.blankslate-narrow {
|
62
|
+
max-width: 485px;
|
63
|
+
margin: 0 auto;
|
64
|
+
}
|
65
|
+
|
66
|
+
/* was .large-format
|
67
|
+
** QUESTION: should we deprecate this? */
|
68
|
+
.blankslate-large {
|
69
|
+
& img {
|
70
|
+
width: 80px;
|
71
|
+
height: 80px;
|
72
|
+
}
|
73
|
+
|
74
|
+
& h3 {
|
75
|
+
margin: var(--primer-stack-gap-normal, 16px) 0;
|
76
|
+
|
77
|
+
/* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
|
78
|
+
font-size: 24px;
|
79
|
+
}
|
80
|
+
|
81
|
+
& p {
|
82
|
+
font-size: var(--primer-text-body-size-large, 16px);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
/* was .clean-background
|
87
|
+
** TO DO: deprecate this and use utility instead */
|
88
|
+
.blankslate-clean-background {
|
89
|
+
border: 0;
|
90
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--color-fg-muted);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--color-fg-default)}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",":is(.breadcrumb-item-selected",".breadcrumb-item[aria-current]:not([aria-current=false])):after",".breadcrumb-item-selected a"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,6CAA+C,CAD/C,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAGF,4BACE,6BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n margin-left: -0.35em;\n white-space: nowrap;\n list-style: none;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n margin: 0 0.5em;\n content: '';\n border-right: 0.1em solid var(--color-fg-muted);\n transform: rotate(15deg);\n }\n\n &:first-child {\n margin-left: 0;\n }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n &::after {\n content: none;\n }\n}\n\n.breadcrumb-item-selected a {\n color: var(--color-fg-default);\n}\n"]}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
.breadcrumb-item {
|
2
|
+
display: inline-block;
|
3
|
+
margin-left: -0.35em;
|
4
|
+
white-space: nowrap;
|
5
|
+
list-style: none;
|
6
|
+
|
7
|
+
&::after {
|
8
|
+
display: inline-block;
|
9
|
+
height: 0.8em;
|
10
|
+
margin: 0 0.5em;
|
11
|
+
content: '';
|
12
|
+
border-right: 0.1em solid var(--color-fg-muted);
|
13
|
+
transform: rotate(15deg);
|
14
|
+
}
|
15
|
+
|
16
|
+
&:first-child {
|
17
|
+
margin-left: 0;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
.breadcrumb-item-selected,
|
22
|
+
.breadcrumb-item[aria-current]:not([aria-current='false']) {
|
23
|
+
&::after {
|
24
|
+
content: none;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
.breadcrumb-item-selected a {
|
29
|
+
color: var(--color-fg-default);
|
30
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"name":"
|
1
|
+
{"name":"beta/button","selectors":[":root",".Button",".Button:before",".Button:hover",".Button:active",".Button:disabled",".Button[aria-disabled=true]",".Button-withTooltip","a.Button","summary.Button","a.Button:hover","summary.Button:hover",".Button-content",".Button-content>:not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content>:not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content>:not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)",".Button--primary[aria-pressed=true]",".Button--primary:disabled",".Button--primary[aria-disabled=true]",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed=true]",".Button--secondary:disabled",".Button--secondary[aria-disabled=true]",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible:active:not(:disabled)",".Button--invisible[aria-pressed=true]",".Button--invisible:disabled",".Button--invisible[aria-disabled=true]",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus",".Button--link:focus-visible",".Button--link:disabled",".Button--link[aria-disabled=true]",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)",".Button--danger[aria-pressed=true]",".Button--danger:disabled",".Button--danger[aria-disabled=true]",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}
|