sidebar.css

Same filename and directory in other branches
  1. 9 core/themes/bartik/css/components/sidebar.css
  2. 8.9.x core/themes/bartik/css/components/sidebar.css
#gin-sidebar-draggable {
  position: absolute;
  z-index: 104;
  display: block;
  width: 2px;
  height: 100%;
  padding: 0;
  cursor: ew-resize;
  inset-block-start: 0;
  inset-inline-start: 0;
}

@media (prefers-reduced-motion: no-preference) {
  #gin-sidebar-draggable {
    transition: var(--gin-transition-fast);
  }
}

#gin-sidebar-draggable:hover {
  background-color: var(--gin-border-color-table);
}

#gin-sidebar-draggable:active {
  background-color: var(--gin-border-color);
}

@media (prefers-reduced-motion: no-preference) {
  .layout-region--secondary {
    transition: transform var(--gin-transition-fast);
  }
}

@media (max-width: 60.99em) {
  .layout-region--secondary {
    --gin-sidebar-width: var(--gin-sidebar-small-width);
  }
}

@media (max-width: 63.99em) {
  .layout-region--secondary {
    visibility: hidden;
    opacity: 0;
  }
}

body[data-meta-sidebar="closed"] {
  --gin-sidebar-offset: 0px;
}

body[data-meta-sidebar="closed"] .layout-region--secondary {
  visibility: hidden;
  transform: translateX(var(--gin-sidebar-width));
}

[dir="rtl"] body[data-meta-sidebar="closed"] .layout-region--secondary {
  transform: translateX(calc(var(--gin-sidebar-width) * -1));
}

