moj_internal_template 0.1.0

data/app/assets/stylesheets/elements/_panels.scss

@@ -0,0 +1,30 @@
+// Panels
+// ==========================================================================
+
+// Indented panels with a grey left hand border
+.panel-indent {
+  @include contain-floats;
+  clear: both;
+  border-left: 5px solid $panel-colour;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  padding-left: $gutter-half;
+  @include media(tablet){
+    padding-left: 20px;
+  }
+  margin: ($gutter $gutter-half $gutter*1.5 0);
+}
+
+.panel-indent legend {
+  margin-top: 0;
+}
+
+.panel-indent p:only-child {
+  margin-bottom: 0;
+}
+
+.panel-indent .form-group:last-child {
+  margin-bottom: 0;
+}

data/app/assets/stylesheets/elements/_reset.scss

@@ -0,0 +1,33 @@
+// 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;
+}

data/app/assets/stylesheets/elements/_shame.scss

@@ -0,0 +1,79 @@
+// Shame
+// ==========================================================================
+// http://csswizardry.com/2013/04/shame-css/
+// This file is for changes awaiting merge into the govuk_frontend_toolkit
+
+// New phase banner
+// Awaiting merge of pull request
+// https://github.com/alphagov/govuk_frontend_toolkit/pull/112
+
+// Phase banner usage:
+//
+// .phase-banner {
+//    @include phase-banner($state: beta);
+// }
+
+@mixin phase-banner($state: alpha) {
+  padding: 10px 0 8px 0;
+  @include media(tablet) {
+    padding-bottom: 10px;
+  }
+  border-bottom: 1px solid $border-colour;
+
+  p {
+    margin: 0;
+    color: $banner-text-colour;
+    @include core-16;
+  }
+
+  .phase-tag {
+    @include phase-tag($state);
+  }
+
+  span {
+    @include inline-block;
+    width: 75%;
+    vertical-align: top;
+
+    @include media(tablet) {
+      width: auto;
+      vertical-align: baseline;
+    }
+  }
+}
+
+// Phase tag usage:
+//
+// Alpha
+// .phase-tag {
+//    @include phase-tag;
+// }
+//
+// Beta
+// .phase-tag {
+//    @include phase-tag(beta);
+// }
+
+@mixin phase-tag($state: alpha) {
+  @include inline-block;
+  vertical-align: top;
+
+  @include media(tablet){
+    vertical-align: baseline;
+  }
+
+  margin: 0 8px 0 0;
+  padding: 2px 5px 0;
+
+  @include bold-16($line-height: 20/16);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-decoration: none;
+
+  color: #fff;
+  @if $state == alpha {
+    background-color: $alpha-colour;
+  } @else if $state == beta {
+    background-color: $beta-colour;
+  }
+}

data/app/assets/stylesheets/elements/_tables.scss

@@ -0,0 +1,22 @@
+// Tables
+// ==========================================================================
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+table th,
+table td {
+  @include core-16;
+  padding: em(14) em(20) em(10) 0;
+
+  text-align: left;
+  color: #0b0c0c;
+  border-bottom: 1px solid $border-colour;
+}
+
+table th {
+  font-weight: 700;
+}

data/app/assets/stylesheets/elements/_typography.scss

@@ -0,0 +1,150 @@
+// Typography
+// ==========================================================================
+
+// Increase the base font size to 19px
+// Using the core-19 mixin from the govuk_toolkit _typography.scss file
+
+#content {
+  @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();
+}
+
+// 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 core-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-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;
+}
+
+
+// Code styles
+pre,
+code {
+  font-size: 13px;
+  line-height: 19px;
+  color: $black;
+  background-color: $highlight-colour;
+  border: 1px solid $border-colour;
+  padding: 3px 7px;
+}
+
+

data/app/assets/stylesheets/elements/forms/_form-chunky-labels.scss

@@ -0,0 +1,62 @@
+// Large hit area
+// Radio buttons & checkboxes
+
+// By default, block labels stack vertically
+.block-label {
+
+  display: block;
+  float: none;
+  clear: left;
+  position: relative;
+
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  padding: (18px $gutter $gutter-half $gutter*1.5);
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  cursor: pointer; // Encourage clicking on block labels
+
+  @include media(tablet) {
+    float: left;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    // width: 25%; - Test : check that text within labels will wrap
+  }
+}
+
+.block-label:hover {
+  border-color: $black;
+}
+
+// Position checkbox within label, to allow text to wrap
+.block-label input {
+  position: absolute;
+  top: 18px;
+  left: $gutter-half;
+  cursor: pointer;
+}
+
+// Use inline, to sit block labels next to each other
+.inline .block-label {
+  clear: none;
+  margin-right: $gutter-half;
+}
+
+// Only if JavaScript is enabled
+
+// Add focus styles to block labels
+.js-enabled .add-focus {
+  outline: 3px solid $yellow;
+}
+
+// Remove focus styles from radio and checkbox inputs
+.js-enabled .block-label input:focus {
+  outline: none;
+}
+
+// Add selected state to block labels
+.js-enabled .selected {
+  background: $white;
+  border-color: $black;
+}

data/app/assets/stylesheets/elements/forms/_form-date-of-birth.scss

@@ -0,0 +1,45 @@
+// Date of birth
+
+.date-of-birth label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.date-of-birth .form-group {
+  width: 50px;
+  float: left;
+  margin-right: 20px;
+  clear: none;
+}
+
+.date-of-birth .form-group-year {
+  width: 70px;
+}
+
+.date-of-birth .form-group input {
+  width: 100%;
+}
+
+
+// Use Modernizr to detect for touch events
+// Build: http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes
+
+// Hide date of birth
+.touch .date-of-birth {
+  display: none;
+}
+
+// Hide native date of birth
+.no-touch .native-date-of-birth {
+  display: none;
+}
+
+// Show native date of birth
+.touch .native-date-of-birth {
+  display: block;
+}
+
+// Set a minimum height for date inputs
+.touch input[type="date"] {
+  min-height: 36px;
+}

data/app/assets/stylesheets/elements/forms/_form-validation.scss

@@ -0,0 +1,64 @@
+@import "../colours";
+
+// Validation summary box
+.validation-summary {
+  border: 3px solid $error-colour;
+  padding: $gutter-half $gutter;
+  margin-bottom: $gutter;
+
+  @include ie-lte(6){
+    zoom: 1;
+  }
+}
+
+.validation-summary ul {
+  margin-top: 10px;
+}
+
+.validation-summary li,
+.validation-summary p {
+  @include core-16;
+}
+
+.validation-summary p {
+  margin-top: $gutter-half;
+  margin-bottom: 5px;
+}
+
+.validation-summary a {
+  color: $error-colour;
+  @include ie-lte(6) {
+    color: $error-colour !important;
+  }
+}
+
+.validation-summary .heading-small {
+  margin-top: $gutter-half;
+}
+
+
+// Validation error message box
+// .validation-error {
+//   clear: both;
+//   @include contain-floats;
+//   border-left: 3px solid $error-colour;
+//   padding: $gutter- $gutter;
+//   margin-bottom: $gutter-half;
+//   margin-left: -($gutter);
+// }
+
+// .validation-error .form-group {
+//   margin-bottom: 20px;
+// }
+
+// .validation-error p {
+//   margin-bottom: 10px;
+// }
+
+
+// Validation message
+.validation-message {
+  display: block;
+  @include core-16;
+  color: $error-colour;
+}