@foxford/ui 2.0.0-beta-810d579-20220829 → 2.0.0-beta-00a9b44-20220829
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import i,{css as r}from'styled-components';import o from'tinycolor2';import{screenMaxS as
|
|
1
|
+
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import i,{css as r}from'styled-components';import o from'tinycolor2';import{screenMaxS as t}from'../../mixins/screen.js';import{responsiveProperty as n}from'../../mixins/responsive-property.js';var l;var s=function(e){var i=arguments.length>0&&void 0!==e?e:14;return r(["font-size:","px;svg{width:","px;height:","px;}"],i,i,i)};var a=r(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}& > span{cursor:not-allowed;}"]);var p=r(["svg{> rect{fill:",";stroke:",";}g > rect{fill:",";}}& input:checked:disabled + svg rect{fill:",";stroke:",";}"],(e=>o(e.theme.colors.pomegranate).setAlpha(.1).toString()),(e=>e.theme.colors.pomegranate),(e=>e.theme.colors.pomegranate),(e=>o(e.theme.colors.pomegranate).setAlpha(.2).toString()),(e=>o(e.theme.colors.pomegranate).setAlpha(.3).toString()));var d=i.label.withConfig({shouldForwardProp:e=>['children','htmlFor'].includes(e)}).withConfig({componentId:"fox-ui__sc-9s6oap-0"})(["display:inline-flex;align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;g{opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{g{opacity:1;transform:scale(1);}}&:checked:disabled + svg rect{fill:#d4d4d4;stroke:#b8b8b8;}}> span{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(e=>'small'===e.size||'s'===e.size?s(14):null),(e=>'medium'===e.size||'m'===e.size?s(16):null),(e=>'large'===e.size||'l'===e.size?s(18):null),(e=>'extraLarge'===e.size||'xl'===e.size?s(20):null),(e=>e.disabled?a:null),(e=>e.error?p:null),(e=>n('width',e.fluid&&'auto'!==e.width&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?r(["width:100%;"]):null));var c=i.div.withConfig({shouldForwardProp:e=>'inline'!==e}).withConfig({componentId:"fox-ui__sc-9s6oap-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],d,(i=>i.inline?r(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],d,d,d,t()(l||(l=e(["\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > "," + "," {\n margin-left: 0;\n margin-top: 15px;\n }\n "])),d,d)):null));export{c as Group,d as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { CheckboxGroupProps } from './Group'\nimport { CheckboxProps } from './Checkbox'\n\nconst sizeCheckbox = (size = 14) => css`\n font-size: ${size}px;\n svg {\n width: ${size}px;\n height: ${size}px;\n }\n`\n\nconst disabled = css`\n cursor: not-allowed;\n color: #d4d4d4;\n svg {\n circle:nth-child(1) {\n stroke: #d4d4d4;\n }\n circle:nth-child(2) {\n fill: #d4d4d4;\n }\n }\n & > span {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n > rect {\n fill: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${(props) => props.theme.colors.pomegranate};\n }\n g > rect {\n fill: ${(props) => props.theme.colors.pomegranate};\n }\n }\n`\n\nexport const Root = styled.label.withConfig<CheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor'].includes(prop),\n})`\n display: inline-flex;\n align-items: baseline;\n user-select: none;\n cursor: pointer;\n width: auto;\n svg {\n position: relative;\n top: 2px;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: all 0.2s ease;\n }\n }\n & + & {\n margin-left: 15px;\n }\n input {\n display: none;\n appearance: none;\n &:checked + svg {\n g {\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n > span {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' || props.size === 's' ? sizeCheckbox(14) : null)}\n ${(props) => (props.size === 'medium' || props.size === 'm' ? sizeCheckbox(16) : null)}\n ${(props) => (props.size === 'large' || props.size === 'l' ? sizeCheckbox(18) : null)}\n ${(props) => (props.size === 'extraLarge' || props.size === 'xl' ? sizeCheckbox(20) : null)}\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (props.error ? error : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n display: flex;\n flex-direction: column;\n line-height: normal;\n > ${Root} {\n margin-left: 0;\n &:not(:first-child) {\n margin-top: 15px;\n }\n }\n ${(props) =>\n props.inline\n ? css`\n flex-direction: row;\n &&& > ${Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 0;\n margin-top: 15px;\n }\n `}\n `\n : null}\n`\n"],"names":["sizeCheckbox","
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { CheckboxGroupProps } from './Group'\nimport { CheckboxProps } from './Checkbox'\n\nconst sizeCheckbox = (size = 14) => css`\n font-size: ${size}px;\n svg {\n width: ${size}px;\n height: ${size}px;\n }\n`\n\nconst disabled = css`\n cursor: not-allowed;\n color: #d4d4d4;\n svg {\n circle:nth-child(1) {\n stroke: #d4d4d4;\n }\n circle:nth-child(2) {\n fill: #d4d4d4;\n }\n }\n & > span {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n > rect {\n fill: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${(props) => props.theme.colors.pomegranate};\n }\n g > rect {\n fill: ${(props) => props.theme.colors.pomegranate};\n }\n }\n & input:checked:disabled + svg rect {\n fill: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.2).toString()};\n stroke: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.3).toString()};\n }\n`\n\nexport const Root = styled.label.withConfig<CheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor'].includes(prop),\n})`\n display: inline-flex;\n align-items: baseline;\n user-select: none;\n cursor: pointer;\n width: auto;\n svg {\n position: relative;\n top: 2px;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: all 0.2s ease;\n }\n }\n & + & {\n margin-left: 15px;\n }\n input {\n display: none;\n appearance: none;\n &:checked + svg {\n g {\n opacity: 1;\n transform: scale(1);\n }\n }\n &:checked:disabled + svg rect {\n fill: #d4d4d4;\n stroke: #b8b8b8;\n }\n }\n > span {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' || props.size === 's' ? sizeCheckbox(14) : null)}\n ${(props) => (props.size === 'medium' || props.size === 'm' ? sizeCheckbox(16) : null)}\n ${(props) => (props.size === 'large' || props.size === 'l' ? sizeCheckbox(18) : null)}\n ${(props) => (props.size === 'extraLarge' || props.size === 'xl' ? sizeCheckbox(20) : null)}\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (props.error ? error : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n display: flex;\n flex-direction: column;\n line-height: normal;\n > ${Root} {\n margin-left: 0;\n &:not(:first-child) {\n margin-top: 15px;\n }\n }\n ${(props) =>\n props.inline\n ? css`\n flex-direction: row;\n &&& > ${Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 0;\n margin-top: 15px;\n }\n `}\n `\n : null}\n`\n"],"names":["sizeCheckbox","e","size","css","disabled","error","props","tinycolor","theme","colors","pomegranate","setAlpha","toString","Root","styled","label","withConfig","shouldForwardProp","prop","includes","componentId","responsiveProperty","fluid","width","Array","isArray","Group","div","inline","screenMaxS","_templateObject","_taggedTemplateLiteral"],"mappings":"oQAOA,IAAMA,EAAe,SAAAC,GAAA,IAACC,+BAADD,EAAAA,EAAQ,GAAR,OAAeE,EACrBD,CAAAA,aAAAA,gBAAAA,aAAAA,QAAAA,EAEFA,EACCA,IAId,IAAME,EAAWD,EAAjB,CAAA,8IAgBA,IAAME,EAAQF,EAGCG,CAAAA,mBAAAA,WAAAA,mBAAAA,+CAAAA,WAAAA,OAAAA,GAAUC,EAAUD,EAAME,MAAMC,OAAOC,aAAaC,SAAS,IAAKC,aAChEN,GAAUA,EAAME,MAAMC,OAAOC,cAG/BJ,GAAUA,EAAME,MAAMC,OAAOC,cAI/BJ,GAAUC,EAAUD,EAAME,MAAMC,OAAOC,aAAaC,SAAS,IAAKC,aAChEN,GAAUC,EAAUD,EAAME,MAAMC,OAAOC,aAAaC,SAAS,IAAKC,aAI1E,IAAMC,EAAOC,EAAOC,MAAMC,WAA0B,CACzDC,kBAAoBC,GAAS,CAAC,WAAY,WAAWC,SAASD,KAD/CF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,0XAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KAsCZR,GAA0B,UAAfA,EAAMJ,MAAmC,MAAfI,EAAMJ,KAAeF,EAAa,IAAM,OAC7EM,GAA0B,WAAfA,EAAMJ,MAAoC,MAAfI,EAAMJ,KAAeF,EAAa,IAAM,OAC9EM,GAA0B,UAAfA,EAAMJ,MAAmC,MAAfI,EAAMJ,KAAeF,EAAa,IAAM,OAC7EM,GAA0B,eAAfA,EAAMJ,MAAwC,OAAfI,EAAMJ,KAAgBF,EAAa,IAAM,OACnFM,GAAWA,EAAMF,SAAWA,EAAW,OACvCE,GAAWA,EAAMD,MAAQA,EAAQ,OACjCC,GACDe,EACE,QACAf,EAAMgB,OAAyB,SAAhBhB,EAAMiB,QAAqBC,MAAMC,QAAQnB,EAAMiB,OAAS,YAAc,WAEtFjB,GACDA,EAAMgB,MACFnB,EADJ,CAAA,gBAII,OAGD,IAAMuB,EAAQZ,EAAOa,IAAIX,WAA+B,CAC7DC,kBAAoBC,GAAkB,WAATA,IADbF,WAAA,CAAAI,YAAA,uBAAGN,CAMfD,CAAAA,2DAAAA,wDAAAA,IAAAA,GAMDP,GACDA,EAAMsB,OACFzB,EADJ,CAAA,4BAAA,oBAAA,MAAA,sBAAA,IAGcU,EAGJA,EAAUA,EAGZgB,GAAAA,CATRC,IAAAA,EAAAC,EAAA,CAAA,8HAAA,MAAA,mGAcYlB,EAAUA,IAMlB"}
|