suomifi-ui-components/dist/esm/core/ActionMenu/ActionMenuPopover/ActionMenuPopover.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  ", ";\n\n  &.fi-action-menu-popover {\n    background-color: ", ";\n    box-shadow: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    padding-top: 8px;\n    padding-bottom: 8px;\n    z-index: ", ";\n  }\n\n  &.fi-action-menu-popover--hidden {\n    visibility: hidden;\n  }\n\n  & .fi-action-menu-popover_list {\n    margin: 0;\n    padding-left: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    list-style-type: none;\n    overflow-y: auto;\n    max-height: 265px;\n\n    &:focus {\n      /* Hide focus outline from <ul> */\n      outline: none;\n    }\n  }\n\n  /* Arrow base */\n  & .fi-action-menu-popover_popper-arrow::before,\n  & .fi-action-menu-popover_popper-arrow::after {\n    content: '';\n    position: absolute;\n    left: -9px;\n    height: 0;\n    width: 0;\n    border: solid transparent;\n    pointer-events: none;\n  }\n\n  /* Arrow on top side */\n  & .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] {\n    bottom: 100%;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before {\n    border-bottom-color: ", ";\n    border-width: 9px;\n    margin-right: -9px;\n    bottom: 100%;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after {\n    border-bottom-color: ", ";\n    border-width: 8px;\n    margin-right: -9px;\n    left: -8px;\n    bottom: 100%;\n  }\n\n  /* Arrow on bottom side */\n  & .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] {\n    top: 100%;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before {\n    border-top-color: ", ";\n    border-width: 9px;\n    margin-right: -9px;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after {\n    border-top-color: ", ";\n    border-width: 8px;\n    margin-right: -9px;\n    left: -8px;\n  }\n"], ["\n  ", ";\n\n  &.fi-action-menu-popover {\n    background-color: ", ";\n    box-shadow: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    padding-top: 8px;\n    padding-bottom: 8px;\n    z-index: ", ";\n  }\n\n  &.fi-action-menu-popover--hidden {\n    visibility: hidden;\n  }\n\n  & .fi-action-menu-popover_list {\n    margin: 0;\n    padding-left: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    list-style-type: none;\n    overflow-y: auto;\n    max-height: 265px;\n\n    &:focus {\n      /* Hide focus outline from <ul> */\n      outline: none;\n    }\n  }\n\n  /* Arrow base */\n  & .fi-action-menu-popover_popper-arrow::before,\n  & .fi-action-menu-popover_popper-arrow::after {\n    content: '';\n    position: absolute;\n    left: -9px;\n    height: 0;\n    width: 0;\n    border: solid transparent;\n    pointer-events: none;\n  }\n\n  /* Arrow on top side */\n  & .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] {\n    bottom: 100%;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::before {\n    border-bottom-color: ", ";\n    border-width: 9px;\n    margin-right: -9px;\n    bottom: 100%;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='bottom-end']::after {\n    border-bottom-color: ", ";\n    border-width: 8px;\n    margin-right: -9px;\n    left: -8px;\n    bottom: 100%;\n  }\n\n  /* Arrow on bottom side */\n  & .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end'] {\n    top: 100%;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::before {\n    border-top-color: ", ";\n    border-width: 9px;\n    margin-right: -9px;\n  }\n\n  &\n    .fi-action-menu-popover_popper-arrow[data-popper-placement^='top-end']::after {\n    border-top-color: ", ";\n    border-width: 8px;\n    margin-right: -9px;\n    left: -8px;\n  }\n"])), font(theme)('bodyTextSmall'), theme.colors.whiteBase, theme.shadows.wideBoxShadow, theme.colors.blackLight1, theme.radiuses.basic, theme.zindexes.menu, theme.colors.blackLight1, theme.colors.whiteBase, theme.colors.blackLight1, theme.colors.whiteBase);
};
var templateObject_1;

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