megamenu.scss 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097
  1. // ------------------------- DO NOT EDIT THIS FILE ----------------------------
  2. // ****** This file will be overwritten each time the plugin is updated *******
  3. //
  4. // This file is a major component of Max Mega Menu. The styling below works in
  5. // perfect harmony with the current version of the plugin. The menu HTML
  6. // will change as features are added to the plugin. Likewise, this CSS will be
  7. // updated as new features are added to Max Mega Menu.
  8. //
  9. // If you need to apply custom styling to your menu go to Mega Menu > Menu Themes
  10. // and enter your custom CSS into the Custom Styling area. Use the same (or more
  11. // specific) selectors to ensure your custom CSS overrides the default CSS.
  12. #{$wrap},
  13. #{$wrap} #{$menu},
  14. #{$wrap} #{$menu} ul.mega-sub-menu,
  15. #{$wrap} #{$menu} li.mega-menu-item,
  16. #{$wrap} #{$menu} li.mega-menu-row,
  17. #{$wrap} #{$menu} li.mega-menu-column,
  18. #{$wrap} #{$menu} a.mega-menu-link {
  19. -moz-transition: none;
  20. -o-transition: none;
  21. -webkit-transition: none;
  22. transition: none;
  23. @include border-radius(0, 0, 0, 0);
  24. @include box-shadow(none);
  25. background: none;
  26. border: 0;
  27. bottom: auto;
  28. box-sizing: border-box;
  29. clip: auto;
  30. color: $panel_font_color;
  31. display: block;
  32. float: none;
  33. font-family: $panel_font_family;
  34. font-size: $panel_font_size;
  35. height: auto;
  36. left: auto;
  37. line-height: $line_height;
  38. list-style-type: none;
  39. margin: 0;
  40. min-height: auto;
  41. max-height: none;
  42. opacity: 1;
  43. outline: none;
  44. overflow: visible;
  45. padding: 0;
  46. position: relative;
  47. pointer-events: auto;
  48. right: auto;
  49. text-align: left;
  50. text-decoration: none;
  51. text-transform: none;
  52. transform: none;
  53. top: auto;
  54. vertical-align: baseline;
  55. visibility: inherit;
  56. width: auto;
  57. word-wrap: break-word;
  58. &:before,
  59. &:after {
  60. display: none;
  61. }
  62. }
  63. #{$wrap} {
  64. @include background($container_background_from, $container_background_to);
  65. @include border-radius($container_border_radius_top_left, $container_border_radius_top_right, $container_border_radius_bottom_right, $container_border_radius_bottom_left);
  66. &.mega-keyboard-navigation .mega-menu-toggle:focus,
  67. &.mega-keyboard-navigation #{$menu} a:focus,
  68. &.mega-keyboard-navigation #{$menu} input:focus {
  69. @include box-shadow(inset 0px 0px 3px 1px #00FFFF);
  70. }
  71. #{$menu} {
  72. visibility: visible;
  73. text-align: $menu_item_align;
  74. padding: $container_padding_top $container_padding_right $container_padding_bottom $container_padding_left;
  75. @if $container_background_from != $mobile_background_from {
  76. @include mobile {
  77. @include background($mobile_background_from, $mobile_background_to);
  78. }
  79. }
  80. @include mobile {
  81. padding: 0;
  82. }
  83. a.mega-menu-link {
  84. cursor: pointer;
  85. display: inline;
  86. @if $transitions == 'on' {
  87. -webkit-transition: background 200ms linear, color 200ms linear;
  88. -moz-transition: background 200ms linear, color 200ms linear;
  89. -o-transition: background 200ms linear, color 200ms linear;
  90. transition: background 200ms linear, color 200ms linear;
  91. }
  92. .mega-description-group {
  93. vertical-align: middle;
  94. display: inline-block;
  95. transition: none;
  96. .mega-menu-title,
  97. .mega-menu-description {
  98. transition: none;
  99. line-height: 1.5;
  100. display: block;
  101. }
  102. .mega-menu-description {
  103. font-style: italic;
  104. font-size: 0.8em;
  105. text-transform: none;
  106. font-weight: normal;
  107. }
  108. }
  109. }
  110. li.mega-menu-item.mega-icon-top > a.mega-menu-link {
  111. display: table-cell;
  112. vertical-align: middle;
  113. line-height: initial;
  114. &:before {
  115. display: block;
  116. margin: 0 0 6px 0;
  117. text-align: center;
  118. }
  119. > span.mega-title-below {
  120. display: inline-block;
  121. transition: none;
  122. }
  123. }
  124. @include mobile {
  125. > li.mega-menu-item.mega-icon-top > a.mega-menu-link {
  126. display: block;
  127. line-height: $mobile_menu_item_height;
  128. &:before {
  129. display: inline-block;
  130. margin: 0 6px 0 0;
  131. text-align: left;
  132. }
  133. }
  134. }
  135. li.mega-menu-item.mega-icon-right > a.mega-menu-link {
  136. &:before {
  137. float: right;
  138. margin: 0 0 0 6px;
  139. }
  140. }
  141. > li.mega-animating > ul.mega-sub-menu {
  142. pointer-events: none;
  143. }
  144. li.mega-disable-link > a.mega-menu-link,
  145. li.mega-menu-megamenu li.mega-disable-link > a.mega-menu-link {
  146. cursor: default;
  147. }
  148. li.mega-menu-item-has-children.mega-disable-link > a.mega-menu-link {
  149. cursor: pointer;
  150. }
  151. p {
  152. margin-bottom: 10px;
  153. }
  154. input,
  155. img {
  156. max-width: 100%;
  157. }
  158. li.mega-menu-item > ul.mega-sub-menu {
  159. display: block;
  160. visibility: hidden;
  161. opacity: 1;
  162. pointer-events: auto;
  163. }
  164. @include desktop {
  165. &[data-effect="fade"] {
  166. li.mega-menu-item > ul.mega-sub-menu {
  167. opacity: 0;
  168. transition-duration: $effect_speed;
  169. transition-timing-function: ease-in;
  170. transition-property: opacity, visibility;
  171. }
  172. &.mega-no-js li.mega-menu-item:hover > ul.mega-sub-menu,
  173. &.mega-no-js li.mega-menu-item:focus > ul.mega-sub-menu,
  174. li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
  175. li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
  176. opacity: 1;
  177. }
  178. }
  179. &[data-effect="fade_up"] {
  180. li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu,
  181. li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
  182. opacity: 0;
  183. margin-top: 10px;
  184. transition-duration: $effect_speed;
  185. transition-timing-function: ease-in;
  186. transition-property: opacity, margin-top, visibility;
  187. }
  188. &.mega-no-js li.mega-menu-item:hover > ul.mega-sub-menu,
  189. &.mega-no-js li.mega-menu-item:focus > ul.mega-sub-menu,
  190. li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
  191. li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
  192. opacity: 1;
  193. margin-top: 0;
  194. }
  195. }
  196. &[data-effect="slide_up"] {
  197. li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu,
  198. li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
  199. margin-top: 10px;
  200. transition-duration: $effect_speed;
  201. transition-timing-function: ease-in;
  202. transition-property: margin-top, visibility;
  203. }
  204. &.mega-no-js li.mega-menu-item:hover > ul.mega-sub-menu,
  205. &.mega-no-js li.mega-menu-item:focus > ul.mega-sub-menu,
  206. li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
  207. li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
  208. margin-top: 0;
  209. }
  210. }
  211. }
  212. &.mega-no-js li.mega-menu-item:hover > ul.mega-sub-menu,
  213. &.mega-no-js li.mega-menu-item:focus > ul.mega-sub-menu,
  214. li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
  215. visibility: visible;
  216. }
  217. li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
  218. visibility: inherit;
  219. opacity: 1;
  220. }
  221. li.mega-menu-item a[class^='dashicons']:before {
  222. font-family: dashicons;
  223. }
  224. li.mega-menu-item a.mega-menu-link:before {
  225. display: inline-block;
  226. font: inherit;
  227. font-family: dashicons;
  228. position: static;
  229. margin: 0 6px 0 0px;
  230. vertical-align: top;
  231. -webkit-font-smoothing: antialiased;
  232. -moz-osx-font-smoothing: grayscale;
  233. color: inherit;
  234. background: transparent;
  235. height: auto;
  236. width: auto;
  237. top: auto;
  238. }
  239. li.mega-menu-item.mega-hide-text a.mega-menu-link:before {
  240. margin: 0;
  241. }
  242. li.mega-menu-item.mega-hide-text li.mega-menu-item a.mega-menu-link:before {
  243. margin: 0 6px 0 0;
  244. }
  245. li.mega-align-bottom-left {
  246. > ul.mega-sub-menu {
  247. }
  248. &.mega-toggle-on > a.mega-menu-link {
  249. @include border-radius($menu_item_link_border_radius_top_left, $menu_item_link_border_radius_top_right, 0, 0);
  250. }
  251. }
  252. li.mega-align-bottom-right {
  253. > ul.mega-sub-menu {
  254. right: 0;
  255. }
  256. &.mega-toggle-on > a.mega-menu-link {
  257. @include border-radius($menu_item_link_border_radius_top_left, $menu_item_link_border_radius_top_right, 0, 0);
  258. }
  259. }
  260. @if unit($panel_width) == '%' {
  261. > li.mega-menu-megamenu.mega-menu-item {
  262. position: static;
  263. }
  264. }
  265. // top level items
  266. > li.mega-menu-item {
  267. margin: 0 $menu_item_spacing 0 0;
  268. display: inline-block;
  269. height: auto;
  270. vertical-align: middle;
  271. @if $menu_item_divider == 'on' {
  272. @include desktop {
  273. border-left: 1px solid $menu_item_divider_color;
  274. @include box-shadow(inset 1px 0 0 0 rgba(255,255,255,$menu_item_divider_glow_opacity));
  275. /* Hide divider on first menu item */
  276. &:first-of-type {
  277. border-left: 0;
  278. @include box-shadow(none);
  279. }
  280. }
  281. }
  282. &.mega-item-align-right {
  283. float: right;
  284. @include desktop {
  285. margin: 0 0 0 $menu_item_spacing;
  286. }
  287. }
  288. &.mega-item-align-float-left {
  289. @include desktop {
  290. float: left;
  291. }
  292. }
  293. &.mega-toggle-on > a.mega-menu-link,
  294. > a.mega-menu-link:hover,
  295. > a.mega-menu-link:focus {
  296. @include background($menu_item_background_hover_from, $menu_item_background_hover_to);
  297. color: $menu_item_link_color_hover;
  298. font-weight: $menu_item_link_weight_hover;
  299. text-decoration: $menu_item_link_text_decoration_hover;
  300. border-color: $menu_item_border_color_hover;
  301. @include mobile {
  302. color: $mobile_menu_item_link_color_hover;
  303. @include background($mobile_menu_item_background_hover_from, $mobile_menu_item_background_hover_to);
  304. }
  305. }
  306. @if $menu_item_highlight_current == 'on' {
  307. &.mega-current-menu-item,
  308. &.mega-current-menu-ancestor,
  309. &.mega-current-page-ancestor {
  310. > a.mega-menu-link {
  311. @include background($menu_item_background_hover_from, $menu_item_background_hover_to);
  312. color: $menu_item_link_color_hover;
  313. font-weight: $menu_item_link_weight_hover;
  314. text-decoration: $menu_item_link_text_decoration_hover;
  315. border-color: $menu_item_border_color_hover;
  316. @include mobile {
  317. color: $mobile_menu_item_link_color_hover;
  318. @include background($mobile_menu_item_background_hover_from, $mobile_menu_item_background_hover_to);
  319. }
  320. }
  321. }
  322. }
  323. > a.mega-menu-link {
  324. border-top: $menu_item_border_top solid $menu_item_border_color;
  325. border-left: $menu_item_border_left solid $menu_item_border_color;
  326. border-right: $menu_item_border_right solid $menu_item_border_color;
  327. border-bottom: $menu_item_border_bottom solid $menu_item_border_color;
  328. outline: none;
  329. text-decoration: none;
  330. padding: $menu_item_link_padding_top $menu_item_link_padding_right $menu_item_link_padding_bottom $menu_item_link_padding_left;
  331. line-height: $menu_item_link_height;
  332. font-weight: $menu_item_link_weight;
  333. height: $menu_item_link_height;
  334. vertical-align: baseline;
  335. text-align: $menu_item_link_text_align;
  336. width: auto;
  337. display: block;
  338. color: $menu_item_link_color;
  339. text-transform: $menu_item_link_text_transform;
  340. text-decoration: $menu_item_link_text_decoration;
  341. @include background($menu_item_background_from, $menu_item_background_to);
  342. @include border-radius($menu_item_link_border_radius_top_left, $menu_item_link_border_radius_top_right, $menu_item_link_border_radius_bottom_right, $menu_item_link_border_radius_bottom_left);
  343. font-family: $menu_item_link_font;
  344. font-size: $menu_item_link_font_size;
  345. }
  346. // support for multi line links
  347. &.mega-multi-line > a.mega-menu-link {
  348. @include desktop {
  349. line-height: inherit;
  350. display: table-cell;
  351. vertical-align: middle;
  352. }
  353. @include mobile {
  354. br {
  355. display: none;
  356. }
  357. }
  358. }
  359. @include mobile {
  360. display: list-item;
  361. margin: 0;
  362. clear: both;
  363. border: 0;
  364. &.mega-item-align-right {
  365. float: none;
  366. }
  367. > a.mega-menu-link {
  368. @include border-radius(0);
  369. border: 0;
  370. margin: 0;
  371. line-height: $mobile_menu_item_height;
  372. height: $mobile_menu_item_height;
  373. padding: 0 10px;
  374. background: transparent;
  375. text-align: $mobile_menu_item_link_text_align;
  376. color: $mobile_menu_item_link_color;
  377. font-size: $mobile_menu_item_link_font_size;
  378. }
  379. }
  380. }
  381. // sub menu items (grid)
  382. li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
  383. width: 100%;
  384. float: left;
  385. .mega-menu-column {
  386. float: left;
  387. min-height: 1px;
  388. }
  389. @include desktop {
  390. @for $of from 1 through 12 {
  391. @for $cols from 1 through $of {
  392. > ul.mega-sub-menu > li.mega-menu-columns-#{$cols}-of-#{$of} {
  393. width: (100% / $of) * $cols;
  394. }
  395. }
  396. }
  397. }
  398. @include mobile {
  399. @if $mobile_columns == 2 {
  400. > ul.mega-sub-menu > li.mega-menu-column {
  401. width: 50%;
  402. }
  403. > ul.mega-sub-menu > li.mega-menu-column.mega-menu-clear {
  404. clear: left;
  405. }
  406. } @else {
  407. > ul.mega-sub-menu > li.mega-menu-column {
  408. width: 100%;
  409. clear: both;
  410. }
  411. }
  412. }
  413. .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
  414. padding: $panel_widget_padding_top $panel_widget_padding_right $panel_widget_padding_bottom $panel_widget_padding_left;
  415. width: 100%;
  416. }
  417. }
  418. // sub menu items (megamenu)
  419. > li.mega-menu-megamenu > ul.mega-sub-menu {
  420. z-index: $z_index;
  421. @include border-radius($panel_border_radius_top_left, $panel_border_radius_top_right, $panel_border_radius_bottom_right, $panel_border_radius_bottom_left);
  422. @include background($panel_background_from, $panel_background_to);
  423. padding: $panel_padding_top $panel_padding_right $panel_padding_bottom $panel_padding_left;
  424. position: absolute;
  425. width: $panel_width;
  426. border-top: $panel_border_top solid $panel_border_color;
  427. border-left: $panel_border_left solid $panel_border_color;
  428. border-right: $panel_border_right solid $panel_border_color;
  429. border-bottom: $panel_border_bottom solid $panel_border_color;
  430. max-width: none;
  431. @if unit($panel_width) == '%' {
  432. left: 0;
  433. }
  434. @if unit($panel_inner_width) == '%' and $panel_inner_width < 100% {
  435. padding-left: (100 - $panel_inner_width) / 2;
  436. padding-right: (100 - $panel_inner_width) / 2;
  437. }
  438. @if $shadow == 'on' {
  439. @include box-shadow($shadow_horizontal $shadow_vertical $shadow_blur $shadow_spread $shadow_color);
  440. }
  441. @include mobile {
  442. float: left;
  443. position: static;
  444. width: 100%;
  445. }
  446. @include desktop {
  447. @for $of from 1 through 9 {
  448. @for $cols from 1 through $of {
  449. li.mega-menu-columns-#{$cols}-of-#{$of} {
  450. width: (100% / $of) * $cols;
  451. }
  452. }
  453. }
  454. }
  455. .mega-description-group .mega-menu-description {
  456. margin: 5px 0;
  457. }
  458. > li.mega-menu-item ul.mega-sub-menu {
  459. clear: both;
  460. li.mega-menu-item ul.mega-sub-menu {
  461. margin-left: 10px;
  462. }
  463. }
  464. li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu ul.mega-sub-menu {
  465. margin-left: 10px;
  466. }
  467. > li.mega-menu-item,
  468. li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
  469. color: $panel_font_color;
  470. font-family: $panel_font_family;
  471. font-size: $panel_font_size;
  472. display: block;
  473. float: left;
  474. clear: none;
  475. padding: $panel_widget_padding_top $panel_widget_padding_right $panel_widget_padding_bottom $panel_widget_padding_left;
  476. vertical-align: top;
  477. &.mega-menu-clear {
  478. clear: left;
  479. }
  480. // Widget titles
  481. h4.mega-block-title {
  482. color: $panel_header_color;
  483. font-family: $panel_header_font;
  484. font-size: $panel_header_font_size;
  485. text-transform: $panel_header_text_transform;
  486. text-decoration: $panel_header_text_decoration;
  487. font-weight: $panel_header_font_weight;
  488. margin: $panel_header_margin_top $panel_header_margin_right $panel_header_margin_bottom $panel_header_margin_left;
  489. padding: $panel_header_padding_top $panel_header_padding_right $panel_header_padding_bottom $panel_header_padding_left;
  490. vertical-align: top;
  491. display: block;
  492. visibility: inherit;
  493. border-top: $panel_header_border_top solid $panel_header_border_color;
  494. border-left: $panel_header_border_left solid $panel_header_border_color;
  495. border-right: $panel_header_border_right solid $panel_header_border_color;
  496. border-bottom: $panel_header_border_bottom solid $panel_header_border_color;
  497. }
  498. // Second level menu items
  499. > a.mega-menu-link {
  500. color: $panel_second_level_font_color; /* Mega Menu > Menu Themes > Mega Menus > Second Level Menu Items */
  501. font-family: $panel_second_level_font;
  502. font-size: $panel_second_level_font_size;
  503. text-transform: $panel_second_level_text_transform;
  504. text-decoration: $panel_second_level_text_decoration;
  505. font-weight: $panel_second_level_font_weight;
  506. margin: $panel_second_level_margin_top $panel_second_level_margin_right $panel_second_level_margin_bottom $panel_second_level_margin_left;
  507. padding: $panel_second_level_padding_top $panel_second_level_padding_right $panel_second_level_padding_bottom $panel_second_level_padding_left;
  508. vertical-align: top;
  509. display: block;
  510. border-top: $panel_second_level_border_top solid $panel_second_level_border_color;
  511. border-left: $panel_second_level_border_left solid $panel_second_level_border_color;
  512. border-right: $panel_second_level_border_right solid $panel_second_level_border_color;
  513. border-bottom: $panel_second_level_border_bottom solid $panel_second_level_border_color;
  514. }
  515. > a.mega-menu-link:hover,
  516. > a.mega-menu-link:focus {
  517. color: $panel_second_level_font_color_hover; /* Mega Menu > Menu Themes > Mega Menus > Second Level Menu Items (Hover) */
  518. font-weight: $panel_second_level_font_weight_hover;
  519. text-decoration: $panel_second_level_text_decoration_hover;
  520. @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to);
  521. }
  522. li.mega-menu-item {
  523. > a.mega-menu-link {
  524. color: $panel_third_level_font_color; /* Mega Menu > Menu Themes > Mega Menus > Third Level Menu Items */
  525. font-family: $panel_third_level_font;
  526. font-size: $panel_third_level_font_size;
  527. text-transform: $panel_third_level_text_transform;
  528. text-decoration: $panel_third_level_text_decoration;
  529. font-weight: $panel_third_level_font_weight;
  530. margin: 0;
  531. padding: $panel_third_level_padding_top $panel_third_level_padding_right $panel_third_level_padding_bottom $panel_third_level_padding_left;
  532. vertical-align: top;
  533. display: block;
  534. }
  535. }
  536. // Third level menu items hover
  537. li.mega-menu-item > a.mega-menu-link:hover,
  538. li.mega-menu-item > a.mega-menu-link:focus {
  539. color: $panel_third_level_font_color_hover; /* Mega Menu > Menu Themes > Mega Menus > Third Level Menu Items (Hover) */
  540. font-weight: $panel_third_level_font_weight_hover;
  541. text-decoration: $panel_third_level_text_decoration_hover;
  542. @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to);
  543. }
  544. }
  545. @include mobile {
  546. border: 0;
  547. padding: 10px;
  548. @include border-radius(0,0,0,0);
  549. @if $mobile_columns == 2 {
  550. > li.mega-menu-item {
  551. width: 50%;
  552. }
  553. > li:nth-child(odd) {
  554. clear: left;
  555. }
  556. } @else {
  557. > li.mega-menu-item {
  558. width: 100%;
  559. clear: both;
  560. }
  561. }
  562. }
  563. }
  564. > li.mega-menu-megamenu.mega-no-headers > ul.mega-sub-menu {
  565. > li.mega-menu-item > a.mega-menu-link {
  566. color: $panel_third_level_font_color;
  567. font-family: $panel_third_level_font;
  568. font-size: $panel_third_level_font_size;
  569. text-transform: $panel_third_level_text_transform;
  570. text-decoration: $panel_third_level_text_decoration;
  571. font-weight: $panel_third_level_font_weight;
  572. margin: 0;
  573. border: 0;
  574. padding: $panel_third_level_padding_top $panel_third_level_padding_right $panel_third_level_padding_bottom $panel_third_level_padding_left;
  575. vertical-align: top;
  576. display: block;
  577. }
  578. > li.mega-menu-item > a.mega-menu-link:hover,
  579. > li.mega-menu-item > a.mega-menu-link:focus {
  580. color: $panel_third_level_font_color_hover;
  581. font-weight: $panel_third_level_font_weight_hover;
  582. text-decoration: $panel_third_level_text_decoration_hover;
  583. @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to);
  584. }
  585. }
  586. // Sub menu items (flyout)
  587. > li.mega-menu-flyout ul.mega-sub-menu {
  588. z-index: $z_index;
  589. position: absolute;
  590. width: $flyout_width;
  591. border-top: $flyout_border_top solid $flyout_border_color;
  592. border-left: $flyout_border_left solid $flyout_border_color;
  593. border-right: $flyout_border_right solid $flyout_border_color;
  594. border-bottom: $flyout_border_bottom solid $flyout_border_color;
  595. padding: $flyout_padding_top $flyout_padding_right $flyout_padding_bottom $flyout_padding_left;
  596. @include background($flyout_menu_background_from, $flyout_menu_background_to);
  597. max-width: none;
  598. @if $shadow == 'on' {
  599. @include box-shadow($shadow_horizontal $shadow_vertical $shadow_blur $shadow_spread $shadow_color);
  600. }
  601. @include mobile {
  602. float: left;
  603. position: static;
  604. width: 100%;
  605. padding: 0;
  606. border: 0;
  607. }
  608. li.mega-menu-item {
  609. @if $flyout_width == 'auto' {
  610. @include desktop {
  611. > a.mega-menu-link {
  612. white-space: nowrap;
  613. min-width: 150px;
  614. }
  615. &.mega-has-description {
  616. > a.mega-menu-link {
  617. white-space: normal;
  618. > .mega-description-group > .mega-menu-title {
  619. white-space: nowrap;
  620. }
  621. }
  622. }
  623. }
  624. }
  625. @if $flyout_menu_item_divider == 'on' {
  626. border-bottom: 1px solid $flyout_menu_item_divider_color;
  627. /* Hide divider on last menu item */
  628. &:last-child {
  629. border-bottom: 0;
  630. @include box-shadow(none);
  631. }
  632. }
  633. @include mobile {
  634. clear: both;
  635. }
  636. a.mega-menu-link {
  637. display: block;
  638. @include background($flyout_background_from, $flyout_background_to);
  639. color: $flyout_link_color;
  640. font-family: $flyout_link_family;
  641. font-size: $flyout_link_size;
  642. font-weight: $flyout_link_weight;
  643. padding: $flyout_link_padding_top $flyout_link_padding_right $flyout_link_padding_bottom $flyout_link_padding_left;
  644. line-height: $flyout_link_height;
  645. text-decoration: $flyout_link_text_decoration;
  646. text-transform: $flyout_link_text_transform;
  647. vertical-align: baseline;
  648. }
  649. &:first-child > a.mega-menu-link {
  650. border-top-left-radius: $flyout_border_radius_top_left;
  651. border-top-right-radius: $flyout_border_radius_top_right;
  652. @include mobile {
  653. border-top-left-radius: 0;
  654. border-top-right-radius: 0;
  655. }
  656. }
  657. &:last-child > a.mega-menu-link {
  658. border-bottom-right-radius: $flyout_border_radius_bottom_right;
  659. border-bottom-left-radius: $flyout_border_radius_bottom_left;
  660. @include mobile {
  661. border-bottom-right-radius: 0;
  662. border-bottom-left-radius: 0;
  663. }
  664. }
  665. a.mega-menu-link:hover,
  666. a.mega-menu-link:focus {
  667. @include background($flyout_background_hover_from, $flyout_background_hover_to);
  668. font-weight: $flyout_link_weight_hover;
  669. text-decoration: $flyout_link_text_decoration_hover;
  670. color: $flyout_link_color_hover;
  671. }
  672. ul.mega-sub-menu {
  673. position: absolute;
  674. left: 100%;
  675. top: 0;
  676. }
  677. @include mobile {
  678. ul.mega-sub-menu {
  679. position: static;
  680. left: 0;
  681. width: 100%;
  682. a.mega-menu-link {
  683. padding-left: 20px;
  684. }
  685. }
  686. }
  687. }
  688. }
  689. // Arrows
  690. li.mega-menu-item-has-children {
  691. > a.mega-menu-link:after,
  692. > a.mega-menu-link span.mega-indicator:after {
  693. content: $arrow_down;
  694. display: inline-block;
  695. font-family: dashicons;
  696. margin: 0 0 0 6px;
  697. vertical-align: top;
  698. -webkit-font-smoothing: antialiased;
  699. -moz-osx-font-smoothing: grayscale;
  700. transform: rotate(0);
  701. color: inherit;
  702. position: relative;
  703. background: transparent;
  704. height: auto;
  705. width: auto;
  706. }
  707. > a.mega-menu-link > span.mega-indicator {
  708. display: none;
  709. float: right;
  710. height: auto;
  711. width: auto;
  712. background: transparent;
  713. position: relative;
  714. pointer-events: auto;
  715. &:after {
  716. content: $arrow_up;
  717. }
  718. }
  719. @include mobile {
  720. a.mega-menu-link:after {
  721. float: right;
  722. }
  723. &.mega-toggle-on > a.mega-menu-link {
  724. &:after {
  725. display: none;
  726. }
  727. > span.mega-indicator {
  728. display: inline-block;
  729. }
  730. }
  731. &.mega-hide-sub-menu-on-mobile > a.mega-menu-link:after {
  732. display: none;
  733. }
  734. }
  735. }
  736. // Hide arrows
  737. li.mega-menu-megamenu:not(.mega-menu-tabbed) li.mega-menu-item-has-children > a.mega-menu-link:after,
  738. li.mega-menu-item-has-children.mega-hide-arrow > a.mega-menu-link:after {
  739. display: none;
  740. }
  741. li.mega-menu-item li.mega-menu-item-has-children > a.mega-menu-link:after {
  742. content: $arrow_right;
  743. float: right;
  744. @include mobile {
  745. content: $arrow_down;
  746. }
  747. }
  748. // Right aligned flyout menus
  749. li.mega-menu-flyout.mega-align-bottom-right {
  750. li.mega-menu-item a.mega-menu-link {
  751. text-align: right;
  752. @include mobile {
  753. text-align: left;
  754. }
  755. }
  756. li.mega-menu-item a.mega-menu-link:before {
  757. float: right;
  758. margin: 0 0 0 6px;
  759. @include mobile {
  760. float: left;
  761. margin: 0 6px 0 0;
  762. }
  763. }
  764. li.mega-menu-item-has-children {
  765. > a.mega-menu-link:after {
  766. content: $arrow_left;
  767. float: left;
  768. margin: 0;
  769. @include mobile {
  770. content: $arrow_down;
  771. float: right;
  772. }
  773. }
  774. }
  775. ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
  776. left: -100%;
  777. top: 0;
  778. }
  779. }
  780. // PolyLang Language Switcher
  781. li[class^='mega-lang-item'] > a.mega-menu-link > img {
  782. display: inline;
  783. }
  784. // WPML Flags
  785. a.mega-menu-link > img.wpml-ls-flag,
  786. a.mega-menu-link > img.iclflag {
  787. display: inline;
  788. margin-right: 8px;
  789. }
  790. @include mobile {
  791. li.mega-hide-on-mobile,
  792. > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-hide-on-mobile {
  793. display: none;
  794. }
  795. }
  796. @include desktop {
  797. li.mega-hide-on-desktop,
  798. > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-hide-on-desktop {
  799. display: none;
  800. }
  801. }
  802. }
  803. @include mobile {
  804. &:after {
  805. content: "";
  806. display: table;
  807. clear: both;
  808. }
  809. @if $disable_mobile_toggle == off and $mobile_menu_overlay == on {
  810. #{$menu} {
  811. position: absolute;
  812. width: 100%;
  813. z-index: 9999999;
  814. @include background($mobile_background_from, $mobile_background_to);
  815. }
  816. }
  817. }
  818. .mega-menu-toggle {
  819. display: none;
  820. z-index: 1;
  821. cursor: pointer;
  822. @include background($toggle_background_from, $toggle_background_to);
  823. @include border-radius(2px, 2px, 2px, 2px);
  824. line-height: $toggle_bar_height;
  825. height: $toggle_bar_height;
  826. text-align: left;
  827. -webkit-touch-callout: none;
  828. -webkit-user-select: none;
  829. -khtml-user-select: none;
  830. -moz-user-select: none;
  831. -ms-user-select: none;
  832. -webkit-tap-highlight-color: transparent;
  833. outline: none;
  834. white-space: nowrap;
  835. img {
  836. max-width: 100%;
  837. padding: 0;
  838. }
  839. @include mobile {
  840. @if $disable_mobile_toggle == on {
  841. display: none;
  842. } @else {
  843. display: -webkit-box;
  844. display: -ms-flexbox;
  845. display: -webkit-flex;
  846. display: flex;
  847. }
  848. }
  849. .mega-toggle-blocks-left,
  850. .mega-toggle-blocks-center,
  851. .mega-toggle-blocks-right {
  852. display: -webkit-box;
  853. display: -ms-flexbox;
  854. display: -webkit-flex;
  855. display: flex;
  856. -ms-flex-preferred-size: 33.33%;
  857. -webkit-flex-basis: 33.33%;
  858. flex-basis: 33.33%;
  859. }
  860. .mega-toggle-blocks-left {
  861. -webkit-box-flex: 1;
  862. -ms-flex: 1;
  863. -webkit-flex: 1;
  864. flex: 1;
  865. -webkit-box-pack: start;
  866. -ms-flex-pack: start;
  867. -webkit-justify-content: flex-start;
  868. justify-content: flex-start;
  869. .mega-toggle-block {
  870. margin-left: 6px;
  871. }
  872. }
  873. .mega-toggle-blocks-center {
  874. -webkit-box-pack: center;
  875. -ms-flex-pack: center;
  876. -webkit-justify-content: center;
  877. justify-content: center;
  878. .mega-toggle-block {
  879. margin-left: 3px;
  880. margin-right: 3px;
  881. }
  882. }
  883. .mega-toggle-blocks-right {
  884. -webkit-box-flex: 1;
  885. -ms-flex: 1;
  886. -webkit-flex: 1;
  887. flex: 1;
  888. -webkit-box-pack: end;
  889. -ms-flex-pack: end;
  890. -webkit-justify-content: flex-end;
  891. justify-content: flex-end;
  892. .mega-toggle-block {
  893. margin-right: 6px;
  894. }
  895. }
  896. .mega-toggle-block {
  897. display: -webkit-box;
  898. display: -ms-flexbox;
  899. display: -webkit-flex;
  900. display: flex;
  901. height: 100%;
  902. -webkit-align-self: center;
  903. -ms-flex-item-align: center;
  904. align-self: center;
  905. -ms-flex-negative: 0;
  906. -webkit-flex-shrink: 0;
  907. flex-shrink: 0;
  908. }
  909. @include mobile {
  910. + #{$menu} {
  911. @if $disable_mobile_toggle == on {
  912. display: block;
  913. } @else {
  914. display: none;
  915. }
  916. li.mega-menu-item > ul.mega-sub-menu {
  917. display: none;
  918. visibility: visible;
  919. opacity: 1;
  920. }
  921. li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
  922. li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu {
  923. display: block;
  924. }
  925. }
  926. &.mega-menu-open + #{$menu} {
  927. display: block;
  928. }
  929. }
  930. }
  931. }