wide-nav-expand.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/navigation/wide-nav-expand.css
  2. 11.x 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: 5.625rem;
  22. height: 6.75rem;
  23. cursor: pointer;
  24. pointer-events: auto;
  25. color: #fff;
  26. border: 0;
  27. background-color: #2494db;
  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: 2.25rem;
  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. [dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {
  60. left: 0;
  61. }
  62. [dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {
  63. right: 0;
  64. }
  65. .wide-nav-expand__icon > span:nth-child(1) {
  66. position: absolute;
  67. top: 0;
  68. width: 100%;
  69. height: 0;
  70. transition: transform 0.2s;
  71. background-color: currentColor;
  72. }
  73. [dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {
  74. left: 0;
  75. }
  76. [dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {
  77. right: 0;
  78. }
  79. .wide-nav-expand__icon > span:nth-child(2) {
  80. position: absolute;
  81. top: 0.5625rem;
  82. width: 100%;
  83. height: 0;
  84. transition: opacity 0.2s;
  85. background-color: currentColor;
  86. }
  87. [dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {
  88. left: 0;
  89. }
  90. [dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {
  91. right: 0;
  92. }
  93. .wide-nav-expand__icon > span:nth-child(3) {
  94. position: absolute;
  95. top: auto;
  96. bottom: 0;
  97. width: 100%;
  98. height: 0;
  99. transition: transform 0.2s;
  100. background-color: currentColor;
  101. }
  102. .is-fixed .wide-nav-expand__icon {
  103. opacity: 1;
  104. }
  105. [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
  106. top: 0.5625rem;
  107. transform: rotate(-45deg);
  108. }
  109. [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {
  110. opacity: 0;
  111. }
  112. [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
  113. top: 0.5625rem;
  114. transform: rotate(45deg);
  115. }

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