@primer/css 20.4.2-rc.c3e6ef01 → 20.4.2-rc.d7316860
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 +2 -0
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/meta.json +77 -77
- package/dist/primer.css +1 -1
- package/dist/primer.css.map +1 -1
- package/dist/segmented-control.css +1 -1
- package/dist/segmented-control.css.map +1 -1
- package/dist/stats/core.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/dist/stats/segmented-control.json +1 -1
- package/package.json +3 -3
- package/segmented-control/segmented-control.scss +14 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"size":
|
|
1
|
+
{"size":2668,"gzipSize":788,"humanizedSize":"3KB","humanizedGzipSize":"788B","rules":{"total":22,"size":{"graph":[5,2,9,2,2,3,7,1,8,1,1,5,1,2,1,2,1,2,1,1,8,1],"max":9,"average":3},"selectorByRuleSizes":[{"selector":".SegmentedControl-button","declarations":9},{"selector":".SegmentedControl-button::after","declarations":8},{"selector":".SegmentedControl-content","declarations":8},{"selector":".SegmentedControl-button+.SegmentedControl-button::before","declarations":7},{"selector":".SegmentedControl-text[data-content]::before","declarations":5},{"selector":".SegmentedControl","declarations":5},{"selector":".SegmentedControl-button[aria-current=true]","declarations":3},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button--iconOnly .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl--fullWidth .SegmentedControl-button,.SegmentedControl--fullWidth li","declarations":2},{"selector":".SegmentedControl-button[aria-current=false]:active .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button[aria-current=false]:hover .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl li","declarations":2},{"selector":".SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button--iconOnly","declarations":1},{"selector":".SegmentedControl--fullWidth","declarations":1},{"selector":".SegmentedControl-text","declarations":1},{"selector":".SegmentedControl-leadingVisual","declarations":1},{"selector":".SegmentedControl-button[aria-current=true]::before,.SegmentedControl-button[aria-current=true]+.SegmentedControl-button::before","declarations":1}]},"selectors":{"total":25,"type":2,"class":25,"id":0,"pseudoClass":2,"pseudoElement":5,"values":[".SegmentedControl",".SegmentedControl li",".SegmentedControl-button",".SegmentedControl-button[aria-current=false]:hover .SegmentedControl-content",".SegmentedControl-button[aria-current=false]:active .SegmentedControl-content",".SegmentedControl-button[aria-current=true]",".SegmentedControl-button+.SegmentedControl-button::before",".SegmentedControl-button[aria-current=true]::before",".SegmentedControl-button[aria-current=true]+.SegmentedControl-button::before",".SegmentedControl-content",".SegmentedControl-leadingVisual",".SegmentedControl-text",".SegmentedControl-text[data-content]::before",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-button",".SegmentedControl--fullWidth li",".SegmentedControl-button--iconOnly",".SegmentedControl-button--iconOnly .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text",".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button"],"specificity":{"max":40,"average":17.48}},"declarations":{"total":66,"unique":51,"uniqueToTotalRatio":0.7727272727272727,"properties":{"display":["inline-flex","inline-flex","inline-flex","flex","block","flex","none"],"list-style":["none"],"background-color":["var(--color-segmented-control-bg)","transparent","var(--color-segmented-control-button-hover-bg)","var(--color-segmented-control-button-active-bg)","var(--color-btn-bg)"],"border-radius":["6px","6px","6px"],"box-shadow":["inset 0 0 0 1px var(--color-border-default)"],"position":["relative","relative","absolute","absolute"],"height":["32px","16px","100%","0","100%"],"padding":["calc(4px - 1px)","0 8px","0","0"],"font-size":["14px"],"color":["var(--color-fg-default)","var(--color-fg-muted)"],"border":["1px solid transparent"],"transition-duration":["80ms","0"],"font-weight":["600","600"],"border-color":["var(--color-segmented-control-button-selected-border)","transparent"],"inset":["1px 0 0 calc(1px*-1)"],"margin-top":["6px"],"content":["\"\"","attr(data-content)","\"\""],"border-left":["1px solid var(--color-border-default)"],"transition":["border-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)","background-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)"],"align-items":["center"],"justify-content":["center","center"],"gap":["8px"],"white-space":["nowrap"],"visibility":["hidden"],"flex":["1","1","1"],"width":["32px","32px","100%"],"min-width":["44px","unset"],"top":["50%"],"left":["50%"],"min-height":["44px"],"transform":["translateX(-50%) translateY(-50%)"]}},"mediaQueries":{"total":2,"unique":2,"values":["(max-width: 768px)","(pointer: coarse)"],"contents":[{"value":"(max-width: 768px)","rules":{"total":3,"size":{"graph":[1,2,1],"max":2,"average":1.3333333333333333},"selectorByRuleSizes":[{"selector":",.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":",.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1}]},"selectors":{"total":3,"type":0,"class":3,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text"],"specificity":{"max":20,"average":20}},"declarations":{"total":4,"unique":4,"uniqueToTotalRatio":1,"properties":{"width":["32px"],"padding":["0"],"flex":["1"],"display":["none"]}}},{"value":"(pointer: coarse)","rules":{"total":3,"size":{"graph":[1,8,1],"max":8,"average":3.3333333333333335},"selectorByRuleSizes":[{"selector":",.SegmentedControl-button::after","declarations":8},{"selector":",.SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button","declarations":1}]},"selectors":{"total":4,"type":0,"class":4,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button"],"specificity":{"max":20,"average":12.75}},"declarations":{"total":10,"unique":10,"uniqueToTotalRatio":1,"properties":{"min-width":["44px","unset"],"position":["absolute"],"top":["50%"],"left":["50%"],"width":["100%"],"height":["100%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)"]}}}]}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/css",
|
|
3
|
-
"version": "20.4.2-rc.
|
|
3
|
+
"version": "20.4.2-rc.d7316860",
|
|
4
4
|
"description": "The CSS implementation of GitHub's Primer Design System",
|
|
5
5
|
"homepage": "https://primer.style/css",
|
|
6
6
|
"author": "GitHub, Inc.",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"globby": "13.1.2",
|
|
63
63
|
"jest": "28.1.3",
|
|
64
64
|
"js-yaml": "4.1.0",
|
|
65
|
-
"postcss": "8.4.
|
|
65
|
+
"postcss": "8.4.16",
|
|
66
66
|
"postcss-calc": "8.2.4",
|
|
67
67
|
"postcss-import": "14.1.0",
|
|
68
68
|
"postcss-load-config": "4.0.1",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"postcss-simple-vars": "6.0.3",
|
|
71
71
|
"prettier": "2.7.1",
|
|
72
72
|
"semver": "7.3.7",
|
|
73
|
-
"stylelint": "14.
|
|
73
|
+
"stylelint": "14.10.0",
|
|
74
74
|
"table": "6.8.0"
|
|
75
75
|
},
|
|
76
76
|
"jest": {
|
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
// SegmentedControl
|
|
2
|
+
// stylelint-disable selector-max-type
|
|
2
3
|
|
|
3
4
|
.SegmentedControl {
|
|
4
|
-
position: relative;
|
|
5
5
|
display: inline-flex;
|
|
6
|
+
list-style: none;
|
|
6
7
|
background-color: var(--color-segmented-control-bg);
|
|
7
8
|
// stylelint-disable-next-line primer/borders
|
|
8
9
|
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
9
10
|
// stylelint-disable-next-line primer/box-shadow
|
|
10
11
|
box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
|
|
12
|
+
|
|
13
|
+
li {
|
|
14
|
+
position: relative;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
}
|
|
11
17
|
}
|
|
12
18
|
|
|
13
19
|
// Button -----------------------------------------
|
|
@@ -27,19 +33,19 @@
|
|
|
27
33
|
// stylelint-disable-next-line primer/borders
|
|
28
34
|
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
29
35
|
|
|
30
|
-
|
|
36
|
+
&[aria-current='false']:hover .SegmentedControl-content {
|
|
31
37
|
background-color: var(--color-segmented-control-button-hover-bg);
|
|
32
38
|
transition-duration: var(--primer-duration-fast, 80ms);
|
|
33
39
|
}
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
&[aria-current='false']:active .SegmentedControl-content {
|
|
36
42
|
background-color: var(--color-segmented-control-button-active-bg);
|
|
37
43
|
transition-duration: 0;
|
|
38
44
|
}
|
|
39
45
|
|
|
40
46
|
// Selected
|
|
41
47
|
|
|
42
|
-
|
|
48
|
+
&[aria-current='true'] {
|
|
43
49
|
// stylelint-disable-next-line primer/typography
|
|
44
50
|
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
|
|
45
51
|
background-color: var(--color-btn-bg);
|
|
@@ -61,8 +67,8 @@
|
|
|
61
67
|
transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
|
|
62
68
|
}
|
|
63
69
|
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
&[aria-current='true']::before,
|
|
71
|
+
&[aria-current='true'] + .SegmentedControl-button::before {
|
|
66
72
|
border-color: transparent;
|
|
67
73
|
}
|
|
68
74
|
}
|
|
@@ -110,7 +116,8 @@
|
|
|
110
116
|
.SegmentedControl--fullWidth {
|
|
111
117
|
display: flex;
|
|
112
118
|
|
|
113
|
-
.SegmentedControl-button
|
|
119
|
+
.SegmentedControl-button,
|
|
120
|
+
li {
|
|
114
121
|
flex: 1;
|
|
115
122
|
justify-content: center;
|
|
116
123
|
}
|