@bolio-ui/core 1.0.7 → 1.0.8
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/Avatar/index.js +31 -31
- package/dist/Badge/index.js +33 -33
- package/dist/BolioUIProvider/index.js +37 -37
- package/dist/Breadcrumbs/index.js +30 -30
- package/dist/Button/index.js +37 -37
- package/dist/ButtonDropdown/index.js +83 -72
- package/dist/ButtonDropdown/styles.d.ts +1 -0
- package/dist/ButtonGroup/index.js +31 -29
- package/dist/Capacity/index.js +26 -26
- package/dist/Card/Card.d.ts +1 -0
- package/dist/Card/index.js +62 -52
- package/dist/Checkbox/index.js +187 -169
- package/dist/Code/index.js +26 -26
- package/dist/Collapse/index.js +26 -26
- package/dist/Container/index.js +26 -26
- package/dist/CssBaseline/index.js +26 -26
- package/dist/Description/index.js +26 -26
- package/dist/Display/index.js +26 -26
- package/dist/Divider/index.js +26 -26
- package/dist/Dot/index.js +26 -26
- package/dist/Drawer/index.js +26 -26
- package/dist/Fieldset/index.js +26 -26
- package/dist/Grid/index.js +26 -26
- package/dist/Image/index.js +26 -26
- package/dist/Input/InputProps.d.ts +1 -0
- package/dist/Input/index.js +75 -65
- package/dist/Input/styles.d.ts +2 -0
- package/dist/Keyboard/index.js +26 -26
- package/dist/Link/index.js +26 -26
- package/dist/Loading/index.js +26 -26
- package/dist/MdxWidgets/index.js +26 -26
- package/dist/Modal/index.js +37 -37
- package/dist/Note/index.js +26 -26
- package/dist/Page/index.js +26 -26
- package/dist/Pagination/index.js +26 -26
- package/dist/Popover/index.js +26 -26
- package/dist/Progress/index.js +26 -26
- package/dist/Radio/index.js +26 -26
- package/dist/Rating/index.js +26 -26
- package/dist/Row/index.js +26 -26
- package/dist/Section/index.js +26 -26
- package/dist/Select/index.js +92 -90
- package/dist/Select/styles.d.ts +5 -4
- package/dist/Slider/index.js +26 -26
- package/dist/Snippet/index.js +26 -26
- package/dist/Spacer/index.js +26 -26
- package/dist/Spinner/index.js +26 -26
- package/dist/Table/index.js +26 -26
- package/dist/Tabs/index.js +29 -29
- package/dist/Tag/index.js +26 -26
- package/dist/Text/index.js +26 -26
- package/dist/Textarea/index.js +60 -50
- package/dist/Themes/index.js +26 -26
- package/dist/Toggle/index.js +33 -33
- package/dist/Tooltip/index.js +26 -26
- package/dist/index.js +315 -262
- package/dist/use-all-themes/index.js +26 -26
- package/dist/use-media-query/index.js +26 -26
- package/dist/use-scale/index.js +26 -26
- package/dist/use-theme/index.js +26 -26
- package/esm/Avatar/Avatar.js +5 -5
- package/esm/Badge/Badge.js +7 -7
- package/esm/Badge/stories.js +1 -1
- package/esm/Breadcrumbs/Breadcrumbs.js +4 -4
- package/esm/Button/Button.js +3 -3
- package/esm/Button/styles.js +8 -8
- package/esm/ButtonDropdown/ButtonDropdown.js +13 -13
- package/esm/ButtonDropdown/ButtonDropdownItem.js +3 -3
- package/esm/ButtonDropdown/Icon.js +1 -1
- package/esm/ButtonDropdown/styles.d.ts +1 -0
- package/esm/ButtonDropdown/styles.js +40 -29
- package/esm/ButtonGroup/ButtonGroup.js +5 -3
- package/esm/Capacity/stories.js +40 -10
- package/esm/Card/Card.d.ts +1 -0
- package/esm/Card/Card.js +8 -7
- package/esm/Card/stories.js +56 -7
- package/esm/Card/styles.js +28 -19
- package/esm/Checkbox/Checkbox.js +6 -6
- package/esm/Checkbox/CheckboxIcon.js +34 -16
- package/esm/Input/Input.js +15 -15
- package/esm/Input/InputProps.d.ts +1 -0
- package/esm/Input/styles.d.ts +2 -0
- package/esm/Input/styles.js +27 -13
- package/esm/Select/Select.js +10 -15
- package/esm/Select/SelectDropdown.js +4 -4
- package/esm/Select/SelectIconClear.js +7 -7
- package/esm/Select/SelectMultipleValue.js +4 -4
- package/esm/Select/SelectOption.js +6 -6
- package/esm/Select/styles.d.ts +5 -4
- package/esm/Select/styles.js +35 -28
- package/esm/Tabs/TabsItem.js +3 -3
- package/esm/Textarea/Textarea.js +7 -11
- package/esm/Themes/Presets/Dark.js +14 -14
- package/esm/Themes/Presets/Default.js +11 -11
- package/esm/Themes/Presets/Shared.js +1 -1
- package/esm/Toggle/Toggle.js +7 -7
- package/package.json +1 -1
package/esm/Textarea/Textarea.js
CHANGED
|
@@ -53,13 +53,9 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
53
53
|
hover = _useState4[0],
|
|
54
54
|
setHover = _useState4[1];
|
|
55
55
|
|
|
56
|
-
var
|
|
56
|
+
var colors = useMemo(function () {
|
|
57
57
|
return getColors(theme.palette, type);
|
|
58
|
-
}, [theme.palette, type])
|
|
59
|
-
color = _useMemo.color,
|
|
60
|
-
borderColor = _useMemo.borderColor,
|
|
61
|
-
hoverBorder = _useMemo.hoverBorder;
|
|
62
|
-
|
|
58
|
+
}, [theme.palette, type]);
|
|
63
59
|
var classes = useClasses('wrapper', {
|
|
64
60
|
hover: hover,
|
|
65
61
|
disabled: disabled
|
|
@@ -95,7 +91,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
95
91
|
var textareaProps = _extends({}, props, controlledValue);
|
|
96
92
|
|
|
97
93
|
return /*#__PURE__*/React.createElement("div", {
|
|
98
|
-
className: _JSXStyle.dynamic([["
|
|
94
|
+
className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || "")
|
|
99
95
|
}, /*#__PURE__*/React.createElement("textarea", _extends({
|
|
100
96
|
ref: textareaRef,
|
|
101
97
|
disabled: disabled,
|
|
@@ -105,11 +101,11 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
105
101
|
onBlur: blurHandler,
|
|
106
102
|
onChange: changeHandler
|
|
107
103
|
}, textareaProps, {
|
|
108
|
-
className: _JSXStyle.dynamic([["
|
|
104
|
+
className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
|
|
109
105
|
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
110
|
-
id: "
|
|
111
|
-
dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.
|
|
112
|
-
}, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.
|
|
106
|
+
id: "2097224582",
|
|
107
|
+
dynamic: [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]
|
|
108
|
+
}, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(colors.borderColor, ";color:").concat(colors.color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";border-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:").concat(colors.bgColor, ";box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";border-radius:").concat(theme.layout.radius, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.active.__jsx-style-dynamic-selector,textarea.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background:").concat(colors.hoverBgColor, ";}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
|
|
113
109
|
});
|
|
114
110
|
TextareaComponent.displayName = 'BolioUITextarea';
|
|
115
111
|
var Textarea = withScale(TextareaComponent);
|
|
@@ -10,32 +10,32 @@ export var palette = {
|
|
|
10
10
|
accents_6: '#999',
|
|
11
11
|
accents_7: '#eaeaea',
|
|
12
12
|
accents_8: '#fafafa',
|
|
13
|
-
selection: '
|
|
13
|
+
selection: 'rgba(248,28,229, 0.5)',
|
|
14
14
|
code: '#C25FFF',
|
|
15
15
|
border: '#333',
|
|
16
16
|
primary: '#0072F6',
|
|
17
|
-
primaryLight: '#
|
|
18
|
-
primaryLighter: '#
|
|
17
|
+
primaryLight: '#CEE4FF',
|
|
18
|
+
primaryLighter: '#96C1F3',
|
|
19
19
|
primaryDark: '#00254E',
|
|
20
20
|
secondary: '#7828C9',
|
|
21
|
-
secondaryLighter: '#D1B1F1',
|
|
22
21
|
secondaryLight: '#EADCF9',
|
|
22
|
+
secondaryLighter: '#D1B1F1',
|
|
23
23
|
secondaryDark: '#290E45',
|
|
24
24
|
error: '#F31261',
|
|
25
|
-
errorLight: '#
|
|
26
|
-
errorLighter: '#
|
|
25
|
+
errorLight: '#FDD8E6',
|
|
26
|
+
errorLighter: '#FAA8C6',
|
|
27
27
|
errorDark: '#4E041F',
|
|
28
28
|
success: '#17C965',
|
|
29
|
-
successLight: '#
|
|
30
|
-
successLighter: '#
|
|
29
|
+
successLight: '#DAFBE9',
|
|
30
|
+
successLighter: '#ADF5CD',
|
|
31
31
|
successDark: '#06371C',
|
|
32
32
|
warning: '#F5A525',
|
|
33
|
-
warningLight: '#
|
|
34
|
-
warningLighter: '#
|
|
33
|
+
warningLight: '#FDEFD9',
|
|
34
|
+
warningLighter: '#FBDBA8',
|
|
35
35
|
warningDark: '#4E3105',
|
|
36
36
|
info: '#06B7DC',
|
|
37
|
-
infoLighter: '#A5EEFE',
|
|
38
37
|
infoLight: '#D7F8FF',
|
|
38
|
+
infoLighter: '#A5EEFE',
|
|
39
39
|
infoDark: '#053B49',
|
|
40
40
|
purple: '#f81ce5',
|
|
41
41
|
alert: '#ff0080',
|
|
@@ -48,9 +48,9 @@ export var expressiveness = {
|
|
|
48
48
|
dropdownBoxShadow: '0 0 0 1px #333',
|
|
49
49
|
scrollerStart: 'rgba(255, 255, 255, 1)',
|
|
50
50
|
scrollerEnd: 'rgba(255, 255, 255, 0)',
|
|
51
|
-
shadowSmall: '0
|
|
52
|
-
shadowMedium: '0
|
|
53
|
-
shadowLarge: '0
|
|
51
|
+
shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
|
|
52
|
+
shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
|
|
53
|
+
shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
|
|
54
54
|
portalOpacity: 0.75
|
|
55
55
|
};
|
|
56
56
|
export var font = defaultFont;
|
|
@@ -10,32 +10,32 @@ export var palette = {
|
|
|
10
10
|
accents_6: '#444',
|
|
11
11
|
accents_7: '#333',
|
|
12
12
|
accents_8: '#111',
|
|
13
|
-
selection: '
|
|
13
|
+
selection: 'rgba(206,228,254, 0.5)',
|
|
14
14
|
code: '#C25FFF',
|
|
15
15
|
border: '#eaeaea',
|
|
16
16
|
primary: '#0072F6',
|
|
17
|
-
primaryLight: '#
|
|
18
|
-
primaryLighter: '#
|
|
17
|
+
primaryLight: '#CEE4FF',
|
|
18
|
+
primaryLighter: '#96C1F3',
|
|
19
19
|
primaryDark: '#00254E',
|
|
20
20
|
secondary: '#7828C9',
|
|
21
|
-
secondaryLighter: '#D1B1F1',
|
|
22
21
|
secondaryLight: '#EADCF9',
|
|
22
|
+
secondaryLighter: '#D1B1F1',
|
|
23
23
|
secondaryDark: '#290E45',
|
|
24
24
|
error: '#F31261',
|
|
25
|
-
errorLight: '#
|
|
26
|
-
errorLighter: '#
|
|
25
|
+
errorLight: '#FDD8E6',
|
|
26
|
+
errorLighter: '#FAA8C6',
|
|
27
27
|
errorDark: '#4E041F',
|
|
28
28
|
success: '#17C965',
|
|
29
|
-
successLight: '#
|
|
30
|
-
successLighter: '#
|
|
29
|
+
successLight: '#DAFBE9',
|
|
30
|
+
successLighter: '#ADF5CD',
|
|
31
31
|
successDark: '#06371C',
|
|
32
32
|
warning: '#F5A525',
|
|
33
|
-
warningLight: '#
|
|
34
|
-
warningLighter: '#
|
|
33
|
+
warningLight: '#FDEFD9',
|
|
34
|
+
warningLighter: '#FBDBA8',
|
|
35
35
|
warningDark: '#4E3105',
|
|
36
36
|
info: '#06B7DC',
|
|
37
|
-
infoLighter: '#A5EEFE',
|
|
38
37
|
infoLight: '#D7F8FF',
|
|
38
|
+
infoLighter: '#A5EEFE',
|
|
39
39
|
infoDark: '#053B49',
|
|
40
40
|
purple: '#f81ce5',
|
|
41
41
|
alert: '#ff0080',
|
package/esm/Toggle/Toggle.js
CHANGED
|
@@ -60,21 +60,21 @@ function ToggleComponent(_ref) {
|
|
|
60
60
|
setSelfChecked(checked);
|
|
61
61
|
}, [checked]);
|
|
62
62
|
return /*#__PURE__*/React.createElement("label", _extends({}, props, {
|
|
63
|
-
className: _JSXStyle.dynamic([["
|
|
63
|
+
className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
|
|
64
64
|
}), /*#__PURE__*/React.createElement("input", {
|
|
65
65
|
type: "checkbox",
|
|
66
66
|
disabled: disabled,
|
|
67
67
|
checked: selfChecked,
|
|
68
68
|
onChange: changeHandle,
|
|
69
|
-
className: _JSXStyle.dynamic([["
|
|
69
|
+
className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
|
|
70
70
|
}), /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: _JSXStyle.dynamic([["
|
|
71
|
+
className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
|
|
72
72
|
}, /*#__PURE__*/React.createElement("span", {
|
|
73
|
-
className: _JSXStyle.dynamic([["
|
|
73
|
+
className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
|
|
74
74
|
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
75
|
-
id: "
|
|
76
|
-
dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(
|
|
77
|
-
}, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(
|
|
75
|
+
id: "2317841100",
|
|
76
|
+
dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
|
|
77
|
+
}, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(1), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}")));
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
ToggleComponent.displayName = 'BolioUIToggle';
|