header-sticky-toggle.css in Drupal 10

Sticky Header Toggle Button.

This button shows on the left hand side of the header (in LTR layouts), and toggles fixing the header to the top of the viewport.

File

core/themes/olivero/css/components/header-sticky-toggle.css

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

/**
 * @file
 * Sticky Header Toggle Button.
 *
 * This button shows on the left hand side of the header (in LTR layouts), and
 * toggles fixing the header to the top of the viewport.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

.sticky-header-toggle {
  display: none
}

@media (min-width: 75rem) {

.sticky-header-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--content-left);
    height: var(--sp6);
    pointer-events: none;
    opacity: 0;
    border: 0;
    outline: 0;
    background-color: var(--color--primary-50)
}

    .sticky-header-toggle:focus {
      cursor: pointer;
      pointer-events: auto;
      opacity: 1;
      outline: solid 2px var(--color--white);
      outline-offset: -4px;
    }
  }

@media (min-width: 75rem) {

body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
    visibility: visible
}
  }

@media (min-width: 75rem) {

body.is-always-mobile-nav .sticky-header-toggle {
    visibility: hidden
}
  }

.sticky-header-toggle__icon {
  position: relative;
  width: var(--sp2);
  height: 1.3125rem;
  transition: opacity 0.2s;
  pointer-events: none;
  transform-style: preserve-3d
}

.sticky-header-toggle__icon > span {
    display: block;
    height: 0;
    /* Intentionally not using CSS logical properties. */
    border-top: solid 3px var(--color--white)
  }

[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {
      left: 0
}

[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) {
      right: 0
}

.sticky-header-toggle__icon > span:nth-child(1) {
      position: absolute;
      top: 0;
      width: 100%;
      height: 0;
      transition: transform 0.2s;
      background-color: var(--color--white);
    }

[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {
      left: 0
}

[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) {
      right: 0
}

.sticky-header-toggle__icon > span:nth-child(2) {
      position: absolute;
      top: 0.5625rem;
      width: 100%;
      height: 0;
      transition: opacity 0.2s;
      background-color: var(--color--white);
    }

[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {
      left: 0
}

[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) {
      right: 0
}

.sticky-header-toggle__icon > span:nth-child(3) {
      position: absolute;
      top: auto;
      bottom: 0;
      width: 100%;
      height: 0;
      transition: transform 0.2s;
      background-color: var(--color--white);
    }

.is-fixed .sticky-header-toggle {
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
}

[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
    top: 0.5625rem;
    transform: rotate(-45deg);
  }

[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
    opacity: 0;
  }

[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
    top: 0.5625rem;
    transform: rotate(45deg);
  }