Advertisement
Guest User

Untitled

a guest
Jul 23rd, 2017
51
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.74 KB | None | 0 0
  1. .navContainer,
  2. .contentWrapper,
  3. .navContainer2L,
  4. .iconBar,
  5. .iconBar:after,
  6. .iconBar:before,
  7. .resMenuIcon,
  8. .resNav_wrapper{
  9. -webkit-transition: all 0.3s ease-in-out 0s;
  10. -moz-transition: all 0.3s ease-in-out 0s;
  11. -ms-transition: all 0.3s ease-in-out 0s;
  12. -o-transition: all 0.3s ease-in-out 0s;
  13. transition: all 0.3s ease-in-out 0s;
  14. }
  15.  
  16. .contentWrapper.level1{
  17. -webkit-transform: translateX(-300px);
  18. -moz-transform: translateX(-300px);
  19. -ms-transform: translateX(-300px);
  20. -o-transform: translateX(-300px);
  21. transform: translateX(-300px);
  22. }
  23.  
  24. .contentWrapper.level2{
  25. -webkit-transform: translateX(-340px);
  26. -moz-transform: translateX(-340px);
  27. -ms-transform: translateX(-340px);
  28. -o-transform: translateX(-340px);
  29. transform: translateX(-340px);
  30. }
  31.  
  32. .contentWrapper.level3{
  33. -webkit-transform: translateX(-380px);
  34. -moz-transform: translateX(-380px);
  35. -ms-transform: translateX(-380px);
  36. -o-transform: translateX(-380px);
  37. transform: translateX(-380px);
  38. }
  39.  
  40. .resNav_wrapper{
  41. width: 300px;
  42. height: 100%;
  43. background: #A21216;
  44. position: fixed;
  45. right: 0;
  46. top: 0;
  47. z-index: 9999;
  48. padding: 30px 0;
  49. -webkit-transform: translateX(100%);
  50. -moz-transform: translateX(100%);
  51. -ms-transform: translateX(100%);
  52. -o-transform: translateX(100%);
  53. transform: translateX(100%);
  54. }
  55. .contentWrapper.level2 .resNav_wrapper{
  56. width: 340px;
  57. }
  58. .contentWrapper.level3 .resNav_wrapper{
  59. width: 380px;
  60. }
  61.  
  62. .navContainer{
  63. display: block;
  64. background: #A21216;
  65. position: absolute;
  66. height: 100%;
  67. top: 0;
  68. right: 0;
  69. bottom: 0;
  70. width: 300px;
  71. -webkit-transform: translateX(100%);
  72. -moz-transform: translateX(100%);
  73. -ms-transform: translateX(100%);
  74. -o-transform: translateX(100%);
  75. transform: translateX(100%);
  76. }
  77.  
  78. .contentWrapper.level1 .navContainer.depth1{
  79. width: 300px;
  80. -webkit-transform: translateX(0);
  81. -moz-transform: translateX(0);
  82. -ms-transform: translateX(0);
  83. -o-transform: translateX(0);
  84. transform: translateX(0);
  85. }
  86.  
  87. .contentWrapper.level2 .navContainer.depth1{
  88. background: #6b0616;
  89. width: 340px;
  90. -webkit-transform: translateX(0);
  91. -moz-transform: translateX(0);
  92. -ms-transform: translateX(0);
  93. -o-transform: translateX(0);
  94. transform: translateX(0);
  95. }
  96. .contentWrapper.level3 .navContainer.depth1{
  97. background: #6b0616;
  98. width: 380px;
  99. -webkit-transform: translateX(0);
  100. -moz-transform: translateX(0);
  101. -ms-transform: translateX(0);
  102. -o-transform: translateX(0);
  103. transform: translateX(0);
  104. }
  105.  
  106. .contentWrapper.level3 .navContainer.depth2 .menuTitle,
  107. .contentWrapper.level3 .navContainer.depth2 .menuBack,
  108. .contentWrapper.level3 .navContainer.depth2 > ul,
  109. .contentWrapper.level2 .navContainer.depth1 > ul{
  110. display: none;
  111. }
  112. .contentWrapper.level3 .navContainer.depth2:before,
  113. .contentWrapper.level2 .navContainer.depth1:before{
  114. content: "1";
  115. position: absolute;
  116. top: 10px;
  117. left: 0;
  118. text-align: center;
  119. width: 40px;
  120. color: rgba(255, 255, 255, 0.5);
  121. font-size: 40px;
  122. }
  123. .contentWrapper.level3 .navContainer.depth2:before{
  124. content: "2";
  125. }
  126.  
  127. .navContainer.depth2{
  128. border-left: 1px solid rgba(0, 0, 0, 0.2);
  129. }
  130.  
  131. .contentWrapper.level2 .navContainer.depth2{
  132. background: #A21216;
  133. width: 300px;
  134. -webkit-transform: translateX(0px);
  135. -moz-transform: translateX(0px);
  136. -ms-transform: translateX(0px);
  137. -o-transform: translateX(0px);
  138. transform: translateX(0px);
  139. }
  140. .contentWrapper.level3 .navContainer.depth2{
  141. background: #6b0616;
  142. width: 340px;
  143. -webkit-transform: translateX(0px);
  144. -moz-transform: translateX(0px);
  145. -ms-transform: translateX(0px);
  146. -o-transform: translateX(0px);
  147. transform: translateX(0px);
  148. }
  149.  
  150. .navContainer.depth3{
  151. border-left: 1px solid rgba(0, 0, 0, 0.2);
  152. }
  153.  
  154. .contentWrapper.level3 .navContainer.depth3{
  155. width: 300px;
  156. -webkit-transform: translateX(0px);
  157. -moz-transform: translateX(0px);
  158. -ms-transform: translateX(0px);
  159. -o-transform: translateX(0px);
  160. transform: translateX(0px);
  161. }
  162.  
  163. .resMenuIcon{
  164. height: 50px;
  165. width: 50px;
  166. display: block;
  167. background: #A21216;
  168. color: #fff;
  169. padding: 10px;
  170. position: absolute;
  171. top: 50px;
  172. left: -70px;
  173. z-index: 10;
  174. margin: 0;
  175. cursor: pointer;
  176. }
  177.  
  178. .logged-in .resMenuIcon,
  179. .admin-bar .resMenuIcon{
  180. top: 82px;
  181. }
  182. .resOpen .resMenuIcon{
  183. left: -50px;
  184. }
  185. .resMenuIcon .iconBar:after,
  186. .resMenuIcon .iconBar:before{
  187. content: " ";
  188. width: 30px;
  189. height: 2px;
  190. display: block;
  191. background: #fff;
  192. position: absolute;
  193. top: -8px;
  194. }
  195. .resMenuIcon .iconBar:after{
  196. top: 8px;
  197. }
  198. .resMenuIcon .iconBar{
  199. position: relative;
  200. width: 30px;
  201. height: 2px;
  202. display: block;
  203. background: #fff;
  204. margin-top: 0;
  205. }
  206.  
  207. .menuIconClose.resMenuIcon .iconBar{
  208. background: none;
  209. }
  210. .menuIconClose.resMenuIcon .iconBar:after{
  211. -webkit-transform: rotate(-45deg);
  212. -moz-transform: rotate(-45deg);
  213. -ms-transform: rotate(-45deg);
  214. -o-transform: rotate(-45deg);
  215. transform: rotate(-45deg);
  216. left: 0;
  217. top: 0;
  218. }
  219. .menuIconClose.resMenuIcon .iconBar:before{
  220. -webkit-transform: rotate(45deg);
  221. -moz-transform: rotate(45deg);
  222. -ms-transform: rotate(45deg);
  223. -o-transform: rotate(45deg);
  224. transform: rotate(45deg);
  225. right: 0;
  226. top: 0;
  227. }
  228.  
  229. .navContainer ul{
  230. padding: 0;
  231. margin: 0;
  232. list-style: none;
  233. }
  234. .navContainer ul li{
  235. display: block;
  236. position: relative;
  237. -webkit-transition: all 0.5s ease-in-out 0s;
  238. -moz-transition: all 0.5s ease-in-out 0s;
  239. -ms-transition: all 0.5s ease-in-out 0s;
  240. -o-transition: all 0.5s ease-in-out 0s;
  241. transition: all 0.5s ease-in-out 0s;
  242. }
  243.  
  244. .navContainer ul li .subMenu a,
  245. .navContainer ul li a{
  246. display: block;
  247. color: #fff;
  248. font-size: 20px;
  249. line-height: 1;
  250. text-transform: capitalize;
  251. padding: 20px 30px 20px 50px;
  252. box-shadow: inset 0 -2px rgba(0,0,0,0.15);
  253. }
  254. .navContainer ul li .subMenu a{
  255. font-size: 18px;
  256. }
  257. .navContainer ul li a:hover{
  258. background: rgba(0, 0, 0, 0.1);
  259. }
  260.  
  261. .subMenu{
  262. display: none;
  263. }
  264.  
  265. .subMenuArrow{
  266. font-family: 'FontAwesome';
  267. font-size: 24px;
  268. line-height: 1;
  269. color: #fff;
  270. position: absolute;
  271. right: 20px;
  272. top: 16px;
  273. cursor: pointer;
  274. height: 26px;
  275. width: 26px;
  276. cursor: pointer;
  277. z-index: 1;
  278. text-align: center;
  279. }
  280. .subMenuArrow:before{
  281. content: "\f105";
  282. font-family: 'FontAwesome';
  283. line-height: 1;
  284. color: #fff;
  285. }
  286.  
  287. .menuTitle{
  288. display: inline-block;
  289. width: 100%;
  290. color: #fff;
  291. font-size: 24px;
  292. line-height: 1;
  293. text-transform: uppercase;
  294. padding: 20px 30px 20px 50px;
  295. box-shadow: inset 0 -2px rgba(0,0,0,0.15);
  296. }
  297.  
  298. .menuBack{
  299. position: relative;
  300. display: inline-block;
  301. width: 100%;
  302. text-align: left;
  303. color: #fff;
  304. font-size: 18px;
  305. line-height: 1;
  306. padding: 20px 30px 20px 50px;
  307. box-shadow: inset 0 -2px rgba(0,0,0,0.15);
  308. text-transform: uppercase;
  309. cursor: pointer;
  310. }
  311. .menuBack:before{
  312. font-size: 24px;
  313. line-height: 1;
  314. color: #fff;
  315. position: absolute;
  316. left: 30px;
  317. top: 16px;
  318. cursor: pointer;
  319. content: "\f104";
  320. font-family: 'FontAwesome';
  321. color: #fff;
  322. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement