suomifi-ui-components/dist/cjs/core/LanguageMenu/LanguageMenuPopover/LanguageMenuPopover.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  ", ";\n\n  &.fi-language-menu-popover {\n    background-color: ", ";\n    box-shadow: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    z-index: ", ";\n  }\n\n  &.fi-language-menu-popover--hidden {\n    visibility: hidden;\n  }\n\n  & .fi-language-menu-popover_list {\n    padding-top: 5px;\n    padding-bottom: 5px;\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: 260px;\n\n    &:focus {\n      /* Hide focus outline from menu */\n      outline: none;\n    }\n  }\n\n  /* Arrow base */\n  & .fi-language-menu-popover_popper-arrow::before,\n  & .fi-language-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  &\n    .fi-language-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] {\n    bottom: 100%;\n  }\n\n  &\n    .fi-language-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-language-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-language-menu-popover_popper-arrow[data-popper-placement^='top-end'] {\n    top: 100%;\n  }\n\n  &\n    .fi-language-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-language-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-language-menu-popover {\n    background-color: ", ";\n    box-shadow: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    z-index: ", ";\n  }\n\n  &.fi-language-menu-popover--hidden {\n    visibility: hidden;\n  }\n\n  & .fi-language-menu-popover_list {\n    padding-top: 5px;\n    padding-bottom: 5px;\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: 260px;\n\n    &:focus {\n      /* Hide focus outline from menu */\n      outline: none;\n    }\n  }\n\n  /* Arrow base */\n  & .fi-language-menu-popover_popper-arrow::before,\n  & .fi-language-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  &\n    .fi-language-menu-popover_popper-arrow[data-popper-placement^='bottom-end'] {\n    bottom: 100%;\n  }\n\n  &\n    .fi-language-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-language-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-language-menu-popover_popper-arrow[data-popper-placement^='top-end'] {\n    top: 100%;\n  }\n\n  &\n    .fi-language-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-language-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"])), index.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;

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