suomifi-ui-components
Version:
Suomi.fi UI component library
12 lines (9 loc) • 3.93 kB
JavaScript
import { __makeTemplateObject } from 'tslib';
import { font } from '../../theme/reset/index.js';
import { css } from 'styled-components';
var baseStyles = function baseStyles(theme) {
return css(templateObject_1 || (templateObject_1 = __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"])), font(theme)('bodyTextSmall'), 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;
export { baseStyles };
//# sourceMappingURL=ActionMenuItem.baseStyles.js.map