@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.b43c6d7.0

package/src/components/left-navigation/side-navigation.module.less

@@ -1,530 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import (reference) '@servicetitan/tokens/core/tokens.less';
-
-@text-color: var(--colorsTextInverted, @color-white);
-@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
-@border-color: var(--colorsTextOnGrey, @color-neutral-200);
-@bg-color: #0f1d26;
-@bg-color-hover: rgba(255, 255, 255, 0.08);
-@bg-color-active: rgba(120, 187, 250, 0.2);
-
-.side-nav {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-
-    &.side-nav-v1 {
-        &.side-nav-slim {
-            width: 64px;
-        }
-        &.side-nav-expanded {
-            width: 212px;
-
-            .navigation-item {
-                flex-direction: row;
-                margin-left: @spacing-1;
-                margin-right: @spacing-1;
-
-                .navigation-item-icon-wrapper {
-                    flex: 1;
-                    padding: @spacing-1 @spacing-half;
-                }
-
-                .navigation-item-text-expanded {
-                    font-family: @base-font-family;
-                    font-size: @typescale-3;
-                    padding-left: @spacing-1;
-                    flex: 1;
-                }
-
-                .navigation-item-text-collapsed {
-                    display: none;
-                }
-
-                .navigation-item-counter {
-                    margin-right: @spacing-1;
-                    position: relative;
-                    transform: unset;
-                }
-            }
-        }
-
-        .divider {
-            margin-left: @spacing-1;
-            margin-right: @spacing-1;
-        }
-    }
-
-    &.side-nav-v2 {
-        .navigation-item {
-            margin-bottom: @spacing-half;
-        }
-        &.side-nav-slim {
-            width: 64px;
-        }
-        &.side-nav-expanded {
-            width: 268px;
-
-            .options-item-text {
-                padding-left: @spacing-0 !important;
-            }
-        }
-    }
-
-    &.side-nav-v1.side-nav-slim,
-    &.side-nav-v2 {
-        .navigation-item {
-            flex-direction: column;
-            width: 64px;
-            overflow-x: hidden;
-            padding-top: @spacing-1;
-
-            &:not(:first-child) {
-                margin-top: @spacing-half;
-            }
-
-            .navigation-item-counter {
-                position: absolute;
-                right: 0;
-                top: 4px;
-                z-index: auto;
-
-                &.navigation-item-counter-long {
-                    right: 2px;
-                }
-            }
-
-            .navigation-item-icon-wrapper {
-                flex: 1;
-                padding: @spacing-half;
-            }
-
-            .navigation-item-text-expanded {
-                display: none;
-            }
-            .navigation-item-text-collapsed {
-                font-family: @base-font-family;
-                font-size: 11px;
-                line-height: 11px;
-                margin: 2px @spacing-half @spacing-0;
-                text-align: center;
-            }
-
-            .navigation-item-text-collapsed.navigation-item-text-small {
-                font-size: 10.5px;
-            }
-        }
-    }
-
-    &.side-nav-expanded {
-        -webkit-transition: width 100ms ease-in-out;
-        -moz-transition: width 100ms ease-in-out;
-        -o-transition: width 100ms ease-in-out;
-        transition: width 100ms ease-in-out;
-    }
-}
-
-.side-nav-main {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    flex: 1;
-    position: relative;
-}
-
-.side-nav-footer {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    background-color: @bg-color;
-}
-.side-nav-submenu-bar {
-    background-color: @bg-color;
-    border-left: 1px solid @color-neutral-200;
-    width: 204px;
-}
-.side-nav-submenu-drawer {
-    background-color: @bg-color;
-    border-left: 1px solid @color-neutral-200;
-    width: 204px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 64px;
-    z-index: @z-index-overlay;
-}
-
-.side-nav-navigation {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    padding-top: @spacing-1;
-    flex: 1;
-
-    background-color: @bg-color;
-
-    .side-nav-content {
-        overflow-y: auto;
-        padding-bottom: @spacing-1;
-        flex-grow: 1;
-        flex-basis: 0;
-
-        &::-webkit-scrollbar {
-            width: 0;
-            height: 0;
-        }
-    }
-
-    .side-nav-top {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        padding-bottom: @spacing-1;
-    }
-
-    .side-nav-bottom {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-}
-
-.navigation-item {
-    font-family: @base-font-family;
-    color: @text-color;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    outline: none;
-    overflow: hidden;
-
-    .navigation-item-icon-wrapper {
-        border-radius: @border-radius-2;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-wrap: nowrap;
-        text-wrap: nowrap;
-        position: relative;
-    }
-
-    &.navigation-item-active {
-        color: @text-color-active;
-
-        .navigation-item-icon-wrapper {
-            background-color: @bg-color-active;
-        }
-    }
-
-    &.navigation-item-icon-switch {
-        &.navigation-item-active {
-            .navigation-icon-inactive[data-anv][data-anv] {
-                display: none;
-            }
-            .navigation-icon-active[data-anv][data-anv] {
-                display: block;
-            }
-        }
-        &:not(.navigation-item-active) {
-            .navigation-icon-inactive[data-anv][data-anv] {
-                display: block;
-            }
-            .navigation-icon-active[data-anv][data-anv] {
-                display: none;
-            }
-        }
-    }
-
-    &:hover:not(.navigation-item-active) .navigation-item-icon-wrapper {
-        background-color: @bg-color-hover;
-    }
-
-    .navigation-item-counter {
-        min-width: 12px !important;
-        min-height: 12px !important;
-    }
-
-    .navigation-item-group-toggle-wrapper {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .navigation-item-group-toggle[data-anv][data-anv] {
-            color: inherit;
-            font-weight: @font-weight-semibold;
-        }
-
-        .navigation-item-group-toggle-click {
-            position: absolute;
-            left: -@spacing-2;
-            right: -@spacing-half;
-            top: -@spacing-1;
-            bottom: -@spacing-1;
-        }
-    }
-
-    .navigation-icon[data-anv][data-anv] {
-        height: 24px;
-        width: 24px;
-        color: inherit;
-
-        & > svg {
-            height: 24px;
-            width: 24px;
-        }
-    }
-}
-
-.navigation-group-wrapper {
-    .navigation-group-item {
-        position: relative;
-    }
-
-    .submenu-wrapper:not(.submenu-wrapper-collapsed) {
-        max-height: 2000px;
-        transition: max-height 0.7s ease-in-out;
-    }
-}
-
-.submenu-wrapper {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height unset;
-}
-
-.submenu {
-    margin-left: @spacing-3;
-}
-
-.submenu-bar {
-    margin-left: 6px;
-
-    .submenu-link-active:before {
-        left: -6px !important;
-    }
-
-    > *,
-    > *[data-anv][data-anv] {
-        line-height: 18px;
-    }
-}
-
-.submenu,
-.submenu-bar {
-    padding-left: @spacing-1;
-    padding-right: @spacing-1;
-    margin-bottom: @spacing-1;
-    position: relative;
-    font-family: @base-font-family;
-
-    .submenu-group-header[data-anv][data-anv] {
-        padding-top: @spacing-2;
-        padding-bottom: @spacing-half;
-    }
-    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
-        padding-top: @spacing-1;
-    }
-
-    .submenu-link {
-        padding: @spacing-1;
-    }
-
-    .submenu-link-active {
-        position: relative;
-    }
-
-    .submenu-link-active:before {
-        content: '';
-        position: absolute;
-        background-color: @text-color-active;
-        width: 3px;
-        top: @spacing-1;
-        bottom: @spacing-1;
-        left: -12px;
-    }
-
-    .submenu-link:before:not(.submenu-link-active) {
-        background-color: @bg-color-hover;
-    }
-
-    > *,
-    > *[data-anv][data-anv] {
-        border-left: 3px solid transparent;
-        padding-left: @spacing-1;
-    }
-
-    > *:last-child {
-        margin-bottom: @spacing-0;
-    }
-}
-
-.submenu-popover {
-    margin-left: -@spacing-1;
-    margin-right: -@spacing-1;
-    min-width: 240px;
-
-    .submenu-group-header[data-anv][data-anv] {
-        margin-top: @spacing-2;
-        padding-bottom: @spacing-half;
-    }
-
-    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
-        margin-top: @spacing-1;
-    }
-
-    .submenu-link {
-        padding-top: @spacing-1;
-        padding-bottom: @spacing-1;
-    }
-
-    .submenu-link-active {
-        background-color: @bg-color-active;
-    }
-    .submenu-link:hover:not(.submenu-link-active) {
-        background-color: @bg-color-hover;
-    }
-
-    > *,
-    > *[data-anv][data-anv] {
-        padding-left: @spacing-1;
-        padding-right: @spacing-1;
-    }
-}
-
-.submenu,
-.submenu-popover,
-.submenu-bar {
-    display: flex;
-    flex-direction: column;
-
-    .submenu-group-header[data-anv][data-anv] {
-        color: @color-neutral-70;
-    }
-
-    .submenu-link {
-        color: @text-color;
-        font-size: @typescale-2;
-        border-radius: @border-radius-2;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .submenu-link-active {
-        color: @text-color-active;
-    }
-
-    .submenu-link-counter {
-        position: relative !important;
-        transform: unset !important;
-    }
-
-    .submenu-link:hover:not(.submenu-link-active) {
-        background-color: @bg-color-hover;
-    }
-}
-
-.options-item {
-    font-family: @base-font-family;
-    color: @text-color;
-    position: relative;
-    cursor: pointer;
-    outline: none;
-
-    &:hover {
-        .options-item-content {
-            background-color: @bg-color-hover;
-        }
-    }
-
-    .options-item-content {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-wrap: nowrap;
-        text-wrap: nowrap;
-        height: 32px;
-
-        border-radius: @border-radius-2;
-    }
-
-    .options-icon-wrapper {
-        height: 24px;
-        width: 24px;
-
-        .options-icon[data-anv][data-anv] > svg {
-            height: 24px;
-            width: 24px;
-            color: @text-color;
-        }
-    }
-
-    .options-item-text {
-        font-family: @base-font-family;
-        font-size: @typescale-3;
-        flex: 1;
-    }
-}
-
-.side-nav-slim .side-nav-footer .options-item {
-    .options-item-content {
-        margin: @spacing-2;
-
-        .options-icon-wrapper {
-            padding-left: @spacing-half;
-            padding-right: @spacing-half;
-        }
-    }
-}
-
-.side-nav-slim .side-nav-navigation .options-item {
-    .options-item-content {
-        background-color: @color-blue-grey-500;
-    }
-}
-
-.side-nav-expanded .side-nav-footer .options-item {
-    .options-item-content {
-        margin: @spacing-2 @spacing-1;
-
-        .options-icon-wrapper {
-            padding-left: @spacing-1;
-            padding-right: @spacing-1;
-        }
-
-        .options-item-text {
-            font-family: @base-font-family;
-            font-size: @typescale-3;
-            padding-left: @spacing-1;
-        }
-    }
-}
-
-.side-nav-submenu-bar .options-item {
-    .options-item-content {
-        margin-right: @spacing-2;
-        justify-content: center;
-        width: 32px;
-    }
-}
-
-.side-nav-navigation .options-item {
-    width: 64px;
-    margin-top: @spacing-1;
-    margin-bottom: 12px;
-    display: flex;
-    justify-content: center;
-
-    .options-icon-wrapper {
-        padding-left: @spacing-half;
-        padding-right: @spacing-half;
-    }
-}
-
-.divider {
-    border-top: 1px solid @border-color;
-}

package/src/components/left-navigation/side-navigation.module.less.d.ts

@@ -1,48 +0,0 @@
-export const __esModule: true;
-export const divider: string;
-export const navigationGroupItem: string;
-export const navigationGroupWrapper: string;
-export const navigationIcon: string;
-export const navigationIconActive: string;
-export const navigationIconInactive: string;
-export const navigationItem: string;
-export const navigationItemActive: string;
-export const navigationItemCounter: string;
-export const navigationItemCounterLong: string;
-export const navigationItemGroupToggle: string;
-export const navigationItemGroupToggleClick: string;
-export const navigationItemGroupToggleWrapper: string;
-export const navigationItemIconSwitch: string;
-export const navigationItemIconWrapper: string;
-export const navigationItemTextCollapsed: string;
-export const navigationItemTextExpanded: string;
-export const navigationItemTextSmall: string;
-export const optionsIcon: string;
-export const optionsIconWrapper: string;
-export const optionsItem: string;
-export const optionsItemContent: string;
-export const optionsItemText: string;
-export const sideNav: string;
-export const sideNavBottom: string;
-export const sideNavContent: string;
-export const sideNavExpanded: string;
-export const sideNavFooter: string;
-export const sideNavMain: string;
-export const sideNavNavigation: string;
-export const sideNavSlim: string;
-export const sideNavSubmenuBar: string;
-export const sideNavSubmenuDrawer: string;
-export const sideNavTop: string;
-export const sideNavV1: string;
-export const sideNavV2: string;
-export const submenu: string;
-export const submenuBar: string;
-export const submenuGroupHeader: string;
-export const submenuGroupHeaderEmpty: string;
-export const submenuLink: string;
-export const submenuLinkActive: string;
-export const submenuLinkCounter: string;
-export const submenuPopover: string;
-export const submenuWrapper: string;
-export const submenuWrapperCollapsed: string;
-