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

   1 /* ------------------ Header ------------------ */
   2 #header {
   3   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   4 }
   5 .header .section {
   6   position: relative;
   7 }
   8 .region-header {
   9   padding: 0.357em 15px 0;
  10 }
  11 .region-header .site-branding {
  12   margin-top: 0.429em;
  13 }
  14 @media all and (min-width: 461px) {
  15   .region-header .block {
  16     float: right; /* LTR */
  17     margin-top: 0.357em;
  18   }
  19   [dir="rtl"] .region-header .block {
  20     float: left;
  21   }
  22   .region-header .site-branding {
  23     float: left; /* LTR */
  24    /* margin-bottom: 1.857em;*/
  25   }
  26   [dir="rtl"] .region-header .site-branding {
  27     float: right;
  28   }
  29 }
  30 @media screen and (max-width: 460px) {
  31   .region-header {
  32     padding-bottom: 0.357em;
  33   }
  34 }
  35 /* Region header blocks. */
  36 .region-header .block:not(.site-branding) {
  37   font-size: 0.857em;
  38   margin: 0 0 1em;
  39   clear: right;
  40 }
  41 @media all and (min-width: 901px) {
  42   .region-header .block:not(.site-branding) {
  43     margin: 1.167em 0 1em;
  44   }
  45 }
  46 .region-header .block > h2 {
  47   /* @extend .visually-hidden */
  48   position: absolute !important;
  49   clip: rect(1px, 1px, 1px, 1px);
  50   overflow: hidden;
  51   height: 1px;
  52 }
  53 .header .block .content {
  54   margin: 0;
  55   padding: 0;
  56 }
  57 .region-header .block ul {
  58   padding: 0;
  59 }
  60 .region-header .block li {
  61   list-style: none;
  62   list-style-image: none;
  63   padding: 0;
  64 }
  65 .region-header .branding {
  66   font-size: 1em;
  67 }
  68 .region-header .form-text {
  69   background: #fefefe;
  70   background: rgba(255, 255, 255, 0.7);
  71   border-color: #ccc;
  72   border-color: rgba(255, 255, 255, 0.3);
  73   margin-right: 2px; /* LTR */
  74   width: 120px;
  75 }
  76 [dir="rtl"] .region-header .form-text {
  77   margin-left: 2px;
  78   margin-right: 0;
  79 }
  80 .region-header .form-text:hover,
  81 .region-header .form-text:focus,
  82 .region-header .form-text:active {
  83   background: #fff;
  84   background: rgba(255, 255, 255, 0.8);
  85 }
  86 .region-header .form-required:after {
  87   background-image: url(../../images/required.svg);
  88 }
  89 /* Region header block menus. */
  90 .region-header .block-menu {
  91   border: 1px solid;
  92   border-color: #eee;
  93   border-color: rgba(255, 255, 255, 0.2);
  94   padding: 0;
  95   width: 208px;
  96 }
  97 .region-header .block-menu li a {
  98   display: block;
  99   border-bottom: 1px solid;
 100   border-bottom-color: #eee;
 101   border-bottom-color: rgba(255, 255, 255, 0.2);
 102   padding: 3px 7px;
 103 }
 104 .region-header .block-menu li a:hover,
 105 .region-header .block-menu li a:focus,
 106 .region-header .block-menu li a:active {
 107   text-decoration: none;
 108   background: rgba(255, 255, 255, 0.15);
 109 }
 110 .region-header .block-menu li:last-child a {
 111   border-bottom: 0;
 112 }
 113 /* User Login block in the header region. */
 114 .region-header #block-user-login {
 115   width: auto;
 116 }
 117 .region-header #block-user-login .content {
 118   margin-top: 2px;
 119 }
 120 .region-header #block-user-login .form-item {
 121   float: left; /* LTR */
 122   margin: 0;
 123   padding: 0;
 124 }
 125 .region-header #block-user-login div.item-list,
 126 .region-header #block-user-login div.description {
 127   font-size: 0.916em;
 128   margin: 0;
 129 }
 130 .region-header #block-user-login div.item-list {
 131   clear: both;
 132 }
 133 .region-header #block-user-login div.description {
 134   display: inline;
 135 }
 136 .region-header #block-user-login .item-list ul {
 137   padding: 0;
 138   line-height: 1;
 139 }
 140 .region-header #block-user-login .item-list li {
 141   list-style: none;
 142   float: left; /* LTR */
 143   padding: 3px 0 1px;
 144 }
 145 .region-header #block-user-login .item-list li:last-child {
 146   padding-left: 0.5em; /* LTR */
 147 }
 148 [dir="rtl"] .region-header #block-user-login .item-list li:last-child {
 149   padding-left: 0;
 150   padding-right: 0.5em;
 151 }
 152 .region-header #block-user-login .form-actions {
 153   margin: 4px 0 0;
 154   padding: 0;
 155   clear: both;
 156 }
 157 .region-header #block-user-login input.form-submit {
 158   border: 1px solid;
 159   border-color: #ccc;
 160   border-color: rgba(255, 255, 255, 0.5);
 161   background: #eee;
 162   background: rgba(255, 255, 255, 0.7);
 163   margin: 4px 0;
 164   padding: 3px 8px;
 165 }
 166 .region-header #block-user-login input.form-submit:hover,
 167 .region-header #block-user-login input.form-submit:focus {
 168   background: #fff;
 169   background: rgba(255, 255, 255, 0.9);
 170 }
 171 /* Search block in header region. */
 172 .region-header #block-search-form {
 173   width: 208px;
 174 }
 175 .region-header #block-search-form .form-text {
 176   width: 154px;
 177 }
 178 .region-header .search-block-form {
 179   float: right; /* LTR */
 180 }
 181 [dir="rtl"] .region-header .search-block-form {
 182   float: left;
 183 }
 184
 185 /* Language switcher block in header region. */
 186 .region-header .block-locale ul li {
 187   display: inline;
 188   padding: 0 0.5em;
 189 }
 190 [role*=banner] a {
 191   border-bottom: none;
 192 }
 193
 194 [dir="rtl"] .branding,
 195 [dir="rtl"] .site-logo,
 196 [dir="rtl"] .site-branding-text,
 197 [dir="rtl"] .region-header #block-user-login .form-item,
 198 [dir="rtl"] .region-header #block-user-login .item-list li {
 199   float: right;
 200 }