primer_view_components 0.0.110 → 0.0.111

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +20 -0
  3. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  4. data/app/assets/styles/primer_view_components.css +1 -1
  5. data/app/assets/styles/primer_view_components.css.map +1 -1
  6. data/app/components/primer/alpha/action_list/item.rb +2 -2
  7. data/app/components/primer/alpha/x_banner.d.ts +2 -1
  8. data/app/components/primer/alpha/x_banner.js +0 -1
  9. data/app/components/primer/alpha/x_banner.ts +1 -1
  10. data/app/components/primer/beta/avatar.css +1 -0
  11. data/app/components/primer/beta/avatar.css.json +1 -0
  12. data/app/components/primer/beta/avatar.css.map +1 -0
  13. data/app/components/primer/beta/avatar.pcss +73 -0
  14. data/app/components/primer/beta/avatar_stack.css +1 -0
  15. data/app/components/primer/beta/avatar_stack.css.json +1 -0
  16. data/app/components/primer/beta/avatar_stack.css.map +1 -0
  17. data/app/components/primer/beta/avatar_stack.pcss +141 -0
  18. data/app/components/primer/beta/button.rb +1 -1
  19. data/app/components/primer/beta/flash.css +1 -0
  20. data/app/components/primer/beta/flash.css.json +1 -0
  21. data/app/components/primer/beta/flash.css.map +1 -0
  22. data/app/components/primer/beta/flash.pcss +143 -0
  23. data/app/components/primer/dropdown.css +1 -0
  24. data/app/components/primer/dropdown.css.json +1 -0
  25. data/app/components/primer/dropdown.css.map +1 -0
  26. data/app/components/primer/dropdown.pcss +260 -0
  27. data/app/components/primer/popover_component.css +1 -0
  28. data/app/components/primer/popover_component.css.json +1 -0
  29. data/app/components/primer/popover_component.css.map +1 -0
  30. data/app/components/primer/popover_component.pcss +225 -0
  31. data/app/components/primer/primer.pcss +6 -0
  32. data/app/components/primer/timeline_item_component.css +1 -0
  33. data/app/components/primer/timeline_item_component.css.json +1 -0
  34. data/app/components/primer/timeline_item_component.css.map +1 -0
  35. data/app/components/primer/timeline_item_component.pcss +93 -0
  36. data/lib/primer/deprecations.rb +0 -1
  37. data/lib/primer/view_components/version.rb +1 -1
  38. data/previews/primer/alpha/banner_preview.rb +1 -1
  39. data/previews/primer/beta/avatar_preview.rb +61 -5
  40. data/previews/primer/beta/avatar_stack_preview.rb +54 -12
  41. data/previews/primer/beta/blankslate_preview.rb +29 -5
  42. data/previews/primer/beta/flash_preview.rb +45 -8
  43. data/previews/primer/beta/label_preview.rb +86 -8
  44. data/previews/primer/dropdown_preview.rb +161 -10
  45. data/static/audited_at.json +0 -1
  46. data/static/constants.json +0 -2
  47. data/static/statuses.json +0 -1
  48. metadata +26 -3
  49. data/app/components/primer/counter_component.rb +0 -7
data/app/components/primer/beta/avatar_stack.pcss ADDED
@@ -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
+ }
data/app/components/primer/beta/button.rb CHANGED
@@ -58,7 +58,7 @@ module Primer
58
58
  renders_one :trailing_visual, types: {
59
59
  icon: Primer::OcticonComponent,
60
60
  label: Primer::Beta::Label,
61
- counter: Primer::CounterComponent
61
+ counter: Primer::Beta::Counter
62
62
  }
63
63
 
64
64
  # Trailing action appears to the right of the trailing visual.
