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 + +//
+//
+// +//
+//
+// +//
+//
+ +// Use .grid-row to define a row for grid columns to sit in +.grid-row { + @extend %grid-row; +} + +// Use .grid-column to create a grid column with 15px gutter +// By default grid columns break to become full width at tablet size +.column-quarter, +.column-one-quarter { + @include grid-column(1 / 4); +} + +.column-half, +.column-one-half { + @include grid-column(1 / 2); +} + +.column-third, +.column-one-third { + @include grid-column(1 / 3); +} + +.column-two-thirds { + @include grid-column(2 / 3); +} + +.column-full { + @include grid-column(1); +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_lists.scss b/packages/govuk-elements-sass/public/sass/elements/_lists.scss new file mode 100644 index 000000000..47e2d4399 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_lists.scss @@ -0,0 +1,33 @@ +// Lists +// ========================================================================== + +ul, +ol { + list-style-type: none; +} + +.list { + padding: 0; + margin-top: 5px; + margin-bottom: 20px; +} + +.list li { + margin-bottom: 5px; +} + +// Bulleted lists +.list-bullet { + list-style-type: disc; + padding-left: 20px; +} + +// Numbered lists +.list-number { + list-style-type: decimal; + padding-left: 20px; + + @include ie-lte(7) { + padding-left: 28px; + } +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_panels.scss b/packages/govuk-elements-sass/public/sass/elements/_panels.scss new file mode 100644 index 000000000..99f520ab7 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_panels.scss @@ -0,0 +1,61 @@ +// Panels +// ========================================================================== + +.panel { + @include box-sizing(border-box); + @extend %contain-floats; + clear: both; + border-left-style: solid; + border-color: $border-colour; + + padding: em(15, 19); + margin-bottom: em(15, 19); + + :first-child { + margin-top: 0; + } + + :only-child, + :last-child { + margin-bottom: 0; + } +} + +.panel-border-wide { + border-left-width: 10px; +} + +// Used to show the left edge of "toggled" content +.panel-border-narrow { + border-left-width: 5px; +} + +// Panels within form groups +// By default, panels have 15px bottom margin +.form-group .panel-border-narrow { + float: left; + width: 100%; + // Remove the bottom padding as .form-group sets a bottom margin + padding-bottom: 0; + // Don't remove the bottom margin for all panels, assume they are often within stacked groups +} + +// Note: This is incredibly fragile, and needs rebuilding. + +// The first panel in a group +.form-group .panel-border-narrow:first-child { + margin-top: 10px; +} + +// The last panel in a group +.form-group .panel-border-narrow:last-child { + margin-top: 10px; + margin-bottom: 0; +} + +// For inline panels +.inline .panel-border-narrow { + margin-top: 10px; + margin-bottom: 0; +} + diff --git a/packages/govuk-elements-sass/public/sass/elements/_phase-banner.scss b/packages/govuk-elements-sass/public/sass/elements/_phase-banner.scss new file mode 100644 index 000000000..bef19ee00 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_phase-banner.scss @@ -0,0 +1,17 @@ +// Phase banners and tags +// ========================================================================== + +.phase-banner { + @include phase-banner(); +} + +// These classnames are deprecated, +// they will be removed in a future version of GOV.UK elements +.phase-banner-alpha, +.phase-banner-beta { + @include phase-banner(); +} + +.phase-tag { + @include phase-tag(); +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_reset.scss b/packages/govuk-elements-sass/public/sass/elements/_reset.scss new file mode 100644 index 000000000..4000c1ce3 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_reset.scss @@ -0,0 +1,136 @@ +// Reset +// ========================================================================== +// flatten all browser defaults and styles inherited from gov.uk template + +// Borrowed from http://meyerweb.com/eric/tools/css/reset/ +div, +span, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark { + border: none; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +input, +textarea, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + font-size: inherit; + font-family: inherit; + line-height: inherit; + font-weight: normal; +} + +abbr[title], +acronym[title] { + text-decoration: none; +} + +// Legend -------------------------------- +// Fix legend text wrapping in Edge and IE +// --------------------------------------- +// 1. IE9-11 & Edge 12-13 +// 2. IE8-11 + +legend { + box-sizing: border-box; // [1] + max-width: 100%; // [1] + display: table; // [2] +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_shame.scss b/packages/govuk-elements-sass/public/sass/elements/_shame.scss new file mode 100644 index 000000000..9b31abf11 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_shame.scss @@ -0,0 +1,16 @@ +// Show the arrow on summary elements in Firefox - _details.scss +// The current Firefox implementation uses display: list-item to show the arrow marker. +// We want to use display: inline-block to shrink-wrap the focus outline around the text. +// This will turn off inline-block for Firefox that’s not using the polyfill only. +// @-moz-document is going away: https://bugzilla.mozilla.org/show_bug.cgi?id=1035091 . +// Hopefully they’ll fix first but if not it’ll fall back to no arrow: +// https://bugzilla.mozilla.org/show_bug.cgi?id=1270163 +// If Mozilla add display: revert and remove list-item from summary then this will fall through. +@-moz-document regexp('.*') { + details summary:not([tabindex]) { + // Allow duplicate properties, override the summary display property + // scss-lint:disable DuplicateProperty + display: list-item; + display: revert; + } +} diff --git a/packages/govuk-elements-sass/public/sass/elements/_tables.scss b/packages/govuk-elements-sass/public/sass/elements/_tables.scss new file mode 100644 index 000000000..87e9143ae --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/_tables.scss @@ -0,0 +1,49 @@ +// Tables +// ========================================================================== + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + + th, + td { + @include core-19; + padding: em(12, 19) em(20, 19) em(9, 19) 0; + + text-align: left; + color: $black; + border-bottom: 1px solid $border-colour; + } + + th { + font-weight: 700; + } + + // Right align table header cells and table cells with a numeric class + .numeric { + text-align: right; + } + + // Allow a qualifying element, only table data cells should use tabular numbers + // scss-lint:disable QualifyingElement + td.numeric { + font-family: $toolkit-font-stack-tabular; + } +} + +.table-font-xsmall { + + th { + @include bold-16; + } + + td { + @include core-16; + } + + th, + td { + padding: em(12, 16) em(20, 16) em(9, 16) 0; + } +} diff --git a/packages/govuk-elements-sass/public/sass/elements/forms/_form-date.scss b/packages/govuk-elements-sass/public/sass/elements/forms/_form-date.scss new file mode 100644 index 000000000..9c8a162dc --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/forms/_form-date.scss @@ -0,0 +1,38 @@ +// Date pattern + +// Hide the 'spinner' for webkit +// and also for Firefox +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +} + +.form-date { + + .form-group { + float: left; + width: 50px; + + margin-right: 20px; + margin-bottom: 0; + clear: none; + + label { + display: block; + padding-bottom: 2px; + } + + input { + width: 100%; + } + } + + .form-group-year { + width: 70px; + } +} diff --git a/packages/govuk-elements-sass/public/sass/elements/forms/_form-multiple-choice.scss b/packages/govuk-elements-sass/public/sass/elements/forms/_form-multiple-choice.scss new file mode 100644 index 000000000..effeb8eb6 --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/forms/_form-multiple-choice.scss @@ -0,0 +1,137 @@ +// Radio buttons & checkboxes + +// By default, multiple choice inputs stack vertically +.multiple-choice { + + display: block; + float: none; + clear: left; + position: relative; + + padding: 0 0 0 38px; + margin-bottom: $gutter-one-third; + + @include media(tablet) { + float: left; + } + + // Absolutely position inputs within label, to allow text to wrap + input { + position: absolute; + cursor: pointer; + left: 0; + top: 0; + width: 38px; + height: 38px; + z-index: 1; + + // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. + @if ($is-ie == false) or ($ie-version == 9) { + margin: 0; + @include opacity(0); + } + } + + label { + cursor: pointer; + padding: 8px $gutter-one-third 9px 12px; + display: block; + + // remove 300ms pause on mobile + -ms-touch-action: manipulation; + touch-action: manipulation; + + @include media(tablet) { + float: left; + padding-top: 7px; + padding-bottom: 7px; + } + } + + [type=radio] + label::before { + content: ""; + border: 2px solid; + background: transparent; + width: 34px; + height: 34px; + position: absolute; + top: 0; + left: 0; + @include border-radius(50%); + } + + [type=radio] + label::after { + content: ""; + border: 10px solid; + width: 0; + height: 0; + position: absolute; + top: 9px; + left: 9px; + @include border-radius(50%); + @include opacity(0); + } + + [type=checkbox] + label::before { + content: ""; + border: 2px solid; + background: transparent; + width: 34px; + height: 34px; + position: absolute; + top: 0; + left: 0; + } + + [type=checkbox] + label::after { + content: ""; + border: solid; + border-width: 0 0 5px 5px; + background: transparent; + width: 17px; + height: 7px; + position: absolute; + top: 10px; + left: 8px; + -moz-transform: rotate(-45deg); // Firefox 15 compatibility + -o-transform: rotate(-45deg); // Opera 12.0 compatibility + -webkit-transform: rotate(-45deg); // Safari 8 compatibility + -ms-transform: rotate(-45deg); // IE9 compatibility + transform: rotate(-45deg); + @include opacity(0); + } + + // Focused state + [type=radio]:focus + label::before { + @include box-shadow(0 0 0 4px $focus-colour); + } + + [type=checkbox]:focus + label::before { + @include box-shadow(0 0 0 3px $focus-colour); + } + + // Selected state + input:checked + label::after { + @include opacity(1); + } + + // Disabled state + input:disabled + label { + @include opacity(0.5); + } + + &:last-child, + &:last-of-type { + margin-bottom: 0; + } +} + +// To sit multiple choice inputs next to each other, use .inline on parent +.inline .multiple-choice { + clear: none; + + @include media (tablet) { + margin-bottom: 0; + margin-right: $gutter; + } +} diff --git a/packages/govuk-elements-sass/public/sass/elements/forms/_form-validation.scss b/packages/govuk-elements-sass/public/sass/elements/forms/_form-validation.scss new file mode 100644 index 000000000..742d1f8ba --- /dev/null +++ b/packages/govuk-elements-sass/public/sass/elements/forms/_form-validation.scss @@ -0,0 +1,94 @@ +// Form validation +// ========================================================================== + +// Use .form-group-error to add a red border to the left of a .form-group +.form-group-error { + margin-right: 15px; + border-left: 4px solid $error-colour; + padding-left: 10px; + + @include media(tablet) { + border-left: 5px solid $error-colour; + padding-left: $gutter-half; + } +} + +// Use .form-control-error to add a red border to .form-control +.form-control-error { + border: 4px solid $error-colour; +} + + +// Error messages should be red and bold +.error-message { + @include bold-19; + color: $error-colour; + + + display: block; + clear: both; + + margin: 0; + padding: 2px 0; +} + +.form-label .error-message, +.form-label-bold .error-message { + padding-top: 4px; + padding-bottom: 0; +} + +// Summary of multiple error messages +.error-summary { + + // Error summary has a border on all sides + border: 4px solid $error-colour; + + margin-top: $gutter-half; + margin-bottom: $gutter-half; + + padding: $gutter-half 10px; + + @include media(tablet) { + border: 5px solid $error-colour; + + margin-top: $gutter; + margin-bottom: $gutter; + + padding: $gutter-two-thirds $gutter-half $gutter-half; + } + + @include ie-lte(6) { + zoom: 1; + } + + // Use the GOV.UK outline focus style + &:focus { + outline: 3px solid $focus-colour; + } + + .error-summary-heading { + margin-top: 0; + } + + p { + margin-bottom: 10px; + } + + .error-summary-list { + padding-left: 0; + + li { + + @include media(tablet) { + margin-bottom: 5px; + } + } + + a { + color: $error-colour; + font-weight: bold; + text-decoration: underline; + } + } +}