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

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styledComponents = require('styled-components');
var index = require('../../../../theme/reset/index.js');

var baseStyles = function baseStyles(theme) {
  return styledComponents.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  &.fi-month-day {\n    padding: 1px;\n    text-align: center;\n    min-width: 36px;\n    height: 38px;\n  }\n\n  &.fi-month-day--disabled {\n    color: ", ";\n  }\n\n  & .fi-month-day_current {\n    margin: 0 6px;\n    padding: 3px 0;\n    border-bottom: 1px solid ", ";\n    text-align: center;\n  }\n\n  & .fi-month-day_button_current {\n    margin: 0 6px;\n    padding: 3px 0;\n    border-bottom: 1px solid ", ";\n    text-align: center;\n  }\n\n  & .fi-month-day_button--disabled {\n    color: ", ";\n\n    & .fi-month-day_button_current {\n      border-bottom: 1px solid ", ";\n    }\n  }\n\n  & .fi-month-day_button {\n    ", ";\n    border: 1px solid transparent;\n    border-radius: ", ";\n    width: 100%;\n    height: 100%;\n    text-align: center;\n\n    &:focus {\n      box-shadow: none;\n      position: relative;\n      ", "\n\n      &:after {\n        ", "\n      }\n    }\n\n    &:not(.fi-month-day_button--disabled):hover {\n      background-color: ", ";\n      color: ", ";\n\n      & .fi-month-day_button_current {\n        border-bottom: 1px solid ", ";\n      }\n    }\n  }\n\n  & .fi-month-day_button--selected {\n    border: 1px solid ", ";\n    background-color: ", ";\n    text-decoration: none;\n    font-weight: 600;\n\n    &:focus {\n      box-shadow: none;\n      position: relative;\n\n      &:after {\n        ", "\n      }\n    }\n\n    &:hover {\n      font-weight: 400;\n    }\n  }\n\n  @media screen and (forced-colors: active) {\n    [aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n"], ["\n  &.fi-month-day {\n    padding: 1px;\n    text-align: center;\n    min-width: 36px;\n    height: 38px;\n  }\n\n  &.fi-month-day--disabled {\n    color: ", ";\n  }\n\n  & .fi-month-day_current {\n    margin: 0 6px;\n    padding: 3px 0;\n    border-bottom: 1px solid ", ";\n    text-align: center;\n  }\n\n  & .fi-month-day_button_current {\n    margin: 0 6px;\n    padding: 3px 0;\n    border-bottom: 1px solid ", ";\n    text-align: center;\n  }\n\n  & .fi-month-day_button--disabled {\n    color: ", ";\n\n    & .fi-month-day_button_current {\n      border-bottom: 1px solid ", ";\n    }\n  }\n\n  & .fi-month-day_button {\n    ", ";\n    border: 1px solid transparent;\n    border-radius: ", ";\n    width: 100%;\n    height: 100%;\n    text-align: center;\n\n    &:focus {\n      box-shadow: none;\n      position: relative;\n      ", "\n\n      &:after {\n        ", "\n      }\n    }\n\n    &:not(.fi-month-day_button--disabled):hover {\n      background-color: ", ";\n      color: ", ";\n\n      & .fi-month-day_button_current {\n        border-bottom: 1px solid ", ";\n      }\n    }\n  }\n\n  & .fi-month-day_button--selected {\n    border: 1px solid ", ";\n    background-color: ", ";\n    text-decoration: none;\n    font-weight: 600;\n\n    &:focus {\n      box-shadow: none;\n      position: relative;\n\n      &:after {\n        ", "\n      }\n    }\n\n    &:hover {\n      font-weight: 400;\n    }\n  }\n\n  @media screen and (forced-colors: active) {\n    [aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n"])), theme.colors.depthBase, theme.colors.depthBase, theme.colors.blackBase, theme.colors.depthBase, theme.colors.depthBase, index.font(theme)('bodyTextSmall'), theme.radiuses.basic, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.whiteBase, theme.colors.highlightBase, theme.colors.highlightLight3, theme.focuses.absoluteFocus);
};
var templateObject_1;

exports.baseStyles = baseStyles;
//# sourceMappingURL=MonthDay.baseStyles.js.map