@longline/aqua-ui 1.0.81 → 1.0.82
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/controls/View/View.js +5 -4
- package/package.json +1 -1
package/controls/View/View.js
CHANGED
|
@@ -30,9 +30,10 @@ import { Label } from '../../containers/Form/elements/Label';
|
|
|
30
30
|
var ViewBase = function (props) {
|
|
31
31
|
return (React.createElement("div", { className: props.className },
|
|
32
32
|
React.createElement(Label, null, props.label),
|
|
33
|
-
!props.ghost && props.children));
|
|
33
|
+
React.createElement(Content, null, !props.ghost && props.children)));
|
|
34
34
|
};
|
|
35
|
-
var
|
|
35
|
+
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n"], ["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])));
|
|
36
|
+
var ViewStyled = styled(ViewBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n overflow: hidden;\n\n // Hint/error background:\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n overflow: hidden;\n\n // Hint/error background:\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"
|
|
36
37
|
/**
|
|
37
38
|
* A `View` is used to display static (read-only) data. A `View` has a label, and its
|
|
38
39
|
* children are its value.
|
|
@@ -41,7 +42,7 @@ var ViewStyled = styled(ViewBase)(templateObject_3 || (templateObject_3 = __make
|
|
|
41
42
|
* <View label="Email address">{email}</View>
|
|
42
43
|
* ```
|
|
43
44
|
*/
|
|
44
|
-
])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(
|
|
45
|
+
])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\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 color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
45
46
|
/**
|
|
46
47
|
* A `View` is used to display static (read-only) data. A `View` has a label, and its
|
|
47
48
|
* children are its value.
|
|
@@ -55,4 +56,4 @@ var View = function (_a) {
|
|
|
55
56
|
return React.createElement(ViewStyled, __assign({ ghost: ghost }, props));
|
|
56
57
|
};
|
|
57
58
|
export { View };
|
|
58
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|