@primer/css 20.3.0-rc.ed6a31fc → 20.3.1-rc.a6dbd98f
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 +12 -0
- package/avatars/avatar-stack.scss +0 -1
- package/core/index.scss +1 -0
- package/deprecations.json +1 -0
- package/dist/core.css +1 -1
- package/dist/core.css.map +1 -1
- package/dist/deprecations.json +1 -0
- package/dist/meta.json +33 -22
- package/dist/primer.css +1 -1
- package/dist/primer.css.map +1 -1
- package/dist/segmented-control.css +2 -0
- package/dist/segmented-control.css.map +1 -0
- package/dist/segmented-control.js +1 -0
- package/dist/stats/core.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/dist/stats/segmented-control.json +1 -0
- package/dist/stats/utilities.json +1 -1
- package/dist/utilities.css +1 -1
- package/dist/utilities.css.map +1 -1
- package/package.json +5 -5
- package/segmented-control/README.md +25 -0
- package/segmented-control/index.scss +3 -0
- package/segmented-control/segmented-control.scss +159 -0
- package/utilities/visibility-display.scss +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
bundle: "segmented-control"
|
|
3
|
+
generated: true
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Primer CSS: `segmented-control` bundle
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
|
11
|
+
|
|
12
|
+
```scss
|
|
13
|
+
@import "@primer/css/segmented-control/index.scss";
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Build
|
|
17
|
+
|
|
18
|
+
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/segmented-control.css`.
|
|
19
|
+
|
|
20
|
+
## License
|
|
21
|
+
|
|
22
|
+
[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
[scss]: https://sass-lang.com/documentation/syntax#scss
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
// SegmentedControl
|
|
2
|
+
|
|
3
|
+
.SegmentedControl {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
background-color: var(--color-segmented-control-bg);
|
|
6
|
+
// stylelint-disable-next-line primer/borders
|
|
7
|
+
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
8
|
+
// stylelint-disable-next-line primer/box-shadow
|
|
9
|
+
box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Button -----------------------------------------
|
|
13
|
+
|
|
14
|
+
.SegmentedControl-button {
|
|
15
|
+
position: relative;
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
height: var(--primer-control-medium-size, 32px);
|
|
18
|
+
// stylelint-disable-next-line primer/spacing
|
|
19
|
+
padding: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
|
|
20
|
+
// stylelint-disable-next-line primer/typography
|
|
21
|
+
font-size: var(--primer-text-body-size-medium, $body-font-size);
|
|
22
|
+
color: var(--color-fg-default);
|
|
23
|
+
background-color: transparent;
|
|
24
|
+
// stylelint-disable-next-line primer/borders
|
|
25
|
+
border: var(--primer-borderWidth-thin, $border-width) $border-style transparent;
|
|
26
|
+
// stylelint-disable-next-line primer/borders
|
|
27
|
+
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
28
|
+
|
|
29
|
+
&:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
|
|
30
|
+
background-color: var(--color-segmented-control-button-hover-bg);
|
|
31
|
+
transition-duration: var(--primer-duration-fast, 80ms);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
|
|
35
|
+
background-color: var(--color-segmented-control-button-active-bg);
|
|
36
|
+
transition-duration: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Selected
|
|
40
|
+
|
|
41
|
+
&.SegmentedControl-button--selected {
|
|
42
|
+
// stylelint-disable-next-line primer/typography
|
|
43
|
+
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
|
|
44
|
+
background-color: var(--color-btn-bg);
|
|
45
|
+
border-color: var(--color-segmented-control-button-selected-border);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Divider
|
|
49
|
+
|
|
50
|
+
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
|
51
|
+
& + .SegmentedControl-button::before {
|
|
52
|
+
position: absolute;
|
|
53
|
+
inset: var(--primer-borderWidth-thin, 1px) 0 0 calc(var(--primer-borderWidth-thin, 1px) * -1);
|
|
54
|
+
height: var(--primer-text-body-size-large, 16px);
|
|
55
|
+
// stylelint-disable-next-line primer/spacing
|
|
56
|
+
margin-top: var(--primer-control-medium-paddingBlock, 6px);
|
|
57
|
+
content: '';
|
|
58
|
+
// stylelint-disable-next-line primer/borders
|
|
59
|
+
border-left: var(--primer-borderWidth-thin, $border-width) $border-style var(--color-border-default);
|
|
60
|
+
transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.SegmentedControl-button--selected::before,
|
|
64
|
+
&.SegmentedControl-button--selected + .SegmentedControl-button::before {
|
|
65
|
+
border-color: transparent;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Content -----------------------------------------
|
|
70
|
+
|
|
71
|
+
.SegmentedControl-content {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
gap: var(--primer-control-medium-gap, $spacer-2);
|
|
76
|
+
height: 100%;
|
|
77
|
+
// stylelint-disable-next-line primer/spacing
|
|
78
|
+
padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
|
|
79
|
+
// stylelint-disable-next-line primer/borders
|
|
80
|
+
border-radius: var(--primer-borderRadius-medium, $border-radius);
|
|
81
|
+
transition: background-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Leading visual -----------------------------------------
|
|
85
|
+
|
|
86
|
+
.SegmentedControl-leadingVisual {
|
|
87
|
+
color: var(--color-fg-muted);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Text -----------------------------------------
|
|
91
|
+
|
|
92
|
+
.SegmentedControl-text {
|
|
93
|
+
// renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected
|
|
94
|
+
&[data-content]::before {
|
|
95
|
+
display: block;
|
|
96
|
+
height: 0;
|
|
97
|
+
// stylelint-disable-next-line primer/typography
|
|
98
|
+
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
|
|
99
|
+
visibility: hidden;
|
|
100
|
+
content: attr(data-content);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Variants -----------------------------------------
|
|
105
|
+
|
|
106
|
+
// fullWidth
|
|
107
|
+
.SegmentedControl--fullWidth {
|
|
108
|
+
display: flex;
|
|
109
|
+
|
|
110
|
+
.SegmentedControl-button {
|
|
111
|
+
flex: 1;
|
|
112
|
+
justify-content: center;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Icon only
|
|
117
|
+
.SegmentedControl-button--iconOnly {
|
|
118
|
+
width: var(--primer-control-medium-size, 32px);
|
|
119
|
+
|
|
120
|
+
.SegmentedControl-content {
|
|
121
|
+
padding: 0;
|
|
122
|
+
flex: 1;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Icon only when narrow
|
|
127
|
+
@media (max-width: $width-md) {
|
|
128
|
+
.SegmentedControl--iconOnly-whenNarrow {
|
|
129
|
+
.SegmentedControl-button {
|
|
130
|
+
width: var(--primer-control-medium-size, 32px);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.SegmentedControl-content {
|
|
134
|
+
padding: 0;
|
|
135
|
+
flex: 1;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.SegmentedControl-text {
|
|
139
|
+
display: none;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Increase touch target
|
|
145
|
+
@media (pointer: coarse) {
|
|
146
|
+
.SegmentedControl-button {
|
|
147
|
+
min-width: var(--primer-control-minTarget-coarse, 44px);
|
|
148
|
+
|
|
149
|
+
&::after {
|
|
150
|
+
@include minTouchTarget($min-height: var(--primer-control-minTarget-coarse, 44px));
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// reset for icon-only buttons
|
|
155
|
+
.SegmentedControl-button--iconOnly,
|
|
156
|
+
.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button {
|
|
157
|
+
min-width: unset;
|
|
158
|
+
}
|
|
159
|
+
}
|