PageRenderTime 49ms CodeModel.GetById 20ms RepoModel.GetById 0ms app.codeStats 0ms

/ajax/libs/jQuery.mmenu/4.5.6/css/jquery.mmenu.oncanvas.css

https://gitlab.com/Mirros/cdnjs
CSS | 213 lines | 200 code | 10 blank | 3 comment | 0 complexity | cf78d47becde475df280d50acb412968 MD5 | raw file
  1. /*
  2. jQuery.mmenu panels CSS
  3. */
  4. .mm-menu.mm-horizontal > .mm-panel {
  5. -webkit-transition: -webkit-transform 0.4s ease;
  6. transition: transform 0.4s ease; }
  7. .mm-menu .mm-hidden {
  8. display: none; }
  9. .mm-wrapper {
  10. overflow-x: hidden;
  11. position: relative; }
  12. .mm-menu,
  13. .mm-menu > .mm-panel {
  14. width: 100%;
  15. height: 100%;
  16. position: absolute;
  17. left: 0;
  18. top: 0;
  19. z-index: 0; }
  20. .mm-menu {
  21. background: inherit;
  22. display: block;
  23. overflow: hidden;
  24. padding: 0; }
  25. .mm-menu > .mm-panel {
  26. background: inherit;
  27. -webkit-overflow-scrolling: touch;
  28. overflow: scroll;
  29. overflow-x: hidden;
  30. overflow-y: auto;
  31. box-sizing: border-box;
  32. padding: 20px;
  33. -webkit-transform: translateX(100%);
  34. transform: translateX(100%); }
  35. .mm-menu > .mm-panel.mm-opened {
  36. -webkit-transform: translateX(0%);
  37. transform: translateX(0%); }
  38. .mm-menu > .mm-panel.mm-subopened {
  39. -webkit-transform: translateX(-30%);
  40. transform: translateX(-30%); }
  41. .mm-menu > .mm-panel.mm-highest {
  42. z-index: 1; }
  43. .mm-menu .mm-list {
  44. padding: 20px 0; }
  45. .mm-menu > .mm-list {
  46. padding-bottom: 0; }
  47. .mm-menu > .mm-list:after {
  48. content: '';
  49. display: block;
  50. height: 40px; }
  51. .mm-panel > .mm-list {
  52. margin-left: -20px;
  53. margin-right: -20px; }
  54. .mm-panel > .mm-list:first-child {
  55. padding-top: 0; }
  56. .mm-list,
  57. .mm-list > li {
  58. list-style: none;
  59. display: block;
  60. padding: 0;
  61. margin: 0; }
  62. .mm-list {
  63. font: inherit;
  64. font-size: 14px; }
  65. .mm-list a,
  66. .mm-list a:hover {
  67. text-decoration: none; }
  68. .mm-list > li {
  69. position: relative; }
  70. .mm-list > li > a,
  71. .mm-list > li > span {
  72. text-overflow: ellipsis;
  73. white-space: nowrap;
  74. overflow: hidden;
  75. color: inherit;
  76. line-height: 20px;
  77. display: block;
  78. padding: 10px 10px 10px 20px;
  79. margin: 0; }
  80. .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {
  81. content: '';
  82. border-bottom-width: 1px;
  83. border-bottom-style: solid;
  84. display: block;
  85. width: 100%;
  86. position: absolute;
  87. bottom: 0;
  88. left: 0; }
  89. .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {
  90. width: auto;
  91. margin-left: 20px;
  92. position: relative;
  93. left: auto; }
  94. .mm-list a.mm-subopen {
  95. background: rgba(3, 2, 1, 0);
  96. width: 40px;
  97. height: 100%;
  98. padding: 0;
  99. position: absolute;
  100. right: 0;
  101. top: 0;
  102. z-index: 2; }
  103. .mm-list a.mm-subopen:before {
  104. content: '';
  105. border-left-width: 1px;
  106. border-left-style: solid;
  107. display: block;
  108. height: 100%;
  109. position: absolute;
  110. left: 0;
  111. top: 0; }
  112. .mm-list a.mm-subopen.mm-fullsubopen {
  113. width: 100%; }
  114. .mm-list a.mm-subopen.mm-fullsubopen:before {
  115. border-left: none; }
  116. .mm-list a.mm-subopen + a,
  117. .mm-list a.mm-subopen + span {
  118. padding-right: 5px;
  119. margin-right: 40px; }
  120. .mm-list > li.mm-selected > a.mm-subopen {
  121. background: transparent; }
  122. .mm-list > li.mm-selected > a.mm-fullsubopen + a,
  123. .mm-list > li.mm-selected > a.mm-fullsubopen + span {
  124. padding-right: 45px;
  125. margin-right: 0; }
  126. .mm-list a.mm-subclose {
  127. text-indent: 20px;
  128. padding-top: 30px;
  129. margin-top: -20px; }
  130. .mm-list > li.mm-label {
  131. text-overflow: ellipsis;
  132. white-space: nowrap;
  133. overflow: hidden;
  134. font-size: 10px;
  135. text-transform: uppercase;
  136. text-indent: 20px;
  137. line-height: 25px;
  138. padding-right: 5px; }
  139. .mm-list > li.mm-spacer {
  140. padding-top: 40px; }
  141. .mm-list > li.mm-spacer.mm-label {
  142. padding-top: 25px; }
  143. .mm-list a.mm-subopen:after,
  144. .mm-list a.mm-subclose:before {
  145. content: '';
  146. border: 2px solid transparent;
  147. display: inline-block;
  148. width: 7px;
  149. height: 7px;
  150. -webkit-transform: rotate(-45deg);
  151. transform: rotate(-45deg);
  152. margin-bottom: -5px;
  153. position: absolute;
  154. bottom: 50%; }
  155. .mm-list a.mm-subopen:after {
  156. border-top: none;
  157. border-left: none;
  158. right: 18px; }
  159. .mm-list a.mm-subclose:before {
  160. border-right: none;
  161. border-bottom: none;
  162. margin-bottom: -15px;
  163. left: 22px; }
  164. .mm-menu.mm-vertical .mm-list .mm-panel {
  165. display: none;
  166. padding: 10px 0 10px 10px; }
  167. .mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after {
  168. border-color: transparent; }
  169. .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
  170. display: block; }
  171. .mm-menu.mm-vertical .mm-list > li > a.mm-subopen {
  172. height: 40px; }
  173. .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after {
  174. top: 16px;
  175. right: 16px;
  176. bottom: auto; }
  177. .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after {
  178. -webkit-transform: rotate(45deg);
  179. transform: rotate(45deg); }
  180. .mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen {
  181. height: 25px; }
  182. html.mm-opened .mm-page {
  183. box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
  184. .mm-menu {
  185. background: #333333;
  186. color: rgba(255, 255, 255, 0.6); }
  187. .mm-menu .mm-list > li:after {
  188. border-color: rgba(0, 0, 0, 0.15); }
  189. .mm-menu .mm-list > li > a.mm-subclose {
  190. background: rgba(0, 0, 0, 0.1);
  191. color: rgba(255, 255, 255, 0.3); }
  192. .mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before {
  193. border-color: rgba(255, 255, 255, 0.3); }
  194. .mm-menu .mm-list > li > a.mm-subopen:before {
  195. border-color: rgba(0, 0, 0, 0.15); }
  196. .mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen),
  197. .mm-menu .mm-list > li.mm-selected > span {
  198. background: rgba(0, 0, 0, 0.1); }
  199. .mm-menu .mm-list > li.mm-label {
  200. background: rgba(255, 255, 255, 0.05); }
  201. .mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen,
  202. .mm-menu.mm-vertical .mm-list li.mm-opened > ul {
  203. background: rgba(255, 255, 255, 0.05); }