titlebar.css

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.   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-repeat: no-repeat;

  46.   mask-size: contain;

  47.   mask-position: center;

  48. }

  49. 

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

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

  52.     background-color: canvastext;

  53.   }

  54. }

  55. 

  56. /* Close button. */

  57. 

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

  59.   position: absolute;

  60.   top: 50%;

  61.   inset-inline: auto 0.625rem;

  62.   overflow: hidden;

  63.   width: 1.875rem;

  64.   height: 1.875rem;

  65.   cursor: pointer;

  66.   transform: translateY(-50%);

  67.   text-indent: -624.9375rem;

  68.   color: inherit;

  69.   border: 1px solid transparent;

  70.   background-color: transparent;

  71.   appearance: none;

  72. }

  73. 

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

  75.   outline: solid 2px currentColor;

  76.   outline-offset: 2px;

  77. }

  78. 

  79. /* The plus icon. */

  80. 

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

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

  83.   position: absolute;

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

  85.   left: 50%;

  86.   width: 50%;

  87.   height: 0;

  88.   content: "";

  89.   border-top: solid 2px currentColor;

  90. }

  91. 

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

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

  94. }

  95. 

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

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

  98. }

  99. 

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

  101. 

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

  103.   display: none;

  104. }