You are here

Home » API reference » AT Tools 8

responsive-menus--meganav.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus--meganav.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus--meganav.css
/**
 * Mega Nav
 * Hamburger menu that shows the top level items horizontal, and when expanded
 * the top level items show vertically with sub-menus horizontal.
 * This style was borrowed from http://www.theguardian.com
 ============================================================================ */
.ms-meganav .rm-region,
.ms-meganav .rm-block {
  position: relative;
}
.ms-meganav .rm-toggle {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200;
  padding: 0;
  margin: 2px 0 0;
  margin: 0.125rem 0 0;
}
.ms-meganav .rm-toggle__link, .ms-meganav .rm-toggle__link:hover, .ms-meganav .rm-toggle__link:focus, .ms-meganav .rm-toggle__link:active {
  padding: 5px 6px 3px;
  padding: 0.3125rem 0.375rem 0.1875rem;
}
.ms-meganav .rm-toggle__label {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  word-wrap: normal;
  font: 0/0 a;
}
.ms-meganav .rm-block__content {
  transition: all, 225ms, ease-in-out;
}
.ms-meganav .rm-block__content .menu {
  padding: 0;
}
.ms-meganav .rm-block__content .menu a {
  padding: 7px 16px;
  padding: 0.4375rem 1rem;
}
.ms-meganav .rm-block__content .menu a:before, .ms-meganav .rm-block__content .menu a:after {
  content: "";
  display: none;
}
.ms-meganav .rm-block__content .menu-level-1 > .menu__item {
  float: left;
}
.ms-meganav .rm-block__content .menu-level-2 {
  display: none;
  opacity: 0.001;
}
.ms-meganav.rm-is-open .rm-block__content {
  padding: 0;
  margin: 0;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item {
  float: none;
  margin-right: 2.5rem;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:before, .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {
  content: " ";
  display: table;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {
  clear: both;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:last-child {
  border-bottom: none;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item a {
  float: left;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item > span > a {
  width: 12em;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 {
  display: block;
  float: left;
  opacity: 1;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu {
  padding: 0;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu,
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item {
  float: left;
}
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu a,
.ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item a {
  width: auto;
}

/*# sourceMappingURL=maps/responsive-menus--meganav.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus--meganav.css
View source 
  1. /**

  2.  * Mega Nav

  3.  * Hamburger menu that shows the top level items horizontal, and when expanded

  4.  * the top level items show vertically with sub-menus horizontal.

  5.  * This style was borrowed from http://www.theguardian.com

  6.  ============================================================================ */

  7. .ms-meganav .rm-region,

  8. .ms-meganav .rm-block {

  9.   position: relative;

  10. }

  11. .ms-meganav .rm-toggle {

  12.   position: absolute;

  13.   right: 0;

  14.   top: 0;

  15.   z-index: 200;

  16.   padding: 0;

  17.   margin: 2px 0 0;

  18.   margin: 0.125rem 0 0;

  19. }

  20. .ms-meganav .rm-toggle__link, .ms-meganav .rm-toggle__link:hover, .ms-meganav .rm-toggle__link:focus, .ms-meganav .rm-toggle__link:active {

  21.   padding: 5px 6px 3px;

  22.   padding: 0.3125rem 0.375rem 0.1875rem;

  23. }

  24. .ms-meganav .rm-toggle__label {

  25.   position: absolute !important;

  26.   clip: rect(1px, 1px, 1px, 1px);

  27.   overflow: hidden;

  28.   height: 1px;

  29.   width: 1px;

  30.   padding: 0;

  31.   word-wrap: normal;

  32.   font: 0/0 a;

  33. }

  34. .ms-meganav .rm-block__content {

  35.   transition: all, 225ms, ease-in-out;

  36. }

  37. .ms-meganav .rm-block__content .menu {

  38.   padding: 0;

  39. }

  40. .ms-meganav .rm-block__content .menu a {

  41.   padding: 7px 16px;

  42.   padding: 0.4375rem 1rem;

  43. }

  44. .ms-meganav .rm-block__content .menu a:before, .ms-meganav .rm-block__content .menu a:after {

  45.   content: "";

  46.   display: none;

  47. }

  48. .ms-meganav .rm-block__content .menu-level-1 > .menu__item {

  49.   float: left;

  50. }

  51. .ms-meganav .rm-block__content .menu-level-2 {

  52.   display: none;

  53.   opacity: 0.001;

  54. }

  55. .ms-meganav.rm-is-open .rm-block__content {

  56.   padding: 0;

  57.   margin: 0;

  58. }

  59. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item {

  60.   float: none;

  61.   margin-right: 2.5rem;

  62. }

  63. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:before, .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {

  64.   content: " ";

  65.   display: table;

  66. }

  67. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:after {

  68.   clear: both;

  69. }

  70. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item:last-child {

  71.   border-bottom: none;

  72. }

  73. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item a {

  74.   float: left;

  75. }

  76. .ms-meganav.rm-is-open .rm-block__content .menu-level-1 > .menu__item > span > a {

  77.   width: 12em;

  78. }

  79. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 {

  80.   display: block;

  81.   float: left;

  82.   opacity: 1;

  83. }

  84. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu {

  85.   padding: 0;

  86. }

  87. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu,

  88. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item {

  89.   float: left;

  90. }

  91. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu a,

  92. .ms-meganav.rm-is-open .rm-block__content .menu-level-2 .menu__item a {

  93.   width: auto;

  94. }

  95. 

  96. /*# sourceMappingURL=maps/responsive-menus--meganav.css.map */