@media (max-width: 63.99em) {
  body[data-meta-sidebar="open"] .layout-region--secondary {
    visibility: visible;
    opacity: 1;
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,
.meta-sidebar__close {
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: var(--gin-border-m);
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,
  .meta-sidebar__close {
    transition: background var(--gin-transition-fast);
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close::before,
.meta-sidebar__close::before {
  display: inline-block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--gin-icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:hover,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:focus,
.meta-sidebar__close:hover,
.meta-sidebar__close:focus {
  background-color: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:hover::before,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:focus::before,
.meta-sidebar__close:hover::before,
.meta-sidebar__close:focus::before {
  background-color: var(--gin-color-primary);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close.is-active,
.meta-sidebar__close.is-active {
  background-color: var(--gin-color-primary-light-hover);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close.is-active::before,
.meta-sidebar__close.is-active::before {
  background-color: var(--gin-color-primary-active);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger,
.meta-sidebar__trigger {
  display: block;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: var(--gin-border-m);
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger,
  .meta-sidebar__trigger {
    transition: background var(--gin-transition-fast);
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger::before,
.meta-sidebar__trigger::before {
  display: inline-block;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  background-color: var(--gin-icon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../../media/sprite.svg#sidebar-view");
  mask-image: url("../../media/sprite.svg#sidebar-view");
  -webkit-mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);
  mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:hover,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:focus,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active:hover,
.meta-sidebar__trigger:hover,
.meta-sidebar__trigger:focus,
.meta-sidebar__trigger.is-active,
.meta-sidebar__trigger.is-active:hover {
  background-color: var(--gin-color-primary-light);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:hover::before,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:focus::before,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active::before,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active:hover::before,
.meta-sidebar__trigger:hover::before,
.meta-sidebar__trigger:focus::before,
.meta-sidebar__trigger.is-active::before,
.meta-sidebar__trigger.is-active:hover::before {
  background-color: var(--gin-color-primary);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active,
.meta-sidebar__trigger.is-active {
  background-color: var(--gin-bg-item-hover);
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,
.meta-sidebar__close {
  position: absolute;
  z-index: 104;
  inset-block-start: 18px;
  inset-inline-end: var(--gin-spacing-m);
}

@media (min-width: 64em) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,
  .meta-sidebar__close {
    display: none;
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close::before,
.meta-sidebar__close::before {
  -webkit-mask-image: url("../../media/sprite.svg#close-view");
  mask-image: url("../../media/sprite.svg#close-view");
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,
.meta-sidebar__overlay {
  position: fixed;
  z-index: 102;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--gin-bg-layer2);
  inset-block-start: 0;
  inset-inline-start: 0;
}

body[data-meta-sidebar="open"] :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,
body[data-meta-sidebar="open"] .meta-sidebar__overlay {
  visibility: visible;
  opacity: 0.9;
}

@media (min-width: 64em) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,
  .meta-sidebar__overlay {
    display: none;
  }
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/sidebar.css

View source 
  1. #gin-sidebar-draggable {

  2.   position: absolute;

  3.   z-index: 104;

  4.   display: block;

  5.   width: 2px;

  6.   height: 100%;

  7.   padding: 0;

  8.   cursor: ew-resize;

  9.   inset-block-start: 0;

  10.   inset-inline-start: 0;

  11. }

  12. 

  13. @media (prefers-reduced-motion: no-preference) {

  14.   #gin-sidebar-draggable {

  15.     transition: var(--gin-transition-fast);

  16.   }

  17. }

  18. 

  19. #gin-sidebar-draggable:hover {

  20.   background-color: var(--gin-border-color-table);

  21. }

  22. 

  23. #gin-sidebar-draggable:active {

  24.   background-color: var(--gin-border-color);

  25. }

  26. 

  27. @media (prefers-reduced-motion: no-preference) {

  28.   .layout-region--secondary {

  29.     transition: transform var(--gin-transition-fast);

  30.   }

  31. }

  32. 

  33. @media (max-width: 60.99em) {

  34.   .layout-region--secondary {

  35.     --gin-sidebar-width: var(--gin-sidebar-small-width);

  36.   }

  37. }

  38. 

  39. @media (max-width: 63.99em) {

  40.   .layout-region--secondary {

  41.     visibility: hidden;

  42.     opacity: 0;

  43.   }

  44. }

  45. 

  46. body[data-meta-sidebar="closed"] {

  47.   --gin-sidebar-offset: 0px;

  48. }

  49. 

  50. body[data-meta-sidebar="closed"] .layout-region--secondary {

  51.   visibility: hidden;

  52.   transform: translateX(var(--gin-sidebar-width));

  53. }

  54. 

  55. [dir="rtl"] body[data-meta-sidebar="closed"] .layout-region--secondary {

  56.   transform: translateX(calc(var(--gin-sidebar-width) * -1));

  57. }

  58. 

  59. @media (max-width: 63.99em) {

  60.   body[data-meta-sidebar="open"] .layout-region--secondary {

  61.     visibility: visible;

  62.     opacity: 1;

  63.   }

  64. }

  65. 

  66. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,

  67. .meta-sidebar__close {

  68.   width: 32px;

  69.   height: 32px;

  70.   cursor: pointer;

  71.   border-radius: var(--gin-border-m);

  72.   background: transparent;

  73. }

  74. 

  75. @media (prefers-reduced-motion: no-preference) {

  76.   :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,

  77.   .meta-sidebar__close {

  78.     transition: background var(--gin-transition-fast);

  79.   }

  80. }

  81. 

  82. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close::before,

  83. .meta-sidebar__close::before {

  84.   display: inline-block;

  85.   width: 100%;

  86.   height: 100%;

  87.   content: "";

  88.   background-color: var(--gin-icon-color);

  89.   -webkit-mask-repeat: no-repeat;

  90.   mask-repeat: no-repeat;

  91.   -webkit-mask-position: center center;

  92.   mask-position: center center;

  93. }

  94. 

  95. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:hover,

  96. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:focus,

  97. .meta-sidebar__close:hover,

  98. .meta-sidebar__close:focus {

  99.   background-color: var(--gin-color-primary-light);

  100. }

  101. 

  102. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:hover::before,

  103. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close:focus::before,

  104. .meta-sidebar__close:hover::before,

  105. .meta-sidebar__close:focus::before {

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

  107. }

  108. 

  109. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close.is-active,

  110. .meta-sidebar__close.is-active {

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

  112. }

  113. 

  114. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close.is-active::before,

  115. .meta-sidebar__close.is-active::before {

  116.   background-color: var(--gin-color-primary-active);

  117. }

  118. 

  119. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger,

  120. .meta-sidebar__trigger {

  121.   display: block;

  122.   width: 32px;

  123.   height: 32px;

  124.   cursor: pointer;

  125.   border-radius: var(--gin-border-m);

  126.   background: transparent;

  127. }

  128. 

  129. @media (prefers-reduced-motion: no-preference) {

  130.   :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger,

  131.   .meta-sidebar__trigger {

  132.     transition: background var(--gin-transition-fast);

  133.   }

  134. }

  135. 

  136. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger::before,

  137. .meta-sidebar__trigger::before {

  138.   display: inline-block;

  139.   width: 100%;

  140.   height: 100%;

  141.   content: "";

  142.   border-radius: 50%;

  143.   background-color: var(--gin-icon-color);

  144.   -webkit-mask-repeat: no-repeat;

  145.   mask-repeat: no-repeat;

  146.   -webkit-mask-position: center center;

  147.   mask-position: center center;

  148.   -webkit-mask-image: url("../../media/sprite.svg#sidebar-view");

  149.   mask-image: url("../../media/sprite.svg#sidebar-view");

  150.   -webkit-mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);

  151.   mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);

  152. }

  153. 

  154. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:hover,

  155. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:focus,

  156. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active,

  157. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active:hover,

  158. .meta-sidebar__trigger:hover,

  159. .meta-sidebar__trigger:focus,

  160. .meta-sidebar__trigger.is-active,

  161. .meta-sidebar__trigger.is-active:hover {

  162.   background-color: var(--gin-color-primary-light);

  163. }

  164. 

  165. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:hover::before,

  166. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger:focus::before,

  167. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active::before,

  168. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active:hover::before,

  169. .meta-sidebar__trigger:hover::before,

  170. .meta-sidebar__trigger:focus::before,

  171. .meta-sidebar__trigger.is-active::before,

  172. .meta-sidebar__trigger.is-active:hover::before {

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

  174. }

  175. 

  176. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger.is-active,

  177. .meta-sidebar__trigger.is-active {

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

  179. }

  180. 

  181. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,

  182. .meta-sidebar__close {

  183.   position: absolute;

  184.   z-index: 104;

  185.   inset-block-start: 18px;

  186.   inset-inline-end: var(--gin-spacing-m);

  187. }

  188. 

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

  190.   :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,

  191.   .meta-sidebar__close {

  192.     display: none;

  193.   }

  194. }

  195. 

  196. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close::before,

  197. .meta-sidebar__close::before {

  198.   -webkit-mask-image: url("../../media/sprite.svg#close-view");

  199.   mask-image: url("../../media/sprite.svg#close-view");

  200.   -webkit-mask-size: 16px 16px;

  201.   mask-size: 16px 16px;

  202. }

  203. 

  204. :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,

  205. .meta-sidebar__overlay {

  206.   position: fixed;

  207.   z-index: 102;

  208.   visibility: hidden;

  209.   width: 100%;

  210.   height: 100%;

  211.   opacity: 0;

  212.   background: var(--gin-bg-layer2);

  213.   inset-block-start: 0;

  214.   inset-inline-start: 0;

  215. }

  216. 

  217. body[data-meta-sidebar="open"] :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,

  218. body[data-meta-sidebar="open"] .meta-sidebar__overlay {

  219.   visibility: visible;

  220.   opacity: 0.9;

  221. }

  222. 

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

  224.   :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,

  225.   .meta-sidebar__overlay {

  226.     display: none;

  227.   }

  228. }

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