header.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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. /* Language switcher block in header region. */
  185. .region-header .block-locale ul li {
  186. display: inline;
  187. padding: 0 0.5em;
  188. }
  189. [role*=banner] a {
  190. border-bottom: none;
  191. }
  192. [dir="rtl"] .branding,
  193. [dir="rtl"] .site-logo,
  194. [dir="rtl"] .site-branding-text,
  195. [dir="rtl"] .region-header #block-user-login .form-item,
  196. [dir="rtl"] .region-header #block-user-login .item-list li {
  197. float: right;
  198. }