suomifi-ui-components/dist/cjs/core/ActionMenu/ActionMenuItem/ActionMenuItem.baseStyles.js

Suomi.fi UI component library

'use strict';

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

var baseStyles = function baseStyles(theme) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", ";\n\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-action-menu-item {\n    position: relative;\n\n    ", ";\n    text-decoration: none;\n    color: ", ";\n    padding: ", " ", ";\n    display: flex;\n    flex: 1;\n    cursor: pointer;\n    background: inherit;\n    border: none;\n    border-radius: 0;\n    align-items: center;\n\n    &:active,\n    &:focus,\n    &:hover,\n    &:visited {\n      border: none;\n      outline: none;\n      color: ", ";\n    }\n\n    .fi-icon {\n      margin-right: ", ";\n      width: 16px;\n      height: 16px;\n      pointer-events: none;\n    }\n\n    &--disabled {\n      cursor: not-allowed;\n      color: ", ";\n\n      @media (forced-colors: active) {\n        color: GrayText;\n      }\n\n      &:active,\n      &:focus,\n      &:hover,\n      &:visited {\n        color: ", ";\n      }\n    }\n\n    &--selected {\n      color: ", ";\n      background: ", ";\n\n      &:active,\n      &:focus,\n      &:hover,\n      &:visited {\n        text-decoration: none;\n        color: ", ";\n        cursor: pointer;\n      }\n\n      &:after {\n        content: '';\n\n        @media (forced-colors: active) {\n          position: absolute;\n          left: 1px;\n          right: 1px;\n          top: 1px;\n          bottom: 1px;\n          border: solid 3px Highlight;\n        }\n      }\n    }\n  }\n\n  &.fi-action-menu-item--selected.fi-action-menu-item--disabled {\n    cursor: not-allowed;\n    color: ", ";\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n"], ["\n  ", ";\n\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-action-menu-item {\n    position: relative;\n\n    ", ";\n    text-decoration: none;\n    color: ", ";\n    padding: ", " ", ";\n    display: flex;\n    flex: 1;\n    cursor: pointer;\n    background: inherit;\n    border: none;\n    border-radius: 0;\n    align-items: center;\n\n    &:active,\n    &:focus,\n    &:hover,\n    &:visited {\n      border: none;\n      outline: none;\n      color: ", ";\n    }\n\n    .fi-icon {\n      margin-right: ", ";\n      width: 16px;\n      height: 16px;\n      pointer-events: none;\n    }\n\n    &--disabled {\n      cursor: not-allowed;\n      color: ", ";\n\n      @media (forced-colors: active) {\n        color: GrayText;\n      }\n\n      &:active,\n      &:focus,\n      &:hover,\n      &:visited {\n        color: ", ";\n      }\n    }\n\n    &--selected {\n      color: ", ";\n      background: ", ";\n\n      &:active,\n      &:focus,\n      &:hover,\n      &:visited {\n        text-decoration: none;\n        color: ", ";\n        cursor: pointer;\n      }\n\n      &:after {\n        content: '';\n\n        @media (forced-colors: active) {\n          position: absolute;\n          left: 1px;\n          right: 1px;\n          top: 1px;\n          bottom: 1px;\n          border: solid 3px Highlight;\n        }\n      }\n    }\n  }\n\n  &.fi-action-menu-item--selected.fi-action-menu-item--disabled {\n    cursor: not-allowed;\n    color: ", ";\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n"])), index.font(theme)('bodyTextSmall'), index.font(theme)('bodyTextSmall'), theme.colors.blackBase, theme.spacing.xs, theme.spacing.m, theme.colors.blackBase, theme.spacing.insetM, theme.colors.depthBase, theme.colors.depthBase, theme.colors.whiteBase, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.depthBase);
};
var templateObject_1;

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