titlebar.pcss.css

Styling for the titlebar within the off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/titlebar.pcss.css

View source 
  1. /**

  2.  * @file

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

  4.  *

  5.  * @internal

  6.  */

  7. 

  8. #drupal-off-canvas-wrapper {

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

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

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

  12.   --off-canvas-title-font-size: 16px;

  13. 

  14.   & .ui-dialog-titlebar {

  15.     position: relative;

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

  17.     padding: var(--off-canvas-title-padding) 50px;

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

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

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

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

  22.     font-weight: bold;

  23. 

  24.     /* The pencil icon. */

  25.     &::before {

  26.       position: absolute;

  27.       top: 0;

  28.       inset-inline-start: 1em;

  29.       display: block;

  30.       width: 20px;

  31.       height: 100%;

  32.       content: "";

  33.       background-color: currentColor;

  34.       mask-image: url(../../../icons/ffffff/pencil.svg);

  35.       mask-repeat: no-repeat;

  36.       mask-size: contain;

  37.       mask-position: center;

  38. 

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

  40.         background-color: canvastext;

  41.       }

  42.     }

  43.   }

  44. 

  45.   /* Close button. */

  46.   & .ui-dialog-titlebar-close {

  47.     position: absolute;

  48.     top: 50%;

  49.     inset-inline: auto 10px;

  50.     overflow: hidden;

  51.     width: 30px;

  52.     height: 30px;

  53.     cursor: pointer;

  54.     transform: translateY(-50%);

  55.     text-indent: -9999px;

  56.     color: inherit;

  57.     border: 1px solid transparent;

  58.     background-color: transparent;

  59.     appearance: none;

  60. 

  61.     &:focus {

  62.       outline: solid 2px currentColor;

  63.       outline-offset: 2px;

  64.     }

  65. 

  66.     /* The plus icon. */

  67.     &::before,

  68.     &::after {

  69.       position: absolute;

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

  71.       left: 50%;

  72.       width: 50%;

  73.       height: 0;

  74.       content: "";

  75.       border-top: solid 2px currentColor;

  76.     }

  77. 

  78.     &::before {

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

  80.     }

  81. 

  82.     &::after {

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

  84.     }

  85. 

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

  87.     & .ui-icon {

  88.       display: none;

  89.     }

  90.   }

  91. }