tntd/lib/drawer/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@drawer-prefix-cls: ~'@{ant-prefix}-drawer';

.tnt-drawer.@{drawer-prefix-cls} {
    &-top {
        .@{drawer-prefix-cls}-wrapper-body {
            margin-top: 48px;
        }

        // .@{drawer-prefix-cls}-content-wrapper {
        //     height: 480px !important;
        // }
    }

    // &-bottom {
    //     .@{drawer-prefix-cls}-content-wrapper {
    //         height: 480px !important;
    //     }
    // }

    .@{drawer-prefix-cls}-wrapper-body {
        margin-top: 48px;
        max-height: ~'calc(100vh - 48px)';
    }

    &.@{drawer-prefix-cls}-no-header {
        .@{drawer-prefix-cls}-wrapper-body{
            margin-top: 0;
            max-height: ~'calc(100vh)';
        }
        &.@{drawer-prefix-cls}-footer{
            .@{drawer-prefix-cls}-wrapper-body{
                margin-top:0 !important;
                max-height: ~'calc(100vh - 48px)' !important;
                margin-bottom: 48px !important;
            }
        }
    }

    &-footer {
        .@{drawer-prefix-cls}-header {
            // border-bottom: none;
            position: absolute;
            right: 0;
            top: 0;
            background: #fff;
            width: 100%;
        }

        .@{drawer-prefix-cls}-wrapper-body {
            max-height: ~'calc(100vh - 96px)' !important;
            margin-top: 48px !important;
            margin-bottom: 48px !important;
        }
    }

    .@{drawer-prefix-cls}-title {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .@{drawer-prefix-cls}-close {
        position: absolute;
        top: -2px;
        right: 0;
        z-index: 10;
        display: block;
        width: 48px;
        height: 48px;
        padding: 0;
        color: rgba(23, 35, 61, 0.8);
        font-weight: 700;
        font-size: 20px;
        font-style: normal;
        line-height: 48px;
        text-align: center;
        text-transform: none;
        text-decoration: none;
        background: transparent;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: color 0.3s;
        text-rendering: auto;
        i.tntd-anticon{
            font-size:20px;
        }
    }


    &.@{drawer-prefix-cls}-contain-closable {
        .@{drawer-prefix-cls}-header {
            padding: 12px 36px 12px 20px;
        }
    }

    &-right {
        .@{drawer-prefix-cls}-content {
            border-radius: @border-radius-base 0px 0px @border-radius-base;
            background: #F8F9FB;
        }
    }

    &-left {
        .@{drawer-prefix-cls}-content {
            border-radius: 0px @border-radius-base @border-radius-base 0px;
            background: #F8F9FB;
        }
    }

    &-top {
        .@{drawer-prefix-cls}-content {
            border-radius: 0px 0px @border-radius-base @border-radius-base;
            background: #F8F9FB;
            padding-top: 48px;
        }

        .@{drawer-prefix-cls}-wrapper-body {
            margin-top: 0px !important;
        }
    }

    &-bottom {
        .@{drawer-prefix-cls}-content {
            border-radius: @border-radius-base @border-radius-base 0px 0px;
            background: #F8F9FB;
            padding-top: 48px;
        }

        .@{drawer-prefix-cls}-wrapper-body {
            margin-top: 0px !important;
        }
    }


    .@{drawer-prefix-cls}-header {
        padding: 13px 24px;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #E9EDF3;
        z-index: 100;
    }

    .@{drawer-prefix-cls}-body {
        padding: 24px !important;
    }

    .@{drawer-prefix-cls}-wrapper-body {

        .@{drawer-prefix-cls}-footer-style {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            padding: 8px 24px;
            background: #fff;
            text-align: right;
            border-top: 1px solid #E9EDF3;
            z-index: 100;

            .@{ant-prefix}-btn {
                margin-left: 16px;
            }

          // 如果button没有type类型默认设置为 type: tertiary的样式（兼容老业务用了footer的场景）
          button:not([class*="ant-btn-"]):not([class*="tnt-btn-"]) {
            color: #17233d;
            background-color: #f8f9fb;
            border-color: #f8f9fb;
            text-shadow: none;
            box-shadow: none;

            &:hover{
              color: var(--blue-6);
              background-color: #f0f5ff;
              border-color: #f0f5ff;
            }
          }
        }

    }
}