mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-23 15:57:23 -04:00
Add progressive enhancement to service switcher
- by default, the menu is open - if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to show that it can be opened are added - clicking it opens and closes it
This commit is contained in:
53
app/assets/stylesheets/components/dropdown.scss
Normal file
53
app/assets/stylesheets/components/dropdown.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
%dropdown,
|
||||
.dropdown {
|
||||
|
||||
position: relative;
|
||||
|
||||
.js-enabled &-toggle {
|
||||
|
||||
color: $link-colour;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '▼';
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.js-closed &-toggle::before {
|
||||
content: '▶';
|
||||
left: -1px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
display: block;
|
||||
|
||||
.js-enabled & {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.js-closed {
|
||||
|
||||
a {
|
||||
left: -9999em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.management-navigation {
|
||||
|
||||
@extend %site-width-container;
|
||||
@include core-19();
|
||||
@include core-16();
|
||||
border-bottom: 1px solid $border-colour;
|
||||
padding: 10px 0 8px;
|
||||
|
||||
Reference in New Issue
Block a user