suomifi-ui-components/dist/cjs/core/Pagination/Pagination.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styled = require('styled-components');
var index = require('../theme/reset/index.js');
var spacing = require('../theme/utils/spacing.js');

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  &.fi-pagination {\n    & .fi-pagination_style-wrapper {\n      display: inline-flex;\n      align-items: flex-start;\n    }\n\n    & .fi-pagination_buttons-wrapper {\n      display: inline-flex;\n\n      & .fi-pagination_arrow-button {\n        min-width: 40px;\n        height: 40px;\n        width: 40px;\n        padding-left: 0;\n        padding-right: 0;\n        margin: 0;\n\n        & > .fi-button_icon > .fi-icon {\n          margin-right: auto;\n          margin-left: auto;\n        }\n      }\n\n      & .fi-pagination_page-numbers {\n        display: inline-flex;\n        align-items: center;\n        color: ", ";\n        ", ";\n        margin-left: ", ";\n        margin-right: ", ";\n      }\n    }\n\n    & .fi-pagination_page-input-wrapper {\n      width: 175px;\n      margin-left: ", ";\n    }\n  }\n\n  /** Small screen variant styles */\n  &.fi-pagination--small-screen {\n    display: inline-block;\n\n    & .fi-pagination_style-wrapper {\n      display: inline-flex;\n      flex-wrap: wrap;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n\n      & .fi-pagination_page-input-wrapper {\n        margin-top: ", ";\n        width: 0; /* Allows input to take 100% but still grow and shrink with buttons wrap */\n        min-width: 100%; /* Allows input to take 100% but still grow and shrink with buttons wrap */\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  &.fi-pagination {\n    & .fi-pagination_style-wrapper {\n      display: inline-flex;\n      align-items: flex-start;\n    }\n\n    & .fi-pagination_buttons-wrapper {\n      display: inline-flex;\n\n      & .fi-pagination_arrow-button {\n        min-width: 40px;\n        height: 40px;\n        width: 40px;\n        padding-left: 0;\n        padding-right: 0;\n        margin: 0;\n\n        & > .fi-button_icon > .fi-icon {\n          margin-right: auto;\n          margin-left: auto;\n        }\n      }\n\n      & .fi-pagination_page-numbers {\n        display: inline-flex;\n        align-items: center;\n        color: ", ";\n        ", ";\n        margin-left: ", ";\n        margin-right: ", ";\n      }\n    }\n\n    & .fi-pagination_page-input-wrapper {\n      width: 175px;\n      margin-left: ", ";\n    }\n  }\n\n  /** Small screen variant styles */\n  &.fi-pagination--small-screen {\n    display: inline-block;\n\n    & .fi-pagination_style-wrapper {\n      display: inline-flex;\n      flex-wrap: wrap;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n\n      & .fi-pagination_page-input-wrapper {\n        margin-top: ", ";\n        width: 0; /* Allows input to take 100% but still grow and shrink with buttons wrap */\n        min-width: 100%; /* Allows input to take 100% but still grow and shrink with buttons wrap */\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n  }\n"])), index.element(theme), index.font(theme)('bodyTextSmall'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), index.fixInternalMargins(), theme.colors.depthDark1, theme.typography.bodySemiBoldSmall, theme.spacing.m, theme.spacing.m, theme.spacing.m, theme.spacing.s);
};
var templateObject_1;

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