darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 00:07:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

Create base forms for registration and sign in

Browse Source 
Created routes and forms for registration, sign in, and registration
from an invite.
Also tidied up assets folder, removed copy of fronted toolkit.
This commit is contained in:
Chris Heathcote
2015-11-25 16:21:28 +00:00
committed by Rebecca Law
parent ed609eeec9
commit 701ce482d4
32 changed files with 774 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/app.scss Normal file
View File

@@ -0,0 +1,22 @@
// Extra CSS overlaying elements
.form-control-2-3, .form-control-1-4 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "nta", Arial, sans-serif;
font-size: 16px;
line-height: 1.25;
font-weight: 400;
text-transform: none;
padding: 4px;
background-color: #fff;
border: 2px solid #6f777b;
}
@media (min-width: 641px) {
.form-control-2-3, .form-control-1-4 {
font-size: 19px;
line-height: 1.31579;
}
}

0
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/.gitkeep
View File

112
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_colours.scss
View File

@@ -1,112 +0,0 @@
// Colours for the site, as per:
// http://alphagov.github.com/design/gov.uk.colours/
// Departmental colours
$attorney-generals-office: #9f1888;
$cabinet-office: #005abb;
$civil-service: #af292e;
$department-for-business-innovation-skills: #003479;
$department-for-communities-and-local-government: #00857e;
$department-for-culture-media-sport: #d40072;
$department-for-education: #003a69;
$department-for-environment-food-rural-affairs: #898700;
$department-for-international-development: #002878;
$department-for-transport: #006c56;
$department-for-work-pensions: #00beb7;
$department-of-energy-climate-change: #009ddb;
$department-of-health: #00ad93;
$foreign-commonwealth-office: #003e74;
$government-equalities-office: #9325b2;
$hm-government: #0076c0;
$hm-revenue-customs: #009390;
$hm-treasury: #af292e;
$home-office: #9325b2;
$ministry-of-defence: #4d2942;
$ministry-of-justice: #231f20;
$northern-ireland-office: #002663;
$office-of-the-advocate-general-for-scotland: #002663;
$office-of-the-leader-of-the-house-of-lords: #9c132e;
$scotland-office: #002663;
// Note: the 'the' part here will get dropped
$the-office-of-the-leader-of-the-house-of-commons: #317023;
$uk-export-finance: #005747;
$uk-trade-investment: #C80651;
$wales-office: #a33038;
// Brand colours
$govuk-blue: #005ea5;
$mainstream-brand: $govuk-blue;
// Standard palette, colours
$purple: #2e358b;
$purple-50: #9799c4;
$purple-25: #d5d6e7;
$mauve: #6f72af;
$mauve-50: #b7b9d7;
$mauve-25: #e2e2ef;
$fuschia: #912b88;
$fuschia-50: #c994c3;
$fuschia-25: #e9d4e6;
$pink: #d53880;
$pink-50: #eb9bbe;
$pink-25: #f6d7e5;
$baby-pink: #f499be;
$baby-pink-50: #faccdf;
$baby-pink-25: #fdebf2;
$red: #b10e1e;
$red-50: #d9888c;
$red-25: #efcfd1;
$mellow-red: #df3034;
$mellow-red-50: #ef9998;
$mellow-red-25: #f9d6d6;
$orange: #f47738;
$orange-50: #fabb96;
$orange-25: #fde4d4;
$brown: #b58840;
$brown-50: #dac39c;
$brown-25: #f0e7d7;
$yellow: #ffbf47;
$yellow-50: #ffdf94;
$yellow-25: #fff2d3;
$grass-green: #85994b;
$grass-green-50: #c2cca3;
$grass-green-25: #e7ebda;
$green: #006435;
$green-50: #7fb299;
$green-25: #cce0d6;
$turquoise: #28a197;
$turquoise-50: #95d0cb;
$turquoise-25: #d5ecea;
$light-blue: #2b8cc4;
$light-blue-50: #96c6e2;
$light-blue-25: #d5e8f3;
// Standard palette, greys
$black: #0b0c0c;
$grey-1: #6f777b;
$grey-2: #bfc1c3;
$grey-3: #dee0e2;
$grey-4: #f8f8f8;
$white: #fff;
// Semantic colour names
$link-colour: $govuk-blue;
$link-active-colour: #2e8aca;
$link-hover-colour: #2e8aca;
$link-visited-colour: #4c2c92;
$button-colour: #00823b;
$focus-colour: $yellow;
$text-colour: $black; // Standard text colour
$secondary-text-colour: $grey-1; // Section headers, help text etc.
$border-colour: $grey-2; // Borders, seperators, rules, keylines etc.
$panel-colour: $grey-3; // Related links panel, page footer etc.
$canvas-colour: $grey-4; // Page background
$highlight-colour: $grey-4; // Table stripes etc.
$page-colour: $white; // The page
$discovery-colour: $fuschia; // Discovery badges and banners
$alpha-colour: $pink; // Alpha badges and banners
$beta-colour: $orange; // Beta badges and banners
$live-colour: $grass-green; // Live badges and banners
$banner-text-colour: #000; // Text colour for Alpha & Beta banners
$error-colour: $red; // Error text and border colour
$error-background: #fef7f7; // Error background colour

