govuk_elements_rails 0.1.0

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

@@ -0,0 +1,166 @@
+// Forms
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "helpers";
+@import "colours";
+
+// Fieldset is used to group more than one .form-group
+fieldset {
+  width: 100%;
+  @extend %contain-floats;
+}
+
+// Form group is used to wrap label and input pairs
+.form-group {
+  float: left;
+  width: 100%;
+  @extend %contain-floats;
+  margin-bottom: $gutter-half;
+  @include media(tablet) {
+    margin-bottom: $gutter;
+  }
+}
+
+.form-group-related {
+  margin-bottom: 10px;
+  @include media(tablet) {
+    margin-bottom: 20px;
+  }
+}
+
+.form-group-compound {
+  margin-bottom: 10px;
+}
+
+
+// Form title
+.form-title {
+  margin-bottom: $gutter;
+  @include media(tablet) {
+    margin-bottom: ($gutter*1.5);
+  }
+}
+
+
+// Labels
+
+// Form labels, or for legends styled to look like labels
+.form-label {
+  @include core-19;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-label-bold {
+  @include bold-24;
+  display: block;
+  margin-bottom: 0;
+  .form-hint {
+    @include core-19;
+  }
+}
+
+// Used for paragraphs in-between form elements
+.form-block {
+  float: left;
+  width: 100%;
+  @extend %contain-floats;
+}
+
+
+// Hints
+
+// Form hints & examples are light grey and sit above a form control
+.form-hint {
+  display: block;
+  color: $secondary-text-colour;
+  margin-bottom: 5px;
+  @include media (tablet) {
+    margin-top: 8px;
+  }
+}
+
+
+// Form controls
+
+// By default, form controls are 50% width for desktop,
+// and 100% width for mobile
+.form-control {
+  @include core-19;
+
+  width: 100%;
+  @include box-sizing(border-box);
+  padding: 4px;
+  background-color: $white;
+  border: 1px solid $border-colour;
+
+  // Disable webkit appearance and remove rounded corners
+  -webkit-appearance: none;
+  border-radius: 0;
+
+  @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;
+  margin: 10px 0;
+}
+.form-radio input {
+  vertical-align: middle;
+  margin: -4px 5px 0 0;
+}
+
+
+// Checkboxes
+.form-checkbox {
+  display: block;
+  margin: $gutter-half 0;
+}
+.form-checkbox input {
+  vertical-align: middle;
+  margin: -2px 5px 0 0;
+}
+
+// Buttons
+.form .button {
+  @include media(mobile) {
+    width: 100%;
+  }
+}
+
+
+// Form validation
+@import "forms/form-validation";
+
+
+// Form patterns
+@import "forms/form-date";
+@import "forms/form-block-labels";

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

@@ -0,0 +1,46 @@
+// Helpers
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "colours";
+@import "shims";
+@import "measurements";
+@import "typography";
+@import "css3";
+
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}
+
+// Want to see how the grid works?
+// add this class to the body to see how grid padding is set
+.example-highlight-grid {
+  .grid-row {
+    background:  $grey-2;
+  }
+  .column-highlight {
+    background: $grey-3;
+    width: 100%;
+  }
+}
+
+// Used to space the "back" link on example pages
+.example-back-link {
+  @include inline-block;
+  margin-top: $gutter;
+}
+
+// Hide, but not for screenreaders
+.visuallyhidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+}
+
+// Hide, only when JavaScript is enabled
+.js-enabled .js-hidden {
+  display: none;
+}

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

