@longline/aqua-ui 1.0.22 → 1.0.24
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.
|
@@ -28,8 +28,9 @@ var BoxWrapperBase = function (props) {
|
|
|
28
28
|
return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
|
|
29
29
|
props.label,
|
|
30
30
|
props.children,
|
|
31
|
-
props.hint));
|
|
31
|
+
React.createElement(HintBackground, null, props.hint)));
|
|
32
32
|
};
|
|
33
|
-
var
|
|
33
|
+
var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
|
|
34
|
+
var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
34
35
|
export { BoxWrapper };
|
|
35
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
36
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -11,6 +11,6 @@ var Selector = function (props) {
|
|
|
11
11
|
return (React.createElement(InputWrapper, { fluid: true, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, onClick: props.onClick, onClear: props.onClear, icon: props.onClear ? null : SVG.Icons.Caret, iconPosition: 'right' },
|
|
12
12
|
React.createElement(Selection, { tabIndex: -1, "$multiple": props.multiple, "$placeholder": props.placeholder }, props.children)));
|
|
13
13
|
};
|
|
14
|
-
var Selection = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width:
|
|
14
|
+
var Selection = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n outline: none;\n overflow-x: hidden;\n overflow-y: hidden;\n white-space: nowrap;\n ", " \n // Add ellipsis to selection text:\n ", " \n"], ["\n width: 100%;\n outline: none;\n overflow-x: hidden;\n overflow-y: hidden;\n white-space: nowrap;\n ", " \n // Add ellipsis to selection text:\n ", " \n"])), function (p) { return p.$placeholder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: rgb(from ", " r g b / 50%);\n "], ["\n color: rgb(from ", " r g b / 50%);\n "])), function (p) { return p.theme.colors.primary[3]; }); }, function (p) { return !p.$multiple && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["text-overflow: ellipsis;"], ["text-overflow: ellipsis;"]))); });
|
|
15
15
|
export { Selector };
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -42,7 +42,7 @@ var InputWrapperBase = function (props) {
|
|
|
42
42
|
}
|
|
43
43
|
return (React.createElement("div", { className: props.className, onClick: props.onClick },
|
|
44
44
|
icon && !props.ghost && props.iconPosition == 'left' && icon,
|
|
45
|
-
React.createElement("div", { style: { flex: 1 } }, props.children),
|
|
45
|
+
React.createElement("div", { style: { position: 'relative', flex: 1, overflowX: 'hidden' } }, props.children),
|
|
46
46
|
icon && !props.ghost && props.iconPosition == 'right' && icon,
|
|
47
47
|
props.onClear && React.createElement(Clear, { onClick: props.onClear }),
|
|
48
48
|
React.createElement(Unit, null, props.unit)));
|
package/inputs/Slider/Slider.js
CHANGED
|
@@ -154,7 +154,6 @@ var SliderBase = function (props) {
|
|
|
154
154
|
// Create a number of ticks and return them.
|
|
155
155
|
return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
|
|
156
156
|
};
|
|
157
|
-
var className = props.className, restProps = __rest(props, ["className"]);
|
|
158
157
|
return (React.createElement("div", { className: props.className, ref: sliderRef, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
|
|
159
158
|
React.createElement(Track, null,
|
|
160
159
|
React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
|
package/package.json
CHANGED
|
@@ -7,6 +7,6 @@ import styled, { css } from 'styled-components';
|
|
|
7
7
|
var DialogWindowBase = React.forwardRef(function (props, ref) {
|
|
8
8
|
return React.createElement("div", { className: props.className, ref: ref }, props.children);
|
|
9
9
|
});
|
|
10
|
-
var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n transform: translateX(-50%) translateY(-50%);\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n ", "\n\n // Font:\n font: ", ";\n color: ", "; \n\n /* Dialog window width:\n * Narrower on small screen. */\n width: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n }\n\n /* CSSTransition classes: */\n &.fade-enter {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.fade-enter-active {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n }\n &.fade-exit {\n opacity: 1;\n }\n &.fade-exit-active {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n"], ["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n transform: translateX(-50%) translateY(-50%);\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n ", "\n\n // Font:\n font: ", ";\n color: ", "; \n\n /* Dialog window width:\n * Narrower on small screen. */\n width: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n }\n\n /* CSSTransition classes: */\n &.fade-enter {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.fade-enter-active {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n }\n &.fade-exit {\n opacity: 1;\n }\n &.fade-exit-active {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[
|
|
10
|
+
var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n transform: translateX(-50%) translateY(-50%);\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n ", "\n\n // Font:\n font: ", ";\n color: ", "; \n\n /* Dialog window width:\n * Narrower on small screen. */\n width: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n }\n\n /* CSSTransition classes: */\n &.fade-enter {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.fade-enter-active {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n }\n &.fade-exit {\n opacity: 1;\n }\n &.fade-exit-active {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n"], ["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n transform: translateX(-50%) translateY(-50%);\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n ", "\n\n // Font:\n font: ", ";\n color: ", "; \n\n /* Dialog window width:\n * Narrower on small screen. */\n width: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n }\n\n /* CSSTransition classes: */\n &.fade-enter {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.fade-enter-active {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n }\n &.fade-exit {\n opacity: 1;\n }\n &.fade-exit-active {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .footer {\n background: ", ";\n } \n "], ["\n .footer {\n background: ", ";\n } \n "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
|
|
11
11
|
export { DialogWindow };
|
|
12
12
|
var templateObject_1, templateObject_2;
|