85
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_conditionals.scss
View File

@@ -1,85 +0,0 @@
// Media query helpers. These make producing IE layouts
// super easy.
// The base css you write should be for mobile. You can
// then add desktop styles on top.
//
// Usage:
//
// div.columns {
// border: 1px solid;
//
// @include media(desktop){
// width: 30%;
// float: left;
// }
// @include ie-lte(8) {
// something to fix visual bugs in old IE
// }
// @include ie(6) {
// padding: 0;
// }
// }
$is-ie: false !default;
$mobile-ie6: true !default;
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {
@if $is-ie and ($ignore-for-ie == false) {
@if $size != mobile {
@if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
@content;
}
}
} @else {
@if $size == desktop {
@media (min-width: 769px){
@content;
}
} @else if $size == tablet {
@media (min-width: 641px){
@content;
}
} @else if $size == mobile {
@media (max-width: 640px){
@content;
}
} @else if $max-width != false {
@media (max-width: $max-width){
@content;
}
} @else if $min-width != false {
@media (min-width: $min-width){
@content;
}
} @else {
@media (min-width: $size){
@content
}
}
}
}
@mixin ie-lte($version) {
@if $is-ie {
@if $ie-version <= $version {
@content;
}
}
}
@mixin ie($version) {
@if $is-ie {
@if $ie-version == $version {
@content;
}
}
}

86
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_css3.scss
View File

