Merge pull request #469 from alphagov/release-govuk-elements-sass

v3.0.3

packages/govuk-elements-sass/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 3.0.3
+
+- Increase the size of the text in the highlight box - used for confirmation pages ([PR #451](https://github.com/alphagov/govuk_elements/pull/451))
+- Fix insufficient colour contrast on select boxes in Windows 10 ([PR #456](https://github.com/alphagov/govuk_elements/pull/456))
+
 # 3.0.2
 
 - Resolve 'dead area' between radio/checkbox and label that has hand cursor but is not clickable ([PR #435](https://github.com/alphagov/govuk_elements/pull/435))

packages/govuk-elements-sass/VERSION.txt

@@ -1 +1 @@
-3.0.2
+3.0.3

packages/govuk-elements-sass/package.json

@@ -1,6 +1,6 @@
 {
   "name": "govuk-elements-sass",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "GOVUK elements Sass files",
   "repository": "alphagov/govuk_elements",
   "license": "MIT",

packages/govuk-elements-sass/public/sass/_govuk-elements.scss

@@ -0,0 +1,55 @@
+// GOV.UK front end toolkit
+// Sass variables, mixins and functions
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+
+// Settings (variables)
+@import "colours";                                // Colour variables
+@import "font_stack";                             // Font family variables
+@import "measurements";                           // Widths and gutter variables
+
+// Mixins
+@import "conditionals";                           // Media query mixin
+@import "device-pixels";                          // Retina image mixin
+@import "grid_layout";                            // Basic grid layout mixin
+@import "typography";                             // Core bold and heading mixins, also external links
+@import "shims";                                  // Inline block mixin, clearfix placeholder
+
+// Mixins to generate components (chunks of UI)
+@import "design-patterns/alpha-beta";
+@import "design-patterns/buttons";
+@import "design-patterns/breadcrumbs";
+
+// Functions
+@import "url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)
+
+// GOV.UK elements
+
+@import "elements/helpers";                       // Helper functions and classes
+
+// Generic (normalize/reset.css)
+@import "elements/reset";
+
+// Base (unclassed HTML elements)
+// These are predefined by govuk_template
+// If you're not using govuk_template, uncomment the line below.
+// @import "elements/govuk-template-base";        // Base styles set by GOV.UK template
+
+// Objects (unstyled design patterns)
+@import "elements/layout";                        // Main content container. Grid layout - rows and column widths
+
+// Components (chunks of UI)
+@import "elements/elements-typography";           // Typography
+@import "elements/buttons";                       // Buttons
+@import "elements/icons";                         // Icons - numbered steps, calendar, search
+@import "elements/lists";                         // Lists - numbered, bulleted
+@import "elements/tables";                        // Tables - regular, numeric
+@import "elements/details";                       // Details summary
+@import "elements/panels";                        // Panels with a left grey border
+@import "elements/forms";                         // Form - wrappers, inputs, labels
+@import "elements/forms/form-multiple-choice";    // Custom radio buttons and checkboxes
+@import "elements/forms/form-date";               // Date of birth pattern
+@import "elements/forms/form-validation";         // Errors and validation
+@import "elements/breadcrumbs";                   // Breadcrumbs
+@import "elements/phase-banner";                  // Alpha and beta banners and tags
+@import "elements/components";                    // GOV.UK prefixed styles - blue highlighted box
+@import "elements/shame";                         // Hacks and workarounds that will go away eventually

packages/govuk-elements-sass/public/sass/elements/_breadcrumbs.scss

@@ -0,0 +1,6 @@
+// Breadcrumbs
+// ==========================================================================
+
+.breadcrumbs {
+  @include breadcrumbs;
+}

packages/govuk-elements-sass/public/sass/elements/_buttons.scss

@@ -0,0 +1,51 @@
+// Buttons
+// ==========================================================================
+
+.button {
+  @include button ($button-colour);
+  @include box-sizing (border-box);
+  vertical-align: top;
+
+  @include media (mobile) {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+// 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("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("icon-pointer-2x.png");
+    background-size: 30px 19px;
+  }
+
+  @include ie(6) {
+    background-image: file-url("icon-pointer-2x.png");
+  }
+}

packages/govuk-elements-sass/public/sass/elements/_components.scss

@@ -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;
+  padding: 2em 1em;
+  color: $white;
+  background: $turquoise;
+  text-align: center;
+}

packages/govuk-elements-sass/public/sass/elements/_details.scss

@@ -0,0 +1,35 @@
+// Details
+// ==========================================================================
+
+details {
+  display: block;
+  clear: both;
+
+  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;
+  }
+
+}