You are here

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

@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 {
  transition: 125ms ease-in-out 100ms;
}

.ms-dropmenu .rm-block__content .menu .menu {
  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-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

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