@foxford/ui 2.0.0-beta-7e6eb6a-20220712 → 2.0.0-beta-1c48b33-20220712
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/Radio/style.js +1 -1
- package/components/Radio/style.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i from'@babel/runtime/helpers/taggedTemplateLiteral';import l,{css as
|
|
1
|
+
import i from'@babel/runtime/helpers/taggedTemplateLiteral';import l,{css as e}from'styled-components';import{screenMaxS as n}from'../../mixins/screen.js';import{responsiveProperty as r}from'../../mixins/responsive-property.js';import{display as o}from'../../mixins/display.js';var t;var a=function(i){var l=arguments.length>0&&void 0!==i?i:14;return e(["font-size:","px;svg{width:","px;height:","px;}"],l,l,l)};var s=e(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}span.label{cursor:not-allowed;}"]);var d=e(["svg{circle{fill:#ffeef0;stroke:#ffa3a3;}circle:nth-child(2){fill:#ffa3a3;}}"]);var c=l.label.withConfig({shouldForwardProp:i=>!['size','error','fluid','width','display'].includes(i)}).withConfig({componentId:"fox-ui__sc-1u0nc40-0"})(["align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;circle:nth-child(2){opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{circle:nth-child(2){opacity:1;transform:scale(1);}","}}span.label{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(i=>i.error?null:e(["circle:not(:disabled){stroke:#48a1e6;}circle:not(:disabled):last-child{fill:#48a1e6;}"])),(i=>'small'===i.size?a(14):null),(i=>'medium'===i.size?a(16):null),(i=>'large'===i.size?a(18):null),(i=>i.disabled?s:null),(i=>i.error?d:null),(i=>i.display?o(i.display):null),(i=>r('width',i.fluid&&'auto'!==i.width?'max-width':'width')),(i=>i.fluid?e(["width:100%;"]):null));var p=l.div.withConfig({shouldForwardProp:i=>'inline'!==i}).withConfig({componentId:"fox-ui__sc-1u0nc40-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],c,(l=>l.inline?e(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],c,c,c,n()(t||(t=i(["\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > "," + "," {\n margin-left: 0;\n margin-top: 15px;\n }\n "])),c,c)):null));export{p as Group,c as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Radio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { display } from '../../mixins/display'\nimport { RadioGroupProps } from './Group'\nimport { RadioProps } from './Radio'\n\nconst sizeRadio = (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.label {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n circle {\n fill: #ffeef0;\n stroke: #ffa3a3;\n }\n circle:nth-child(2) {\n fill: #ffa3a3;\n }\n }\n`\n\nexport const Root = styled.label.withConfig<RadioProps>({\n shouldForwardProp: (prop) => !['size', 'error', 'fluid', 'width', 'display'].includes(prop),\n})`\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 circle:nth-child(2) {\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 circle:nth-child(2) {\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n span.label {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' ? sizeRadio(14) : null)}\n ${(props) => (props.size === 'medium' ? sizeRadio(16) : null)}\n ${(props) => (props.size === 'large' ? sizeRadio(18) : null)}\n ${(props) => (props.disabled ? disabled : null)}\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) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<RadioGroupProps>({\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":["sizeRadio","i","size","css","disabled","error","Root","styled","label","withConfig","shouldForwardProp","prop","includes","componentId","props","display","responsiveProperty","fluid","width","Group","div","inline","screenMaxS","_templateObject","_taggedTemplateLiteral"],"mappings":"4RAOA,IAAMA,EAAY,SAAAC,GAAA,IAACC,+BAADD,EAAAA,EAAQ,GAAR,OAAeE,EAClBD,CAAAA,aAAAA,gBAAAA,aAAAA,QAAAA,EAEFA,EACCA,IAId,IAAME,EAAWD,EAAjB,CAAA,gJAgBA,IAAME,EAAQF,EAAd,CAAA,gFAYO,IAAMG,EAAOC,EAAOC,MAAMC,WAAuB,CACtDC,kBAAoBC,IAAU,CAAC,OAAQ,QAAS,QAAS,QAAS,WAAWC,SAASD,KADvEF,WAAA,CAAAI,YAAA,wBAAGN,
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Radio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { display } from '../../mixins/display'\nimport { RadioGroupProps } from './Group'\nimport { RadioProps } from './Radio'\n\nconst sizeRadio = (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.label {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n circle {\n fill: #ffeef0;\n stroke: #ffa3a3;\n }\n circle:nth-child(2) {\n fill: #ffa3a3;\n }\n }\n`\n\nexport const Root = styled.label.withConfig<RadioProps>({\n shouldForwardProp: (prop) => !['size', 'error', 'fluid', 'width', 'display'].includes(prop),\n})`\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 circle:nth-child(2) {\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 circle:nth-child(2) {\n opacity: 1;\n transform: scale(1);\n }\n ${(props) =>\n !props.error\n ? css`\n circle:not(:disabled) {\n stroke: #48a1e6;\n }\n circle:not(:disabled):last-child {\n fill: #48a1e6;\n }\n `\n : null}\n }\n }\n span.label {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' ? sizeRadio(14) : null)}\n ${(props) => (props.size === 'medium' ? sizeRadio(16) : null)}\n ${(props) => (props.size === 'large' ? sizeRadio(18) : null)}\n ${(props) => (props.disabled ? disabled : null)}\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) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<RadioGroupProps>({\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":["sizeRadio","i","size","css","disabled","error","Root","styled","label","withConfig","shouldForwardProp","prop","includes","componentId","props","display","responsiveProperty","fluid","width","Group","div","inline","screenMaxS","_templateObject","_taggedTemplateLiteral"],"mappings":"4RAOA,IAAMA,EAAY,SAAAC,GAAA,IAACC,+BAADD,EAAAA,EAAQ,GAAR,OAAeE,EAClBD,CAAAA,aAAAA,gBAAAA,aAAAA,QAAAA,EAEFA,EACCA,IAId,IAAME,EAAWD,EAAjB,CAAA,gJAgBA,IAAME,EAAQF,EAAd,CAAA,gFAYO,IAAMG,EAAOC,EAAOC,MAAMC,WAAuB,CACtDC,kBAAoBC,IAAU,CAAC,OAAQ,QAAS,QAAS,QAAS,WAAWC,SAASD,KADvEF,WAAA,CAAAI,YAAA,wBAAGN,CA2BXO,CAAAA,qSAAAA,iDAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GACAA,EAAMT,MASH,KARAF,EADJ,CAAA,4FAgBHW,GAA0B,UAAfA,EAAMZ,KAAmBF,EAAU,IAAM,OACpDc,GAA0B,WAAfA,EAAMZ,KAAoBF,EAAU,IAAM,OACrDc,GAA0B,UAAfA,EAAMZ,KAAmBF,EAAU,IAAM,OACpDc,GAAWA,EAAMV,SAAWA,EAAW,OACvCU,GAAWA,EAAMT,MAAQA,EAAQ,OACjCS,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OACpDD,GAAUE,EAAmB,QAASF,EAAMG,OAAyB,SAAhBH,EAAMI,MAAmB,YAAc,WAC5FJ,GACDA,EAAMG,MACFd,EAGA,CAAA,gBAAA,OAGD,IAAMgB,EAAQZ,EAAOa,IAAIX,WAA4B,CAC1DC,kBAAoBC,GAAkB,WAATA,IADbF,WAAA,CAAAI,YAAA,wBAAGN,CAMfD,CAAAA,2DAAAA,wDAAAA,IAAAA,GAMDQ,GACDA,EAAMO,OACFlB,EADJ,CAAA,4BAAA,oBAAA,MAAA,sBAAA,IAGcG,EAGJA,EAAUA,EAGZgB,GAAAA,CATRC,IAAAA,EAAAC,EAAA,CAAA,8HAAA,MAAA,mGAcYlB,EAAUA,IAMlB"}
|