toolbar.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/components/toolbar/toolbar.css
  2. 11.x core/themes/admin/migration/css/components/toolbar.css
Same filename and directory in other branches
  1. 10 core/profiles/demo_umami/themes/umami/css/components/navigation/toolbar/toolbar.css
  2. 10 core/profiles/demo_umami/themes/umami/css/components/toolbar/toolbar.css
  3. 7.x modules/toolbar/toolbar.css
  4. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/toolbar/toolbar.css
  5. 9 core/profiles/demo_umami/themes/umami/css/components/toolbar/toolbar.css
  6. 9 core/themes/bartik/css/components/toolbar.css
  7. 8.9.x core/profiles/demo_umami/themes/umami/css/components/navigation/toolbar/toolbar.css
  8. 8.9.x core/profiles/demo_umami/themes/umami/css/components/toolbar/toolbar.css
  9. 8.9.x core/themes/bartik/css/components/toolbar.css
:root {
  --gin-toolbar-height: 39px;
  --gin-toolbar-secondary-height: 48px;
  --gin-scroll-offset: 72px;
  --gin-toolbar-y-offset: var(--gin-toolbar-height);
  --gin-toolbar-x-offset: 0px;
  --gin-sticky-offset: 0px;
}

@media (min-width: 64em) {
  :root {
    --gin-toolbar-secondary-height: 64px;
    --gin-icon-size-toolbar: 16px;
    --gin-scroll-offset: 200px;
  }

  :root .gin--edit-form {
    --gin-sticky-offset: var(--gin-height-sticky);
  }
}

@media (min-width: 61em) {
  .toolbar-fixed.toolbar-tray-open:not(.toolbar-vertical) {
    --gin-toolbar-y-offset: 78px;
  }
}

.region-breadcrumb {
  margin-block-start: var(--gin-spacing-m);
}

.toolbar .toolbar-bar {
  position: fixed;
  inset-inline-start: 0;
  width: 100%;
  background: #100f10;
  box-shadow: none;
}

.toolbar .toolbar-menu,
.toolbar-horizontal .menu-item > .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
.toolbar .toolbar-tray {
  background-color: var(--gin-bg-layer);
}

.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
  border-inline-start: 1px solid var(--gin-border-color);
}

.toolbar-tray-horizontal ul li.menu-item .menu-item {
  border-block-end: 1px solid var(--gin-border-color);
}

.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {
  padding-inline-end: 2.25em;
}

.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
  inset-block-start: 0.75rem;
}

.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
  width: 100%;
}

.toolbar-tray a,
.toolbar-tray span,
.toolbar .toolbar-menu .toolbar-menu a,
.toolbar .toolbar-menu .toolbar-menu span {
  color: var(--gin-color-text);
}

.toolbar-tray a:hover,
.toolbar-tray span:hover,
.toolbar .toolbar-menu .toolbar-menu a:hover,
.toolbar .toolbar-menu .toolbar-menu span:hover {
  color: var(--gin-color-title);
}

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,
.toolbar .toolbar-tray a.is-active {
  color: var(--gin-color-primary);
  background-color: transparent;
  font-weight: var(--gin-font-weight-bold);
}

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a::before,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active::before,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active::before,
.toolbar .toolbar-tray a.is-active::before {
  background: var(--gin-color-primary);
}

.toolbar .toolbar-tray .menu-item:hover > .toolbar-icon,
.toolbar .toolbar-tray .toolbar-menu > li:hover > a {
  color: var(--gin-color-primary-hover);
  background-color: var(--gin-bg-item-hover);
}

.toolbar .toolbar-tray .menu-item:hover > .toolbar-icon::before,
.toolbar .toolbar-tray .toolbar-menu > li:hover > a::before {
  background: var(--gin-color-primary);
}

#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {
  background: #100f10;
}

#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item,
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
  background: var(--gin-color-primary);
}

#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
  background: var(--gin-color-primary-hover);
}

#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item:hover::before,
#toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover::before {
  background: #fff;
}

.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus,
.toolbar .toolbar-icon.toolbar-handle:focus {
  background-color: var(--gin-bg-layer2);
}

.toolbar-tray-horizontal .menu-item:hover {
  background-color: transparent;
}

.toolbar-menu__trigger,
.toolbar .menu-item-title,
.menu-item-sub-title {
  display: none !important;
}

.gin--dark-mode .toolbar .toolbar-toggle-orientation {
  background-color: var(--gin-bg-layer2);
}

