scu-web-components 1.3.21 → 1.3.22
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/custom-elements.json +1717 -1670
- package/dist/custom-elements.json.gz +0 -0
- package/dist/docs/components/ScwIconFeature.json +6 -1
- package/dist/docs/components/ScwTooltip.json +47 -0
- package/dist/docs/components/manifest.json +18 -18
- package/dist/docs/config.json +5 -5
- package/dist/scw-components.js +158 -142
- package/dist/scw-components.js.gz +0 -0
- package/dist/scw.js +168 -152
- package/dist/scw.js.gz +0 -0
- package/dist/tokens/segments/comp-scw-floating-button/_shape-pill-mixins.scss +11 -11
- package/dist/tokens/segments/comp-scw-floating-button/_shape-pill-vars.scss +10 -10
- package/dist/tokens/segments/comp-scw-floating-button/_size-small-shape-pill-mixins.scss +11 -11
- package/dist/tokens/segments/comp-scw-floating-button/_size-small-shape-pill-vars.scss +10 -10
- package/dist/tokens/segments/comp-scw-floating-button/_state-hover-shape-pill-mixins.scss +15 -15
- package/dist/tokens/segments/comp-scw-floating-button/_state-hover-shape-pill-vars.scss +12 -12
- package/dist/tokens/segments/comp-scw-floating-button/_state-hover-size-small-shape-pill-mixins.scss +15 -15
- package/dist/tokens/segments/comp-scw-floating-button/_state-hover-size-small-shape-pill-vars.scss +12 -12
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-shape-pill-.json +8 -8
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-size-small-shape-pill-.json +8 -8
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-size-small-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-state-hover-shape-pill-.json +8 -8
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-state-hover-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-state-hover-size-small-shape-pill-.json +8 -8
- package/dist/tokens/source/componentScssMixins/components-scw-floating-button-state-hover-size-small-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/componentScssMixins.json +32 -32
- package/dist/tokens/source/componentScssMixins.json.gz +0 -0
- package/dist/tokens/source/componentScssMixins.scss +52 -52
- package/dist/tokens/source/jsCss.js +1 -1
- package/dist/tokens/source/jsCss.js.gz +0 -0
- package/dist/tokens/source/jsCssGenerator.js +1 -1
- package/dist/tokens/source/jsCssGenerator.js.gz +0 -0
- package/dist/tokens/source/jsCssGeneratorSansAssets.js +1 -1
- package/dist/tokens/source/jsCssGeneratorSansAssets.js.gz +0 -0
- package/dist/tokens/source/scssVariables/components-scw-floating-button-shape-pill-.json +20 -20
- package/dist/tokens/source/scssVariables/components-scw-floating-button-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/scssVariables/components-scw-floating-button-size-small-shape-pill-.json +20 -20
- package/dist/tokens/source/scssVariables/components-scw-floating-button-size-small-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/scssVariables/components-scw-floating-button-state-hover-shape-pill-.json +24 -24
- package/dist/tokens/source/scssVariables/components-scw-floating-button-state-hover-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/scssVariables/components-scw-floating-button-state-hover-size-small-shape-pill-.json +24 -24
- package/dist/tokens/source/scssVariables/components-scw-floating-button-state-hover-size-small-shape-pill-.json.gz +0 -0
- package/dist/tokens/source/scssVariables.json +88 -88
- package/dist/tokens/source/scssVariables.json.gz +0 -0
- package/dist/tokens/source/scssVariables.scss +44 -44
- package/dist/tokens/source/tokens.json +48 -48
- package/dist/tokens/source/tokens.json.gz +0 -0
- package/dist-node/scw-components.js +228 -212
- package/dist-node/scw.js +236 -220
- package/package.json +1 -1
- package/scripts/publish/releaseNotes.mjs +5 -0
package/dist/scw.js.gz
CHANGED
|
Binary file
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
} @else {
|
|
19
19
|
border-color: var( --scw-color-grey-10 );
|
|
20
20
|
}
|
|
21
|
-
box-shadow: 0px
|
|
21
|
+
box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin sizing {
|
|
@@ -58,24 +58,24 @@
|
|
|
58
58
|
|
|
59
59
|
@mixin absolute-layout {
|
|
60
60
|
position: absolute;
|
|
61
|
-
left: var( --scw-spacing-
|
|
61
|
+
left: var( --scw-spacing-3 );
|
|
62
62
|
width: 305.34px;
|
|
63
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
63
|
+
top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
64
64
|
height: 62px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
@mixin html-autolayout-margins {
|
|
68
68
|
display: inline-block;
|
|
69
|
-
margin-left: var( --scw-spacing-
|
|
70
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
71
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
72
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
69
|
+
margin-left: var( --scw-spacing-3 );
|
|
70
|
+
margin-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );
|
|
71
|
+
margin-top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
72
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@mixin html-autolayout-padding {
|
|
76
76
|
display: inline-block;
|
|
77
|
-
padding-left: var( --scw-spacing-
|
|
78
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
79
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
80
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
77
|
+
padding-left: var( --scw-spacing-3 );
|
|
78
|
+
padding-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );
|
|
79
|
+
padding-top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
80
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
|
|
81
81
|
}
|
|
@@ -9,12 +9,12 @@ $corner-radius-top-left: 30px;
|
|
|
9
9
|
$corner-radius-top-right: 30px;
|
|
10
10
|
$corner-radius-bottom-right: 30px;
|
|
11
11
|
$corner-radius-bottom-left: 30px;
|
|
12
|
-
$shadow-color: rgba(0,0,0,0.
|
|
12
|
+
$shadow-color: rgba(0,0,0,0.28);
|
|
13
13
|
$shadow-offset-x: 0px;
|
|
14
|
-
$shadow-offset-y:
|
|
15
|
-
$shadow-radius:
|
|
14
|
+
$shadow-offset-y: 7px;
|
|
15
|
+
$shadow-radius: 22px;
|
|
16
16
|
$shadow-spread: 0px;
|
|
17
|
-
$shadow: 0px
|
|
17
|
+
$shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
18
18
|
$width: 305.34px;
|
|
19
19
|
$height: 62px;
|
|
20
20
|
$constraint-horizontal: MIN;
|
|
@@ -27,12 +27,12 @@ $counter-axis-align-items: CENTER;
|
|
|
27
27
|
$item-spacing: calc( var( --scw-spacing-1 ) * 1.5 );
|
|
28
28
|
$layout-align: MIN;
|
|
29
29
|
$layout-grow: 0;
|
|
30
|
-
$top: calc( var( --scw-spacing-1 ) *
|
|
31
|
-
$top-percent:
|
|
32
|
-
$bottom: calc( var( --scw-spacing-1 ) *
|
|
33
|
-
$left: var( --scw-spacing-
|
|
34
|
-
$left-percent:
|
|
35
|
-
$right: calc( var( --scw-spacing-1 ) *
|
|
30
|
+
$top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
31
|
+
$top-percent: 48.3%;
|
|
32
|
+
$bottom: calc( var( --scw-spacing-1 ) * 22.8 );
|
|
33
|
+
$left: var( --scw-spacing-3 );
|
|
34
|
+
$left-percent: 37.05%;
|
|
35
|
+
$right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );
|
|
36
36
|
$padding-left: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
37
37
|
$padding-right: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
38
38
|
$padding-top: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
} @else {
|
|
19
19
|
border-color: var( --scw-color-grey-10 );
|
|
20
20
|
}
|
|
21
|
-
box-shadow: 0px
|
|
21
|
+
box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin sizing {
|
|
@@ -58,24 +58,24 @@
|
|
|
58
58
|
|
|
59
59
|
@mixin absolute-layout {
|
|
60
60
|
position: absolute;
|
|
61
|
-
left: var( --scw-spacing-
|
|
61
|
+
left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
62
62
|
width: 58.34px;
|
|
63
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
63
|
+
top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
64
64
|
height: 58.34px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
@mixin html-autolayout-margins {
|
|
68
68
|
display: inline-block;
|
|
69
|
-
margin-left: var( --scw-spacing-
|
|
70
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
71
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
72
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
69
|
+
margin-left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
70
|
+
margin-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );
|
|
71
|
+
margin-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
72
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@mixin html-autolayout-padding {
|
|
76
76
|
display: inline-block;
|
|
77
|
-
padding-left: var( --scw-spacing-
|
|
78
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
79
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
80
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
77
|
+
padding-left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
78
|
+
padding-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );
|
|
79
|
+
padding-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
80
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
81
81
|
}
|
|
@@ -9,12 +9,12 @@ $corner-radius-top-left: 30px;
|
|
|
9
9
|
$corner-radius-top-right: 30px;
|
|
10
10
|
$corner-radius-bottom-right: 30px;
|
|
11
11
|
$corner-radius-bottom-left: 30px;
|
|
12
|
-
$shadow-color: rgba(0,0,0,0.
|
|
12
|
+
$shadow-color: rgba(0,0,0,0.28);
|
|
13
13
|
$shadow-offset-x: 0px;
|
|
14
|
-
$shadow-offset-y:
|
|
15
|
-
$shadow-radius:
|
|
14
|
+
$shadow-offset-y: 7px;
|
|
15
|
+
$shadow-radius: 22px;
|
|
16
16
|
$shadow-spread: 0px;
|
|
17
|
-
$shadow: 0px
|
|
17
|
+
$shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
18
18
|
$width: 58.34px;
|
|
19
19
|
$height: 58.34px;
|
|
20
20
|
$constraint-horizontal: MIN;
|
|
@@ -27,12 +27,12 @@ $counter-axis-align-items: CENTER;
|
|
|
27
27
|
$item-spacing: calc( var( --scw-spacing-1 ) * 1.5 );
|
|
28
28
|
$layout-align: MIN;
|
|
29
29
|
$layout-grow: 0;
|
|
30
|
-
$top: calc( var( --scw-spacing-1 ) *
|
|
31
|
-
$top-percent:
|
|
32
|
-
$bottom: calc( var( --scw-spacing-1 ) *
|
|
33
|
-
$left: var( --scw-spacing-
|
|
34
|
-
$left-percent:
|
|
35
|
-
$right: calc( var( --scw-spacing-1 ) *
|
|
30
|
+
$top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
31
|
+
$top-percent: 90.85%;
|
|
32
|
+
$bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
33
|
+
$left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
34
|
+
$left-percent: 12.61%;
|
|
35
|
+
$right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );
|
|
36
36
|
$padding-left: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
37
37
|
$padding-right: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
38
38
|
$padding-top: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
$borderThemeVar: false
|
|
7
7
|
) {
|
|
8
8
|
@if $bgThemeVar {
|
|
9
|
-
background-color: var( #{$bgThemeVar}-
|
|
9
|
+
background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
10
10
|
} @else {
|
|
11
|
-
background-color: var( --scw-color-grey-
|
|
11
|
+
background-color: var( --scw-color-grey-10 );
|
|
12
12
|
}
|
|
13
13
|
border-radius: 30px 30px 30px 30px;
|
|
14
14
|
border-width: 1px;
|
|
15
15
|
border-style: solid;
|
|
16
16
|
@if $borderThemeVar {
|
|
17
|
-
border-color: var( #{$borderThemeVar}-
|
|
17
|
+
border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
18
18
|
} @else {
|
|
19
|
-
border-color: var( --scw-color-grey-
|
|
19
|
+
border-color: var( --scw-color-grey-10 );
|
|
20
20
|
}
|
|
21
|
-
box-shadow: 0px
|
|
21
|
+
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.42);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin sizing {
|
|
@@ -58,24 +58,24 @@
|
|
|
58
58
|
|
|
59
59
|
@mixin absolute-layout {
|
|
60
60
|
position: absolute;
|
|
61
|
-
left: var( --scw-spacing-
|
|
61
|
+
left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
62
62
|
width: 305.34px;
|
|
63
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
63
|
+
top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
64
64
|
height: 62px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
@mixin html-autolayout-margins {
|
|
68
68
|
display: inline-block;
|
|
69
|
-
margin-left: var( --scw-spacing-
|
|
70
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
71
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
72
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
69
|
+
margin-left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
70
|
+
margin-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );
|
|
71
|
+
margin-top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
72
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@mixin html-autolayout-padding {
|
|
76
76
|
display: inline-block;
|
|
77
|
-
padding-left: var( --scw-spacing-
|
|
78
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
79
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
80
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
77
|
+
padding-left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
78
|
+
padding-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );
|
|
79
|
+
padding-top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
80
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
|
|
81
81
|
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
$background-color: var( --scw-color-grey-
|
|
3
|
+
$background-color: var( --scw-color-grey-10 );
|
|
4
4
|
$blend-mode: NORMAL;
|
|
5
|
-
$stroke-color: var( --scw-color-grey-
|
|
5
|
+
$stroke-color: var( --scw-color-grey-10 );
|
|
6
6
|
$stroke-weight: 1px;
|
|
7
7
|
$stroke-align: OUTSIDE;
|
|
8
8
|
$corner-radius-top-left: 30px;
|
|
9
9
|
$corner-radius-top-right: 30px;
|
|
10
10
|
$corner-radius-bottom-right: 30px;
|
|
11
11
|
$corner-radius-bottom-left: 30px;
|
|
12
|
-
$shadow-color: rgba(0,0,0,0.
|
|
12
|
+
$shadow-color: rgba(0,0,0,0.42);
|
|
13
13
|
$shadow-offset-x: 0px;
|
|
14
|
-
$shadow-offset-y:
|
|
15
|
-
$shadow-radius:
|
|
14
|
+
$shadow-offset-y: 8px;
|
|
15
|
+
$shadow-radius: 24px;
|
|
16
16
|
$shadow-spread: 0px;
|
|
17
|
-
$shadow: 0px
|
|
17
|
+
$shadow: 0px 8px 24px 0px rgba(0,0,0,0.42);
|
|
18
18
|
$width: 305.34px;
|
|
19
19
|
$height: 62px;
|
|
20
20
|
$constraint-horizontal: MIN;
|
|
@@ -27,12 +27,12 @@ $counter-axis-align-items: CENTER;
|
|
|
27
27
|
$item-spacing: calc( var( --scw-spacing-1 ) * 1.5 );
|
|
28
28
|
$layout-align: MIN;
|
|
29
29
|
$layout-grow: 0;
|
|
30
|
-
$top: calc( var( --scw-spacing-1 ) *
|
|
31
|
-
$top-percent:
|
|
32
|
-
$bottom: calc( var( --scw-spacing-1 ) *
|
|
33
|
-
$left: var( --scw-spacing-
|
|
34
|
-
$left-percent:
|
|
35
|
-
$right: calc( var( --scw-spacing-1 ) *
|
|
30
|
+
$top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
31
|
+
$top-percent: 71.66%;
|
|
32
|
+
$bottom: calc( var( --scw-spacing-1 ) * 11.1 );
|
|
33
|
+
$left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
34
|
+
$left-percent: 37.26%;
|
|
35
|
+
$right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );
|
|
36
36
|
$padding-left: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
37
37
|
$padding-right: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
38
38
|
$padding-top: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
package/dist/tokens/segments/comp-scw-floating-button/_state-hover-size-small-shape-pill-mixins.scss
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
$borderThemeVar: false
|
|
7
7
|
) {
|
|
8
8
|
@if $bgThemeVar {
|
|
9
|
-
background-color: var( #{$bgThemeVar}-
|
|
9
|
+
background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
10
10
|
} @else {
|
|
11
|
-
background-color: var( --scw-color-grey-
|
|
11
|
+
background-color: var( --scw-color-grey-10 );
|
|
12
12
|
}
|
|
13
13
|
border-radius: 30px 30px 30px 30px;
|
|
14
14
|
border-width: 1px;
|
|
15
15
|
border-style: solid;
|
|
16
16
|
@if $borderThemeVar {
|
|
17
|
-
border-color: var( #{$borderThemeVar}-
|
|
17
|
+
border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
18
18
|
} @else {
|
|
19
|
-
border-color: var( --scw-color-grey-
|
|
19
|
+
border-color: var( --scw-color-grey-10 );
|
|
20
20
|
}
|
|
21
|
-
box-shadow: 0px
|
|
21
|
+
box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@mixin sizing {
|
|
@@ -58,24 +58,24 @@
|
|
|
58
58
|
|
|
59
59
|
@mixin absolute-layout {
|
|
60
60
|
position: absolute;
|
|
61
|
-
left: calc( var( --scw-spacing-1 ) *
|
|
61
|
+
left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
62
62
|
width: 58.34px;
|
|
63
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
63
|
+
top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
64
64
|
height: 58.34px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
@mixin html-autolayout-margins {
|
|
68
68
|
display: inline-block;
|
|
69
|
-
margin-left: calc( var( --scw-spacing-1 ) *
|
|
70
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
71
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
72
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
69
|
+
margin-left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
70
|
+
margin-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );
|
|
71
|
+
margin-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
72
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@mixin html-autolayout-padding {
|
|
76
76
|
display: inline-block;
|
|
77
|
-
padding-left: calc( var( --scw-spacing-1 ) *
|
|
78
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
79
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
80
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
77
|
+
padding-left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
78
|
+
padding-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );
|
|
79
|
+
padding-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
80
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
81
81
|
}
|
package/dist/tokens/segments/comp-scw-floating-button/_state-hover-size-small-shape-pill-vars.scss
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
$background-color: var( --scw-color-grey-
|
|
3
|
+
$background-color: var( --scw-color-grey-10 );
|
|
4
4
|
$blend-mode: NORMAL;
|
|
5
|
-
$stroke-color: var( --scw-color-grey-
|
|
5
|
+
$stroke-color: var( --scw-color-grey-10 );
|
|
6
6
|
$stroke-weight: 1px;
|
|
7
7
|
$stroke-align: OUTSIDE;
|
|
8
8
|
$corner-radius-top-left: 30px;
|
|
9
9
|
$corner-radius-top-right: 30px;
|
|
10
10
|
$corner-radius-bottom-right: 30px;
|
|
11
11
|
$corner-radius-bottom-left: 30px;
|
|
12
|
-
$shadow-color: rgba(0,0,0,0.
|
|
12
|
+
$shadow-color: rgba(0,0,0,0.28);
|
|
13
13
|
$shadow-offset-x: 0px;
|
|
14
|
-
$shadow-offset-y:
|
|
15
|
-
$shadow-radius:
|
|
14
|
+
$shadow-offset-y: 7px;
|
|
15
|
+
$shadow-radius: 22px;
|
|
16
16
|
$shadow-spread: 0px;
|
|
17
|
-
$shadow: 0px
|
|
17
|
+
$shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
18
18
|
$width: 58.34px;
|
|
19
19
|
$height: 58.34px;
|
|
20
20
|
$constraint-horizontal: MIN;
|
|
@@ -27,12 +27,12 @@ $counter-axis-align-items: CENTER;
|
|
|
27
27
|
$item-spacing: calc( var( --scw-spacing-1 ) * 1.5 );
|
|
28
28
|
$layout-align: MIN;
|
|
29
29
|
$layout-grow: 0;
|
|
30
|
-
$top: calc( var( --scw-spacing-1 ) *
|
|
31
|
-
$top-percent:
|
|
32
|
-
$bottom: calc( var( --scw-spacing-1 ) *
|
|
33
|
-
$left: calc( var( --scw-spacing-1 ) *
|
|
34
|
-
$left-percent:
|
|
35
|
-
$right: calc( var( --scw-spacing-1 ) *
|
|
30
|
+
$top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
31
|
+
$top-percent: 90.85%;
|
|
32
|
+
$bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
33
|
+
$left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
34
|
+
$left-percent: 43.24%;
|
|
35
|
+
$right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );
|
|
36
36
|
$padding-left: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
37
37
|
$padding-right: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
|
38
38
|
$padding-top: calc( var( --scw-spacing-1 ) * 1.6670000076293945 );
|
package/dist/tokens/source/componentScssMixins/components-scw-floating-button-shape-pill-.json
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
"namespace": "shape-pill-mixins"
|
|
6
6
|
},
|
|
7
7
|
"box": {
|
|
8
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px
|
|
9
|
-
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px
|
|
8
|
+
"output": "\n@mixin comp-scw-floating-button-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28); \n}",
|
|
9
|
+
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28); \n}",
|
|
10
10
|
"outputSegmentRef": "shape-pill-mixins.box"
|
|
11
11
|
},
|
|
12
12
|
"sizing": {
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"outputSegmentRef": "shape-pill-mixins.figma-autolayout"
|
|
36
36
|
},
|
|
37
37
|
"absolute-layout": {
|
|
38
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
39
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
38
|
+
"output": "\n@mixin comp-scw-floating-button-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-3 );\n width: 305.34px;\n top: calc( var( --scw-spacing-1 ) * 21.1 );\n height: 62px; \n}",
|
|
39
|
+
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-3 );\n width: 305.34px;\n top: calc( var( --scw-spacing-1 ) * 21.1 );\n height: 62px; \n}",
|
|
40
40
|
"outputSegmentRef": "shape-pill-mixins.absolute-layout"
|
|
41
41
|
},
|
|
42
42
|
"html-autolayout-margins": {
|
|
43
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
44
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
43
|
+
"output": "\n@mixin comp-scw-floating-button-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-3 );\n margin-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );\n margin-top: calc( var( --scw-spacing-1 ) * 21.1 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 22.8 );\n}",
|
|
44
|
+
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-3 );\n margin-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );\n margin-top: calc( var( --scw-spacing-1 ) * 21.1 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 22.8 );\n}",
|
|
45
45
|
"outputSegmentRef": "shape-pill-mixins.html-autolayout-margins"
|
|
46
46
|
},
|
|
47
47
|
"html-autolayout-padding": {
|
|
48
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
49
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
48
|
+
"output": "\n@mixin comp-scw-floating-button-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-3 );\n padding-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );\n padding-top: calc( var( --scw-spacing-1 ) * 21.1 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 22.8 );\n}",
|
|
49
|
+
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-3 );\n padding-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );\n padding-top: calc( var( --scw-spacing-1 ) * 21.1 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 22.8 );\n}",
|
|
50
50
|
"outputSegmentRef": "shape-pill-mixins.html-autolayout-padding"
|
|
51
51
|
}
|
|
52
52
|
}
|
package/dist/tokens/source/componentScssMixins/components-scw-floating-button-shape-pill-.json.gz
CHANGED
|
Binary file
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
"namespace": "size-small-shape-pill-mixins"
|
|
6
6
|
},
|
|
7
7
|
"box": {
|
|
8
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px
|
|
9
|
-
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px
|
|
8
|
+
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28); \n}",
|
|
9
|
+
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28); \n}",
|
|
10
10
|
"outputSegmentRef": "size-small-shape-pill-mixins.box"
|
|
11
11
|
},
|
|
12
12
|
"sizing": {
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"outputSegmentRef": "size-small-shape-pill-mixins.figma-autolayout"
|
|
36
36
|
},
|
|
37
37
|
"absolute-layout": {
|
|
38
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
39
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
38
|
+
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) * 3.3 );\n width: 58.34px;\n top: calc( var( --scw-spacing-1 ) * 42.6 );\n height: 58.34px; \n}",
|
|
39
|
+
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) * 3.3 );\n width: 58.34px;\n top: calc( var( --scw-spacing-1 ) * 42.6 );\n height: 58.34px; \n}",
|
|
40
40
|
"outputSegmentRef": "size-small-shape-pill-mixins.absolute-layout"
|
|
41
41
|
},
|
|
42
42
|
"html-autolayout-margins": {
|
|
43
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
44
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
43
|
+
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) * 3.3 );\n margin-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );\n margin-top: calc( var( --scw-spacing-1 ) * 42.6 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
44
|
+
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) * 3.3 );\n margin-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );\n margin-top: calc( var( --scw-spacing-1 ) * 42.6 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
45
45
|
"outputSegmentRef": "size-small-shape-pill-mixins.html-autolayout-margins"
|
|
46
46
|
},
|
|
47
47
|
"html-autolayout-padding": {
|
|
48
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
49
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
48
|
+
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) * 3.3 );\n padding-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );\n padding-top: calc( var( --scw-spacing-1 ) * 42.6 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
49
|
+
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) * 3.3 );\n padding-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );\n padding-top: calc( var( --scw-spacing-1 ) * 42.6 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
50
50
|
"outputSegmentRef": "size-small-shape-pill-mixins.html-autolayout-padding"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
Binary file
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
"namespace": "state-hover-shape-pill-mixins"
|
|
6
6
|
},
|
|
7
7
|
"box": {
|
|
8
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-
|
|
9
|
-
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-
|
|
8
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.42); \n}",
|
|
9
|
+
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.42); \n}",
|
|
10
10
|
"outputSegmentRef": "state-hover-shape-pill-mixins.box"
|
|
11
11
|
},
|
|
12
12
|
"sizing": {
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"outputSegmentRef": "state-hover-shape-pill-mixins.figma-autolayout"
|
|
36
36
|
},
|
|
37
37
|
"absolute-layout": {
|
|
38
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
39
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
38
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) * 3.1 );\n width: 305.34px;\n top: calc( var( --scw-spacing-1 ) * 32.8 );\n height: 62px; \n}",
|
|
39
|
+
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) * 3.1 );\n width: 305.34px;\n top: calc( var( --scw-spacing-1 ) * 32.8 );\n height: 62px; \n}",
|
|
40
40
|
"outputSegmentRef": "state-hover-shape-pill-mixins.absolute-layout"
|
|
41
41
|
},
|
|
42
42
|
"html-autolayout-margins": {
|
|
43
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
44
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
43
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) * 3.1 );\n margin-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );\n margin-top: calc( var( --scw-spacing-1 ) * 32.8 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
|
|
44
|
+
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) * 3.1 );\n margin-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );\n margin-top: calc( var( --scw-spacing-1 ) * 32.8 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
|
|
45
45
|
"outputSegmentRef": "state-hover-shape-pill-mixins.html-autolayout-margins"
|
|
46
46
|
},
|
|
47
47
|
"html-autolayout-padding": {
|
|
48
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
49
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
48
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) * 3.1 );\n padding-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );\n padding-top: calc( var( --scw-spacing-1 ) * 32.8 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
|
|
49
|
+
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) * 3.1 );\n padding-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );\n padding-top: calc( var( --scw-spacing-1 ) * 32.8 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );\n}",
|
|
50
50
|
"outputSegmentRef": "state-hover-shape-pill-mixins.html-autolayout-padding"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
Binary file
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
"namespace": "state-hover-size-small-shape-pill-mixins"
|
|
6
6
|
},
|
|
7
7
|
"box": {
|
|
8
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-
|
|
9
|
-
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-
|
|
8
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28); \n}",
|
|
9
|
+
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n background-color: var( --scw-color-grey-10 );\n }\n border-radius: 30px 30px 30px 30px;\n border-width: 1px;\n border-style: solid;\n @if $borderThemeVar {\n border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );\n } @else {\n border-color: var( --scw-color-grey-10 );\n }\n box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28); \n}",
|
|
10
10
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.box"
|
|
11
11
|
},
|
|
12
12
|
"sizing": {
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.figma-autolayout"
|
|
36
36
|
},
|
|
37
37
|
"absolute-layout": {
|
|
38
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) *
|
|
39
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) *
|
|
38
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) * 18.4 );\n width: 58.34px;\n top: calc( var( --scw-spacing-1 ) * 42.6 );\n height: 58.34px; \n}",
|
|
39
|
+
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) * 18.4 );\n width: 58.34px;\n top: calc( var( --scw-spacing-1 ) * 42.6 );\n height: 58.34px; \n}",
|
|
40
40
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.absolute-layout"
|
|
41
41
|
},
|
|
42
42
|
"html-autolayout-margins": {
|
|
43
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) *
|
|
44
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) *
|
|
43
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) * 18.4 );\n margin-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );\n margin-top: calc( var( --scw-spacing-1 ) * 42.6 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
44
|
+
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) * 18.4 );\n margin-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );\n margin-top: calc( var( --scw-spacing-1 ) * 42.6 );\n margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
45
45
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.html-autolayout-margins"
|
|
46
46
|
},
|
|
47
47
|
"html-autolayout-padding": {
|
|
48
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) *
|
|
49
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) *
|
|
48
|
+
"output": "\n@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) * 18.4 );\n padding-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );\n padding-top: calc( var( --scw-spacing-1 ) * 42.6 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
49
|
+
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) * 18.4 );\n padding-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );\n padding-top: calc( var( --scw-spacing-1 ) * 42.6 );\n padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );\n}",
|
|
50
50
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.html-autolayout-padding"
|
|
51
51
|
}
|
|
52
52
|
}
|