.asfbFormGlobal { position:fixed; top: 0; left: -320px; width: 320px; background-color: #f1f1f1; height: 100%; border-left: 3px solid #d0d0d0; border-right: 3px solid #d0d0d0; z-index: 999; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; &.active { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); .asfbBtnAction { background-image: url(../img/off_form.png); } } .asfbEntry { position: absolute; overflow-x: scroll; height: 100%; width: 100%; left:0; top:0; } .asfbBtnAction { position: absolute; left: 100%; top: 30%; width: 50px; height: 50px; font-size: 0; border-radius: 4px; border:1px solid #d0d0d0; background: none; background-color: #fff; background-image: url(../img/icon-s.png); background-repeat: no-repeat; background-size: 70%; background-position: center; } &.pos_left, &.pos_right { .asfbFormWrapper { .asfb_itemCol { width: 100%; background-color: #fff; margin-bottom: 15px; } } } &.pos_right { right: -320px; left: auto; &.active { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); .asfbBtnAction { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } .asfbBtnAction { left: auto; right: 100%; } } &.pos_botom, &.pos_top { .asfbEntry { max-width: 1000px; width: 100%; margin:auto; overflow: auto; } } &.pos_top { right: 0; top: auto; bottom: 100%; left:0; height: auto; width: 100%; .asfbEntry { position: relative; } &.active { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); .asfbBtnAction { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } } .asfbBtnAction { left: 0; right: 0; top: 100%; margin: auto; border-top:none; margin-top: -3px; } } &.pos_bottom { right: 0; top: 100%; left:0; bottom: auto; height: auto; width: 100%; .asfbEntry { position: relative; } &.active { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); .asfbBtnAction { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } } .asfbBtnAction { left: 0; right: 0; bottom: 100%; margin: auto; border-bottom: none; margin-bottom: -5px; top: auto; } } } .admin-bar .asfbFormGlobal { padding-top: 30px; }