This repository has been archived on 2025-01-19. You can view files and clone it, but cannot push or open issues or pull requests.
drupalcampbristol/core/themes/bartik/css/components/header.css

264 lines
5.7 KiB
CSS
Raw Normal View History

/* ------------------ Header ------------------ */
#header {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header .section {
position: relative;
}
.region-header {
float: right; /* LTR */
margin: .5em 5px .75em;
}
[dir="rtl"] .region-header {
float: left;
}
@media all and (min-width: 461px) and (max-width: 900px) {
.region-header {
margin: .5em 5px .75em;
}
}
@media all and (min-width: 901px) {
.region-header {
margin: 1em 5px 1.5em;
}
}
#logo,
.site-logo {
float: left; /* LTR */
padding: 4px 4px 4px 9px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 4px 9px 4px 4px;
}
@media all and (min-width: 461px) and (max-width: 900px) {
#logo,
.site-logo {
padding: 5px 0 0 5px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 5px 5px 0 0;
}
}
@media all and (min-width: 901px) {
#logo,
.site-logo {
padding: 9px 4px 4px 9px; /* LTR */
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo {
padding: 9px 9px 4px 4px;
}
}
#name-and-slogan,
.site-branding-text {
float: left; /* LTR */
margin: 0;
padding: 5px 10px 8px;
}
[dir="rtl"] #name-and-slogan,
[dir="rtl"] .site-branding-text {
margin: 0 15px 30px 0;
}
@media all and (min-width: 461px) and (max-width: 900px) {
#name-and-slogan,
.site-branding-text {
padding: 10px 10px 8px;
}
}
@media all and (min-width: 901px) {
#name-and-slogan,
.site-branding-text {
padding: 26px 0 0;
margin: 0 0 30px 15px; /* LTR */
}
[dir="rtl"] #name-and-slogan,
[dir="rtl"] .site-branding-text {
margin: 0 15px 30px 0;
}
}
#site-name,
.site-name {
font-size: 1.6em;
color: #686868;
line-height: 1;
}
@media all and (min-width: 901px) {
#site-name,
.site-name {
font-size: 1.821em;
}
}
h1#site-name,
h1.site-name {
margin: 0;
}
#site-name a,
.site-name a {
font-weight: normal;
}
#site-slogan,
.site-slogan {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.929em;
margin-top: 7px;
word-spacing: 0.1em;
font-style: italic;
}
/* Region header blocks. */
.region-header .block {
font-size: 0.857em;
float: left; /* LTR */
margin: 0 10px;
padding: 0;
}
.region-header .block > h2 {
/* @extend .visually-hidden */
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
}
.header .block .content {
margin: 0;
padding: 0;
}
.region-header .block ul {
margin: 0;
padding: 0;
}
.region-header .block li {
list-style: none;
list-style-image: none;
padding: 0;
}
.region-header .form-text {
background: #fefefe;
background: rgba(255, 255, 255, 0.7);
border-color: #ccc;
border-color: rgba(255, 255, 255, 0.3);
margin-right: 2px; /* LTR */
width: 120px;
}
[dir="rtl"] .region-header .form-text {
margin-left: 2px;
margin-right: 0;
}
.region-header .form-text:hover,
.region-header .form-text:active,
.region-header .form-text:focus {
background: #fff;
background: rgba(255, 255, 255, 0.8);
}
.region-header .form-required:after {
background-image: url(../../images/required.svg);
}
/* Region header block menus. */
.region-header .block-menu {
border: 1px solid;
border-color: #eee;
border-color: rgba(255, 255, 255, 0.2);
padding: 0;
width: 208px;
}
.region-header .block-menu li a {
display: block;
border-bottom: 1px solid;
border-bottom-color: #eee;
border-bottom-color: rgba(255, 255, 255, 0.2);
padding: 3px 7px;
}
.region-header .block-menu li a:hover,
.region-header .block-menu li a:active,
.region-header .block-menu li a:focus {
text-decoration: none;
background: rgba(255, 255, 255, 0.15);
}
.region-header .block-menu li:last-child a {
border-bottom: 0;
}
/* User Login block in the header region */
.region-header #block-user-login {
width: auto;
}
.region-header #block-user-login .content {
margin-top: 2px;
}
.region-header #block-user-login .form-item {
float: left; /* LTR */
margin: 0;
padding: 0;
}
.region-header #block-user-login div.item-list,
.region-header #block-user-login div.description {
font-size: 0.916em;
margin: 0;
}
.region-header #block-user-login div.item-list {
clear: both;
}
.region-header #block-user-login div.description {
display: inline;
}
.region-header #block-user-login .item-list ul {
padding: 0;
line-height: 1;
}
.region-header #block-user-login .item-list li {
list-style: none;
float: left; /* LTR */
padding: 3px 0 1px;
}
.region-header #block-user-login .item-list li:last-child {
padding-left: 0.5em; /* LTR */
}
[dir="rtl"] .region-header #block-user-login .item-list li:last-child {
padding-left: 0;
padding-right: 0.5em;
}
.region-header #block-user-login .form-actions {
margin: 4px 0 0;
padding: 0;
clear: both;
}
.region-header #block-user-login input.form-submit {
border: 1px solid;
border-color: #ccc;
border-color: rgba(255, 255, 255, 0.5);
background: #eee;
background: rgba(255, 255, 255, 0.7);
margin: 4px 0;
padding: 3px 8px;
}
.region-header #block-user-login input.form-submit:hover,
.region-header #block-user-login input.form-submit:focus {
background: #fff;
background: rgba(255, 255, 255, 0.9);
}
/* Search block in region header. */
.region-header #block-search-form {
width: 208px;
}
.region-header #block-search-form .form-text {
width: 154px;
}
/* Language switcher block in region header. */
.region-header .block-locale ul li {
display: inline;
padding: 0 0.5em;
}
[role*=banner] a {
border-bottom: none;
}
[dir="rtl"] #logo,
[dir="rtl"] .site-logo,
[dir="rtl"] #name-and-slogan,
[dir="rtl"] .site-branding-text,
[dir="rtl"] .region-header .block,
[dir="rtl"] .region-header #block-user-login .form-item,
[dir="rtl"] .region-header #block-user-login .item-list li {
float: right;
}