UNPKG

ten-design-vue

Version:

ten-vue

266 lines (252 loc) 5.17 kB
/* dependencies icon,button */ @import "../vars.less"; @ANIMATION_DURATION: 0.24s; @ANIMATION_PREFIX: ten-drawer-effect; // Drawer Container .ten-drawer__container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000; overflow: auto; pointer-events: none; } .ten-drawer__mask { position: fixed; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); pointer-events: auto; &.@{ANIMATION_PREFIX}-enter-active, &.@{ANIMATION_PREFIX}-enter-to { animation: drawerFadeIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both; } &.@{ANIMATION_PREFIX}-leave-active, &.@{ANIMATION_PREFIX}-leave-to { animation: drawerFadeOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both; } } // Drawer .ten-drawer { overflow: hidden; position: absolute; display: flex; flex-direction: column; background-color: #ffffff; box-shadow: -3px 0 8px rgba(0, 0, 0, 0.06); pointer-events: auto; &__resizebar { position: absolute; } &__left { left: 0; right: auto; max-width: 100vw; height: 100%; // transform: translateX(-100%); &.@{ANIMATION_PREFIX}-enter-active, &.@{ANIMATION_PREFIX}-enter-to { animation: drawerLeftIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both; } &.@{ANIMATION_PREFIX}-leave-active, &.@{ANIMATION_PREFIX}-leave-to { animation: drawerLeftOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both; } .ten-drawer__resizebar { width: 6px; top: 0; right: -3px; bottom: 0; cursor: col-resize; } } &__right { right: 0; left: auto; max-width: 100vw; height: 100%; // transform: translateX(100%); &.@{ANIMATION_PREFIX}-enter-active, &.@{ANIMATION_PREFIX}-enter-to { animation: drawerRightIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both; } &.@{ANIMATION_PREFIX}-leave-active, &.@{ANIMATION_PREFIX}-leave-to { animation: drawerRightOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both; } .ten-drawer__resizebar { width: 6px; top: 0; left: -3px; bottom: 0; cursor: col-resize; } } &__top { top: 0; bottom: auto; width: 100vw; max-height: 100%; // transform: translateY(-100%); &.@{ANIMATION_PREFIX}-enter-active, &.@{ANIMATION_PREFIX}-enter-to { animation: drawerTopIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both; } &.@{ANIMATION_PREFIX}-leave-active, &.@{ANIMATION_PREFIX}-leave-to { animation: drawerTopOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both; } .ten-drawer__resizebar { height: 6px; right: 0; left: 0; bottom: -3px; cursor: row-resize; } } &__bottom { bottom: 0; top: auto; width: 100vw; max-height: 100vh; // transform: translateY(100%); &.@{ANIMATION_PREFIX}-enter-active, &.@{ANIMATION_PREFIX}-enter-to { animation: drawerBottomIn @ANIMATION_DURATION cubic-bezier(0.0, 0.0, 0.2, 1) both; } &.@{ANIMATION_PREFIX}-leave-active, &.@{ANIMATION_PREFIX}-leave-to { animation: drawerBottomOut @ANIMATION_DURATION cubic-bezier(0.4, 0.0, 1, 1) both; } .ten-drawer__resizebar { height: 6px; right: 0; left: 0; top: -3px; cursor: row-resize; } } &__header { position: relative; display: flex; padding: 16px 24px; &::after { content: ''; width: 100%; height: 1px; position: absolute; left: 0; right: 0; bottom: 0; background: #F0F0F0; } &-title { font-size: @title-level-3-size; color: @text-color; font-weight: bold; } } &__close { position: absolute; top: 16px; right: 15px; padding: 5px; font-size: @text-level-1-size; color: @text-color-lighter-2; cursor: pointer; } // content &__body { overflow-y: auto; } } // backdrop @keyframes drawerFadeIn { from { opacity: 0; } to { opacity: 1 } } @keyframes drawerFadeOut { from { opacity: 1; } to { opacity: 0 } } // left @keyframes drawerLeftIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes drawerLeftOut { from { transform: translateX(0); } to { transform: translateX(-100%); } } // right @keyframes drawerRightIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes drawerRightOut { from { transform: translateX(0); } to { transform: translateX(100%); } } // top @keyframes drawerTopIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes drawerTopOut { from { transform: translateY(0); } to { transform: translateY(-100%); } } // bottom @keyframes drawerBottomIn { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes drawerBottomOut { from { transform: translateY(0); } to { transform: translateY(100%); } }