govuk_frontend_toolkit 0.41.1

data/app/assets/stylesheets/_css3.scss

@@ -0,0 +1,61 @@
+/* CSS 3 Mixins
+
+  Add them as you need them. This should let us manage vendor prefixes in one place.
+ */
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+          border-radius: $radius;
+}
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow;
+     -moz-box-shadow: $shadow;
+          box-shadow: $shadow;
+}
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+     -moz-transform: translate($x, $y);
+       -o-transform: translate($x, $y);
+          transform: translate($x, $y);
+}
+
+@mixin gradient($from, $to) {
+  background-color: $from; // fallback/image non-cover color
+  background-image: -moz-linear-gradient($from, $to); // Firefox 3.6+
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); // Safari 4+, Chrome 1+
+  background-image: -webkit-linear-gradient($from, $to); // Safari 5.1+, Chrome 10+
+  background-image: -o-linear-gradient($from, $to); // Opera 11.10+
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); // IE6-9
+}
+
+@mixin transition($property, $duration, $function, $delay: 0s) {
+  -webkit-transition: ($property $duration $function $delay);
+     -moz-transition: ($property $duration $function $delay);
+      -ms-transition: ($property $duration $function $delay);
+       -o-transition: ($property $duration $function $delay);
+          transition: ($property $duration $function $delay);
+}
+
+@mixin box-sizing($type) { // Acceptable values are border, content, and padding - content is the default W3C model
+  -webkit-box-sizing: $type;
+     -moz-box-sizing: $type;
+          box-sizing: $type;
+}
+
+@mixin appearance($appearance) {
+  -webkit-appearance: $appearance;
+     -moz-appearance: $appearance;
+}
+
+@mixin calc($property, $calc) {
+  #{$property}: -webkit-calc(#{$calc});
+  #{$property}: calc(#{$calc});
+}
+
+@mixin opacity($trans) {
+  zoom: 1;
+  filter: alpha(opacity=#{$trans * 100});
+  opacity: $trans;
+}
+

data/app/assets/stylesheets/_device-pixels.scss

@@ -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;
+  }
+}
+

data/app/assets/stylesheets/_font_stack.scss

@@ -0,0 +1,40 @@
+//  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;

data/app/assets/stylesheets/_measurements.scss

@@ -0,0 +1,7 @@
+// 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);

data/app/assets/stylesheets/_shims.scss

@@ -0,0 +1,57 @@
+/* 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;
+  }
+}

data/app/assets/stylesheets/_typography.scss

@@ -0,0 +1,400 @@
+@import '_font_stack.scss';
+@import '_conditionals.scss';
+@import '_device-pixels.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-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 80px;
+  } @else {
+    font-size: 28pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 53px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 48px;
+  } @else {
+    font-size: 18pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 32px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 36px;
+  } @else {
+    font-size: 18pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 24px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 27px;
+  } @else {
+    font-size: 16pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 18px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 24px;
+  } @else {
+    font-size: 16pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 20px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 19px;
+  } @else {
+    font-size: 14pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 16px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 16px;
+  } @else {
+    font-size: 12pt;
+  }
+  line-height: $line-height;
+  font-weight: 300;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 14px;
+    line-height: $line-height-640;
+  }
+}
+
+@mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  @if $is-print == false {
+    font-size: 14px;
+  } @else {
+    font-size: 11pt;
+  }
+  line-height: $line-height;
+  font-weight: 400;
+  text-transform: none;
+  @media (max-width: 640px) {
+    font-size: 12px;
+    line-height: $line-height-640;
+  }
+}
+
+@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: image-url("external-link.png");
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio() {
+      background-image: image-url("external-link-24x24.png");
+      background-size: 12px 400px;
+    }
+  }
+}
+
+@mixin external-link-heading {
+  &:after {
+    background-image: image-url("external-link-black-12x12.png");
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio() {
+      background-image: image-url("external-link-black-24x24.png");
+      background-size: 12px 400px;
+    }
+  }
+}