mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-15 07:18:58 -04:00
95d138b638
One of the big things we found in user research was that people were uncertain what the effect of giving someone basic view was. So in the spirit of ‘show don’t tell’, this commit adds a way for users to preview basic view. They can go into the preview and click around as much as they like, just as if they really had the basic view assigned to them. Once they have seen enough they can return to the settings page where they can decide whether or not to switch basic view on for real.
140 lines
2.3 KiB
SCSS
140 lines
2.3 KiB
SCSS
.navigation {
|
|
|
|
padding: 0 $gutter 0 0;
|
|
|
|
&-service {
|
|
|
|
padding: 11px 0 9px 0;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin: 0 0 10px;
|
|
position: relative;
|
|
|
|
&-name {
|
|
@include bold-19;
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
&-basic-view {
|
|
|
|
&-preview {
|
|
@include bold-16;
|
|
display: inline-block;
|
|
background: $yellow;
|
|
padding: 4px 10px 3px 10px;
|
|
position: relative;
|
|
top: -1px;
|
|
margin-left: 8px;
|
|
margin-top: -1px;
|
|
margin-bottom: -7px;
|
|
}
|
|
|
|
&-back-link {
|
|
@include core-16;
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
&-switch {
|
|
|
|
@include core-16;
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 13px 0 9px 15px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-bottom: 4px solid $yellow;
|
|
border-left: 10px solid $yellow;
|
|
border-right: 3px solid $yellow;
|
|
right: -3px;
|
|
color: $text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li {
|
|
@include core-19;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
a {
|
|
|
|
display: block;
|
|
padding: 5px 0;
|
|
position: relative;
|
|
top: 5px;
|
|
|
|
&:link,
|
|
&:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: $link-hover-colour;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus {
|
|
color: $text-colour;
|
|
}
|
|
|
|
&.selected {
|
|
@include bold-19;
|
|
position: relative;
|
|
// These two lines stop the width of the item jumping so much
|
|
// between selected and unselected states
|
|
left: -0.5px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss
|
|
.sub-navigation {
|
|
@include media(tablet) {
|
|
margin-top: $gutter * 1.5;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&__item {
|
|
@include core-16;
|
|
|
|
border-bottom: 1px $grey-3 solid;
|
|
display: block;
|
|
padding: $gutter-one-third 0;
|
|
|
|
a:link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&__item--active {
|
|
@include bold-16;
|
|
|
|
a:link, a:visited {
|
|
color: $text-colour;
|
|
}
|
|
}
|
|
}
|