@@ -1,86 +0,0 @@
// CSS 3 mixins
// This file includes mixins for CSS properties that require vendor prefixes.
// Please add more mixins here as you need them, rather than adding them to
// your application - this lets us manage them in one place.
// You can use the @warn directive to deprecate a mixin where the property
// no longer needs prefixes.
@mixin border-radius($radius) {
-webkit-border-radius: $radius; // Chrome 4.0, Safari 3.1 to 4.0, Mobile Safari 3.2, Android Browser 2.1
-moz-border-radius: $radius; // Firefox 2.0 to 3.6
border-radius: $radius;
}
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
-moz-box-shadow: $shadow; // Firefox 3.5 to 3.6
box-shadow: $shadow;
}
@mixin scale($x, $y, $transform-origin: 50% 50% 0) {
// $x and $y should be numeric values without units
-webkit-transform: scale($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
-moz-transform: scale($x, $y); // Firefox 3.5 to 15.0
-ms-transform: scale($x, $y); // IE9 only
transform: scale($x, $y);
-webkit-transform-origin: $transform-origin; // Chrome, Safari 3.1
-moz-transform-origin: $transform-origin; // Firefox 10 to 15.0
-ms-transform-origin: $transform-origin; // IE9
transform-origin: $transform-origin;
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
-moz-transform: translate($x, $y); // Firefox 3.5 to 15.0
-ms-transform: translate($x, $y); // IE9 only
-o-transform: translate($x, $y); // Opera 10.5 to 12.0
transform: translate($x, $y);
}
@mixin gradient($from, $to) {
// Creates a vertical gradient where $from is the colour at the top of the element
// and $to is the colour at the bottom. The top colour is used as a background-color
// for browsers that don't support gradients.
background-color: $from;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); // Safari 4.0 to 5.1, Chrome 1.0 to 10.0, old deprecated syntax
background-image: -webkit-linear-gradient($from, $to); // Chrome 10.0 to 25.0, Safari 5.1 to 6.0, Mobile Safari 5.0 to 6.1, Android Browser 4.0 to 4.3
background-image: -moz-linear-gradient($from, $to); // Firefox 3.6 to 15.0
background-image: -o-linear-gradient($from, $to); // Opera 11.1 to 12.0
background-image: linear-gradient($from, $to);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); // IE6 to IE9
}
@mixin transition($property, $duration, $function, $delay: 0s) {
-webkit-transition: ($property $duration $function $delay); // Chrome 4.0 to 25.0, Safari 3.1 to 6.0, Mobile Safari 3.2 to 6.1, Android Browser 2.1 to 4.3
-moz-transition: ($property $duration $function $delay); // Firefox 4.0 to 15.0
-o-transition: ($property $duration $function $delay); // Opera 10.5 to 12.0
transition: ($property $duration $function $delay);
}
@mixin box-sizing($type) {
// http://www.w3.org/TR/css3-ui/#box-sizing
// $type can be one of: content-box | padding-box | border-box | inherit
-webkit-box-sizing: $type; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
-moz-box-sizing: $type; // Firefox 2.0 to 28.0, Firefox for Android 26.0 onwards
box-sizing: $type;
}
@mixin appearance($appearance) {
-webkit-appearance: $appearance;
-moz-appearance: $appearance;
}
@mixin calc($property, $calc) {
#{$property}: -webkit-calc(#{$calc}); // Chrome 19.0 to 25.0, Safari 6.0, Mobile Safari 6.0 to 6.1
#{$property}: calc(#{$calc});
}
@mixin opacity($trans) {
zoom: 1;
filter: unquote('alpha(opacity=' + ($trans * 100) + ')'); // IE6 to IE8
opacity: $trans;
}

11
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_device-pixels.scss
View File

