suomifi-ui-components
Version:
Suomi.fi UI component library
17 lines (13 loc) • 3.19 kB
JavaScript
'use strict';
var tslib = require('tslib');
var styled = require('styled-components');
var index = require('../../theme/reset/index.js');
require('polished');
var pseudo = require('../../../utils/css/pseudo.js');
require('/runtime/helpers/typeof');
var expanderTitleButtonBaseStyles = function expanderTitleButtonBaseStyles(theme) {
return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n position: relative;\n width: 100%;\n max-width: 100%;\n min-height: 60px;\n background-color: ", ";\n border-radius: inherit;\n\n &:hover {\n background: ", ";\n }\n\n & .fi-expander_title-button {\n display: block;\n }\n &.fi-expander_title-button--open {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n & .fi-expander_title-button_button {\n ", "\n ", "\n color: ", ";\n display: inline-block;\n width: 100%;\n max-width: 100%;\n min-height: 60px;\n padding: 17px ", " 16px ", ";\n\n &:focus {\n outline: 0;\n }\n\n &:focus-within {\n ", "\n &:after {\n ", "\n }\n }\n\n ", "\n & * {\n cursor: pointer;\n }\n ", "\n }\n\n & .fi-expander_title-button-icon {\n position: absolute;\n top: 0;\n right: 0;\n height: 20px;\n width: 20px;\n margin: ", ";\n }\n\n & .fi-expander_title-button--open .fi-expander_title-button-icon,\n & .fi-expander_title-button-icon--open {\n transform: rotate(-180deg);\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\n &:hover {\n background: ", ";\n }\n\n & .fi-expander_title-button {\n display: block;\n }\n &.fi-expander_title-button--open {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n & .fi-expander_title-button_button {\n ", "\n ", "\n color: ", ";\n display: inline-block;\n width: 100%;\n max-width: 100%;\n min-height: 60px;\n padding: 17px ", " 16px ", ";\n\n &:focus {\n outline: 0;\n }\n\n &:focus-within {\n ", "\n &:after {\n ", "\n }\n }\n\n ", "\n & * {\n cursor: pointer;\n }\n ", "\n }\n\n & .fi-expander_title-button-icon {\n position: absolute;\n top: 0;\n right: 0;\n height: 20px;\n width: 20px;\n margin: ", ";\n }\n\n & .fi-expander_title-button--open .fi-expander_title-button-icon,\n & .fi-expander_title-button-icon--open {\n transform: rotate(-180deg);\n }\n"])), index.element(theme), theme.colors.highlightLight4, theme.gradients.depthSecondaryToDepthSecondaryDark1, theme.colors.whiteBase, index.button(theme), index.font(theme)('bodySemiBold'), theme.colors.highlightBase, theme.spacing.xxxl, theme.spacing.m, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.focuses.noMouseFocus, pseudo.allStates('cursor: pointer;'), theme.spacing.m);
};
var templateObject_1;
exports.expanderTitleButtonBaseStyles = expanderTitleButtonBaseStyles;
//# sourceMappingURL=ExpanderTitleButton.baseStyles.js.map