@longline/aqua-ui 1.0.232 → 1.0.233
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.
|
@@ -132,7 +132,7 @@ var TableBase = function (_a) {
|
|
|
132
132
|
};
|
|
133
133
|
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"], ["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"])));
|
|
134
134
|
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
|
|
135
|
-
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n min-width: 0; \n\n // use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"], ["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n min-width: 0; \n\n // use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .row:hover .cell { background-color: ", "; }\n "], ["\n .row:hover .cell { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "], ["\n .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.columns.filter(function (c) { return c.active; }).map(function (c, i) {
|
|
135
|
+
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n min-width: 0; \n\n // use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"], ["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n min-width: 0; \n\n // use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .row:hover .cell { background-color: ", "; }\n "], ["\n .row:hover .cell { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "], ["\n .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.columns.filter(function (c) { return c.active; }).map(function (c, i) {
|
|
136
136
|
var _a;
|
|
137
137
|
var width_definition = (_a = c.width) !== null && _a !== void 0 ? _a : 1;
|
|
138
138
|
var cellIndex = p.onCheck ? i + 2 : i + 1;
|
package/inputs/Input/Input.js
CHANGED
|
@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
14
14
|
return __assign.apply(this, arguments);
|
|
15
15
|
};
|
|
16
16
|
import * as React from 'react';
|
|
17
|
-
import styled from 'styled-components';
|
|
17
|
+
import styled, { css } from 'styled-components';
|
|
18
18
|
import { InputWrapper } from './InputWrapper';
|
|
19
19
|
var InputBase = function (props) {
|
|
20
20
|
var _a;
|
|
@@ -74,8 +74,8 @@ var InputBase = function (props) {
|
|
|
74
74
|
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
|
|
75
75
|
React.createElement("input", { className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
|
|
76
76
|
};
|
|
77
|
-
var InputStyled = styled(InputBase)(
|
|
77
|
+
var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n ", "\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"], ["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n ", "\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), p.theme.colors.neutral[50]); });
|
|
78
78
|
var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };
|
|
79
79
|
Input.displayName = 'Input';
|
|
80
80
|
export { Input };
|
|
81
|
-
var templateObject_1;
|
|
81
|
+
var templateObject_1, templateObject_2;
|