@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/navigation/navigation.scss

@@ -1,683 +0,0 @@
-//@import '../theme/variables.scss';
-@import "./variables.scss";
-@import "./mixin.scss";
-
-$module: #{$prefix}-navigation;
-
-.#{$module} {
-    box-sizing: border-box;
-    display: inline-flex;
-    width: $width-navigation_container_base;
-    outline: none;
-    overflow: hidden;
-    margin: 0;
-    padding-left: $spacing-navigation-paddingX;
-    padding-right: $spacing-navigation-paddingX;
-    user-select: none;
-    transition: $motion-navigation_padding, $motion-navigation_width;
-    border-right: $width-navigation_border solid $color-navigation_border-default;
-    background-color: $color-navigation-bg-default;
-
-    &-inner {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: space-between;
-    }
-
-    &-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        // 相同父级合并过来
-        & > .#{$module}-item-normal {
-            height: $height-navigation_item_base;
-        }
-
-        // list下item的font-weight应该是bold
-        & > .#{$module}-item {
-            font-weight: $font-navigation_item-fontWeight;
-
-            & > .#{$module}-sub-title {
-                font-weight: $font-navigation_sub_title-fontWeight;
-            }
-        }
-    }
-
-    &-collapsed {
-        width: $width-navigation_container_collapsed;
-
-        padding-left: $spacing-navigation_collapsed-paddingX;
-        padding-right: $spacing-navigation_collapsed-paddingX;
-
-        transition: $motion-navigation_padding, $motion-navigation_width;
-
-        .#{$module}-item-text {
-            // display: none;
-            transition: $motion-navigation_collapsed_opacity;
-            opacity: 0;
-        }
-
-        .#{$module}-item-icon:last-child {
-            // display: none;
-            transition: $motion-navigation_collapsed_opacity;
-            opacity: 0;
-        }
-    }
-
-    // 对于普通item和二级sub-title，都是font-weight normal
-    &-sub-wrap .#{$module}-sub-title,
-    &-item {
-        cursor: pointer;
-        display: flex;
-        border-radius: $width-navigation_item-borderRadius;
-        padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
-        box-sizing: border-box;
-        margin-top: 0;
-        margin-bottom: $spacing-navigation_item-marginBottom;
-
-        @include font-size-regular;
-        font-weight: $font-navigation_item_normal-fontWeight;
-        color: $color-navigation_itemL1-text-default;
-        width: 100%;
-
-        &-text {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            transition: $motion-navigation_collapsed_opacity;
-            opacity: 1;
-        }
-
-        &-indent {
-            width: $width-navigation_icon_text_between + $width-navigation_icon_left;
-        }
-    }
-
-    &-header-link,
-    &-item-link {
-        display: flex;
-        width: 100%;
-        color: inherit;
-        text-decoration: none;
-        align-items: center;
-        justify-content: flex-start;
-    }
-
-    &-item-sub {
-        padding: $spacing-navigation_item_sub-padding;
-    }
-
-    &-sub-wrap > &-item-inner {
-        width: 100%;
-    }
-
-    &-sub-wrap &-sub-title {
-        & > .#{$module}-item-inner {
-            display: flex;
-        }
-    }
-
-    &-item-inner {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        flex: 0 0 auto;
-    }
-
-    &-item-title {
-        opacity: 1;
-        transition: $motion-navigation_item_title;
-    }
-
-    .#{$module}-sub-title {
-        margin-bottom: $spacing-navigation_sub_title-marginBottom;
-    }
-
-    &-item-icon {
-        //display: inline-flex;
-        //color: $color-navigation_itemL1_icon-default;
-    }
-
-    &-item-icon-info {
-        display: inline-flex;
-        color: $color-navigation_itemL1_icon-default;
-        margin-right: $width-navigation_icon_text_between;
-        min-width: $width-navigation_icon_left-minWidth;
-        margin-left: 0;
-    }
-
-    &-item-icon-toggle-left {
-        display: inline-flex;
-        color: $color-navigation_itemL1_icon-default;
-        margin-right: $width-navigation_icon_text_between;
-        min-width: $width-navigation_icon_left-minWidth;
-    }
-
-    &-item-icon-toggle-right {
-        display: inline-flex;
-        color: $color-navigation_itemL1_icon-default;
-        margin-left: auto;
-        transition: $motion-navigation_collapsed_opacity;
-        opacity: 1;
-    }
-
-    &-item-selected {
-        @include item-selected;
-
-        &.#{$module}-item-disabled {
-            @include item-disabled-selected;
-        }
-    }
-
-    &-item-disabled {
-        @include item-disabled;
-    }
-
-    &-inner > &-item {
-        color: $color-navigation_itemL1-text-default;
-    }
-
-    &-item-normal:hover {
-        &:not(.#{$module}-item-selected) {
-            @include item-hover;
-        }
-
-        &.#{$module}-item-selected {
-            @include item-hover-selected;
-        }
-
-        &.#{$module}-item-disabled {
-            @include item-disabled;
-        }
-
-        &.#{$module}-item-selected.#{$module}-item-disabled {
-            @include item-disabled-selected;
-        }
-    }
-
-    &-item-normal:active:not(.#{$module}-item-selected),
-    &-inner > &-item-normal:active:not(.#{$module}-item-selected) {
-        @include item-active;
-    }
-
-    &-item-normal:active.#{$module}-item-selected,
-    &-inner > &-item-normal:active.#{$module}-item-selected {
-        @include item-active-selected;
-    }
-
-    &-item-normal:active.#{$module}-item-disabled,
-    &-inner > &-item-normal:active.#{$module}-item-disabled {
-        @include item-disabled;
-    }
-
-    &-sub-wrap &-item-inner {
-        display: block;
-    }
-
-    &-sub-wrap {
-        display: block;
-        padding: $spacing-navigation_sub_wrap-padding;
-        margin-top: $spacing-navigation_sub_wrap-marginTop;
-        // margin-bottom: $spacing-tight;
-        height: inherit;
-
-        .#{$module}-sub-title {
-            display: flex;
-            justify-content: flex-start;
-            height: $height-navigation_item_base;
-            align-items: center;
-        }
-    }
-
-    &-sub {
-        font-weight: $font-navigation_sub-fontWeight;
-        font-size: $font-navigation_sub-fontSize;
-        list-style: none;
-        outline: none;
-        padding: $spacing-navigation_sub-padding;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-
-        .#{$module}-item {
-            color: $color-navigation_itemLn-text-default;
-            background-color: $color-navigation_itemLn-bg-default;
-            //padding-left: 0;
-            //padding-right: 0;
-            // margin: 0;
-            height: $height-navigation_item_base;
-            font-weight: $font-navigation_sub_item-fontWeight;
-            width: 100%;
-
-            &:first-child {
-                margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-            }
-
-            & > &-text:first-child {
-                margin-left: $spacing-base-tight + $width-navigation_icon_left + $width-navigation_icon_text_between;
-            }
-
-            //& > .#{$module}-item-icon:first-child {
-            //    margin-left: $width-navigation_icon_text_between;
-            //}
-
-            &:hover {
-                &:not(.#{$module}-sub-wrap) {
-                    &:not(.#{$module}-item-selected):not(.#{$module}-item-disabled) {
-                        @include item-hover;
-                    }
-                }
-
-                &.#{$module}-item-disabled {
-                    @include item-disabled;
-                }
-
-                &.#{$module}-item-selected {
-                    @include item-selected;
-                }
-            }
-
-            &:active {
-                &:not(.#{$module}-sub-wrap) {
-                    &:not(.#{$module}-item-selected):not(.#{$module}-item-disabled) {
-                        @include item-active;
-                    }
-                }
-
-                &.#{$module}-item-disabled {
-                    @include item-disabled;
-                }
-
-                &.#{$module}-item-selected {
-                    @include item-selected;
-                }
-            }
-
-            &-selected {
-                @include item-selected;
-
-                &.#{$module}-item-disabled {
-                    cursor: not-allowed;
-                    background-color: $color-navigation_itemL1_selected-bg-default;
-                    color: $color-navigation_itemL1_disabled-text-default;
-                }
-            }
-
-            &-disabled {
-                @include item-disabled;
-            }
-        }
-
-
-        .#{$module}-sub-wrap {
-            height: inherit;
-        }
-    }
-}
-
-/* Header、Footer-Common */
-.#{$module} {
-
-    &-header {
-        display: inline-flex;
-        align-items: center;
-        box-sizing: border-box;
-
-        &-logo {
-            margin-left: $spacing-navigation_header_logo-marginLeft;
-            margin-right: $spacing-navigation_header_logo-marginRight;
-            display: inline-flex;
-
-            // overflow: hidden;
-
-            & > .#{$prefix}-icon,
-            & > img {
-                width: $width-navigation_header_logo;
-                height: $height-navigation_header_logo;
-                object-fit: scale-down;
-            }
-        }
-
-        &-text {
-            @include font-size-header-5;
-            font-weight: $font-navigation_header_item-fontWeight;
-            display: inline-flex;
-            color: $color-navigation_header-text-default;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            transition: $motion-navigation_collapsed_opacity;
-            opacity: 1;
-        }
-    }
-
-    &-footer {
-        box-sizing: border-box;
-        padding: $spacing-navigation_footer-paddingY $spacing-navigation_footer-paddingX;
-        display: inline-flex;
-        align-items: center;
-
-        .#{$module}-collapse-btn {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-}
-
-.#{$module}-collapsed {
-    .#{$module}-header {
-        justify-content: center;
-
-        .#{$module}-header {
-
-            &-logo {
-                margin-right: 0;
-                width: 100%;
-
-                & > .#{$prefix}-icon,
-                & > img {
-                    width: $height-navigation_header_logo_collapsed;
-                    max-width: 100%;
-                    max-height: 100%;
-                }
-            }
-
-            &-text {
-                transition: $motion-navigation_collapsed_opacity;
-                opacity: 0;
-            }
-        }
-    }
-}
-
-// 垂直模式特有的样式
-.#{$module}-vertical {
-    .#{$module} {
-        &-list > .#{$module}-item-selected:not(.#{$module}-item-disabled) {
-            &.#{$module}-item-normal:hover {
-                .#{$module}-item-icon:first-child {
-                    color: $color-navigation_itemL1_selected_icon-default;
-                }
-            }
-        }
-
-        &-list > .#{$module}-sub-wrap {
-            & > .#{$module}-sub-title {
-                color: $color-navigation_itemL1-text-default;
-                background-color: $color-navigation_itemL1-bg-default;
-
-                &-selected {
-                    font-weight: $font-navigation_sub_selected-fontWeight;
-                    @include item-selected;
-                    background-color: $color-navigation_itemL1-bg-default;
-
-                    &.#{$module}-sub-title-disabled {
-                        @include item-disabled-selected;
-                    }
-                }
-
-                &-disabled {
-                    font-weight: $font-navigation_sub_disabled-fontWeight;
-                    @include item-disabled;
-                }
-
-                &:hover {
-                    &:not(.#{$module}-sub-title-selected) {
-                        @include item-hover;
-                    }
-                    &.#{$module}-sub-title-selected {
-                        @include item-hover-selected;
-                    }
-                }
-
-                &:active {
-                    &:not(.#{$module}-sub-title-selected) {
-                        @include item-active;
-                    }
-                    &.#{$module}-sub-title-selected {
-                        @include item-active-selected;
-                    }
-                }
-
-                &:hover,
-                &:active {
-                    &.#{$module}-sub-title-disabled {
-                        &:not(.#{$module}-sub-title-selected) {
-                            @include item-disabled;
-                        }
-                        &.#{$module}-sub-title-selected {
-                            @include item-disabled-selected;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .#{$module}-item:last-of-type {
-        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    }
-
-    .#{$module}-inner {
-        flex-direction: column;
-    }
-
-    .#{$module}-header-list-outer {
-        height: 100%;
-    }
-
-    .#{$module}-list-wrapper {
-        padding-top: $spacing-navigation_list_wrapper-paddingTop;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-
-    .#{$module}-header {
-        padding-top: $spacing-navigation_header-paddingTop;
-        padding-bottom: $spacing-navigation_header-paddingBottom;
-        padding-left: $spacing-navigation_vertical_nav_header-paddingLeft;
-        padding-right: $spacing-navigation_vertical_nav_header-paddingRight;
-        width: 100%;
-
-        &-collapsed {
-            padding-left: $spacing-navigation_vertical_nav_header_collapsed-paddingLeft;
-            padding-right: $spacing-navigation_vertical_nav_header_collapsed-paddingRight;
-            transition: $motion-navigation_padding, $motion-navigation_width;
-        }
-    }
-
-    .#{$module}-footer {
-        color: $color-navigation_footer_icon-default;
-        padding-left: $spacing-navigation_vertical_footer-paddingLeft;
-        padding-right: $spacing-navigation_vertical_footer-paddingRight;
-
-        .#{$module}-collapse-btn {
-            .#{$prefix}-button-content-right {
-                margin-left: $spacing-navigation_vertical_footer_semi_button_content_right-marginLeft;
-                opacity: 1;
-                transition: $motion-navigation_collapsed_opacity;
-            }
-
-            & > .#{$prefix}-button {
-                padding-left: $spacing-navigation_footer_collapse_btn_inner-paddingX;
-                padding-right: $spacing-navigation_footer_collapse_btn_inner-paddingX;
-            }
-        }
-
-        &-collapsed {
-            justify-content: center;
-
-            .#{$module}-collapse-btn {
-                width: 100%;
-
-                .#{$prefix}-button-content-right {
-                    opacity: 0;
-                    transition: $motion-navigation_collapsed_opacity;
-                }
-            }
-        }
-    }
-}
-
-// 水平模式特有的样式
-.#{$module}-horizontal {
-    width: 100%;
-    height: $height-navigation_horizontal_header;
-    border-right: none;
-    border-bottom: $width-navigation_border solid $color-navigation_border-default;
-    padding-left: $spacing-navigation_horizontal-paddingLeft;
-    padding-right: $spacing-navigation_horizontal-paddingRight;
-
-    .#{$module}-inner {
-        flex-direction: row;
-    }
-
-    .#{$module}-header-list-outer {
-        display: inline-flex;
-        align-items: center;
-
-        &-collapsed {
-            align-items: baseline;
-        }
-    }
-
-    .#{$module}-header {
-        width: inherit;
-        margin-right: $spacing-navigation_horizontal_header_logo-marginRight;
-    }
-
-    .#{$module}-list {
-        display: inline-flex;
-        align-items: center;
-
-        .#{$module}-item {
-            margin-bottom: $spacing-navigation_horizontal_nav_list_item-marginBottom;
-            @include item-horizontal-default;
-
-            &-selected {
-                @include item-horizontal-selected;
-            }
-
-            &-disabled {
-                @include item-horizontal-disabled;
-            }
-        }
-
-        .#{$module}-item-normal {
-
-            &:hover:not(.#{$module}-item-selected) {
-                @include item-horizontal-hover;
-
-                .#{$module}-item-text {
-                    color: $color-navigation_horizontal_itemL1-text-hover;
-                    background-color: $color-navigation_horizontal_itemL1-bg-hover;
-                }
-            }
-
-            &:active:not(.#{$module}-item-selected) {
-                @include item-horizontal-active;
-            }
-
-            &:hover,
-            &:active {
-                &.#{$module}-item-disabled {
-                    @include item-horizontal-disabled;
-
-                    .#{$module}-item-text {
-                        color: $color-navigation_horizontal_itemL1_disabled-text-default;
-                        background-color: $color-navigation_horizontal_itemL1_disabled-bg-default;
-                    }
-                }
-            }
-        }
-
-        .#{$module}-item:not(:last-of-type) {
-            margin-right: $spacing-navigation_horizontal_nav_list_item_not_last-marginRight;
-        }
-
-        .#{$module}-sub-title {
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1-text-default;
-                background-color: $color-navigation_horizontal_itemL1-bg-default;
-            }
-
-            &-selected {
-                .#{$module}-item-icon:first-child,
-                .#{$module}-item-text {
-                    color: $color-navigation_horizontal_itemL1_selected-text-default;
-                    background-color: $color-navigation_horizontal_itemL1_selected-bg-default;
-                }
-            }
-
-            &-disabled {
-                cursor: not-allowed;
-
-                .#{$module}-item-icon:first-child,
-                .#{$module}-item-text {
-                    color: $color-navigation_horizontal_itemL1_disabled-text-default;
-                    background-color: $color-navigation_horizontal_itemL1_disabled-bg-default;
-                }
-            }
-        }
-    }
-
-
-    .#{$module}-item-inner {
-        width: auto;
-    }
-
-    .#{$module}-item-icon:last-child {
-        margin-left: $spacing-navigation_horizontal_icon_last-marginLeft;
-    }
-
-    .#{$module}-item-icon:first-child {
-        margin-right: $spacing-navigation_horizontal_icon_first-marginRight;
-    }
-
-    .#{$module}-item {
-        width: auto;
-
-        &-collapsed {
-            word-wrap: none;
-            text-overflow: ellipsis;
-        }
-    }
-
-    .#{$module}-footer {
-        border-top: none;
-        padding-right: 0;
-
-        &-collapsed {
-            justify-content: center;
-            flex-direction: row;
-            align-items: center;
-        }
-    }
-}
-
-.#{$module}-popover {
-    .#{$module}-sub-title {
-        width: 100%;
-    }
-
-    .#{$module}-item-selected {
-        font-weight: $font-navigation_popover_nav_item_selected-fontWeight;
-    }
-}
-
-.#{$prefix}-dropdown-item {
-    .#{$module}-sub-title {
-        box-sizing: border-box;
-        padding: $spacing-navigation_dropdown_item_nav_sub_title-paddingY $spacing-navigation_dropdown_item_nav_sub_title-paddingX;
-        width: 100%;
-    }
-
-    &.#{$module}-item {
-        margin-top: $spacing-navigation_dropdown_item_nav_item-marginTop;
-        margin-bottom: $spacing-navigation_dropdown_item_nav_item-marginBottom;
-        min-width: $width-navigation_dropdown_item_nav_item-minWidth;
-    }
-}
-
-@import "./rtl.scss";