Styling for the titlebar within the off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/titlebar.css
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Styling for the titlebar within the off-canvas dialog.

  11.  *

  12.  * @internal

  13.  */

  14. 

  15. #drupal-off-canvas-wrapper {

  16.   --off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));

  17.   --off-canvas-title-background-color: #2d2d2d;

  18.   --off-canvas-title-text-color: #fff;

  19.   --off-canvas-title-font-size: 1rem;

  20. }

  21. 

  22. #drupal-off-canvas-wrapper .ui-dialog-titlebar {

  23.   position: relative;

  24.   margin: 0 calc(-1 * var(--off-canvas-padding));

  25.   padding: var(--off-canvas-title-padding) 3.125rem;

  26.   color: var(--off-canvas-title-text-color);

  27.   background-color: var(--off-canvas-title-background-color);

  28.   font-family: var(--off-canvas-title-font-family);

  29.   font-size: var(--off-canvas-title-font-size);

  30.   font-weight: bold;

  31. 

  32.   /* The pencil icon. */

  33. }

  34. 

  35. #drupal-off-canvas-wrapper .ui-dialog-titlebar::before {

  36.   position: absolute;

  37.   top: 0;

  38.   inset-inline-start: 1em;

  39.   display: block;

  40.   width: 1.25rem;

  41.   height: 100%;

  42.   content: "";

  43.   background-color: currentColor;

  44.   -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");

  45.   mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");

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

  47.   mask-repeat: no-repeat;

  48.   -webkit-mask-size: contain;

  49.   mask-size: contain;

  50.   -webkit-mask-position: center;

  51.   mask-position: center;

  52. }

  53. 

  54. @media (forced-colors: active) {

  55.   #drupal-off-canvas-wrapper .ui-dialog-titlebar::before {

  56.     background-color: canvastext;

  57.   }

  58. }

  59. 

  60. /* Close button. */

  61. 

  62. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close {

  63.   position: absolute;

  64.   top: 50%;

  65.   inset-inline: auto 0.625rem;

  66.   overflow: hidden;

  67.   width: 1.875rem;

  68.   height: 1.875rem;

  69.   cursor: pointer;

  70.   transform: translateY(-50%);

  71.   text-indent: -624.9375rem;

  72.   color: inherit;

  73.   border: 1px solid transparent;

  74.   background-color: transparent;

  75.   -webkit-appearance: none;

  76.   appearance: none;

  77. }

  78. 

  79. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus {

  80.   outline: solid 2px currentColor;

  81.   outline-offset: 2px;

  82. }

  83. 

  84. /* The plus icon. */

  85. 

  86. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close::before,

  87. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close::after {

  88.   position: absolute;

  89.   top: calc(50% - 1px);

  90.   left: 50%;

  91.   width: 50%;

  92.   height: 0;

  93.   content: "";

  94.   border-top: solid 2px currentColor;

  95. }

  96. 

  97. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close::before {

  98.   transform: translate(-50%, 50%) rotate(-45deg);

  99. }

  100. 

  101. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close::after {

  102.   transform: translate(-50%, 50%) rotate(45deg);

  103. }

  104. 

  105. /* Hide the default jQuery UI dialog close button. */

  106. 

  107. #drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon {

  108.   display: none;

  109. }