mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-15 07:18:58 -04:00
5d873bdc45
This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
131 lines
1.5 KiB
SCSS
131 lines
1.5 KiB
SCSS
// Extra CSS overlaying elements
|
|
|
|
#global-header-bar {
|
|
background-color: $red;
|
|
}
|
|
|
|
#global-header {
|
|
|
|
#logo {
|
|
|
|
white-space: nowrap;
|
|
font-size: 27px;
|
|
line-height: 32px;
|
|
|
|
img {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
}
|
|
|
|
.header-proposition {
|
|
#proposition-links {
|
|
li {
|
|
padding: 0 0 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@include media(desktop) {
|
|
#proposition-menu {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
a {
|
|
&:visited {
|
|
color: $link-colour;
|
|
}
|
|
}
|
|
|
|
.form-control-1-1 {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-control-5em {
|
|
|
|
width: 100%;
|
|
|
|
@include media(tablet) {
|
|
width: 5em;
|
|
}
|
|
|
|
}
|
|
|
|
.column-main {
|
|
|
|
> .heading-large {
|
|
margin-top: $gutter;
|
|
}
|
|
|
|
> .grid-row {
|
|
|
|
.heading-large {
|
|
margin-top: $gutter;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.highlight {
|
|
font-family: monospace;
|
|
overflow-x: scroll;
|
|
padding: 10px 0 10px 10px;
|
|
}
|
|
|
|
.inline {
|
|
|
|
.block-label {
|
|
|
|
@include media(tablet) {
|
|
float: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.heading-xlarge {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#footer {
|
|
|
|
.footer-categories {
|
|
|
|
@extend %site-width-container;
|
|
|
|
&-wrapper {
|
|
padding: 0 0 $gutter * 2;
|
|
margin: 0 0 $gutter;
|
|
border-bottom: 1px solid $border-colour;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 $gutter-two-thirds;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.form-label {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
a[rel="external"] {
|
|
@include external-link-default;
|
|
@include external-link-16;
|
|
@include media(tablet) {
|
|
@include external-link-19;
|
|
}
|
|
}
|