mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-13 23:48:55 +01:00
421 lines
7.6 KiB
CSS
421 lines
7.6 KiB
CSS
|
/*!
|
||
|
* angular-aside - v1.3.2
|
||
|
* https://github.com/dbtek/angular-aside
|
||
|
* 2015-11-17
|
||
|
* Copyright (c) 2015 İsmail Demirbilek
|
||
|
* License: MIT
|
||
|
*/
|
||
|
|
||
|
/*!
|
||
|
Animate.css - http://daneden.me/animate
|
||
|
Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||
|
|
||
|
Copyright (c) 2014 Daniel Eden
|
||
|
*/
|
||
|
|
||
|
@-webkit-keyframes fadeInLeft {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
transform: translate3d(-100%, 0, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeInLeft {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
-ms-transform: translate3d(-100%, 0, 0);
|
||
|
transform: translate3d(-100%, 0, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
-ms-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeInLeft {
|
||
|
-webkit-animation-name: fadeInLeft;
|
||
|
animation-name: fadeInLeft;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes fadeInRight {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
transform: translate3d(100%, 0, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeInRight {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
-ms-transform: translate3d(100%, 0, 0);
|
||
|
transform: translate3d(100%, 0, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
-ms-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeInRight {
|
||
|
-webkit-animation-name: fadeInRight;
|
||
|
animation-name: fadeInRight;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes fadeInTop {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
transform: translate3d(0, -100%, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeInTop {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
-ms-transform: translate3d(0, -100%, 0);
|
||
|
transform: translate3d(0, -100%, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
-ms-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeInTop {
|
||
|
-webkit-animation-name: fadeInTop;
|
||
|
animation-name: fadeInTop;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes fadeInBottom {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
transform: translate3d(0, 100%, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeInBottom {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
-ms-transform: translate3d(0, 100%, 0);
|
||
|
transform: translate3d(0, 100%, 0);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: none;
|
||
|
-ms-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeInBottom {
|
||
|
-webkit-animation-name: fadeInBottom;
|
||
|
animation-name: fadeInBottom;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes fadeOutLeft {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
transform: translate3d(-100%, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeOutLeft {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
transform: translate3d(-100%, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeOutLeft {
|
||
|
-webkit-animation-name: fadeOutLeft;
|
||
|
animation-name: fadeOutLeft;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes fadeOutRight {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
transform: translate3d(100%, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeOutRight {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
transform: translate3d(100%, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeOutRight {
|
||
|
-webkit-animation-name: fadeOutRight;
|
||
|
animation-name: fadeOutRight;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes fadeOutUp {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
transform: translate3d(0, -100%, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeOutUp {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
transform: translate3d(0, -100%, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeOutUp {
|
||
|
-webkit-animation-name: fadeOutUp;
|
||
|
animation-name: fadeOutUp;
|
||
|
}
|
||
|
|
||
|
|
||
|
@-webkit-keyframes fadeOutDown {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
transform: translate3d(0, 100%, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes fadeOutDown {
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
transform: translate3d(0, 100%, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.fadeOutDown {
|
||
|
-webkit-animation-name: fadeOutDown;
|
||
|
animation-name: fadeOutDown;
|
||
|
}
|
||
|
/* Common */
|
||
|
|
||
|
.ng-aside {
|
||
|
overflow-y: auto;
|
||
|
overflow-x: hidden;
|
||
|
}
|
||
|
|
||
|
.ng-aside .modal-dialog {
|
||
|
position: absolute;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.ng-aside.fade .modal-dialog {
|
||
|
-o-transition: none;
|
||
|
-moz-transition: none;
|
||
|
-ms-transition: none;
|
||
|
-webkit-transition: none;
|
||
|
transition: none;
|
||
|
/*CSS transforms*/
|
||
|
-o-transform: none;
|
||
|
-moz-transform: none;
|
||
|
-ms-transform: none;
|
||
|
-webkit-transform: none;
|
||
|
transform: none;
|
||
|
}
|
||
|
|
||
|
.ng-aside .modal-dialog .modal-content {
|
||
|
overflow-y: auto;
|
||
|
overflow-x: hidden;
|
||
|
border: none;
|
||
|
border-radius: 0;
|
||
|
}
|
||
|
|
||
|
/* Horizontal */
|
||
|
|
||
|
.ng-aside.horizontal {
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal .modal-dialog .modal-content {
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal .modal-dialog {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.modal-open .ng-aside.horizontal.left .modal-dialog {
|
||
|
animation: fadeOutLeft 250ms;
|
||
|
-webkit-animation: fadeOutLeft 250ms;
|
||
|
-moz-animation: fadeOutLeft 250ms;
|
||
|
-o-animation: fadeOutLeft 250ms;
|
||
|
-ms-animation: fadeOutLeft 250ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal.left.in .modal-dialog {
|
||
|
animation: fadeInLeft 400ms;
|
||
|
-webkit-animation: fadeInLeft 400ms;
|
||
|
-moz-animation: fadeInLeft 400ms;
|
||
|
-o-animation: fadeInLeft 400ms;
|
||
|
-ms-animation: fadeInLeft 400ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal.left .modal-dialog {
|
||
|
left: 0;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal.right .modal-dialog {
|
||
|
animation: fadeOutRight 400ms;
|
||
|
-webkit-animation: fadeOutRight 400ms;
|
||
|
-moz-animation: fadeOutRight 400ms;
|
||
|
-o-animation: fadeOutRight 400ms;
|
||
|
-ms-animation: fadeOutRight 400ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal.right.in .modal-dialog {
|
||
|
animation: fadeInRight 250ms;
|
||
|
-webkit-animation: fadeInRight 250ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.horizontal.right .modal-dialog {
|
||
|
right: 0;
|
||
|
}
|
||
|
|
||
|
/* Vertical */
|
||
|
|
||
|
.ng-aside.vertical {
|
||
|
width: 100% !important;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical .modal-dialog {
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
width: 100% !important;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical .modal-dialog .modal-content {
|
||
|
max-height: 400px;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical.top .modal-dialog {
|
||
|
animation: fadeOutUp 250ms;
|
||
|
-webkit-animation: fadeOutUp 250ms;
|
||
|
-webkit-animation: fadeOutUp 250ms;
|
||
|
-moz-animation: fadeOutUp 250ms;
|
||
|
-o-animation: fadeOutUp 250ms;
|
||
|
-ms-animation: fadeOutUp 250ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical.top.in .modal-dialog {
|
||
|
animation: fadeInTop 250ms;
|
||
|
-webkit-animation: fadeInTop 250ms;
|
||
|
-webkit-animation: fadeInTop 250ms;
|
||
|
-moz-animation: fadeInTop 250ms;
|
||
|
-o-animation: fadeInTop 250ms;
|
||
|
-ms-animation: fadeInTop 250ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical.bottom .modal-dialog {
|
||
|
animation: fadeOutDown 250ms;
|
||
|
-webkit-animation: fadeOutDown 250ms;
|
||
|
-webkit-animation: fadeOutDown 250ms;
|
||
|
-moz-animation: fadeOutDown 250ms;
|
||
|
-o-animation: fadeOutDown 250ms;
|
||
|
-ms-animation: fadeOutDown 250ms;
|
||
|
}
|
||
|
.ng-aside.vertical.bottom.in .modal-dialog {
|
||
|
animation: fadeInBottom 250ms;
|
||
|
-webkit-animation: fadeInBottom 250ms;
|
||
|
-webkit-animation: fadeInBottom 250ms;
|
||
|
-moz-animation: fadeInBottom 250ms;
|
||
|
-o-animation: fadeInBottom 250ms;
|
||
|
-ms-animation: fadeInBottom 250ms;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical.bottom .modal-dialog {
|
||
|
bottom: 0;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical.top .modal-dialog {
|
||
|
top: 0;
|
||
|
}
|
||
|
|
||
|
.ng-aside.vertical .modal-dialog .modal-content {
|
||
|
width: 100%;
|
||
|
}
|