You are here

Home » API reference » Drupal 10

header-sticky-toggle.pcss.css in Drupal 10

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/header-sticky-toggle.pcss.css

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.pcss.css
View source 
  1. /**

  2.  * @file

  3.  * Sticky Header Toggle Button.

  4.  *

  5.  * This button shows on the left hand side of the header (in LTR layouts), and

  6.  * toggles fixing the header to the top of the viewport.

  7.  */

  8. 

  9. @import "../base/media-queries.pcss.css";

  10. 

  11. .sticky-header-toggle {

  12.   display: none;

  13. 

  14.   @media (--nav) {

  15.     display: flex;

  16.     flex-shrink: 0;

  17.     align-items: center;

  18.     justify-content: center;

  19.     width: var(--content-left);

  20.     height: var(--sp6);

  21.     pointer-events: none;

  22.     opacity: 0;

  23.     border: 0;

  24.     outline: 0;

  25.     background-color: var(--color--primary-50);

  26. 

  27.     &:focus {

  28.       cursor: pointer;

  29.       pointer-events: auto;

  30.       opacity: 1;

  31.       outline: solid 2px var(--color--white);

  32.       outline-offset: -4px;

  33.     }

  34.   }

  35. }

  36. 

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

  38.   @media (--nav) {

  39.     visibility: visible;

  40.   }

  41. }

  42. 

  43. body.is-always-mobile-nav .sticky-header-toggle {

  44.   @media (--nav) {

  45.     visibility: hidden;

  46.   }

  47. }

  48. 

  49. .sticky-header-toggle__icon {

  50.   position: relative;

  51.   width: var(--sp2);

  52.   height: 21px;

  53.   transition: opacity 0.2s;

  54.   pointer-events: none;

  55.   transform-style: preserve-3d;

  56. 

  57.   & > span {

  58.     display: block;

  59.     height: 0;

  60.     /* Intentionally not using CSS logical properties. */

  61.     border-top: solid 3px var(--color--white);

  62. 

  63.     &:nth-child(1) {

  64.       position: absolute;

  65.       inset-block-start: 0;

  66.       inset-inline-start: 0;

  67.       width: 100%;

  68.       height: 0;

  69.       transition: transform 0.2s;

  70.       background-color: var(--color--white);

  71.     }

  72. 

  73.     &:nth-child(2) {

  74.       position: absolute;

  75.       inset-block-start: 9px;

  76.       inset-inline-start: 0;

  77.       width: 100%;

  78.       height: 0;

  79.       transition: opacity 0.2s;

  80.       background-color: var(--color--white);

  81.     }

  82. 

  83.     &:nth-child(3) {

  84.       position: absolute;

  85.       inset-block: auto 0;

  86.       inset-inline-start: 0;

  87.       width: 100%;

  88.       height: 0;

  89.       transition: transform 0.2s;

  90.       background-color: var(--color--white);

  91.     }

  92.   }

  93. }

  94. 

  95. .is-fixed .sticky-header-toggle {

  96.   cursor: pointer;

  97.   pointer-events: auto;

  98.   opacity: 1;

  99. }

  100. 

  101. [aria-checked="true"] .sticky-header-toggle__icon {

  102.   & > span:nth-child(1) {

  103.     inset-block-start: 9px;

  104.     transform: rotate(-45deg);

  105.   }

  106. 

  107.   & > span:nth-child(2) {

  108.     opacity: 0;

  109.   }

  110. 

  111.   & > span:nth-child(3) {

  112.     inset-block-start: 9px;

  113.     transform: rotate(45deg);

  114.   }

  115. }