@import '../../style/themes/index'; @drawer-prefix-cls: ~'@{ant-prefix}-drawer'; @picker-prefix-cls: ~'@{ant-prefix}-picker'; .@{drawer-prefix-cls} { @drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2)); position: fixed; z-index: @zindex-modal; width: 0%; height: 100%; transition: transform @animation-duration-slow @ease-base-out, height 0s ease @animation-duration-slow, width 0s ease @animation-duration-slow; > * { transition: transform @animation-duration-slow @ease-base-out, box-shadow @animation-duration-slow @ease-base-out; } &-content-wrapper { position: absolute; width: 100%; height: 100%; } .@{drawer-prefix-cls}-content { width: 100%; height: 100%; } &-left, &-right { top: 0; width: 0%; height: 100%; .@{drawer-prefix-cls}-content-wrapper { height: 100%; } &.@{drawer-prefix-cls}-open { width: 100%; transition: transform @animation-duration-slow @ease-base-out; } } &-left { left: 0; .@{drawer-prefix-cls} { &-content-wrapper { left: 0; } } &.@{drawer-prefix-cls}-open { .@{drawer-prefix-cls}-content-wrapper { box-shadow: @shadow-1-right; } } } &-right { right: 0; .@{drawer-prefix-cls} { &-content-wrapper { right: 0; } } &.@{drawer-prefix-cls}-open { .@{drawer-prefix-cls}-content-wrapper { box-shadow: @shadow-1-left; } // https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug. &.no-mask { right: 1px; transform: translateX(1px); } } } &-top, &-bottom { left: 0; width: 100%; height: 0%; .@{drawer-prefix-cls}-content-wrapper { width: 100%; } &.@{drawer-prefix-cls}-open { height: 100%; transition: transform @animation-duration-slow @ease-base-out; } } &-top { top: 0; &.@{drawer-prefix-cls}-open { .@{drawer-prefix-cls}-content-wrapper { box-shadow: @shadow-1-down; } } } &-bottom { bottom: 0; .@{drawer-prefix-cls} { &-content-wrapper { bottom: 0; } } &.@{drawer-prefix-cls}-open { .@{drawer-prefix-cls}-content-wrapper { box-shadow: @shadow-1-up; } &.no-mask { bottom: 1px; transform: translateY(1px); } } } &.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask { height: 100%; opacity: 1; transition: none; animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out; pointer-events: auto; } &-title { margin: 0; color: @heading-color; font-weight: 500; font-size: @font-size-lg; line-height: 22px; } &-content { position: relative; z-index: 1; overflow: auto; background-color: @drawer-bg; background-clip: padding-box; border: 0; } &-close { position: absolute; top: 0; right: 0; z-index: @zindex-popup-close; display: block; padding: @drawer-header-close-padding; color: @modal-close-color; font-weight: 700; font-size: @font-size-lg; font-style: normal; line-height: 1; text-align: center; text-transform: none; text-decoration: none; background: transparent; border: 0; outline: 0; cursor: pointer; transition: color @animation-duration-slow; text-rendering: auto; &:focus, &:hover { color: @icon-color-hover; text-decoration: none; } .@{drawer-prefix-cls}-header-no-title & { margin-right: var(--scroll-bar); /* stylelint-disable-next-line function-calc-no-invalid */ padding-right: ~'calc(@{drawer-header-close-padding} - var(--scroll-bar))'; } } &-header { position: relative; padding: @drawer-header-padding; color: @text-color; background: @drawer-bg; border-bottom: @border-width-base @border-style-base @border-color-split; border-radius: @border-radius-base @border-radius-base 0 0; } &-header-no-title { color: @text-color; background: @drawer-bg; } &-wrapper-body { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; } &-body { flex-grow: 1; padding: @drawer-body-padding; overflow: auto; font-size: @font-size-base; line-height: @line-height-base; word-wrap: break-word; } &-footer { flex-shrink: 0; padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal; border-top: @border-width-base @border-style-base @border-color-split; } &-mask { position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: @modal-mask-bg; opacity: 0; filter: ~'alpha(opacity=45)'; transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; pointer-events: none; } &-open { &-content { box-shadow: @shadow-2; } } // =================== Hook Components =================== .@{picker-prefix-cls} { &-clear { background: @popover-background; } } } @keyframes antdDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }