www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/bartik/css/components/primary-menu.css

   1 /* --------------- Primary Menu ------------ */
   2
   3 .region-primary-menu {
   4   clear: both;
   5 }
   6 .region-primary-menu .menu {
   7   font-size: 0.929em;
   8   margin: 0 5px;
   9   padding: 0;
  10   text-align: left; /* LTR */
  11 }
  12 [dir="rtl"] .region-primary-menu .menu {
  13   text-align: right;
  14   margin-left: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */
  15   margin-right: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */
  16 }
  17 .region-primary-menu .menu-item {
  18   float: none;
  19   list-style: none;
  20   margin: 0;
  21   padding: 0;
  22   height: auto;
  23   width: 100%;
  24 }
  25 .region-primary-menu .menu a {
  26   color: #333;
  27   background: #ccc;
  28   background: rgba(255, 255, 255, 0.7);
  29   float: none;
  30   display: block;
  31   text-decoration: none;
  32   text-shadow: 0 1px #eee;
  33   border-radius: 8px;
  34   margin: 4px 0;
  35   padding: 0.9em 0 0.9em 10px; /* LTR */
  36 }
  37 [dir="rtl"] .region-primary-menu .menu a {
  38   padding: 0.9em 10px 0.9em 0;
  39 }
  40 .region-primary-menu .menu a:hover,
  41 .region-primary-menu .menu a:focus {
  42   background: #f6f6f2;
  43   background: rgba(255, 255, 255, 0.95);
  44 }
  45 .region-primary-menu .menu a:active {
  46   background: #b3b3b3;
  47   background: rgba(255, 255, 255, 1);
  48 }
  49 .region-primary-menu .menu-item a.is-active {
  50   border-bottom: none;
  51 }
  52
  53 /* ---------- Primary Menu Toggle ----------- */
  54 /* Hide the toggle by default. */
  55 .menu-toggle,
  56 .menu-toggle-target {
  57   display: none;
  58 }
  59 /* Unhide it for the primary menu. */
  60 .region-primary-menu .menu-toggle-target {
  61   display: inherit;
  62   position: fixed;
  63   top: 0;
  64 }
  65 .region-primary-menu .menu-toggle {
  66   display: none;
  67 }
  68 body:not(:target) .region-primary-menu .menu-toggle {
  69   color: #333;
  70   background: #ccc;
  71   background: rgba(255, 255, 255, 0.7);
  72   float: none;
  73   font-size: 0.929em;
  74   display: block;
  75   text-decoration: none;
  76   text-shadow: 0 1px #eee;
  77   padding: 0.9em 10px 0.9em 10px;
  78   z-index: 1000;
  79 }
  80 body:not(:target) .region-primary-menu .menu-toggle:after {
  81   content:"";
  82   background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat;
  83   background-size: contain;
  84   width: 22px;
  85   height: 22px;
  86   display: inline-block;
  87   position: absolute;
  88   right: 10px; /* LTR */
  89 }
  90 [dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after {
  91   right: initial;
  92   left: 10px;
  93 }
  94 body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle,
  95 body:not(:target) .region-primary-menu .menu-toggle--hide {
  96   display: none;
  97 }
  98 body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
  99   display: block;
 100 }
 101
 102 body:not(:target) .region-primary-menu .menu-item {
 103   height: 0;
 104   overflow: hidden;
 105 }
 106 body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .menu-item {
 107   height: auto;
 108   overflow: visible;
 109 }
 110
 111 /**
 112  * Media queries for primary menu.
 113  */
 114 @media all and (min-width: 461px) and (max-width: 900px) {
 115   .region-primary-menu .menu {
 116     margin: 0 5px;
 117     padding: 0;
 118     text-align: center;
 119   }
 120   /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu */
 121   [dir="rtl"] .region-primary-menu .menu {
 122     text-align: center;
 123   }
 124   .region-primary-menu .menu-item,
 125   body:not(:target) .region-primary-menu .menu-item {
 126     float: left; /* LTR */
 127     margin-right: 5px; /* LTR */
 128     padding: 0;
 129     display: inline-block;
 130     width: 32.75%;
 131     height: auto;
 132     overflow: visible;
 133   }
 134   [dir="rtl"] .region-primary-menu .menu-item,
 135   [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
 136     float: right;
 137     margin-left: 5px;
 138     margin-right: 0;
 139   }
 140   .region-primary-menu .menu-item:nth-child(3n) {
 141     margin-right: -5px; /* LTR */
 142   }
 143   [dir="rtl"] .region-primary-menu .menu-item:nth-child(3n) {
 144     margin-left: -5px;
 145     margin-right: 0;
 146   }
 147   .region-primary-menu .menu a {
 148     float: none;
 149     display: block;
 150     border-radius: 8px;
 151     margin-bottom: 5px;
 152     padding: 0.9em 5px;
 153   }
 154   /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu a */
 155   [dir="rtl"] .region-primary-menu .menu a {
 156     padding: 0.9em 5px;
 157   }
 158   body:not(:target) .region-primary-menu .menu-toggle {
 159     display: none;
 160   }
 161 }
 162
 163 @media all and (min-width: 901px) {
 164   .region-primary-menu .block-menu .menu {
 165     font-size: 0.929em;
 166     margin: 0;
 167     padding: 0 15px;
 168   }
 169   .region-primary-menu .menu-item,
 170   body:not(:target) .region-primary-menu .menu-item {
 171     float: left; /* LTR */
 172     list-style: none;
 173     padding: 0 1px;
 174     margin: 0 1px;
 175     width: auto;
 176     height: auto;
 177     overflow: visible;
 178   }
 179   [dir="rtl"] .region-primary-menu .menu-item,
 180   [dir="rtl"] body:not(:target) .region-primary-menu .menu-item {
 181     float: right;
 182   }
 183   .region-primary-menu .menu a {
 184     float: left; /* LTR */
 185     padding: 0.7em 0.8em;
 186     margin-bottom: 0;
 187     border-bottom-left-radius: 0;
 188     border-bottom-right-radius: 0;
 189   }
 190   [dir="rtl"] .region-primary-menu .menu a {
 191     float: right;
 192     padding: 0.7em 0.8em;
 193   }
 194   .featured .region-primary-menu .menu-item a:active,
 195   .featured .region-primary-menu .menu-item a.is-active {
 196     background: #f0f0f0;
 197     background: rgba(240, 240, 240, 1.0);
 198   }
 199   body:not(:target) .region-primary-menu .menu-toggle {
 200     display: none;
 201   }
 202 }
 203
 204 /**
 205  * Ensures that the open mobile menu hides when the screen dimensions become
 206  * 461px or wider.
 207  */
 208 @media all and (min-width: 461px) {
 209   body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide {
 210     display: none;
 211   }
 212 }