suomifi-ui-components/dist/esm/core/Form/DateInput/DatePicker/DatePicker.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { font, fixInternalMargins } from '../../../theme/reset/index.js';

var baseStyles = function baseStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  &.fi-date-picker {\n    background-color: ", ";\n    box-shadow: ", ";\n    border: 1px solid ", ";\n\n    & .fi-button {\n      margin: 0;\n    }\n  }\n\n  & .fi-date-picker_bottom-container {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  & .fi-date-picker_application {\n    padding: ", " ", ";\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: fit-content;\n    margin: auto;\n  }\n\n  &.fi-date-picker--small-screen {\n    border: none;\n    background: none;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    position: fixed;\n    transform: translateZ(0) translateY(0);\n    transition: transform 200ms ", ";\n\n    .fi-date-picker_application {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  }\n\n  &.fi-date-picker--hidden {\n    visibility: hidden;\n  }\n\n  &.fi-date-picker--small-screen-hidden {\n    transform: translateZ(0) translateY(100%);\n    transition:\n      transform 200ms ", ",\n      visibility 200ms ", ";\n  }\n\n  & .fi-date-picker_slide-indicator-wrapper {\n    touch-action: none;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    cursor: grab;\n  }\n\n  & .fi-date-picker_slide-indicator {\n    margin: 0 auto;\n    width: 60px;\n    height: 3px;\n    background-color: ", ";\n  }\n\n  & .fi-date-picker_small-screen-container {\n    touch-action: pan-x pinch-zoom;\n    max-height: 100%;\n    overscroll-behavior: contain;\n    background-color: ", ";\n    border-top: 1px solid ", ";\n    border-radius: 10px 10px 0 0;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  & .fi-date-picker_small-screen-container--scroll {\n    overflow: auto;\n    touch-action: auto;\n  }\n\n  & .fi-date-picker_floatingui-arrow,\n  & .fi-date-picker_floatingui-arrow::before {\n    position: absolute;\n    width: 11px;\n    height: 11px;\n  }\n\n  & .fi-date-picker_floatingui-arrow::before {\n    content: '';\n    background-color: ", ";\n    transform: rotate(45deg);\n  }\n\n  & .fi-date-picker_floatingui-arrow[data-floatingui-placement^='bottom'] {\n    top: -6px;\n    &::before {\n      border-top: 1px solid ", ";\n      border-left: 1px solid ", ";\n    }\n  }\n\n  & .fi-date-picker_floatingui-arrow[data-floatingui-placement^='top'] {\n    bottom: -6px;\n    &::before {\n      border-bottom: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  }\n"], ["\n  ", ";\n  ", "\n\n  &.fi-date-picker {\n    background-color: ", ";\n    box-shadow: ", ";\n    border: 1px solid ", ";\n\n    & .fi-button {\n      margin: 0;\n    }\n  }\n\n  & .fi-date-picker_bottom-container {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  & .fi-date-picker_application {\n    padding: ", " ", ";\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: fit-content;\n    margin: auto;\n  }\n\n  &.fi-date-picker--small-screen {\n    border: none;\n    background: none;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    position: fixed;\n    transform: translateZ(0) translateY(0);\n    transition: transform 200ms ", ";\n\n    .fi-date-picker_application {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  }\n\n  &.fi-date-picker--hidden {\n    visibility: hidden;\n  }\n\n  &.fi-date-picker--small-screen-hidden {\n    transform: translateZ(0) translateY(100%);\n    transition:\n      transform 200ms ", ",\n      visibility 200ms ", ";\n  }\n\n  & .fi-date-picker_slide-indicator-wrapper {\n    touch-action: none;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    cursor: grab;\n  }\n\n  & .fi-date-picker_slide-indicator {\n    margin: 0 auto;\n    width: 60px;\n    height: 3px;\n    background-color: ", ";\n  }\n\n  & .fi-date-picker_small-screen-container {\n    touch-action: pan-x pinch-zoom;\n    max-height: 100%;\n    overscroll-behavior: contain;\n    background-color: ", ";\n    border-top: 1px solid ", ";\n    border-radius: 10px 10px 0 0;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  & .fi-date-picker_small-screen-container--scroll {\n    overflow: auto;\n    touch-action: auto;\n  }\n\n  & .fi-date-picker_floatingui-arrow,\n  & .fi-date-picker_floatingui-arrow::before {\n    position: absolute;\n    width: 11px;\n    height: 11px;\n  }\n\n  & .fi-date-picker_floatingui-arrow::before {\n    content: '';\n    background-color: ", ";\n    transform: rotate(45deg);\n  }\n\n  & .fi-date-picker_floatingui-arrow[data-floatingui-placement^='bottom'] {\n    top: -6px;\n    &::before {\n      border-top: 1px solid ", ";\n      border-left: 1px solid ", ";\n    }\n  }\n\n  & .fi-date-picker_floatingui-arrow[data-floatingui-placement^='top'] {\n    bottom: -6px;\n    &::before {\n      border-bottom: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  }\n"])), font(theme)('bodyText'), fixInternalMargins(), theme.colors.whiteBase, theme.shadows.wideBoxShadow, theme.colors.depthDark3, theme.spacing.m, theme.spacing.s, theme.transitions.basicTimingFunction, theme.spacing.xs, theme.spacing.xl, theme.transitions.basicTimingFunction, theme.transitions.basicTimingFunction, theme.spacing.m, theme.spacing.xs, theme.colors.depthLight1, theme.colors.whiteBase, theme.colors.depthDark3, theme.colors.whiteBase, theme.colors.depthDark3, theme.colors.depthDark3, theme.colors.depthDark3, theme.colors.depthDark3);
};
var templateObject_1;

export { baseStyles };
//# sourceMappingURL=DatePicker.baseStyles.js.map