mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 14:48:25 -04:00
Add govuk-template-flask-skeleton
This commit is contained in:
Rebecca Law
@@ -0,0 +1,112 @@
|
||||
// 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
|
||||
@@ -0,0 +1,85 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
// 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;
|
||||
@@ -0,0 +1,128 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// 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;
|
||||
@@ -0,0 +1,54 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// 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;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user