@primer/view-components 0.3.0-rc.d9da539f → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +4999 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_list.css +710 -1
- package/app/components/primer/alpha/action_list.css.json +77 -77
- package/app/components/primer/alpha/auto_complete.css +130 -1
- package/app/components/primer/alpha/auto_complete.css.json +4 -4
- package/app/components/primer/alpha/banner.css +131 -1
- package/app/components/primer/alpha/banner.css.json +2 -2
- package/app/components/primer/alpha/button_marketing.css +204 -1
- package/app/components/primer/alpha/button_marketing.css.json +9 -9
- package/app/components/primer/alpha/dialog.css +607 -1
- package/app/components/primer/alpha/dialog.css.json +10 -10
- package/app/components/primer/alpha/dropdown.css +265 -1
- package/app/components/primer/alpha/dropdown.css.json +19 -19
- package/app/components/primer/alpha/layout.css +398 -1
- package/app/components/primer/alpha/layout.css.json +16 -16
- package/app/components/primer/alpha/menu.css +117 -1
- package/app/components/primer/alpha/menu.css.json +7 -7
- package/app/components/primer/alpha/overlay.css +32 -1
- package/app/components/primer/alpha/overlay.css.json +3 -2
- package/app/components/primer/alpha/segmented_control.css +175 -1
- package/app/components/primer/alpha/segmented_control.css.json +7 -7
- package/app/components/primer/alpha/tab_nav.css +106 -1
- package/app/components/primer/alpha/tab_nav.css.json +6 -6
- package/app/components/primer/alpha/text_field.css +849 -1
- package/app/components/primer/alpha/text_field.css.json +45 -45
- package/app/components/primer/alpha/toggle_switch.css +228 -1
- package/app/components/primer/alpha/toggle_switch.css.json +10 -10
- package/app/components/primer/alpha/underline_nav.css +149 -1
- package/app/components/primer/alpha/underline_nav.css.json +8 -8
- package/app/components/primer/anchored_position.js +1 -3
- package/app/components/primer/beta/avatar.css +74 -1
- package/app/components/primer/beta/avatar_stack.css +138 -1
- package/app/components/primer/beta/avatar_stack.css.json +6 -6
- package/app/components/primer/beta/blankslate.css +90 -1
- package/app/components/primer/beta/border_box.css +279 -1
- package/app/components/primer/beta/border_box.css.json +4 -4
- package/app/components/primer/beta/breadcrumbs.css +27 -1
- package/app/components/primer/beta/breadcrumbs.css.json +3 -3
- package/app/components/primer/beta/button.css +385 -1
- package/app/components/primer/beta/button.css.json +16 -16
- package/app/components/primer/beta/button_group.css +23 -1
- package/app/components/primer/beta/button_group.css.json +5 -5
- package/app/components/primer/beta/counter.css +36 -1
- package/app/components/primer/beta/flash.css +150 -1
- package/app/components/primer/beta/label.css +105 -1
- package/app/components/primer/beta/label.css.json +4 -4
- package/app/components/primer/beta/link.css +62 -1
- package/app/components/primer/beta/link.css.json +3 -3
- package/app/components/primer/beta/popover.css +235 -1
- package/app/components/primer/beta/popover.css.json +29 -29
- package/app/components/primer/beta/progress_bar.css +26 -1
- package/app/components/primer/beta/progress_bar.css.json +1 -1
- package/app/components/primer/beta/state.css +50 -1
- package/app/components/primer/beta/state.css.json +1 -1
- package/app/components/primer/beta/subhead.css +54 -1
- package/app/components/primer/beta/subhead.css.json +1 -1
- package/app/components/primer/beta/timeline_item.css +95 -1
- package/app/components/primer/beta/timeline_item.css.json +1 -1
- package/app/components/primer/beta/truncate.css +37 -1
- package/app/components/primer/beta/truncate.css.json +6 -6
- package/app/components/primer/truncate.css +30 -1
- package/app/components/primer/truncate.css.json +4 -4
- package/package.json +1 -1
|
@@ -1 +1,175 @@
|
|
|
1
|
-
|
|
1
|
+
/* SegmentedControl */
|
|
2
|
+
|
|
3
|
+
.SegmentedControl {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
list-style: none;
|
|
6
|
+
background-color: var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));
|
|
7
|
+
border-radius: var(--borderRadius-medium,6px);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.SegmentedControl-item {
|
|
11
|
+
position: relative;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid transparent;
|
|
14
|
+
border-radius: var(--borderRadius-medium,6px);
|
|
15
|
+
padding: var(--control-xsmall-paddingInline-condensed,0.25rem);
|
|
16
|
+
|
|
17
|
+
/* Selected ---------------------------------------- */
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.SegmentedControl-item.SegmentedControl-item--selected {
|
|
21
|
+
background-color: var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));
|
|
22
|
+
border-color: var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.SegmentedControl-item.SegmentedControl-item--selected .Button {
|
|
26
|
+
font-weight: var(--base-text-weight-semibold,600);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.SegmentedControl-item.SegmentedControl-item--selected .Button:hover {
|
|
30
|
+
background-color: transparent;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.SegmentedControl-item.SegmentedControl-item--selected::before {
|
|
34
|
+
border-color: transparent !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before {
|
|
38
|
+
border-color: transparent;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
|
|
42
|
+
|
|
43
|
+
.SegmentedControl-item .Button-label[data-content]::before {
|
|
44
|
+
display: block;
|
|
45
|
+
height: 0;
|
|
46
|
+
font-weight: var(--base-text-weight-semibold,600);
|
|
47
|
+
visibility: hidden;
|
|
48
|
+
content: attr(data-content);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Separator lines */
|
|
52
|
+
|
|
53
|
+
.SegmentedControl-item:not(:first-child)::before {
|
|
54
|
+
position: absolute;
|
|
55
|
+
inset: 0 0 0 -1px;
|
|
56
|
+
margin-top: var(--control-medium-paddingBlock,calc((2rem - 1.25rem) / 2));
|
|
57
|
+
margin-bottom: var(--control-medium-paddingBlock,calc((2rem - 1.25rem) / 2));
|
|
58
|
+
content: '';
|
|
59
|
+
border-left: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Button ----------------------------------------- */
|
|
63
|
+
|
|
64
|
+
.SegmentedControl-item .Button {
|
|
65
|
+
border: 0;
|
|
66
|
+
font-weight: var(--base-text-weight-normal,400);
|
|
67
|
+
transition: none;
|
|
68
|
+
color: var(--control-fgColor-rest,var(--color-fg-default));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.SegmentedControl-item .Button:focus-visible {
|
|
72
|
+
outline-offset: calc(var(--control-xsmall-paddingInline-condensed,0.25rem) - var(--borderWidth-thin,max(1px, 0.0625rem)));
|
|
73
|
+
border-radius: calc(var(--borderRadius-medium,6px) - 5px);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.SegmentedControl-item .Button--small {
|
|
77
|
+
height: calc(
|
|
78
|
+
var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
|
|
79
|
+
);
|
|
80
|
+
padding: 0 calc(var(--control-small-paddingInline-condensed,0.5rem) - var(--control-xsmall-paddingInline-condensed,0.25rem));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.SegmentedControl-item .Button--small.Button--iconOnly {
|
|
84
|
+
width: calc(
|
|
85
|
+
var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.SegmentedControl-item .Button--small.Button--iconOnly::before {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 50%;
|
|
92
|
+
left: 50%;
|
|
93
|
+
width: 100%;
|
|
94
|
+
height: 100%;
|
|
95
|
+
min-height: var(--control-medium-size,2rem);
|
|
96
|
+
content: "";
|
|
97
|
+
transform: translateX(-50%) translateY(-50%);
|
|
98
|
+
min-width: var(--control-medium-size,2rem);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.SegmentedControl-item .Button--medium {
|
|
102
|
+
height: calc(
|
|
103
|
+
var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
|
|
104
|
+
);
|
|
105
|
+
padding: 0 calc(var(--control-medium-paddingInline-normal,0.75rem) - var(--control-xsmall-paddingInline-condensed,0.25rem));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.SegmentedControl-item .Button--medium.Button--iconOnly {
|
|
109
|
+
width: calc(
|
|
110
|
+
var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.SegmentedControl-item .Button--medium.Button--iconOnly::before {
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 50%;
|
|
117
|
+
left: 50%;
|
|
118
|
+
width: 100%;
|
|
119
|
+
height: 100%;
|
|
120
|
+
min-height: var(--control-medium-size,2rem);
|
|
121
|
+
content: "";
|
|
122
|
+
transform: translateX(-50%) translateY(-50%);
|
|
123
|
+
min-width: var(--control-medium-size,2rem);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.SegmentedControl-item .Button--large {
|
|
127
|
+
height: calc(
|
|
128
|
+
var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
|
|
129
|
+
);
|
|
130
|
+
padding: 0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,0.25rem));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.SegmentedControl-item .Button--large.Button--iconOnly {
|
|
134
|
+
width: calc(
|
|
135
|
+
var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,0.25rem) * 2 - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.SegmentedControl-item .Button--large.Button--iconOnly::before {
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: 50%;
|
|
142
|
+
left: 50%;
|
|
143
|
+
width: 100%;
|
|
144
|
+
height: 100%;
|
|
145
|
+
min-height: var(--control-large-size,2.5rem);
|
|
146
|
+
content: "";
|
|
147
|
+
transform: translateX(-50%) translateY(-50%);
|
|
148
|
+
min-width: var(--control-large-size,2.5rem);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.SegmentedControl-item .Button--iconOnly {
|
|
152
|
+
padding: initial;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
|
|
156
|
+
color: var(--control-fgColor-rest,var(--color-fg-default));
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* fullWidth */
|
|
160
|
+
|
|
161
|
+
.SegmentedControl--fullWidth {
|
|
162
|
+
display: flex;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.SegmentedControl--fullWidth .SegmentedControl-item {
|
|
166
|
+
flex: 1;
|
|
167
|
+
justify-content: center;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* is .Button-withTooltip used anywhere? can't find use of it */
|
|
171
|
+
|
|
172
|
+
.SegmentedControl--fullWidth .Button--iconOnly,
|
|
173
|
+
.SegmentedControl--fullWidth .Button-withTooltip {
|
|
174
|
+
width: 100%;
|
|
175
|
+
}
|
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
".SegmentedControl-item.SegmentedControl-item--selected",
|
|
7
7
|
".SegmentedControl-item.SegmentedControl-item--selected .Button",
|
|
8
8
|
".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
|
|
9
|
-
".SegmentedControl-item.SegmentedControl-item--selected
|
|
10
|
-
".SegmentedControl-item.SegmentedControl-item--selected
|
|
11
|
-
".SegmentedControl-item .Button-label[data-content]
|
|
12
|
-
".SegmentedControl-item:not(:first-child)
|
|
9
|
+
".SegmentedControl-item.SegmentedControl-item--selected::before",
|
|
10
|
+
".SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before",
|
|
11
|
+
".SegmentedControl-item .Button-label[data-content]::before",
|
|
12
|
+
".SegmentedControl-item:not(:first-child)::before",
|
|
13
13
|
".SegmentedControl-item .Button",
|
|
14
14
|
".SegmentedControl-item .Button:focus-visible",
|
|
15
15
|
".SegmentedControl-item .Button--small",
|
|
16
16
|
".SegmentedControl-item .Button--small.Button--iconOnly",
|
|
17
|
-
".SegmentedControl-item .Button--small.Button--iconOnly
|
|
17
|
+
".SegmentedControl-item .Button--small.Button--iconOnly::before",
|
|
18
18
|
".SegmentedControl-item .Button--medium",
|
|
19
19
|
".SegmentedControl-item .Button--medium.Button--iconOnly",
|
|
20
|
-
".SegmentedControl-item .Button--medium.Button--iconOnly
|
|
20
|
+
".SegmentedControl-item .Button--medium.Button--iconOnly::before",
|
|
21
21
|
".SegmentedControl-item .Button--large",
|
|
22
22
|
".SegmentedControl-item .Button--large.Button--iconOnly",
|
|
23
|
-
".SegmentedControl-item .Button--large.Button--iconOnly
|
|
23
|
+
".SegmentedControl-item .Button--large.Button--iconOnly::before",
|
|
24
24
|
".SegmentedControl-item .Button--iconOnly",
|
|
25
25
|
".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
|
|
26
26
|
".SegmentedControl--fullWidth",
|
|
@@ -1 +1,106 @@
|
|
|
1
|
-
|
|
1
|
+
/* tabnav */
|
|
2
|
+
|
|
3
|
+
/* Outer wrapper */
|
|
4
|
+
|
|
5
|
+
.tabnav {
|
|
6
|
+
margin-top: 0;
|
|
7
|
+
margin-bottom: var(--stack-gap-normal,1rem);
|
|
8
|
+
border-bottom: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.tabnav-tabs {
|
|
12
|
+
display: flex;
|
|
13
|
+
margin-bottom: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1);
|
|
14
|
+
overflow: auto;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.tabnav-tab {
|
|
18
|
+
display: inline-block;
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
padding: var(--base-size-8,0.5rem) var(--control-medium-paddingInline-spacious,1rem);
|
|
21
|
+
font-size: var(--text-body-size-medium,0.875rem);
|
|
22
|
+
line-height: 23px;
|
|
23
|
+
color: var(--fgColor-muted,var(--color-fg-muted));
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
background-color: transparent;
|
|
26
|
+
border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid transparent;
|
|
27
|
+
border-bottom: 0;
|
|
28
|
+
transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.tabnav-tab.selected,
|
|
32
|
+
.tabnav-tab[aria-selected='true'],
|
|
33
|
+
.tabnav-tab[aria-current]:not([aria-current='false']) {
|
|
34
|
+
color: var(--fgColor-default,var(--color-fg-default));
|
|
35
|
+
background-color: var(--bgColor-default,var(--color-canvas-default)); /* cover bottom border */
|
|
36
|
+
border-color: var(--borderColor-default,var(--color-border-default));
|
|
37
|
+
border-radius: var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.tabnav-tab.selected .octicon, .tabnav-tab[aria-selected='true'] .octicon, .tabnav-tab[aria-current]:not([aria-current='false']) .octicon {
|
|
41
|
+
color: inherit;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.tabnav-tab:hover {
|
|
45
|
+
color: var(--fgColor-default,var(--color-fg-default));
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
transition-duration: 0.1s;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.tabnav-tab:focus,
|
|
51
|
+
.tabnav-tab:focus-visible {
|
|
52
|
+
border-radius: var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0 !important;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.tabnav-tab:focus,
|
|
56
|
+
.tabnav-tab:focus-visible {
|
|
57
|
+
outline-offset: -6px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.tabnav-tab:active {
|
|
61
|
+
color: var(--fgColor-muted,var(--color-fg-muted));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.tabnav-tab .octicon {
|
|
65
|
+
margin-right: var(--control-small-gap,0.25rem);
|
|
66
|
+
color: var(--fgColor-muted,var(--color-fg-muted));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.tabnav-tab .Counter {
|
|
70
|
+
margin-left: var(--control-small-gap,0.25rem);
|
|
71
|
+
color: inherit;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Tabnav extras
|
|
75
|
+
**
|
|
76
|
+
** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
|
|
77
|
+
** inline text or links. */
|
|
78
|
+
|
|
79
|
+
.tabnav-extra {
|
|
80
|
+
display: inline-block;
|
|
81
|
+
padding-top: 10px;
|
|
82
|
+
margin-left: 10px;
|
|
83
|
+
font-size: var(--text-body-size-small,0.75rem);
|
|
84
|
+
color: var(--fgColor-muted,var(--color-fg-muted));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.tabnav-extra > .octicon {
|
|
88
|
+
margin-right: 2px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* When tabnav-extra are anchors
|
|
92
|
+
** stylelint-disable-next-line selector-no-qualifying-type */
|
|
93
|
+
|
|
94
|
+
a.tabnav-extra:hover {
|
|
95
|
+
color: var(--fgColor-accent,var(--color-accent-fg));
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Tabnav buttons
|
|
100
|
+
**
|
|
101
|
+
** For when there are multiple buttons, space them out appropriately. Requires
|
|
102
|
+
** the buttons to be floated or inline-block. */
|
|
103
|
+
|
|
104
|
+
.tabnav-btn {
|
|
105
|
+
margin-left: var(--controlStack-medium-gap-condensed,0.5rem);
|
|
106
|
+
}
|
|
@@ -5,19 +5,19 @@
|
|
|
5
5
|
".tabnav-tabs",
|
|
6
6
|
".tabnav-tab",
|
|
7
7
|
".tabnav-tab.selected",
|
|
8
|
-
".tabnav-tab[aria-
|
|
9
|
-
".tabnav-tab[aria-
|
|
8
|
+
".tabnav-tab[aria-selected='true']",
|
|
9
|
+
".tabnav-tab[aria-current]:not([aria-current='false'])",
|
|
10
10
|
".tabnav-tab.selected .octicon",
|
|
11
|
-
".tabnav-tab[aria-
|
|
12
|
-
".tabnav-tab[aria-
|
|
11
|
+
".tabnav-tab[aria-selected='true'] .octicon",
|
|
12
|
+
".tabnav-tab[aria-current]:not([aria-current='false']) .octicon",
|
|
13
13
|
".tabnav-tab:hover",
|
|
14
14
|
".tabnav-tab:focus",
|
|
15
15
|
".tabnav-tab:focus-visible",
|
|
16
|
-
".tabnav-tab .octicon",
|
|
17
16
|
".tabnav-tab:active",
|
|
17
|
+
".tabnav-tab .octicon",
|
|
18
18
|
".tabnav-tab .Counter",
|
|
19
19
|
".tabnav-extra",
|
|
20
|
-
".tabnav-extra
|
|
20
|
+
".tabnav-extra > .octicon",
|
|
21
21
|
"a.tabnav-extra:hover",
|
|
22
22
|
".tabnav-btn"
|
|
23
23
|
]
|