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

Suomi.fi UI component library

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

var baseStyles = function baseStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __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, 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;

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