You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/developer/components/controlSetting/index.scss

103 lines
1.5 KiB

.pane_control_area{
position: absolute;
bottom: 0;
width: 100%;
// height: 56px;
.control_tab{
position: absolute;
bottom: -325px;
width: 100%;
// transition: all .2s;
opacity: 0;
// animation: .3s ease-in-out move_up;
// &.active{
// bottom: 0;
// opacity: 1;
// }
&.move_up{
animation: move_up .3s ease-in;
}
&.move_up_final {
bottom: 0;
opacity: 1;
}
&.move_down{
animation: move_down .3s ease-in-out;
}
&.move_down_final{
bottom: -325px;
opacity: 0;
}
}
}
.ant-tabs-bar{
padding: 0 10px;
margin: 0px;
border-bottom: transparent;
}
.ant-tabs-ink-bar{
bottom: 1px;
}
// .tab_ctx_area.pos_center{
// background: #222;
// }
.pane_control_opts{
display: flex;
justify-content: space-between;
align-items: center;
z-index: 20;
height: 56px;
padding-right: 30px;
padding-left: 10px;
background: #000;
}
.setting_drawer{
.setting_h2{
line-height: 50px;
}
.setting_desc{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.flex_item{
line-height: 32px;
font-size: 12px;
}
}
}
@keyframes move_up {
0%{
opacity: 0;
// bottom: -325px;
}
90%{
opacity: 0.5;
// bottom: 0px;
}
100%{
opacity: 1;
bottom: 0;
}
}
@keyframes move_down{
0%{
opacity: 1;
bottom: 0
}
10%{
opacity: .2;
}
20%{
opacity: 0;
}
100%{
opacity: 0;
bottom: -325px;
}
}