diff --git a/packages/govuk-elements-sass/CHANGELOG.md b/packages/govuk-elements-sass/CHANGELOG.md index 988426574..ffd353b8f 100644 --- a/packages/govuk-elements-sass/CHANGELOG.md +++ b/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)) diff --git a/packages/govuk-elements-sass/VERSION.txt b/packages/govuk-elements-sass/VERSION.txt index b50214693..75a22a26a 100644 --- a/packages/govuk-elements-sass/VERSION.txt +++ b/packages/govuk-elements-sass/VERSION.txt @@ -1 +1 @@ -3.0.2 +3.0.3 diff --git a/packages/govuk-elements-sass/package.json b/packages/govuk-elements-sass/package.json index 164a7fd8f..f89270fe1 100644 --- a/packages/govuk-elements-sass/package.json +++ b/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", diff --git a/packages/govuk-elements-sass/public/sass/_govuk-elements.scss b/packages/govuk-elements-sass/public/sass/_govuk-elements.scss new file mode 100644 index 000000000..6336d1c09 --- /dev/null +++ b/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 diff --git a/packages/govuk-elements-sass/public/sass/elements/_breadcrumbs.scss b/packages/govuk-elements-sass/public/sass/elements/_breadcrumbs.scss new file mode 100644 index 000000000..c6452d687 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_breadcrumbs.scss @@ -0,0 +1,6 @@ +// Breadcrumbs +// ========================================================================== + +.breadcrumbs { + @include breadcrumbs; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_buttons.scss b/packages/govuk-elements-sass/public/sass/elements/_buttons.scss new file mode 100644 index 000000000..c050ac775 --- /dev/null +++ b/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"); + } +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_components.scss b/packages/govuk-elements-sass/public/sass/elements/_components.scss new file mode 100644 index 000000000..152b6c0b9 --- /dev/null +++ b/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; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_details.scss b/packages/govuk-elements-sass/public/sass/elements/_details.scss new file mode 100644 index 000000000..8f7cf0676 --- /dev/null +++ b/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; + } + +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss b/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss new file mode 100644 index 000000000..044c22ce9 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_elements-typography.scss @@ -0,0 +1,309 @@ +// Typography +// ========================================================================== + +// Increase the base font size to 19px for the main content area +// Using the core-19 mixin from the govuk_toolkit _typography.scss file + +main { + @include core-19; + -webkit-font-smoothing: antialiased; +} + +// Core font sizes +.font-xxlarge { + @include core-80; +} + +.font-xlarge { + @include core-48; +} + +.font-large { + @include core-36; +} + +.font-medium { + @include core-24; +} + +.font-small { + @include core-19; +} + +.font-xsmall { + @include core-16; +} + +// Bold font sizes +.bold-xxlarge { + @include bold-80(); +} + +.bold-xlarge { + @include bold-48(); +} + +.bold-large { + @include bold-36(); +} + +.bold-medium { + @include bold-24(); +} + +.bold-small { + @include bold-19(); +} + +.bold-xsmall { + @include bold-16(); +} + +// Bold, without needing a font size +.bold { + font-weight: 700; +} + +// Common heading sizes +// Using the bold-xx mixins from the govuk_toolkit _typography.scss file +// Spacing is set in em, using the px to em function in the elements _helpers.scss file + +// Headings +.heading-xlarge { + @include bold-48(); + + margin-top: em(15, 32); + margin-bottom: em(30, 32); + + @include media(tablet) { + margin-top: em(30, 48); + margin-bottom: em(60, 48); + } + + .heading-secondary { + @include heading-27(); + + display: block; + color: $secondary-text-colour; + } + +} + +.heading-large { + @include bold-36(); + + margin-top: em(25, 24); + margin-bottom: em(10, 24); + + @include media(tablet) { + margin-top: em(45, 36); + margin-bottom: em(20, 36); + } + + .heading-secondary { + @include heading-24(); + + display: block; + color: $secondary-text-colour; + } + +} + +.heading-medium { + @include bold-24(); + + margin-top: em(25, 20); + margin-bottom: em(10, 20); + + @include media(tablet) { + margin-top: em(45, 24); + margin-bottom: em(20, 24); + } + +} + +.heading-small { + @include bold-19(); + + margin-top: em(10, 16); + margin-bottom: em(5, 16); + + @include media(tablet) { + margin-top: em(20, 19); + } + +} + +// Text +p { + margin-top: em(5, 16); + margin-bottom: em(20, 16); + + @include media(tablet) { + margin-top: em(5); + margin-bottom: em(20); + } + +} + +// Lede, or intro text +.lede { + @include core-24; +} + +// Set a max-width for text blocks +// Less than 75 characters per line of text +.text { + max-width: 30em; +} + +.text-secondary { + color: $secondary-text-colour; +} + +// Link styles +.link { + color: $link-colour; + text-decoration: underline; +} + +.link:visited { + color: $link-visited-colour; +} + +.link:hover { + color: $link-hover-colour; +} + +.link:active { + color: $link-colour; +} + +// Back link styles - with left pointing arrow + +.link-back { + @include inline-block; + position: relative; + + @include core-16; + + margin-top: $gutter-half; + margin-bottom: $gutter-half; + padding-left: 14px; + + color: $black; + + &:link, + &:visited, + &:hover, + &:active { + color: $black; + } + + text-decoration: none; + border-bottom: 1px solid $black; + + // Back arrow - left pointing black arrow + &::before { + content: ''; + display: block; + width: 0; + height: 0; + + border-top: 5px solid transparent; + border-right: 6px solid $text-colour; + border-bottom: 5px solid transparent; + + position: absolute; + left: 0; + top: 50%; + margin-top: -6px; + } + + // Fallback + // IE8 doesn't support rgba and only supports the single colon syntax for :before + // IE7 doesn't support pseudo-elements, let's fallback to an image instead. + // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba + @include ie-lte(8) { + background: file-url("icon-arrow-left.png") no-repeat 0 4px; + } + +} + +// Code styles +.code { + color: $text-colour; + background-color: $highlight-colour; + + text-shadow: 0 1px $page-colour; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 14px; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + + border: 1px solid $border-colour; + padding: 4px 4px 2px; +} + +// Horizontal rule style +hr { + display: block; + background: $border-colour; + border: 0; + height: 1px; + margin-top: $gutter; + margin-bottom: $gutter; + padding: 0; + + @include ie-lte(7) { + color: $border-colour; + } +} + +// Notice, text with an icon to the left +.notice { + @extend %contain-floats; + position: relative; + + .icon { + position: absolute; + left: 0; + top: 50%; + margin-top: -17px; // Half the height of the important icon + } + + strong { + display: block; + padding-left: (35 + 30) + px; + margin-left: -$gutter-half; + } +} + +// Data +.data { + margin-top: em(5, 16); + margin-bottom: em(20, 16); + + @include media(tablet) { + margin-top: em(5, 19); + margin-bottom: em(20, 19); + } +} + +.data-item { + display: block; + line-height: 1; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_forms.scss b/packages/govuk-elements-sass/public/sass/elements/_forms.scss new file mode 100644 index 000000000..e57e4dfc2 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_forms.scss @@ -0,0 +1,236 @@ +// Forms +// ========================================================================== + +// Contents: +// +// 1. Helpers +// 2. Form wrappers +// 3. Form labels +// 4. Form hints +// 5. Form controls +// 6. Form control widths +// 7. Browser accessibility fixes + +// 1. Helpers +// ========================================================================== + +// Fieldset is used to group more than one .form-group +fieldset { + @extend %contain-floats; + width: 100%; +} + +// Fix left hand gap in IE7 and below +@include ie-lte(7) { + legend { + margin-left: -7px; + } +} + +// Remove margin under textarea in Chrome and FF +textarea { + display: block; +} + + +// 2. Form wrappers +// ========================================================================== + +// Form section is used to wrap .form-group and has twice its margin +.form-section { + @extend %contain-floats; + @include box-sizing(border-box); + + float: left; + width: 100%; + + margin-bottom: $gutter; + + @include media(tablet) { + margin-bottom: $gutter * 2; + } +} + +// Form group is used to wrap label and input pairs +.form-group { + @extend %contain-floats; + @include box-sizing(border-box); + + float: left; + width: 100%; + + margin-bottom: $gutter-half; + + @include media(tablet) { + margin-bottom: $gutter; + } +} + +// Form group related is used to reduce the space between label and input pairs +.form-group-related { + margin-bottom: 10px; + + @include media(tablet) { + margin-bottom: 20px; + } +} + +// Form group compound is used to reduce the space between label and input pairs +.form-group-compound { + margin-bottom: 10px; +} + + +// 3. Form labels +// ========================================================================== + +// Form labels, or for legends styled to look like labels +// TODO: Amend so there is only one label style +.form-label, +.form-label-bold { + display: block; + color: $text-colour; + padding-bottom: 2px; +} + +.form-label { + @include core-19; +} + +.form-label-bold { + @include bold-19; +} + +// Used for the 'or' in between block label options +.form-block { + @extend %contain-floats; + float: left; + width: 100%; + + margin-top: -5px; + margin-bottom: 5px; + + @include media(tablet) { + margin-top: 0; + margin-bottom: 10px; + } +} + +// 4. Form hints +// ========================================================================== + +// Form hints and example text are light grey and sit above a form control +.form-hint { + @include core-19; + display: block; + color: $secondary-text-colour; + font-weight: normal; + + margin-top: -2px; + padding-bottom: 2px; +} + +.form-label .form-hint, +.form-label-bold .form-hint { + margin-top: 0; + padding-bottom: 0; +} + +// 5. Form controls +// ========================================================================== + +// By default, form controls are 50% width for desktop, +// and 100% width for mobile +.form-control { + @include box-sizing(border-box); + @include core-19; + width: 100%; + + padding: 5px 4px 4px; + // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476) + // as background-color and color need to always be set together, color should not be set either + border: 2px solid $text-colour; + + // TODO: Remove 50% width set for tablet and up + // !! BREAKING CHANGE !! + @include media(tablet) { + width: 50%; + } + +} + +// Allow a qualifying element, remove rounded corners from inputs and textareas +// scss-lint:disable QualifyingElement +input.form-control, +textarea.form-control { + // Remove inner shadow + -webkit-appearance: none; + // Remove rounded corners + border-radius: 0; +} +// scss-lint:enable QualifyingElement + + +// 6. Form control widths +// ========================================================================== + +// TODO: Update these +// Form control widths + +.form-control-3-4 { + width: 100%; + + @include media(tablet) { + width: 75%; + } +} + +.form-control-2-3 { + width: 100%; + + @include media(tablet) { + width: 66.66%; + } +} + +.form-control-1-2 { + width: 100%; + + @include media(tablet) { + width: 50%; + } +} + +.form-control-1-3 { + width: 100%; + + @include media(tablet) { + width: 33.33%; + } +} + +.form-control-1-4 { + width: 100%; + + @include media(tablet) { + width: 25%; + } +} + +.form-control-1-8 { + width: 100%; + + @include media(tablet) { + width: 12.5%; + } +} + +// 7. Browser accessibility fixes +// ========================================================================== + +option:active, +option:checked, +select:focus::-ms-value { + color: $white; + background-color: $govuk-blue; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_govuk-template-base.scss b/packages/govuk-elements-sass/public/sass/elements/_govuk-template-base.scss new file mode 100644 index 000000000..2fe7ab902 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_govuk-template-base.scss @@ -0,0 +1,143 @@ +html, +body, +button, +input, +table, +td, +th { + font-family: $toolkit-font-stack; +} + +// basic styles for HTML5 and other elements +html, +body, +div, +h1, +h2, +h3, +h4, +h5, +h6, +article, +aside, +footer, +header, +hgroup, +nav, +section { + margin: 0; + padding: 0; + vertical-align: baseline; +} + +// HTML5 display definition +main { + display: block; +} + +// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units +// http://clagnut.com/blog/348/#c790 +// note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback +// http://snook.ca/archives/html_and_css/font-size-with-rem +// 2. Keeps page centred in all browsers regardless of content height +// 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted +// www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ +// 4. Prevents iOS text size adjust after orientation change, without disabling user zoom. +// 5. Force the scrollbar to always display in IE10/11 + +html { + font-size: 62.5%; // 1 + overflow-y: scroll; // 2 + // Allow RGBA here, this line has been copied from govuk_template + // scss-lint:disable ColorVariable + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3 + -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 + -ms-overflow-style: scrollbar; // 5 + background-color: $white; +} + +// 1. Font-size increased to compensate for change to html element font-size in +// order to support beta typography which was set in ems +// (62.5% * 160% = 100%) +// 2. Addresses margins handled incorrectly in IE6/7 + +body { + font-size: 160%; // 1 + margin: 0; // 2 + + background: $white; + color: $text-colour; + line-height: 1.5; + font-weight: 400; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +ol, +ul, +nav ol, +nav ul { + list-style: inherit; +} + +fieldset { + border: none; + padding: 0; +} + +b, +strong { + font-weight: 600; +} + +img { + border: 0; +} + +@include ie-lte(7) { + button { + overflow: visible; + } +} + +abbr[title] { + cursor: help; +} + +// Link styles +a:link { + color: $link-colour; +} + +a:visited { + color: $link-visited-colour; +} + +a:hover { + color: $link-hover-colour; +} + +a:active { + color: $link-active-colour; +} + +// Set focus styles +a { + // Allow RGBA here, this line has been copied from govuk_template + // scss-lint:disable ColorVariable + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); +} + +a:focus { + background-color: $focus-colour; + outline: 3px solid $focus-colour; +} + +input:focus, +textarea:focus, +select:focus, +button:focus { + outline: 3px solid $focus-colour; + outline-offset: 0; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_helpers.scss b/packages/govuk-elements-sass/public/sass/elements/_helpers.scss new file mode 100644 index 000000000..2a25563b1 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_helpers.scss @@ -0,0 +1,25 @@ +// Helpers +// ========================================================================== + +// Return ems from a pixel value +// This assumes a base of 19px +@function em($px, $base: 19) { + @return ($px / $base) + em; +} + +// Hide, but not for screenreaders +@mixin visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + border: 0; +} + +.visually-hidden, +.visuallyhidden { + @include visually-hidden; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_icons.scss b/packages/govuk-elements-sass/public/sass/elements/_icons.scss new file mode 100644 index 000000000..235b5d837 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_icons.scss @@ -0,0 +1,102 @@ +// Icons +// ========================================================================== + +// Icon mixin +@mixin icon($icon-name, $icon-width, $icon-height, $icon-sub-folder:false) { + + width: #{$icon-width}px; + height: #{$icon-height}px; + + @if $icon-sub-folder { + background-image: file-url("#{$icon-sub-folder}/#{$icon-name}.png"); + + @include device-pixel-ratio() { + background-image: file-url("#{$icon-sub-folder}/#{$icon-name}-2x.png"); + background-size: 100%; + } + + } @else { + background-image: file-url("#{$icon-name}.png"); + + @include device-pixel-ratio() { + background-image: file-url("#{$icon-name}-2x.png"); + background-size: 100%; + } + } +} + +.icon { + display: inline-block; + + background-position: 0 0; + background-repeat: no-repeat; +} + +// GOV.UK front end toolkit icons +.icon-calendar { + @include icon(icon-calendar, 27, 27); +} + +.icon-file-download { + @include icon(icon-file-download, 30, 39); +} + +.icon-important { + @include icon(icon-important, 35, 35); +} + +.icon-information { + @include icon(icon-information, 27, 27); +} + +.icon-locator { + @include icon(icon-locator, 26, 36); +} + +.icon-pointer { + @include icon(icon-pointer, 30, 19); +} + +.icon-pointer-black { + @include icon(icon-pointer-black, 23, 23); +} + +.icon-search { + @include icon(icon-search, 30, 22); +} + + +// GOV.UK step icons +@for $i from 1 through 14 { + .icon-step-#{$i} { + @include icon(icon-step-#{$i}, 23, 23, icon-steps); + } +} + +// Propose replacing step icons with circles +.circle { + display: inline-block; + @include border-radius(50%); + + background: $black; + color: $white; + + font-family: $toolkit-font-stack-tabular; + font-size: 12px; + font-weight: bold; + text-align: center; +} + +// All step circles are 24px x 24px +.circle-step { + min-width: 24px; + min-height: 24px; + line-height: 24px; +} + +.circle-step-large { + font-size: 19px; + min-width: 38px; + min-height: 38px; + line-height: 38px; +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_layout.scss b/packages/govuk-elements-sass/public/sass/elements/_layout.scss new file mode 100644 index 000000000..81c2cec32 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_layout.scss @@ -0,0 +1,66 @@ +// Layout +// ========================================================================== + +// Content +// ========================================================================== + +// Allow an ID here, this is useful as it matches the GOV.UK template skiplink +// scss-lint:disable IdSelector +#content { + @extend %site-width-container; + @extend %contain-floats; + padding-bottom: $gutter; + + @include media(desktop) { + padding-bottom: $gutter * 3; + } + // Pressing enter when focus is on the skiplink sets focus on the #content area + // Remove the blue outline + outline: none; +} + + +// Grid layout +// ========================================================================== + +// Usage: +// For two equal columns + +//