@@ -1,11 +0,0 @@
@mixin device-pixel-ratio($ratio: 2) {
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and ( -o-min-device-pixel-ratio: #{($ratio*10)}/10),
only screen and ( min-device-pixel-ratio: $ratio),
only screen and ( min-resolution: #{($ratio*96)}dpi),
only screen and ( min-resolution: #{$ratio}dppx) {
@content;
}
}

44
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_font_stack.scss
View File

@@ -1,44 +0,0 @@
// GOV.UK font stacks, referred to in typography.scss
// Font stack weirdness
//
// To ensure embedded fonts fall back to appropriate
// system fonts (eg, bold embedded font falls back to
// bold system font, without anyone getting horrible
// artificially emboldened weights) we're setting
// the font-stack in a font-face declaration rather
// than with the usual font-family.
// New Transport Light
$NTA-Light:
"nta",
Arial,
sans-serif;
// New Transport Light with Tabular
$NTA-Light-Tabular:
"ntatabularnumbers",
"nta",
Arial,
sans-serif;
// Helvetica Regular
@font-face {
font-family: GDS-Logo;
src: local("HelveticaNeue"),
local("Helvetica Neue"),
local("Arial"),
local("Helvetica");
}
$Helvetica-Regular:
"GDS-Logo",
sans-serif;
// Font reset for print
$Print-reset: sans-serif;

128
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_grid_layout.scss
View File

@@ -1,128 +0,0 @@
@import '_conditionals.scss';
@import '_css3.scss';
@import '_measurements.scss';
@import '_shims.scss';
$site-width: 960px;
// An extendable selector to wrap your entire site content block
// It limits the sites width to be 960px wide and maintains consistent margins
// on the site of the page and shrinks the margins for mobile.
//
// Usage:
//
// #page-container {
// @extend %site-width-container;
// }
%site-width-container {
max-width: $site-width;
@include ie-lte(8){
width: $site-width;
}
margin: 0 $gutter-half;
@include media(tablet){
margin: 0 $gutter;
}
@include media($min-width: ($site-width + $gutter * 2)){
margin: 0 auto;
}
}
// An extendable selector to outdent to the full page-width
// So that you can create elements that take up the gutters on the side of the
// page and butt up to the edge of the browser on smaller screens (rather than
// leaving a gutter at the edge of the page).
//
// Usage:
//
// .hero-image-container {
// @extend %outdent-to-full-width;
// }
%outdent-to-full-width {
margin-left: -$gutter-half;
margin-right: -$gutter-half;
@include media(tablet){
margin-left: -$gutter;
margin-right: -$gutter;
}
}
// An extendable selector to define a row for grid columns to sit in
//
// Usage:
//
// .grid-row {
// @extend %grid-row;
// }
%grid-row {
@extend %contain-floats;
margin: 0 (-$gutter-half);
}
// A mixin for a grid column
// Creates a cross browser grid column with a standardised gutter between the
// columns. Widths should be defined as fractions of the full desktop width
// they want to fill. By default they break to become full width at tablet size
// but that can be configured to be desktop using the `$full-width` argument.
//
// Usage:
//
// .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 );
// }
// .column-desktop-third {
// @include grid-column( 1/3, $full-width: desktop );
// }
@mixin grid-column($width, $full-width: tablet, $float: left) {
@include media($full-width){
float: $float;
width: percentage($width);
}
@include ie-lte(7){
width: (($site-width + $gutter) * $width) - $gutter;
}
padding: 0 $gutter-half;
@include box-sizing(border-box);
}
// OLD deprecated grid mixins
// You should migrate to the mixins above in the future
// Outer block sets a max width
@mixin outer-block {
@warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
margin: 0 auto;
width: auto;
max-width: 960 + $gutter*2;
@extend %contain-floats;
@include ie-lte(8) {
width: 1020px;
}
}
// Inner block sets either margin or padding
// to align content with header and footer
@mixin inner-block($margin-or-padding: padding) {
@warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
#{$margin-or-padding}-left: $gutter-half;
#{$margin-or-padding}-right: $gutter-half;
@include media(tablet) {
#{$margin-or-padding}-left: $gutter;
#{$margin-or-padding}-right: $gutter;
}
}

16
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_helpers.scss
View File

@@ -1,16 +0,0 @@
// Base font size in pixels
$base-font-size: 16;
// Convert pixels to em
@function pem($px, $base: $base-font-size) {
@if (unitless($px)) {
$px: $px * 1px;
}
@if (unitless($base)) {
$base: $base * 1px;
}
@return $px / $base * 1em;
}

14
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_measurements.scss
View File

@@ -1,14 +0,0 @@
// Measurements used across GOV.UK
$full-width: 100%;
$one-quarter: $full-width/4;
$one-third: $full-width/3;
$half: $full-width/2;
$two-thirds: ($full-width)-($one-third);
$three-quarters: ($full-width)-($one-quarter);
$gutter: 30px;
$gutter-one-quarter: $gutter/4;
$gutter-one-third: $gutter/3;
$gutter-half: $gutter/2;
$gutter-two-thirds: $gutter - $gutter-one-third;

54
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_shims.scss
View File

@@ -1,54 +0,0 @@
// Cross-browser shims
// Ways of normalising properties across browsers.
@import "_conditionals";
// From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
// Usage:
//
// @include inline-block
// or
// @include inline-block("250px")
//
// which gives a min-height to the inline-block elements.
@mixin inline-block($min-height: "") {
display: -moz-inline-stack;
display: inline-block;
@if $min-height != "" {
min-height: $min-height;
}
@include ie-lte(7) {
zoom: 1;
display: inline;
}
@include ie(6) {
@if $min-height != "" {
height: $min-height;
}
}
}
// Contain floats usage:
//
// .this-has-floated-children {
// @extend %contain-floats;
// }
%contain-floats {
&:after {
content: "";
display: block;
clear: both;
}
@include ie-lte(7) {
zoom: 1;
}
}

311
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_typography.scss
View File

@@ -1,311 +0,0 @@
@import '_font_stack.scss';
@import '_conditionals.scss';
@import '_device-pixels.scss';
@import '_url-helpers.scss';
// GOV.UK typography palettes
// ANATOMY OF A TYPE STYLE
// -----------------------
// These are a collection of graphic styles. They are deliberately
// abstracted from semantic HTML context to enable flexible re-use.
// Although there is a lot of duplication within this file, as long
// as you GZIP your CSS it shouldnt cause any bloat.
// CORE FONTS - NEW TRANSPORT
$is-print: false !default;
@mixin _core-font-generator($font-size: 19px, $font-size-640: 16px, $font-size-print: 14pt, $line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
@if $tabular-numbers == true {
font-family: $NTA-Light-Tabular;
} @else if $is-print {
font-family: $Print-reset;
} @else {
font-family: $NTA-Light;
}
font-size: $font-size-640;
line-height: $line-height-640;
font-weight: $font-weight;
text-transform: none;
@include media(tablet) {
font-size: $font-size;
line-height: $line-height;
}
@if $is-print {
font-size: $font-size-print;
}
}
@mixin core-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false, $font-weight: 400) {
$font-size: 80px;
$font-size-640: 53px;
$font-size-print: 28pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false, $font-weight: 400) {
$font-size: 48px;
$font-size-640: 32px;
$font-size-print: 18pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false, $font-weight: 400) {
$font-size: 36px;
$font-size-640: 24px;
$font-size-print: 18pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false, $font-weight: 400) {
$font-size: 27px;
$font-size-640: 20px;
$font-size-print: 16pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false, $font-weight: 400) {
$font-size: 24px;
$font-size-640: 18px;
$font-size-print: 16pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
$font-size: 19px;
$font-size-640: 16px;
$font-size-print: 14pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false, $font-weight: 400) {
$font-size: 16px;
$font-size-640: 14px;
$font-size-print: 12pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false, $font-weight: 400) {
$font-size: 14px;
$font-size-640: 12px;
$font-size-print: 11pt;
@include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
}
@mixin bold-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false) {
@include core-80($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false) {
@include core-48($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false) {
@include core-36($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false) {
@include core-27($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false) {
@include core-24($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false) {
@include core-19($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false) {
@include core-16($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin bold-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false) {
@include core-14($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
}
@mixin heading-80($tabular-numbers: false) {
@include core-80($tabular-numbers: $tabular-numbers);
padding-top: 8px;
padding-bottom: 7px;
@include media(tablet){
padding-top: 6px;
padding-bottom: 14px;
}
}
@mixin heading-48($tabular-numbers: false) {
@include core-48($tabular-numbers: $tabular-numbers);
padding-top: 10px;
padding-bottom: 10px;
@include media(tablet){
padding-top: 7px;
padding-bottom: 13px;
}
}
@mixin heading-36($tabular-numbers: false) {
@include core-36($tabular-numbers: $tabular-numbers);
padding-top: 8px;
padding-bottom: 7px;
@include media(tablet){
padding-top: 6px;
padding-bottom: 9px;
}
}
@mixin heading-27($tabular-numbers: false) {
@include core-27($tabular-numbers: $tabular-numbers);
padding-top: 8px;
padding-bottom: 7px;
@include media(tablet){
padding-top: 4px;
padding-bottom: 6px;
}
}
@mixin heading-24($tabular-numbers: false) {
@include core-24($tabular-numbers: $tabular-numbers);
padding-top: 9px;
padding-bottom: 6px;
@include media(tablet){
padding-top: 6px;
padding-bottom: 4px;
}
}
@mixin copy-19($tabular-numbers: false) {
@include core-19($tabular-numbers: $tabular-numbers);
padding-top: 2px;
padding-bottom: 8px;
@include media(tablet){
padding-top: 0;
padding-bottom: 5px;
}
}
@mixin copy-16($tabular-numbers: false) {
@include core-16($tabular-numbers: $tabular-numbers);
padding-top: 8px;
padding-bottom: 7px;
@include media(tablet){
padding-top: 5px;
padding-bottom: 5px;
}
}
@mixin copy-14($tabular-numbers: false) {
@include core-14($tabular-numbers: $tabular-numbers);
padding-top: 8px;
padding-bottom: 7px;
@include media(tablet){
padding-top: 5px;
padding-bottom: 5px;
}
}
// External link styles for all font sizes
// Private mixin for use solely by those below
@mixin external-link-size($content, $top, $top-hover: top) {
&:after {
content: $content;
background-position: right $top;
}
@if $top-hover == top {
$top-hover: $top;
}
&:hover:after {
background-position: right $top-hover;
}
}
@mixin external-link-12-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0px);
}
@mixin external-link-12 {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0px, $top-hover: -388px);
}
@mixin external-link-13-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px);
}
@mixin external-link-13 {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px, $top-hover: -387px);
}
@mixin external-link-14 {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px, $top-hover: -387px);
}
@mixin external-link-14-bold-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 2px);
}
@mixin external-link-16 {
@include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 3px, $top-hover: -385px);
}
@mixin external-link-16-bold-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 3px);
}
@mixin external-link-19-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0", $top: 6px);
}
@mixin external-link-19 {
@include external-link-size($content: "\A0\A0\A0\A0", $top: 6px, $top-hover: -382px);
}
@mixin external-link-19-bold-no-hover {
@include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 6px);
}
@mixin external-link-default {
&:after {
background-image: file-url("external-links/external-link.png");
background-repeat: no-repeat;
@include device-pixel-ratio() {
background-image: file-url("external-links/external-link-24x24.png");
background-size: 12px 400px;
}
}
}
@mixin external-link-heading {
&:after {
background-image: file-url("external-links/external-link-black-12x12.png");
background-repeat: no-repeat;
@include device-pixel-ratio() {
background-image: file-url("external-links/external-link-black-24x24.png");
background-size: 12px 400px;
}
}
}

