angular-aside.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. /*!
  2. * angular-aside - v1.1.2
  3. * https://github.com/dbtek/angular-aside
  4. * 2015-03-04
  5. * Copyright (c) 2015 İsmail Demirbilek
  6. * License: MIT
  7. */
  8. /*!
  9. Animate.css - http://daneden.me/animate
  10. Licensed under the MIT license - http://opensource.org/licenses/MIT
  11. Copyright (c) 2014 Daniel Eden
  12. */
  13. @-webkit-keyframes fadeInLeft {
  14. 0% {
  15. opacity: 0;
  16. -webkit-transform: translate3d(-100%, 0, 0);
  17. transform: translate3d(-100%, 0, 0);
  18. }
  19. 100% {
  20. opacity: 1;
  21. -webkit-transform: none;
  22. transform: none;
  23. }
  24. }
  25. @keyframes fadeInLeft {
  26. 0% {
  27. opacity: 0;
  28. -webkit-transform: translate3d(-100%, 0, 0);
  29. -ms-transform: translate3d(-100%, 0, 0);
  30. transform: translate3d(-100%, 0, 0);
  31. }
  32. 100% {
  33. opacity: 1;
  34. -webkit-transform: none;
  35. -ms-transform: none;
  36. transform: none;
  37. }
  38. }
  39. .fadeInLeft {
  40. -webkit-animation-name: fadeInLeft;
  41. animation-name: fadeInLeft;
  42. }
  43. @-webkit-keyframes fadeInRight {
  44. 0% {
  45. opacity: 0;
  46. -webkit-transform: translate3d(100%, 0, 0);
  47. transform: translate3d(100%, 0, 0);
  48. }
  49. 100% {
  50. opacity: 1;
  51. -webkit-transform: none;
  52. transform: none;
  53. }
  54. }
  55. @keyframes fadeInRight {
  56. 0% {
  57. opacity: 0;
  58. -webkit-transform: translate3d(100%, 0, 0);
  59. -ms-transform: translate3d(100%, 0, 0);
  60. transform: translate3d(100%, 0, 0);
  61. }
  62. 100% {
  63. opacity: 1;
  64. -webkit-transform: none;
  65. -ms-transform: none;
  66. transform: none;
  67. }
  68. }
  69. .fadeInRight {
  70. -webkit-animation-name: fadeInRight;
  71. animation-name: fadeInRight;
  72. }
  73. @-webkit-keyframes fadeInTop {
  74. 0% {
  75. opacity: 0;
  76. -webkit-transform: translate3d(0, -100%, 0);
  77. transform: translate3d(0, -100%, 0);
  78. }
  79. 100% {
  80. opacity: 1;
  81. -webkit-transform: none;
  82. transform: none;
  83. }
  84. }
  85. @keyframes fadeInTop {
  86. 0% {
  87. opacity: 0;
  88. -webkit-transform: translate3d(0, -100%, 0);
  89. -ms-transform: translate3d(0, -100%, 0);
  90. transform: translate3d(0, -100%, 0);
  91. }
  92. 100% {
  93. opacity: 1;
  94. -webkit-transform: none;
  95. -ms-transform: none;
  96. transform: none;
  97. }
  98. }
  99. .fadeInTop {
  100. -webkit-animation-name: fadeInTop;
  101. animation-name: fadeInTop;
  102. }
  103. @-webkit-keyframes fadeInBottom {
  104. 0% {
  105. opacity: 0;
  106. -webkit-transform: translate3d(0, 100%, 0);
  107. transform: translate3d(0, 100%, 0);
  108. }
  109. 100% {
  110. opacity: 1;
  111. -webkit-transform: none;
  112. transform: none;
  113. }
  114. }
  115. @keyframes fadeInBottom {
  116. 0% {
  117. opacity: 0;
  118. -webkit-transform: translate3d(0, 100%, 0);
  119. -ms-transform: translate3d(0, 100%, 0);
  120. transform: translate3d(0, 100%, 0);
  121. }
  122. 100% {
  123. opacity: 1;
  124. -webkit-transform: none;
  125. -ms-transform: none;
  126. transform: none;
  127. }
  128. }
  129. .fadeInBottom {
  130. -webkit-animation-name: fadeInBottom;
  131. animation-name: fadeInBottom;
  132. }
  133. @-webkit-keyframes fadeOutLeft {
  134. 0% {
  135. opacity: 1;
  136. }
  137. 100% {
  138. opacity: 0;
  139. -webkit-transform: translate3d(-100%, 0, 0);
  140. transform: translate3d(-100%, 0, 0);
  141. }
  142. }
  143. @keyframes fadeOutLeft {
  144. 0% {
  145. opacity: 1;
  146. }
  147. 100% {
  148. opacity: 0;
  149. -webkit-transform: translate3d(-100%, 0, 0);
  150. transform: translate3d(-100%, 0, 0);
  151. }
  152. }
  153. .fadeOutLeft {
  154. -webkit-animation-name: fadeOutLeft;
  155. animation-name: fadeOutLeft;
  156. }
  157. @-webkit-keyframes fadeOutRight {
  158. 0% {
  159. opacity: 1;
  160. }
  161. 100% {
  162. opacity: 0;
  163. -webkit-transform: translate3d(100%, 0, 0);
  164. transform: translate3d(100%, 0, 0);
  165. }
  166. }
  167. @keyframes fadeOutRight {
  168. 0% {
  169. opacity: 1;
  170. }
  171. 100% {
  172. opacity: 0;
  173. -webkit-transform: translate3d(100%, 0, 0);
  174. transform: translate3d(100%, 0, 0);
  175. }
  176. }
  177. .fadeOutRight {
  178. -webkit-animation-name: fadeOutRight;
  179. animation-name: fadeOutRight;
  180. }
  181. @-webkit-keyframes fadeOutUp {
  182. 0% {
  183. opacity: 1;
  184. }
  185. 100% {
  186. opacity: 0;
  187. -webkit-transform: translate3d(0, -100%, 0);
  188. transform: translate3d(0, -100%, 0);
  189. }
  190. }
  191. @keyframes fadeOutUp {
  192. 0% {
  193. opacity: 1;
  194. }
  195. 100% {
  196. opacity: 0;
  197. -webkit-transform: translate3d(0, -100%, 0);
  198. transform: translate3d(0, -100%, 0);
  199. }
  200. }
  201. .fadeOutUp {
  202. -webkit-animation-name: fadeOutUp;
  203. animation-name: fadeOutUp;
  204. }
  205. @-webkit-keyframes fadeOutDown {
  206. 0% {
  207. opacity: 1;
  208. }
  209. 100% {
  210. opacity: 0;
  211. -webkit-transform: translate3d(0, 100%, 0);
  212. transform: translate3d(0, 100%, 0);
  213. }
  214. }
  215. @keyframes fadeOutDown {
  216. 0% {
  217. opacity: 1;
  218. }
  219. 100% {
  220. opacity: 0;
  221. -webkit-transform: translate3d(0, 100%, 0);
  222. transform: translate3d(0, 100%, 0);
  223. }
  224. }
  225. .fadeOutDown {
  226. -webkit-animation-name: fadeOutDown;
  227. animation-name: fadeOutDown;
  228. }
  229. /* Common */
  230. .ng-aside {
  231. overflow-y: auto;
  232. overflow-x: hidden;
  233. }
  234. .ng-aside .modal-dialog {
  235. position: absolute;
  236. margin: 0;
  237. padding: 0;
  238. }
  239. .ng-aside.fade .modal-dialog {
  240. -o-transition: none;
  241. -moz-transition: none;
  242. -ms-transition: none;
  243. -webkit-transition: none;
  244. transition: none;
  245. /*CSS transforms*/
  246. -o-transform: none;
  247. -moz-transform: none;
  248. -ms-transform: none;
  249. -webkit-transform: none;
  250. transform: none;
  251. }
  252. .ng-aside .modal-dialog .modal-content {
  253. overflow-y: auto;
  254. overflow-x: hidden;
  255. border: none;
  256. border-radius: 0;
  257. }
  258. /* Horizontal */
  259. .ng-aside.horizontal {
  260. height: 100%;
  261. }
  262. .ng-aside.horizontal .modal-dialog .modal-content {
  263. height: 100%;
  264. }
  265. .ng-aside.horizontal .modal-dialog {
  266. position: absolute;
  267. top: 0;
  268. height: 100%;
  269. }
  270. .modal-open .ng-aside.horizontal.left .modal-dialog {
  271. animation: fadeOutLeft 250ms;
  272. -webkit-animation: fadeOutLeft 250ms;
  273. -moz-animation: fadeOutLeft 250ms;
  274. -o-animation: fadeOutLeft 250ms;
  275. -ms-animation: fadeOutLeft 250ms;
  276. }
  277. .ng-aside.horizontal.left.in .modal-dialog {
  278. animation: fadeInLeft 400ms;
  279. -webkit-animation: fadeInLeft 400ms;
  280. -moz-animation: fadeInLeft 400ms;
  281. -o-animation: fadeInLeft 400ms;
  282. -ms-animation: fadeInLeft 400ms;
  283. }
  284. .ng-aside.horizontal.left .modal-dialog {
  285. left: 0;
  286. }
  287. .ng-aside.horizontal.right .modal-dialog {
  288. animation: fadeOutRight 400ms;
  289. -webkit-animation: fadeOutRight 400ms;
  290. -moz-animation: fadeOutRight 400ms;
  291. -o-animation: fadeOutRight 400ms;
  292. -ms-animation: fadeOutRight 400ms;
  293. }
  294. .ng-aside.horizontal.right.in .modal-dialog {
  295. animation: fadeInRight 250ms;
  296. -webkit-animation: fadeInRight 250ms;
  297. }
  298. .ng-aside.horizontal.right .modal-dialog {
  299. right: 0;
  300. }
  301. /* Vertical */
  302. .ng-aside.vertical {
  303. width: 100% !important;
  304. overflow: hidden;
  305. }
  306. .ng-aside.vertical .modal-dialog {
  307. left: 0;
  308. right: 0;
  309. width: 100% !important;
  310. }
  311. .ng-aside.vertical .modal-dialog .modal-content {
  312. max-height: 400px;
  313. }
  314. .ng-aside.vertical.top .modal-dialog {
  315. animation: fadeOutUp 250ms;
  316. -webkit-animation: fadeOutUp 250ms;
  317. -webkit-animation: fadeOutUp 250ms;
  318. -moz-animation: fadeOutUp 250ms;
  319. -o-animation: fadeOutUp 250ms;
  320. -ms-animation: fadeOutUp 250ms;
  321. }
  322. .ng-aside.vertical.top.in .modal-dialog {
  323. animation: fadeInTop 250ms;
  324. -webkit-animation: fadeInTop 250ms;
  325. -webkit-animation: fadeInTop 250ms;
  326. -moz-animation: fadeInTop 250ms;
  327. -o-animation: fadeInTop 250ms;
  328. -ms-animation: fadeInTop 250ms;
  329. }
  330. .ng-aside.vertical.bottom .modal-dialog {
  331. animation: fadeOutDown 250ms;
  332. -webkit-animation: fadeOutDown 250ms;
  333. -webkit-animation: fadeOutDown 250ms;
  334. -moz-animation: fadeOutDown 250ms;
  335. -o-animation: fadeOutDown 250ms;
  336. -ms-animation: fadeOutDown 250ms;
  337. }
  338. .ng-aside.vertical.bottom.in .modal-dialog {
  339. animation: fadeInBottom 250ms;
  340. -webkit-animation: fadeInBottom 250ms;
  341. -webkit-animation: fadeInBottom 250ms;
  342. -moz-animation: fadeInBottom 250ms;
  343. -o-animation: fadeInBottom 250ms;
  344. -ms-animation: fadeInBottom 250ms;
  345. }
  346. .ng-aside.vertical.bottom .modal-dialog {
  347. bottom: 0;
  348. }
  349. .ng-aside.vertical.top .modal-dialog {
  350. top: 0;
  351. }
  352. .ng-aside.vertical .modal-dialog .modal-content {
  353. width: 100%;
  354. }