.gin--toolbar .page-wrapper__node-edit-form .layout-region--secondary {
  padding-block-start: var(--gin-toolbar-y-offset);
}

@media (min-width: 64em) {
  .gin--toolbar table.sticky-header {
    margin-block-start: 0;
  }
}

.toolbar-menu .menu-item > span {
  padding-inline-start: 2.75em;
}

.toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help {
  width: auto;
  height: 100%;
  text-indent: -999em;
}

.toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help::before {
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

@media (min-width: 61em) {
  .toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help::before {
    inset-inline-start: var(--gin-spacing-m);
  }
}

@media (min-width: 64em) {
  #toolbar-item-administration-tray .toolbar-logo img {
    max-height: 21px;
  }
}

.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
  position: relative;
}

.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded::before,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus::before {
  inset-block-start: var(--gin-spacing-s);
  inset-inline-end: var(--gin-spacing-s);
}

#admin-toolbar-search-tab .form-item::before {
  inset-block-start: 6px;
  inset-inline-start: 26px;
}

#admin-toolbar-search-input {
  padding-inline-start: var(--gin-spacing-xl);
}

#toolbar-item-administration-tray,
.toolbar-loading #toolbar-item-administration-tray {
  border-block-end: 1px solid var(--gin-border-color);
  box-shadow: 0 0 4px rgb(0, 0, 0, 0.1);
}

#toolbar-item-administration-tray .toolbar-lining,
.toolbar-loading #toolbar-item-administration-tray .toolbar-lining {
  background-color: var(--gin-bg-layer);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/layout/toolbar.css

