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
|
@@ -132543,8 +132543,8 @@
|
|
|
132543
132543
|
"namespace": "shape-pill-mixins"
|
|
132544
132544
|
},
|
|
132545
132545
|
"box": {
|
|
132546
|
-
"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
|
|
132547
|
-
"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
|
|
132546
|
+
"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}",
|
|
132547
|
+
"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}",
|
|
132548
132548
|
"outputSegmentRef": "shape-pill-mixins.box"
|
|
132549
132549
|
},
|
|
132550
132550
|
"sizing": {
|
|
@@ -132573,18 +132573,18 @@
|
|
|
132573
132573
|
"outputSegmentRef": "shape-pill-mixins.figma-autolayout"
|
|
132574
132574
|
},
|
|
132575
132575
|
"absolute-layout": {
|
|
132576
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
132577
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
132576
|
+
"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}",
|
|
132577
|
+
"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}",
|
|
132578
132578
|
"outputSegmentRef": "shape-pill-mixins.absolute-layout"
|
|
132579
132579
|
},
|
|
132580
132580
|
"html-autolayout-margins": {
|
|
132581
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
132582
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
132581
|
+
"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}",
|
|
132582
|
+
"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}",
|
|
132583
132583
|
"outputSegmentRef": "shape-pill-mixins.html-autolayout-margins"
|
|
132584
132584
|
},
|
|
132585
132585
|
"html-autolayout-padding": {
|
|
132586
|
-
"output": "\n@mixin comp-scw-floating-button-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
132587
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
132586
|
+
"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}",
|
|
132587
|
+
"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}",
|
|
132588
132588
|
"outputSegmentRef": "shape-pill-mixins.html-autolayout-padding"
|
|
132589
132589
|
}
|
|
132590
132590
|
},
|
|
@@ -132850,8 +132850,8 @@
|
|
|
132850
132850
|
"namespace": "size-small-shape-pill-mixins"
|
|
132851
132851
|
},
|
|
132852
132852
|
"box": {
|
|
132853
|
-
"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
|
|
132854
|
-
"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
|
|
132853
|
+
"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}",
|
|
132854
|
+
"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}",
|
|
132855
132855
|
"outputSegmentRef": "size-small-shape-pill-mixins.box"
|
|
132856
132856
|
},
|
|
132857
132857
|
"sizing": {
|
|
@@ -132880,18 +132880,18 @@
|
|
|
132880
132880
|
"outputSegmentRef": "size-small-shape-pill-mixins.figma-autolayout"
|
|
132881
132881
|
},
|
|
132882
132882
|
"absolute-layout": {
|
|
132883
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
132884
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
132883
|
+
"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}",
|
|
132884
|
+
"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}",
|
|
132885
132885
|
"outputSegmentRef": "size-small-shape-pill-mixins.absolute-layout"
|
|
132886
132886
|
},
|
|
132887
132887
|
"html-autolayout-margins": {
|
|
132888
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
132889
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
132888
|
+
"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}",
|
|
132889
|
+
"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}",
|
|
132890
132890
|
"outputSegmentRef": "size-small-shape-pill-mixins.html-autolayout-margins"
|
|
132891
132891
|
},
|
|
132892
132892
|
"html-autolayout-padding": {
|
|
132893
|
-
"output": "\n@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
132894
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
132893
|
+
"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}",
|
|
132894
|
+
"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}",
|
|
132895
132895
|
"outputSegmentRef": "size-small-shape-pill-mixins.html-autolayout-padding"
|
|
132896
132896
|
}
|
|
132897
132897
|
},
|
|
@@ -133058,8 +133058,8 @@
|
|
|
133058
133058
|
"namespace": "state-hover-size-small-shape-pill-mixins"
|
|
133059
133059
|
},
|
|
133060
133060
|
"box": {
|
|
133061
|
-
"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}-
|
|
133062
|
-
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-
|
|
133061
|
+
"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}",
|
|
133062
|
+
"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}",
|
|
133063
133063
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.box"
|
|
133064
133064
|
},
|
|
133065
133065
|
"sizing": {
|
|
@@ -133088,18 +133088,18 @@
|
|
|
133088
133088
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.figma-autolayout"
|
|
133089
133089
|
},
|
|
133090
133090
|
"absolute-layout": {
|
|
133091
|
-
"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 ) *
|
|
133092
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: calc( var( --scw-spacing-1 ) *
|
|
133091
|
+
"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}",
|
|
133092
|
+
"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}",
|
|
133093
133093
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.absolute-layout"
|
|
133094
133094
|
},
|
|
133095
133095
|
"html-autolayout-margins": {
|
|
133096
|
-
"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 ) *
|
|
133097
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: calc( var( --scw-spacing-1 ) *
|
|
133096
|
+
"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}",
|
|
133097
|
+
"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}",
|
|
133098
133098
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.html-autolayout-margins"
|
|
133099
133099
|
},
|
|
133100
133100
|
"html-autolayout-padding": {
|
|
133101
|
-
"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 ) *
|
|
133102
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: calc( var( --scw-spacing-1 ) *
|
|
133101
|
+
"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}",
|
|
133102
|
+
"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}",
|
|
133103
133103
|
"outputSegmentRef": "state-hover-size-small-shape-pill-mixins.html-autolayout-padding"
|
|
133104
133104
|
}
|
|
133105
133105
|
},
|
|
@@ -133266,8 +133266,8 @@
|
|
|
133266
133266
|
"namespace": "state-hover-shape-pill-mixins"
|
|
133267
133267
|
},
|
|
133268
133268
|
"box": {
|
|
133269
|
-
"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}-
|
|
133270
|
-
"outputSegment": "\n@mixin box (\n $bgThemeVar: false, \n $borderThemeVar: false\n) { \n @if $bgThemeVar {\n background-color: var( #{$bgThemeVar}-
|
|
133269
|
+
"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}",
|
|
133270
|
+
"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}",
|
|
133271
133271
|
"outputSegmentRef": "state-hover-shape-pill-mixins.box"
|
|
133272
133272
|
},
|
|
133273
133273
|
"sizing": {
|
|
@@ -133296,18 +133296,18 @@
|
|
|
133296
133296
|
"outputSegmentRef": "state-hover-shape-pill-mixins.figma-autolayout"
|
|
133297
133297
|
},
|
|
133298
133298
|
"absolute-layout": {
|
|
133299
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
133300
|
-
"outputSegment": "\n@mixin absolute-layout {\n position: absolute;\n left: var( --scw-spacing-
|
|
133299
|
+
"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}",
|
|
133300
|
+
"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}",
|
|
133301
133301
|
"outputSegmentRef": "state-hover-shape-pill-mixins.absolute-layout"
|
|
133302
133302
|
},
|
|
133303
133303
|
"html-autolayout-margins": {
|
|
133304
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
133305
|
-
"outputSegment": "\n@mixin html-autolayout-margins {\n display: inline-block;\n margin-left: var( --scw-spacing-
|
|
133304
|
+
"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}",
|
|
133305
|
+
"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}",
|
|
133306
133306
|
"outputSegmentRef": "state-hover-shape-pill-mixins.html-autolayout-margins"
|
|
133307
133307
|
},
|
|
133308
133308
|
"html-autolayout-padding": {
|
|
133309
|
-
"output": "\n@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
133310
|
-
"outputSegment": "\n@mixin html-autolayout-padding {\n display: inline-block;\n padding-left: var( --scw-spacing-
|
|
133309
|
+
"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}",
|
|
133310
|
+
"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}",
|
|
133311
133311
|
"outputSegmentRef": "state-hover-shape-pill-mixins.html-autolayout-padding"
|
|
133312
133312
|
}
|
|
133313
133313
|
},
|
|
Binary file
|
|
@@ -160481,7 +160481,7 @@
|
|
|
160481
160481
|
} @else {
|
|
160482
160482
|
border-color: var( --scw-color-grey-10 );
|
|
160483
160483
|
}
|
|
160484
|
-
box-shadow: 0px
|
|
160484
|
+
box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
160485
160485
|
}
|
|
160486
160486
|
|
|
160487
160487
|
@mixin comp-scw-floating-button-shape-pill--sizing {
|
|
@@ -160521,26 +160521,26 @@
|
|
|
160521
160521
|
|
|
160522
160522
|
@mixin comp-scw-floating-button-shape-pill--absolute-layout {
|
|
160523
160523
|
position: absolute;
|
|
160524
|
-
left: var( --scw-spacing-
|
|
160524
|
+
left: var( --scw-spacing-3 );
|
|
160525
160525
|
width: 305.34px;
|
|
160526
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
160526
|
+
top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
160527
160527
|
height: 62px;
|
|
160528
160528
|
}
|
|
160529
160529
|
|
|
160530
160530
|
@mixin comp-scw-floating-button-shape-pill--html-autolayout-margins {
|
|
160531
160531
|
display: inline-block;
|
|
160532
|
-
margin-left: var( --scw-spacing-
|
|
160533
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
160534
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
160535
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
160532
|
+
margin-left: var( --scw-spacing-3 );
|
|
160533
|
+
margin-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );
|
|
160534
|
+
margin-top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
160535
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
|
|
160536
160536
|
}
|
|
160537
160537
|
|
|
160538
160538
|
@mixin comp-scw-floating-button-shape-pill--html-autolayout-padding {
|
|
160539
160539
|
display: inline-block;
|
|
160540
|
-
padding-left: var( --scw-spacing-
|
|
160541
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
160542
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
160543
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
160540
|
+
padding-left: var( --scw-spacing-3 );
|
|
160541
|
+
padding-right: calc( var( --scw-spacing-1 ) * 15.766000366210937 );
|
|
160542
|
+
padding-top: calc( var( --scw-spacing-1 ) * 21.1 );
|
|
160543
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 22.8 );
|
|
160544
160544
|
}
|
|
160545
160545
|
|
|
160546
160546
|
|
|
@@ -160858,7 +160858,7 @@
|
|
|
160858
160858
|
} @else {
|
|
160859
160859
|
border-color: var( --scw-color-grey-10 );
|
|
160860
160860
|
}
|
|
160861
|
-
box-shadow: 0px
|
|
160861
|
+
box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
160862
160862
|
}
|
|
160863
160863
|
|
|
160864
160864
|
@mixin comp-scw-floating-button-size-small-shape-pill--sizing {
|
|
@@ -160898,26 +160898,26 @@
|
|
|
160898
160898
|
|
|
160899
160899
|
@mixin comp-scw-floating-button-size-small-shape-pill--absolute-layout {
|
|
160900
160900
|
position: absolute;
|
|
160901
|
-
left: var( --scw-spacing-
|
|
160901
|
+
left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
160902
160902
|
width: 58.34px;
|
|
160903
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
160903
|
+
top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
160904
160904
|
height: 58.34px;
|
|
160905
160905
|
}
|
|
160906
160906
|
|
|
160907
160907
|
@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-margins {
|
|
160908
160908
|
display: inline-block;
|
|
160909
|
-
margin-left: var( --scw-spacing-
|
|
160910
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
160911
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
160912
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
160909
|
+
margin-left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
160910
|
+
margin-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );
|
|
160911
|
+
margin-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
160912
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
160913
160913
|
}
|
|
160914
160914
|
|
|
160915
160915
|
@mixin comp-scw-floating-button-size-small-shape-pill--html-autolayout-padding {
|
|
160916
160916
|
display: inline-block;
|
|
160917
|
-
padding-left: var( --scw-spacing-
|
|
160918
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
160919
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
160920
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
160917
|
+
padding-left: calc( var( --scw-spacing-1 ) * 3.3 );
|
|
160918
|
+
padding-right: calc( var( --scw-spacing-1 ) * 40.16599998474121 );
|
|
160919
|
+
padding-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
160920
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
160921
160921
|
}
|
|
160922
160922
|
|
|
160923
160923
|
|
|
@@ -161102,19 +161102,19 @@
|
|
|
161102
161102
|
$borderThemeVar: false
|
|
161103
161103
|
) {
|
|
161104
161104
|
@if $bgThemeVar {
|
|
161105
|
-
background-color: var( #{$bgThemeVar}-
|
|
161105
|
+
background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
161106
161106
|
} @else {
|
|
161107
|
-
background-color: var( --scw-color-grey-
|
|
161107
|
+
background-color: var( --scw-color-grey-10 );
|
|
161108
161108
|
}
|
|
161109
161109
|
border-radius: 30px 30px 30px 30px;
|
|
161110
161110
|
border-width: 1px;
|
|
161111
161111
|
border-style: solid;
|
|
161112
161112
|
@if $borderThemeVar {
|
|
161113
|
-
border-color: var( #{$borderThemeVar}-
|
|
161113
|
+
border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
161114
161114
|
} @else {
|
|
161115
|
-
border-color: var( --scw-color-grey-
|
|
161115
|
+
border-color: var( --scw-color-grey-10 );
|
|
161116
161116
|
}
|
|
161117
|
-
box-shadow: 0px
|
|
161117
|
+
box-shadow: 0px 7px 22px 0px rgba(0,0,0,0.28);
|
|
161118
161118
|
}
|
|
161119
161119
|
|
|
161120
161120
|
@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--sizing {
|
|
@@ -161154,26 +161154,26 @@
|
|
|
161154
161154
|
|
|
161155
161155
|
@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--absolute-layout {
|
|
161156
161156
|
position: absolute;
|
|
161157
|
-
left: calc( var( --scw-spacing-1 ) *
|
|
161157
|
+
left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
161158
161158
|
width: 58.34px;
|
|
161159
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
161159
|
+
top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
161160
161160
|
height: 58.34px;
|
|
161161
161161
|
}
|
|
161162
161162
|
|
|
161163
161163
|
@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--html-autolayout-margins {
|
|
161164
161164
|
display: inline-block;
|
|
161165
|
-
margin-left: calc( var( --scw-spacing-1 ) *
|
|
161166
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
161167
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
161168
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
161165
|
+
margin-left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
161166
|
+
margin-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );
|
|
161167
|
+
margin-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
161168
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
161169
161169
|
}
|
|
161170
161170
|
|
|
161171
161171
|
@mixin comp-scw-floating-button-state-hover-size-small-shape-pill--html-autolayout-padding {
|
|
161172
161172
|
display: inline-block;
|
|
161173
|
-
padding-left: calc( var( --scw-spacing-1 ) *
|
|
161174
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
161175
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
161176
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
161173
|
+
padding-left: calc( var( --scw-spacing-1 ) * 18.4 );
|
|
161174
|
+
padding-right: calc( var( --scw-spacing-1 ) * 25.06599998474121 );
|
|
161175
|
+
padding-top: calc( var( --scw-spacing-1 ) * 42.6 );
|
|
161176
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 1.665999984741211 );
|
|
161177
161177
|
}
|
|
161178
161178
|
|
|
161179
161179
|
|
|
@@ -161358,19 +161358,19 @@
|
|
|
161358
161358
|
$borderThemeVar: false
|
|
161359
161359
|
) {
|
|
161360
161360
|
@if $bgThemeVar {
|
|
161361
|
-
background-color: var( #{$bgThemeVar}-
|
|
161361
|
+
background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
161362
161362
|
} @else {
|
|
161363
|
-
background-color: var( --scw-color-grey-
|
|
161363
|
+
background-color: var( --scw-color-grey-10 );
|
|
161364
161364
|
}
|
|
161365
161365
|
border-radius: 30px 30px 30px 30px;
|
|
161366
161366
|
border-width: 1px;
|
|
161367
161367
|
border-style: solid;
|
|
161368
161368
|
@if $borderThemeVar {
|
|
161369
|
-
border-color: var( #{$borderThemeVar}-
|
|
161369
|
+
border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );
|
|
161370
161370
|
} @else {
|
|
161371
|
-
border-color: var( --scw-color-grey-
|
|
161371
|
+
border-color: var( --scw-color-grey-10 );
|
|
161372
161372
|
}
|
|
161373
|
-
box-shadow: 0px
|
|
161373
|
+
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.42);
|
|
161374
161374
|
}
|
|
161375
161375
|
|
|
161376
161376
|
@mixin comp-scw-floating-button-state-hover-shape-pill--sizing {
|
|
@@ -161410,26 +161410,26 @@
|
|
|
161410
161410
|
|
|
161411
161411
|
@mixin comp-scw-floating-button-state-hover-shape-pill--absolute-layout {
|
|
161412
161412
|
position: absolute;
|
|
161413
|
-
left: var( --scw-spacing-
|
|
161413
|
+
left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
161414
161414
|
width: 305.34px;
|
|
161415
|
-
top: calc( var( --scw-spacing-1 ) *
|
|
161415
|
+
top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
161416
161416
|
height: 62px;
|
|
161417
161417
|
}
|
|
161418
161418
|
|
|
161419
161419
|
@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-margins {
|
|
161420
161420
|
display: inline-block;
|
|
161421
|
-
margin-left: var( --scw-spacing-
|
|
161422
|
-
margin-right: calc( var( --scw-spacing-1 ) *
|
|
161423
|
-
margin-top: calc( var( --scw-spacing-1 ) *
|
|
161424
|
-
margin-bottom: calc( var( --scw-spacing-1 ) *
|
|
161421
|
+
margin-left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
161422
|
+
margin-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );
|
|
161423
|
+
margin-top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
161424
|
+
margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
|
|
161425
161425
|
}
|
|
161426
161426
|
|
|
161427
161427
|
@mixin comp-scw-floating-button-state-hover-shape-pill--html-autolayout-padding {
|
|
161428
161428
|
display: inline-block;
|
|
161429
|
-
padding-left: var( --scw-spacing-
|
|
161430
|
-
padding-right: calc( var( --scw-spacing-1 ) *
|
|
161431
|
-
padding-top: calc( var( --scw-spacing-1 ) *
|
|
161432
|
-
padding-bottom: calc( var( --scw-spacing-1 ) *
|
|
161429
|
+
padding-left: calc( var( --scw-spacing-1 ) * 3.1 );
|
|
161430
|
+
padding-right: calc( var( --scw-spacing-1 ) * 15.666000366210938 );
|
|
161431
|
+
padding-top: calc( var( --scw-spacing-1 ) * 32.8 );
|
|
161432
|
+
padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
|
|
161433
161433
|
}
|
|
161434
161434
|
|
|
161435
161435
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
constructor (config) {// version, extraCssPromise, config ) {
|
|
5
5
|
this.prefix = 'scw';// dynamic
|
|
6
|
-
this.buildUUID = '
|
|
6
|
+
this.buildUUID = '882ef893-cf04-4b53-8fb0-0f29db7ccc85';// dynamic
|
|
7
7
|
|
|
8
8
|
this.generator = false;
|
|
9
9
|
this.initialized = false;
|
|
Binary file
|