@smart-react-components/ui/components/DatePicker/DatePickerElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Div_1.default).attrs({
    getDatePickerSize: (v, t) => `
    font-size: ${t.$.size.datePicker[v].fontSize};
    width: ${t.$.size.datePicker[v].width};
  `,
}) `
  height: 100%;

  .src-in-out-show {
    opacity: 0;
    transform: scale(.85);
  }

  .src-in-out-show-active {
    transition: 150ms ease-in-out;
    transition-property: opacity, transform;
    opacity: 1;
    transform: scale(1);
  }

  .src-in-out-hide {
    opacity: 1;
    transform: scale(1);
  }

  .src-in-out-hide-active {
    transition: 150ms ease-in-out;
    transition-property: opacity, transform;
    opacity: 0;
    transform: scale(1.15);
  }

  .src-out-in-show {
    opacity: 0;
    transform: scale(1.15);
  }

  .src-out-in-show-active {
    transition: 150ms ease-in-out;
    transition-property: opacity, transform;
    opacity: 1;
    transform: scale(1);
  }

  .src-out-in-hide {
    opacity: 1;
    transform: scale(1);
  }

  .src-out-in-hide-active {
    transition: 150ms ease-in-out;
    transition-property: opacity, transform;
    opacity: 0;
    transform: scale(.85);
  }
`;