wide-nav-expand.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/navigation/wide-nav-expand.css
  2. 10 core/themes/olivero/css/components/navigation/wide-nav-expand.css

Button which expands the navigation at wide viewport widths.

File

core/themes/olivero/css/components/navigation/wide-nav-expand.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. * Button which expands the navigation at wide viewport widths.
  10. */
  11. .wide-nav-expand {
  12. display: none;
  13. }
  14. @media (min-width: 75rem) {
  15. .wide-nav-expand {
  16. display: flex;
  17. visibility: hidden;
  18. flex-shrink: 0;
  19. align-items: center;
  20. justify-content: center;
  21. width: var(--content-left);
  22. height: var(--sp6);
  23. cursor: pointer;
  24. pointer-events: auto;
  25. color: var(--color--white);
  26. border: 0;
  27. background-color: var(--color--primary-50);
  28. }
  29. .wide-nav-expand:focus {
  30. outline: solid 2px currentColor;
  31. outline-offset: -4px;
  32. }
  33. }
  34. @media (min-width: 75rem) {
  35. body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
  36. visibility: visible;
  37. }
  38. }
  39. @media (min-width: 75rem) {
  40. body.is-always-mobile-nav .wide-nav-expand {
  41. visibility: hidden;
  42. }
  43. }
  44. .wide-nav-expand__icon {
  45. position: relative;
  46. width: var(--sp2);
  47. height: 1.3125rem;
  48. transition: opacity 0.2s;
  49. pointer-events: none;
  50. opacity: 0;
  51. transform-style: preserve-3d;
  52. }
  53. .wide-nav-expand__icon > span {
  54. display: block;
  55. height: 0;
  56. /* Intentionally not using CSS logical properties. */
  57. border-top: solid 3px currentColor;
  58. }
  59. .wide-nav-expand__icon > span:nth-child(1) {
  60. position: absolute;
  61. inset-block-start: 0;
  62. inset-inline-start: 0;
  63. width: 100%;
  64. height: 0;
  65. transition: transform 0.2s;
  66. background-color: currentColor;
  67. }
  68. .wide-nav-expand__icon > span:nth-child(2) {
  69. position: absolute;
  70. inset-block-start: 0.5625rem;
  71. inset-inline-start: 0;
  72. width: 100%;
  73. height: 0;
  74. transition: opacity 0.2s;
  75. background-color: currentColor;
  76. }
  77. .wide-nav-expand__icon > span:nth-child(3) {
  78. position: absolute;
  79. inset-block: auto 0;
  80. inset-inline-start: 0;
  81. width: 100%;
  82. height: 0;
  83. transition: transform 0.2s;
  84. background-color: currentColor;
  85. }
  86. .is-fixed .wide-nav-expand__icon {
  87. opacity: 1;
  88. }
  89. [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
  90. inset-block-start: 0.5625rem;
  91. transform: rotate(-45deg);
  92. }
  93. [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {
  94. opacity: 0;
  95. }
  96. [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
  97. inset-block-start: 0.5625rem;
  98. transform: rotate(45deg);
  99. }

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