@activecollab/components 1.0.200 → 1.0.201
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/cjs/components/Links/Styles.js +1 -1
- package/dist/cjs/components/Links/Styles.js.map +1 -1
- package/dist/esm/components/Links/Styles.d.ts.map +1 -1
- package/dist/esm/components/Links/Styles.js +1 -1
- package/dist/esm/components/Links/Styles.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ exports.StyledLinkElement = StyledLinkElement;
|
|
|
27
27
|
var StyledLink = _styledComponents.default.a.withConfig({
|
|
28
28
|
displayName: "Styles__StyledLink",
|
|
29
29
|
componentId: "sc-1c1jdox-1"
|
|
30
|
-
})(["", " ", " ", " border:none;height:32px;transition:
|
|
30
|
+
})(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
|
|
31
31
|
"WebkitFontSmoothing": "antialiased",
|
|
32
32
|
"MozOsxFontSmoothing": "grayscale",
|
|
33
33
|
"fontWeight": "500",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: table;\n height: inherit;\n\n svg {\n margin: 0 4px;\n margin-bottom: -2px;\n }\n\n ${StyledLinkElement} {\n display: table-cell;\n vertical-align: middle;\n padding-bottom: 2px;\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"file":"Styles.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: table;\n height: inherit;\n\n svg {\n margin: 0 4px;\n margin-bottom: -2px;\n }\n\n ${StyledLinkElement} {\n display: table-cell;\n vertical-align: middle;\n padding-bottom: 2px;\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,UAAU,eAAgB,SAAQ,UAAU;IAC1C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,UAAU,eAAgB,SAAQ,UAAU;IAC1C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EAiPtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAc9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}
|
|
@@ -8,7 +8,7 @@ export var StyledLinkElement = styled.div.withConfig({
|
|
|
8
8
|
export var StyledLink = styled.a.withConfig({
|
|
9
9
|
displayName: "Styles__StyledLink",
|
|
10
10
|
componentId: "sc-1c1jdox-1"
|
|
11
|
-
})(["", " ", " ", " border:none;height:32px;transition:
|
|
11
|
+
})(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
|
|
12
12
|
"WebkitFontSmoothing": "antialiased",
|
|
13
13
|
"MozOsxFontSmoothing": "grayscale",
|
|
14
14
|
"fontWeight": "500",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: table;\n height: inherit;\n\n svg {\n margin: 0 4px;\n margin-bottom: -2px;\n }\n\n ${StyledLinkElement} {\n display: table-cell;\n vertical-align: middle;\n padding-bottom: 2px;\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"file":"Styles.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${tw`\n tw-antialiased\n tw-font-medium\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-inline-flex\n tw-items-center\n tw-justify-center`}\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: 16px;\n color: var(--color-theme-100);\n\n &:focus,\n &:hover {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: 16px;\n border: solid 1px var(--color-theme-600);\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-primary);\n\n &:focus,\n &:hover {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: 6px;\n color: var(--color-theme-600);\n\n &:focus,\n &:hover {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n transition: ease 0.3s all;\n\n &:hover {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n padding: 0;\n width: 32px;\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -6px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -6px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 16px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 20px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n ${StyledLinkElement}:first-child svg {\n margin-left: -4px;\n }\n ${StyledLinkElement}:last-child svg {\n margin-right: -4px;\n }\n\n ${props.size === \"small\" &&\n css`\n radius: 4px;\n `}\n\n ${props.size === \"big\" &&\n css`\n radius: 8px;\n `}\n `}\n`;\n\nexport const StyledLinkElements = styled.div`\n display: table;\n height: inherit;\n\n svg {\n margin: 0 4px;\n margin-bottom: -2px;\n }\n\n ${StyledLinkElement} {\n display: table-cell;\n vertical-align: middle;\n padding-bottom: 2px;\n }\n`;\n\nexport const StyledBackLink = styled.a`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-pl-8\n tw-text-xxs\n tw-uppercase\n tw-inline-flex\n tw-align-middle\n tw-pr-4\n tw-text-theme-600\n tw-cursor-pointer\n `}\n\n text-decoration: none;\n border: transparent 1px solid;\n border-radius: 20px;\n height: 32px;\n font-size: 10px;\n font-weight: 500;\n display: table-cell;\n vertical-align: middle;\n\n &:before,\n &:after {\n content: \"\";\n ${tw`\n tw-border-solid\n tw-text-theme-700\n tw-inline-block\n tw-p-0\n tw-w-2\n tw-h-2\n tw-bg-no-repeat\n `}\n border-width: 0 1px 1px 0;\n position: absolute;\n left: 0;\n transition: all ease 0.3s;\n }\n &:before {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-0`}\n transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n }\n &:hover {\n text-decoration: none;\n border-color: var(--border-primary);\n &:before {\n ${tw`tw-opacity-0`}\n transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n }\n &:after {\n ${tw`tw-opacity-100`}\n transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n }\n }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -9378,7 +9378,7 @@
|
|
|
9378
9378
|
var StyledLink = styled__default["default"].a.withConfig({
|
|
9379
9379
|
displayName: "Styles__StyledLink",
|
|
9380
9380
|
componentId: "sc-1c1jdox-1"
|
|
9381
|
-
})(["", " ", " ", " border:none;height:32px;transition:
|
|
9381
|
+
})(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
|
|
9382
9382
|
"WebkitFontSmoothing": "antialiased",
|
|
9383
9383
|
"MozOsxFontSmoothing": "grayscale",
|
|
9384
9384
|
"fontWeight": "500",
|