suomifi-ui-components/dist/esm/core/Form/FileInput/FileInput.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { element, fixInternalMargins, font, button } from '../../theme/reset/index.js';
import { buildSpacingCSS } from '../../theme/utils/spacing.js';

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.fi-file-input {\n    /* stylelint-disable no-descending-specificity */\n    /* Nested :hover etc selectors do not work well with this rule. */\n\n    ", "\n    width: 100%;\n    max-width: 600px;\n    ", "\n    ", "\n    line-height: 0;\n    ", "\n\n    &.fi-file-input--full-width {\n      width: 100%;\n      max-width: none;\n\n      .fi-file-input_single-file-container {\n        max-width: none;\n      }\n    }\n\n    &.fi-file-input--error {\n      .fi-file-input_input-outer-wrapper {\n        .fi-file-input_drag-area {\n          border: 2px dashed ", ";\n        }\n      }\n      .fi-file-input_single-file-container {\n        border: 2px dashed ", ";\n      }\n    }\n\n    .fi-file-input_label--visible {\n      margin-bottom: ", ";\n    }\n\n    .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    .fi-file-input_statusText--has-content {\n      margin-top: ", ";\n    }\n\n    .fi-file-input_single-file-container {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      max-width: 600px;\n      height: 100%;\n      background: ", ";\n      padding: ", ";\n    }\n\n    .fi-file-input_multi-file-container {\n      margin-top: ", ";\n\n      .fi-file-input_file-item-outer-wrapper {\n        padding: ", ";\n\n        &:not(:last-child) {\n          border-bottom: 1px solid ", ";\n        }\n      }\n    }\n\n    .fi-file-input_file-item {\n      display: flex;\n      justify-content: space-between;\n      .fi-file-input_file-info {\n        display: flex;\n        align-items: center;\n        gap: ", ";\n        flex-shrink: 1;\n        ", ";\n\n        .fi-icon {\n          width: 24px;\n          height: 24px;\n          flex-shrink: 0;\n        }\n\n        .fi-file-input_file-name {\n          overflow-wrap: break-word;\n          flex-grow: 1;\n          flex-shrink: 1;\n          font-size: 16px;\n\n          &:not(.is-link) {\n            &:focus {\n              position: relative;\n              outline: 0;\n              &:after {\n                ", "\n              }\n            }\n          }\n        }\n\n        .fi-file-input_file-size {\n          color: ", ";\n          min-width: 70px;\n          margin-right: ", ";\n        }\n      }\n\n      .fi-file-input_remove-file-button {\n        flex-shrink: 0;\n      }\n    }\n\n    .fi-file-input_input-outer-wrapper {\n      .fi-file-input_drag-area {\n        width: 100%;\n        background: ", ";\n        border: 1px dashed ", ";\n        padding: ", ";\n        position: relative;\n\n        &.highlight {\n          background: ", ";\n        }\n\n        &.fi-file-input_drag-area--has-file {\n          border: 1px solid ", ";\n        }\n\n        .fi-file-input_input-wrapper {\n          position: relative;\n          width: 100%;\n          height: 40px;\n          display: flex;\n          align-items: center;\n\n          &.fi-file-input_input-wrapper--hidden {\n            visibility: hidden;\n          }\n\n          .fi-file-input_drag-text-container {\n            ", "\n            margin-left: ", ";\n          }\n\n          .fi-file-input_input-element {\n            width: 0.1px;\n            height: 0.1px;\n            opacity: 0;\n            z-index: -9999;\n\n            &:not(.fi-file-input_label--hidden-under-file) {\n              &:focus {\n                + .fi-file-input_input-label {\n                  position: relative;\n                  ", " /* For high contrast mode */\n\n                &:after {\n                    ", "\n                  }\n                }\n              }\n            }\n          }\n\n          .fi-file-input_input-label {\n            /* Make the label appear as a secondary variant button */\n            ", "\n            padding: 9px ", ";\n            min-height: 40px;\n            color: ", ";\n            background: none;\n            background-color: ", ";\n            border: 1px solid ", ";\n            text-shadow: none;\n            cursor: pointer;\n\n            &:hover {\n              background: ", ";\n            }\n\n            &:active {\n              background: none;\n              background-color: ", ";\n            }\n          }\n        }\n      }\n    }\n\n    &.fi-file-input--small-screen {\n      .fi-file-input_input-outer-wrapper {\n        .fi-file-input_drag-area {\n          .fi-file-input_input-wrapper {\n            flex-direction: column-reverse;\n            align-items: flex-start;\n            height: auto;\n\n            .fi-file-input_drag-text-container {\n              margin-left: 0;\n              margin-bottom: ", ";\n            }\n\n            .fi-file-input_input-label {\n              width: 100%;\n              text-align: center;\n            }\n          }\n        }\n      }\n\n      .fi-file-input_single-file-container {\n        .fi-file-input_file-item {\n          height: 100%;\n          flex-direction: column;\n          .fi-file-input_file-info {\n            margin-bottom: ", ";\n            .fi-file-input_file-size {\n              justify-content: space-between;\n              flex-shrink: revert;\n              flex-grow: revert;\n              margin-right: 0;\n            }\n          }\n        }\n      }\n    }\n\n    .fi-file-input_error-icon {\n      color: ", ";\n    }\n\n    .fi-file-input_loading-icon {\n      animation: rotation 1.5s infinite linear;\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-file-input_file-item-error-text {\n      ", ";\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n"], ["\n  &.fi-file-input {\n    /* stylelint-disable no-descending-specificity */\n    /* Nested :hover etc selectors do not work well with this rule. */\n\n    ", "\n    width: 100%;\n    max-width: 600px;\n    ", "\n    ", "\n    line-height: 0;\n    ", "\n\n    &.fi-file-input--full-width {\n      width: 100%;\n      max-width: none;\n\n      .fi-file-input_single-file-container {\n        max-width: none;\n      }\n    }\n\n    &.fi-file-input--error {\n      .fi-file-input_input-outer-wrapper {\n        .fi-file-input_drag-area {\n          border: 2px dashed ", ";\n        }\n      }\n      .fi-file-input_single-file-container {\n        border: 2px dashed ", ";\n      }\n    }\n\n    .fi-file-input_label--visible {\n      margin-bottom: ", ";\n    }\n\n    .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    .fi-file-input_statusText--has-content {\n      margin-top: ", ";\n    }\n\n    .fi-file-input_single-file-container {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      max-width: 600px;\n      height: 100%;\n      background: ", ";\n      padding: ", ";\n    }\n\n    .fi-file-input_multi-file-container {\n      margin-top: ", ";\n\n      .fi-file-input_file-item-outer-wrapper {\n        padding: ", ";\n\n        &:not(:last-child) {\n          border-bottom: 1px solid ", ";\n        }\n      }\n    }\n\n    .fi-file-input_file-item {\n      display: flex;\n      justify-content: space-between;\n      .fi-file-input_file-info {\n        display: flex;\n        align-items: center;\n        gap: ", ";\n        flex-shrink: 1;\n        ", ";\n\n        .fi-icon {\n          width: 24px;\n          height: 24px;\n          flex-shrink: 0;\n        }\n\n        .fi-file-input_file-name {\n          overflow-wrap: break-word;\n          flex-grow: 1;\n          flex-shrink: 1;\n          font-size: 16px;\n\n          &:not(.is-link) {\n            &:focus {\n              position: relative;\n              outline: 0;\n              &:after {\n                ", "\n              }\n            }\n          }\n        }\n\n        .fi-file-input_file-size {\n          color: ", ";\n          min-width: 70px;\n          margin-right: ", ";\n        }\n      }\n\n      .fi-file-input_remove-file-button {\n        flex-shrink: 0;\n      }\n    }\n\n    .fi-file-input_input-outer-wrapper {\n      .fi-file-input_drag-area {\n        width: 100%;\n        background: ", ";\n        border: 1px dashed ", ";\n        padding: ", ";\n        position: relative;\n\n        &.highlight {\n          background: ", ";\n        }\n\n        &.fi-file-input_drag-area--has-file {\n          border: 1px solid ", ";\n        }\n\n        .fi-file-input_input-wrapper {\n          position: relative;\n          width: 100%;\n          height: 40px;\n          display: flex;\n          align-items: center;\n\n          &.fi-file-input_input-wrapper--hidden {\n            visibility: hidden;\n          }\n\n          .fi-file-input_drag-text-container {\n            ", "\n            margin-left: ", ";\n          }\n\n          .fi-file-input_input-element {\n            width: 0.1px;\n            height: 0.1px;\n            opacity: 0;\n            z-index: -9999;\n\n            &:not(.fi-file-input_label--hidden-under-file) {\n              &:focus {\n                + .fi-file-input_input-label {\n                  position: relative;\n                  ", " /* For high contrast mode */\n\n                &:after {\n                    ", "\n                  }\n                }\n              }\n            }\n          }\n\n          .fi-file-input_input-label {\n            /* Make the label appear as a secondary variant button */\n            ", "\n            padding: 9px ", ";\n            min-height: 40px;\n            color: ", ";\n            background: none;\n            background-color: ", ";\n            border: 1px solid ", ";\n            text-shadow: none;\n            cursor: pointer;\n\n            &:hover {\n              background: ", ";\n            }\n\n            &:active {\n              background: none;\n              background-color: ", ";\n            }\n          }\n        }\n      }\n    }\n\n    &.fi-file-input--small-screen {\n      .fi-file-input_input-outer-wrapper {\n        .fi-file-input_drag-area {\n          .fi-file-input_input-wrapper {\n            flex-direction: column-reverse;\n            align-items: flex-start;\n            height: auto;\n\n            .fi-file-input_drag-text-container {\n              margin-left: 0;\n              margin-bottom: ", ";\n            }\n\n            .fi-file-input_input-label {\n              width: 100%;\n              text-align: center;\n            }\n          }\n        }\n      }\n\n      .fi-file-input_single-file-container {\n        .fi-file-input_file-item {\n          height: 100%;\n          flex-direction: column;\n          .fi-file-input_file-info {\n            margin-bottom: ", ";\n            .fi-file-input_file-size {\n              justify-content: space-between;\n              flex-shrink: revert;\n              flex-grow: revert;\n              margin-right: 0;\n            }\n          }\n        }\n      }\n    }\n\n    .fi-file-input_error-icon {\n      color: ", ";\n    }\n\n    .fi-file-input_loading-icon {\n      animation: rotation 1.5s infinite linear;\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-file-input_file-item-error-text {\n      ", ";\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n"])), element(theme), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), fixInternalMargins(), theme.colors.alertBase, theme.colors.alertBase, theme.spacing.xs, theme.spacing.xs, theme.spacing.xxs, theme.colors.whiteBase, theme.spacing.insetXxl, theme.spacing.insetXl, theme.spacing.xxs, theme.colors.depthLight2, theme.spacing.insetL, font(theme)('bodyTextSmall'), theme.focuses.absoluteFocus, theme.colors.blackLight1, theme.spacing.insetL, theme.colors.highlightLight4, theme.colors.highlightBase, theme.spacing.insetXxl, theme.colors.highlightLight2, theme.colors.depthLight2, font(theme)('bodyTextSmall'), theme.spacing.insetXxl, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, button(theme), theme.spacing.insetXxl, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.highlightBase, theme.gradients.whiteBaseToDepthLight2, theme.colors.depthLight2, theme.spacing.insetXl, theme.spacing.insetXl, theme.colors.alertBase, font(theme)('bodySemiBoldSmall'), theme.colors.alertBase);
};
var templateObject_1;

export { baseStyles };
//# sourceMappingURL=FileInput.baseStyles.js.map