@import (reference) './less/ui.less';
/* layout */
.header {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    left: 0;
    height: 64px;
    padding-left: 26px;
    border-bottom: 1px solid rgba(34, 34, 34, .1);
    background-color: #fff;
}

.aside {
    position: fixed;
    z-index: 1000;
    top: 64px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    width: 200px;
    border-right: 1px solid rgba(34, 34, 34, .1);
    background-color: #fff;
    .ui-menu-icon {
        font-size: 16px;
    }
    .ui-menu-item {
        font-size: @font-size-lg;
    }
    .ui-submenu {
        .ui-menu-item {
            font-size: @font-size-base;
        }
    }
    .ui-submenu-angle {
        .uicon {
            font-size: @font-size-xs;
        }
    }

    &::-webkit-scrollbar {
        display: none;
    }
}

.main-body {
    margin: 64px 0 0 200px;
}

.v-section {
    & + & {
        margin-top: 60px;
    }
}
.section-item {
    font-size: @font-size-base;
    line-height: @font-line-height-base;
    margin: -(@font-line-height-base - @font-size-base) 0 28 - (@font-line-height-base - @font-size-base);

    &:last-of-type {
        margin-bottom: 0;
    }
}
.section-example {
    margin-top: 20px;
}

img {
    display: block;
    margin-top: 50px;
}
/* title */
.section-title {
    margin-bottom: 32px;
    font-size: @font-size-lger;
    font-weight: bold;
    color: @color-text-primary;
}

.item-title {
    font-size: @font-size-lg;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 16px;
    color: @color-text-primary;
    border-left: 4px solid @color-primary;
}
/* color */
.active-menu-title {
    color: @color-primary;
}

.faas-ui {
    margin-bottom: 48px;

    .ui-checkbox-button,
    .ui-radio-button {
        margin-right: 0;
    }

    em {
        font-weight: bold;
        color: @color-text-primary;

        &::after,
        &::before {
            content: ' ';
        }
    }
}
.pre-container {
    overflow: hidden;
}
pre {
    margin-left: -225px;
    padding: 12px 0;
    line-height: @font-line-height-base;
    font-size: @font-size-base;
    background-color: fade(@color-base, 5%);
}

.logo {
    font-size: 18px;
    line-height: 64px;
    display: inline-block;
}

.v-text {
    .title {
        margin-bottom: 5px;
        color: @color-text-primary;
    }

    & + & {
        margin-top: 12px;
    }
}

.item-title-secondary {
    font-size: @font-size-base;
    margin-bottom: 12px;
    color: @color-text-primary;
}

.v-element + .v-element {
    margin-top: 24px;
    padding-top: 24px;
    border-top: @border-base;
}

.bg-gray {
    background-color: fade(@color-base, 5%);
}

.tip-outline {
    &:hover {
        outline: @border-base;
    }
}

.tip-tag {
    line-height: 1;
    display: inline-block;
    margin: 0 3px;
    padding: 2px 5px;
    color: mix(@color-primary, @color-bg, 70%);
    border-radius: 3px;
    background-color: mix(@color-base, @color-bg, 8%);
}

/* color */
.color-group {
    display: flex;
    margin-top: 40px;
}

.color {
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 150px;

    &.dark {
        color: #fff;

        .color-hex {
            border-color: rgba(255, 255, 255, .7);
        }
    }
}

.color-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 2.4;
}

.color-hex {
    padding: 10px;
    border-top: 1px dashed rgba(34, 34, 34, .1);
}
/* table */
.table {
    // border: 1px solid rgba(34, 34, 34, .1);
    //
    // tr {
    //     border: 1px solid rgba(34, 34, 34, .1);
    //     padding: 8px 10px;
    // }
}

.paragraphs > li {
    margin-top: 16px;
    border: 1px solid transparent;
}

.btns {
    margin: -4px;

    .ui-button {
        margin: 4px;
    }
}

.item-tip {
    margin-bottom: 8px;
}