Files
notifications-admin/app/assets/stylesheets/views/product-page.scss
Chris Hill-Scott baa2ff9332 Fix button padding on the product product-page
It’s uneven ever since we upgraded the toolkit. Guess it’s probably
allowing space for an arrow image. But I don’t like the arrow image
because it looks like it’s pointing at the ‘or sign in’ link.

So this commit overrides the button’s default spacing.
2017-04-20 15:03:38 +01:00

107 lines
1.6 KiB
SCSS

.product-page {
&-intro {
margin: -10px 0 $gutter * 1.5 0;
padding: 0 0 $gutter * 2 0;
background: $govuk-blue;
color: $white;
&-wrapper {
@extend %site-width-container;
@include media(desktop) {
background-image: file-url('product/proposition-illustration.png');
background-size: 320px;
background-repeat: no-repeat;
background-position: right -6px top 85px;
@include ie-lte(8) {
background-image: none;
}
}
}
h1 {
@include bold-48;
margin: 20px 0 $gutter 0;
}
p {
@include core-24;
margin: $gutter-half 0 $gutter;
}
.button-container {
line-height: 45px;
}
.button {
@include box-shadow(0 2px 0 darken($govuk-blue, 15%));
background: $white;
margin-right: 15px;
padding-right: 1.25em;
&:link,
&:visited,
&:hover {
color: $govuk-blue;
}
&:hover {
background: $light-blue-25;
outline: none;
}
}
a {
&:link,
&:visited {
color: $white;
}
&:hover,
&:active {
color: $light-blue-25;
}
}
}
&-section {
@extend %site-width-container;
margin-bottom: $gutter-half;
h2 {
@include bold-27;
margin: 0 0 $gutter;
}
.with-keyline {
border-top: 1px solid $border-colour;
padding: $gutter * 1.5 0 0 0;
}
img {
width: 100%;
margin: 0 0 $gutter * 1.5 0;
}
}
&-big-number {
@include bold-48($tabular-numbers: true);
margin: 0 0 0 0;
}
}