@primer/css 20.0.0-rc.7b88bc5d → 20.0.0-rc.c0ed9d90
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/CHANGELOG.md +7 -3
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/forms.css +1 -1
- package/dist/forms.css.map +1 -1
- package/dist/meta.json +84 -84
- package/dist/navigation.css +1 -1
- package/dist/navigation.css.map +1 -1
- package/dist/primer.css +1 -1
- package/dist/primer.css.map +1 -1
- package/dist/stats/core.json +1 -1
- package/dist/stats/forms.json +1 -1
- package/dist/stats/navigation.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/forms/form-validation.scss +5 -1
- package/navigation/underline-nav.scss +49 -50
- package/package.json +1 -1
|
@@ -235,7 +235,11 @@ dl.form-group > dd, // TODO: Deprecate
|
|
|
235
235
|
}
|
|
236
236
|
|
|
237
237
|
&.focused {
|
|
238
|
-
|
|
238
|
+
border-color: var(--color-accent-fg);
|
|
239
|
+
border-radius: $border-radius;
|
|
240
|
+
outline: none;
|
|
241
|
+
// stylelint-disable-next-line primer/box-shadow
|
|
242
|
+
box-shadow: 0 0 0 2px var(--color-accent-fg);
|
|
239
243
|
|
|
240
244
|
.form-control {
|
|
241
245
|
border-color: transparent;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// stylelint-disable selector-max-specificity
|
|
2
1
|
$nav-height: $spacer-3 * 3 !default; // 48px
|
|
3
2
|
|
|
4
3
|
.UnderlineNav {
|
|
@@ -10,6 +9,17 @@ $nav-height: $spacer-3 * 3 !default; // 48px
|
|
|
10
9
|
box-shadow: inset 0 -1px 0 var(--color-border-muted);
|
|
11
10
|
-webkit-overflow-scrolling: auto;
|
|
12
11
|
justify-content: space-between;
|
|
12
|
+
|
|
13
|
+
.Counter {
|
|
14
|
+
margin-left: $spacer-2;
|
|
15
|
+
color: var(--color-fg-default);
|
|
16
|
+
background-color: var(--color-neutral-muted);
|
|
17
|
+
|
|
18
|
+
&--primary {
|
|
19
|
+
color: var(--color-fg-on-emphasis);
|
|
20
|
+
background-color: var(--color-neutral-emphasis);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
13
23
|
}
|
|
14
24
|
|
|
15
25
|
.UnderlineNav-body {
|
|
@@ -41,65 +51,54 @@ $nav-height: $spacer-3 * 3 !default; // 48px
|
|
|
41
51
|
color: var(--color-fg-default);
|
|
42
52
|
text-decoration: none;
|
|
43
53
|
border-bottom-color: var(--color-neutral-muted);
|
|
44
|
-
outline-offset: -
|
|
54
|
+
outline-offset: -2px;
|
|
45
55
|
transition: border-bottom-color 0.12s ease-out;
|
|
56
|
+
}
|
|
46
57
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
// increase touch target area
|
|
57
|
-
&::before {
|
|
58
|
-
@include minTouchTarget($min-height: $nav-height);
|
|
59
|
-
}
|
|
58
|
+
// renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
|
|
59
|
+
[data-content]::before {
|
|
60
|
+
display: block;
|
|
61
|
+
height: 0;
|
|
62
|
+
font-weight: $font-weight-bold;
|
|
63
|
+
visibility: hidden;
|
|
64
|
+
content: attr(data-content);
|
|
65
|
+
}
|
|
60
66
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
text-decoration: none;
|
|
66
|
-
background: var(--color-action-list-item-default-hover-bg);
|
|
67
|
-
transition: background 0.12s ease-out;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
67
|
+
// increase touch target area
|
|
68
|
+
&::before {
|
|
69
|
+
@include minTouchTarget($min-height: $nav-height);
|
|
70
|
+
}
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
font-weight: $font-weight-bold;
|
|
72
|
+
// hover state was "sticking" on mobile after click
|
|
73
|
+
@media (pointer: fine) {
|
|
74
|
+
&:hover {
|
|
75
75
|
color: var(--color-fg-default);
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
// current/selected underline
|
|
80
|
-
&::after {
|
|
81
|
-
position: absolute;
|
|
82
|
-
right: 50%;
|
|
83
|
-
// 48px total height / 2 (24px) + 1px
|
|
84
|
-
bottom: calc(50% - 25px);
|
|
85
|
-
width: 100%;
|
|
86
|
-
height: 2px;
|
|
87
|
-
content: '';
|
|
88
|
-
background: var(--color-primer-border-active);
|
|
89
|
-
border-radius: $border-radius;
|
|
90
|
-
transform: translate(50%, -50%);
|
|
91
|
-
}
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
background: var(--color-action-list-item-default-hover-bg);
|
|
78
|
+
transition: background 0.12s ease-out;
|
|
92
79
|
}
|
|
93
80
|
}
|
|
94
81
|
|
|
95
|
-
|
|
96
|
-
|
|
82
|
+
&.selected,
|
|
83
|
+
&[role='tab'][aria-selected='true'],
|
|
84
|
+
&[aria-current]:not([aria-current='false']) {
|
|
85
|
+
font-weight: $font-weight-bold;
|
|
97
86
|
color: var(--color-fg-default);
|
|
98
|
-
|
|
87
|
+
border-bottom-color: var(--color-primer-border-active);
|
|
88
|
+
outline-offset: -8px;
|
|
99
89
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
90
|
+
// current/selected underline
|
|
91
|
+
&::after {
|
|
92
|
+
position: absolute;
|
|
93
|
+
right: 50%;
|
|
94
|
+
// 48px total height / 2 (24px) + 1px
|
|
95
|
+
bottom: calc(50% - 25px);
|
|
96
|
+
width: 100%;
|
|
97
|
+
height: 2px;
|
|
98
|
+
content: '';
|
|
99
|
+
background: var(--color-primer-border-active);
|
|
100
|
+
border-radius: $border-radius;
|
|
101
|
+
transform: translate(50%, -50%);
|
|
103
102
|
}
|
|
104
103
|
}
|
|
105
104
|
}
|
package/package.json
CHANGED