16
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/_url-helpers.scss
View File

@@ -1,16 +0,0 @@
// URL Helpers
$path: false !default;
// A function which can either output a image-url to be used with the Rails
// Asset Pipeline or Compass or a plain url which is prefixed with a defined
// path variable.
@function file-url($file) {
$url: '';
@if $path {
$url: url($path+$file);
} @else {
$url: image-url($file);
}
@return $url;
}

72
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/design-patterns/_alpha-beta.scss
View File

@@ -1,72 +0,0 @@
@import "../_colours";
@import "../_typography";
@import "../_shims";
@import "../_grid_layout";
// Phase banner usage:
//
// .phase-banner {
// @include phase-banner($state: beta);
// }
@mixin phase-banner($state: alpha) {
padding: 10px 0 8px 0;
@include media(tablet) {
padding-bottom: 10px;
}
border-bottom: 1px solid $border-colour;
p {
margin: 0;
color: $banner-text-colour;
@include core-16;
}
.phase-tag {
@include phase-tag($state);
}
span {
vertical-align: top;
@include media(tablet) {
vertical-align: baseline;
}
}
}
// Phase tag usage:
//
// Alpha
// .phase-tag {
// @include phase-tag;
// }
//
// Beta
// .phase-tag {
// @include phase-tag(beta);
// }
@mixin phase-tag($state: alpha) {
@include inline-block;
vertical-align: top;
@include media(tablet){
vertical-align: baseline;
}
margin: 0 8px 0 0;
padding: 2px 5px 0;
@include bold-16($line-height: 20/16);
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
@if $state == alpha {
background-color: $alpha-colour;
} @else if $state == beta {
background-color: $beta-colour;
}
}

