wide-nav-expand.pcss.css

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

Button which expands the navigation at wide viewport widths.

File

core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css

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

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