header-sticky-toggle.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/header-sticky-toggle.css
  2. 10 core/themes/olivero/css/components/header-sticky-toggle.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.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. * @file
  9. * Sticky Header Toggle Button.
  10. *
  11. * This button shows on the left hand side of the header (in LTR layouts), and
  12. * toggles fixing the header to the top of the viewport.
  13. */
  14. .sticky-header-toggle {
  15. display: none;
  16. }
  17. @media (min-width: 75rem) {
  18. .sticky-header-toggle {
  19. display: flex;
  20. flex-shrink: 0;
  21. align-items: center;
  22. justify-content: center;
  23. width: var(--content-left);
  24. height: var(--sp6);
  25. pointer-events: none;
  26. opacity: 0;
  27. border: 0;
  28. outline: 0;
  29. background-color: var(--color--primary-50);
  30. }
  31. .sticky-header-toggle:focus {
  32. cursor: pointer;
  33. pointer-events: auto;
  34. opacity: 1;
  35. outline: solid 2px var(--color--white);
  36. outline-offset: -4px;
  37. }
  38. }
  39. @media (min-width: 75rem) {
  40. body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
  41. visibility: visible;
  42. }
  43. }
  44. @media (min-width: 75rem) {
  45. body.is-always-mobile-nav .sticky-header-toggle {
  46. visibility: hidden;
  47. }
  48. }
  49. .sticky-header-toggle__icon {
  50. --icon-bar-height: 0.1875rem;
  51. --icon-bar-space: 0.4375rem;
  52. display: flex;
  53. flex-direction: column;
  54. justify-content: space-between;
  55. width: var(--sp2);
  56. height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
  57. /* Height = 3 bars + 2 spaces */
  58. transition: opacity 0.2s;
  59. pointer-events: none;
  60. transform-style: preserve-3d;
  61. }
  62. .sticky-header-toggle__icon > span {
  63. display: block;
  64. width: 100%;
  65. height: var(--icon-bar-height);
  66. transition: transform 0.2s;
  67. transform-origin: center;
  68. background-color: var(--color--white);
  69. }
  70. .is-fixed .sticky-header-toggle {
  71. cursor: pointer;
  72. pointer-events: auto;
  73. opacity: 1;
  74. }
  75. [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
  76. transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
  77. }
  78. [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
  79. opacity: 0;
  80. }
  81. [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
  82. transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
  83. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.