primer_view_components 0.0.109 → 0.0.111
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +42 -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/item.rb +2 -2
- 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 +0 -0
- data/app/components/primer/{beta → alpha}/banner.pcss +1 -0
- data/app/components/primer/{beta → alpha}/banner.rb +12 -12
- 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 +2 -1
- data/app/components/primer/{beta → alpha}/x_banner.js +0 -1
- data/app/components/primer/{beta → alpha}/x_banner.ts +1 -1
- data/app/components/primer/beta/avatar.css +1 -0
- data/app/components/primer/beta/avatar.css.json +1 -0
- data/app/components/primer/beta/avatar.css.map +1 -0
- data/app/components/primer/beta/avatar.pcss +73 -0
- data/app/components/primer/beta/avatar_stack.css +1 -0
- data/app/components/primer/beta/avatar_stack.css.json +1 -0
- data/app/components/primer/beta/avatar_stack.css.map +1 -0
- data/app/components/primer/beta/avatar_stack.pcss +141 -0
- 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.map +1 -1
- data/app/components/primer/beta/button.pcss +0 -4
- data/app/components/primer/beta/button.rb +1 -1
- 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/flash.css +1 -0
- data/app/components/primer/beta/flash.css.json +1 -0
- data/app/components/primer/beta/flash.css.map +1 -0
- data/app/components/primer/beta/flash.pcss +143 -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/dropdown.css +1 -0
- data/app/components/primer/dropdown.css.json +1 -0
- data/app/components/primer/dropdown.css.map +1 -0
- data/app/components/primer/dropdown.pcss +260 -0
- data/app/components/primer/popover_component.css +1 -0
- data/app/components/primer/popover_component.css.json +1 -0
- data/app/components/primer/popover_component.css.map +1 -0
- data/app/components/primer/popover_component.pcss +225 -0
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +18 -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/timeline_item_component.css +1 -0
- data/app/components/primer/timeline_item_component.css.json +1 -0
- data/app/components/primer/timeline_item_component.css.map +1 -0
- data/app/components/primer/timeline_item_component.pcss +93 -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/lib/primer/deprecations.rb +2 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +3 -3
- data/lib/tasks/test.rake +8 -0
- 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/avatar_preview.rb +61 -5
- data/previews/primer/beta/avatar_stack_preview.rb +54 -12
- data/previews/primer/beta/blankslate_preview.rb +29 -5
- data/previews/primer/beta/counter_preview.rb +55 -8
- data/previews/primer/beta/flash_preview.rb +45 -8
- data/previews/primer/beta/label_preview.rb +86 -8
- data/previews/primer/beta/progress_bar_preview.rb +60 -0
- data/previews/primer/dropdown_preview.rb +161 -10
- data/static/arguments.json +76 -76
- data/static/audited_at.json +2 -2
- data/static/constants.json +34 -34
- data/static/statuses.json +3 -3
- metadata +81 -17
- data/app/components/primer/beta/banner.css.json +0 -1
- data/app/components/primer/counter_component.rb +0 -7
- 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)
|
@@ -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,4 +1,4 @@
|
|
1
|
-
|
1
|
+
declare class XBannerElement extends HTMLElement {
|
2
2
|
titleText: HTMLElement;
|
3
3
|
dismiss(): void;
|
4
4
|
private shouldReappear;
|
@@ -8,3 +8,4 @@ declare global {
|
|
8
8
|
XBannerElement: typeof XBannerElement;
|
9
9
|
}
|
10
10
|
}
|
11
|
+
export {};
|
@@ -29,7 +29,6 @@ __decorate([
|
|
29
29
|
XBannerElement = __decorate([
|
30
30
|
controller
|
31
31
|
], XBannerElement);
|
32
|
-
export { XBannerElement };
|
33
32
|
if (!window.customElements.get('x-banner')) {
|
34
33
|
window.XBannerElement = XBannerElement;
|
35
34
|
window.customElements.define('x-banner', XBannerElement);
|
@@ -0,0 +1 @@
|
|
1
|
+
.avatar{background-color:var(--color-avatar-bg);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--primer-borderRadius-small,4px)}.avatar-1{height:var(--base-size-16,16px);width:var(--base-size-16,16px)}.avatar-2{height:var(--base-size-20,20px);width:var(--base-size-20,20px)}.avatar-3{height:var(--base-size-24,24px);width:var(--base-size-24,24px)}.avatar-4{height:var(--base-size-28,28px);width:var(--base-size-28,28px)}.avatar-5{height:var(--base-size-32,32px);width:var(--base-size-32,32px)}.avatar-6{height:var(--base-size-40,40px);width:var(--base-size-40,40px)}.avatar-7{height:var(--base-size-48,48px);width:var(--base-size-48,48px)}.avatar-8{height:var(--base-size-64,64px);width:var(--base-size-64,64px)}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"beta/avatar","selectors":[".avatar",".avatar-link",".avatar-group-item",".avatar-1",".avatar-2",".avatar-small",".avatar-3",".avatar-4",".avatar-5",".avatar-6",".avatar-7",".avatar-8"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,mDAAqD,CAErD,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,kDACF,CAIA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n display: inline-block;\n overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n line-height: 1;\n vertical-align: middle;\n background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n border-radius: var(--primer-borderRadius-medium, 6px);\n flex-shrink: 0;\n box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n float: left;\n line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n display: inline-block;\n margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n border-radius: var(--primer-borderRadius-small, 4px);\n}\n\n/* Sizes */\n\n.avatar-1 {\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n}\n\n.avatar-2 {\n width: var(--base-size-20, 20px);\n height: var(--base-size-20, 20px);\n}\n\n.avatar-3 {\n width: var(--base-size-24, 24px);\n height: var(--base-size-24, 24px);\n}\n\n.avatar-4 {\n width: var(--base-size-28, 28px);\n height: var(--base-size-28, 28px);\n}\n\n.avatar-5 {\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n}\n\n.avatar-6 {\n width: var(--base-size-40, 40px);\n height: var(--base-size-40, 40px);\n}\n\n.avatar-7 {\n width: var(--base-size-48, 48px);\n height: var(--base-size-48, 48px);\n}\n\n.avatar-8 {\n width: var(--base-size-64, 64px);\n height: var(--base-size-64, 64px);\n}\n"]}
|
@@ -0,0 +1,73 @@
|
|
1
|
+
/* avatar */
|
2
|
+
|
3
|
+
.avatar {
|
4
|
+
display: inline-block;
|
5
|
+
overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
|
6
|
+
line-height: 1;
|
7
|
+
vertical-align: middle;
|
8
|
+
background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
|
9
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
10
|
+
flex-shrink: 0;
|
11
|
+
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
12
|
+
}
|
13
|
+
|
14
|
+
.avatar-link {
|
15
|
+
float: left;
|
16
|
+
line-height: 1;
|
17
|
+
}
|
18
|
+
|
19
|
+
/* User for example on /stars and /user for grids of avatars */
|
20
|
+
.avatar-group-item {
|
21
|
+
display: inline-block;
|
22
|
+
margin-bottom: 3px;
|
23
|
+
}
|
24
|
+
|
25
|
+
/* Border radius */
|
26
|
+
|
27
|
+
.avatar-1,
|
28
|
+
.avatar-2,
|
29
|
+
.avatar-small {
|
30
|
+
border-radius: var(--primer-borderRadius-small, 4px);
|
31
|
+
}
|
32
|
+
|
33
|
+
/* Sizes */
|
34
|
+
|
35
|
+
.avatar-1 {
|
36
|
+
width: var(--base-size-16, 16px);
|
37
|
+
height: var(--base-size-16, 16px);
|
38
|
+
}
|
39
|
+
|
40
|
+
.avatar-2 {
|
41
|
+
width: var(--base-size-20, 20px);
|
42
|
+
height: var(--base-size-20, 20px);
|
43
|
+
}
|
44
|
+
|
45
|
+
.avatar-3 {
|
46
|
+
width: var(--base-size-24, 24px);
|
47
|
+
height: var(--base-size-24, 24px);
|
48
|
+
}
|
49
|
+
|
50
|
+
.avatar-4 {
|
51
|
+
width: var(--base-size-28, 28px);
|
52
|
+
height: var(--base-size-28, 28px);
|
53
|
+
}
|
54
|
+
|
55
|
+
.avatar-5 {
|
56
|
+
width: var(--base-size-32, 32px);
|
57
|
+
height: var(--base-size-32, 32px);
|
58
|
+
}
|
59
|
+
|
60
|
+
.avatar-6 {
|
61
|
+
width: var(--base-size-40, 40px);
|
62
|
+
height: var(--base-size-40, 40px);
|
63
|
+
}
|
64
|
+
|
65
|
+
.avatar-7 {
|
66
|
+
width: var(--base-size-48, 48px);
|
67
|
+
height: var(--base-size-48, 48px);
|
68
|
+
}
|
69
|
+
|
70
|
+
.avatar-8 {
|
71
|
+
width: var(--base-size-64, 64px);
|
72
|
+
height: var(--base-size-64, 64px);
|
73
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--color-canvas-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--color-canvas-default);border-radius:var(--primer-borderRadius-small,4px);border-right:var(--primer-borderWidth-thin,1px) solid var(--color-canvas-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--primer-borderRadius-small,4px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--color-canvas-subtle);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--primer-borderWidth-thin,1px) solid var(--color-canvas-default);position:absolute}.avatar.avatar-more:before{background:var(--color-avatar-stack-fade-more);width:17px}.avatar.avatar-more:after{background:var(--color-avatar-stack-fade);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--color-avatar-stack-fade)}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--color-canvas-subtle);width:2px}.AvatarStack--right .avatar{border-left:var(--primer-borderWidth-thin,1px) solid var(--color-canvas-default);border-right:0;margin-left:-11px;margin-right:0}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"name":"beta/avatar_stack","selectors":[".AvatarStack",".AvatarStack .AvatarStack-body",".AvatarStack.AvatarStack--two",".AvatarStack.AvatarStack--three-plus",".AvatarStack-body",".AvatarStack-body .avatar",".AvatarStack-body .avatar:first-child",".AvatarStack-body .avatar:last-child",".AvatarStack-body .avatar img",".AvatarStack-body .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar",".AvatarStack-body:hover .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar-more",".avatar.avatar-more",".avatar.avatar-more:after",".avatar.avatar-more:before",".AvatarStack--right .AvatarStack-body",".AvatarStack--right .AvatarStack-body:hover .avatar",".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",".AvatarStack--right .avatar.avatar-more",".AvatarStack--right .avatar.avatar-more:before",".AvatarStack--right .avatar.avatar-more:after",".AvatarStack--right .avatar"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,sCAAuC,CACvC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,4CAA6C,CAE7C,kDAAoD,CADpD,iFAAmF,CAEnF,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,kDACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,qCAAsC,CADtC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,4EAA8E,CAL9E,iBAMF,CAEA,2BAEE,8CAA+C,CAD/C,UAEF,CAEA,0BAEE,yCAA0C,CAD1C,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,yCAUF,CARE,+CACE,SACF,CAEA,8CAEE,qCAAsC,CADtC,SAEF,CAGF,4BAIE,gFAAkF,CADlF,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n position: relative;\n min-width: 26px;\n height: 20px;\n\n & .AvatarStack-body {\n position: absolute;\n }\n\n &.AvatarStack--two {\n min-width: 36px;\n }\n\n &.AvatarStack--three-plus {\n min-width: 46px;\n }\n}\n\n.AvatarStack-body {\n display: flex;\n background: var(--color-canvas-default);\n border-radius: 100px;\n\n & .avatar {\n position: relative;\n z-index: 2;\n display: flex;\n width: 20px;\n height: 20px;\n box-sizing: content-box;\n margin-right: -11px;\n background-color: var(--color-canvas-default);\n border-right: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);\n border-radius: var(--primer-borderRadius-small, 4px);\n box-shadow: none;\n transition: margin 0.1s ease-in-out;\n\n &:first-child {\n z-index: 3;\n }\n\n &:last-child {\n z-index: 1;\n border-right: 0;\n }\n\n & img {\n border-radius: var(--primer-borderRadius-small, 4px);\n }\n\n /* Account for 4+ avatars */\n &:nth-child(n + 4) {\n display: none;\n opacity: 0;\n }\n }\n\n &:hover {\n & .avatar {\n margin-right: 3px;\n }\n\n & .avatar:nth-child(n + 4) {\n display: flex;\n opacity: 1;\n }\n\n & .avatar-more {\n display: none !important;\n }\n }\n}\n\n.avatar.avatar-more {\n z-index: 1;\n margin-right: 0;\n background: var(--color-canvas-subtle);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n height: 20px;\n content: '';\n border-radius: 2px;\n outline: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);\n }\n\n &::before {\n width: 17px;\n background: var(--color-avatar-stack-fade-more);\n }\n\n &::after {\n width: 14px;\n background: var(--color-avatar-stack-fade);\n }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n & .AvatarStack-body {\n right: 0;\n flex-direction: row-reverse;\n\n &:hover .avatar {\n margin-right: 0;\n margin-left: 3px;\n }\n\n & .avatar:not(:last-child) {\n border-left: 0;\n }\n }\n\n & .avatar.avatar-more {\n background: var(--color-avatar-stack-fade);\n\n &::before {\n width: 5px;\n }\n\n &::after {\n width: 2px;\n background: var(--color-canvas-subtle);\n }\n }\n\n & .avatar {\n margin-right: 0;\n margin-left: -11px;\n border-right: 0;\n border-left: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);\n }\n}\n"]}
|
@@ -0,0 +1,141 @@
|
|
1
|
+
/* AvatarStack */
|
2
|
+
|
3
|
+
/* Stacked avatars can be used to show who is participating in thread when
|
4
|
+
** there is limited space available. */
|
5
|
+
|
6
|
+
.AvatarStack {
|
7
|
+
position: relative;
|
8
|
+
min-width: 26px;
|
9
|
+
height: 20px;
|
10
|
+
|
11
|
+
& .AvatarStack-body {
|
12
|
+
position: absolute;
|
13
|
+
}
|
14
|
+
|
15
|
+
&.AvatarStack--two {
|
16
|
+
min-width: 36px;
|
17
|
+
}
|
18
|
+
|
19
|
+
&.AvatarStack--three-plus {
|
20
|
+
min-width: 46px;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
.AvatarStack-body {
|
25
|
+
display: flex;
|
26
|
+
background: var(--color-canvas-default);
|
27
|
+
border-radius: 100px;
|
28
|
+
|
29
|
+
& .avatar {
|
30
|
+
position: relative;
|
31
|
+
z-index: 2;
|
32
|
+
display: flex;
|
33
|
+
width: 20px;
|
34
|
+
height: 20px;
|
35
|
+
box-sizing: content-box;
|
36
|
+
margin-right: -11px;
|
37
|
+
background-color: var(--color-canvas-default);
|
38
|
+
border-right: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
|
39
|
+
border-radius: var(--primer-borderRadius-small, 4px);
|
40
|
+
box-shadow: none;
|
41
|
+
transition: margin 0.1s ease-in-out;
|
42
|
+
|
43
|
+
&:first-child {
|
44
|
+
z-index: 3;
|
45
|
+
}
|
46
|
+
|
47
|
+
&:last-child {
|
48
|
+
z-index: 1;
|
49
|
+
border-right: 0;
|
50
|
+
}
|
51
|
+
|
52
|
+
& img {
|
53
|
+
border-radius: var(--primer-borderRadius-small, 4px);
|
54
|
+
}
|
55
|
+
|
56
|
+
/* Account for 4+ avatars */
|
57
|
+
&:nth-child(n + 4) {
|
58
|
+
display: none;
|
59
|
+
opacity: 0;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
&:hover {
|
64
|
+
& .avatar {
|
65
|
+
margin-right: 3px;
|
66
|
+
}
|
67
|
+
|
68
|
+
& .avatar:nth-child(n + 4) {
|
69
|
+
display: flex;
|
70
|
+
opacity: 1;
|
71
|
+
}
|
72
|
+
|
73
|
+
& .avatar-more {
|
74
|
+
display: none !important;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
.avatar.avatar-more {
|
80
|
+
z-index: 1;
|
81
|
+
margin-right: 0;
|
82
|
+
background: var(--color-canvas-subtle);
|
83
|
+
|
84
|
+
&::before,
|
85
|
+
&::after {
|
86
|
+
position: absolute;
|
87
|
+
display: block;
|
88
|
+
height: 20px;
|
89
|
+
content: '';
|
90
|
+
border-radius: 2px;
|
91
|
+
outline: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
|
92
|
+
}
|
93
|
+
|
94
|
+
&::before {
|
95
|
+
width: 17px;
|
96
|
+
background: var(--color-avatar-stack-fade-more);
|
97
|
+
}
|
98
|
+
|
99
|
+
&::after {
|
100
|
+
width: 14px;
|
101
|
+
background: var(--color-avatar-stack-fade);
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
/* Right aligned variation */
|
106
|
+
|
107
|
+
.AvatarStack--right {
|
108
|
+
& .AvatarStack-body {
|
109
|
+
right: 0;
|
110
|
+
flex-direction: row-reverse;
|
111
|
+
|
112
|
+
&:hover .avatar {
|
113
|
+
margin-right: 0;
|
114
|
+
margin-left: 3px;
|
115
|
+
}
|
116
|
+
|
117
|
+
& .avatar:not(:last-child) {
|
118
|
+
border-left: 0;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
& .avatar.avatar-more {
|
123
|
+
background: var(--color-avatar-stack-fade);
|
124
|
+
|
125
|
+
&::before {
|
126
|
+
width: 5px;
|
127
|
+
}
|
128
|
+
|
129
|
+
&::after {
|
130
|
+
width: 2px;
|
131
|
+
background: var(--color-canvas-subtle);
|
132
|
+
}
|
133
|
+
}
|
134
|
+
|
135
|
+
& .avatar {
|
136
|
+
margin-right: 0;
|
137
|
+
margin-left: -11px;
|
138
|
+
border-right: 0;
|
139
|
+
border-left: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
|
140
|
+
}
|
141
|
+
}
|
@@ -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"]}
|