govuk_elements_rails 0.1.0

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

@@ -0,0 +1,32 @@
+// Lists
+// ==========================================================================
+
+ul,
+ol {
+  list-style-type: none;
+  padding: 0;
+}
+
+// Bulleted lists
+.list-bullet {
+  list-style-type: disc;
+  margin-left: 20px;
+}
+
+// Numbered lists
+.list-number {
+  list-style-type: decimal;
+  margin-left: 25px;
+}
+
+.list-bullet,
+.list-number {
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
+.list-bullet li,
+.list-number li {
+  margin-bottom: 5px;
+}
+

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

@@ -0,0 +1,29 @@
+// Panels
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "helpers";
+
+
+// Indented panels with a grey left hand border
+.panel-indent {
+  @extend %contain-floats;
+  clear: both;
+  border-left: 4px solid $border-colour;
+
+  padding: 10px 0 10px $gutter-half;
+  margin: ($gutter $gutter-half $gutter*1.5 0);
+}
+
+.panel-indent legend {
+  margin-top: 0;
+}
+
+// Remove bottom margin on last paragraph
+.panel-indent p:only-child,
+.panel-indent p:last-child {
+  margin-bottom: 0;
+}
+
+.panel-indent .form-group:last-child {
+  margin-bottom: 0;
+}

data/vendor/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/vendor/assets/stylesheets/elements/_tables.scss

@@ -0,0 +1,26 @@
+// Tables
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "typography";
+@import "colours";
+
+
+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/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss

@@ -0,0 +1,67 @@
+// Large hit area
+// Radio buttons & checkboxes
+
+@import "colours";
+@import "measurements";
+@import "conditionals";
+
+// 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
+  }
+
+  // Absolutely position inputs within label, to allow text to wrap
+  input {
+    position: absolute;
+    top: 18px;
+    left: $gutter-half;
+    cursor: pointer;
+  }
+
+  // Change border on hover
+  &:hover {
+    border-color: $black;
+  }
+}
+
+// To stack horizontally, use .inline on parent, to sit block labels next to each other
+.inline .block-label {
+  clear: none;
+  margin-right: $gutter-half;
+}
+
+// Selected and focused states
+
+// Add selected state
+.js-enabled label.selected {
+  background: $white;
+  border-color: $black;
+}
+
+// Add focus to block labels
+.js-enabled label.focused {
+  outline: 3px solid $yellow;
+}
+
+// Remove focus from radio/checkboxes
+.js-enabled .focused input:focus {
+  outline: none;
+}

data/vendor/assets/stylesheets/elements/forms/_form-date.scss

@@ -0,0 +1,46 @@
+// Date of birth
+
+.form-date label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-date .form-group {
+  width: 50px;
+  float: left;
+  margin-right: 20px;
+  margin-bottom: 0;
+  clear: none;
+}
+
+.form-date .form-group-year {
+  width: 70px;
+}
+
+.form-date .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 .form-date {
+  display: none;
+}
+
+// Hide native date of birth
+.no-touch .native-date-picker {
+  display: none;
+}
+
+// Show native date of birth
+.touch .native-date-picker {
+  display: block;
+}
+
+// Set a minimum height for date inputs
+.touch input[type="date"] {
+  min-height: 36px;
+}

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

@@ -0,0 +1,68 @@
+// Validation summary box
+
+@import "colours";
+@import "measurements";
+@import "conditionals";
+@import "typography";
+
+.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;
+//   @extend %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;
+}

data/vendor/assets/stylesheets/main-ie6.scss

@@ -0,0 +1,5 @@
+$is-ie: true;
+$ie-version: 6;
+$mobile-ie6: false;
+ 
+@import "main";

data/vendor/assets/stylesheets/main-ie7.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 7;
+ 
+@import "main";

data/vendor/assets/stylesheets/main-ie8.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 8;
+ 
+@import "main";

data/vendor/assets/stylesheets/main.scss

@@ -0,0 +1,36 @@
+// Helpers
+@import "elements/helpers";
+
+// Reset
+@import "elements/reset";
+
+// Typography
+@import "elements/elements-typography";
+
+// Layout
+@import "elements/layout";
+
+// Modules
+// ==========================================================================
+
+// Forms
+@import "elements/forms";
+
+// Tables
+@import "elements/tables";
+
+// Buttons
+@import "elements/buttons";
+
+// Details
+@import "elements/details";
+
+// Lists
+@import "elements/lists";
+
+// Panels
+@import "elements/panels";
+
+// Icons
+@import "elements/icons";
+

data/vendor/assets/stylesheets/prism.scss

@@ -0,0 +1,144 @@
+//  http://prismjs.com/download.html?themes=prism&languages=markup+css+scss
+//
+//  prism.js default theme for JavaScript, CSS and HTML
+//  Based on dabblet (http://dabblet.com)
+//  @author Lea Verou
+//
+
+// Create extra spacing under snippets
+.example {
+  margin-bottom: 20px;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+// Undo GOV.UK elements styles being inherited here
+pre,
+code {
+  font-size: 14px;
+  border: 0;
+  background: none;
+  line-height: inherit;
+  padding: 0;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.builtin {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #a67f59;
+  background: hsla(0,0%,100%,.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important {
+  color: #e90;
+}
+
+.token.important {
+  font-weight: bold;
+}
+
+.token.entity {
+  cursor: help;
+}