@longline/aqua-ui 1.0.162 → 1.0.164
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.
|
@@ -5,8 +5,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
var EllipsizedContentBase = function (props) {
|
|
8
|
-
return React.createElement("div", { className: props.className },
|
|
8
|
+
return React.createElement("div", { className: props.className },
|
|
9
|
+
React.createElement(Ellipsize, null, !props.ghost && props.children));
|
|
9
10
|
};
|
|
10
|
-
var
|
|
11
|
+
var Ellipsize = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; \n width: 100%;\n"], ["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; \n width: 100%;\n"])));
|
|
12
|
+
var EllipsizedContent = styled(EllipsizedContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n height: 36px;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n height: 36px;\n"])));
|
|
11
13
|
export { EllipsizedContent };
|
|
12
|
-
var templateObject_1;
|
|
14
|
+
var templateObject_1, templateObject_2;
|
package/controls/View/View.js
CHANGED
|
@@ -39,7 +39,7 @@ var ViewBase = function (props) {
|
|
|
39
39
|
};
|
|
40
40
|
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n min-height: 36px;\n margin-top: 22px;\n margin-bottom: 22px;\n"], ["\n position: relative;\n min-height: 36px;\n margin-top: 22px;\n margin-bottom: 22px;\n"])));
|
|
41
41
|
var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"], ["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
42
|
-
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n ", "\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint 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 \n ", "\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint 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"
|
|
42
|
+
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n ", "\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\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 \n ", "\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"
|
|
43
43
|
/**
|
|
44
44
|
* A `View` is used to display static (read-only) data. A `View` has a label, and its
|
|
45
45
|
* children are its value.
|