workspaces.off-canvas.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Styling for the Workspaces off-canvas user interface.
 */

#drupal-off-canvas-wrapper.workspaces-dialog {
  padding-bottom: calc(var(--off-canvas-padding) / 2);

  & .ui-dialog-content > div {
    @media (min-width: 47.9375rem) {
      display: flex;
      align-items: flex-end;
      width: 100%;
      height: 100%;
    }
  }

  & + .ui-dialog .ui-dialog-content {
    @media (max-width: 47.9375rem) {
      max-height: unset !important; /* Override the max-height added by JS. */
    }
  }

  /**
   * The Workspace UI hides the titlebar, but we need to show and correctly
   * position the close button that is nested within it.
   */
  & .ui-dialog-titlebar {
    all: revert;

    &::before {
      content: none;
    }

    & .ui-dialog-title {
      display: none;
    }

    & .ui-dialog-titlebar-close {
      inset-block-start: 1em;
      inset-inline-end: 1em;
      z-index: 1;
      transform: none;
    }
  }

  & .active-workspace {
    padding: 0 var(--off-canvas-padding);

    @media (min-width: 47.9375rem) {
      display: flex;
      flex-direction: column;
      flex-basis: 12.5rem;
      flex-grow: 2;
      align-self: stretch;
      order: 1;
      padding: var(--off-canvas-padding) var(--off-canvas-padding) 0;
    }
  }

  & .active-workspace__title {
    font-size: 0.8125rem;
    font-weight: bold;
  }

  & .active-workspace__label {
    position: relative; /* Anchor icon pseudo-element. */
    padding: 1.125rem 3.125rem 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.2;

    &::before {
      position: absolute;
      inset-inline-start: 0;
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      content: "";
      background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e  %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
      background-size: contain;

      @media (min-width: 47.9375rem) {
        width: 2.5rem;
        height: 2.5rem;
      }
    }
  }

  /* This is the "Manage workspace" link that appears when you're on a non-default workspace. */
  & .active-workspace__manage {
    display: block;
    font-size: 0.8125rem;
  }

  /* This is the link to "View all workspaces". */
  & .all-workspaces {
    display: inline-block;
    padding: var(--off-canvas-padding);
    font-size: 0.875rem;

    @media (min-width: 47.9375rem) {
      grid-row: 1;
      grid-column: 2;
      justify-self: end;
      padding: 0;
    }
  }

  & .workspaces {
    & > h3 {
      margin-top: 0;
    }

    & ul {
      display: flex;
      flex-direction: column;
      grid-row: 2;
      grid-column: 1 / -1;
      margin: 0;
      padding: 0;
      list-style: none;
      gap: 2px;

      @media (min-width: 47.9375rem) {
        flex-direction: row;
      }
    }

    & li {
      flex: 1;
    }

    @media (min-width: 47.9375rem) {
      display: grid;
      flex-grow: 8;
      grid-template-columns: 1fr 1fr;
    }
  }

  /* This is the link to the workspace. */
  & .workspaces__item {
    position: relative;
    display: block;
    min-height: 4.6875rem;
    padding-block-start: var(--off-canvas-padding);
    padding-inline-start: 3.125rem;
    color: var(--off-canvas-text-color);
    outline-offset: -2px; /* Ensure focus outline doesn't overflow. */
    background-color: var(--off-canvas-background-color-light);
    font-size: 0.875rem;
    font-weight: bold;

    &:hover,
    &:focus {
      background-color: #666;
    }

    &::before {
      position: absolute;
      inset-inline-start: var(--off-canvas-padding);
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      content: "";
      background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3e  %3cpath fill='%23F0A100' fill-rule='evenodd' d='M38,0 L2.002,0 C0.896716337,-1.37884559e-07 0.000552089742,0.895716475 0,2.001 L0,38.003 C0,39.105 0.899,40.003 2,40.003 L38,40.003 C39.103,40.003 40,39.103 40,38.003 L40,2.001 C40.000531,1.47031248 39.7900198,0.961193334 39.4148607,0.585846626 C39.0397016,0.210499918 38.5306877,-0.000265742306 38,0 Z M34.003,4 C35.105,4 36.003,4.899 36.003,6 C36.003,7.102 35.103,7.998 34.003,7.998 C32.9235903,7.96385326 32.0662376,7.07894966 32.0662376,5.999 C32.0662376,4.91905034 32.9235903,4.03414674 34.003,4 Z M26.003,4 C27.105,4 28.002,4.899 28.002,6 C28.002,7.102 27.102,7.998 26.002,7.998 C24.9225903,7.96385326 24.0652376,7.07894966 24.0652376,5.999 C24.0652376,4.91905034 24.9225903,4.03414674 26.002,4 L26.003,4 Z M18.002,4 C19.104,4 20.002,4.899 20.002,6 C20.002,7.102 19.102,7.998 18.002,7.998 C16.899,7.998 16.002,7.1 16.002,5.999 C16.0025521,4.89482104 16.8978209,3.99999986 18.002,4 Z M36.002,36.002 L4,36.002 L4,12.001 L36.002,12.001 L36.002,36.002 Z M8.805,32.002 L15.196,32.002 C15.4092125,32.0030667 15.6140295,31.9189775 15.764983,31.7683995 C15.9159365,31.6178215 16.0005357,31.4132145 16,31.2 L16,16.805 C16.0005341,16.5919596 15.916072,16.3875055 15.7653354,16.2369566 C15.6145988,16.0864077 15.4100395,16.0022004 15.197,16.003 L8.794,16.003 C8.581215,16.0027342 8.37706868,16.087145 8.22660684,16.2376068 C8.07614501,16.3880687 7.99173418,16.592215 7.992,16.805 L7.992,31.208 C7.99966319,31.6507223 8.36222028,32.0048063 8.805,32.002 Z M20.803,24.002 L31.206,24.002 C31.4190404,24.0025341 31.6234945,23.918072 31.7740434,23.7673354 C31.9245923,23.6165988 32.0087996,23.4120395 32.008,23.199 L32.008,16.797 C32.0085328,16.5841335 31.9242078,16.3798319 31.7736879,16.2293121 C31.6231681,16.0787922 31.4188665,15.9944672 31.206,15.995 L20.803,15.995 C20.5901335,15.9944672 20.3858319,16.0787922 20.2353121,16.2293121 C20.0847922,16.3798319 20.0004672,16.5841335 20.001,16.797 L20.001,23.199 C20.001,23.646 20.356,24.001 20.803,24.001 L20.803,24.002 Z M20.803,32.002 L31.206,32.002 C31.4188665,32.0025328 31.6231681,31.9182078 31.7736879,31.7676879 C31.9242078,31.6171681 32.0085328,31.4128665 32.008,31.2 L32.008,28.797 C32.0085328,28.5841335 31.9242078,28.3798319 31.7736879,28.2293121 C31.6231681,28.0787922 31.4188665,27.9944672 31.206,27.995 L20.803,27.995 C20.5901335,27.9944672 20.3858319,28.0787922 20.2353121,28.2293121 C20.0847922,28.3798319 20.0004672,28.5841335 20.001,28.797 L20.001,31.2 C20.001,31.647 20.356,32.002 20.803,32.002 Z'/%3e%3c/svg%3e") center center no-repeat;
      background-size: 100% auto;
    }
  }

  & .active-workspace--default .active-workspace__label::before,
  & .workspaces__item--default::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e  %3cpath fill='%2381C071' fill-rule='evenodd' d='M19,0 L1,0 C0.449,0 0,0.448 0,1 L0,19 C0,19.552 0.45,20 1,20 L19,20 C19.552,20 20,19.55 20,19 L20,1 C20,0.44771525 19.5522847,3.38176876e-17 19,0 Z M17.001,2 C17.553,2 18.001,2.45 18.001,3 C18.001,3.55 17.551,3.999 17.001,3.999 C16.451,3.999 16.001,3.549 16.001,2.999 C16.001,2.44671525 16.4487153,1.999 17.001,1.999 L17.001,2 Z M13.001,2 C13.552,2 14.001,2.45 14.001,3 C14.001,3.55 13.551,3.999 13.001,3.999 C12.4487153,3.999 12.001,3.55128475 12.001,2.999 C12.001,2.44671525 12.4487153,1.999 13.001,1.999 L13.001,2 Z M9.001,2 C9.552,2 10.001,2.45 10.001,3 C10.001,3.55 9.551,3.999 9.001,3.999 C8.44871525,3.999 8.001,3.55128475 8.001,2.999 C8.001,2.44671525 8.44871525,1.999 9.001,1.999 L9.001,2 Z M18.001,18 L2,18 L2,6 L18.001,6 L18.001,18 Z M4.402,16 L7.598,16 C7.70460623,16.0005334 7.80701477,15.9584887 7.88249152,15.8831997 C7.95796827,15.8079107 8.00026785,15.7056072 8,15.599 L8,8.402 C8.00026565,8.29574025 7.95824022,8.19374159 7.88319685,8.11851062 C7.80815349,8.04327965 7.70626008,8.00099967 7.6,8.001 L4.396,8.001 C4.28956674,8.00073358 4.18741595,8.04289612 4.11215603,8.11815603 C4.03689612,8.19341595 3.99473358,8.29556674 3.995,8.402 L3.995,15.603 C3.999,15.823 4.177,16 4.401,16 L4.402,16 Z M10.402,12 L15.603,12 C15.7094333,12.0002664 15.811584,11.9581039 15.886844,11.882844 C15.9621039,11.807584 16.0042664,11.7054333 16.004,11.599 L16.004,8.398 C16.0042664,8.29156674 15.9621039,8.18941595 15.886844,8.11415603 C15.811584,8.03889612 15.7094333,7.99673358 15.603,7.997 L10.402,7.997 C10.2957402,7.99673435 10.1937416,8.03875978 10.1185106,8.11380315 C10.0432796,8.18884651 10.0009997,8.29073992 10.001,8.397 L10.001,11.6 C10.001,11.824 10.178,12 10.401,12 L10.402,12 Z M10.402,16 L15.603,16 C15.7094333,16.0002664 15.811584,15.9581039 15.886844,15.882844 C15.9621039,15.807584 16.0042664,15.7054333 16.004,15.599 L16.004,14.398 C16.0042664,14.2915667 15.9621039,14.189416 15.886844,14.114156 C15.811584,14.0388961 15.7094333,13.9967336 15.603,13.997 L10.402,13.997 C10.2957402,13.9967343 10.1937416,14.0387598 10.1185106,14.1138031 C10.0432796,14.1888465 10.0009997,14.2907399 10.001,14.397 L10.001,15.6 C10.001,15.824 10.178,16 10.401,16 L10.402,16 Z'/%3e%3c/svg%3e"); /* Green icon. */
  }

  & .active-workspace__actions .button {
    margin: 0.625rem 0 0;
  }

  @media (max-width: 47.9375rem) {
    height: 100% !important;
  }
}