data/app/components/primer/beta/flash.css ADDED
@@ -0,0 +1 @@
1
+ .flash:not(.Banner){background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border-color:var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);border-style:solid;border-width:var(--primer-borderWidth-thin,1px);color:var(--color-fg-default);padding:var(--base-size-20,20px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.flash:not(.Banner) .octicon{color:var(--color-accent-fg);margin-right:var(--base-size-12,12px)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--primer-stack-gap-spacious,24px)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--primer-control-medium-paddingInline-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-spacious,16px);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--primer-stack-gap-spacious,24px);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-small-gap,4px)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.flash-warn:not(.Banner) .octicon{color:var(--color-attention-fg)}.flash-error:not(.Banner){background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.flash-error:not(.Banner) .octicon{color:var(--color-danger-fg)}.flash-success:not(.Banner){background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.flash-success:not(.Banner) .octicon{color:var(--color-success-fg)}.flash-full:not(.Banner){border-radius:0;border-width:var(--primer-borderWidth-thin,1px) 0;margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--color-canvas-default)}.warning{background-color:var(--color-attention-subtle);font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
data/app/components/primer/beta/flash.css.json ADDED
@@ -0,0 +1 @@
1
+ {"name":"beta/flash","selectors":[".flash:not(.Banner)",".flash:not(.Banner) .octicon",".flash:not(.Banner) p:last-child",".flash-messages",".flash-close:not(.Banner-close)",".flash-close:not(.Banner-close):hover",".flash-close:not(.Banner-close):active",".flash-close:not(.Banner-close) .octicon",".flash-action:not(.Banner-actions)",".flash-action.btn:not(.Banner-actions) .octicon",".flash-action.btn-primary:not(.Banner-actions)",".flash-action.btn-primary:not(.Banner-actions) .octicon",".flash-warn:not(.Banner)",".flash-warn:not(.Banner) .octicon",".flash-error:not(.Banner)",".flash-error:not(.Banner) .octicon",".flash-success:not(.Banner)",".flash-success:not(.Banner) .octicon",".flash-full:not(.Banner)",".flash-banner",".flash-full",".warning"]}
data/app/components/primer/beta/flash.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uFAAyF,CACzF,sCAAuC,CALvC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAAiD,CAIjD,6BAA8B,CAN9B,yFAA4F,CAD5F,iBAmBF,CARE,6BACE,4BAA6B,CAC7B,qCACF,CAEA,iCACE,eACF,CAIF,gBACE,mDACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,yEAA4E,CAD5E,gEAAkE,CAElE,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,iDAAmD,CADnD,eAgBF,CAZE,gDAEE,2BAA4B,CAD5B,gDAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAOJ,yBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,kCACE,+BACF,CAGF,0BAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,mCACE,4BACF,CAGF,4BAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,qCACE,6BACF,CAKF,yBAGE,eAAgB,CADhB,iDAAmD,CADnD,uDAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,4CACF,CAGA,SAIE,8CAA+C,CAD/C,gDAAkD,CADlD,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20, 20px) var(--primer-control-medium-paddingInline-spacious, 16px);\n border-style: solid;\n border-width: var(--primer-borderWidth-thin, 1px);\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* Default color */\n color: var(--color-fg-default);\n background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n border-color: var(--color-accent-muted);\n\n & .octicon {\n color: var(--color-accent-fg);\n margin-right: var(--base-size-12, 12px);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--primer-stack-gap-spacious, 24px);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n padding: var(--primer-control-medium-paddingInline-spacious, 16px);\n margin: calc(var(--primer-control-medium-paddingInline-spacious, 16px) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--primer-stack-gap-spacious, 24px);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--primer-control-small-gap, 4px);\n color: var(--color-fg-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\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 & .octicon {\n color: var(--color-attention-fg);\n }\n}\n\n.flash-error:not(.Banner) {\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 & .octicon {\n color: var(--color-danger-fg);\n }\n}\n\n.flash-success:not(.Banner) {\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 & .octicon {\n color: var(--color-success-fg);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);\n border-width: var(--primer-borderWidth-thin, 1px) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--color-canvas-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold, 600);\n background-color: var(--color-attention-subtle);\n}\n"]}
data/app/components/primer/beta/flash.pcss ADDED
@@ -0,0 +1,143 @@
1
+ /* flash */
2
+
3
+ /* Default flash */
4
+ .flash:not(.Banner) {
5
+ position: relative;
6
+ padding: var(--base-size-20, 20px) var(--primer-control-medium-paddingInline-spacious, 16px);
7
+ border-style: solid;
8
+ border-width: var(--primer-borderWidth-thin, 1px);
9
+ border-radius: var(--primer-borderRadius-medium, 6px);
10
+
11
+ /* Default color */
12
+ color: var(--color-fg-default);
13
+ background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
14
+ border-color: var(--color-accent-muted);
15
+
16
+ & .octicon {
17
+ color: var(--color-accent-fg);
18
+ margin-right: var(--base-size-12, 12px);
19
+ }
20
+
21
+ & p:last-child {
22
+ margin-bottom: 0;
23
+ }
24
+ }
25
+
26
+ /* Contain the flash messages */
27
+ .flash-messages {
28
+ margin-bottom: var(--primer-stack-gap-spacious, 24px);
29
+ }
30
+
31
+ /* Close button */
32
+ .flash-close:not(.Banner-close) {
33
+ float: right;
34
+ padding: var(--primer-control-medium-paddingInline-spacious, 16px);
35
+ margin: calc(var(--primer-control-medium-paddingInline-spacious, 16px) * -1);
36
+ text-align: center;
37
+ cursor: pointer;
38
+
39
+ /* Undo `<button>` styles */
40
+ background: none;
41
+ border: 0;
42
+ appearance: none;
43
+
44
+ &:hover {
45
+ opacity: 0.7;
46
+ }
47
+
48
+ &:active {
49
+ opacity: 0.5;
50
+ }
51
+
52
+ & .octicon {
53
+ margin-right: 0;
54
+ }
55
+ }
56
+
57
+ /* Action button */
58
+ .flash-action:not(.Banner-actions) {
59
+ float: right;
60
+ margin-top: -3px;
61
+ margin-left: var(--primer-stack-gap-spacious, 24px);
62
+ background-clip: padding-box;
63
+
64
+ &.btn .octicon {
65
+ margin-right: var(--primer-control-small-gap, 4px);
66
+ color: var(--color-fg-muted);
67
+ }
68
+
69
+ &.btn-primary {
70
+ background-clip: border-box;
71
+
72
+ & .octicon {
73
+ color: inherit;
74
+ }
75
+ }
76
+ }
77
+
78
+
79
+ /* Color variations */
80
+
81
+ .flash-warn:not(.Banner) {
82
+ color: var(--color-fg-default);
83
+ background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
84
+ border-color: var(--color-attention-muted);
85
+
86
+ & .octicon {
87
+ color: var(--color-attention-fg);
88
+ }
89
+ }
90
+
91
+ .flash-error:not(.Banner) {
92
+ color: var(--color-fg-default);
93
+ background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
94
+ border-color: var(--color-danger-muted);
95
+
96
+ & .octicon {
97
+ color: var(--color-danger-fg);
98
+ }
99
+ }
100
+
101
+ .flash-success:not(.Banner) {
102
+ color: var(--color-fg-default);
103
+ background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
104
+ border-color: var(--color-success-muted);
105
+
106
+ & .octicon {
107
+ color: var(--color-success-fg);
108
+ }
109
+ }
110
+
111
+ /* Layout variations */
112
+
113
+ .flash-full:not(.Banner) {
114
+ margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
115
+ border-width: var(--primer-borderWidth-thin, 1px) 0;
116
+ border-radius: 0;
117
+ }
118
+
119
+ /* A banner rendered at the top of the page. */
120
+ .flash-banner {
121
+ position: fixed;
122
+ top: 0;
123
+ z-index: 90;
124
+ width: 100%;
125
+ border-top: 0;
126
+ border-right: 0;
127
+ border-left: 0;
128
+ border-radius: 0;
129
+ }
130
+
131
+ /* Makes sure the background is opaque to cover any content underneath */
132
+ .flash-full,
133
+ .flash-banner {
134
+ background-color: var(--color-canvas-default);
135
+ }
136
+
137
+ /* FIXME deprecate this */
138
+ .warning {
139
+ padding: 0.5em;
140
+ margin-bottom: 0.8em;
141
+ font-weight: var(--base-text-weight-semibold, 600);
142
+ background-color: var(--color-attention-subtle);
143
+ }
data/app/components/primer/dropdown.css ADDED
@@ -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-text-],.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}
data/app/components/primer/dropdown.css.json ADDED
@@ -0,0 +1 @@
1
+ {"name":"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-text-]",".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"]}
data/app/components/primer/dropdown.css.map ADDED
@@ -0,0 +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,sEACE,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-text-'] {\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"]}
data/app/components/primer/dropdown.pcss ADDED
@@ -0,0 +1,260 @@
1
+ /* dropdown */
2
+
3
+ .dropdown {
4
+ position: relative;
5
+ }
6
+
7
+ .dropdown-caret {
8
+ display: inline-block;
9
+ width: 0;
10
+ height: 0;
11
+ vertical-align: middle;
12
+ content: '';
13
+ border-style: solid;
14
+ border-width: var(--primer-borderWidth-thicker, 4px) var(--primer-borderWidth-thicker, 4px) 0;
15
+ border-right-color: transparent;
16
+ border-bottom-color: transparent;
17
+ border-left-color: transparent;
18
+ }
19
+
20
+ /* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
21
+ ** way the menu should render from the element triggering it. */
22
+
23
+ .dropdown-menu {
24
+ position: absolute;
25
+ top: 100%;
26
+ left: 0;
27
+ z-index: 100;
28
+ width: 160px;
29
+ padding-top: var(--primer-control-small-paddingBlock, 4px);
30
+ padding-bottom: var(--primer-control-small-paddingBlock, 4px);
31
+ margin-top: 2px;
32
+ list-style: none;
33
+ background-color: var(--color-canvas-overlay);
34
+ background-clip: padding-box;
35
+ border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
36
+ border-radius: var(--primer-borderRadius-medium, 6px);
37
+ box-shadow: var(--color-shadow-large);
38
+
39
+ &::before,
40
+ &::after {
41
+ position: absolute;
42
+ display: inline-block;
43
+ content: '';
44
+ }
45
+
46
+ /* caret border */
47
+ &::before {
48
+ border: 8px solid transparent;
49
+ border-bottom-color: var(--color-border-default);
50
+ }
51
+
52
+ /* caret background (should match dropdown background) */
53
+ &::after {
54
+ border: 7px solid transparent;
55
+ border-bottom-color: var(--color-canvas-overlay);
56
+ }
57
+
58
+ & > ul {
59
+ list-style: none;
60
+ }
61
+ }
62
+
63
+ .dropdown-menu-no-overflow {
64
+ width: auto;
65
+
66
+ & .dropdown-item {
67
+ padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
68
+ overflow: visible;
69
+ text-overflow: inherit;
70
+ }
71
+ }
72
+
73
+ /* Dropdown items (can be links or buttons) */
74
+ .dropdown-item {
75
+ display: block;
76
+ 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);
77
+ overflow: hidden;
78
+ color: var(--color-fg-default);
79
+ text-overflow: ellipsis;
80
+ white-space: nowrap;
81
+
82
+ &:hover {
83
+ color: var(--color-fg-on-emphasis);
84
+ text-decoration: none;
85
+ background-color: var(--color-accent-emphasis);
86
+
87
+ & > .octicon {
88
+ color: inherit;
89
+ opacity: 1;
90
+ }
91
+
92
+ & [class*='color-text-'] {
93
+ color: inherit !important;
94
+ }
95
+
96
+ & > .Label {
97
+ color: inherit !important;
98
+ border-color: currentcolor;
99
+ }
100
+ }
101
+
102
+ &.btn-link {
103
+ width: 100%;
104
+ text-align: left;
105
+ }
106
+ }
107
+
108
+ .dropdown-signout {
109
+ width: 100%;
110
+ text-align: left;
111
+ background: none;
112
+ border: 0;
113
+ }
114
+
115
+ .dropdown-divider {
116
+ display: block;
117
+ height: 0;
118
+ margin: var(--primer-stack-gap-condensed, 8px) 0;
119
+ border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
120
+ }
121
+
122
+ .dropdown-header {
123
+ padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
124
+ font-size: var(--primer-text-body-size-small, 12px);
125
+ color: var(--color-fg-muted);
126
+ }
127
+
128
+ .dropdown-item[aria-checked='false'] .octicon-check {
129
+ display: none;
130
+ }
131
+
132
+ /* Directional classes
133
+ **
134
+ ** Move the menu and the caret attached to it. Requires at least one of these on
135
+ ** the `.dropdown-menu` element. */
136
+
137
+ .dropdown-menu-w {
138
+ top: 0;
139
+ right: 100%;
140
+ left: auto;
141
+ width: auto;
142
+ margin-top: 0;
143
+ margin-right: 8px;
144
+
145
+ &::before {
146
+ top: 10px;
147
+ right: -16px;
148
+ left: auto;
149
+ border-color: transparent;
150
+ border-left-color: var(--color-border-default);
151
+ }
152
+
153
+ &::after {
154
+ top: 11px;
155
+ right: -14px;
156
+ left: auto;
157
+ border-color: transparent;
158
+ border-left-color: var(--color-canvas-overlay);
159
+ }
160
+ }
161
+
162
+ .dropdown-menu-e {
163
+ top: 0;
164
+ left: 100%;
165
+ width: auto;
166
+ margin-top: 0;
167
+ margin-left: 8px;
168
+
169
+ &::before {
170
+ top: 10px;
171
+ left: -16px;
172
+ border-color: transparent;
173
+ border-right-color: var(--color-border-default);
174
+ }
175
+
176
+ &::after {
177
+ top: 11px;
178
+ left: -14px;
179
+ border-color: transparent;
180
+ border-right-color: var(--color-canvas-overlay);
181
+ }
182
+ }
183
+
184
+ .dropdown-menu-ne {
185
+ top: auto;
186
+ bottom: 100%;
187
+ left: 0;
188
+ margin-bottom: 3px;
189
+
190
+ &::before,
191
+ &::after {
192
+ top: auto;
193
+ right: auto;
194
+ }
195
+
196
+ &::before {
197
+ bottom: -8px;
198
+ left: 9px;
199
+ border-top: 8px solid var(--color-border-default);
200
+ border-right: 8px solid transparent;
201
+ border-bottom: 0;
202
+ border-left: 8px solid transparent;
203
+ }
204
+
205
+ &::after {
206
+ bottom: -7px;
207
+ left: 10px;
208
+ border-top: 7px solid var(--color-canvas-overlay);
209
+ border-right: 7px solid transparent;
210
+ border-bottom: 0;
211
+ border-left: 7px solid transparent;
212
+ }
213
+ }
214
+
215
+ .dropdown-menu-s {
216
+ right: 50%;
217
+ left: auto;
218
+ transform: translateX(50%);
219
+
220
+ &::before {
221
+ top: -16px;
222
+ right: 50%;
223
+ transform: translateX(50%);
224
+ }
225
+
226
+ &::after {
227
+ top: -14px;
228
+ right: 50%;
229
+ transform: translateX(50%);
230
+ }
231
+ }
232
+
233
+ .dropdown-menu-sw {
234
+ right: 0;
235
+ left: auto;
236
+
237
+ &::before {
238
+ top: -16px;
239
+ right: 9px;
240
+ left: auto;
241
+ }
242
+
243
+ &::after {
244
+ top: -14px;
245
+ right: 10px;
246
+ left: auto;
247
+ }
248
+ }
249
+
250
+ .dropdown-menu-se {
251
+ &::before {
252
+ top: -16px;
253
+ left: 9px;
254
+ }
255
+
256
+ &::after {
257
+ top: -14px;
258
+ left: 10px;
259
+ }
260
+ }
data/app/components/primer/popover_component.css ADDED
@@ -0,0 +1 @@
1
+ .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--color-border-default);bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--color-canvas-overlay);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--color-border-default);right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--color-canvas-overlay);right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--color-border-default);left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--color-canvas-overlay);left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--primer-stack-gap-condensed,8px);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--primer-control-medium-paddingInline-normal,12px)!important}.Popover-message:after,.Popover-message:before{display:none}}
data/app/components/primer/popover_component.css.json ADDED
@@ -0,0 +1 @@
1
+ {"name":"popover_component","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".Popover-message--bottom-left:after",".Popover-message--bottom-left:before",".Popover-message--bottom-right:after",".Popover-message--bottom-right:before",".Popover-message--bottom:after",".Popover-message--bottom:before",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".Popover-message--left-bottom:after",".Popover-message--left-bottom:before",".Popover-message--left-top:after",".Popover-message--left-top:before",".Popover-message--left:after",".Popover-message--left:before",".Popover-message--right-bottom:after",".Popover-message--right-bottom:before",".Popover-message--right-top:after",".Popover-message--right-top:before",".Popover-message--right:after",".Popover-message--right:before",".Popover-message--large",".Popover-message>.btn-octicon"]}
data/app/components/primer/popover_component.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["popover_component.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,4CAA8C,CAJ9C,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,wEACF,CAGA,+CAEE,YACF,CACF","file":"popover_component.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--color-canvas-overlay);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--color-border-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--color-canvas-overlay);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--color-border-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--color-canvas-overlay);\n }\n}\n\n/* Top & Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top & Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- & Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--color-border-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--color-canvas-overlay);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--color-border-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--color-canvas-overlay);\n }\n}\n\n/* Right & Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right & Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--primer-stack-gap-condensed, 8px);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}