@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/text-field-base.css.ts

@@ -1,416 +0,0 @@
-import {createVar, globalStyle, style} from '@vanilla-extract/css';
-import {iconContainerSize} from './icon-button.css';
-import * as mq from './media-queries.css';
-import {vars as skinVars, vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-import {pxToRem} from './utils/css';
-
-const borderSize = 1;
-
-// We need to substract border size from padding because the container has boxSizing: border-box
-export const fieldTopPadding = `calc(${vars.spacing.inputPadding.top} - ${borderSize}px)`;
-export const fieldBottomPadding = `calc(${vars.spacing.inputPadding.bottom} - ${borderSize}px)`;
-export const fieldLeftPadding = 12 - borderSize;
-export const fieldRightPadding = 16 - borderSize;
-
-export const fieldElementsGap = 12;
-export const fieldEndIconGap = 4;
-export const iconButtonSize = iconContainerSize.default;
-
-const mobileFontSize = createVar();
-const desktopFontSize = createVar();
-const mobileLineHeight = createVar();
-const desktopLineHeight = createVar();
-
-const shrinkedLabelMobileFontSize = createVar();
-const shrinkedLabelDesktopFontSize = createVar();
-const shrinkedLabelMobileLineHeight = createVar();
-const shrinkedLabelDesktopLineHeight = createVar();
-
-const helperTextMobileFontSize = createVar();
-const helperTextDesktopFontSize = createVar();
-const helperTextMobileLineHeight = createVar();
-const helperTextDesktopLineHeight = createVar();
-
-const labelScaleDesktop = createVar();
-const labelScaleMobile = createVar();
-
-export const suggestionsContainerPadding = 8;
-
-export const fieldVars = {
-    mobileFontSize,
-    desktopFontSize,
-    mobileLineHeight,
-    desktopLineHeight,
-    shrinkedLabelMobileFontSize,
-    shrinkedLabelDesktopFontSize,
-    shrinkedLabelMobileLineHeight,
-    shrinkedLabelDesktopLineHeight,
-    helperTextMobileFontSize,
-    helperTextDesktopFontSize,
-    helperTextMobileLineHeight,
-    helperTextDesktopLineHeight,
-    labelScaleDesktop,
-    labelScaleMobile,
-};
-
-const topSpaceWithLabel = {
-    desktop: `calc(${shrinkedLabelDesktopLineHeight} + ${fieldTopPadding})`,
-    mobile: `calc(${shrinkedLabelMobileLineHeight} + ${fieldTopPadding})`,
-};
-
-const topSpaceWithoutLabel = {
-    desktop: `calc(${shrinkedLabelDesktopLineHeight} / 2 + ${fieldTopPadding})`,
-    mobile: `calc(${shrinkedLabelMobileLineHeight} / 2 + ${fieldTopPadding})`,
-};
-
-const bottomSpaceWithLabel = {
-    desktop: fieldBottomPadding,
-    mobile: fieldBottomPadding,
-};
-
-const bottomSpaceWithoutLabel = {
-    desktop: `calc(${shrinkedLabelDesktopLineHeight} / 2 + ${fieldBottomPadding})`,
-    mobile: `calc(${shrinkedLabelMobileLineHeight} / 2 + ${fieldBottomPadding})`,
-};
-
-const commonInputStyles = style([
-    sprinkles({
-        border: 'none',
-        minWidth: 0,
-        color: vars.colors.textPrimary,
-        width: '100%',
-    }),
-    {
-        background: 'none',
-        borderRadius: `calc(${vars.borderRadii.input} - 1px)`,
-        lineHeight: desktopLineHeight,
-        fontSize: desktopFontSize,
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                fontSize: mobileFontSize,
-                lineHeight: mobileLineHeight,
-            },
-        },
-        caretColor: vars.colors.controlActivated,
-
-        /**
-         * Seems like 'display: flex' is causing issues on firefox and the input takes over the whole space
-         * https://stackoverflow.com/questions/43314921/strange-input-widths-in-firefox-vs-chrome
-         */
-        textOverflow: 'ellipsis',
-        selectors: {
-            '&::placeholder': {
-                opacity: 0,
-                transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-            },
-            '&:focus::placeholder': {
-                opacity: 0.5,
-            },
-        },
-
-        // reset FF red shadow styles for required inputs
-        boxShadow: 'none',
-    },
-]);
-
-export const container = style([
-    sprinkles({
-        display: 'flex',
-        flexDirection: 'column',
-    }),
-    {
-        minWidth: 96,
-    },
-]);
-
-// creating a style because a globalStyle uses the generated className
-export const fullWidth = style({
-    width: '100%',
-    display: 'inline-flex',
-});
-
-globalStyle(`${fullWidth} > div`, {
-    width: '100%',
-    display: 'inline-flex',
-});
-
-export const textArea = style([
-    sprinkles({
-        paddingY: 0,
-    }),
-    {
-        // the outline is set in the field container
-        outline: 'none',
-        resize: 'none',
-    },
-    commonInputStyles,
-]);
-
-export const hiddenDatePlaceholder = style({
-    selectors: {
-        /**
-         * Chrome: hide placeholder (dd/mm/yyyy).
-         * `opacity: 0` is needed when min/max is set and some parts of the date are disabled.
-         * be sure to check that case when updating these styles.
-         */
-        '&::-webkit-datetime-edit': {
-            color: 'transparent',
-            opacity: 0,
-        },
-    },
-});
-
-export const emptyDateValue = style({
-    /**
-     * In iOS, the value's height collapses to 0 when the input's value is empty.
-     * We prevent this by forcing the minHeight in this case.
-     */
-    selectors: {
-        '&::-webkit-date-and-time-value': {
-            minHeight: desktopLineHeight,
-            '@media': {
-                [mq.tabletOrSmaller]: {
-                    minHeight: mobileLineHeight,
-                },
-            },
-        },
-    },
-});
-
-export const input = style([
-    sprinkles({
-        position: 'relative',
-    }),
-    {
-        // the outline is set in the field container
-        outline: 'none',
-        margin: 0,
-        WebkitAppearance: 'none',
-        appearance: 'none',
-
-        selectors: {
-            '&::-webkit-search-cancel-button': {
-                WebkitAppearance: 'none',
-                appearance: 'none',
-            },
-            '&::-webkit-search-decoration': {
-                WebkitAppearance: 'none',
-                appearance: 'none',
-            },
-
-            /**
-             * Chrome: make the native icon invisible and stretch it over the whole field so you can click
-             * anywhere in the input field to trigger the native datepicker
-             */
-            '&::-webkit-calendar-picker-indicator': {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                opacity: 0,
-                padding: 0,
-                margin: 0,
-                color: 'transparent',
-                background: 'transparent',
-                cursor: 'pointer',
-            },
-
-            /**
-             * Chrome: datetime fields are 2px taller than other input fields. This is because the browser adds
-             * 1px of top/bottom padding inside the input
-             */
-            //
-            '&[type="month"]::-webkit-datetime-edit-fields-wrapper': {
-                padding: 0,
-            },
-            '&[type="date"]::-webkit-datetime-edit-fields-wrapper': {
-                padding: 0,
-            },
-            '&[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper': {
-                padding: 0,
-            },
-
-            // Override Chrome input autocomplete styles
-            '&:-webkit-autofill': {
-                WebkitTextFillColor: vars.colors.textPrimary,
-                // The background can not be overriden, but we can delay the background color transition to avoid the change
-                transitionProperty: 'background-color',
-                transitionDelay: '99999s',
-            },
-
-            // iOS date/time fields are centered by default, but we want them left aligned
-            '&::-webkit-date-and-time-value': {
-                textAlign: 'left',
-
-                // In Android, Chrome adds margin to the date's value, causing the input to be taller than expected
-                margin: 0,
-            },
-        },
-    },
-    commonInputStyles,
-]);
-
-/**
- * Firefox: hide value if not valid or focused
- * Only apply when Firefox, otherwise it breaks styles in safari mobile
- */
-export const inputFirefoxStyles = style({
-    selectors: {
-        '&[type="month"]:not(:valid):not(:focus)': {
-            color: 'transparent',
-        },
-        '&[type="date"]:not(:valid):not(:focus)': {
-            color: 'transparent',
-        },
-        '&[type="datetime-local"]:not(:valid):not(:focus)': {
-            color: 'transparent',
-        },
-    },
-});
-
-export const inputWithLabel = style({
-    paddingTop: topSpaceWithLabel.desktop,
-    paddingBottom: bottomSpaceWithLabel.desktop,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            paddingTop: topSpaceWithLabel.mobile,
-            paddingBottom: bottomSpaceWithLabel.mobile,
-        },
-    },
-});
-
-export const inputWithoutLabel = style({
-    paddingTop: topSpaceWithoutLabel.desktop,
-    paddingBottom: bottomSpaceWithoutLabel.desktop,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            paddingTop: topSpaceWithoutLabel.mobile,
-            paddingBottom: bottomSpaceWithoutLabel.mobile,
-        },
-    },
-});
-
-export const textAreaWithLabel = style({
-    // using margin instead of padding to avoid the multiline text being visible through the label
-    marginTop: topSpaceWithLabel.desktop,
-    paddingBottom: bottomSpaceWithLabel.desktop,
-    height: `calc(${pxToRem(152)} - ${topSpaceWithLabel.desktop} - 2px)`,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            marginTop: topSpaceWithLabel.mobile,
-            paddingBottom: bottomSpaceWithLabel.mobile,
-            height: `calc(${pxToRem(152)} - ${topSpaceWithLabel.mobile} - 2px)`,
-        },
-    },
-});
-
-export const textAreaWithoutLabel = style({
-    marginTop: 0,
-    paddingTop: topSpaceWithoutLabel.desktop,
-    paddingBottom: bottomSpaceWithoutLabel.desktop,
-    height: `calc(${pxToRem(152)} - 2px)`,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            paddingTop: topSpaceWithoutLabel.mobile,
-            paddingBottom: bottomSpaceWithoutLabel.mobile,
-        },
-    },
-});
-
-export const endIconContainer = style([
-    sprinkles({
-        paddingLeft: fieldEndIconGap,
-        display: 'flex',
-        alignItems: 'center',
-    }),
-    {
-        paddingRight: fieldRightPadding,
-        alignSelf: 'center',
-    },
-]);
-
-export const startIcon = style([
-    sprinkles({
-        paddingRight: fieldElementsGap,
-        display: 'flex',
-        alignItems: 'center',
-        height: '100%',
-        position: 'absolute',
-    }),
-    {
-        paddingLeft: fieldLeftPadding,
-        // passthrough click events to the input
-        pointerEvents: 'none',
-    },
-]);
-
-export const prefix = style([
-    sprinkles({
-        paddingRight: fieldElementsGap,
-    }),
-    {
-        paddingLeft: fieldLeftPadding,
-        transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-    },
-]);
-
-export const menuItemBase = style([
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-    }),
-    {
-        minHeight: pxToRem(48),
-        padding: '6px 8px',
-        userSelect: 'none',
-        borderRadius: `calc(${skinVars.borderRadii.popup} - ${suggestionsContainerPadding / 2}px)`,
-    },
-]);
-
-export const menuItem = style([
-    menuItemBase,
-    sprinkles({
-        cursor: 'pointer',
-    }),
-    {
-        transition: 'background-color 0.1s ease-in-out',
-    },
-]);
-
-export const menuItemSelected = style({
-    backgroundColor: skinVars.colors.backgroundContainerHover,
-    ':active': {
-        backgroundColor: skinVars.colors.backgroundContainerPressed,
-    },
-    '@media': {
-        [mq.touchableOnly]: {
-            backgroundColor: 'transparent',
-            transition: 'none',
-        },
-    },
-});
-
-export const suggestionsContainer = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        marginTop: 8,
-        boxSizing: 'border-box',
-        boxShadow: '0px 2px 4px 0px #00000033',
-        padding: suggestionsContainerPadding,
-        background: skinVars.colors.backgroundContainer,
-        borderRadius: skinVars.borderRadii.popup,
-
-        // one more than TextField label
-        zIndex: 2,
-    },
-]);
-
-globalStyle(`${suggestionsContainer} > ul`, {
-    listStyleType: 'none',
-    padding: 0,
-    margin: 0,
-});