suomifi-ui-components
Version:
Suomi.fi UI component library
15 lines (12 loc) • 3.41 kB
JavaScript
import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { element, font, button } from '../../theme/reset/index.js';
import 'polished';
import { allStates } from '../../../utils/css/pseudo.js';
import '@babel/runtime/helpers/typeof';
var expanderTitleBaseStyles = function expanderTitleBaseStyles(theme) {
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n position: relative;\n width: 100%;\n max-width: 100%;\n min-height: 60px;\n background-color: ", ";\n border-radius: inherit;\n white-space: break-word;\n word-wrap: break-word;\n\n &.fi-expander_title {\n display: flex;\n justify-content: space-between;\n }\n &.fi-expander_title--open {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n & .fi-expander_title-content {\n display: inline-block;\n padding: 17px ", " 16px ", ";\n }\n\n & .fi-expander_title-button {\n ", "\n ", "\n color: ", ";\n display: flex;\n justify-content: center;\n position: relative;\n align-items: flex-start;\n flex: 0 0 60px;\n padding-top: ", ";\n\n &:focus {\n outline: 0;\n }\n\n &:focus-within {\n ", "\n &:after {\n ", "\n }\n }\n\n &:hover {\n background: ", ";\n }\n\n ", "\n & * {\n cursor: pointer;\n }\n ", "\n }\n\n & .fi-expander_title-icon {\n position: relative;\n height: 20px;\n width: 20px;\n }\n & .fi-expander_title--open .fi-expander_title-icon,\n & .fi-expander_title-icon--open {\n transform: rotate(-180deg);\n }\n"], ["\n ", "\n ", "\n position: relative;\n width: 100%;\n max-width: 100%;\n min-height: 60px;\n background-color: ", ";\n border-radius: inherit;\n white-space: break-word;\n word-wrap: break-word;\n\n &.fi-expander_title {\n display: flex;\n justify-content: space-between;\n }\n &.fi-expander_title--open {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n & .fi-expander_title-content {\n display: inline-block;\n padding: 17px ", " 16px ", ";\n }\n\n & .fi-expander_title-button {\n ", "\n ", "\n color: ", ";\n display: flex;\n justify-content: center;\n position: relative;\n align-items: flex-start;\n flex: 0 0 60px;\n padding-top: ", ";\n\n &:focus {\n outline: 0;\n }\n\n &:focus-within {\n ", "\n &:after {\n ", "\n }\n }\n\n &:hover {\n background: ", ";\n }\n\n ", "\n & * {\n cursor: pointer;\n }\n ", "\n }\n\n & .fi-expander_title-icon {\n position: relative;\n height: 20px;\n width: 20px;\n }\n & .fi-expander_title--open .fi-expander_title-icon,\n & .fi-expander_title-icon--open {\n transform: rotate(-180deg);\n }\n"])), element(theme), font(theme)('bodySemiBold'), theme.colors.highlightLight4, theme.colors.whiteBase, theme.spacing.m, theme.spacing.m, button(theme), font(theme)('bodySemiBold'), theme.colors.highlightBase, theme.spacing.m, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.gradients.depthSecondaryToDepthSecondaryDark1, theme.focuses.noMouseFocus, allStates('cursor: pointer;'));
};
var templateObject_1;
export { expanderTitleBaseStyles };
//# sourceMappingURL=ExpanderTitle.baseStyles.js.map