suomifi-ui-components/dist/cjs/core/Button/Button.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 colors = require('../../utils/css/colors.js');
require('@babel/runtime/helpers/typeof');
var spacing = require('../theme/utils/spacing.js');

var invertedStyles = function invertedStyles(theme) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  &.fi-button--inverted {\n    background: none;\n    background-color: ", ";\n    border: 1px solid ", ";\n    text-shadow: none;\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: none;\n      background-color: ", ";\n    }\n\n    &.fi-button--disabled,\n    &[disabled],\n    &:disabled {\n      opacity: 0.41;\n      background: none;\n      background-color: none;\n    }\n  }\n"], ["\n  &.fi-button--inverted {\n    background: none;\n    background-color: ", ";\n    border: 1px solid ", ";\n    text-shadow: none;\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: none;\n      background-color: ", ";\n    }\n\n    &.fi-button--disabled,\n    &[disabled],\n    &:disabled {\n      opacity: 0.41;\n      background: none;\n      background-color: none;\n    }\n  }\n"])), theme.colors.highlightBase, theme.colors.whiteBase, theme.gradients.whiteBaseNegative, theme.colors.highlightBase);
};
var secondary = function secondary(theme) {
  return styled.css(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  color: ", ";\n  background: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  text-shadow: none;\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    background: none;\n    background-color: ", ";\n  }\n\n  &.fi-button--disabled,\n  &[disabled],\n  &:disabled {\n    color: ", ";\n    text-shadow: none;\n    background: none;\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  .fi-button_loading-icon {\n    .fi-icon-component-brand-fill {\n      fill: ", ";\n    }\n  }\n"], ["\n  color: ", ";\n  background: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  text-shadow: none;\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    background: none;\n    background-color: ", ";\n  }\n\n  &.fi-button--disabled,\n  &[disabled],\n  &:disabled {\n    color: ", ";\n    text-shadow: none;\n    background: none;\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  .fi-button_loading-icon {\n    .fi-icon-component-brand-fill {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.highlightBase, theme.gradients.whiteBaseToDepthLight2, theme.colors.depthLight2, theme.colors.depthBase, theme.colors.highlightLight4, theme.colors.depthBase, theme.colors.depthBase);
};
var secondaryStyles = function secondaryStyles(theme) {
  return styled.css(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  &.fi-button--secondary {\n    ", "\n  }\n"], ["\n  &.fi-button--secondary {\n    ", "\n  }\n"])), secondary(theme));
};
var secondaryNoBorderStyles = function secondaryNoBorderStyles(theme) {
  return styled.css(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  &.fi-button--secondary-noborder {\n    ", "\n    border: none;\n    padding: ", " ", ";\n    background-color: transparent;\n\n    &.fi-button--icon-only {\n      padding: ", " 12px;\n    }\n\n    .fi-button_loading-icon {\n      .fi-icon-component-brand-fill {\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  &.fi-button--secondary-noborder {\n    ", "\n    border: none;\n    padding: ", " ", ";\n    background-color: transparent;\n\n    &.fi-button--icon-only {\n      padding: ", " 12px;\n    }\n\n    .fi-button_loading-icon {\n      .fi-icon-component-brand-fill {\n        fill: ", ";\n      }\n    }\n  }\n"])), secondary(theme), theme.spacing.insetL, theme.spacing.insetXxl, theme.spacing.insetS, theme.colors.depthBase);
};
var secondaryLightStyles = function secondaryLightStyles(theme) {
  return styled.css(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  &.fi-button--secondary-light {\n    color: ", ";\n    ", "\n    background: ", ";\n    padding: ", " ", ";\n    border: none;\n\n    &.fi-button--icon-only {\n      padding: ", " 12px;\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n\n    &.fi-button--disabled,\n    &[disabled],\n    &:disabled {\n      color: ", ";\n      background: none;\n      background-color: ", ";\n    }\n\n    .fi-button_loading-icon {\n      .fi-icon-component-brand-fill {\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  &.fi-button--secondary-light {\n    color: ", ";\n    ", "\n    background: ", ";\n    padding: ", " ", ";\n    border: none;\n\n    &.fi-button--icon-only {\n      padding: ", " 12px;\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n\n    &.fi-button--disabled,\n    &[disabled],\n    &:disabled {\n      color: ", ";\n      background: none;\n      background-color: ", ";\n    }\n\n    .fi-button_loading-icon {\n      .fi-icon-component-brand-fill {\n        fill: ", ";\n      }\n    }\n  }\n"])), theme.colors.highlightBase, secondary(theme), theme.gradients.depthSecondaryToDepthSecondaryDark1, theme.spacing.insetL, theme.spacing.insetXxl, theme.spacing.insetS, theme.gradients.highlightLight4ToDepthSecondary, theme.gradients.depthLight3ToDepthLight2, theme.colors.depthBase, theme.colors.depthLight3, theme.colors.depthBase);
};
var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return styled.css(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  padding: 9px ", ";\n  min-height: 40px;\n  color: ", ";\n  background: ", ";\n  border-radius: ", ";\n  text-align: center;\n  text-shadow: ", ";\n  cursor: pointer;\n  border: 1px solid transparent; /* For high contrast mode */\n\n  &:focus {\n    position: relative;\n    ", " /* For high contrast mode */\n\n    &::after {\n      ", "\n    }\n  }\n\n  &:hover {\n    background: ", ";\n    outline: 2px solid transparent; /* For high contrast mode */\n  }\n\n  &:active {\n    background: ", ";\n  }\n\n  &.fi-button--disabled,\n  &[disabled],\n  &:disabled {\n    text-shadow: 0 1px 1px ", ";\n    background: ", ";\n    user-select: none;\n    cursor: not-allowed;\n  }\n\n  &.fi-button--disabled:not([aria-disabled='true'])::after {\n    border: none;\n    box-shadow: none;\n  }\n\n  &.fi-button--fullwidth {\n    display: block;\n    width: 100%;\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  \n  & > .fi-button_icon > .fi-icon {\n    width: 16px;\n    height: 16px;\n    margin-right: ", ";\n    vertical-align: middle;\n    transform: translateY(-0.1em);\n  }\n\n  & > .fi-button_icon--right > .fi-icon {\n    margin-right: 0;\n    margin-left: ", ";\n  }\n\n  &.fi-button--icon-only {\n    padding: ", " 11px;\n    & > .fi-button_icon > .fi-icon {\n      margin-right: 0;\n    }\n    & > .fi-button_icon--right > .fi-icon {\n      margin-left: 0;\n    }\n  }\n\n  &.fi-button--disabled > .fi-button_icon {\n    cursor: not-allowed;\n  }\n\n  .fi-button_loading-icon {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    margin-right: ", ";\n    animation: rotation 1.5s infinite linear;\n\n    .fi-icon-component-brand-fill {\n      fill: ", ";\n    }\n  }\n\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(359deg);\n    }\n  }\n  @media (prefers-reduced-motion) {\n    &.fi-loadingSpinner.fi-loadingSpinner--loading {\n      .fi-loadingSpinner_icon {\n        animation: rotation 10s infinite linear;\n      }\n    }\n  }\n\n  &.fi-button--loading {\n    display: flex;\n    align-items: center;\n  }\n\n  &.fi-button--loading-icon-only {\n    .fi-button_loading-icon {\n      margin-right: 0;\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  padding: 9px ", ";\n  min-height: 40px;\n  color: ", ";\n  background: ", ";\n  border-radius: ", ";\n  text-align: center;\n  text-shadow: ", ";\n  cursor: pointer;\n  border: 1px solid transparent; /* For high contrast mode */\n\n  &:focus {\n    position: relative;\n    ", " /* For high contrast mode */\n\n    &::after {\n      ", "\n    }\n  }\n\n  &:hover {\n    background: ", ";\n    outline: 2px solid transparent; /* For high contrast mode */\n  }\n\n  &:active {\n    background: ", ";\n  }\n\n  &.fi-button--disabled,\n  &[disabled],\n  &:disabled {\n    text-shadow: 0 1px 1px ", ";\n    background: ", ";\n    user-select: none;\n    cursor: not-allowed;\n  }\n\n  &.fi-button--disabled:not([aria-disabled='true'])::after {\n    border: none;\n    box-shadow: none;\n  }\n\n  &.fi-button--fullwidth {\n    display: block;\n    width: 100%;\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  \n  & > .fi-button_icon > .fi-icon {\n    width: 16px;\n    height: 16px;\n    margin-right: ", ";\n    vertical-align: middle;\n    transform: translateY(-0.1em);\n  }\n\n  & > .fi-button_icon--right > .fi-icon {\n    margin-right: 0;\n    margin-left: ", ";\n  }\n\n  &.fi-button--icon-only {\n    padding: ", " 11px;\n    & > .fi-button_icon > .fi-icon {\n      margin-right: 0;\n    }\n    & > .fi-button_icon--right > .fi-icon {\n      margin-left: 0;\n    }\n  }\n\n  &.fi-button--disabled > .fi-button_icon {\n    cursor: not-allowed;\n  }\n\n  .fi-button_loading-icon {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    margin-right: ", ";\n    animation: rotation 1.5s infinite linear;\n\n    .fi-icon-component-brand-fill {\n      fill: ", ";\n    }\n  }\n\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(359deg);\n    }\n  }\n  @media (prefers-reduced-motion) {\n    &.fi-loadingSpinner.fi-loadingSpinner--loading {\n      .fi-loadingSpinner_icon {\n        animation: rotation 10s infinite linear;\n      }\n    }\n  }\n\n  &.fi-button--loading {\n    display: flex;\n    align-items: center;\n  }\n\n  &.fi-button--loading-icon-only {\n    .fi-button_loading-icon {\n      margin-right: 0;\n    }\n  }\n"])), index.button(theme), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), theme.spacing.insetXxl, theme.colors.whiteBase, theme.gradients.highlightBaseToHighlightDark1, theme.radiuses.basic, theme.shadows.invertTextShadow, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.gradients.highlightLight1ToHighlightBase, theme.colors.highlightDark1, colors.alphaHex(0.5)(theme.colors.blackBase), theme.gradients.depthLight1ToDepthBase, invertedStyles(theme), secondaryStyles(theme), secondaryNoBorderStyles(theme), secondaryLightStyles(theme), theme.spacing.insetM, theme.spacing.insetM, theme.spacing.insetS, theme.spacing.insetM, theme.colors.whiteBase);
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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