ten-design-vue
Version:
ten-vue
266 lines (252 loc) • 5.17 kB
text/less
/* 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%);
}
}