You are here

responsive-menus--dropmenu.css in AT Tools 8.3

@charset "UTF-8";
/**
 * Drop menus
 * Standard CSS drop menus that will expand any nesting level.
 ============================================================================ */
.ms-dropmenu .rm-toggle {
  display: none;
}

.ms-dropmenu .rm-block__content .menu {
  -webkit-transition: 125ms ease-in-out 100ms;
  -o-transition: 125ms ease-in-out 100ms;
  transition: 125ms ease-in-out 100ms;
}

.ms-dropmenu .rm-block__content .menu .menu {
  -webkit-transition-delay: 25ms;
       -o-transition-delay: 25ms;
          transition-delay: 25ms;
}

.ms-dropmenu .rm-block__content .menu__item {
  text-align: center;
  position: relative;
}

.ms-dropmenu .rm-block__content .menu__link {
  position: relative;
  display: block;
  padding: 0.5rem 1.25rem;
}

.ms-dropmenu .rm-block__content .menu__link:after {
  font-family: FontAwesome, sans-serif;
  padding: 0 1px;
  text-align: right;
  position: absolute;
  right: 1rem;
}

.ms-dropmenu .rm-block__content .menu-level-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.ms-dropmenu .rm-block__content .menu-level-1 .menu__item {
  width: auto;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.ms-dropmenu .rm-block__content .menu-level-1 .menu__item:hover > .is-child, .ms-dropmenu .rm-block__content .menu-level-1 .menu__item:focus > .is-child {
  visibility: visible;
  opacity: 1;
}

.ms-dropmenu .rm-block__content .menu-level-1 .menu__link:after {
  content: '';
  display: none;
}

.fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--collapsed.is-parent > span > .menu__link,
.fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--expanded.is-parent > span > .menu__link {
  padding-right: 2.5rem;
}

.fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--collapsed.is-parent > span > .menu__link:after,
.fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--expanded.is-parent > span > .menu__link:after {
  display: inline-block;
}

.fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--expanded.is-parent > span > .menu__link:after {
  content: "";
}

.fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--collapsed.is-parent > span > .menu__link:after {
  content: '';
}

.ms-dropmenu .rm-block__content .is-child {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  max-height: 1000px;
  width: 100%;
}

.ms-dropmenu .rm-block__content .is-child:hover, .ms-dropmenu .rm-block__content .is-child:focus {
  visibility: visible;
  opacity: 1;
}

.ms-dropmenu .rm-block__content .is-child .menu__item {
  min-width: 12em;
  text-align: left;
  width: 100%;
}

.ms-dropmenu .rm-block__content .menu-level-2 {
  left: 0;
  top: auto;
}

.fa-loaded .ms-dropmenu .rm-block__content .menu-level-2 .menu__item--expanded.is-parent > span > .menu__link:after {
  content: "";
}

[dir="rtl"] .fa-loaded .ms-dropmenu .rm-block__content .menu-level-2 .menu__item--expanded.is-parent > span > .menu__link:after {
  content: "";
}

.ms-dropmenu .rm-block__content .menu-level-2 .is-child {
  left: 100%;
  top: 0;
}
/*# sourceMappingURL=responsive-menus--dropmenu.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus--dropmenu.css
View source
  1. @charset "UTF-8";
  2. /**
  3. * Drop menus
  4. * Standard CSS drop menus that will expand any nesting level.
  5. ============================================================================ */
  6. .ms-dropmenu .rm-toggle {
  7. display: none;
  8. }
  9. .ms-dropmenu .rm-block__content .menu {
  10. -webkit-transition: 125ms ease-in-out 100ms;
  11. -o-transition: 125ms ease-in-out 100ms;
  12. transition: 125ms ease-in-out 100ms;
  13. }
  14. .ms-dropmenu .rm-block__content .menu .menu {
  15. -webkit-transition-delay: 25ms;
  16. -o-transition-delay: 25ms;
  17. transition-delay: 25ms;
  18. }
  19. .ms-dropmenu .rm-block__content .menu__item {
  20. text-align: center;
  21. position: relative;
  22. }
  23. .ms-dropmenu .rm-block__content .menu__link {
  24. position: relative;
  25. display: block;
  26. padding: 0.5rem 1.25rem;
  27. }
  28. .ms-dropmenu .rm-block__content .menu__link:after {
  29. font-family: FontAwesome, sans-serif;
  30. padding: 0 1px;
  31. text-align: right;
  32. position: absolute;
  33. right: 1rem;
  34. }
  35. .ms-dropmenu .rm-block__content .menu-level-1 {
  36. display: -webkit-box;
  37. display: -ms-flexbox;
  38. display: flex;
  39. position: relative;
  40. }
  41. .ms-dropmenu .rm-block__content .menu-level-1 .menu__item {
  42. width: auto;
  43. -webkit-box-flex: 0;
  44. -ms-flex: 0 0 auto;
  45. flex: 0 0 auto;
  46. }
  47. .ms-dropmenu .rm-block__content .menu-level-1 .menu__item:hover > .is-child, .ms-dropmenu .rm-block__content .menu-level-1 .menu__item:focus > .is-child {
  48. visibility: visible;
  49. opacity: 1;
  50. }
  51. .ms-dropmenu .rm-block__content .menu-level-1 .menu__link:after {
  52. content: '';
  53. display: none;
  54. }
  55. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--collapsed.is-parent > span > .menu__link,
  56. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--expanded.is-parent > span > .menu__link {
  57. padding-right: 2.5rem;
  58. }
  59. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--collapsed.is-parent > span > .menu__link:after,
  60. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--expanded.is-parent > span > .menu__link:after {
  61. display: inline-block;
  62. }
  63. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--expanded.is-parent > span > .menu__link:after {
  64. content: "";
  65. }
  66. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-1 .menu__item--collapsed.is-parent > span > .menu__link:after {
  67. content: '';
  68. }
  69. .ms-dropmenu .rm-block__content .is-child {
  70. position: absolute;
  71. visibility: hidden;
  72. opacity: 0;
  73. margin: 0;
  74. padding: 0;
  75. max-height: 1000px;
  76. width: 100%;
  77. }
  78. .ms-dropmenu .rm-block__content .is-child:hover, .ms-dropmenu .rm-block__content .is-child:focus {
  79. visibility: visible;
  80. opacity: 1;
  81. }
  82. .ms-dropmenu .rm-block__content .is-child .menu__item {
  83. min-width: 12em;
  84. text-align: left;
  85. width: 100%;
  86. }
  87. .ms-dropmenu .rm-block__content .menu-level-2 {
  88. left: 0;
  89. top: auto;
  90. }
  91. .fa-loaded .ms-dropmenu .rm-block__content .menu-level-2 .menu__item--expanded.is-parent > span > .menu__link:after {
  92. content: "";
  93. }
  94. [dir="rtl"] .fa-loaded .ms-dropmenu .rm-block__content .menu-level-2 .menu__item--expanded.is-parent > span > .menu__link:after {
  95. content: "";
  96. }
  97. .ms-dropmenu .rm-block__content .menu-level-2 .is-child {
  98. left: 100%;
  99. top: 0;
  100. }
  101. /*# sourceMappingURL=responsive-menus--dropmenu.css.map */