govuk_elements_rails 0.3.0 → 1.1.2

data/vendor/assets/stylesheets/elements/_base.scss

@@ -0,0 +1,126 @@
+html, body, button, input, table, td, th { font-family: $NTA-Light; }
+
+// 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.
+
+html {
+  font-size: 62.5%;   // 1
+  overflow-y: scroll; // 2
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
+  // Set background colour to match footer background
+  background-color: $grey-8;
+  // Force the scrollbar to always display in IE10/11
+  -ms-overflow-style: scrollbar;
+}
+
+// 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;
+}
+
+// Set focus styles
+a {
+  -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;
+}
+
+// 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;
+}
+
+// External link styles
+a[rel="external"] {
+  @include external-link-default;
+  @include external-link-19;
+  @include media-down(mobile) {
+    @include external-link-16;
+  }
+}
+
+.external-link {
+  @include external-link-12-no-hover;
+  @include external-link-heading;
+}

data/vendor/assets/stylesheets/elements/_breadcrumbs.scss

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

data/vendor/assets/stylesheets/elements/_buttons.scss

@@ -1,15 +1,14 @@
 // Buttons
 // ==========================================================================
-// GOV.UK front end toolkit dependencies
-@import "design-patterns/buttons";
-@import "measurements";
-@import "typography";
 
 .button {
   @include button ($button-colour);
-  margin: 0 $gutter-half $gutter-half 0;
+  @include box-sizing (border-box);
   padding: em(10) em(15) em(5) em(15);
   vertical-align: top;
+  @include media (mobile) {
+    width: 100%;
+  }
 }
 
 // Fix unwanted button padding in Firefox
@@ -32,6 +31,7 @@
 }
 
 // Start now buttons
+.button-start,
 .button-get-started {
   @include bold-24;
   background-image: file-url("icons/icon-pointer.png");

data/vendor/assets/stylesheets/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 1em 0;
+  padding: 2em 0 1em 0;
+  color: $white;
+  background: $turquoise;
+  text-align: center;
+}

data/vendor/assets/stylesheets/elements/_details.scss

@@ -1,7 +1,5 @@
 // Details
 // ==========================================================================
-// GOV.UK front end toolkit dependencies
-@import "colours";
 
 details {
   display: block;
@@ -21,20 +19,16 @@ details {
       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;
   }
-  
-  // Remove top margin from bordered panel
-  .panel-indent {
-    margin-top: 0;
-  }
+
 }

data/vendor/assets/stylesheets/elements/_elements-typography.scss

@@ -1,10 +1,6 @@
 // Typography
 // ==========================================================================
 
-// GOV.UK front end toolkit dependencies
-@import "typography";
-@import "colours";
-
 // Increase the base font size to 19px for the main content area
 // Using the core-19 mixin from the govuk_toolkit _typography.scss file
 
@@ -178,15 +174,112 @@ p {
   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 #0b0c0c;
+    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
-pre,
-code {
-  font-size: 13px;
-  line-height: 19px;
+.code {
+  color: black;
+  text-shadow: 0 1px white;
+  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;
+
   color: $black;
   background-color: $highlight-colour;
   border: 1px solid $border-colour;
-  padding: 3px 7px;
+  padding: 4px 4px 2px 4px;
 }
 
+// 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/vendor/assets/stylesheets/elements/_forms.scss

@@ -1,8 +1,17 @@
 // Forms
 // ==========================================================================
-// GOV.UK front end toolkit dependencies
-@import "helpers";
-@import "colours";
+
+// Contents:
+//
+// 1. Helpers
+// 2. Form wrappers
+// 3. Form labels
+// 4. Form hints
+// 5. Form controls
+// 6. Form control widths
+
+// 1. Helpers
+// ==========================================================================
 
 // Fieldset is used to group more than one .form-group
 fieldset {
@@ -17,12 +26,23 @@ fieldset {
   }
 }
 
+// Remove margin under textarea in Chrome and FF
+textarea{
+  display: block;
+}
+
+
+// 2. Form wrappers
+// ==========================================================================
+
 // 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) {
@@ -30,6 +50,7 @@ fieldset {
   }
 }
 
+// Form group related is used to reduce the space between label and input pairs
 .form-group-related {
   margin-bottom: 10px;
 
@@ -44,19 +65,11 @@ fieldset {
 }
 
 
-// Form title
-.form-title {
-  margin-bottom: $gutter;
-
-  @include media(tablet) {
-    margin-bottom: ($gutter*1.5);
-  }
-}
-
-
-// Labels
+// 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;
@@ -80,6 +93,7 @@ legend {
 }
 
 // Remove spacing when error messages are shown
+// TODO: Move into /forms/_form-validation.scss
 .error legend {
   .form-label,
   .form-label-bold {
@@ -87,23 +101,25 @@ legend {
   }
 }
 
-// Used for paragraphs in-between form elements
+// 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: 10px;
+    margin-top: 0;
+    margin-bottom: 10px;
   }
 }
 
+// 4. Form hints
+// ==========================================================================
 
-// Hints
-
-// Form hints & examples are light grey and sit above a form control
+// Form hints and example text are light grey and sit above a form control
 .form-hint {
   @include core-19;
   display: block;
@@ -112,7 +128,9 @@ legend {
   margin-bottom: 5px;
 }
 
-// Form controls
+
+// 5. Form controls
+// ==========================================================================
 
 // By default, form controls are 50% width for desktop,
 // and 100% width for mobile
@@ -123,44 +141,16 @@ legend {
 
   padding: 4px;
   background-color: $white;
-  border: 1px solid $border-colour;
-
-  // Disable webkit appearance and remove rounded corners
-  -webkit-appearance: none;
-  border-radius: 0;
+  border: 2px solid $grey-1;
 
+  // TODO: Remove 50% width set for tablet and up
+  // !! BREAKING CHANGE !!
   @include media(tablet) {
     width: 50%;
   }
-}
 
-
-// Form control widths
-.form-control-3-4 {
-  width: 100%;
-
-  @include media(tablet) {
-    width: 75%;
-  }
 }
 
-.form-control-1-2 {
-  width: 100%;
-
-  @include media(tablet) {
-    width: 50%;
-  }
-}
-
-.form-control-1-4 {
-  width: 25%;
-}
-
-.form-control-1-8 {
-  width: 12.5%;
-}
-
-
 // Radio buttons
 .form-radio {
   display: block;
@@ -172,7 +162,6 @@ legend {
   }
 }
 
-
 // Checkboxes
 .form-checkbox {
   display: block;
@@ -185,18 +174,52 @@ legend {
 }
 
 
-// Buttons
-.form .button {
-  @include media(mobile) {
-    width: 100%;
+// 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 validation
-@import "forms/form-validation";
+.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 patterns
-@import "forms/form-date";
-@import "forms/form-block-labels";
+.form-control-1-8 {
+  width: 100%;
+  @include media(tablet) {
+    width: 12.5%;
+  }
+}