@activecollab/components 1.0.194 → 1.0.195
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/Button/Styles.js +2 -2
- package/dist/cjs/components/Button/Styles.js.map +1 -1
- package/dist/esm/components/Button/Styles.js +2 -2
- package/dist/esm/components/Button/Styles.js.map +1 -1
- package/dist/index.js +2 -2
- 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
|
@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
20
20
|
var StyledButton = _styledComponents.default.button.withConfig({
|
|
21
21
|
displayName: "Styles__StyledButton",
|
|
22
22
|
componentId: "sc-vi1kcr-0"
|
|
23
|
-
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:
|
|
23
|
+
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;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;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
24
24
|
return props.size === "small" && (0, _styledComponents.css)(["height:24px;"]);
|
|
25
25
|
}, function (props) {
|
|
26
26
|
return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
|
|
@@ -35,7 +35,7 @@ var StyledButton = _styledComponents.default.button.withConfig({
|
|
|
35
35
|
}, function (props) {
|
|
36
36
|
return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
37
37
|
}, function (props) {
|
|
38
|
-
return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700)
|
|
38
|
+
return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
39
39
|
}, function (props) {
|
|
40
40
|
return props.iconOnly && (0, _styledComponents.css)(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
|
|
41
41
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAMO,IAAMA,YAAY,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: 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 &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\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: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus {\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: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\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 === \"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 &:focus {\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 === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus {\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: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\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 === \"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\n &:hover,\n &:focus {\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 display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\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 .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\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 .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
|
|
@@ -4,7 +4,7 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
|
4
4
|
export var StyledButton = styled.button.withConfig({
|
|
5
5
|
displayName: "Styles__StyledButton",
|
|
6
6
|
componentId: "sc-vi1kcr-0"
|
|
7
|
-
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:
|
|
7
|
+
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;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;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
8
8
|
return props.size === "small" && css(["height:24px;"]);
|
|
9
9
|
}, function (props) {
|
|
10
10
|
return props.size === "big" && css(["height:40px;"]);
|
|
@@ -19,7 +19,7 @@ export var StyledButton = styled.button.withConfig({
|
|
|
19
19
|
}, function (props) {
|
|
20
20
|
return (props.variant === "option" || props.variant === "text gray") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
21
21
|
}, function (props) {
|
|
22
|
-
return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700)
|
|
22
|
+
return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
23
23
|
}, function (props) {
|
|
24
24
|
return props.iconOnly && css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"]));
|
|
25
25
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AAMA,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAV;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: 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 &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\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: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus {\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: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\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 === \"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 &:focus {\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 === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus {\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: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\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 === \"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\n &:hover,\n &:focus {\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 display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\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 .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\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 .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
var StyledButton$2 = styled__default["default"].button.withConfig({
|
|
280
280
|
displayName: "Styles__StyledButton",
|
|
281
281
|
componentId: "sc-vi1kcr-0"
|
|
282
|
-
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:
|
|
282
|
+
})(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;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;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
283
283
|
return props.size === "small" && styled.css(["height:24px;"]);
|
|
284
284
|
}, function (props) {
|
|
285
285
|
return props.size === "big" && styled.css(["height:40px;"]);
|
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
}, function (props) {
|
|
295
295
|
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
296
296
|
}, function (props) {
|
|
297
|
-
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700)
|
|
297
|
+
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
298
298
|
}, function (props) {
|
|
299
299
|
return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
|
|
300
300
|
}, function (props) {
|