suomifi-ui-components/dist/esm/core/Navigation/WizardNavigation/WizardNavigationItem/WizardNavigationItem.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { font } from '../../../theme/reset/index.js';
import { css } from 'styled-components';

var baseStyles = function baseStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-wizard-navigation-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    padding: ", " ", ";\n\n    &:not(:last-child) {\n      margin-bottom: 10px;\n    }\n    &:after {\n      content: '';\n      height: calc(100% - 26px);\n      width: 1px;\n      background: ", ";\n      position: absolute;\n      bottom: -10px;\n      left: 33px;\n    }\n    &:last-child {\n      &:after {\n        display: none;\n      }\n    }\n\n    &:focus-within {\n      ", "\n      ", " /* Support for high contrast mode */\n    }\n\n    .fi-wizard-navigation-item_inner-wrapper {\n      display: flex;\n      align-items: flex-start;\n\n      .fi-wizard-navigation-item_left-icon {\n        flex-shrink: 0;\n      }\n\n      .fi-link--router {\n        background: transparent;\n        border: none;\n        padding: 0;\n        margin: 0;\n        margin-bottom: 1px; /* Compensate font size difference */\n        &:focus {\n          outline: 0;\n          border: none;\n          box-shadow: none;\n        }\n      }\n    }\n\n    &--default {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n\n        &:after {\n          left: 29px;\n        }\n      }\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n        }\n        .fi-link--router {\n          ", "\n          cursor: pointer;\n          &:hover {\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n\n    &--current {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n      }\n      background: ", ";\n      border-left: 4px solid ", ";\n      padding-left: calc(", " - 4px);\n\n      &:after {\n        left: 29px;\n        height: 10px;\n      }\n\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover,\n          &:focus {\n            text-decoration: none;\n            color: ", ";\n          }\n          margin-bottom: 1px; /* Compensate font size difference */\n        }\n      }\n    }\n\n    &--current-completed {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n      }\n\n      background: ", ";\n      border-left: 4px solid ", ";\n      padding-left: calc(", " - 4px);\n\n      &:after {\n        left: 29px;\n        height: 10px;\n      }\n\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n          color: ", ";\n\n          .fi-icon {\n            width: 10px;\n            height: 10px;\n          }\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover,\n          &:focus {\n            text-decoration: none;\n            color: ", ";\n          }\n          margin-bottom: 1px; /* Compensate font size difference */\n        }\n      }\n    }\n\n    &--completed {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n\n        &:after {\n          left: 29px;\n        }\n      }\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n          color: ", ";\n\n          .fi-icon {\n            width: 10px;\n            height: 10px;\n          }\n        }\n        .fi-link--router {\n          ", "\n          cursor: pointer;\n          &:hover {\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n\n    &--coming {\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          position: relative;\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          &:after {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            content: '';\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-radius: 50%;\n            border: 1px solid ", ";\n            width: 5px;\n            height: 5px;\n            background: ", ";\n          }\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover {\n            text-decoration: none;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n\n    &--disabled {\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          position: relative;\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          &:after {\n            position: absolute;\n            top: -5px;\n            right: 12px;\n            content: '';\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 1px;\n            height: 36px;\n            background: ", ";\n          }\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover {\n            text-decoration: none;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n  }\n"], ["\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-wizard-navigation-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    padding: ", " ", ";\n\n    &:not(:last-child) {\n      margin-bottom: 10px;\n    }\n    &:after {\n      content: '';\n      height: calc(100% - 26px);\n      width: 1px;\n      background: ", ";\n      position: absolute;\n      bottom: -10px;\n      left: 33px;\n    }\n    &:last-child {\n      &:after {\n        display: none;\n      }\n    }\n\n    &:focus-within {\n      ", "\n      ", " /* Support for high contrast mode */\n    }\n\n    .fi-wizard-navigation-item_inner-wrapper {\n      display: flex;\n      align-items: flex-start;\n\n      .fi-wizard-navigation-item_left-icon {\n        flex-shrink: 0;\n      }\n\n      .fi-link--router {\n        background: transparent;\n        border: none;\n        padding: 0;\n        margin: 0;\n        margin-bottom: 1px; /* Compensate font size difference */\n        &:focus {\n          outline: 0;\n          border: none;\n          box-shadow: none;\n        }\n      }\n    }\n\n    &--default {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n\n        &:after {\n          left: 29px;\n        }\n      }\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n        }\n        .fi-link--router {\n          ", "\n          cursor: pointer;\n          &:hover {\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n\n    &--current {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n      }\n      background: ", ";\n      border-left: 4px solid ", ";\n      padding-left: calc(", " - 4px);\n\n      &:after {\n        left: 29px;\n        height: 10px;\n      }\n\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover,\n          &:focus {\n            text-decoration: none;\n            color: ", ";\n          }\n          margin-bottom: 1px; /* Compensate font size difference */\n        }\n      }\n    }\n\n    &--current-completed {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n      }\n\n      background: ", ";\n      border-left: 4px solid ", ";\n      padding-left: calc(", " - 4px);\n\n      &:after {\n        left: 29px;\n        height: 10px;\n      }\n\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n          color: ", ";\n\n          .fi-icon {\n            width: 10px;\n            height: 10px;\n          }\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover,\n          &:focus {\n            text-decoration: none;\n            color: ", ";\n          }\n          margin-bottom: 1px; /* Compensate font size difference */\n        }\n      }\n    }\n\n    &--completed {\n      &:hover {\n        border-left: 4px solid ", ";\n        padding-left: calc(", " - 4px);\n\n        &:after {\n          left: 29px;\n        }\n      }\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          border: 1px solid ", ";\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          background: ", ";\n          color: ", ";\n\n          .fi-icon {\n            width: 10px;\n            height: 10px;\n          }\n        }\n        .fi-link--router {\n          ", "\n          cursor: pointer;\n          &:hover {\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n\n    &--coming {\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          position: relative;\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          &:after {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            content: '';\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-radius: 50%;\n            border: 1px solid ", ";\n            width: 5px;\n            height: 5px;\n            background: ", ";\n          }\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover {\n            text-decoration: none;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n\n    &--disabled {\n      .fi-wizard-navigation-item_inner-wrapper {\n        .fi-wizard-navigation-item_left-icon {\n          position: relative;\n          width: 26px;\n          height: 26px;\n          line-height: 26px;\n          font-size: 18px;\n          margin-right: ", ";\n          &:after {\n            position: absolute;\n            top: -5px;\n            right: 12px;\n            content: '';\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 1px;\n            height: 36px;\n            background: ", ";\n          }\n        }\n        .fi-link--router {\n          pointer-events: none;\n          color: ", ";\n          ", "\n          &:hover {\n            text-decoration: none;\n          }\n          &:visited {\n            color: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), theme.spacing.xxs, theme.spacing.m, theme.colors.blackLight1, theme.focuses.boxShadowFocus, theme.focuses.highContrastFocus, theme.colors.highlightBase, theme.spacing.m, theme.colors.depthDark3, theme.spacing.xs, theme.colors.whiteBase, font(theme)('actionElementInnerText'), theme.colors.highlightBase, theme.colors.highlightBase, theme.spacing.m, theme.colors.highlightLight3, theme.colors.highlightBase, theme.spacing.m, theme.colors.depthDark3, theme.spacing.xs, theme.colors.whiteBase, theme.colors.blackBase, font(theme)('actionElementInnerTextBold'), theme.colors.blackBase, theme.colors.highlightBase, theme.spacing.m, theme.colors.highlightLight3, theme.colors.highlightBase, theme.spacing.m, theme.colors.successDark1, theme.spacing.xs, theme.colors.successDark1, theme.colors.whiteBase, theme.colors.blackBase, font(theme)('actionElementInnerTextBold'), theme.colors.blackBase, theme.colors.highlightBase, theme.spacing.m, theme.colors.successDark1, theme.spacing.xs, theme.colors.successDark1, theme.colors.whiteBase, font(theme)('actionElementInnerText'), theme.colors.highlightBase, theme.spacing.xs, theme.colors.depthDark3, theme.colors.depthDark3, theme.colors.depthDark3, font(theme)('actionElementInnerText'), theme.colors.depthDark3, theme.spacing.xs, theme.colors.depthDark3, theme.colors.depthDark3, font(theme)('actionElementInnerText'), theme.colors.depthDark3);
};
var templateObject_1;

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