menu-animation-rtl.css 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * Slide Up
  3. */
  4. .ast-desktop {
  5. /**
  6. * Slide Down
  7. */
  8. /**
  9. * Fade
  10. */
  11. }
  12. .ast-desktop .astra-menu-animation-slide-up > .menu-item > .astra-full-megamenu-wrapper,
  13. .ast-desktop .astra-menu-animation-slide-up > .menu-item > .sub-menu,
  14. .ast-desktop .astra-menu-animation-slide-up > .menu-item > .sub-menu .sub-menu {
  15. opacity: 0;
  16. visibility: hidden;
  17. transform: translateY(0.5em);
  18. transition: visibility .2s ease, transform .2s ease;
  19. }
  20. .ast-desktop .astra-menu-animation-slide-up > .menu-item.focus > .astra-full-megamenu-wrapper,
  21. .ast-desktop .astra-menu-animation-slide-up > .menu-item:hover > .astra-full-megamenu-wrapper,
  22. .ast-desktop .astra-menu-animation-slide-up > .menu-item.focus > .sub-menu,
  23. .ast-desktop .astra-menu-animation-slide-up > .menu-item:hover > .sub-menu,
  24. .ast-desktop .astra-menu-animation-slide-up > .menu-item .menu-item.focus > .sub-menu,
  25. .ast-desktop .astra-menu-animation-slide-up > .menu-item .menu-item:hover > .sub-menu {
  26. opacity: 1;
  27. visibility: visible;
  28. transform: translateY(0);
  29. transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  30. }
  31. .ast-desktop .astra-menu-animation-slide-up > .full-width-mega.menu-item.focus > .astra-full-megamenu-wrapper,
  32. .ast-desktop .astra-menu-animation-slide-up > .full-width-mega.menu-item:hover > .astra-full-megamenu-wrapper {
  33. -js-display: flex;
  34. display: flex;
  35. }
  36. .ast-desktop .astra-menu-animation-slide-down > .menu-item > .astra-full-megamenu-wrapper,
  37. .ast-desktop .astra-menu-animation-slide-down > .menu-item > .sub-menu,
  38. .ast-desktop .astra-menu-animation-slide-down > .menu-item > .sub-menu .sub-menu {
  39. opacity: 0;
  40. visibility: hidden;
  41. transform: translateY(-0.5em);
  42. transition: visibility .2s ease, transform .2s ease;
  43. }
  44. .ast-desktop .astra-menu-animation-slide-down > .menu-item.focus > .astra-full-megamenu-wrapper,
  45. .ast-desktop .astra-menu-animation-slide-down > .menu-item:hover > .astra-full-megamenu-wrapper,
  46. .ast-desktop .astra-menu-animation-slide-down > .menu-item.focus > .sub-menu,
  47. .ast-desktop .astra-menu-animation-slide-down > .menu-item:hover > .sub-menu,
  48. .ast-desktop .astra-menu-animation-slide-down > .menu-item .menu-item.focus > .sub-menu,
  49. .ast-desktop .astra-menu-animation-slide-down > .menu-item .menu-item:hover > .sub-menu {
  50. opacity: 1;
  51. visibility: visible;
  52. transform: translateY(0);
  53. transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  54. }
  55. .ast-desktop .astra-menu-animation-slide-down > .full-width-mega.menu-item.focus > .astra-full-megamenu-wrapper,
  56. .ast-desktop .astra-menu-animation-slide-down > .full-width-mega.menu-item:hover > .astra-full-megamenu-wrapper {
  57. -js-display: flex;
  58. display: flex;
  59. }
  60. .ast-desktop .astra-menu-animation-fade > .menu-item > .astra-full-megamenu-wrapper,
  61. .ast-desktop .astra-menu-animation-fade > .menu-item > .sub-menu,
  62. .ast-desktop .astra-menu-animation-fade > .menu-item > .sub-menu .sub-menu {
  63. opacity: 0;
  64. visibility: hidden;
  65. transition: opacity ease-in-out .3s;
  66. }
  67. .ast-desktop .astra-menu-animation-fade > .menu-item.focus > .astra-full-megamenu-wrapper,
  68. .ast-desktop .astra-menu-animation-fade > .menu-item:hover > .astra-full-megamenu-wrapper,
  69. .ast-desktop .astra-menu-animation-fade > .menu-item.focus > .sub-menu,
  70. .ast-desktop .astra-menu-animation-fade > .menu-item:hover > .sub-menu,
  71. .ast-desktop .astra-menu-animation-fade > .menu-item .menu-item.focus > .sub-menu,
  72. .ast-desktop .astra-menu-animation-fade > .menu-item .menu-item:hover > .sub-menu {
  73. opacity: 1;
  74. visibility: visible;
  75. transition: opacity ease-in-out .3s;
  76. }
  77. .ast-desktop .astra-menu-animation-fade > .full-width-mega.menu-item.focus > .astra-full-megamenu-wrapper,
  78. .ast-desktop .astra-menu-animation-fade > .full-width-mega.menu-item:hover > .astra-full-megamenu-wrapper {
  79. -js-display: flex;
  80. display: flex;
  81. }