bee-drawer
Version:
Drawer ui component for react
72 lines (62 loc) • 1.23 kB
CSS
/* FormGroup */
/* Navlayout */
.drawerc {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
width: 0;
height: 100%; }
.drawer-mask {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; }
.drawer-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 12px;
line-height: 32px;
cursor: pointer; }
.drawer-close.uf {
font-size: 12px;
padding: 0 2px; }
.drawer {
position: fixed;
background-color: #fff;
transition: transform 300ms ease-in-out;
overflow: auto; }
.drawer .drawer-body .u-drop .u-drag {
position: unset ; }
.drawer-left {
top: 0;
left: 0;
height: 100%; }
.drawer-right {
top: 0;
right: 0;
height: 100%; }
.drawer-top {
top: 0;
left: 0;
width: 100%; }
.drawer-bottom {
bottom: 0;
left: 0;
width: 100%; }
.drawer-header {
padding: 16px 24px;
border-radius: 4px 4px 0 0;
background: #fff;
color: rgba(0, 0, 0, 0.65);
border-bottom: 1px solid #e8e8e8; }
.drawer-header-title {
margin: 0;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85); }