@veeqo/ui 14.7.1 → 14.8.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/components/Checkbox/Checkbox.cjs +2 -2
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +2 -2
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.cjs +9 -0
- package/dist/components/Checkbox/Checkbox.module.scss.cjs.map +1 -0
- package/dist/components/Checkbox/Checkbox.module.scss.js +7 -0
- package/dist/components/Checkbox/Checkbox.module.scss.js.map +1 -0
- package/dist/components/Choice/Choice.cjs +21 -11
- package/dist/components/Choice/Choice.cjs.map +1 -1
- package/dist/components/Choice/Choice.js +21 -11
- package/dist/components/Choice/Choice.js.map +1 -1
- package/dist/components/Choice/Choice.module.scss.cjs +9 -0
- package/dist/components/Choice/Choice.module.scss.cjs.map +1 -0
- package/dist/components/Choice/Choice.module.scss.js +7 -0
- package/dist/components/Choice/Choice.module.scss.js.map +1 -0
- package/dist/components/ChoiceList/ChoiceList.cjs +3 -3
- package/dist/components/ChoiceList/ChoiceList.cjs.map +1 -1
- package/dist/components/ChoiceList/ChoiceList.js +3 -3
- package/dist/components/ChoiceList/ChoiceList.js.map +1 -1
- package/dist/components/ChoiceList/ChoiceList.module.scss.cjs +9 -0
- package/dist/components/ChoiceList/ChoiceList.module.scss.cjs.map +1 -0
- package/dist/components/ChoiceList/ChoiceList.module.scss.js +7 -0
- package/dist/components/ChoiceList/ChoiceList.module.scss.js.map +1 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +4 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +4 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs +4 -2
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js +4 -2
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +4 -2
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +4 -2
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +4 -2
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +4 -2
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.cjs +0 -1
- package/dist/components/DimensionsInput/DimensionsInput.cjs.map +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.js +0 -1
- package/dist/components/DimensionsInput/DimensionsInput.js.map +1 -1
- package/dist/components/InputAffix/InputAffix.cjs +6 -10
- package/dist/components/InputAffix/InputAffix.cjs.map +1 -1
- package/dist/components/InputAffix/InputAffix.d.ts +4 -6
- package/dist/components/InputAffix/InputAffix.js +6 -9
- package/dist/components/InputAffix/InputAffix.js.map +1 -1
- package/dist/components/InputAffix/InputAffix.module.scss.cjs +9 -0
- package/dist/components/InputAffix/InputAffix.module.scss.cjs.map +1 -0
- package/dist/components/InputAffix/InputAffix.module.scss.js +7 -0
- package/dist/components/InputAffix/InputAffix.module.scss.js.map +1 -0
- package/dist/components/PriceInput/PriceInput.cjs +1 -1
- package/dist/components/PriceInput/PriceInput.cjs.map +1 -1
- package/dist/components/PriceInput/PriceInput.js +1 -1
- package/dist/components/PriceInput/PriceInput.js.map +1 -1
- package/dist/components/Radio/Radio.cjs +2 -2
- package/dist/components/Radio/Radio.cjs.map +1 -1
- package/dist/components/Radio/Radio.js +2 -2
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Radio/Radio.module.scss.cjs +9 -0
- package/dist/components/Radio/Radio.module.scss.cjs.map +1 -0
- package/dist/components/Radio/Radio.module.scss.js +7 -0
- package/dist/components/Radio/Radio.module.scss.js.map +1 -0
- package/dist/components/ToggleButton/ToggleButton.cjs +2 -2
- package/dist/components/ToggleButton/ToggleButton.cjs.map +1 -1
- package/dist/components/ToggleButton/ToggleButton.d.ts +2 -8
- package/dist/components/ToggleButton/ToggleButton.js +2 -2
- package/dist/components/ToggleButton/ToggleButton.js.map +1 -1
- package/dist/components/ToggleButton/types.d.ts +8 -0
- package/dist/components/WeightInput/WeightInput.cjs +0 -1
- package/dist/components/WeightInput/WeightInput.cjs.map +1 -1
- package/dist/components/WeightInput/WeightInput.js +0 -1
- package/dist/components/WeightInput/WeightInput.js.map +1 -1
- package/dist/utils/forms/inputStyles.cjs +1 -2
- package/dist/utils/forms/inputStyles.cjs.map +1 -1
- package/dist/utils/forms/inputStyles.js +2 -2
- package/dist/utils/forms/inputStyles.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/Checkbox/styled.cjs +0 -14
- package/dist/components/Checkbox/styled.cjs.map +0 -1
- package/dist/components/Checkbox/styled.d.ts +0 -1
- package/dist/components/Checkbox/styled.js +0 -8
- package/dist/components/Checkbox/styled.js.map +0 -1
- package/dist/components/Choice/components/styled.cjs +0 -30
- package/dist/components/Choice/components/styled.cjs.map +0 -1
- package/dist/components/Choice/components/styled.d.ts +0 -14
- package/dist/components/Choice/components/styled.js +0 -18
- package/dist/components/Choice/components/styled.js.map +0 -1
- package/dist/components/ChoiceList/styled.cjs +0 -15
- package/dist/components/ChoiceList/styled.cjs.map +0 -1
- package/dist/components/ChoiceList/styled.d.ts +0 -2
- package/dist/components/ChoiceList/styled.js +0 -8
- package/dist/components/ChoiceList/styled.js.map +0 -1
- package/dist/components/Radio/styled.cjs +0 -12
- package/dist/components/Radio/styled.cjs.map +0 -1
- package/dist/components/Radio/styled.d.ts +0 -1
- package/dist/components/Radio/styled.js +0 -6
- package/dist/components/Radio/styled.js.map +0 -1
- package/dist/components/ToggleButton/styled.cjs +0 -49
- package/dist/components/ToggleButton/styled.cjs.map +0 -1
- package/dist/components/ToggleButton/styled.d.ts +0 -1
- package/dist/components/ToggleButton/styled.js +0 -43
- package/dist/components/ToggleButton/styled.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n display: flex;\n flex-direction: column;\n border: 0;\n\n & > * + * {\n margin-top: 16px;\n }\n`;\n\nexport const Legend = styled.legend`\n font-family: ${theme.text.inputLabel.fontFamily};\n font-size: ${theme.text.inputLabel.fontSize};\n font-style: ${theme.text.inputLabel.fontStyle};\n font-weight: ${theme.text.inputLabel.fontWeight};\n line-height: ${theme.text.inputLabel.lineHeight};\n text-decoration: ${theme.text.inputLabel.textDecoration};\n color: ${theme.text.inputLabel.color};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAGa,QAAQ,GAAGA,uBAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,WAAA,EAClCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAA,YAAA,EAC7BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,iBAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAA,OAAA,EAC9CA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { theme } from '../../theme/index.js';
|
|
3
|
-
|
|
4
|
-
const Fieldset = styled.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--bygv6o" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
|
|
5
|
-
const Legend = styled.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--18baj4v" }) `font-family:${theme.text.inputLabel.fontFamily};font-size:${theme.text.inputLabel.fontSize};font-style:${theme.text.inputLabel.fontStyle};font-weight:${theme.text.inputLabel.fontWeight};line-height:${theme.text.inputLabel.lineHeight};text-decoration:${theme.text.inputLabel.textDecoration};color:${theme.text.inputLabel.color};`;
|
|
6
|
-
|
|
7
|
-
export { Fieldset, Legend };
|
|
8
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n padding: 0;\n display: flex;\n flex-direction: column;\n border: 0;\n\n & > * + * {\n margin-top: 16px;\n }\n`;\n\nexport const Legend = styled.legend`\n font-family: ${theme.text.inputLabel.fontFamily};\n font-size: ${theme.text.inputLabel.fontSize};\n font-style: ${theme.text.inputLabel.fontStyle};\n font-weight: ${theme.text.inputLabel.fontWeight};\n line-height: ${theme.text.inputLabel.lineHeight};\n text-decoration: ${theme.text.inputLabel.textDecoration};\n color: ${theme.text.inputLabel.color};\n`;\n"],"names":[],"mappings":";;;MAGa,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,WAAA,EAClC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAA,YAAA,EAC7B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,iBAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAA,OAAA,EAC9C,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
|
|
5
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
6
|
-
|
|
7
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
8
|
-
|
|
9
|
-
const Input = styled__default.default.input.withConfig({ displayName: "vui--Input", componentId: "vui--1e1oks4" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
|
|
10
|
-
|
|
11
|
-
exports.Input = Input;
|
|
12
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Radio/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Input = styled.input`\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid #637381;\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n flex-shrink: 0;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: #0079d1;\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: #0079d1;\n border-radius: 50%;\n }\n\n &:hover {\n border-color: #0079d1;\n }\n\n &:active {\n border-color: #0079d1;\n }\n\n &:focus {\n box-shadow: 0 0 0 4px #80bce8;\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: #dfe3e8;\n border-color: #959fa8;\n cursor: default;\n }\n\n &:disabled::before {\n background-color: #637381;\n }\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,KAAK,GAAGA,uBAAM,CAAC,KAAK;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
|
|
3
|
-
const Input = styled.input.withConfig({ displayName: "vui--Input", componentId: "vui--1e1oks4" }) `appearance:none;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;margin:3px;background-color:transparent;border:2px solid #637381;border-radius:50%;outline:none;cursor:pointer;flex-shrink:0;transition:box-shadow 0.1s;&:checked{position:relative;border-color:#0079d1;}&:checked::before{content:'';width:10px;height:10px;position:absolute;top:2px;left:2px;background-color:#0079d1;border-radius:50%;}&:hover{border-color:#0079d1;}&:active{border-color:#0079d1;}&:focus{box-shadow:0 0 0 4px #80bce8;outline:0;}&:disabled{box-shadow:none;background-color:#dfe3e8;border-color:#959fa8;cursor:default;}&:disabled::before{background-color:#637381;}`;
|
|
4
|
-
|
|
5
|
-
export { Input };
|
|
6
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Radio/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Input = styled.input`\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid #637381;\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n flex-shrink: 0;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: #0079d1;\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: #0079d1;\n border-radius: 50%;\n }\n\n &:hover {\n border-color: #0079d1;\n }\n\n &:active {\n border-color: #0079d1;\n }\n\n &:focus {\n box-shadow: 0 0 0 4px #80bce8;\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: #dfe3e8;\n border-color: #959fa8;\n cursor: default;\n }\n\n &:disabled::before {\n background-color: #637381;\n }\n`;\n"],"names":[],"mappings":";;MAEa,KAAK,GAAG,MAAM,CAAC,KAAK;;;;"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var index = require('../../theme/index.cjs');
|
|
5
|
-
|
|
6
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
-
|
|
8
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
-
|
|
10
|
-
const StyledButton = styled__default.default.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--x718nd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${index.theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
|
|
11
|
-
let height = '40px';
|
|
12
|
-
let paddingLeft = '24px';
|
|
13
|
-
let paddingRight = '24px';
|
|
14
|
-
let borderRadius = '8px';
|
|
15
|
-
let fontSize = '16px';
|
|
16
|
-
let outlineWidth = '4px';
|
|
17
|
-
let backgroundColor = 'white';
|
|
18
|
-
let borderColor = '#CDD1D5';
|
|
19
|
-
let color = '#37424D';
|
|
20
|
-
if (size === 'sm') {
|
|
21
|
-
height = '32px';
|
|
22
|
-
paddingLeft = '16px';
|
|
23
|
-
paddingRight = '16px';
|
|
24
|
-
borderRadius = '4px';
|
|
25
|
-
fontSize = '14px';
|
|
26
|
-
outlineWidth = '2px';
|
|
27
|
-
}
|
|
28
|
-
if (checked) {
|
|
29
|
-
backgroundColor = '#0079D1';
|
|
30
|
-
borderColor = '#0079D1';
|
|
31
|
-
color = 'white';
|
|
32
|
-
}
|
|
33
|
-
return `
|
|
34
|
-
--outline-width: ${outlineWidth};
|
|
35
|
-
|
|
36
|
-
height: ${height};
|
|
37
|
-
padding-left: ${paddingLeft};
|
|
38
|
-
padding-right: ${paddingRight};
|
|
39
|
-
border-radius: ${borderRadius};
|
|
40
|
-
font-size: ${fontSize};
|
|
41
|
-
|
|
42
|
-
background-color: ${backgroundColor};
|
|
43
|
-
border-color: ${borderColor};
|
|
44
|
-
color: ${color};
|
|
45
|
-
`;
|
|
46
|
-
}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};}&:active{background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};border-color:${({ checked }) => (checked ? '#005A9C' : '#0079D1')};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;
|
|
47
|
-
|
|
48
|
-
exports.StyledButton = StyledButton;
|
|
49
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/ToggleButton/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nexport const StyledButton = styled.button<any>`\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-family: ${theme.fontFamily};\n font-weight: 400;\n border: 1px solid;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n ${({ size, checked }) => {\n let height = '40px';\n let paddingLeft = '24px';\n let paddingRight = '24px';\n let borderRadius = '8px';\n let fontSize = '16px';\n let outlineWidth = '4px';\n\n let backgroundColor = 'white';\n let borderColor = '#CDD1D5';\n let color = '#37424D';\n\n if (size === 'sm') {\n height = '32px';\n paddingLeft = '16px';\n paddingRight = '16px';\n borderRadius = '4px';\n fontSize = '14px';\n outlineWidth = '2px';\n }\n\n if (checked) {\n backgroundColor = '#0079D1';\n borderColor = '#0079D1';\n color = 'white';\n }\n\n return `\n --outline-width: ${outlineWidth};\n\n height: ${height};\n padding-left: ${paddingLeft};\n padding-right: ${paddingRight};\n border-radius: ${borderRadius};\n font-size: ${fontSize};\n\n background-color: ${backgroundColor};\n border-color: ${borderColor};\n color: ${color};\n `;\n }}\n\n & > * + * {\n margin-left: 8px;\n }\n\n &:hover {\n cursor: pointer;\n background-color: ${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};\n }\n\n &:active {\n background-color: ${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};\n border-color: ${({ checked }) => (checked ? '#005A9C' : '#0079D1')};\n box-shadow: 0 0 0 var(--outline-width) #80bce8;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) #80bce8;\n outline: 0;\n }\n\n &:disabled {\n cursor: unset;\n box-shadow: none;\n background-color: #dfe3e8;\n border-color: #dfe3e8;\n color: #637381;\n }\n\n /* TODO: - Fix typography so these hacks aren't needed */\n & > span {\n position: relative;\n top: -1px;\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIO,MAAM,YAAY,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+HAAA,EAOxBC,WAAK,CAAC,UAAU,CAAA,8EAAA,EAK7B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;IACtB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,eAAe,GAAG,OAAO;IAC7B,IAAI,WAAW,GAAG,SAAS;IAC3B,IAAI,KAAK,GAAG,SAAS;IAErB,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;AACrB,IAAA;AAED,IAAA,IAAI,OAAO,EAAE;QACX,eAAe,GAAG,SAAS;QAC3B,WAAW,GAAG,SAAS;QACvB,KAAK,GAAG,OAAO;AAChB,IAAA;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;;0BAED,eAAe,CAAA;sBACnB,WAAW,CAAA;eAClB,KAAK,CAAA;KACf;AACH,CAAC,CAAA,oEAAA,EAQqB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,4BAAA,EAIlD,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,cAAA,EACtD,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,yPAAA;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const StyledButton: import("styled-components").StyledComponent<"button", any, any, never>;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { theme } from '../../theme/index.js';
|
|
3
|
-
|
|
4
|
-
const StyledButton = styled.button.withConfig({ displayName: "vui--StyledButton", componentId: "vui--x718nd" }) `user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);${({ size, checked }) => {
|
|
5
|
-
let height = '40px';
|
|
6
|
-
let paddingLeft = '24px';
|
|
7
|
-
let paddingRight = '24px';
|
|
8
|
-
let borderRadius = '8px';
|
|
9
|
-
let fontSize = '16px';
|
|
10
|
-
let outlineWidth = '4px';
|
|
11
|
-
let backgroundColor = 'white';
|
|
12
|
-
let borderColor = '#CDD1D5';
|
|
13
|
-
let color = '#37424D';
|
|
14
|
-
if (size === 'sm') {
|
|
15
|
-
height = '32px';
|
|
16
|
-
paddingLeft = '16px';
|
|
17
|
-
paddingRight = '16px';
|
|
18
|
-
borderRadius = '4px';
|
|
19
|
-
fontSize = '14px';
|
|
20
|
-
outlineWidth = '2px';
|
|
21
|
-
}
|
|
22
|
-
if (checked) {
|
|
23
|
-
backgroundColor = '#0079D1';
|
|
24
|
-
borderColor = '#0079D1';
|
|
25
|
-
color = 'white';
|
|
26
|
-
}
|
|
27
|
-
return `
|
|
28
|
-
--outline-width: ${outlineWidth};
|
|
29
|
-
|
|
30
|
-
height: ${height};
|
|
31
|
-
padding-left: ${paddingLeft};
|
|
32
|
-
padding-right: ${paddingRight};
|
|
33
|
-
border-radius: ${borderRadius};
|
|
34
|
-
font-size: ${fontSize};
|
|
35
|
-
|
|
36
|
-
background-color: ${backgroundColor};
|
|
37
|
-
border-color: ${borderColor};
|
|
38
|
-
color: ${color};
|
|
39
|
-
`;
|
|
40
|
-
}} & > * + *{margin-left:8px;}&:hover{cursor:pointer;background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};}&:active{background-color:${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};border-color:${({ checked }) => (checked ? '#005A9C' : '#0079D1')};box-shadow:0 0 0 var(--outline-width)#80bce8;}&:focus{box-shadow:0 0 0 var(--outline-width)#80bce8;outline:0;}&:disabled{cursor:unset;box-shadow:none;background-color:#dfe3e8;border-color:#dfe3e8;color:#637381;}& > span{position:relative;top:-1px;}`;
|
|
41
|
-
|
|
42
|
-
export { StyledButton };
|
|
43
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/ToggleButton/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nexport const StyledButton = styled.button<any>`\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-family: ${theme.fontFamily};\n font-weight: 400;\n border: 1px solid;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n\n ${({ size, checked }) => {\n let height = '40px';\n let paddingLeft = '24px';\n let paddingRight = '24px';\n let borderRadius = '8px';\n let fontSize = '16px';\n let outlineWidth = '4px';\n\n let backgroundColor = 'white';\n let borderColor = '#CDD1D5';\n let color = '#37424D';\n\n if (size === 'sm') {\n height = '32px';\n paddingLeft = '16px';\n paddingRight = '16px';\n borderRadius = '4px';\n fontSize = '14px';\n outlineWidth = '2px';\n }\n\n if (checked) {\n backgroundColor = '#0079D1';\n borderColor = '#0079D1';\n color = 'white';\n }\n\n return `\n --outline-width: ${outlineWidth};\n\n height: ${height};\n padding-left: ${paddingLeft};\n padding-right: ${paddingRight};\n border-radius: ${borderRadius};\n font-size: ${fontSize};\n\n background-color: ${backgroundColor};\n border-color: ${borderColor};\n color: ${color};\n `;\n }}\n\n & > * + * {\n margin-left: 8px;\n }\n\n &:hover {\n cursor: pointer;\n background-color: ${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};\n }\n\n &:active {\n background-color: ${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};\n border-color: ${({ checked }) => (checked ? '#005A9C' : '#0079D1')};\n box-shadow: 0 0 0 var(--outline-width) #80bce8;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) #80bce8;\n outline: 0;\n }\n\n &:disabled {\n cursor: unset;\n box-shadow: none;\n background-color: #dfe3e8;\n border-color: #dfe3e8;\n color: #637381;\n }\n\n /* TODO: - Fix typography so these hacks aren't needed */\n & > span {\n position: relative;\n top: -1px;\n }\n`;\n"],"names":[],"mappings":";;;AAIO,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+HAAA,EAOxB,KAAK,CAAC,UAAU,CAAA,8EAAA,EAK7B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAI;IACtB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,eAAe,GAAG,OAAO;IAC7B,IAAI,WAAW,GAAG,SAAS;IAC3B,IAAI,KAAK,GAAG,SAAS;IAErB,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;AACrB,IAAA;AAED,IAAA,IAAI,OAAO,EAAE;QACX,eAAe,GAAG,SAAS;QAC3B,WAAW,GAAG,SAAS;QACvB,KAAK,GAAG,OAAO;AAChB,IAAA;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;;0BAED,eAAe,CAAA;sBACnB,WAAW,CAAA;eAClB,KAAK,CAAA;KACf;AACH,CAAC,CAAA,oEAAA,EAQqB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,4BAAA,EAIlD,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,cAAA,EACtD,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA,yPAAA;;;;"}
|