142
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/design-patterns/_buttons.scss
View File

@@ -1,142 +0,0 @@
@import '../_shims.scss';
@import '../_css3.scss';
@import '../_conditionals.scss';
@import '../_colours.scss';
// Mixin and defaults for making buttons on GOV.UK services.
// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
// Example usage:
// .button{
// @include button;
// }
// .button-secondary{
// @include button($grey-3);
// }
// .button-warning{
// @include button($red);
// }
@mixin button($colour: $button-colour){
// Colour
background-color: $colour;
// Size and shape
position: relative;
@include inline-block;
padding: 0.3em 0.6em 0.2em 0.6em;
border: none;
@include border-radius(0);
-webkit-appearance: none;
// Bottom edge effect
@include box-shadow(0 2px 0 darken($colour, 15%));
@include ie-lte(8) {
border-bottom: 2px solid darken($colour, 15%);
}
// Text
font-size: 1em; // inherit from parent
line-height: 1.25;
text-decoration: none;
-webkit-font-smoothing: antialiased;
// Interaction
cursor: pointer;
&:visited{
background-color: $colour;
}
&:hover,
&:focus {
background-color: darken($colour, 5%);
}
&:active {
top: 2px;
@include box-shadow(0 0 0 $colour);
}
// Disabled button styles
&.disabled,
&[disabled="disabled"],
&[disabled] {
@include opacity(0.5);
&:hover{
cursor: default;
background-color: $colour;
}
&:active {
top: 0;
@include box-shadow(0 2px 0 darken($colour, 15%));
@include ie-lte(8) {
border-bottom: 2px solid darken($colour, 15%);
}
}
}
// Set text colour depending on background colour
@if lightness($colour) < 50% {
color: $white;
&:link,
&:hover,
&:focus,
&:visited{
color: $white;
}
} @else {
color: $text-colour;
&:link,
&:hover,
&:focus,
&:visited{
color: $text-colour;
}
}
// making the click target bigger than the button
// (and fill the space made when the button moves)
&:before {
content: "";
height: 110%;
width: 100%;
display: block;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
&:active:before {
top: -10%;
height: 120%;
// IE6 ignores the :before psuedo-class but applies the block to :active
// It therefore needs to be reset
@include ie(6) {
top: auto;
height: 100%;
}
}
// Reset styles applied to external links
&[rel="external"]:after {
display: none;
content: none;
margin-left: 0;
margin-right: 0;
}
// Fixes a bug where IE puts a black border around certain elements
@include ie-lte(8) {
&[type="submit"],
&[type="reset"],
&[type="button"] {
filter:chroma(color=#000000);
}
&[type=submit].button {
filter: none;
}
}
}

235
app/assets/stylesheets/govuk_frontend_toolkit/stylesheets/design-patterns/_media-player.scss
View File

@@ -1,235 +0,0 @@
@import '../_colours';
@import '../_url-helpers';
// Player overrides
@mixin media-player {
display: block;
overflow: hidden;
margin: 30px 0;
&.player-wide {
min-width: 580px;
}
span {
display: block;
margin: 0;
padding: 0;
}
.video {
position: relative;
z-index: 3000;
iframe {
display: block;
}
}
.logo {
display: none;
}
.control-bar {
position: relative;
width: 100%;
height: 60px;
border-bottom: 1px solid $border-colour;
button {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
button, a {
&:focus {
background-color: orange;
outline: none;
}
}
.player-controls {
.play, .pause {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 40px;
overflow: hidden;
text-indent: -5000%;
background-repeat: no-repeat;
background-position: center left;
}
.play {
background-image: file-url('player-icon-play.png');
}
.pause {
background-image: file-url('player-icon-pause.png');
}
.rewind, .forward {
position: absolute;
top: 0;
z-index: 30;
height: 20px;
width: 40px;
overflow: hidden;
text-indent: -5000%;
background-repeat: no-repeat;
background-position: center left;
}
.rewind {
left: 0;
background-image: file-url('player-icon-rewind.png');
}
.forward {
left: 100%;
margin-left: -40px;
background-image: file-url('player-icon-forward.png');
}
}
.volume-controls {
position: absolute;
bottom: 0;
right: 0;
height: 40px;
width: 180px;
overflow: visible;
.mute {
position: absolute;
bottom: 0;
left: 120px;
height: 40px;
width: 50px;
padding-top: 1px;
font-size: 14px;
line-height: 40px;
text-align: center;
}
.muted {
color: $light-blue;
~ * {
opacity: 0.333;
}
~ .vol-display {
text-decoration: line-through;
}
}
.muted::after {
content: "d";
}
.vol-down, .vol-up {
position: absolute;
bottom: 0;
height: 40px;
width: 60px;
padding-top: 2px;
font-size: 24px;
line-height: 40px;
text-align: center;
z-index: 10;
&:hover, &:focus {
color: $light-blue;
}
}
.vol-down {
text-align: left;
padding-left: 10px;
left: 0;
}
.vol-up {
text-align: right;
padding-right: 10px;
left: 60px;
}
.vol-display {
position: absolute;
bottom: 0;
left: 20px;
height: 40px;
width: 0;
padding-left: 35px;
overflow: visible;
font-size: 14px;
font-weight: bold;
line-height: 40px;
background-repeat: no-repeat;
background-position: center left;
background-image: file-url('player-icon-volume.png');
}
}
.current-time {
position: absolute;
bottom: 0;
left: 50px;
height: 40px;
font-size: 14px;
line-height: 40px;
font-weight: bold;
}
.duration-time {
display: none;
position: absolute;
bottom: 0;
right: 10px;
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
}
.ui-slider {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 20px;
overflow: hidden;
background: $border-colour;
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding-bottom: 1px;
background: $light-blue;
}
.ui-slider-handle {
position: absolute;
top: 0;
height: 100%;
padding-bottom: 1px;
width: 20px;
color: rgba(0,0,0,0.5);
z-index: 10;
}
}
}
.ui-helper-hidden-accessible {
position: absolute;
left: -5000%;
}
}

17
app/assets/stylesheets/govuk_template/govuk-template.scss
View File

@@ -1,11 +1,11 @@
/* govuk_frontend_toolkit includes */
@import "../govuk_frontend_toolkit/stylesheets/colours";
@import "../govuk_frontend_toolkit/stylesheets/conditionals";
@import "../govuk_frontend_toolkit/stylesheets/css3";
@import "../govuk_frontend_toolkit/stylesheets/device-pixels";
@import "../govuk_frontend_toolkit/stylesheets/typography";
@import "../govuk_frontend_toolkit/stylesheets/grid_layout";
@import "../govuk_frontend_toolkit/stylesheets/design-patterns/_buttons";
@import "../../govuk_frontend_toolkit/stylesheets/colours";
@import "../../govuk_frontend_toolkit/stylesheets/conditionals";
@import "../../govuk_frontend_toolkit/stylesheets/css3";
@import "../../govuk_frontend_toolkit/stylesheets/device-pixels";
@import "../../govuk_frontend_toolkit/stylesheets/typography";
@import "../../govuk_frontend_toolkit/stylesheets/grid_layout";
@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/_buttons";
// Edited version of govuk_elements repo
// https://github.com/alphagov/govuk_elements
@@ -21,4 +21,7 @@
@import "header";
@import "footer";
// Extra CSS for this application
@import "../app";

5
app/assets/stylesheets/main.scss
View File

@@ -31,4 +31,7 @@
@import "govuk_elements/elements/layout";
@import "govuk_elements/elements/lists";
@import "govuk_elements/elements/panels";
@import "govuk_elements/elements/tables";
@import "govuk_elements/elements/tables";
// Extra CSS for this application
@import "app";