You are here

responsive-menus.css in AT Tools 8

/**
 * Responsive menu styles.
 *
 * Mixins provide the basic structure and a base style (not much), the rest
 * is up to you, add colors, borders, padding and so on. Icons such as
 * the hamburger and arrows are set in variables in _variables.scss, and you
 * use the color variables for menus from there also.
 *
 * Menu styles are set in Appearance settings using the Responsive Menus extension.
 * There you select a block, breakpoint, a default style and a responsive style.
 * You can safely remove mixins from this file if you not going to use them later
 * on, and want to save a few bytes in stylesheet size.
 *
 * Each mixin takes one or more parameters. Use these to customize the basic
 * structure of the menu, or call options, for example you can place the
 * offcanvas menu on the left or right.
 *
 * Do not import into breakpoints unless you are not using the Responsive Menu
 * settings in Appearance Extensions, in which case you will need to load the
 * at_core/at.responsivemenus library and provide it's required drupalSettings.
 *
 * Breakpoints are handled in matchMedia using Enquire.
 *
 * Responsive styles are a combination of three things:
 *  1. Sass/CSS defined here (with breakpoints etc).
 *  2. jQuery: at.responsiveMenus.js which adds/toggles classes etc.
 *  3. Theme settings as set in your themes extension settings.
 ============================================================================ */
.rm-region {
  padding: 0;
  margin: 0;
}
.rm-region .contextual-region {
  position: static;
}
.rm-region .contextual-region .contextual {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  word-wrap: normal;
  font: 0/0 a;
}
.rm-region [class*='is-vertical-'] {
  position: absolute;
  z-index: 480;
}

.ms-vertical .rm-toggle {
  display: none;
}

.rm-toggle {
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
  padding: 7px 16px;
  padding: 0.4375rem 1rem;
  margin: 0;
}
.rm-toggle__link, .rm-toggle__link:hover, .rm-toggle__link:focus, .rm-toggle__link:active {
  padding: 8px 16px 4px 12px;
  padding: 0.5rem 1rem 0.25rem 0.75rem;
  height: auto;
  border-radius: 2px;
  cursor: pointer;
}
.rm-toggle__icon {
  position: relative;
  height: 16px;
  height: 1rem;
  width: 16px;
  width: 1rem;
}
.rm-toggle__label {
  top: -2px;
  top: -0.125rem;
  position: relative;
}

.rm-block__content .menu {
  position: relative;
}
.rm-block__content .menu > .menu__item {
  z-index: 490;
  position: relative;
}
.rm-block__content__item {
  position: relative;
  vertical-align: middle;
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
}
.rm-block__content__item:first-child a {
  border-top: 0;
}
.rm-block__content a {
  transition: all, 225ms, ease-in-out;
  font-weight: 300;
  margin: 0;
  border: 0;
}
.rm-block__content a:hover, .rm-block__content a:focus {
  text-decoration: none;
}

.no-js .rm-block a {
  padding: 7px;
  padding: 0.4375rem;
  margin: 1px 0;
  margin: 0.0625rem 0;
}

.pr-navbar__navbar .rm-block,
.pr-leaderboard__leaderboard .rm-block {
  margin: 0;
  padding: 0;
}

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

File

at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus.css
View source
  1. /**
  2. * Responsive menu styles.
  3. *
  4. * Mixins provide the basic structure and a base style (not much), the rest
  5. * is up to you, add colors, borders, padding and so on. Icons such as
  6. * the hamburger and arrows are set in variables in _variables.scss, and you
  7. * use the color variables for menus from there also.
  8. *
  9. * Menu styles are set in Appearance settings using the Responsive Menus extension.
  10. * There you select a block, breakpoint, a default style and a responsive style.
  11. * You can safely remove mixins from this file if you not going to use them later
  12. * on, and want to save a few bytes in stylesheet size.
  13. *
  14. * Each mixin takes one or more parameters. Use these to customize the basic
  15. * structure of the menu, or call options, for example you can place the
  16. * offcanvas menu on the left or right.
  17. *
  18. * Do not import into breakpoints unless you are not using the Responsive Menu
  19. * settings in Appearance Extensions, in which case you will need to load the
  20. * at_core/at.responsivemenus library and provide it's required drupalSettings.
  21. *
  22. * Breakpoints are handled in matchMedia using Enquire.
  23. *
  24. * Responsive styles are a combination of three things:
  25. * 1. Sass/CSS defined here (with breakpoints etc).
  26. * 2. jQuery: at.responsiveMenus.js which adds/toggles classes etc.
  27. * 3. Theme settings as set in your themes extension settings.
  28. ============================================================================ */
  29. .rm-region {
  30. padding: 0;
  31. margin: 0;
  32. }
  33. .rm-region .contextual-region {
  34. position: static;
  35. }
  36. .rm-region .contextual-region .contextual {
  37. position: absolute !important;
  38. clip: rect(1px, 1px, 1px, 1px);
  39. overflow: hidden;
  40. height: 1px;
  41. width: 1px;
  42. padding: 0;
  43. word-wrap: normal;
  44. font: 0/0 a;
  45. }
  46. .rm-region [class*='is-vertical-'] {
  47. position: absolute;
  48. z-index: 480;
  49. }
  50. .ms-vertical .rm-toggle {
  51. display: none;
  52. }
  53. .rm-toggle {
  54. font-size: 16px;
  55. font-size: 1rem;
  56. line-height: 21px;
  57. line-height: 1.3125rem;
  58. padding: 7px 16px;
  59. padding: 0.4375rem 1rem;
  60. margin: 0;
  61. }
  62. .rm-toggle__link, .rm-toggle__link:hover, .rm-toggle__link:focus, .rm-toggle__link:active {
  63. padding: 8px 16px 4px 12px;
  64. padding: 0.5rem 1rem 0.25rem 0.75rem;
  65. height: auto;
  66. border-radius: 2px;
  67. cursor: pointer;
  68. }
  69. .rm-toggle__icon {
  70. position: relative;
  71. height: 16px;
  72. height: 1rem;
  73. width: 16px;
  74. width: 1rem;
  75. }
  76. .rm-toggle__label {
  77. top: -2px;
  78. top: -0.125rem;
  79. position: relative;
  80. }
  81. .rm-block__content .menu {
  82. position: relative;
  83. }
  84. .rm-block__content .menu > .menu__item {
  85. z-index: 490;
  86. position: relative;
  87. }
  88. .rm-block__content__item {
  89. position: relative;
  90. vertical-align: middle;
  91. font-size: 16px;
  92. font-size: 1rem;
  93. line-height: 21px;
  94. line-height: 1.3125rem;
  95. }
  96. .rm-block__content__item:first-child a {
  97. border-top: 0;
  98. }
  99. .rm-block__content a {
  100. transition: all, 225ms, ease-in-out;
  101. font-weight: 300;
  102. margin: 0;
  103. border: 0;
  104. }
  105. .rm-block__content a:hover, .rm-block__content a:focus {
  106. text-decoration: none;
  107. }
  108. .no-js .rm-block a {
  109. padding: 7px;
  110. padding: 0.4375rem;
  111. margin: 1px 0;
  112. margin: 0.0625rem 0;
  113. }
  114. .pr-navbar__navbar .rm-block,
  115. .pr-leaderboard__leaderboard .rm-block {
  116. margin: 0;
  117. padding: 0;
  118. }
  119. /*# sourceMappingURL=maps/responsive-menus.css.map */