amis/scss/components/_nav.scss

.#{$ns}Nav {
    list-style: none;
    margin: 0;
    padding: 0;
    &--tabs {
        border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
        .#{$ns}Nav-item {
            margin-bottom: -$Tabs-borderWidth;
            display: inline-block;
            >a {
                font-size: $Nav-item-fontSize;
                display: block;
                outline: none;
                border: $Tabs-borderWidth solid transparent;
                border-top-left-radius: $Tabs-borderRadius;
                border-top-right-radius: $Tabs-borderRadius;
                color: $Tabs-color;
                text-decoration: none;
                margin-right: px2rem(2px);
                padding: $gap-sm $gap-base;
                cursor: pointer;
            }
            &:hover>a,
            >a:focus {
                border-color: $Tabs-onHover-borderColor;
                text-decoration: none;
            }
            &.disabled>a,
            &.is-disabled>a {
                color: $Tabs-onDisabled-color;
                background-color: transparent;
                border-color: transparent;
                pointer-events: none;
            }
            &.active>a,
            &.is-active>a {
                color: $Tabs-onActive-color;
                background-color: $Tabs-onActive-bg;
                border-color: $Tabs-onActive-borderColor;
                border-bottom-color: $Tabs-onActive-borderBottomColor;
                border-bottom-width: $Tabs-onActive-borderBottomWidth;
            }
        }
        .#{$ns}Nav-itemIcon {
            margin-right: $gap-xs;
        }
    }
    &--stacked {
        .#{$ns}Nav-item {
            position: relative;
            >a {
                display: block;
                outline: none;
                color: $Nav-item-color;
                text-decoration: none;
                padding: $gap-sm $gap-base;
                cursor: pointer;
                background-color: $Nav-item-bg;
                border-radius: $Nav-item-borderRadius;
            }
            &:hover>a,
            >a:focus {
                border-color: $Nav-item-onHover-color;
                text-decoration: none;
                background-color: $Nav-item-onHover-bg;
            }
            &.disabled>a,
            &.is-disabled>a {
                color: $Nav-item-onDisabled-color;
                background-color: transparent;
                pointer-events: none;
            }
            &.active>a,
            &.is-active>a {
                color: $Nav-item-onActive-color;
                background-color: $Nav-item-onActive-bg;
                border-left: $Nav-item-onActive-borderLeft;
                padding-left: px2rem(12px);
            }
            &.is-unfolded {
                .#{$ns}Nav-itemToggler {
                    transform: rotate(180deg) scale(0.8);
                }
                .#{$ns}Nav-subItems {
                    display: block;
                }
            }
            .#{$ns}Nav-itemToggler {
                position: absolute;
                width: px2rem(30px);
                height: px2rem(30px);
                text-align: center;
                line-height: px2rem(30px);
                vertical-align: middle;
                top: px2rem(4px);
                right: px2rem(2px);
                cursor: pointer;
                transform: scale(0.8);
                transition: transform .3s;
            }
            .#{$ns}Nav-subItems {
                display: none;
                padding-left: 0;
                list-style: none;
            }
            .#{$ns}Nav-item {
                font-size: $Nav-subItem-fontSize;
                a:before {
                    content: '';
                    display: inline-block;
                    width: px2rem(4px);
                    height: px2rem(4px);
                    background-color: #ccc;
                    border-radius: px2rem(500px);
                    margin-right: px2rem(8px);
                    vertical-align: middle;
                }
                &.active>a:before,
                &.is-active>a:before {
                    background-color: $Nav-subItem-onActiveBeforeBg;
                }
            }
        }
    }
}