@@ -0,0 +1,224 @@
+// GOV.UK icons
+// GOV.UK front end toolkit dependencies
+@import "device-pixels";
+
+.icon {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.icon-calendar {
+  background-image: file-url("icons/icon-calendar.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-calendar-2x.png");
+    background-size: 100%;
+  }
+  width: 27px;
+  height: 27px;
+}
+
+.icon-download {
+  background-image: file-url("icons/icon-file-download.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-file-download-2x.png");
+    background-size: 100%;
+  }
+  width: 30px;
+  height: 39px;
+}
+
+.icon-important {
+  background-image: file-url("icons/icon-important.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-important-2x.png");
+    background-size: 100%;
+  }
+  width: 34px;
+  height: 34px;
+}
+
+.icon-information {
+  background-image: file-url("icons/icon-information.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-information-2x.png");
+    background-size: 100%;
+  }
+  width: 27px;
+  height: 27px;
+}
+
+.icon-locator {
+  background-image: file-url("icons/icon-locator.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-locator-2x.png");
+    background-size: 100%;
+  }
+  width: 26px;
+  height: 36px;
+}
+
+.icon-search {
+  background-image: file-url("icons/icon-search.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-search-2x.png");
+    background-size: 100%;
+  }
+  width: 30px;
+  height: 22px;
+  background-color: black;
+}
+
+// GOV.UK arrow icons
+.icon-pointer {
+  background-image: file-url("icons/icon-pointer.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-pointer-2x.png");
+    background-size: 100%;
+  }
+  width: 30px;
+  height: 19px;
+  background-color: black;
+}
+.icon-pointer-black {
+  background-image: file-url("icons/icon-pointer-black.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-pointer-black-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+// GOV.UK external link icons
+// TODO (Are these provided by the template?)
+
+// GOV.UK step icons
+.icon-step-1 {
+  background-image: file-url("icons/icon-steps/icon-step-1.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-1-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-2 {
+  background-image: file-url("icons/icon-steps/icon-step-2.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-2-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-3 {
+  background-image: file-url("icons/icon-steps/icon-step-3.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-3-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-4 {
+  background-image: file-url("icons/icon-steps/icon-step-4.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-4-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-5 {
+  background-image: file-url("icons/icon-steps/icon-step-5.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-5-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-6 {
+  background-image: file-url("icons/icon-steps/icon-step-6.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-6-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-7 {
+  background-image: file-url("icons/icon-steps/icon-step-7.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-7-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-8 {
+  background-image: file-url("icons/icon-steps/icon-step-8.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-8-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-9 {
+  background-image: file-url("icons/icon-steps/icon-step-9.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-9-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-10 {
+  background-image: file-url("icons/icon-steps/icon-step-10.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-11 {
+  background-image: file-url("icons/icon-steps/icon-step-11.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-11-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-12 {
+  background-image: file-url("icons/icon-steps/icon-step-12.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-12-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-13 {
+  background-image: file-url("icons/icon-steps/icon-step-13.png");
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-13-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}

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

@@ -0,0 +1,67 @@
+// Layout
+// ==========================================================================
+
+// GOV.UK front end toolkit dependencies
+@import "measurements";
+@import "conditionals";
+@import "grid_layout";
+@import "helpers";
+@import "design-patterns/alpha-beta";
+
+
+// Page container
+// ==========================================================================
+
+// Page container wraps the entire site content block
+#page-container {
+  @extend %site-width-container;
+  @extend %contain-floats;
+  padding-bottom: $gutter;
+  @include media(desktop) {
+    padding-bottom: $gutter*3;
+  }
+}
+
+
+// Phase banner
+// ==========================================================================
+
+.phase-banner  {
+  @include phase-banner(alpha);
+}
+
+
+// Grid layout
+// ==========================================================================
+
+// Usage:
+// For two equal columns
+
+// <div class="grid-row">
+//   <div class="column-half">
+//
+//   </div>
+//   <div class="column-half">
+//
+//   </div>
+// </div>
+
+// 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 {
+  @include grid-column( 1/4 );
+}
+.column-half {
+  @include grid-column( 1/2 );
+}
+.column-third {
+  @include grid-column( 1/3 );
+}
+.column-two-thirds {
+  @include grid-column( 2/3 );
+}