125106f9c0
While Foundations's off-canvas menu allows us to forget about writing CSS, it also leads to complicated HTML. Ideally Foundation would provide an easy way to simplify what we're doing, but I haven't found anything in the documentation. We could simplify the HTML a bit more if we used a CSS grid layout instead of a flex one, but old browsers have better support for the latter. Note we're using `breakpoint(medium)` so we can group the CSS for small screens and follow SCSS-Lint rules at the same time. Also note behavior of the main area when the menu appears on small screens is slightly different: it doesn't move the main content to the right. I've done it this way so we don't have any overflow issues, unlike the previous version. There's a small issue using a label and a checkbox to enable/disable the menu: sighted keyboard users with a small screen might not be able to enable the menu. So we're adding the `:focus-within` pseudoclass so the menu can be normally navigated using the keyboard. Even if old browsers don't support this pseudoclass, we believe the probability of a sighted user using a small screen, navigating with the keyboard and using an old browser is really low, particularly in the admin area. We're also adding the `aria-hidden` attribute on the label, since the menu is never hidden for screen readers and so having a control to show it could be confusing. Since the label is not focusable, we're complying with the fourth ARIA rule: > Do not use role="presentation" or aria-hidden="true" on a focusable > element . > > Using either of these on a focusable element will result in some users > focusing on 'nothing'.
51 lines
1.4 KiB
SCSS
51 lines
1.4 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import "settings";
|
|
@import "consul_settings";
|
|
@import "custom_settings";
|
|
@import "foundation";
|
|
|
|
@import "motion-ui/motion-ui";
|
|
|
|
@include foundation-global-styles;
|
|
// @include foundation-xy-grid-classes;
|
|
@include foundation-grid;
|
|
// @include foundation-flex-grid;
|
|
// @include foundation-flex-classes;
|
|
@include foundation-typography;
|
|
@include foundation-forms;
|
|
@include foundation-button;
|
|
@include foundation-accordion;
|
|
@include foundation-accordion-menu;
|
|
@include foundation-badge;
|
|
@include foundation-breadcrumbs;
|
|
@include foundation-button-group;
|
|
@include foundation-callout;
|
|
@include foundation-card;
|
|
@include foundation-close-button;
|
|
@include foundation-menu;
|
|
@include foundation-menu-icon;
|
|
@include foundation-drilldown-menu;
|
|
@include foundation-dropdown;
|
|
@include foundation-dropdown-menu;
|
|
@include foundation-responsive-embed;
|
|
@include foundation-label;
|
|
@include foundation-media-object;
|
|
@include foundation-orbit;
|
|
@include foundation-pagination;
|
|
@include foundation-progress-bar;
|
|
@include foundation-slider;
|
|
@include foundation-sticky;
|
|
@include foundation-reveal;
|
|
@include foundation-switch;
|
|
@include foundation-table;
|
|
@include foundation-tabs;
|
|
@include foundation-thumbnail;
|
|
@include foundation-title-bar;
|
|
@include foundation-tooltip;
|
|
@include foundation-top-bar;
|
|
@include foundation-visibility-classes;
|
|
@include foundation-float-classes;
|
|
@include motion-ui-transitions;
|
|
@include motion-ui-animations;
|