suomifi-ui-components/dist/esm/core/Navigation/SideNavigation/SideNavigationItem/SideNavigationItem.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  ", ";\n\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-side-navigation-item {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    position: relative;\n    margin: ", " 0;\n\n    &:focus,\n    &:focus-within {\n      outline: none;\n      box-shadow: none;\n      border: none;\n    }\n\n    .fi-link--router {\n      text-decoration: none;\n      display: flex;\n      padding: ", " ", ";\n      flex: 1;\n      cursor: pointer;\n      border: none;\n      color: ", ";\n      background: transparent;\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:hover,\n      &:active {\n        background: ", ";\n        text-decoration: none;\n        color: ", ";\n        border-radius: ", ";\n      }\n\n      &:focus-visible {\n        ", " /* For high contrast mode */\n        position: relative;\n        box-shadow: none;\n\n        &:after {\n          ", "\n        }\n      }\n    }\n\n    &.fi-side-navigation-item--child-selected {\n      > span > .fi-link--router {\n        font-weight: 600;\n      }\n    }\n\n    .fi-side-navigation-item_sub-list {\n      list-style-type: none;\n      padding: 0;\n      margin: 0;\n    }\n\n    .fi-side-navigation-item_content-wrapper {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      position: relative;\n\n      .fi-icon {\n        width: 10px;\n        height: 10px;\n        pointer-events: none;\n        color: ", ";\n        padding: 0 ", ";\n      }\n    }\n\n    &--level-1 {\n      &.fi-side-navigation-item--selected {\n        > span > .fi-link--router {\n          color: ", ";\n          font-weight: 600;\n          background: ", ";\n          border-radius: ", ";\n        }\n      }\n    }\n\n    &--level-2 {\n      &.fi-side-navigation-item--selected {\n        > span > .fi-link--router {\n          font-weight: 600;\n          background: ", ";\n          color: ", ";\n          border-top-left-radius: ", ";\n          border-top-right-radius: ", ";\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n\n          + .fi-icon {\n            color: ", ";\n          }\n        }\n      }\n\n      > span > .fi-link--router {\n        text-transform: none;\n        padding-right: ", ";\n        color: ", ";\n        background: ", ";\n      }\n\n      .fi-side-navigation-item_sub-list {\n        margin: ", " 0 ", " 30px;\n        background: ", ";\n        padding: ", " 0;\n      }\n    }\n\n    &--level-3 {\n      margin: 0;\n      &.fi-side-navigation-item--selected {\n        > span > .fi-link--router {\n          font-weight: 600;\n          background: ", ";\n          color: ", ";\n        }\n      }\n\n      > span > .fi-link--router {\n        text-transform: none;\n        padding-left: ", ";\n        color: ", ";\n        ", ";\n\n        &:hover {\n          border-radius: 0;\n        }\n      }\n    }\n\n    &--disabled {\n      > span > .fi-link--router {\n        color: ", ";\n        cursor: not-allowed;\n        background: transparent;\n\n        &:hover,\n        &:active,\n        &:visited {\n          background: transparent;\n          color: ", ";\n        }\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-side-navigation-item {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    position: relative;\n    margin: ", " 0;\n\n    &:focus,\n    &:focus-within {\n      outline: none;\n      box-shadow: none;\n      border: none;\n    }\n\n    .fi-link--router {\n      text-decoration: none;\n      display: flex;\n      padding: ", " ", ";\n      flex: 1;\n      cursor: pointer;\n      border: none;\n      color: ", ";\n      background: transparent;\n\n      &:visited {\n        color: ", ";\n      }\n\n      &:hover,\n      &:active {\n        background: ", ";\n        text-decoration: none;\n        color: ", ";\n        border-radius: ", ";\n      }\n\n      &:focus-visible {\n        ", " /* For high contrast mode */\n        position: relative;\n        box-shadow: none;\n\n        &:after {\n          ", "\n        }\n      }\n    }\n\n    &.fi-side-navigation-item--child-selected {\n      > span > .fi-link--router {\n        font-weight: 600;\n      }\n    }\n\n    .fi-side-navigation-item_sub-list {\n      list-style-type: none;\n      padding: 0;\n      margin: 0;\n    }\n\n    .fi-side-navigation-item_content-wrapper {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      position: relative;\n\n      .fi-icon {\n        width: 10px;\n        height: 10px;\n        pointer-events: none;\n        color: ", ";\n        padding: 0 ", ";\n      }\n    }\n\n    &--level-1 {\n      &.fi-side-navigation-item--selected {\n        > span > .fi-link--router {\n          color: ", ";\n          font-weight: 600;\n          background: ", ";\n          border-radius: ", ";\n        }\n      }\n    }\n\n    &--level-2 {\n      &.fi-side-navigation-item--selected {\n        > span > .fi-link--router {\n          font-weight: 600;\n          background: ", ";\n          color: ", ";\n          border-top-left-radius: ", ";\n          border-top-right-radius: ", ";\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n\n          + .fi-icon {\n            color: ", ";\n          }\n        }\n      }\n\n      > span > .fi-link--router {\n        text-transform: none;\n        padding-right: ", ";\n        color: ", ";\n        background: ", ";\n      }\n\n      .fi-side-navigation-item_sub-list {\n        margin: ", " 0 ", " 30px;\n        background: ", ";\n        padding: ", " 0;\n      }\n    }\n\n    &--level-3 {\n      margin: 0;\n      &.fi-side-navigation-item--selected {\n        > span > .fi-link--router {\n          font-weight: 600;\n          background: ", ";\n          color: ", ";\n        }\n      }\n\n      > span > .fi-link--router {\n        text-transform: none;\n        padding-left: ", ";\n        color: ", ";\n        ", ";\n\n        &:hover {\n          border-radius: 0;\n        }\n      }\n    }\n\n    &--disabled {\n      > span > .fi-link--router {\n        color: ", ";\n        cursor: not-allowed;\n        background: transparent;\n\n        &:hover,\n        &:active,\n        &:visited {\n          background: transparent;\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), font(theme)('bodySemiBold'), theme.spacing.xxs, theme.spacing.xs, theme.spacing.xs, theme.colors.highlightBase, theme.colors.highlightBase, theme.colors.highlightBase, theme.colors.whiteBase, theme.radiuses.modal, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.highlightBase, theme.spacing.xs, theme.colors.whiteBase, theme.colors.highlightBase, theme.radiuses.modal, theme.colors.highlightBase, theme.colors.whiteBase, theme.radiuses.modal, theme.radiuses.modal, theme.colors.whiteBase, theme.spacing.xxxl, theme.colors.highlightBase, theme.colors.whiteBase, theme.spacing.xxs, theme.spacing.xxs, theme.colors.highlightLight3, theme.spacing.xxs, theme.colors.highlightBase, theme.colors.whiteBase, theme.spacing.s, theme.colors.highlightBase, font(theme)('bodyTextSmall'), theme.colors.depthBase, theme.colors.depthBase);
};
var templateObject_1;

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