View source 
  1. :root {

  2.   --gin-toolbar-height: 39px;

  3.   --gin-toolbar-secondary-height: 48px;

  4.   --gin-scroll-offset: 72px;

  5.   --gin-toolbar-y-offset: var(--gin-toolbar-height);

  6.   --gin-toolbar-x-offset: 0px;

  7.   --gin-sticky-offset: 0px;

  8. }

  9. 

  10. @media (min-width: 64em) {

  11.   :root {

  12.     --gin-toolbar-secondary-height: 64px;

  13.     --gin-icon-size-toolbar: 16px;

  14.     --gin-scroll-offset: 200px;

  15.   }

  16. 

  17.   :root .gin--edit-form {

  18.     --gin-sticky-offset: var(--gin-height-sticky);

  19.   }

  20. }

  21. 

  22. @media (min-width: 61em) {

  23.   .toolbar-fixed.toolbar-tray-open:not(.toolbar-vertical) {

  24.     --gin-toolbar-y-offset: 78px;

  25.   }

  26. }

  27. 

  28. .region-breadcrumb {

  29.   margin-block-start: var(--gin-spacing-m);

  30. }

  31. 

  32. .toolbar .toolbar-bar {

  33.   position: fixed;

  34.   inset-inline-start: 0;

  35.   width: 100%;

  36.   background: #100f10;

  37.   box-shadow: none;

  38. }

  39. 

  40. .toolbar .toolbar-menu,

  41. .toolbar-horizontal .menu-item > .toolbar-menu,

  42. .toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,

  43. .toolbar .toolbar-tray {

  44.   background-color: var(--gin-bg-layer);

  45. }

  46. 

  47. .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {

  48.   border-inline-start: 1px solid var(--gin-border-color);

  49. }

  50. 

  51. .toolbar-tray-horizontal ul li.menu-item .menu-item {

  52.   border-block-end: 1px solid var(--gin-border-color);

  53. }

  54. 

  55. .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {

  56.   padding-inline-end: 2.25em;

  57. }

  58. 

  59. .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {

  60.   inset-block-start: 0.75rem;

  61. }

  62. 

  63. .toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {

  64.   width: 100%;

  65. }

  66. 

  67. .toolbar-tray a,

  68. .toolbar-tray span,

  69. .toolbar .toolbar-menu .toolbar-menu a,

  70. .toolbar .toolbar-menu .toolbar-menu span {

  71.   color: var(--gin-color-text);

  72. }

  73. 

  74. .toolbar-tray a:hover,

  75. .toolbar-tray span:hover,

  76. .toolbar .toolbar-menu .toolbar-menu a:hover,

  77. .toolbar .toolbar-menu .toolbar-menu span:hover {

  78.   color: var(--gin-color-title);

  79. }

  80. 

  81. .toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,

  82. .toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,

  83. .toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,

  84. .toolbar .toolbar-tray a.is-active {

  85.   color: var(--gin-color-primary);

  86.   background-color: transparent;

  87.   font-weight: var(--gin-font-weight-bold);

  88. }

  89. 

  90. .toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a::before,

  91. .toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active::before,

  92. .toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active::before,

  93. .toolbar .toolbar-tray a.is-active::before {

  94.   background: var(--gin-color-primary);

  95. }

  96. 

  97. .toolbar .toolbar-tray .menu-item:hover > .toolbar-icon,

  98. .toolbar .toolbar-tray .toolbar-menu > li:hover > a {

  99.   color: var(--gin-color-primary-hover);

  100.   background-color: var(--gin-bg-item-hover);

  101. }

  102. 

  103. .toolbar .toolbar-tray .menu-item:hover > .toolbar-icon::before,

  104. .toolbar .toolbar-tray .toolbar-menu > li:hover > a::before {

  105.   background: var(--gin-color-primary);

  106. }

  107. 

  108. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode {

  109.   background: #100f10;

  110. }

  111. 

  112. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item,

  113. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,

  114. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {

  115.   background: var(--gin-color-primary);

  116. }

  117. 

  118. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,

  119. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {

  120.   background: var(--gin-color-primary-hover);

  121. }

  122. 

  123. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item:hover::before,

  124. #toolbar-bar.toolbar-bar.js-settings-tray-edit-mode .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover::before {

  125.   background: #fff;

  126. }

  127. 

  128. .toolbar-tray-horizontal a:focus,

  129. .toolbar-box a:focus,

  130. .toolbar .toolbar-icon.toolbar-handle:focus {

  131.   background-color: var(--gin-bg-layer2);

  132. }

  133. 

  134. .toolbar-tray-horizontal .menu-item:hover {

  135.   background-color: transparent;

  136. }

  137. 

  138. .toolbar-menu__trigger,

  139. .toolbar .menu-item-title,

  140. .menu-item-sub-title {

  141.   display: none !important;

  142. }

  143. 

  144. .gin--dark-mode .toolbar .toolbar-toggle-orientation {

  145.   background-color: var(--gin-bg-layer2);

  146. }

  147. 

  148. .gin--toolbar .page-wrapper__node-edit-form .layout-region--secondary {

  149.   padding-block-start: var(--gin-toolbar-y-offset);

  150. }

  151. 

  152. @media (min-width: 64em) {

  153.   .gin--toolbar table.sticky-header {

  154.     margin-block-start: 0;

  155.   }

  156. }

  157. 

  158. .toolbar-menu .menu-item > span {

  159.   padding-inline-start: 2.75em;

  160. }

  161. 

  162. .toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help {

  163.   width: auto;

  164.   height: 100%;

  165.   text-indent: -999em;

  166. }

  167. 

  168. .toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help::before {

  169.   -webkit-mask-size: 20px 20px;

  170.   mask-size: 20px 20px;

  171. }

  172. 

  173. @media (min-width: 61em) {

  174.   .toolbar .toolbar-bar .toolbar-icon-admin-toolbar-tools-help::before {

  175.     inset-inline-start: var(--gin-spacing-m);

  176.   }

  177. }

  178. 

  179. @media (min-width: 64em) {

  180.   #toolbar-item-administration-tray .toolbar-logo img {

  181.     max-height: 21px;

  182.   }

  183. }

  184. 

  185. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,

  186. .toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {

  187.   position: relative;

  188. }

  189. 

  190. .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded::before,

  191. .toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus::before {

  192.   inset-block-start: var(--gin-spacing-s);

  193.   inset-inline-end: var(--gin-spacing-s);

  194. }

  195. 

  196. #admin-toolbar-search-tab .form-item::before {

  197.   inset-block-start: 6px;

  198.   inset-inline-start: 26px;

  199. }

  200. 

  201. #admin-toolbar-search-input {

  202.   padding-inline-start: var(--gin-spacing-xl);

  203. }

  204. 

  205. #toolbar-item-administration-tray,

  206. .toolbar-loading #toolbar-item-administration-tray {

  207.   border-block-end: 1px solid var(--gin-border-color);

  208.   box-shadow: 0 0 4px rgb(0, 0, 0, 0.1);

  209. }

  210. 

  211. #toolbar-item-administration-tray .toolbar-lining,

  212. .toolbar-loading #toolbar-item-administration-tray .toolbar-lining {

  213.   background-color: var(--gin-bg-layer);

  214. }

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