@longline/aqua-ui 1.0.282 → 1.0.283
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.
|
@@ -14,6 +14,11 @@ interface ITertiaryButtonProps {
|
|
|
14
14
|
* that it can be used to prevent the default action or stop propagation.
|
|
15
15
|
*/
|
|
16
16
|
onClick: (e?: React.MouseEvent) => void;
|
|
17
|
+
/**
|
|
18
|
+
* If set, this button will have the primary color.
|
|
19
|
+
* @default false
|
|
20
|
+
*/
|
|
21
|
+
primary?: boolean;
|
|
17
22
|
}
|
|
18
23
|
/**
|
|
19
24
|
* The `TertiaryButton` is connected to a specific area or component such as
|
|
@@ -40,7 +40,7 @@ var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templ
|
|
|
40
40
|
* There is no support for icons (although the React children of the component
|
|
41
41
|
* could force one in).
|
|
42
42
|
*/
|
|
43
|
-
])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n "])), p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "], ["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "])), p.theme.colors.neutral[50]); });
|
|
43
|
+
])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "], ["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "])), p.theme.colors.neutral[50]); });
|
|
44
44
|
/**
|
|
45
45
|
* The `TertiaryButton` is connected to a specific area or component such as
|
|
46
46
|
* an `InfoBox`. It renders as a `<button>` element.
|
|
@@ -7,6 +7,6 @@ import styled from 'styled-components';
|
|
|
7
7
|
var FooterBase = function (props) {
|
|
8
8
|
return React.createElement("div", { className: props.className }, props.children);
|
|
9
9
|
};
|
|
10
|
-
var Footer = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 12px;\n display: flex;\n justify-content:
|
|
10
|
+
var Footer = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 12px;\n display: flex;\n justify-content: center;\n gap: 16px;\n & > *:only-child {\n margin-left: auto;\n margin-right: auto; /* centers the single child */\n } \n padding-left: 17px;\n padding-right: 17px;\n @media (max-width: 400px) {\n flex-direction: column-reverse;\n justify-content: center;\n gap: 8px;\n align-items: center;\n }\n"], ["\n margin-top: 12px;\n display: flex;\n justify-content: center;\n gap: 16px;\n & > *:only-child {\n margin-left: auto;\n margin-right: auto; /* centers the single child */\n } \n padding-left: 17px;\n padding-right: 17px;\n @media (max-width: 400px) {\n flex-direction: column-reverse;\n justify-content: center;\n gap: 8px;\n align-items: center;\n }\n"])));
|
|
11
11
|
export { Footer };
|
|
12
12
|
var templateObject_1;
|