@snack-uikit/segmented-control 0.2.4-preview-d96c83e8.0 → 0.2.4-preview-3f66d646.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/dist/cjs/components/SegmentedControl.js +5 -1
- package/dist/cjs/components/styles.module.css +82 -0
- package/dist/cjs/helperComponents/Segment/Segment.js +5 -1
- package/dist/cjs/helperComponents/Segment/styles.module.css +126 -0
- package/dist/esm/components/styles.module.css +82 -0
- package/dist/esm/helperComponents/Segment/styles.module.css +126 -0
- package/package.json +4 -4
|
@@ -25,7 +25,11 @@ const utils_1 = require("@snack-uikit/utils");
|
|
|
25
25
|
const constants_1 = require("../constants");
|
|
26
26
|
const helperComponents_1 = require("../helperComponents");
|
|
27
27
|
const hooks_1 = require("../hooks");
|
|
28
|
-
const styles_module_scss_1 = __importDefault({
|
|
28
|
+
const styles_module_scss_1 = __importDefault({
|
|
29
|
+
"container": "styles-module__container___328eM",
|
|
30
|
+
"segmentHolder": "styles-module__segmentHolder___1OC4v",
|
|
31
|
+
"selection": "styles-module__selection___G2Vwg"
|
|
32
|
+
});
|
|
29
33
|
/**
|
|
30
34
|
* SegmentedControl
|
|
31
35
|
*/
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
.container{
|
|
2
|
+
padding-top:var(--space-segmented-control-container-padding, 2px);
|
|
3
|
+
padding-bottom:var(--space-segmented-control-container-padding, 2px);
|
|
4
|
+
padding-left:var(--space-segmented-control-container-padding, 2px);
|
|
5
|
+
padding-right:var(--space-segmented-control-container-padding, 2px);
|
|
6
|
+
position:relative;
|
|
7
|
+
overflow:hidden;
|
|
8
|
+
display:inline-flex;
|
|
9
|
+
flex-direction:row;
|
|
10
|
+
justify-content:stretch;
|
|
11
|
+
max-width:100%;
|
|
12
|
+
}
|
|
13
|
+
.container::before{
|
|
14
|
+
content:" ";
|
|
15
|
+
position:absolute;
|
|
16
|
+
top:0;
|
|
17
|
+
left:0;
|
|
18
|
+
box-sizing:border-box;
|
|
19
|
+
width:100%;
|
|
20
|
+
height:100%;
|
|
21
|
+
background-color:var(--sys-neutral-background, #eeeff3);
|
|
22
|
+
border-color:var(--sys-neutral-background, #eeeff3);
|
|
23
|
+
border-style:solid;
|
|
24
|
+
}
|
|
25
|
+
.container[data-outline]::before{
|
|
26
|
+
border-color:var(--sys-neutral-decor-default, #dde0ea);
|
|
27
|
+
}
|
|
28
|
+
.container[data-width=full]{
|
|
29
|
+
display:flex;
|
|
30
|
+
}
|
|
31
|
+
.container[data-size=s]::before{
|
|
32
|
+
border-width:var(--border-width-segmented-control-single, 1px);
|
|
33
|
+
border-radius:var(--radius-segmented-control-container-s, 12px);
|
|
34
|
+
}
|
|
35
|
+
.container[data-size=m]::before{
|
|
36
|
+
border-width:var(--border-width-segmented-control-single, 1px);
|
|
37
|
+
border-radius:var(--radius-segmented-control-container-m, 14px);
|
|
38
|
+
}
|
|
39
|
+
.container[data-size=l]::before{
|
|
40
|
+
border-width:var(--border-width-segmented-control-single, 1px);
|
|
41
|
+
border-radius:var(--radius-segmented-control-container-l, 16px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.segmentHolder{
|
|
45
|
+
overflow:hidden;
|
|
46
|
+
flex-grow:1;
|
|
47
|
+
flex-shrink:1;
|
|
48
|
+
justify-content:center;
|
|
49
|
+
min-width:0px;
|
|
50
|
+
}
|
|
51
|
+
.segmentHolder[data-outline]{
|
|
52
|
+
flex-basis:0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.selection{
|
|
56
|
+
position:absolute;
|
|
57
|
+
overflow:hidden;
|
|
58
|
+
box-sizing:border-box;
|
|
59
|
+
background-color:var(--sys-neutral-background2-level, #ffffff);
|
|
60
|
+
transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
|
|
61
|
+
}
|
|
62
|
+
.selection[data-size=s]{
|
|
63
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
64
|
+
padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
65
|
+
padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
66
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
67
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
68
|
+
}
|
|
69
|
+
.selection[data-size=m]{
|
|
70
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
71
|
+
padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
72
|
+
padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
73
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
74
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
75
|
+
}
|
|
76
|
+
.selection[data-size=l]{
|
|
77
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
78
|
+
padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
79
|
+
padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
80
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
81
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
82
|
+
}
|
|
@@ -14,7 +14,11 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
14
14
|
const react_1 = require("react");
|
|
15
15
|
const truncate_string_1 = require("@snack-uikit/truncate-string");
|
|
16
16
|
const utils_1 = require("../../utils");
|
|
17
|
-
const styles_module_scss_1 = __importDefault({
|
|
17
|
+
const styles_module_scss_1 = __importDefault({
|
|
18
|
+
"segment": "styles-module__segment___3V9K5",
|
|
19
|
+
"icon": "styles-module__icon___1lp_E",
|
|
20
|
+
"label": "styles-module__label___2Cqq_"
|
|
21
|
+
});
|
|
18
22
|
function Segment(_ref) {
|
|
19
23
|
let {
|
|
20
24
|
size,
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
.segment{
|
|
2
|
+
cursor:pointer;
|
|
3
|
+
position:relative;
|
|
4
|
+
z-index:0;
|
|
5
|
+
display:flex;
|
|
6
|
+
align-items:center;
|
|
7
|
+
justify-content:center;
|
|
8
|
+
width:100%;
|
|
9
|
+
color:var(--sys-neutral-text-support, #6d707f);
|
|
10
|
+
background-color:transparent;
|
|
11
|
+
border-width:0;
|
|
12
|
+
}
|
|
13
|
+
.segment:hover{
|
|
14
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
15
|
+
}
|
|
16
|
+
.segment[data-disabled], .segment[data-disabled]:hover{
|
|
17
|
+
cursor:not-allowed;
|
|
18
|
+
color:var(--sys-neutral-text-disabled, #aaaebd);
|
|
19
|
+
}
|
|
20
|
+
.segment[data-active]{
|
|
21
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
22
|
+
}
|
|
23
|
+
.segment[data-active][data-disabled], .segment[data-active][data-disabled]:hover{
|
|
24
|
+
color:var(--sys-neutral-text-disabled, #aaaebd);
|
|
25
|
+
}
|
|
26
|
+
.segment:focus-visible{
|
|
27
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
28
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
29
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
30
|
+
outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
|
|
31
|
+
outline-color:var(--sys-available-complementary, #1c1c24);
|
|
32
|
+
}
|
|
33
|
+
.segment[data-size=s][data-layout=label-only]{
|
|
34
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
35
|
+
padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
|
|
36
|
+
padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
|
|
37
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
38
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
39
|
+
}
|
|
40
|
+
.segment[data-size=s][data-layout=icon-before]{
|
|
41
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
42
|
+
padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
|
|
43
|
+
padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
|
|
44
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
45
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
46
|
+
}
|
|
47
|
+
.segment[data-size=s][data-layout=icon-only]{
|
|
48
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
49
|
+
padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
50
|
+
padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
51
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
52
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
53
|
+
}
|
|
54
|
+
.segment[data-size=m][data-layout=label-only]{
|
|
55
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
56
|
+
padding-left:var(--space-segmented-control-segment-m-from-label, 24px);
|
|
57
|
+
padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
|
|
58
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
59
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
60
|
+
}
|
|
61
|
+
.segment[data-size=m][data-layout=icon-before]{
|
|
62
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
63
|
+
padding-left:var(--space-segmented-control-segment-m-from-icon, 16px);
|
|
64
|
+
padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
|
|
65
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
66
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
67
|
+
}
|
|
68
|
+
.segment[data-size=m][data-layout=icon-only]{
|
|
69
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
70
|
+
padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
71
|
+
padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
72
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
73
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
74
|
+
}
|
|
75
|
+
.segment[data-size=l][data-layout=label-only]{
|
|
76
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
77
|
+
padding-left:var(--space-segmented-control-segment-l-from-label, 32px);
|
|
78
|
+
padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
|
|
79
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
80
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
81
|
+
}
|
|
82
|
+
.segment[data-size=l][data-layout=icon-before]{
|
|
83
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
84
|
+
padding-left:var(--space-segmented-control-segment-l-from-icon, 24px);
|
|
85
|
+
padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
|
|
86
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
87
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
88
|
+
}
|
|
89
|
+
.segment[data-size=l][data-layout=icon-only]{
|
|
90
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
91
|
+
padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
92
|
+
padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
93
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
94
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.icon{
|
|
98
|
+
display:flex;
|
|
99
|
+
flex-shrink:0;
|
|
100
|
+
align-items:center;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.label[data-size=s]{
|
|
104
|
+
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
105
|
+
font-weight:var(--sans-label-m-font-weight, Semibold);
|
|
106
|
+
line-height:var(--sans-label-m-line-height, 16px);
|
|
107
|
+
font-size:var(--sans-label-m-font-size, 12px);
|
|
108
|
+
letter-spacing:var(--sans-label-m-letter-spacing, 0px);
|
|
109
|
+
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
110
|
+
}
|
|
111
|
+
.label[data-size=m]{
|
|
112
|
+
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
113
|
+
font-weight:var(--sans-label-m-font-weight, Semibold);
|
|
114
|
+
line-height:var(--sans-label-m-line-height, 16px);
|
|
115
|
+
font-size:var(--sans-label-m-font-size, 12px);
|
|
116
|
+
letter-spacing:var(--sans-label-m-letter-spacing, 0px);
|
|
117
|
+
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
118
|
+
}
|
|
119
|
+
.label[data-size=l]{
|
|
120
|
+
font-family:var(--sans-label-l-font-family, SB Sans Interface);
|
|
121
|
+
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
122
|
+
line-height:var(--sans-label-l-line-height, 20px);
|
|
123
|
+
font-size:var(--sans-label-l-font-size, 14px);
|
|
124
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
125
|
+
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
126
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
.container{
|
|
2
|
+
padding-top:var(--space-segmented-control-container-padding, 2px);
|
|
3
|
+
padding-bottom:var(--space-segmented-control-container-padding, 2px);
|
|
4
|
+
padding-left:var(--space-segmented-control-container-padding, 2px);
|
|
5
|
+
padding-right:var(--space-segmented-control-container-padding, 2px);
|
|
6
|
+
position:relative;
|
|
7
|
+
overflow:hidden;
|
|
8
|
+
display:inline-flex;
|
|
9
|
+
flex-direction:row;
|
|
10
|
+
justify-content:stretch;
|
|
11
|
+
max-width:100%;
|
|
12
|
+
}
|
|
13
|
+
.container::before{
|
|
14
|
+
content:" ";
|
|
15
|
+
position:absolute;
|
|
16
|
+
top:0;
|
|
17
|
+
left:0;
|
|
18
|
+
box-sizing:border-box;
|
|
19
|
+
width:100%;
|
|
20
|
+
height:100%;
|
|
21
|
+
background-color:var(--sys-neutral-background, #eeeff3);
|
|
22
|
+
border-color:var(--sys-neutral-background, #eeeff3);
|
|
23
|
+
border-style:solid;
|
|
24
|
+
}
|
|
25
|
+
.container[data-outline]::before{
|
|
26
|
+
border-color:var(--sys-neutral-decor-default, #dde0ea);
|
|
27
|
+
}
|
|
28
|
+
.container[data-width=full]{
|
|
29
|
+
display:flex;
|
|
30
|
+
}
|
|
31
|
+
.container[data-size=s]::before{
|
|
32
|
+
border-width:var(--border-width-segmented-control-single, 1px);
|
|
33
|
+
border-radius:var(--radius-segmented-control-container-s, 12px);
|
|
34
|
+
}
|
|
35
|
+
.container[data-size=m]::before{
|
|
36
|
+
border-width:var(--border-width-segmented-control-single, 1px);
|
|
37
|
+
border-radius:var(--radius-segmented-control-container-m, 14px);
|
|
38
|
+
}
|
|
39
|
+
.container[data-size=l]::before{
|
|
40
|
+
border-width:var(--border-width-segmented-control-single, 1px);
|
|
41
|
+
border-radius:var(--radius-segmented-control-container-l, 16px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.segmentHolder{
|
|
45
|
+
overflow:hidden;
|
|
46
|
+
flex-grow:1;
|
|
47
|
+
flex-shrink:1;
|
|
48
|
+
justify-content:center;
|
|
49
|
+
min-width:0px;
|
|
50
|
+
}
|
|
51
|
+
.segmentHolder[data-outline]{
|
|
52
|
+
flex-basis:0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.selection{
|
|
56
|
+
position:absolute;
|
|
57
|
+
overflow:hidden;
|
|
58
|
+
box-sizing:border-box;
|
|
59
|
+
background-color:var(--sys-neutral-background2-level, #ffffff);
|
|
60
|
+
transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
|
|
61
|
+
}
|
|
62
|
+
.selection[data-size=s]{
|
|
63
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
64
|
+
padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
65
|
+
padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
66
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
67
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
68
|
+
}
|
|
69
|
+
.selection[data-size=m]{
|
|
70
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
71
|
+
padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
72
|
+
padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
73
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
74
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
75
|
+
}
|
|
76
|
+
.selection[data-size=l]{
|
|
77
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
78
|
+
padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
79
|
+
padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
80
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
81
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
82
|
+
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
.segment{
|
|
2
|
+
cursor:pointer;
|
|
3
|
+
position:relative;
|
|
4
|
+
z-index:0;
|
|
5
|
+
display:flex;
|
|
6
|
+
align-items:center;
|
|
7
|
+
justify-content:center;
|
|
8
|
+
width:100%;
|
|
9
|
+
color:var(--sys-neutral-text-support, #6d707f);
|
|
10
|
+
background-color:transparent;
|
|
11
|
+
border-width:0;
|
|
12
|
+
}
|
|
13
|
+
.segment:hover{
|
|
14
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
15
|
+
}
|
|
16
|
+
.segment[data-disabled], .segment[data-disabled]:hover{
|
|
17
|
+
cursor:not-allowed;
|
|
18
|
+
color:var(--sys-neutral-text-disabled, #aaaebd);
|
|
19
|
+
}
|
|
20
|
+
.segment[data-active]{
|
|
21
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
22
|
+
}
|
|
23
|
+
.segment[data-active][data-disabled], .segment[data-active][data-disabled]:hover{
|
|
24
|
+
color:var(--sys-neutral-text-disabled, #aaaebd);
|
|
25
|
+
}
|
|
26
|
+
.segment:focus-visible{
|
|
27
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
28
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
29
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
30
|
+
outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
|
|
31
|
+
outline-color:var(--sys-available-complementary, #1c1c24);
|
|
32
|
+
}
|
|
33
|
+
.segment[data-size=s][data-layout=label-only]{
|
|
34
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
35
|
+
padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
|
|
36
|
+
padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
|
|
37
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
38
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
39
|
+
}
|
|
40
|
+
.segment[data-size=s][data-layout=icon-before]{
|
|
41
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
42
|
+
padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
|
|
43
|
+
padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
|
|
44
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
45
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
46
|
+
}
|
|
47
|
+
.segment[data-size=s][data-layout=icon-only]{
|
|
48
|
+
border-radius:var(--radius-segmented-control-segment-s, 10px);
|
|
49
|
+
padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
50
|
+
padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
|
|
51
|
+
gap:var(--space-segmented-control-segment-s-gap, 4px);
|
|
52
|
+
height:var(--size-segmented-control-segment-s, 28px);
|
|
53
|
+
}
|
|
54
|
+
.segment[data-size=m][data-layout=label-only]{
|
|
55
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
56
|
+
padding-left:var(--space-segmented-control-segment-m-from-label, 24px);
|
|
57
|
+
padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
|
|
58
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
59
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
60
|
+
}
|
|
61
|
+
.segment[data-size=m][data-layout=icon-before]{
|
|
62
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
63
|
+
padding-left:var(--space-segmented-control-segment-m-from-icon, 16px);
|
|
64
|
+
padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
|
|
65
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
66
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
67
|
+
}
|
|
68
|
+
.segment[data-size=m][data-layout=icon-only]{
|
|
69
|
+
border-radius:var(--radius-segmented-control-segment-m, 12px);
|
|
70
|
+
padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
71
|
+
padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
|
|
72
|
+
gap:var(--space-segmented-control-segment-m-gap, 4px);
|
|
73
|
+
height:var(--size-segmented-control-segment-m, 36px);
|
|
74
|
+
}
|
|
75
|
+
.segment[data-size=l][data-layout=label-only]{
|
|
76
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
77
|
+
padding-left:var(--space-segmented-control-segment-l-from-label, 32px);
|
|
78
|
+
padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
|
|
79
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
80
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
81
|
+
}
|
|
82
|
+
.segment[data-size=l][data-layout=icon-before]{
|
|
83
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
84
|
+
padding-left:var(--space-segmented-control-segment-l-from-icon, 24px);
|
|
85
|
+
padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
|
|
86
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
87
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
88
|
+
}
|
|
89
|
+
.segment[data-size=l][data-layout=icon-only]{
|
|
90
|
+
border-radius:var(--radius-segmented-control-segment-l, 14px);
|
|
91
|
+
padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
92
|
+
padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
|
|
93
|
+
gap:var(--space-segmented-control-segment-l-gap, 4px);
|
|
94
|
+
height:var(--size-segmented-control-segment-l, 44px);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.icon{
|
|
98
|
+
display:flex;
|
|
99
|
+
flex-shrink:0;
|
|
100
|
+
align-items:center;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.label[data-size=s]{
|
|
104
|
+
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
105
|
+
font-weight:var(--sans-label-m-font-weight, Semibold);
|
|
106
|
+
line-height:var(--sans-label-m-line-height, 16px);
|
|
107
|
+
font-size:var(--sans-label-m-font-size, 12px);
|
|
108
|
+
letter-spacing:var(--sans-label-m-letter-spacing, 0px);
|
|
109
|
+
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
110
|
+
}
|
|
111
|
+
.label[data-size=m]{
|
|
112
|
+
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
113
|
+
font-weight:var(--sans-label-m-font-weight, Semibold);
|
|
114
|
+
line-height:var(--sans-label-m-line-height, 16px);
|
|
115
|
+
font-size:var(--sans-label-m-font-size, 12px);
|
|
116
|
+
letter-spacing:var(--sans-label-m-letter-spacing, 0px);
|
|
117
|
+
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
118
|
+
}
|
|
119
|
+
.label[data-size=l]{
|
|
120
|
+
font-family:var(--sans-label-l-font-family, SB Sans Interface);
|
|
121
|
+
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
122
|
+
line-height:var(--sans-label-l-line-height, 20px);
|
|
123
|
+
font-size:var(--sans-label-l-font-size, 14px);
|
|
124
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
125
|
+
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
126
|
+
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Segmented Control",
|
|
7
|
-
"version": "0.2.4-preview-
|
|
7
|
+
"version": "0.2.4-preview-3f66d646.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
"license": "Apache-2.0",
|
|
35
35
|
"scripts": {},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@snack-uikit/truncate-string": "0.4.25-preview-
|
|
38
|
-
"@snack-uikit/utils": "3.4.1-preview-
|
|
37
|
+
"@snack-uikit/truncate-string": "0.4.25-preview-3f66d646.0",
|
|
38
|
+
"@snack-uikit/utils": "3.4.1-preview-3f66d646.0",
|
|
39
39
|
"classnames": "2.5.1",
|
|
40
40
|
"uncontrollable": "8.0.4"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "cb53ade989b4c0ff427766e847bdf7eebe19e245"
|
|
43
43
|
}
|