@foxford/ui 2.0.0-beta-63bc042-20220701 → 2.0.0-beta-c4bb20f-20220704
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 o,{css as r}from'styled-components';import{color as e}from'../../mixins/color.js';import{property as i,responsiveProperty as s}from'../../mixins/responsive-property.js';import{display as n}from'../../mixins/display.js';var l=r(["display:block;color:inherit;transition:none;&:hover{color:inherit;cursor:pointer;}"]);var t=r(["text-decoration:underline;"]);var p=r(["display:inline-block;color:",";border-bottom:1px dashed currentColor;"],(o=>o.theme.colors.accent));var c=o.div.withConfig({shouldForwardProp:o=>!['wrapper','underline','pseudo','display','color'].includes(o)&&!o.includes('size')}).withConfig({componentId:"fox-ui__sc-1n89po4-0"})(["color:",";text-decoration:none;transition:0.2s;&:hover{cursor:pointer;color:",";}"," "," "," "," "," "," ",""],(o=>o.theme.colors.accent),(o=>o.theme.colors.primary),(o=>o.
|
|
1
|
+
import o,{css as r}from'styled-components';import{color as e}from'../../mixins/color.js';import{property as i,responsiveProperty as s}from'../../mixins/responsive-property.js';import{display as n}from'../../mixins/display.js';var l=r(["display:block;color:inherit;transition:none;&:hover{color:inherit;cursor:pointer;}"]);var t=r(["text-decoration:underline;"]);var p=r(["display:inline-block;color:",";border-bottom:1px dashed currentColor;"],(o=>o.theme.colors.accent));var c=o.div.withConfig({shouldForwardProp:o=>!['wrapper','underline','pseudo','display','color'].includes(o)&&!o.includes('size')}).withConfig({componentId:"fox-ui__sc-1n89po4-0"})(["color:",";text-decoration:none;transition:0.2s;&:hover{cursor:pointer;color:",";}"," "," "," "," "," "," ",""],(o=>o.theme.colors.accent),(o=>o.theme.colors.primary),(o=>o.underline?t:null),(o=>o.pseudo?p:null),(o=>o.display?n(o.display):null),(o=>o.color?e(o.color):null),(o=>o.size?i(o.size,'font-size'):null),(o=>o.wrapper?l:null),(o=>{var{sizeXS:r,sizeS:e,sizeM:i,sizeL:n,sizeXL:l}=o;return s({sizes:{sizeXS:r,sizeS:e,sizeM:i,sizeL:n,sizeXL:l},cssProperty:'font-size'})}));export{c as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from '../../mixins/color'\nimport { responsiveProperty, property } from '../../mixins/responsive-property'\nimport { display } from '../../mixins/display'\nimport { AnchorProps } from './Anchor'\n\nconst wrapper = css`\n display: block;\n color: inherit;\n transition: none;\n &:hover {\n color: inherit;\n cursor: pointer;\n }\n`\n\nconst underline = css`\n text-decoration: underline;\n`\n\nconst pseudo = css`\n display: inline-block;\n color: ${(props) => props.theme.colors.accent};\n border-bottom: 1px dashed currentColor;\n`\n\nexport const Root = styled.div.withConfig<AnchorProps>({\n shouldForwardProp: (prop) =>\n !['wrapper', 'underline', 'pseudo', 'display', 'color'].includes(prop) && !prop.includes('size'),\n})`\n color: ${(props) => props.theme.colors.accent};\n text-decoration: none;\n transition: 0.2s;\n &:hover {\n cursor: pointer;\n color: ${(props) => props.theme.colors.primary};\n }\n ${(props) => (props.
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from '../../mixins/color'\nimport { responsiveProperty, property } from '../../mixins/responsive-property'\nimport { display } from '../../mixins/display'\nimport { AnchorProps } from './Anchor'\n\nconst wrapper = css`\n display: block;\n color: inherit;\n transition: none;\n &:hover {\n color: inherit;\n cursor: pointer;\n }\n`\n\nconst underline = css`\n text-decoration: underline;\n`\n\nconst pseudo = css`\n display: inline-block;\n color: ${(props) => props.theme.colors.accent};\n border-bottom: 1px dashed currentColor;\n`\n\nexport const Root = styled.div.withConfig<AnchorProps>({\n shouldForwardProp: (prop) =>\n !['wrapper', 'underline', 'pseudo', 'display', 'color'].includes(prop) && !prop.includes('size'),\n})`\n color: ${(props) => props.theme.colors.accent};\n text-decoration: none;\n transition: 0.2s;\n &:hover {\n cursor: pointer;\n color: ${(props) => props.theme.colors.primary};\n }\n ${(props) => (props.underline ? underline : null)}\n ${(props) => (props.pseudo ? pseudo : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n ${(props) => (props.size ? property(props.size, 'font-size') : null)}\n ${(props) => (props.wrapper ? wrapper : null)}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) =>\n responsiveProperty({ sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL }, cssProperty: 'font-size' })}\n`\n"],"names":["wrapper","css","underline","pseudo","props","theme","colors","accent","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","primary","display","color","size","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveProperty","sizes","cssProperty"],"mappings":"kOAMA,IAAMA,EAAUC,EAAhB,CAAA,uFAUA,IAAMC,EAAYD,EAAlB,CAAA,+BAIA,IAAME,EAASF,EAAH,CAAA,8BAAA,4CAEAG,GAAUA,EAAMC,MAAMC,OAAOC,SAIlC,IAAMC,EAAOC,EAAOC,IAAIC,WAAwB,CACrDC,kBAAoBC,IACjB,CAAC,UAAW,YAAa,SAAU,UAAW,SAASC,SAASD,KAAUA,EAAKC,SAAS,UAF5EH,WAAA,CAAAI,YAAA,wBAAGN,CAIRL,CAAAA,SAAAA,sEAAAA,KAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,MAAMC,OAAOC,SAK3BH,GAAUA,EAAMC,MAAMC,OAAOU,UAEtCZ,GAAWA,EAAMF,UAAYA,EAAY,OACzCE,GAAWA,EAAMD,OAASA,EAAS,OACnCC,GAAWA,EAAMa,QAAUA,EAAQb,EAAMa,SAAW,OACpDb,GAAWA,EAAMc,MAAQA,EAAMd,EAAMc,OAAS,OAC9Cd,GAAWA,EAAMe,KAAOC,EAAShB,EAAMe,KAAM,aAAe,OAC5Df,GAAWA,EAAMJ,QAAUA,EAAU,OACtCqB,IAAA,IAACC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAhCL,EAAA,OACAM,EAAmB,CAAEC,MAAO,CAAEN,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAAUG,YAAa"}
|
package/components/Tabs/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as t}from'styled-components';import{color as r}from'../../mixins/color.js';var e=o=>t(["border-bottom:1px solid ",";"],o);var i=t(["color:",";position:relative;&:after{width:initial;opacity:1;}"],(o=>o.theme.colors.primary));var n=o.div.withConfig({shouldForwardProp:o=>'children'===o}).withConfig({componentId:"fox-ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," ",""],(o=>o.borderColor&&!o.noBorder?r(o.borderColor,e):null),(o=>o.color?r(o.color):null));var l=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-1"})(["position:relative;display:block;width:auto;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;z-index:1;top:0;bottom:0;display:block;content:'';width:
|
|
1
|
+
import o,{css as t}from'styled-components';import{color as r}from'../../mixins/color.js';var e=o=>t(["border-bottom:1px solid ",";"],o);var i=t(["color:",";position:relative;&:after{width:initial;opacity:1;}"],(o=>o.theme.colors.primary));var n=o.div.withConfig({shouldForwardProp:o=>'children'===o}).withConfig({componentId:"fox-ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," ",""],(o=>o.borderColor&&!o.noBorder?r(o.borderColor,e):null),(o=>o.color?r(o.color):null));var l=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-1"})(["position:relative;display:block;width:auto;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;z-index:1;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentColor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentColor 100%);}"],20);var a=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-2"})(["display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0px;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?t(["display:flex;justify-content:space-between;width:100%;"]):null));var c=o.div.withConfig({shouldForwardProp:o=>!['themeKey','color','borderColor','active'].includes(o)}).withConfig({componentId:"fox-ui__sc-ggtlgu-3"})(["display:inline-block;margin-bottom:-1px;flex-shrink:0;font-size:16px;font-weight:bold;line-height:20px;padding-bottom:14px;text-decoration:none;cursor:pointer;z-index:2;transition:color 0.2s ease-out;"," "," &:after{opacity:0;width:0;content:'';height:3px;position:absolute;bottom:-1px;z-index:1;left:0;right:0;background-color:currentColor;transition:opacity 0.2s ease-out;}&:hover{color:",";}& + &{margin-left:60px;}"," "," &.active{","}"],(o=>o.color?r(o.color):null),(o=>o.borderColor?r(o.borderColor,e):null),(o=>o.theme.colors.primary),(o=>o.themeKey?(o=>{switch(o){case'compact':return t(["font-weight:normal;& + &{margin-left:20px;}"]);case'crispyCompact':return t(["text-transform:uppercase;font-size:12px;height:16px;line-height:16px;padding-bottom:8px;border-bottom:1px solid ",";& + &{margin-left:18px;}"],(o=>o.theme.colors.mercury));case'crispy':return t(["height:35px;text-transform:uppercase;font-size:12px;& + &{margin-left:32px;}"]);default:return null}})(o.themeKey):null),(o=>o.active?i:null),i);export{a as Content,l as Inner,n as Root,c as Tab};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './Tab'\n\nconst borderColor = (color: string) => css`\n border-bottom: 1px solid ${color};\n`\n\nconst getThemedCss = (theme: TabProps['theme']) => {\n switch (theme) {\n case 'compact':\n return css`\n font-weight: normal;\n & + & {\n margin-left: 20px;\n }\n `\n case 'crispyCompact':\n return css`\n text-transform: uppercase;\n font-size: 12px;\n height: 16px;\n line-height: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid ${(props) => props.theme.colors.mercury};\n & + & {\n margin-left: 18px;\n }\n `\n case 'crispy':\n return css`\n height: 35px;\n text-transform: uppercase;\n font-size: 12px;\n & + & {\n margin-left: 32px;\n }\n `\n default:\n return null\n }\n}\n\nconst activeTab = css`\n color: ${(props) => props.theme.colors.primary};\n position: relative;\n &:after {\n width: initial;\n opacity: 1;\n }\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color'>>`\n color: rgba(247, 247, 247, 1);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: row;\n ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n`\n\nexport const Inner = styled.div`\n position: relative;\n display: block;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0 -20px;\n box-sizing: border-box;\n background: transparent;\n overflow: visible;\n max-width: 100%;\n width: 100%;\n &::before,\n &::after {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n display: block;\n content: '';\n width:
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './Tab'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n border-bottom: 1px solid ${color};\n`\n\nconst getThemedCss = (theme: TabProps['theme']) => {\n switch (theme) {\n case 'compact':\n return css`\n font-weight: normal;\n & + & {\n margin-left: 20px;\n }\n `\n case 'crispyCompact':\n return css`\n text-transform: uppercase;\n font-size: 12px;\n height: 16px;\n line-height: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid ${(props) => props.theme.colors.mercury};\n & + & {\n margin-left: 18px;\n }\n `\n case 'crispy':\n return css`\n height: 35px;\n text-transform: uppercase;\n font-size: 12px;\n & + & {\n margin-left: 32px;\n }\n `\n default:\n return null\n }\n}\n\nconst activeTab = css`\n color: ${(props) => props.theme.colors.primary};\n position: relative;\n &:after {\n width: initial;\n opacity: 1;\n }\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color'>>`\n color: rgba(247, 247, 247, 1);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: row;\n ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n`\n\nexport const Inner = styled.div`\n position: relative;\n display: block;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0 -20px;\n box-sizing: border-box;\n background: transparent;\n overflow: visible;\n max-width: 100%;\n width: 100%;\n &::before,\n &::after {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n display: block;\n content: '';\n width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n height: 100%;\n }\n\n &::before {\n left: 0;\n background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n\n &::after {\n right: 0;\n background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n display: block;\n padding: 0;\n margin: 0 auto;\n white-space: nowrap;\n box-sizing: border-box;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n color: ${(props) => props.theme.colors.mineShaft};\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n height: 0;\n background: transparent;\n visibility: hidden;\n }\n\n &::-webkit-scrollbar-thumb {\n height: 0px;\n background: transparent;\n visibility: hidden;\n }\n\n ${(props) =>\n props.noBorder\n ? css`\n display: flex;\n justify-content: space-between;\n width: 100%;\n `\n : null}\n`\n\nexport const Tab = styled.div.withConfig<TabProps & { themeKey: TabProps['theme'] }>({\n shouldForwardProp: (prop) => !['themeKey', 'color', 'borderColor', 'active'].includes(prop),\n})`\n display: inline-block;\n margin-bottom: -1px;\n flex-shrink: 0;\n font-size: 16px;\n font-weight: bold;\n line-height: 20px;\n padding-bottom: 14px;\n text-decoration: none;\n cursor: pointer;\n z-index: 2;\n transition: color 0.2s ease-out;\n ${(props) => (props.color ? color(props.color) : null)}\n ${(props) => (props.borderColor ? color(props.borderColor, borderColor) : null)}\n &:after {\n opacity: 0;\n width: 0;\n content: '';\n height: 3px;\n position: absolute;\n bottom: -1px;\n z-index: 1;\n left: 0;\n right: 0;\n background-color: currentColor;\n transition: opacity 0.2s ease-out;\n }\n &:hover {\n color: ${(props) => props.theme.colors.primary};\n }\n & + & {\n margin-left: 60px;\n }\n ${(props) => (props.themeKey ? getThemedCss(props.themeKey) : null)}\n ${(props) => (props.active ? activeTab : null)}\n &.active {\n ${activeTab}\n }\n`\n"],"names":["borderColor","color","css","activeTab","props","theme","colors","primary","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","noBorder","Inner","Content","mineShaft","Tab","includes","themeKey","mercury","active"],"mappings":"yFAOA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAsC7B,IAAME,EAAYD,EAAH,CAAA,SAAA,yDACHE,GAAUA,EAAMC,MAAMC,OAAOC,UAQlC,IAAMC,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,KAQZL,GAAWA,EAAMJ,cAAgBI,EAAMW,SAAWd,EAAMG,EAAMJ,YAAaA,GAAe,OAC1FI,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAGtCe,IAAAA,EAAQP,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,wQAAA,+MA9DgB,IAiGrBQ,IAAAA,EAAUR,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2JAAA,iLAAA,KASRL,GAAUA,EAAMC,MAAMC,OAAOY,YAepCd,GACDA,EAAMW,SACFb,EADJ,CAAA,2DAMI,OAGD,IAAMiB,EAAMV,EAAOC,IAAIC,WAAuD,CACnFC,kBAAoBC,IAAU,CAAC,WAAY,QAAS,cAAe,UAAUO,SAASP,KADxEF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2MAAA,IAAA,yLAAA,6BAAA,IAAA,aAAA,MAcXL,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAC9CG,GAAWA,EAAMJ,YAAcC,EAAMG,EAAMJ,YAAaA,GAAe,OAe9DI,GAAUA,EAAMC,MAAMC,OAAOC,UAKtCH,GAAWA,EAAMiB,SAhKAhB,CAAAA,IACpB,OAAQA,GACN,IAAK,UACH,OAAOH,EAAP,CAAA,gDAMF,IAAK,gBACH,OAAOA,EAMuBE,CAAAA,mHAAAA,8BAAAA,GAAUA,EAAMC,MAAMC,OAAOgB,UAK7D,IAAK,SACH,OAAOpB,EAAP,CAAA,iFAQF,QACE,OAAO,OA/BSG,CAgKwBD,EAAMiB,UAAY,OAC3DjB,GAAWA,EAAMmB,OAASpB,EAAY,MAErCA"}
|