header.css

Same filename in this branch
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
  2. 9 core/themes/bartik/css/components/header.css
  3. 10 core/profiles/demo_umami/themes/umami/components/header/header.css
  4. 10 core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
  5. 11.x core/profiles/demo_umami/themes/umami/components/header/header.css
  6. 11.x core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
/* ------------------ Header ------------------ */
#header {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header .section {
  position: relative;
}
.region-header {
  padding: 0.357em 15px 0;
}
.region-header .site-branding {
  margin-top: 0.429em;
}

@media all and (min-width: 461px) {
  .region-header .block {
    float: right; /* LTR */
    margin-top: 0.357em;
  }
  [dir="rtl"] .region-header .block {
    float: left;
  }
  .region-header .site-branding {
    float: left; /* LTR */
    /* margin-bottom: 1.857em; */
  }
  [dir="rtl"] .region-header .site-branding {
    float: right;
  }
}

@media screen and (max-width: 460px) {
  .region-header {
    padding-bottom: 0.357em;
  }
}
/* Region header blocks. */
.region-header .block:not(.site-branding) {
  clear: right;
  margin: 0 0 1em;
  font-size: 0.857em;
}

@media all and (min-width: 901px) {
  .region-header .block:not(.site-branding) {
    margin: 1.167em 0 1em;
  }
}
.region-header .block > h2 {
  /* @extend .visually-hidden */
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
}
.header .block .content {
  margin: 0;
  padding: 0;
}
.region-header .block ul {
  padding: 0;
}
.region-header .block li {
  padding: 0;
  list-style: none;
  list-style-image: none;
}
.region-header .branding {
  font-size: 1em;
}
.region-header .form-text {
  width: 120px;
  margin-right: 2px; /* LTR */
  border-color: #ccc;
  border-color: rgba(255, 255, 255, 0.3);
  background: #fefefe;
  background: rgba(255, 255, 255, 0.7);
}
[dir="rtl"] .region-header .form-text {
  margin-right: 0;
  margin-left: 2px;
}
.region-header .form-text:hover,
.region-header .form-text:focus,
.region-header .form-text:active {
  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 {
  width: 208px;
  padding: 0;
  border: 1px solid;
  border-color: #eee;
  border-color: rgba(255, 255, 255, 0.2);
}
.region-header .block-menu li a {
  display: block;
  padding: 3px 7px;
  border-bottom: 1px solid;
  border-bottom-color: #eee;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.region-header .block-menu li a:hover,
.region-header .block-menu li a:focus,
.region-header .block-menu li a:active {
  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 {
  margin: 0;
  font-size: 0.916em;
}
.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 {
  float: left; /* LTR */
  padding: 3px 0 1px;
  list-style: none;
}
.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-right: 0.5em;
  padding-left: 0;
}
.region-header #block-user-login .form-actions {
  clear: both;
  margin: 4px 0 0;
  padding: 0;
}
.region-header #block-user-login input.form-submit {
  margin: 4px 0;
  padding: 3px 8px;
  border: 1px solid;
  border-color: #ccc;
  border-color: rgba(255, 255, 255, 0.5);
  background: #eee;
  background: rgba(255, 255, 255, 0.7);
}
.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 header region. */
.region-header #block-search-form {
  width: 208px;
}
.region-header #block-search-form .form-text {
  width: 154px;
}
.region-header .search-block-form {
  float: right; /* LTR */
}
[dir="rtl"] .region-header .search-block-form {
  float: left;
}

/* Language switcher block in header region. */
.region-header .block-locale ul li {
  display: inline;
  padding: 0 0.5em;
}
[role*=banner] a {
  border-bottom: none;
}

[dir="rtl"] .branding,
[dir="rtl"] .site-logo,
[dir="rtl"] .site-branding-text,
[dir="rtl"] .region-header #block-user-login .form-item,
[dir="rtl"] .region-header #block-user-login .item-list li {
  float: right;
}

File

core/themes/bartik/css/components/header.css

