primer_view_components 0.0.111 → 0.0.112
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +30 -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/auto_complete.css +1 -0
- data/app/components/primer/alpha/auto_complete.css.json +1 -0
- data/app/components/primer/alpha/auto_complete.css.map +1 -0
- data/app/components/primer/alpha/auto_complete.pcss +118 -0
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +2 -3
- data/app/components/primer/alpha/button_marketing.css +1 -0
- data/app/components/primer/alpha/button_marketing.css.json +1 -0
- data/app/components/primer/alpha/button_marketing.css.map +1 -0
- data/app/components/primer/alpha/button_marketing.pcss +175 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.d.ts +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.html.erb +0 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.js +0 -0
- data/app/components/primer/alpha/dropdown/menu.rb +105 -0
- data/app/components/primer/{dropdown → alpha/dropdown}/menu.ts +0 -0
- data/app/components/primer/alpha/dropdown.css +1 -0
- data/app/components/primer/alpha/dropdown.css.json +1 -0
- data/app/components/primer/{dropdown.css.map → alpha/dropdown.css.map} +1 -1
- data/app/components/primer/{dropdown.d.ts → alpha/dropdown.d.ts} +0 -0
- data/app/components/primer/{dropdown.html.erb → alpha/dropdown.html.erb} +0 -0
- data/app/components/primer/{dropdown.js → alpha/dropdown.js} +0 -0
- data/app/components/primer/{dropdown.pcss → alpha/dropdown.pcss} +1 -1
- data/app/components/primer/alpha/dropdown.rb +154 -0
- data/app/components/primer/{dropdown.ts → alpha/dropdown.ts} +0 -0
- data/app/components/primer/alpha/tab_nav.css +1 -0
- data/app/components/primer/alpha/tab_nav.css.json +1 -0
- data/app/components/primer/alpha/tab_nav.css.map +1 -0
- data/app/components/primer/alpha/tab_nav.pcss +100 -0
- data/app/components/primer/alpha/underline_nav.css +1 -0
- data/app/components/primer/alpha/underline_nav.css.json +1 -0
- data/app/components/primer/alpha/underline_nav.css.map +1 -0
- data/app/components/primer/alpha/underline_nav.pcss +133 -0
- data/app/components/primer/beta/border_box.css +1 -0
- data/app/components/primer/beta/border_box.css.json +1 -0
- data/app/components/primer/beta/border_box.css.map +1 -0
- data/app/components/primer/beta/border_box.pcss +284 -0
- data/app/components/primer/beta/link.css +1 -0
- data/app/components/primer/beta/link.css.json +1 -0
- data/app/components/primer/beta/link.css.map +1 -0
- data/app/components/primer/beta/link.pcss +60 -0
- data/app/components/primer/{popover_component.css → beta/popover.css} +0 -0
- data/app/components/primer/beta/popover.css.json +1 -0
- data/app/components/primer/beta/popover.css.map +1 -0
- data/app/components/primer/{popover_component.html.erb → beta/popover.html.erb} +0 -0
- data/app/components/primer/{popover_component.pcss → beta/popover.pcss} +0 -0
- data/app/components/primer/beta/popover.rb +127 -0
- data/app/components/primer/component.rb +2 -2
- data/app/components/primer/dropdown/menu.rb +5 -90
- data/app/components/primer/dropdown.rb +2 -145
- data/app/components/primer/menu_component.css +1 -0
- data/app/components/primer/menu_component.css.json +1 -0
- data/app/components/primer/menu_component.css.map +1 -0
- data/app/components/primer/menu_component.pcss +119 -0
- data/app/components/primer/popover_component.rb +3 -120
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +10 -3
- data/app/components/primer/primer.ts +1 -1
- data/lib/primer/deprecations.rb +4 -2
- data/lib/primer/view_components/linters/deprecated_components_counter.rb +15 -4
- data/lib/primer/view_components/linters/severity_schema.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +3 -3
- data/previews/primer/alpha/button_marketing_preview.rb +36 -0
- data/previews/primer/alpha/dropdown_preview.rb +210 -0
- data/previews/primer/alpha/tab_nav_preview.rb +55 -0
- data/previews/primer/beta/border_box_preview.rb +65 -13
- data/previews/primer/beta/link_preview.rb +28 -0
- data/previews/primer/beta/popover_preview.rb +79 -0
- data/static/arguments.json +40 -40
- data/static/audited_at.json +4 -2
- data/static/constants.json +56 -50
- data/static/statuses.json +8 -6
- metadata +54 -23
- data/app/components/primer/dropdown.css +0 -1
- data/app/components/primer/dropdown.css.json +0 -1
- data/app/components/primer/image.rb +0 -7
- data/app/components/primer/popover_component.css.json +0 -1
- data/app/components/primer/popover_component.css.map +0 -1
- data/app/components/primer/progress_bar_component.rb +0 -7
- data/previews/primer/dropdown_preview.rb +0 -208
- data/previews/primer/popover_component_preview.rb +0 -34
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* autocomplete */
|
|
2
|
+
|
|
3
|
+
/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
|
|
4
|
+
** AutoComplete relies on FormControl, Overlay and ActionList CSS */
|
|
5
|
+
|
|
6
|
+
/* Stacked label (default) */
|
|
7
|
+
.autocomplete-label-stacked {
|
|
8
|
+
display: block;
|
|
9
|
+
margin-bottom: 6px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Inline label (non-default) */
|
|
13
|
+
.autocomplete-label-inline {
|
|
14
|
+
display: inline;
|
|
15
|
+
margin-right: 6px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Switch to stacked at smaller viewport */
|
|
19
|
+
@media (--primer-viewportRange-narrow-viewport) {
|
|
20
|
+
.autocomplete-label-inline {
|
|
21
|
+
display: block;
|
|
22
|
+
margin-bottom: 6px;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Wrapper for the input and result elements to ensure alignment */
|
|
27
|
+
.autocomplete-body {
|
|
28
|
+
position: relative;
|
|
29
|
+
display: inline;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Wrapper and conditional styles for when an icon is added */
|
|
33
|
+
.autocomplete-embedded-icon-wrap {
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
padding: 4px 8px;
|
|
36
|
+
align-items: center;
|
|
37
|
+
|
|
38
|
+
&:focus-within {
|
|
39
|
+
border-color: var(--color-accent-fg);
|
|
40
|
+
|
|
41
|
+
@mixin focusBoxShadowInset;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
& .form-control {
|
|
45
|
+
padding: 0;
|
|
46
|
+
margin-left: 8px;
|
|
47
|
+
border: none;
|
|
48
|
+
box-shadow: none;
|
|
49
|
+
|
|
50
|
+
&:focus {
|
|
51
|
+
box-shadow: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:focus-visible {
|
|
55
|
+
box-shadow: none;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* A pop up list of items used to show autocompleted results */
|
|
61
|
+
.autocomplete-results {
|
|
62
|
+
position: absolute;
|
|
63
|
+
left: 0;
|
|
64
|
+
z-index: 99;
|
|
65
|
+
width: max-content;
|
|
66
|
+
min-width: 100%;
|
|
67
|
+
max-height: 20em;
|
|
68
|
+
overflow-y: auto;
|
|
69
|
+
font-size: 13px;
|
|
70
|
+
list-style: none;
|
|
71
|
+
background: var(--color-canvas-overlay);
|
|
72
|
+
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
|
|
73
|
+
border-radius: var(--primer-borderRadius-medium, 6px);
|
|
74
|
+
box-shadow: var(--color-shadow-medium);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* One of the items that appears within an autocomplete group
|
|
78
|
+
** Bold black text on white background */
|
|
79
|
+
|
|
80
|
+
.autocomplete-item {
|
|
81
|
+
display: block;
|
|
82
|
+
width: 100%;
|
|
83
|
+
padding: 4px 8px;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
font-weight: var(--base-text-weight-semibold, 600);
|
|
86
|
+
color: var(--color-fg-default);
|
|
87
|
+
text-align: left;
|
|
88
|
+
text-decoration: none;
|
|
89
|
+
text-overflow: ellipsis;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
background-color: var(--color-canvas-overlay);
|
|
93
|
+
border: 0;
|
|
94
|
+
|
|
95
|
+
&:hover {
|
|
96
|
+
color: var(--color-fg-on-emphasis);
|
|
97
|
+
text-decoration: none;
|
|
98
|
+
background-color: var(--color-accent-emphasis);
|
|
99
|
+
|
|
100
|
+
/* Inherit color on all child elements to ensure enough contrast */
|
|
101
|
+
& * {
|
|
102
|
+
color: inherit !important;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&.selected,
|
|
107
|
+
&[aria-selected='true'],
|
|
108
|
+
&.navigation-focus {
|
|
109
|
+
color: var(--color-fg-on-emphasis);
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
background-color: var(--color-accent-emphasis);
|
|
112
|
+
|
|
113
|
+
/* Inherit color on all child elements to ensure enough contrast */
|
|
114
|
+
& * {
|
|
115
|
+
color: inherit !important;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,8px);position:relative}@media (max-width:
|
|
1
|
+
.Banner{background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8,8px);position:relative}@media (max-width:calc(48rem - 0.02px)){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8,8px) 0 0 var(--base-size-8,8px)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-visual>.octicon{margin-bottom:calc(var(--base-size-4, 4px)/2);margin-top:calc(var(--base-size-4, 4px)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6,6px) var(--base-size-8,8px)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--primer-controlStack-medium-gap-condensed,8px)}.Banner .Banner-visual .octicon{color:var(--color-accent-fg)}.Banner.Banner--warning{background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--color-attention-fg)}.Banner.Banner--error{background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--color-danger-fg)}.Banner.Banner--success{background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--color-success-fg)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}@media (--primer-viewportRange-narrowLandscape ){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--primer-borderWidth-thin, max(1px, .0625rem))*-1)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,uFAAyF,CACzF,uFAA2F,CAC3F,mDAAqD,CAHrD,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAiE,CACjE,8BAA+B,CAR/B,8BAAgC,CAFhC,
|
|
1
|
+
{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAEA,QAKE,uFAAyF,CACzF,uFAA2F,CAC3F,mDAAqD,CAHrD,6BAA8B,CAF9B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAiE,CACjE,8BAA+B,CAR/B,8BAAgC,CAFhC,iBA0HF,CA7GE,wCAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAwGJ,CAtGI,wBACI,wDACJ,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,qDAWF,CAPE,gCACE,6CAA+C,CAA/C,0CACF,CAEA,yBACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,qDAYF,CARE,qCACE,eACF,CAEA,uDAEE,gDAAkD,CADlD,eAEF,CAGF,wBACE,iBAKF,CAHE,mCACE,iBACF,CAIF,sBACE,eAAgB,CAChB,+DACF,CAEA,gCACE,4BACF,CAEA,wBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,gDACE,+BACF,CAGF,sBAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,8CACE,4BACF,CAGF,wBAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,gDACE,6BACF,CAKF,qBAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CAEA,iDACE,gCAGE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,sEAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n position: relative;\n display: grid;\n padding: var(--base-size-8, 8px);\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n border-radius: var(--primer-borderRadius-medium, 6px);\n grid-auto-flow: column;\n grid-template-areas: 'visual message actions close';\n grid-template-columns: min-content 1fr minmax(0,auto) min-content;\n grid-template-rows: min-content;\n\n /* `sm` breakpoint variantion */\n @media (--primer-viewportRange-narrow-viewport) {\n grid-template-areas:\n 'visual message close'\n '. actions actions';\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: min-content min-content;\n\n & .Banner-actions {\n margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);\n }\n }\n\n /* Elements */\n\n & .Banner-visual {\n display: grid;\n padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n grid-area: visual;\n align-self: start;\n\n & > .octicon {\n margin-block: calc(var(--base-size-4, 4px) / 2);\n }\n\n & > * {\n align-self: center;\n }\n }\n\n & .Banner-message {\n padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n grid-area: message;\n align-self: center;\n\n & p:last-child {\n margin-bottom: 0;\n }\n\n & .Banner-title:not(:only-child) {\n margin-bottom: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n & .Banner-actions {\n grid-area: actions;\n\n &:last-child {\n align-self: center;\n }\n }\n\n /* is this used anywhere? could not find any use, but unsure */\n & .Banner-close {\n grid-area: close;\n margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);\n }\n\n & .Banner-visual .octicon {\n color: var(--color-accent-fg);\n }\n\n &.Banner--warning {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n border-color: var(--color-attention-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-attention-fg);\n }\n }\n\n &.Banner--error {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n border-color: var(--color-danger-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-danger-fg);\n }\n }\n\n &.Banner--success {\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n border-color: var(--color-success-muted);\n\n & .Banner-visual .octicon {\n color: var(--color-success-fg);\n }\n }\n\n /* Full-width */\n\n &.Banner--full {\n margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n\n @media (--primer-viewportRange-narrowLandscape) {\n &.Banner--full-whenNarrow {\n margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n }\n}\n"]}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
grid-template-rows: min-content;
|
|
15
15
|
|
|
16
16
|
/* `sm` breakpoint variantion */
|
|
17
|
-
@media (
|
|
17
|
+
@media (--primer-viewportRange-narrow-viewport) {
|
|
18
18
|
grid-template-areas:
|
|
19
19
|
'visual message close'
|
|
20
20
|
'. actions actions';
|
|
@@ -115,8 +115,7 @@
|
|
|
115
115
|
border-radius: 0;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
|
|
119
|
-
@media (max-width: 767.98px) {
|
|
118
|
+
@media (--primer-viewportRange-narrowLandscape) {
|
|
120
119
|
&.Banner--full-whenNarrow {
|
|
121
120
|
margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
|
|
122
121
|
border-right: 0;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.btn-mktg{-webkit-appearance:none!important;appearance:none!important;background:linear-gradient(180deg,#ffffff26 0,#fff0 100%),var(--color-mktg-btn-bg)!important;border:0;border-radius:.375rem;color:var(--color-canvas-default);display:inline-block;font-size:1rem;font-weight:var(--base-text-weight-semibold,600);line-height:1;padding:.9rem 1.5rem 1.1rem;position:relative;text-align:center;transition:box-shadow .2s,outline .2s ease;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;z-index:1}.btn-mktg:before{background:linear-gradient(180deg,#ffffff26,#fff0)!important;background-blend-mode:normal;border-radius:inherit;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s;z-index:-1}.btn-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover)!important;text-decoration:none}.btn-mktg.focus:before,.btn-mktg:focus-visible:before,.btn-mktg:focus:before,.btn-mktg:hover:before{opacity:1}.btn-mktg:focus{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-mktg:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-mktg:active:before{opacity:.5!important}.btn-mktg.disabled,.btn-mktg[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn-muted-mktg{background:none!important;box-shadow:var(--color-mktg-btn-shadow-outline);color:var(--color-fg-default)!important}.btn-muted-mktg:before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-muted-mktg:active{box-shadow:var(--color-fg-default) 0 0 0 3px inset!important}.btn-muted-mktg:disabled{box-shadow:var(--color-fg-subtle) 0 0 0 1px inset!important}.btn-subtle-mktg{box-shadow:none!important;color:var(--color-fg-default)!important}.btn-subtle-mktg,.btn-subtle-mktg:before{background:none!important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-signup-mktg{background:linear-gradient(180deg,#34b75926,#2ea44f00),#2ea44f!important;color:#fff}.btn-signup-mktg:before{background:linear-gradient(180deg,#34b75926,#2ea44f00)!important}.btn-signup-mktg:focus{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-signup-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-signup-mktg:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{font-size:1.25rem;padding:16px 30px 20px!important}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"alpha/button_marketing","selectors":[".btn-mktg",".btn-mktg:before",".btn-mktg:hover",".btn-mktg.focus:before",".btn-mktg:focus-visible:before",".btn-mktg:focus:before",".btn-mktg:hover:before",".btn-mktg:focus",".btn-mktg:focus:not(:focus-visible)",".btn-mktg:focus-visible",".btn-mktg:active:before",".btn-mktg.disabled",".btn-mktg[disabled]",".btn-muted-mktg",".btn-muted-mktg:before",".btn-muted-mktg:hover",".btn-muted-mktg:active",".btn-muted-mktg:disabled",".btn-subtle-mktg",".btn-subtle-mktg:before",".btn-subtle-mktg:hover",".btn-signup-mktg",".btn-signup-mktg:before",".btn-signup-mktg:focus",".btn-signup-mktg:focus:not(:focus-visible)",".btn-signup-mktg:focus-visible",".btn-small-mktg",".btn-large-mktg"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UAyBE,iCAA2B,CAA3B,yBAA2B,CAR3B,4FAEqC,CACrC,QAAS,CAGT,qBAAuB,CAXvB,iCAAkC,CATlC,oBAAqB,CAMrB,cAAe,CACf,gDAAkD,CAClD,aAAc,CALd,2BAA6B,CAL7B,iBAAkB,CAYlB,iBAAkB,CAWlB,0CAA8C,CAR9C,wBAAiB,CAAjB,gBAAiB,CADjB,qBAAsB,CADtB,kBAAmB,CAZnB,SAoFF,CA3DE,iBAUE,4DAAyG,CAIzG,4BAA6B,CAH7B,qBAAsB,CAPtB,QAAS,CAGT,UAAW,CAFX,MAAO,CAOP,SAAU,CAXV,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAWN,sBAAwB,CAPxB,UASF,CAEA,gBAEE,uDAAyD,CADzD,oBAEF,CAME,oGACE,SACF,CAIF,gBCxDA,eAAgB,CAFhB,wCAAgC,CAChC,kBDiEA,CAJE,oCAEE,eAAgB,CADhB,uBAEF,CAIF,wBCnEA,eAAgB,CAFhB,wCAAgC,CAChC,kBDsEA,CAGE,wBACE,oBACF,CAGF,uCAGE,cAAe,CACf,UAAY,CAFZ,mBAGF,CAGF,gBAEE,yBAA2B,CAC3B,+CAAgD,CAFhD,uCAuBF,CAnBE,uBACE,YACF,CAEA,sBACE,6DACF,CAEA,uBAGE,4DACF,CAEA,yBAGE,2DACF,CAGF,iBAGE,yBAA2B,CAF3B,uCAWF,CAPE,yCAHA,yBAKA,CAEA,uBACE,6DACF,CAGF,iBAME,wEAAuH,CAHvH,UA0BF,CArBE,wBAGE,gEACF,CAGA,uBC5IA,eAAgB,CAFhB,wCAAgC,CAChC,kBDqJA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BCvJA,eAAgB,CAFhB,wCAAgC,CAChC,kBD0JA,CAKF,gBAGE,6BACF,CAEA,gBAME,iBAAkB,CAHlB,gCAIF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n position: relative;\n z-index: 1;\n display: inline-block;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.9rem 1.5rem 1.1rem;\n\n /* stylelint-disable-next-line primer/typography */\n font-size: 1rem;\n font-weight: var(--base-text-weight-semibold, 600);\n line-height: 1;\n color: var(--color-canvas-default);\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n var(--color-mktg-btn-bg) !important;\n border: 0;\n\n /* stylelint-disable-next-line primer/borders */\n border-radius: 0.375rem;\n transition: box-shadow 0.2s, outline 0.2s ease;\n appearance: none !important;\n\n &::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n content: '';\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.2s;\n background-blend-mode: normal;\n }\n\n &:hover {\n text-decoration: none;\n box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n }\n\n &:hover,\n &:focus,\n &:focus-visible,\n &.focus {\n &::before {\n opacity: 1;\n }\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutline 2px, var(--color-accent-fg);\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutline 2px, var(--color-accent-fg) ;\n }\n\n &:active {\n &::before {\n opacity: 0.5 !important;\n }\n }\n\n &.disabled,\n &[disabled] {\n pointer-events: none;\n cursor: default;\n opacity: 0.5;\n }\n}\n\n.btn-muted-mktg {\n color: var(--color-fg-default) !important;\n background: none !important;\n box-shadow: var(--color-mktg-btn-shadow-outline);\n\n &::before {\n display: none;\n }\n\n &:hover {\n box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n }\n\n &:active {\n\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;\n }\n\n &:disabled {\n\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;\n }\n}\n\n.btn-subtle-mktg {\n color: var(--color-fg-default) !important;\n background: none !important;\n box-shadow: none !important;\n\n &::before {\n background: none !important;\n }\n\n &:hover {\n box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n }\n}\n\n.btn-signup-mktg {\n\n /* stylelint-disable-next-line primer/colors */\n color: #fff;\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n &::before {\n\n /* stylelint-disable-next-line primer/colors */\n background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutline 2px, var(--color-accent-fg) ;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutline 2px, var(--color-accent-fg) ;\n }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n\n /* stylelint-disable-next-line primer/spacing */\n padding: 16px 30px 20px !important;\n\n /* stylelint-disable-next-line primer/typography */\n font-size: 1.25rem;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
.btn-mktg {
|
|
2
|
+
position: relative;
|
|
3
|
+
z-index: 1;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
|
|
6
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
7
|
+
padding: 0.9rem 1.5rem 1.1rem;
|
|
8
|
+
|
|
9
|
+
/* stylelint-disable-next-line primer/typography */
|
|
10
|
+
font-size: 1rem;
|
|
11
|
+
font-weight: var(--base-text-weight-semibold, 600);
|
|
12
|
+
line-height: 1;
|
|
13
|
+
color: var(--color-canvas-default);
|
|
14
|
+
text-align: center;
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
vertical-align: middle;
|
|
17
|
+
user-select: none;
|
|
18
|
+
background:
|
|
19
|
+
linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
|
|
20
|
+
var(--color-mktg-btn-bg) !important;
|
|
21
|
+
border: 0;
|
|
22
|
+
|
|
23
|
+
/* stylelint-disable-next-line primer/borders */
|
|
24
|
+
border-radius: 0.375rem;
|
|
25
|
+
transition: box-shadow 0.2s, outline 0.2s ease;
|
|
26
|
+
appearance: none !important;
|
|
27
|
+
|
|
28
|
+
&::before {
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 0;
|
|
31
|
+
right: 0;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
z-index: -1;
|
|
35
|
+
content: '';
|
|
36
|
+
|
|
37
|
+
/* stylelint-disable-next-line primer/colors */
|
|
38
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
|
|
39
|
+
border-radius: inherit;
|
|
40
|
+
opacity: 0;
|
|
41
|
+
transition: opacity 0.2s;
|
|
42
|
+
background-blend-mode: normal;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:hover {
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
box-shadow: var(--color-mktg-btn-shadow-hover) !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:hover,
|
|
51
|
+
&:focus,
|
|
52
|
+
&:focus-visible,
|
|
53
|
+
&.focus {
|
|
54
|
+
&::before {
|
|
55
|
+
opacity: 1;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* fallback :focus state */
|
|
60
|
+
&:focus {
|
|
61
|
+
@mixin focusOutline 2px, var(--color-accent-fg);
|
|
62
|
+
|
|
63
|
+
/* remove fallback :focus if :focus-visible is supported */
|
|
64
|
+
&:not(:focus-visible) {
|
|
65
|
+
outline: solid 1px transparent;
|
|
66
|
+
box-shadow: none;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* default focus state */
|
|
71
|
+
&:focus-visible {
|
|
72
|
+
@mixin focusOutline 2px, var(--color-accent-fg) ;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:active {
|
|
76
|
+
&::before {
|
|
77
|
+
opacity: 0.5 !important;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.disabled,
|
|
82
|
+
&[disabled] {
|
|
83
|
+
pointer-events: none;
|
|
84
|
+
cursor: default;
|
|
85
|
+
opacity: 0.5;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.btn-muted-mktg {
|
|
90
|
+
color: var(--color-fg-default) !important;
|
|
91
|
+
background: none !important;
|
|
92
|
+
box-shadow: var(--color-mktg-btn-shadow-outline);
|
|
93
|
+
|
|
94
|
+
&::before {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:hover {
|
|
99
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:active {
|
|
103
|
+
|
|
104
|
+
/* stylelint-disable-next-line primer/box-shadow */
|
|
105
|
+
box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&:disabled {
|
|
109
|
+
|
|
110
|
+
/* stylelint-disable-next-line primer/box-shadow */
|
|
111
|
+
box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.btn-subtle-mktg {
|
|
116
|
+
color: var(--color-fg-default) !important;
|
|
117
|
+
background: none !important;
|
|
118
|
+
box-shadow: none !important;
|
|
119
|
+
|
|
120
|
+
&::before {
|
|
121
|
+
background: none !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&:hover {
|
|
125
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.btn-signup-mktg {
|
|
130
|
+
|
|
131
|
+
/* stylelint-disable-next-line primer/colors */
|
|
132
|
+
color: #fff;
|
|
133
|
+
|
|
134
|
+
/* stylelint-disable-next-line primer/colors */
|
|
135
|
+
background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
|
|
136
|
+
|
|
137
|
+
&::before {
|
|
138
|
+
|
|
139
|
+
/* stylelint-disable-next-line primer/colors */
|
|
140
|
+
background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* fallback :focus state */
|
|
144
|
+
&:focus {
|
|
145
|
+
@mixin focusOutline 2px, var(--color-accent-fg) ;
|
|
146
|
+
|
|
147
|
+
/* remove fallback :focus if :focus-visible is supported */
|
|
148
|
+
&:not(:focus-visible) {
|
|
149
|
+
outline: solid 1px transparent;
|
|
150
|
+
box-shadow: none;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* default focus state */
|
|
155
|
+
&:focus-visible {
|
|
156
|
+
@mixin focusOutline 2px, var(--color-accent-fg) ;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Size modifiers */
|
|
161
|
+
|
|
162
|
+
.btn-small-mktg {
|
|
163
|
+
|
|
164
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
165
|
+
padding: 0.625rem 1rem 0.8125rem;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.btn-large-mktg {
|
|
169
|
+
|
|
170
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
171
|
+
padding: 16px 30px 20px !important;
|
|
172
|
+
|
|
173
|
+
/* stylelint-disable-next-line primer/typography */
|
|
174
|
+
font-size: 1.25rem;
|
|
175
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Primer
|
|
4
|
+
module Alpha
|
|
5
|
+
class Dropdown
|
|
6
|
+
# This component is part of `Dropdown` and should not be
|
|
7
|
+
# used as a standalone component.
|
|
8
|
+
class Menu < Primer::Component
|
|
9
|
+
status :alpha
|
|
10
|
+
|
|
11
|
+
AS_DEFAULT = :default
|
|
12
|
+
AS_OPTIONS = [AS_DEFAULT, :list].freeze
|
|
13
|
+
|
|
14
|
+
SCHEME_DEFAULT = :default
|
|
15
|
+
SCHEME_MAPPINGS = {
|
|
16
|
+
SCHEME_DEFAULT => "",
|
|
17
|
+
:dark => "dropdown-menu-dark"
|
|
18
|
+
}.freeze
|
|
19
|
+
|
|
20
|
+
DIRECTION_DEFAULT = :se
|
|
21
|
+
DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
|
|
22
|
+
|
|
23
|
+
# @param tag [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::Item::TAG_OPTIONS) %>.
|
|
24
|
+
# @param divider [Boolean] Whether the item is a divider without any function.
|
|
25
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
26
|
+
renders_many :items, lambda { |divider: false, **system_arguments|
|
|
27
|
+
Primer::Alpha::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
# @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
|
|
31
|
+
# @param direction [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>.
|
|
32
|
+
# @param header [String] Header to be displayed above the menu.
|
|
33
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
34
|
+
def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
|
|
35
|
+
@header = header
|
|
36
|
+
@direction = direction
|
|
37
|
+
@as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
|
|
38
|
+
|
|
39
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
|
40
|
+
@system_arguments[:tag] = "details-menu"
|
|
41
|
+
@system_arguments[:role] = "menu"
|
|
42
|
+
|
|
43
|
+
@system_arguments[:classes] = class_names(
|
|
44
|
+
@system_arguments[:classes],
|
|
45
|
+
"dropdown-menu",
|
|
46
|
+
"dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
|
|
47
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
|
|
48
|
+
)
|
|
49
|
+
end
|
|
50
|
+
|
|
51
|
+
private
|
|
52
|
+
|
|
53
|
+
def list?
|
|
54
|
+
@as == :list
|
|
55
|
+
end
|
|
56
|
+
|
|
57
|
+
# Items to be rendered in the `Dropdown` menu.
|
|
58
|
+
class Item < Primer::Component
|
|
59
|
+
status :alpha
|
|
60
|
+
|
|
61
|
+
TAG_DEFAULT = :a
|
|
62
|
+
BUTTON_TAGS = [:button, :summary].freeze
|
|
63
|
+
TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
|
|
64
|
+
|
|
65
|
+
def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
|
|
66
|
+
@divider = divider
|
|
67
|
+
@as = as
|
|
68
|
+
|
|
69
|
+
@system_arguments = system_arguments
|
|
70
|
+
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
|
|
71
|
+
@system_arguments[:tag] = :li if list? && divider?
|
|
72
|
+
@system_arguments[:role] ||= :menuitem
|
|
73
|
+
@system_arguments[:role] = :separator if divider
|
|
74
|
+
@system_arguments[:classes] = class_names(
|
|
75
|
+
@system_arguments[:classes],
|
|
76
|
+
"dropdown-item" => !divider,
|
|
77
|
+
"dropdown-divider" => divider
|
|
78
|
+
)
|
|
79
|
+
end
|
|
80
|
+
|
|
81
|
+
def call
|
|
82
|
+
component = if BUTTON_TAGS.include?(@system_arguments[:tag])
|
|
83
|
+
Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
|
|
84
|
+
else
|
|
85
|
+
Primer::BaseComponent.new(**@system_arguments)
|
|
86
|
+
end
|
|
87
|
+
|
|
88
|
+
# divider has no content
|
|
89
|
+
render(component) if divider?
|
|
90
|
+
|
|
91
|
+
render(component) { content }
|
|
92
|
+
end
|
|
93
|
+
|
|
94
|
+
def divider?
|
|
95
|
+
@divider
|
|
96
|
+
end
|
|
97
|
+
|
|
98
|
+
def list?
|
|
99
|
+
@as == :list
|
|
100
|
+
end
|
|
101
|
+
end
|
|
102
|
+
end
|
|
103
|
+
end
|
|
104
|
+
end
|
|
105
|
+
end
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--primer-borderWidth-thicker,4px) var(--primer-borderWidth-thicker,4px) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);box-shadow:var(--color-shadow-large);left:0;list-style:none;margin-top:2px;padding-bottom:var(--primer-control-small-paddingBlock,4px);padding-top:var(--primer-control-small-paddingBlock,4px);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px);text-overflow:inherit}.dropdown-item{color:var(--color-fg-default);display:block;overflow:hidden;padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--color-accent-emphasis);color:var(--color-fg-on-emphasis);text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-],.dropdown-item:hover>.Label{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);display:block;height:0;margin:var(--primer-stack-gap-condensed,8px) 0}.dropdown-header{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);padding:var(--primer-control-small-paddingBlock,4px) var(--primer-control-medium-paddingInline-spacious,16px)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--color-border-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--color-canvas-overlay);left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--color-border-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--color-canvas-overlay);left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--color-border-default);bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--color-canvas-overlay);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"name":"alpha/dropdown","selectors":[".dropdown",".dropdown-caret",".dropdown-menu",".dropdown-menu:after",".dropdown-menu:before",".dropdown-menu>ul",".dropdown-menu-no-overflow",".dropdown-menu-no-overflow .dropdown-item",".dropdown-item",".dropdown-item:hover",".dropdown-item:hover>.octicon",".dropdown-item:hover [class*=color-fg-]",".dropdown-item:hover>.Label",".dropdown-item.btn-link",".dropdown-signout",".dropdown-divider",".dropdown-header",".dropdown-item[aria-checked=false] .octicon-check",".dropdown-menu-w",".dropdown-menu-w:before",".dropdown-menu-w:after",".dropdown-menu-e",".dropdown-menu-e:before",".dropdown-menu-e:after",".dropdown-menu-ne",".dropdown-menu-ne:after",".dropdown-menu-ne:before",".dropdown-menu-s",".dropdown-menu-s:before",".dropdown-menu-s:after",".dropdown-menu-sw",".dropdown-menu-sw:before",".dropdown-menu-sw:after",".dropdown-menu-se:before",".dropdown-menu-se:after"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,0FAA6F,CAF7F,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,4CAA6C,CAE7C,2EAA6E,CAC7E,mDAAqD,CACrD,oCAAqC,CAXrC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,2DAA6D,CAD7D,wDAA0D,CAL1D,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAAgD,CAAhD,mDACF,CAGA,qBAEE,sBAAgD,CAAhD,mDACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,6GAAgH,CAEhH,qBACF,CAIF,eAIE,6BAA8B,CAH9B,aAAc,CAEd,eAAgB,CADhB,mNAAwN,CAGxN,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,
|
|
1
|
+
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,0FAA6F,CAF7F,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,4CAA6C,CAE7C,2EAA6E,CAC7E,mDAAqD,CACrD,oCAAqC,CAXrC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,2DAA6D,CAD7D,wDAA0D,CAL1D,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAAgD,CAAhD,mDACF,CAGA,qBAEE,sBAAgD,CAAhD,mDACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,6GAAgH,CAEhH,qBACF,CAIF,eAIE,6BAA8B,CAH9B,aAAc,CAEd,eAAgB,CADhB,mNAAwN,CAGxN,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,6CAA8C,CAF9C,iCAAkC,CAClC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,+EAAiF,CAHjF,aAAc,CACd,QAAS,CACT,8CAEF,CAEA,iBAGE,2BAA4B,CAD5B,iDAAmD,CADnD,6GAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,6CAA8C,CAF9C,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,8CAA+C,CAF/C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,gDAAiD,CAFjD,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--primer-borderWidth-thicker, 4px) var(--primer-borderWidth-thicker, 4px) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--primer-control-small-paddingBlock, 4px);\n padding-bottom: var(--primer-control-small-paddingBlock, 4px);\n margin-top: 2px;\n list-style: none;\n background-color: var(--color-canvas-overlay);\n background-clip: padding-box;\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-large);\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n border: 8px solid transparent;\n border-bottom-color: var(--color-border-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n border: 7px solid transparent;\n border-bottom-color: var(--color-canvas-overlay);\n }\n\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);\n overflow: hidden;\n color: var(--color-fg-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--color-fg-on-emphasis);\n text-decoration: none;\n background-color: var(--color-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--primer-stack-gap-condensed, 8px) 0;\n border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n}\n\n.dropdown-header {\n padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);\n font-size: var(--primer-text-body-size-small, 12px);\n color: var(--color-fg-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: 8px;\n\n &::before {\n top: 10px;\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--color-border-default);\n }\n\n &::after {\n top: 11px;\n right: -14px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--color-canvas-overlay);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: 8px;\n\n &::before {\n top: 10px;\n left: -16px;\n border-color: transparent;\n border-right-color: var(--color-border-default);\n }\n\n &::after {\n top: 11px;\n left: -14px;\n border-color: transparent;\n border-right-color: var(--color-canvas-overlay);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: 3px;\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n bottom: -8px;\n left: 9px;\n border-top: 8px solid var(--color-border-default);\n border-right: 8px solid transparent;\n border-bottom: 0;\n border-left: 8px solid transparent;\n }\n\n &::after {\n bottom: -7px;\n left: 10px;\n border-top: 7px solid var(--color-canvas-overlay);\n border-right: 7px solid transparent;\n border-bottom: 0;\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n top: -16px;\n right: 9px;\n left: auto;\n }\n\n &::after {\n top: -14px;\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n top: -16px;\n left: 9px;\n }\n\n &::after {\n top: -14px;\n left: 10px;\n }\n}\n"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|