123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- /* --------------- Primary Menu ------------ */
- .region-primary-menu {
- clear: both;
- }
- .region-primary-menu .menu {
- font-size: 0.929em;
- margin: 0 5px;
- padding: 0;
- text-align: left; /* LTR */
- }
- [dir="rtl"] .region-primary-menu .menu {
- text-align: right;
- margin-left: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */
- margin-right: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */
- }
- .region-primary-menu .menu-item {
- float: none;
- list-style: none;
- margin: 0;
- padding: 0;
- height: auto;
- width: 100%;
- }
- .region-primary-menu .menu a {
- color: #333;
- background: #ccc;
- background: rgba(255, 255, 255, 0.7);
- float: none;
- display: block;
- text-decoration: none;
- text-shadow: 0 1px #eee;
- border-radius: 8px;
- margin: 4px 0;
- padding: 0.9em 0 0.9em 10px; /* LTR */
- }
- [dir="rtl"] .region-primary-menu .menu a {
- padding: 0.9em 10px 0.9em 0;
- }
- .region-primary-menu .menu a:hover,
- .region-primary-menu .menu a:focus {
- background: #f6f6f2;
- background: rgba(255, 255, 255, 0.95);
- }
- .region-primary-menu .menu a:active {
- background: #b3b3b3;
- background: rgba(255, 255, 255, 1);
- }
- .region-primary-menu .menu-item a.is-active {
- border-bottom: none;
- }
- /* ---------- Primary Menu Toggle ----------- */
- /* Hide the toggle by default. */
- .menu-toggle,
- .menu-toggle-target {
- display: none;
- }
- /* Unhide it for the primary menu. */
- .region-primary-menu .menu-toggle-target {
- display: inherit;
- position: fixed;
- top: 0;
- }
- .region-primary-menu .menu-toggle {
- display: none;
- }
- body:not(:target) .region-primary-menu .menu-toggle {
- color: #333;
- background: #ccc;
- background: rgba(255, 255, 255, 0.7);
- float: none;
- font-size: 0.929em;
- display: block;
- text-decoration: none;
- text-shadow: 0 1px #eee;
- padding: 0.9em 10px 0.9em 10px;
- z-index: 1000;
- }
- body:not(:target) .region-primary-menu .menu-toggle:after {
- content: "";
- background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat;
- background-size: contain;
- width: 22px;
- height: 22px;
- display: inline-block;
- position: absolute;
- right: 10px; /* LTR */
- }
- [dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after {
- right: initial;
- left: 10px;
- }
- body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle,
- body:not(:target) .region-primary-menu .menu-toggle--hide {
- display: none;
- }
- body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
- display: block;
- }
- body:not(:target) .region-primary-menu .menu-item {
- height: 0;
- overflow: hidden;
- }
- body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .menu-item {
- height: auto;
- overflow: visible;
- }
- /**
- * Media queries for primary menu.
- */
- @media all and (min-width: 461px) and (max-width: 900px) {
- .region-primary-menu .menu {
- margin: 0 5px;
- padding: 0;
- text-align: center;
- }
- /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu */
- [dir="rtl"] .region-primary-menu .menu {
- text-align: center;
- }
- .region-primary-menu .menu-item,
- body:not(:target) .region-primary-menu .menu-item {
- float: left; /* LTR */
- margin-right: 5px; /* LTR */
- padding: 0;
- display: inline-block;
- width: 32.75%;
- height: auto;
- overflow: visible;
- }
- [dir="rtl"] .region-primary-menu .menu-item,
- [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
- float: right;
- margin-left: 5px;
- margin-right: 0;
- }
- .region-primary-menu .menu-item:nth-child(3n) {
- margin-right: -5px; /* LTR */
- }
- [dir="rtl"] .region-primary-menu .menu-item:nth-child(3n) {
- margin-left: -5px;
- margin-right: 0;
- }
- .region-primary-menu .menu a {
- float: none;
- display: block;
- border-radius: 8px;
- margin-bottom: 5px;
- padding: 0.9em 5px;
- }
- /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu a */
- [dir="rtl"] .region-primary-menu .menu a {
- padding: 0.9em 5px;
- }
- body:not(:target) .region-primary-menu .menu-toggle {
- display: none;
- }
- }
- @media all and (min-width: 901px) {
- .region-primary-menu .block-menu .menu {
- font-size: 0.929em;
- margin: 0;
- padding: 0 15px;
- }
- .region-primary-menu .menu-item,
- body:not(:target) .region-primary-menu .menu-item {
- float: left; /* LTR */
- list-style: none;
- padding: 0 1px;
- margin: 0 1px;
- width: auto;
- height: auto;
- overflow: visible;
- }
- [dir="rtl"] .region-primary-menu .menu-item,
- [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
- float: right;
- }
- .region-primary-menu .menu a {
- float: left; /* LTR */
- padding: 0.7em 0.8em;
- margin-bottom: 0;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- [dir="rtl"] .region-primary-menu .menu a {
- float: right;
- padding: 0.7em 0.8em;
- }
- .featured .region-primary-menu .menu-item a:active,
- .featured .region-primary-menu .menu-item a.is-active {
- background: #f0f0f0;
- background: rgba(240, 240, 240, 1);
- }
- body:not(:target) .region-primary-menu .menu-toggle {
- display: none;
- }
- }
- /**
- * Ensures that the open mobile menu hides when the screen dimensions become
- * 461px or wider.
- */
- @media all and (min-width: 461px) {
- body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
- display: none;
- }
- }
|