|
28 | 28 | & > input[type="checkbox"][id] {
|
29 | 29 | @include a11y-visually-hidden($partial: $partial);
|
30 | 30 |
|
31 |
| - @media screen and (min-width: 1024px) { |
| 31 | + @media screen and (width > $db-break-the-header-max-width) { |
32 | 32 | // Hiding the navigation toggle elements on huger viewports
|
33 | 33 | &,
|
34 | 34 | & + label[for] {
|
|
60 | 60 | }
|
61 | 61 |
|
62 | 62 | // Displaying the main navigation as an top to bottom overlay on smaller viewports
|
63 |
| - @media screen and (max-width: 1023px) { |
| 63 | + @media screen and (max-width: $db-break-the-header-max-width) { |
64 | 64 | background-color: $db-color-cool-gray-600;
|
65 | 65 | left: 0;
|
66 | 66 | position: absolute;
|
|
89 | 89 |
|
90 | 90 | // Multiple level navigation
|
91 | 91 | ul ul {
|
92 |
| - @media screen and (min-width: 1024px) { |
| 92 | + @media screen and (width > $db-break-the-header-max-width) { |
93 | 93 | box-shadow: $box-shadow-01, $box-shadow-02;
|
94 | 94 | position: absolute;
|
95 | 95 | visibility: hidden;
|
96 | 96 |
|
97 | 97 | z-index: $z-index-rea-header-cmp-mainnavigation-submenu;
|
98 | 98 | }
|
99 | 99 |
|
100 |
| - @media screen and (max-width: 1023px) { |
| 100 | + @media screen and (max-width: $db-break-the-header-max-width) { |
101 | 101 | display: none;
|
102 | 102 | }
|
103 | 103 | }
|
104 | 104 |
|
105 | 105 | // First Level
|
106 | 106 | & > ul {
|
107 |
| - @media screen and (min-width: 1024px) { |
| 107 | + @media screen and (width > $db-break-the-header-max-width) { |
108 | 108 | display: flex;
|
109 | 109 | }
|
110 | 110 |
|
111 | 111 | & > li,
|
112 | 112 | & > * > li {
|
113 | 113 | & > .elm-link,
|
114 | 114 | & > * > .elm-link {
|
115 |
| - @media screen and (min-width: 1024px) { |
| 115 | + @media screen and (width > $db-break-the-header-max-width) { |
116 | 116 | padding: $mainnavigation-link--paddingTop
|
117 | 117 | to-rem($pxValue: 26) $mainnavigation-link--paddingBottom;
|
118 | 118 |
|
|
132 | 132 |
|
133 | 133 | // From second level
|
134 | 134 | ul {
|
135 |
| - @media screen and (min-width: 1024px) { |
| 135 | + @media screen and (width > $db-break-the-header-max-width) { |
136 | 136 | left: 0;
|
137 | 137 | min-width: 100%;
|
138 | 138 | top: to-rem($pxValue: 79);
|
|
158 | 158 | & > * > li {
|
159 | 159 | & > .elm-link,
|
160 | 160 | & > * > .elm-link {
|
161 |
| - @media screen and (max-width: 1023px) { |
| 161 | + @media screen and (max-width: $db-break-the-header-max-width) { |
162 | 162 | padding-left: to-rem($pxValue: 34);
|
163 | 163 | }
|
164 | 164 | }
|
|
169 | 169 | & > * > li {
|
170 | 170 | & > .elm-link,
|
171 | 171 | & > * > .elm-link {
|
172 |
| - @media screen and (max-width: 1023px) { |
| 172 | + @media screen and (max-width: $db-break-the-header-max-width) { |
173 | 173 | padding-left: to-rem($pxValue: 60);
|
174 | 174 | }
|
175 | 175 | }
|
|
207 | 207 | & > ul,
|
208 | 208 | & > * > ul {
|
209 | 209 | visibility: visible;
|
210 |
| - @media screen and (max-width: 1023px) { |
| 210 | + @media screen and (max-width: $db-break-the-header-max-width) { |
211 | 211 | display: initial;
|
212 | 212 | }
|
213 | 213 | }
|
214 | 214 | }
|
215 | 215 |
|
216 |
| - @media screen and (max-width: 1023px) { |
| 216 | + @media screen and (max-width: $db-break-the-header-max-width) { |
217 | 217 | background-color: $db-color-cool-gray-600;
|
218 | 218 | color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
|
219 | 219 |
|
|
238 | 238 | position: relative;
|
239 | 239 | }
|
240 | 240 | }
|
241 |
| - @media screen and (min-width: 1024px) { |
| 241 | + @media screen and (width > $db-break-the-header-max-width) { |
242 | 242 | // Do not show Icon for menu on bigger screens
|
243 | 243 | &[aria-haspopup="true"] {
|
244 | 244 | &::after {
|
|
0 commit comments