mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-02 17:48:50 -04:00
Add govuk-template-flask-skeleton
This commit is contained in:
Rebecca Law
50
assets/stylesheets/govuk_elements/elements/_breadcrumb.scss
Normal file
50
assets/stylesheets/govuk_elements/elements/_breadcrumb.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
// Global breadcrumb from Alphagov - static
|
||||
// https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/helpers/_header.scss#L224
|
||||
// Modified to use the new grid layout mixins
|
||||
|
||||
#global-breadcrumb {
|
||||
|
||||
@extend %grid-row;
|
||||
|
||||
ol {
|
||||
|
||||
@include grid-column(1);
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
|
||||
li {
|
||||
|
||||
@include core-16;
|
||||
float: left;
|
||||
|
||||
background-image: file-url("separator.png");
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("separator-2x.png");
|
||||
background-size: 6px 11px;
|
||||
}
|
||||
|
||||
background-position: 100% 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
list-style: none;
|
||||
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0.4em;
|
||||
margin-left: 0;
|
||||
padding-right: 1em;
|
||||
|
||||
a {
|
||||
color: $text-colour;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-image: none;
|
||||
margin-right: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
51
assets/stylesheets/govuk_elements/elements/_buttons.scss
Normal file
51
assets/stylesheets/govuk_elements/elements/_buttons.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
// Buttons
|
||||
// ==========================================================================
|
||||
|
||||
.button {
|
||||
@include button ($button-colour);
|
||||
@include box-sizing (border-box);
|
||||
margin: 0 $gutter-half $gutter-half 0;
|
||||
padding: em(10) em(15) em(5) em(15);
|
||||
vertical-align: top;
|
||||
@include media (mobile) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix unwanted button padding in Firefox
|
||||
.button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
outline: 3px solid $focus-colour;
|
||||
}
|
||||
|
||||
// Disabled buttons
|
||||
.button[disabled="disabled"] {
|
||||
background: $button-colour;
|
||||
}
|
||||
|
||||
.button[disabled="disabled"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Start now buttons
|
||||
.button-start,
|
||||
.button-get-started {
|
||||
@include bold-24;
|
||||
background-image: file-url("icons/icon-pointer.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
padding: em(7) em(41) em(4) em(16);
|
||||
|
||||
@include device-pixel-ratio {
|
||||
background-image: file-url("icons/icon-pointer-2x.png");
|
||||
background-size: 30px 19px;
|
||||
}
|
||||
|
||||
@include ie(6) {
|
||||
background-image: file-url("icons/icon-pointer-2x.png");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// Box with turquoise background and white text
|
||||
// Used for transaction end pages, and Bank Holidays
|
||||
.govuk-box-highlight {
|
||||
margin: 1em 0 1em 0;
|
||||
padding: 2em 0 1em 0;
|
||||
color: $white;
|
||||
background: $turquoise;
|
||||
text-align: center;
|
||||
}
|
||||
34
assets/stylesheets/govuk_elements/elements/_details.scss
Normal file
34
assets/stylesheets/govuk_elements/elements/_details.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
// Details
|
||||
// ==========================================================================
|
||||
|
||||
details {
|
||||
display: block;
|
||||
|
||||
summary {
|
||||
display: inline-block;
|
||||
color: $govuk-blue;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-bottom: em(5);
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 3px solid $focus-colour;
|
||||
}
|
||||
}
|
||||
|
||||
// Underline only summary text (not the arrow)
|
||||
.summary {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Match fallback arrow spacing with -webkit default
|
||||
.arrow {
|
||||
margin-right: .35em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
// Increase the base font size to 19px for the main content area
|
||||
// Using the core-19 mixin from the govuk_toolkit _typography.scss file
|
||||
|
||||
main {
|
||||
@include core-19;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Core font sizes
|
||||
.font-xxlarge {
|
||||
@include core-80;
|
||||
}
|
||||
|
||||
.font-xlarge {
|
||||
@include core-48;
|
||||
}
|
||||
|
||||
.font-large {
|
||||
@include core-36;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
@include core-24;
|
||||
}
|
||||
|
||||
.font-small {
|
||||
@include core-19;
|
||||
}
|
||||
|
||||
.font-xsmall {
|
||||
@include core-16;
|
||||
}
|
||||
|
||||
// Bold font sizes
|
||||
.bold-xxlarge {
|
||||
@include bold-80();
|
||||
}
|
||||
|
||||
.bold-xlarge {
|
||||
@include bold-48();
|
||||
}
|
||||
|
||||
.bold-large {
|
||||
@include bold-36();
|
||||
}
|
||||
|
||||
.bold-medium {
|
||||
@include bold-24();
|
||||
}
|
||||
|
||||
.bold-small {
|
||||
@include bold-19();
|
||||
}
|
||||
|
||||
.bold-xsmall {
|
||||
@include bold-16();
|
||||
}
|
||||
|
||||
// Common heading sizes
|
||||
// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
|
||||
// Spacing is set in em, using the px to em function in the elements _helpers.scss file
|
||||
|
||||
// Headings
|
||||
.heading-xlarge {
|
||||
@include bold-48();
|
||||
|
||||
margin-top: em(15, 32);
|
||||
margin-bottom: em(30, 32);
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: em(30, 48);
|
||||
margin-bottom: em(60, 48);
|
||||
}
|
||||
|
||||
.heading-secondary {
|
||||
@include heading-27();
|
||||
|
||||
display: block;
|
||||
color: $secondary-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.heading-large {
|
||||
@include bold-36();
|
||||
|
||||
margin-top: em(25, 24);
|
||||
margin-bottom: em(10, 24);
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: em(45, 36);
|
||||
margin-bottom: em(20, 36);
|
||||
}
|
||||
|
||||
.heading-secondary {
|
||||
@include heading-24();
|
||||
|
||||
display: block;
|
||||
color: $secondary-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.heading-medium {
|
||||
@include bold-24();
|
||||
|
||||
margin-top: em(25, 20);
|
||||
margin-bottom: em(10, 20);
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: em(45, 24);
|
||||
margin-bottom: em(20, 24);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.heading-small {
|
||||
@include bold-19();
|
||||
|
||||
margin-top: em(10, 16);
|
||||
margin-bottom: em(5, 16);
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: em(20, 19);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Text
|
||||
p {
|
||||
margin-top: em(5, 16);
|
||||
margin-bottom: em(20, 16);
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: em(5);
|
||||
margin-bottom: em(20);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Lede, or intro text
|
||||
.lede {
|
||||
@include core-24;
|
||||
}
|
||||
|
||||
// Set a max-width for text blocks
|
||||
// Less than 75 characters per line of text
|
||||
.text {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: $secondary-text-colour;
|
||||
}
|
||||
|
||||
// Link styles
|
||||
.link {
|
||||
color: $link-colour;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link:visited {
|
||||
color: $link-visited-colour;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
.link:active {
|
||||
color: $link-colour;
|
||||
}
|
||||
|
||||
// Back link styles - with left pointing arrow
|
||||
|
||||
.link-back {
|
||||
@include inline-block;
|
||||
position: relative;
|
||||
|
||||
@include core-16;
|
||||
|
||||
margin-top: $gutter-half;
|
||||
margin-bottom: $gutter-half;
|
||||
padding-left: 14px;
|
||||
|
||||
color: $black;
|
||||
|
||||
&:link,
|
||||
&:visited,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $black;
|
||||
|
||||
// Back arrow - left pointing black arrow
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-top: 5px solid transparent;
|
||||
border-right: 6px solid #0b0c0c;
|
||||
border-bottom: 5px solid transparent;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
// Improve arrow shape in Firefox
|
||||
@-moz-document url-prefix() {
|
||||
&::before {
|
||||
border-top: 5px dotted rgba(255, 0, 0, 0);
|
||||
border-bottom: 5px dotted rgba(255, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback
|
||||
// IE8 doesn't support rgba and only supports the single colon syntax for :before
|
||||
// IE7 doesn't support pseudo-elements, let's fallback to an image instead.
|
||||
// Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
|
||||
@include ie-lte(8) {
|
||||
background: file-url("icon-arrow-left.png") no-repeat 0 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Code styles
|
||||
.code {
|
||||
color: black;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
color: $black;
|
||||
background-color: $highlight-colour;
|
||||
border: 1px solid $border-colour;
|
||||
padding: 4px 4px 2px 4px;
|
||||
}
|
||||
|
||||
// Horizontal rule style
|
||||
hr {
|
||||
display: block;
|
||||
background: $border-colour;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-top: $gutter;
|
||||
margin-bottom: $gutter;
|
||||
padding: 0;
|
||||
@include ie-lte(7) {
|
||||
color: $border-colour;
|
||||
}
|
||||
}
|
||||
225
assets/stylesheets/govuk_elements/elements/_forms.scss
Normal file
225
assets/stylesheets/govuk_elements/elements/_forms.scss
Normal file
@@ -0,0 +1,225 @@
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
// Contents:
|
||||
//
|
||||
// 1. Helpers
|
||||
// 2. Form wrappers
|
||||
// 3. Form labels
|
||||
// 4. Form hints
|
||||
// 5. Form controls
|
||||
// 6. Form control widths
|
||||
|
||||
// 1. Helpers
|
||||
// ==========================================================================
|
||||
|
||||
// Fieldset is used to group more than one .form-group
|
||||
fieldset {
|
||||
@extend %contain-floats;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Fix left hand gap in IE7 and below
|
||||
@include ie-lte(7) {
|
||||
legend {
|
||||
margin-left: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove margin under textarea in Chrome and FF
|
||||
textarea{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// 2. Form wrappers
|
||||
// ==========================================================================
|
||||
|
||||
// Form group is used to wrap label and input pairs
|
||||
.form-group {
|
||||
@extend %contain-floats;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: $gutter-half;
|
||||
|
||||
@include media(tablet) {
|
||||
margin-bottom: $gutter;
|
||||
}
|
||||
}
|
||||
|
||||
// Form group related is used to reduce the space between label and input pairs
|
||||
.form-group-related {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@include media(tablet) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form group compound is used to reduce the space between label and input pairs
|
||||
.form-group-compound {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
// 3. Form labels
|
||||
// ==========================================================================
|
||||
|
||||
// Form labels, or for legends styled to look like labels
|
||||
// TODO: Amend so there is only one label style
|
||||
.form-label,
|
||||
.form-label-bold {
|
||||
display: block;
|
||||
color: $text-colour;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@include core-19;
|
||||
}
|
||||
|
||||
.form-label-bold {
|
||||
@include bold-19;
|
||||
}
|
||||
|
||||
// Add spacing under spans within labels
|
||||
legend {
|
||||
.form-label,
|
||||
.form-label-bold {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove spacing when error messages are shown
|
||||
// TODO: Move into /forms/_form-validation.scss
|
||||
.error legend {
|
||||
.form-label,
|
||||
.form-label-bold {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Used for the 'or' in between block label options
|
||||
.form-block {
|
||||
@extend %contain-floats;
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
margin-top: -5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Form hints
|
||||
// ==========================================================================
|
||||
|
||||
// Form hints and example text are light grey and sit above a form control
|
||||
.form-hint {
|
||||
@include core-19;
|
||||
display: block;
|
||||
color: $secondary-text-colour;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
// 5. Form controls
|
||||
// ==========================================================================
|
||||
|
||||
// By default, form controls are 50% width for desktop,
|
||||
// and 100% width for mobile
|
||||
.form-control {
|
||||
@include box-sizing(border-box);
|
||||
@include core-19;
|
||||
width: 100%;
|
||||
|
||||
padding: 4px;
|
||||
background-color: $white;
|
||||
border: 2px solid $grey-1;
|
||||
|
||||
// TODO: Remove 50% width set for tablet and up
|
||||
// !! BREAKING CHANGE !!
|
||||
@include media(tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Radio buttons
|
||||
.form-radio {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: -4px 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
.form-checkbox {
|
||||
display: block;
|
||||
margin: $gutter-half 0;
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: -2px 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 6. Form control widths
|
||||
// ==========================================================================
|
||||
|
||||
// TODO: Update these
|
||||
// Form control widths
|
||||
|
||||
.form-control-3-4 {
|
||||
width: 100%;
|
||||
|
||||
@include media(tablet) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-2-3 {
|
||||
width: 100%;
|
||||
@include media(tablet) {
|
||||
width: 66.66%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-1-2 {
|
||||
width: 100%;
|
||||
|
||||
@include media(tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-1-3 {
|
||||
width: 100%;
|
||||
@include media(tablet) {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-1-4 {
|
||||
width: 100%;
|
||||
@include media(tablet) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-1-8 {
|
||||
width: 100%;
|
||||
@include media(tablet) {
|
||||
width: 12.5%;
|
||||
}
|
||||
}
|
||||
44
assets/stylesheets/govuk_elements/elements/_helpers.scss
Normal file
44
assets/stylesheets/govuk_elements/elements/_helpers.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
// Helpers
|
||||
// ==========================================================================
|
||||
|
||||
// Path to assets for use with file-url() is not already defined
|
||||
@if ($path == false) {
|
||||
$path: "/public/images/";
|
||||
}
|
||||
|
||||
// Return ems from a pixel value
|
||||
// This assumes a base of 19px
|
||||
@function em($px, $base: 19) {
|
||||
@return ($px / $base) + em;
|
||||
}
|
||||
|
||||
// Want to see how the grid works?
|
||||
// add this class to the body to see how grid padding is set
|
||||
.example-highlight-grid {
|
||||
.grid-row {
|
||||
background: $grey-2;
|
||||
}
|
||||
|
||||
.column-highlight {
|
||||
background: $grey-3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Hide, but not for screenreaders
|
||||
.visuallyhidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Hide, only when JavaScript is enabled
|
||||
.js-enabled .js-hidden {
|
||||
display: none;
|
||||
}
|
||||
244
assets/stylesheets/govuk_elements/elements/_icons.scss
Normal file
244
assets/stylesheets/govuk_elements/elements/_icons.scss
Normal file
@@ -0,0 +1,244 @@
|
||||
// GOV.UK icons
|
||||
|
||||
.icon {
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.icon-calendar {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
background-image: file-url("icons/icon-calendar.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-calendar-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-download {
|
||||
width: 30px;
|
||||
height: 39px;
|
||||
background-image: file-url("icons/icon-file-download.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-file-download-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-important {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-image: file-url("icons/icon-important.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-important-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-information {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
background-image: file-url("icons/icon-information.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-information-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-locator {
|
||||
width: 26px;
|
||||
height: 36px;
|
||||
background-image: file-url("icons/icon-locator.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-locator-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
background-color: $black;
|
||||
background-image: file-url("icons/icon-search.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-search-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// GOV.UK arrow icons
|
||||
.icon-pointer {
|
||||
width: 30px;
|
||||
height: 19px;
|
||||
background-color: $black;
|
||||
background-image: file-url("icons/icon-pointer.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-pointer-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-pointer-black {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-pointer-black.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-pointer-black-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// GOV.UK external link icons
|
||||
// TODO (Are these provided by the template?)
|
||||
|
||||
// GOV.UK step icons
|
||||
.icon-step-1 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-1.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-1-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-2 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-2.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-2-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-3 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-3.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-3-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-4 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-4.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-4-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-5 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-5.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-5-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-6 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-6.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-6-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-7 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-7.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-7-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-8 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-8.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-8-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-9 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-9.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-9-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-10 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-10.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-11 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-11.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-11-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-12 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-12.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-12-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-step-13 {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-image: file-url("icons/icon-steps/icon-step-13.png");
|
||||
|
||||
@include device-pixel-ratio() {
|
||||
background-image: file-url("icons/icon-steps/icon-step-13-2x.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
63
assets/stylesheets/govuk_elements/elements/_layout.scss
Normal file
63
assets/stylesheets/govuk_elements/elements/_layout.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
// Layout
|
||||
// ==========================================================================
|
||||
|
||||
// Content
|
||||
// ==========================================================================
|
||||
|
||||
// Content wraps the entire site content block
|
||||
#content {
|
||||
@extend %site-width-container;
|
||||
@extend %contain-floats;
|
||||
padding-bottom: $gutter;
|
||||
|
||||
@include media(desktop) {
|
||||
padding-bottom: $gutter*3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Phase banner
|
||||
// ==========================================================================
|
||||
|
||||
.phase-banner {
|
||||
@include phase-banner(alpha);
|
||||
}
|
||||
|
||||
|
||||
// Grid layout
|
||||
// ==========================================================================
|
||||
|
||||
// Usage:
|
||||
// For two equal columns
|
||||
|
||||
// <div class="grid-row">
|
||||
// <div class="column-half">
|
||||
//
|
||||
// </div>
|
||||
// <div class="column-half">
|
||||
//
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// Use .grid-row to define a row for grid columns to sit in
|
||||
.grid-row {
|
||||
@extend %grid-row;
|
||||
}
|
||||
|
||||
// Use .grid-column to create a grid column with 15px gutter
|
||||
// By default grid columns break to become full width at tablet size
|
||||
.column-quarter {
|
||||
@include grid-column(1/4);
|
||||
}
|
||||
|
||||
.column-half {
|
||||
@include grid-column(1/2);
|
||||
}
|
||||
|
||||
.column-third {
|
||||
@include grid-column(1/3);
|
||||
}
|
||||
|
||||
.column-two-thirds {
|
||||
@include grid-column(2/3);
|
||||
}
|
||||
36
assets/stylesheets/govuk_elements/elements/_lists.scss
Normal file
36
assets/stylesheets/govuk_elements/elements/_lists.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
// Lists
|
||||
// ==========================================================================
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Bulleted lists
|
||||
.list-bullet {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
// Numbered lists
|
||||
.list-number {
|
||||
list-style-type: decimal;
|
||||
padding-left: 20px;
|
||||
|
||||
@include ie-lte(7) {
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-bullet,
|
||||
.list-number {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.list-bullet li,
|
||||
.list-number li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
31
assets/stylesheets/govuk_elements/elements/_panels.scss
Normal file
31
assets/stylesheets/govuk_elements/elements/_panels.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// Panels
|
||||
// ==========================================================================
|
||||
|
||||
// Indented panels with a grey left hand border
|
||||
.panel-indent {
|
||||
@extend %contain-floats;
|
||||
clear: both;
|
||||
border-left: 5px solid $border-colour;
|
||||
|
||||
padding: em(15,19);
|
||||
margin-bottom: em(15,19);
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:only-child,
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.panel-indent-info {
|
||||
border-left-width: 10px;
|
||||
}
|
||||
|
||||
// Indented panels within form groups
|
||||
.form-group .panel-indent {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
33
assets/stylesheets/govuk_elements/elements/_reset.scss
Normal file
33
assets/stylesheets/govuk_elements/elements/_reset.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
// Reset
|
||||
// ==========================================================================
|
||||
// flatten all browser defaults and styles inherited from gov.uk template
|
||||
|
||||
/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
|
||||
div, span,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
input, textarea,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
32
assets/stylesheets/govuk_elements/elements/_tables.scss
Normal file
32
assets/stylesheets/govuk_elements/elements/_tables.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
// Tables
|
||||
// ==========================================================================
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
|
||||
th,
|
||||
td {
|
||||
@include core-16;
|
||||
padding: em(12, 16) em(20, 16) em(9, 16) 0;
|
||||
|
||||
text-align: left;
|
||||
color: $black;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 700;
|
||||
// Right align headings for numeric content
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Use tabular numbers for numeric table cells
|
||||
td.numeric {
|
||||
@include core-16($tabular-numbers: true);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
// Large hit area
|
||||
// Radio buttons & checkboxes
|
||||
|
||||
// By default, block labels stack vertically
|
||||
.block-label {
|
||||
|
||||
display: block;
|
||||
float: none;
|
||||
clear: left;
|
||||
position: relative;
|
||||
|
||||
background: $panel-colour;
|
||||
border: 1px solid $panel-colour;
|
||||
padding: (18px $gutter $gutter-half $gutter*1.8);
|
||||
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer; // Encourage clicking on block labels
|
||||
|
||||
@include media(tablet) {
|
||||
float: left;
|
||||
// width: 25%; - Test : check that text within labels will wrap
|
||||
}
|
||||
|
||||
// Absolutely position inputs within label, to allow text to wrap
|
||||
input {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: $gutter-half;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
@include ie(8) {
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Change border on hover
|
||||
&:hover {
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.block-label:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// To stack horizontally, use .inline on parent, to sit block labels next to each other
|
||||
.inline .block-label {
|
||||
clear: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Selected and focused states
|
||||
|
||||
// Add selected state
|
||||
.js-enabled label.selected {
|
||||
background: $white;
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
// Add focus to block labels
|
||||
.js-enabled label.focused {
|
||||
outline: 3px solid $focus-colour;
|
||||
}
|
||||
|
||||
// Remove focus from radio/checkboxes
|
||||
.js-enabled .focused input:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
// Date pattern
|
||||
|
||||
// Hide the 'spinner' for webkit
|
||||
// and also for Firefox
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.form-date {
|
||||
|
||||
.form-group {
|
||||
float: left;
|
||||
width: 50px;
|
||||
|
||||
margin-right: 20px;
|
||||
margin-bottom: 0;
|
||||
clear: none;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-year {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
// Form validation
|
||||
// ==========================================================================
|
||||
|
||||
// Using the classname .error as it's shorter than .validation and easier to type!
|
||||
.error {
|
||||
|
||||
// Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
|
||||
// @include box-sizing(border-box);
|
||||
margin-right: 15px;
|
||||
|
||||
// Error messages should be red and bold
|
||||
.error-message {
|
||||
color: $error-colour;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Form inputs should have a red border
|
||||
.form-control {
|
||||
border: 4px solid $error-colour;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.error,
|
||||
.error-summary {
|
||||
|
||||
// Add a red border to the left of the field
|
||||
border-left: 4px solid $error-colour;
|
||||
padding-left: 10px;
|
||||
|
||||
@include media(tablet) {
|
||||
border-left: 5px solid $error-colour;
|
||||
padding-left: $gutter-half;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@include core-19;
|
||||
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
margin: 0;
|
||||
padding: 5px 0 7px 0;
|
||||
}
|
||||
|
||||
// Summary of multiple error messages
|
||||
.error-summary {
|
||||
|
||||
// Error summary has a border on all sides
|
||||
border: 4px solid $error-colour;
|
||||
|
||||
margin-top: $gutter-half;
|
||||
margin-bottom: $gutter-half;
|
||||
|
||||
padding: $gutter-half 10px;
|
||||
|
||||
@include media(tablet) {
|
||||
border: 5px solid $error-colour;
|
||||
|
||||
margin-top: $gutter;
|
||||
margin-bottom: $gutter;
|
||||
|
||||
padding: 20px $gutter-half $gutter-half $gutter-half;
|
||||
}
|
||||
|
||||
@include ie-lte(6) {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
// Use the GOV.UK outline focus style
|
||||
&:focus {
|
||||
outline: 3px solid $focus-colour;
|
||||
}
|
||||
|
||||
.error-summary-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.error-summary-list {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
|
||||
@include media(tablet) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $error-colour;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user