View source 
  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. 

  15. @media all and (min-width: 461px) {

  16.   .region-header .block {

  17.     float: right; /* LTR */

  18.     margin-top: 0.357em;

  19.   }

  20.   [dir="rtl"] .region-header .block {

  21.     float: left;

  22.   }

  23.   .region-header .site-branding {

  24.     float: left; /* LTR */

  25.     /* margin-bottom: 1.857em; */

  26.   }

  27.   [dir="rtl"] .region-header .site-branding {

  28.     float: right;

  29.   }

  30. }

  31. 

  32. @media screen and (max-width: 460px) {

  33.   .region-header {

  34.     padding-bottom: 0.357em;

  35.   }

  36. }

  37. /* Region header blocks. */

  38. .region-header .block:not(.site-branding) {

  39.   clear: right;

  40.   margin: 0 0 1em;

  41.   font-size: 0.857em;

  42. }

  43. 

  44. @media all and (min-width: 901px) {

  45.   .region-header .block:not(.site-branding) {

  46.     margin: 1.167em 0 1em;

  47.   }

  48. }

  49. .region-header .block > h2 {

  50.   /* @extend .visually-hidden */

  51.   position: absolute !important;

  52.   overflow: hidden;

  53.   clip: rect(1px, 1px, 1px, 1px);

  54.   height: 1px;

  55. }

  56. .header .block .content {

  57.   margin: 0;

  58.   padding: 0;

  59. }

  60. .region-header .block ul {

  61.   padding: 0;

  62. }

  63. .region-header .block li {

  64.   padding: 0;

  65.   list-style: none;

  66.   list-style-image: none;

  67. }

  68. .region-header .branding {

  69.   font-size: 1em;

  70. }

  71. .region-header .form-text {

  72.   width: 120px;

  73.   margin-right: 2px; /* LTR */

  74.   border-color: #ccc;

  75.   border-color: rgba(255, 255, 255, 0.3);

  76.   background: #fefefe;

  77.   background: rgba(255, 255, 255, 0.7);

  78. }

  79. [dir="rtl"] .region-header .form-text {

  80.   margin-right: 0;

  81.   margin-left: 2px;

  82. }

  83. .region-header .form-text:hover,

  84. .region-header .form-text:focus,

  85. .region-header .form-text:active {

  86.   background: #fff;

  87.   background: rgba(255, 255, 255, 0.8);

  88. }

  89. .region-header .form-required:after {

  90.   background-image: url(../../images/required.svg);

  91. }

  92. /* Region header block menus. */

  93. .region-header .block-menu {

  94.   width: 208px;

  95.   padding: 0;

  96.   border: 1px solid;

  97.   border-color: #eee;

  98.   border-color: rgba(255, 255, 255, 0.2);

  99. }

  100. .region-header .block-menu li a {

  101.   display: block;

  102.   padding: 3px 7px;

  103.   border-bottom: 1px solid;

  104.   border-bottom-color: #eee;

  105.   border-bottom-color: rgba(255, 255, 255, 0.2);

  106. }

  107. .region-header .block-menu li a:hover,

  108. .region-header .block-menu li a:focus,

  109. .region-header .block-menu li a:active {

  110.   text-decoration: none;

  111.   background: rgba(255, 255, 255, 0.15);

  112. }

  113. .region-header .block-menu li:last-child a {

  114.   border-bottom: 0;

  115. }

  116. /* User Login block in the header region. */

  117. .region-header #block-user-login {

  118.   width: auto;

  119. }

  120. .region-header #block-user-login .content {

  121.   margin-top: 2px;

  122. }

  123. .region-header #block-user-login .form-item {

  124.   float: left; /* LTR */

  125.   margin: 0;

  126.   padding: 0;

  127. }

  128. .region-header #block-user-login div.item-list,

  129. .region-header #block-user-login div.description {

  130.   margin: 0;

  131.   font-size: 0.916em;

  132. }

  133. .region-header #block-user-login div.item-list {

  134.   clear: both;

  135. }

  136. .region-header #block-user-login div.description {

  137.   display: inline;

  138. }

  139. .region-header #block-user-login .item-list ul {

  140.   padding: 0;

  141.   line-height: 1;

  142. }

  143. .region-header #block-user-login .item-list li {

  144.   float: left; /* LTR */

  145.   padding: 3px 0 1px;

  146.   list-style: none;

  147. }

  148. .region-header #block-user-login .item-list li:last-child {

  149.   padding-left: 0.5em; /* LTR */

  150. }

  151. [dir="rtl"] .region-header #block-user-login .item-list li:last-child {

  152.   padding-right: 0.5em;

  153.   padding-left: 0;

  154. }

  155. .region-header #block-user-login .form-actions {

  156.   clear: both;

  157.   margin: 4px 0 0;

  158.   padding: 0;

  159. }

  160. .region-header #block-user-login input.form-submit {

  161.   margin: 4px 0;

  162.   padding: 3px 8px;

  163.   border: 1px solid;

  164.   border-color: #ccc;

  165.   border-color: rgba(255, 255, 255, 0.5);

  166.   background: #eee;

  167.   background: rgba(255, 255, 255, 0.7);

  168. }

  169. .region-header #block-user-login input.form-submit:hover,

  170. .region-header #block-user-login input.form-submit:focus {

  171.   background: #fff;

  172.   background: rgba(255, 255, 255, 0.9);

  173. }

  174. /* Search block in header region. */

  175. .region-header #block-search-form {

  176.   width: 208px;

  177. }

  178. .region-header #block-search-form .form-text {

  179.   width: 154px;

  180. }

  181. .region-header .search-block-form {

  182.   float: right; /* LTR */

  183. }

  184. [dir="rtl"] .region-header .search-block-form {

  185.   float: left;

  186. }

  187. 

  188. /* Language switcher block in header region. */

  189. .region-header .block-locale ul li {

  190.   display: inline;

  191.   padding: 0 0.5em;

  192. }

  193. [role*=banner] a {

  194.   border-bottom: none;

  195. }

  196. 

  197. [dir="rtl"] .branding,

  198. [dir="rtl"] .site-logo,

  199. [dir="rtl"] .site-branding-text,

  200. [dir="rtl"] .region-header #block-user-login .form-item,

  201. [dir="rtl"] .region-header #block-user-login .item-list li {

  202.   float: right;

  203. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.