@ringcentral/juno 1.12.5-beta.5896-ded29c04 → 1.12.5-beta.5899-a39495cd
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.
|
@@ -4,7 +4,7 @@ var tslib_1 = require("tslib");
|
|
|
4
4
|
var foundation_1 = require("../../../../foundation");
|
|
5
5
|
var utils_1 = require("../utils");
|
|
6
6
|
exports.OutlineTextFieldStyle = function (_a) {
|
|
7
|
-
var radius = _a.radius, size = _a.size, colorProp = _a.color;
|
|
7
|
+
var radius = _a.radius, size = _a.size, colorProp = _a.color, multiline = _a.multiline;
|
|
8
8
|
var height = foundation_1.px(utils_1.RcOutlineTextFieldHeights[size]);
|
|
9
9
|
var _b = utils_1.RcOutlineTextFieldSpaces[size], inside = _b.inside, outside = _b.outside, insideLeft = _b.insideLeft, y = _b.y;
|
|
10
10
|
var labelMargin = utils_1.RcOutlineTextFieldLabelMargins[size];
|
|
@@ -13,6 +13,6 @@ exports.OutlineTextFieldStyle = function (_a) {
|
|
|
13
13
|
var borderColor = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('neutral', 'l03'));
|
|
14
14
|
var focusBorderColor = foundation_1.getParsePaletteColor(colorProp, foundation_1.palette2('interactive', 'f01'));
|
|
15
15
|
// `-webkit-tap-highlight-color` for cover background color, prevent color be cover by browser
|
|
16
|
-
return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "], ["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "])), utils_1.RcOutlineTextFieldInputClasses.input, foundation_1.typography(typographyToken), utils_1.belowIconButtonSpacing(foundation_1.spacing(inside)), utils_1.RcOutlineTextFieldInputClasses.input, foundation_1.spacing(insideLeft || inside), utils_1.RcTextFieldClasses.root, utils_1.RcOutlineTextFieldInputClasses.root, foundation_1.spacing(labelMargin), utils_1.RcOutlineTextFieldInputClasses.root, height, foundation_1.palette2('neutral', 'b01'), foundation_1.spacing(y, outside), currRadius, currRadius, foundation_1.fakeBorder({ color: borderColor }), utils_1.RcOutlineTextFieldInputClasses.focused, utils_1.RcOutlineTextFieldInputClasses.disabled, foundation_1.palette2('neutral', 'b02'), utils_1.RcOutlineTextFieldInputClasses.focused, foundation_1.fakeBorder({ color: focusBorderColor }), utils_1.RcOutlineTextFieldInputClasses.error, foundation_1.fakeBorder({ color: foundation_1.palette2('danger', 'f02') }), utils_1.RcOutlineTextFieldInputClasses.disabled, foundation_1.palette2('neutral', 'b03'), foundation_1.fakeBorder({ color: foundation_1.palette2('disabled', 'f02') }));
|
|
16
|
+
return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "], ["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "])), utils_1.RcOutlineTextFieldInputClasses.input, foundation_1.typography(typographyToken), utils_1.belowIconButtonSpacing(foundation_1.spacing(inside)), utils_1.RcOutlineTextFieldInputClasses.input, foundation_1.spacing(insideLeft || inside), utils_1.RcTextFieldClasses.root, utils_1.RcOutlineTextFieldInputClasses.root, foundation_1.spacing(labelMargin), utils_1.RcOutlineTextFieldInputClasses.root, height, foundation_1.palette2('neutral', 'b01'), foundation_1.spacing(multiline ? y : 0, outside), currRadius, currRadius, foundation_1.fakeBorder({ color: borderColor }), utils_1.RcOutlineTextFieldInputClasses.focused, utils_1.RcOutlineTextFieldInputClasses.disabled, foundation_1.palette2('neutral', 'b02'), utils_1.RcOutlineTextFieldInputClasses.focused, foundation_1.fakeBorder({ color: focusBorderColor }), utils_1.RcOutlineTextFieldInputClasses.error, foundation_1.fakeBorder({ color: foundation_1.palette2('danger', 'f02') }), utils_1.RcOutlineTextFieldInputClasses.disabled, foundation_1.palette2('neutral', 'b03'), foundation_1.fakeBorder({ color: foundation_1.palette2('disabled', 'f02') }));
|
|
17
17
|
};
|
|
18
18
|
var templateObject_1;
|
|
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from "tslib";
|
|
|
2
2
|
import { css, fakeBorder, getParsePaletteColor, palette2, px, radius as radiusFn, spacing, typography, } from '../../../../foundation';
|
|
3
3
|
import { belowIconButtonSpacing, RcOutlineTextFieldFontStyles, RcOutlineTextFieldHeights, RcOutlineTextFieldInputClasses, RcOutlineTextFieldLabelMargins, RcOutlineTextFieldSpaces, RcTextFieldClasses, } from '../utils';
|
|
4
4
|
export var OutlineTextFieldStyle = function (_a) {
|
|
5
|
-
var radius = _a.radius, size = _a.size, colorProp = _a.color;
|
|
5
|
+
var radius = _a.radius, size = _a.size, colorProp = _a.color, multiline = _a.multiline;
|
|
6
6
|
var height = px(RcOutlineTextFieldHeights[size]);
|
|
7
7
|
var _b = RcOutlineTextFieldSpaces[size], inside = _b.inside, outside = _b.outside, insideLeft = _b.insideLeft, y = _b.y;
|
|
8
8
|
var labelMargin = RcOutlineTextFieldLabelMargins[size];
|
|
@@ -11,6 +11,6 @@ export var OutlineTextFieldStyle = function (_a) {
|
|
|
11
11
|
var borderColor = getParsePaletteColor(colorProp, palette2('neutral', 'l03'));
|
|
12
12
|
var focusBorderColor = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
|
|
13
13
|
// `-webkit-tap-highlight-color` for cover background color, prevent color be cover by browser
|
|
14
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "], ["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "])), RcOutlineTextFieldInputClasses.input, typography(typographyToken), belowIconButtonSpacing(spacing(inside)), RcOutlineTextFieldInputClasses.input, spacing(insideLeft || inside), RcTextFieldClasses.root, RcOutlineTextFieldInputClasses.root, spacing(labelMargin), RcOutlineTextFieldInputClasses.root, height, palette2('neutral', 'b01'), spacing(y, outside), currRadius, currRadius, fakeBorder({ color: borderColor }), RcOutlineTextFieldInputClasses.focused, RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b02'), RcOutlineTextFieldInputClasses.focused, fakeBorder({ color: focusBorderColor }), RcOutlineTextFieldInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b03'), fakeBorder({ color: palette2('disabled', 'f02') }));
|
|
14
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "], ["\n .", " {\n ", ";\n }\n\n ", ";\n\n * + .", " {\n margin-left: ", ";\n }\n\n &.", " {\n label + .", " {\n margin-top: ", ";\n }\n }\n\n .", " {\n -webkit-tap-highlight-color: transparent;\n min-height: ", ";\n background: ", ";\n padding: ", ";\n border-radius: ", ";\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: ", ";\n transition: none;\n border-bottom: none !important;\n pointer-events: none;\n ", ";\n }\n\n &:not(.", "):not(.", "):hover {\n background: ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n &:before {\n ", ";\n }\n }\n\n .", " {\n background: ", ";\n &:before {\n ", ";\n }\n }\n "])), RcOutlineTextFieldInputClasses.input, typography(typographyToken), belowIconButtonSpacing(spacing(inside)), RcOutlineTextFieldInputClasses.input, spacing(insideLeft || inside), RcTextFieldClasses.root, RcOutlineTextFieldInputClasses.root, spacing(labelMargin), RcOutlineTextFieldInputClasses.root, height, palette2('neutral', 'b01'), spacing(multiline ? y : 0, outside), currRadius, currRadius, fakeBorder({ color: borderColor }), RcOutlineTextFieldInputClasses.focused, RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b02'), RcOutlineTextFieldInputClasses.focused, fakeBorder({ color: focusBorderColor }), RcOutlineTextFieldInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b03'), fakeBorder({ color: palette2('disabled', 'f02') }));
|
|
15
15
|
};
|
|
16
16
|
var templateObject_1;
|