@foxford/ui 2.0.0-beta-383b10c-20220707 → 2.0.0-beta-9569101-20220707
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/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Checkbox/Checkbox.js +1 -1
- package/components/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/style.js +1 -1
- package/components/Checkbox/style.js.map +1 -1
- package/components/Input/Input.js +1 -1
- package/components/Input/Input.js.map +1 -1
- package/components/Input/helpers.js +1 -1
- package/components/Input/helpers.js.map +1 -1
- package/components/Input/style.js +1 -1
- package/components/Input/style.js.map +1 -1
- package/components/Radio/Radio.js +1 -1
- package/components/Radio/Radio.js.map +1 -1
- package/components/Radio/style.js +1 -1
- package/components/Radio/style.js.map +1 -1
- package/components/Select/Select.js +1 -1
- package/components/Select/Select.js.map +1 -1
- package/components/Select/style.js +1 -1
- package/components/Select/style.js.map +1 -1
- package/dts/index.d.ts +31 -12
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/mixins/responsive-property.js +1 -1
- package/mixins/responsive-property.js.map +1 -1
- package/mixins/shared.js.map +1 -1
- package/package.json +3 -2
- package/shared/enums/sizeInput.js +2 -0
- package/shared/enums/sizeInput.js.map +1 -0
- package/components/Input/constants.js +0 -2
- package/components/Input/constants.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Select/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { errorStyle } from '../../components/Input/style'\nimport { SelectProps } from './Select'\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`\n\nconst spin = keyframes`\n to {\n transform: rotate(1turn);\n }\n`\n\nconst fluid = css`\n .Select {\n max-width: 100%;\n width: 100%;\n }\n`\n\nconst error = css`\n .Select-control {\n ${errorStyle}\n }\n`\n\nexport const Root = styled.span.withConfig<SelectProps>({\n shouldForwardProp: (prop) => !['error', 'fluid'].includes(prop),\n})`\n .Select {\n position: relative;\n max-width: 390px;\n }\n .Select,\n .Select div,\n .Select input,\n .Select span {\n box-sizing: border-box;\n }\n .Select.is-disabled > .Select-control {\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n .Select.is-disabled .Select-value-label {\n color: rgba(0, 0, 0, 0.16) !important;\n }\n .Select.is-disabled > .Select-control:hover {\n box-shadow: none;\n }\n .Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: 0.35;\n }\n .Select.is-clearable {\n .Select-placeholder,\n &.Select--single > .Select-control .Select-value {\n padding-right: 70px;\n }\n }\n .Select-control {\n background-color: ${(props) => props.theme.colors.white};\n border: solid 1px ${(props) => props.theme.colors.alto};\n border-radius: 4px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n .Select-control .Select-input:focus {\n outline: none;\n }\n .is-searchable.is-open > .Select-control {\n cursor: text;\n }\n .is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n .is-open > .Select-control .Select-arrow {\n transform: rotate(180deg);\n }\n .is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n }\n .is-focused:not(.is-open) > .Select-control {\n border: 1px solid ${(props) => props.theme.colors.accent};\n }\n .Select-placeholder,\n .Select--single > .Select-control .Select-value {\n bottom: 0;\n color: ${(props) => props.theme.colors.silver};\n left: 0;\n font-size: 16px;\n line-height: 50px;\n padding-left: 20px;\n padding-right: 35px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .has-value.Select--single > .Select-control .Select-value .Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #007eff;\n outline: none;\n text-decoration: underline;\n }\n .Select-input {\n height: 50px;\n padding-left: 20px;\n padding-right: 15px;\n vertical-align: middle;\n }\n .Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: 16px;\n margin: 0;\n outline: none;\n line-height: 30px;\n padding: 10px 0;\n -webkit-appearance: none;\n }\n .is-focused .Select-input > input {\n cursor: text;\n }\n .is-focused .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n }\n .Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n }\n .Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n }\n .Select-loading {\n animation: ${spin} 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid ${(props) => props.theme.colors.alto};\n border-right-color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n position: relative;\n vertical-align: middle;\n }\n .Select-clear-zone {\n animation: ${fadeIn} 200ms;\n color: ${(props) => props.theme.colors.alto};\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n\n .Select-clear {\n position: relative;\n top: -1px;\n }\n }\n .Select-clear-zone:hover {\n color: #d0021b;\n }\n .Select-clear {\n display: inline-block;\n font-size: 0px;\n line-height: 1;\n color: transparent;\n overflow: hidden;\n width: 12px;\n height: 12px;\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=')\n no-repeat;\n background-size: cover;\n }\n .Select--multi .Select-clear-zone {\n width: 17px;\n }\n .Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n }\n .Select-arrow {\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=')\n no-repeat;\n display: inline-block;\n background-size: 12px;\n height: 7px;\n width: 12px;\n position: relative;\n transition: 0.3s;\n transform: rotate(0deg);\n }\n .is-open .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .Select--multi .Select-multi-value-wrapper {\n display: inline-block;\n padding-left: 20px;\n }\n .Select--multi .Select-multi-value-wrapper {\n .Select-placeholder + .Select-input {\n margin-left: 0;\n }\n }\n .Select--single {\n .Select-multi-value-wrapper {\n display: block;\n width: 100%;\n }\n .Select-input .react-select-2--value {\n display: block;\n width: 100%;\n }\n }\n .Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n }\n .Select-menu-outer {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.onahau};\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 270px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n }\n .Select-menu {\n max-height: 226px;\n overflow-x: auto;\n overflow-y: auto;\n font-size: 16px;\n }\n .Select-option {\n box-sizing: border-box;\n background-color: ${(props) => props.theme.colors.white};\n line-height: 30px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: pointer;\n display: block;\n padding: 10px 15px 10px 20px;\n transition: background 0.2s ease;\n }\n .Select-option:last-child {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n .Select-option.is-selected {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-focused {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-disabled {\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n .Select-noresults {\n box-sizing: border-box;\n color: ${(props) => props.theme.colors.silver};\n cursor: default;\n display: block;\n padding: 10px 20px;\n }\n .Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n }\n .Select--multi.has-value .Select-input {\n margin-left: 5px;\n }\n .Select--multi .Select-value {\n background-color: ${(props) => props.theme.colors.nebula};\n background-color: ${(props) => tinycolor(props.theme.colors.nebula).setAlpha(0.1).toString()};\n border-radius: 4px;\n border: 1px solid ${(props) => props.theme.colors.onahau};\n border: 1px solid rgba(0, 126, 255, 0.24);\n color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n font-size: 0.9em;\n line-height: 1.4;\n margin-left: 4px;\n margin-top: 4px;\n vertical-align: top;\n }\n .Select--multi .Select-value-icon,\n .Select--multi .Select-value-label {\n display: inline-block;\n vertical-align: middle;\n }\n .Select--multi .Select-value-icon {\n font-size: 1.5em;\n line-height: 100%;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n\n .Select--multi .Select-value-label {\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n cursor: default;\n padding: 2px 4px;\n line-height: 1;\n max-width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .Select--multi a.Select-value-label {\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n text-decoration: none;\n }\n .Select--multi a.Select-value-label:hover {\n text-decoration: underline;\n }\n .Select--multi .Select-value-icon {\n cursor: pointer;\n border-bottom-left-radius: 4px;\n border-top-left-radius: 4px;\n border-right: 1px solid ${(props) => props.theme.colors.onahau};\n border-right: 1px solid rgba(0, 126, 255, 0.24);\n font-size: 1.5em;\n line-height: 100%;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:hover,\n .Select--multi .Select-value-icon:focus {\n background-color: #d8eafd;\n background-color: rgba(0, 113, 230, 0.08);\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:active {\n background-color: #c2e0ff;\n background-color: rgba(0, 126, 255, 0.24);\n }\n .Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n }\n .Select--multi.is-disabled .Select-value-icon:hover,\n .Select--multi.is-disabled .Select-value-icon:focus,\n .Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n }\n ${(props) => (props.fluid ? fluid : null)}\n ${(props) => (props.error ? error : null)}\n`\n"],"names":["fadeIn","keyframes","spin","fluid","css","error","errorStyle","Root","styled","span","withConfig","shouldForwardProp","prop","includes","componentId","props","theme","colors","white","alto","mineShaft","accent","silver","onahau","nebula","tinycolor","setAlpha","toString"],"mappings":"mIAKA,IAAMA,EAASC,EAAf,CAAA,mCASA,IAAMC,EAAOD,EAAb,CAAA,iCAMA,IAAME,EAAQC,EAAd,CAAA,wCAOA,IAAMC,EAAQD,EAAH,CAAA,mBAAA,KAELE,GAIC,IAAMC,EAAOC,EAAOC,KAAKC,WAAwB,CACtDC,kBAAoBC,IAAU,CAAC,QAAS,SAASC,SAASD,KAD3CF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,ujBAAA,qBAAA,4BAAA,+VAAA,yNAAA,wFAAA,8WAAA,w7FAAA,0GAAA,uBAAA,+FAAA,gBAAA,o+JAAA,qBAAA,yTAAA,2BAAA,kOAAA,gDAAA,yHAAA,yOAAA,qBAAA,uCAAA,gDAAA,sWAAA,gPAAA,+OAAA,iIAAA,0JAAA,+MAAA,6RAAA,IAAA,KAmCQO,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,OAExCJ,GAAUA,EAAMC,MAAMC,OAAOG,YAoBlBL,GAAUA,EAAMC,MAAMC,OAAOI,SAU7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAKxCN,GAAUA,EAAMC,MAAMC,OAAOK,SAgB7BP,GAAUA,EAAMC,MAAMC,OAAOG,WA0D1BlB,GAKQa,GAAUA,EAAMC,MAAMC,OAAOE,OAC3BJ,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCpB,GACHe,GAAUA,EAAMC,MAAMC,OAAOE,OAuFlBJ,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOM,SAmB7BR,GAAUA,EAAMC,MAAMC,OAAOC,QAExCH,GAAUA,EAAMC,MAAMC,OAAOG,YAWlBL,GAAUA,EAAMC,MAAMC,OAAOM,SAG7BR,GAAUA,EAAMC,MAAMC,OAAOM,SAQxCR,GAAUA,EAAMC,MAAMC,OAAOK,SAclBP,GAAUA,EAAMC,MAAMC,OAAOO,SAC7BT,GAAUU,EAAUV,EAAMC,MAAMC,OAAOO,QAAQE,SAAS,IAAKC,aAE7DZ,GAAUA,EAAMC,MAAMC,OAAOM,SAExCR,GAAUA,EAAMC,MAAMC,OAAOG,YAmB7BL,GAAUA,EAAMC,MAAMC,OAAOI,SAc7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAWZN,GAAUA,EAAMC,MAAMC,OAAOM,SAM9CR,GAAUA,EAAMC,MAAMC,OAAOI,SAM7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAS7BN,GAAUA,EAAMC,MAAMC,OAAOG,YAWtCL,GAAWA,EAAMZ,MAAQA,EAAQ,OACjCY,GAAWA,EAAMV,MAAQA,EAAQ"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Select/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from '../../mixins/display'\nimport { errorStyle } from '../../components/Input/style'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { SelectProps } from './Select'\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`\n\nconst spin = keyframes`\n to {\n transform: rotate(1turn);\n }\n`\n\nconst fluid = css`\n width: 100%;\n .Select {\n max-width: 100%;\n width: 100%;\n }\n`\n\nconst error = css`\n .Select-control {\n ${errorStyle}\n }\n`\n\nexport const Root = styled.span.withConfig<SelectProps>({\n shouldForwardProp: (prop) => ['children'].includes(prop),\n})`\n .Select {\n position: relative;\n }\n .Select,\n .Select div,\n .Select input,\n .Select span {\n box-sizing: border-box;\n }\n .Select.is-disabled > .Select-control {\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n .Select.is-disabled .Select-value-label {\n color: rgba(0, 0, 0, 0.16) !important;\n }\n .Select.is-disabled > .Select-control:hover {\n box-shadow: none;\n }\n .Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: 0.35;\n }\n .Select.is-clearable {\n .Select-placeholder,\n &.Select--single > .Select-control .Select-value {\n padding-right: 70px;\n }\n }\n .Select-control {\n background-color: ${(props) => props.theme.colors.white};\n border: solid 1px ${(props) => props.theme.colors.alto};\n border-radius: 4px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n .Select-control .Select-input:focus {\n outline: none;\n }\n .is-searchable.is-open > .Select-control {\n cursor: text;\n }\n .is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n .is-open > .Select-control .Select-arrow {\n transform: rotate(180deg);\n }\n .is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n }\n .is-focused:not(.is-open) > .Select-control {\n border: 1px solid ${(props) => props.theme.colors.accent};\n }\n .Select-placeholder,\n .Select--single > .Select-control .Select-value {\n bottom: 0;\n color: ${(props) => props.theme.colors.silver};\n left: 0;\n font-size: 16px;\n line-height: 50px;\n padding-left: 20px;\n padding-right: 35px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .has-value.Select--single > .Select-control .Select-value .Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #007eff;\n outline: none;\n text-decoration: underline;\n }\n .Select-input {\n height: 50px;\n padding-left: 20px;\n padding-right: 15px;\n vertical-align: middle;\n }\n .Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: 16px;\n margin: 0;\n outline: none;\n line-height: 30px;\n padding: 10px 0;\n -webkit-appearance: none;\n }\n .is-focused .Select-input > input {\n cursor: text;\n }\n .is-focused .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n }\n .Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n }\n .Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n }\n .Select-loading {\n animation: ${spin} 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid ${(props) => props.theme.colors.alto};\n border-right-color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n position: relative;\n vertical-align: middle;\n }\n .Select-clear-zone {\n animation: ${fadeIn} 200ms;\n color: ${(props) => props.theme.colors.alto};\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n\n .Select-clear {\n position: relative;\n top: -1px;\n }\n }\n .Select-clear-zone:hover {\n color: #d0021b;\n }\n .Select-clear {\n display: inline-block;\n font-size: 0px;\n line-height: 1;\n color: transparent;\n overflow: hidden;\n width: 12px;\n height: 12px;\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=')\n no-repeat;\n background-size: cover;\n }\n .Select--multi .Select-clear-zone {\n width: 17px;\n }\n .Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n }\n .Select-arrow {\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=')\n no-repeat;\n display: inline-block;\n background-size: 12px;\n height: 7px;\n width: 12px;\n position: relative;\n transition: 0.3s;\n transform: rotate(0deg);\n }\n .is-open .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .Select--multi .Select-multi-value-wrapper {\n display: inline-block;\n padding-left: 20px;\n }\n .Select--multi .Select-multi-value-wrapper {\n .Select-placeholder + .Select-input {\n margin-left: 0;\n }\n }\n .Select--single {\n .Select-multi-value-wrapper {\n display: block;\n width: 100%;\n }\n .Select-input .react-select-2--value {\n display: block;\n width: 100%;\n }\n }\n .Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n }\n .Select-menu-outer {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.onahau};\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 270px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n }\n .Select-menu {\n max-height: 226px;\n overflow-x: auto;\n overflow-y: auto;\n font-size: 16px;\n }\n .Select-option {\n box-sizing: border-box;\n background-color: ${(props) => props.theme.colors.white};\n line-height: 30px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: pointer;\n display: block;\n padding: 10px 15px 10px 20px;\n transition: background 0.2s ease;\n }\n .Select-option:last-child {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n .Select-option.is-selected {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-focused {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-disabled {\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n .Select-noresults {\n box-sizing: border-box;\n color: ${(props) => props.theme.colors.silver};\n cursor: default;\n display: block;\n padding: 10px 20px;\n }\n .Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n }\n .Select--multi.has-value .Select-input {\n margin-left: 5px;\n }\n .Select--multi .Select-value {\n background-color: ${(props) => props.theme.colors.nebula};\n background-color: ${(props) => tinycolor(props.theme.colors.nebula).setAlpha(0.1).toString()};\n border-radius: 4px;\n border: 1px solid ${(props) => props.theme.colors.onahau};\n border: 1px solid rgba(0, 126, 255, 0.24);\n color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n font-size: 0.9em;\n line-height: 1.4;\n margin-left: 4px;\n margin-top: 4px;\n vertical-align: top;\n }\n .Select--multi .Select-value-icon,\n .Select--multi .Select-value-label {\n display: inline-block;\n vertical-align: middle;\n }\n .Select--multi .Select-value-icon {\n font-size: 1.5em;\n line-height: 100%;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n\n .Select--multi .Select-value-label {\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n cursor: default;\n padding: 2px 4px;\n line-height: 1;\n max-width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .Select--multi a.Select-value-label {\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n text-decoration: none;\n }\n .Select--multi a.Select-value-label:hover {\n text-decoration: underline;\n }\n .Select--multi .Select-value-icon {\n cursor: pointer;\n border-bottom-left-radius: 4px;\n border-top-left-radius: 4px;\n border-right: 1px solid ${(props) => props.theme.colors.onahau};\n border-right: 1px solid rgba(0, 126, 255, 0.24);\n font-size: 1.5em;\n line-height: 100%;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:hover,\n .Select--multi .Select-value-icon:focus {\n background-color: #d8eafd;\n background-color: rgba(0, 113, 230, 0.08);\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:active {\n background-color: #c2e0ff;\n background-color: rgba(0, 126, 255, 0.24);\n }\n .Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n }\n .Select--multi.is-disabled .Select-value-icon:hover,\n .Select--multi.is-disabled .Select-value-icon:focus,\n .Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n }\n\n width: auto;\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => responsiveProperty('width', props.fluid && props.width !== 'auto' ? 'max-width' : 'width')}\n ${(props) => (props.fluid ? fluid : null)}\n`\n"],"names":["fadeIn","keyframes","spin","fluid","css","error","errorStyle","Root","styled","span","withConfig","shouldForwardProp","prop","includes","componentId","props","theme","colors","white","alto","mineShaft","accent","silver","onahau","nebula","tinycolor","setAlpha","toString","display","responsiveProperty","width"],"mappings":"8PAOA,IAAMA,EAASC,EAAf,CAAA,mCASA,IAAMC,EAAOD,EAAb,CAAA,iCAMA,IAAME,EAAQC,EAAd,CAAA,mDAQA,IAAMC,EAAQD,EAAH,CAAA,mBAAA,KAELE,GAIC,IAAMC,EAAOC,EAAOC,KAAKC,WAAwB,CACtDC,kBAAoBC,GAAS,CAAC,YAAYC,SAASD,KADpCF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,uiBAAA,qBAAA,4BAAA,+VAAA,yNAAA,wFAAA,8WAAA,w7FAAA,0GAAA,uBAAA,+FAAA,gBAAA,o+JAAA,qBAAA,yTAAA,2BAAA,kOAAA,gDAAA,yHAAA,yOAAA,qBAAA,uCAAA,gDAAA,sWAAA,gPAAA,+OAAA,iIAAA,0JAAA,+MAAA,wSAAA,IAAA,IAAA,IAAA,KAkCQO,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,OAExCJ,GAAUA,EAAMC,MAAMC,OAAOG,YAoBlBL,GAAUA,EAAMC,MAAMC,OAAOI,SAU7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAKxCN,GAAUA,EAAMC,MAAMC,OAAOK,SAgB7BP,GAAUA,EAAMC,MAAMC,OAAOG,WA0D1BlB,GAKQa,GAAUA,EAAMC,MAAMC,OAAOE,OAC3BJ,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCpB,GACHe,GAAUA,EAAMC,MAAMC,OAAOE,OAuFlBJ,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOM,SAmB7BR,GAAUA,EAAMC,MAAMC,OAAOC,QAExCH,GAAUA,EAAMC,MAAMC,OAAOG,YAWlBL,GAAUA,EAAMC,MAAMC,OAAOM,SAG7BR,GAAUA,EAAMC,MAAMC,OAAOM,SAQxCR,GAAUA,EAAMC,MAAMC,OAAOK,SAclBP,GAAUA,EAAMC,MAAMC,OAAOO,SAC7BT,GAAUU,EAAUV,EAAMC,MAAMC,OAAOO,QAAQE,SAAS,IAAKC,aAE7DZ,GAAUA,EAAMC,MAAMC,OAAOM,SAExCR,GAAUA,EAAMC,MAAMC,OAAOG,YAmB7BL,GAAUA,EAAMC,MAAMC,OAAOI,SAc7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAWZN,GAAUA,EAAMC,MAAMC,OAAOM,SAM9CR,GAAUA,EAAMC,MAAMC,OAAOI,SAM7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAS7BN,GAAUA,EAAMC,MAAMC,OAAOG,YAatCL,GAAWA,EAAMV,MAAQA,EAAQ,OACjCU,GAAWA,EAAMa,QAAUA,EAAQb,EAAMa,SAAW,OACpDb,GAAUc,EAAmB,QAASd,EAAMZ,OAAyB,SAAhBY,EAAMe,MAAmB,YAAc,WAC5Ff,GAAWA,EAAMZ,MAAQA,EAAQ"}
|
package/dts/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ import * as type_fest_source_partial_deep from 'type-fest/source/partial-deep';
|
|
|
12
12
|
import * as react_floater_lib_types from 'react-floater/lib/types';
|
|
13
13
|
import Floater from 'react-floater';
|
|
14
14
|
import { InputState, MaskOptions } from 'react-input-mask';
|
|
15
|
+
import { SizeInput as SizeInput$1 } from 'shared/enums/sizeInput';
|
|
15
16
|
import { ReactSelectProps } from 'react-select';
|
|
16
17
|
|
|
17
18
|
declare enum ColorNames {
|
|
@@ -230,7 +231,7 @@ declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
|
|
|
230
231
|
declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
|
|
231
232
|
[key in `${T}${ResponsiveKeys}`]?: V;
|
|
232
233
|
};
|
|
233
|
-
declare type ResponsiveProperty<V = number |
|
|
234
|
+
declare type ResponsiveProperty<V = number | keyof typeof SizeLatin> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
|
|
234
235
|
declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string) => () => () => FlattenSimpleInterpolation | null;
|
|
235
236
|
/**
|
|
236
237
|
* Sort keys as desktop first
|
|
@@ -273,6 +274,13 @@ declare const responsiveNamedProperty: <T extends PropsProperties>({ sizes, cssP
|
|
|
273
274
|
*/
|
|
274
275
|
declare const responsiveProperty: (property: string, cssProperty?: string | null, sizing?: null | string) => () => (props: any) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>> | null;
|
|
275
276
|
|
|
277
|
+
declare enum SizeInput {
|
|
278
|
+
l = 380,
|
|
279
|
+
m = 300,
|
|
280
|
+
s = 220,
|
|
281
|
+
xs = 140
|
|
282
|
+
}
|
|
283
|
+
|
|
276
284
|
declare type HEX = `#${string}`;
|
|
277
285
|
declare type RGB = `rgb(${number}, ${number}, ${number})`;
|
|
278
286
|
declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
|
|
@@ -291,7 +299,7 @@ interface BaseProps {
|
|
|
291
299
|
*/
|
|
292
300
|
style?: React.CSSProperties;
|
|
293
301
|
}
|
|
294
|
-
interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' |
|
|
302
|
+
interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
|
|
295
303
|
/**
|
|
296
304
|
* Is disabled field
|
|
297
305
|
*/
|
|
@@ -434,7 +442,7 @@ interface VAlign {
|
|
|
434
442
|
}
|
|
435
443
|
declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
|
|
436
444
|
|
|
437
|
-
declare function buildMediaQuery(value: number | keyof typeof SizeLatin, property: string | ((_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string): ReturnType<typeof css>;
|
|
445
|
+
declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string): ReturnType<typeof css>;
|
|
438
446
|
|
|
439
447
|
interface Display {
|
|
440
448
|
display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
|
|
@@ -2268,7 +2276,7 @@ declare class InputPhone extends PureComponent<typeof InputPhone.defaultProps &
|
|
|
2268
2276
|
static defaultProps: {
|
|
2269
2277
|
rounded: boolean;
|
|
2270
2278
|
type: string;
|
|
2271
|
-
width:
|
|
2279
|
+
width: SizeInput;
|
|
2272
2280
|
color: string;
|
|
2273
2281
|
mask: string;
|
|
2274
2282
|
placeholderColor: string;
|
|
@@ -2348,12 +2356,12 @@ interface InputProps extends BaseProps, InputField, InputHTMLAttributes {
|
|
|
2348
2356
|
* - [`InputField`](#/Миксины)
|
|
2349
2357
|
* - `React.InputHTMLAttributes<HTMLInputElement>`
|
|
2350
2358
|
*/
|
|
2351
|
-
declare function Input(props: InputProps
|
|
2359
|
+
declare function Input(props: InputProps): JSX.Element;
|
|
2352
2360
|
declare namespace Input {
|
|
2353
2361
|
var defaultProps: {
|
|
2354
2362
|
rounded: boolean;
|
|
2355
2363
|
type: string;
|
|
2356
|
-
width:
|
|
2364
|
+
width: SizeInput$1;
|
|
2357
2365
|
color: string;
|
|
2358
2366
|
mask: string;
|
|
2359
2367
|
placeholderColor: string;
|
|
@@ -2376,8 +2384,8 @@ interface RadioGroupProps extends BaseProps {
|
|
|
2376
2384
|
}
|
|
2377
2385
|
declare function RadioGroup({ children, ...props }: RadioGroupProps): JSX.Element;
|
|
2378
2386
|
|
|
2379
|
-
declare type RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
|
|
2380
|
-
interface RadioProps extends BaseProps, RadioInputHtmlAttributes {
|
|
2387
|
+
declare type RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>;
|
|
2388
|
+
interface RadioProps extends BaseProps, Display, RadioInputHtmlAttributes {
|
|
2381
2389
|
/**
|
|
2382
2390
|
* Field id
|
|
2383
2391
|
*/
|
|
@@ -2419,6 +2427,8 @@ interface RadioProps extends BaseProps, RadioInputHtmlAttributes {
|
|
|
2419
2427
|
* Value
|
|
2420
2428
|
*/
|
|
2421
2429
|
value?: string | number;
|
|
2430
|
+
fluid?: boolean;
|
|
2431
|
+
width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>;
|
|
2422
2432
|
}
|
|
2423
2433
|
/**
|
|
2424
2434
|
* Расширен:
|
|
@@ -2431,6 +2441,8 @@ declare namespace Radio {
|
|
|
2431
2441
|
disabled: boolean;
|
|
2432
2442
|
size: string;
|
|
2433
2443
|
defaultChecked: boolean;
|
|
2444
|
+
display: string;
|
|
2445
|
+
width: SizeInput;
|
|
2434
2446
|
onChange: (e: react.ChangeEvent<HTMLInputElement>) => void;
|
|
2435
2447
|
};
|
|
2436
2448
|
var Group: typeof RadioGroup;
|
|
@@ -2443,8 +2455,8 @@ interface CheckboxGroupProps extends BaseProps {
|
|
|
2443
2455
|
}
|
|
2444
2456
|
declare function CheckboxGroup({ children, ...props }: CheckboxGroupProps): JSX.Element;
|
|
2445
2457
|
|
|
2446
|
-
declare type CheckboxInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
|
|
2447
|
-
interface CheckboxProps extends BaseProps, CheckboxInputHtmlAttributes {
|
|
2458
|
+
declare type CheckboxInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>;
|
|
2459
|
+
interface CheckboxProps extends BaseProps, Display, CheckboxInputHtmlAttributes {
|
|
2448
2460
|
/**
|
|
2449
2461
|
* Children react node
|
|
2450
2462
|
*/
|
|
@@ -2485,6 +2497,8 @@ interface CheckboxProps extends BaseProps, CheckboxInputHtmlAttributes {
|
|
|
2485
2497
|
* Checkbox size
|
|
2486
2498
|
*/
|
|
2487
2499
|
size?: 'small' | 'medium' | 'large' | 'extraLarge' | 's' | 'm' | 'l' | 'xl';
|
|
2500
|
+
fluid?: boolean;
|
|
2501
|
+
width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>;
|
|
2488
2502
|
}
|
|
2489
2503
|
/**
|
|
2490
2504
|
* Расширен:
|
|
@@ -2497,22 +2511,25 @@ declare namespace Checkbox {
|
|
|
2497
2511
|
disabled: boolean;
|
|
2498
2512
|
size: string;
|
|
2499
2513
|
defaultChecked: boolean;
|
|
2514
|
+
display: string;
|
|
2515
|
+
width: SizeInput;
|
|
2500
2516
|
onChange: (e: react.ChangeEvent<HTMLInputElement>) => void;
|
|
2501
2517
|
};
|
|
2502
2518
|
var Group: typeof CheckboxGroup;
|
|
2503
2519
|
var displayName: string;
|
|
2504
2520
|
}
|
|
2505
2521
|
|
|
2506
|
-
interface SelectProps extends BaseProps, ReactSelectProps {
|
|
2522
|
+
interface SelectProps extends BaseProps, ReactSelectProps, Display {
|
|
2507
2523
|
fluid?: boolean;
|
|
2508
2524
|
error?: boolean;
|
|
2525
|
+
width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>;
|
|
2509
2526
|
}
|
|
2510
2527
|
/**
|
|
2511
2528
|
* Расширен:
|
|
2512
2529
|
* - [`BaseProps`](#/Миксины)
|
|
2513
2530
|
* - `ReactSelectProps`
|
|
2514
2531
|
*/
|
|
2515
|
-
declare function Select(props:
|
|
2532
|
+
declare function Select(props: SelectProps): JSX.Element;
|
|
2516
2533
|
declare namespace Select {
|
|
2517
2534
|
var defaultProps: {
|
|
2518
2535
|
allowCreate: boolean;
|
|
@@ -2528,6 +2545,8 @@ declare namespace Select {
|
|
|
2528
2545
|
loadingPlaceholder: string;
|
|
2529
2546
|
autoload: boolean;
|
|
2530
2547
|
loadOptions: boolean;
|
|
2548
|
+
display: string;
|
|
2549
|
+
width: SizeInput;
|
|
2531
2550
|
};
|
|
2532
2551
|
var displayName: string;
|
|
2533
2552
|
}
|