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.

110 lines
3.9 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  6. */
  7. md-sidenav {
  8. box-sizing: border-box;
  9. position: absolute;
  10. -webkit-box-orient: vertical;
  11. -webkit-box-direction: normal;
  12. -webkit-flex-direction: column;
  13. flex-direction: column;
  14. z-index: 60;
  15. width: 320px;
  16. max-width: 320px;
  17. bottom: 0;
  18. overflow: auto;
  19. -webkit-overflow-scrolling: touch; }
  20. md-sidenav ul {
  21. list-style: none; }
  22. md-sidenav.md-closed {
  23. display: none; }
  24. md-sidenav.md-closed-add, md-sidenav.md-closed-remove {
  25. display: -webkit-box;
  26. display: -webkit-flex;
  27. display: flex;
  28. -webkit-transition: 0.2s ease-in all;
  29. transition: 0.2s ease-in all; }
  30. md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active {
  31. -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  32. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  33. md-sidenav.md-locked-open-add, md-sidenav.md-locked-open-remove {
  34. position: static;
  35. display: -webkit-box;
  36. display: -webkit-flex;
  37. display: flex;
  38. -webkit-transform: translate3d(0, 0, 0);
  39. transform: translate3d(0, 0, 0); }
  40. md-sidenav.md-locked-open, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-left, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-right {
  41. position: static;
  42. display: -webkit-box;
  43. display: -webkit-flex;
  44. display: flex;
  45. -webkit-transform: translate3d(0, 0, 0);
  46. transform: translate3d(0, 0, 0); }
  47. md-sidenav.md-locked-open-remove.md-closed {
  48. position: static;
  49. display: -webkit-box;
  50. display: -webkit-flex;
  51. display: flex;
  52. -webkit-transform: translate3d(0, 0, 0);
  53. transform: translate3d(0, 0, 0); }
  54. md-sidenav.md-closed.md-locked-open-add {
  55. position: static;
  56. display: -webkit-box;
  57. display: -webkit-flex;
  58. display: flex;
  59. -webkit-transform: translate3d(0%, 0, 0);
  60. transform: translate3d(0%, 0, 0); }
  61. md-sidenav.md-closed.md-locked-open-add:not(.md-locked-open-add-active) {
  62. -webkit-transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  63. transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  64. width: 0 !important;
  65. min-width: 0 !important; }
  66. md-sidenav.md-closed.md-locked-open-add-active {
  67. -webkit-transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  68. transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  69. md-sidenav.md-locked-open-remove-active {
  70. -webkit-transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  71. transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  72. width: 0 !important;
  73. min-width: 0 !important; }
  74. .md-sidenav-backdrop.md-locked-open {
  75. display: none; }
  76. .md-sidenav-left, md-sidenav {
  77. left: 0;
  78. top: 0;
  79. -webkit-transform: translate3d(0%, 0, 0);
  80. transform: translate3d(0%, 0, 0); }
  81. .md-sidenav-left.md-closed, md-sidenav.md-closed {
  82. -webkit-transform: translate3d(-100%, 0, 0);
  83. transform: translate3d(-100%, 0, 0); }
  84. .md-sidenav-right {
  85. left: 100%;
  86. top: 0;
  87. -webkit-transform: translate(-100%, 0);
  88. transform: translate(-100%, 0); }
  89. .md-sidenav-right.md-closed {
  90. -webkit-transform: translate(0%, 0);
  91. transform: translate(0%, 0); }
  92. @media (min-width: 600px) {
  93. md-sidenav {
  94. max-width: 400px; } }
  95. @media (max-width: 456px) {
  96. md-sidenav {
  97. width: calc(100% - 56px);
  98. min-width: calc(100% - 56px);
  99. max-width: calc(100% - 56px); } }
  100. @media screen and (-ms-high-contrast: active) {
  101. .md-sidenav-left, md-sidenav {
  102. border-right: 1px solid #fff; }
  103. .md-sidenav-right {
  104. border-left: 1px solid #fff; } }