govuk_elements_rails 0.1.0

data/vendor/assets/stylesheets/elements-page-ie7.scss

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

data/vendor/assets/stylesheets/elements-page-ie8.scss

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

data/vendor/assets/stylesheets/elements-page.scss

@@ -0,0 +1,333 @@
+@import "main";
+
+// ==========================================================================
+// GOV.UK template styles
+// ==========================================================================
+// Override here until updated in the GOV.UK template
+
+#global-header-bar {
+  @extend %site-width-container;
+}
+#global-header-bar .inner-block {
+  padding: 0;
+}
+
+
+// ==========================================================================
+// Service Design Manual styles
+// ==========================================================================
+
+@import "service-design-manual/helpers/page-header";
+@import "service-design-manual/helpers/breadcrumbs";
+
+// Remove margins set by Service Design Manual header
+#global-breadcrumb,
+.page-header {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// ==========================================================================
+// Elements page styles
+// ==========================================================================
+
+// These are example styles, used only for the Elements page example boxes
+
+// Headings
+// Used with heading-large = 36px
+.heading-with-border {
+  border-top: 1px solid $border-colour;
+  padding-top: em(45, 36);
+}
+
+// Text
+.tight {
+  margin-bottom: 0;
+}
+
+// Lists
+.list-bullet {
+  margin-bottom: ($gutter*1.5);
+}
+
+
+// Example boxes
+// ==========================================================================
+
+.example {
+  @extend %contain-floats;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $grey-2;
+  margin-top: $gutter-half;
+  margin-bottom: $gutter*1.5;
+
+  padding-top: $gutter;
+  padding-right: $gutter-half;
+  padding-bottom: $gutter-half;
+  padding-left: $gutter-half;
+
+  @include media(tablet) {
+    padding-top: $gutter*1.5;
+    padding-right: $gutter;
+    padding-bottom: $gutter;
+    padding-left: $gutter;
+  }
+
+  &:before {
+    content: "EXAMPLE";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    padding: em(4) em(15) em(4) em(15);
+
+    @include core-14;
+    background: $grey-2;
+    color: white;
+  }
+
+  // Blue text for heading sizes
+  .highlight {
+    font-style: normal;
+    color: $hm-government;
+  }
+
+}
+
+
+// 1. Layout
+// ==========================================================================
+
+// Grid layout boxes
+.example-grid p {
+  width: 100%;
+  background: file-url("examples/grid.png") 0 0 repeat;
+  min-height: 30px;
+  margin-bottom: 0;
+  @include media(tablet) {
+    min-height: 60px;
+  }
+  overflow: hidden;
+  text-indent: -999em;
+}
+
+
+// 2. Typography
+// ==========================================================================
+
+
+// 3. Colour
+// ==========================================================================
+
+// Colour swatches
+.swatch {
+  width: 60px;
+  height: 60px;
+  @include border-radius(100%);
+  @include media(mobile) {
+    clear: both;
+    float: left;
+    margin-right: $gutter-half;
+    margin-bottom: $gutter-half;
+  }
+  @include media(tablet) {
+    margin: 0 auto $gutter-half auto;
+  }
+}
+
+// Sass list for colour palette
+$palette: (
+  ("purple", $purple),
+  ("mauve", $mauve),
+  ("fuschia", $fuschia),
+  ("pink", $pink),
+  ("baby-pink", $baby-pink),
+  ("red", $red),
+  ("mellow-red", $mellow-red),
+  ("orange", $orange),
+  ("brown", $brown),
+  ("yellow", $yellow),
+  ("green", $green),
+  ("grass-green", $grass-green),
+  ("turquoise", $turquoise),
+  ("light-blue", $light-blue)
+);
+
+@mixin color-swatches {
+  @each $color in $palette {
+    $color-name: nth($color, 1);
+    $color-var: nth($color, 2);
+    .swatch-#{$color-name} {
+      background-color: $color-var;
+    }
+  }
+}
+
+// Generate swatch classes for each colour in palette list
+@include color-swatches;
+
+.swatch-alpha {
+  background-color: $alpha-colour;
+}
+
+.swatch-beta {
+  background-color: $beta-colour;
+}
+
+.swatch-error {
+  background-color: $error-colour;
+}
+
+.swatch-focus {
+  background-color: $yellow;
+}
+
+.swatch-button-colour {
+  background-color: $button-colour;
+}
+
+.swatch-black {
+  background-color: $black;
+}
+
+.swatch-grey-1 {
+  background-color: $grey-1;
+}
+
+.swatch-grey-2 {
+  background-color: $grey-2;
+}
+
+.swatch-grey-3 {
+  background-color: $grey-3;
+}
+
+.swatch-grey-4 {
+  background-color: $grey-4;
+}
+
+.swatch-white {
+  background-color: $white;
+  border: 1px solid $grey-3;
+}
+
+.swatch-text-colour {
+  background-color: $text-colour;
+}
+
+.swatch-text-secondary {
+  background-color: $secondary-text-colour;
+}
+
+.swatch-page-colour {
+  background-color: $page-colour;
+  border: 1px solid $grey-3;
+}
+
+.swatch-button-colour {
+  background-color: $button-colour;
+}
+
+.swatch-link-colour {
+ background-color: $link-colour;
+}
+
+.swatch-link-colour-visited {
+ background-color: $link-visited-colour;
+}
+
+.swatch-link-colour-hover {
+ background-color: $link-hover-colour;
+}
+
+.swatch-border-colour {
+  background-color: $border-colour;
+}
+
+.swatch-panel-colour {
+  background-color: $panel-colour;
+}
+
+.swatch-highlight-colour {
+  background-color: $highlight-colour;
+}
+
+// Colour swatch layout
+.swatch-wrapper {
+  @include media(tablet) {
+    float: left;
+    width: 20%;
+    text-align: center;
+  }
+
+  .heading-small {
+    margin-bottom: em(10);
+  }
+
+  ul {
+    padding-bottom: $gutter-half;
+    @include media(mobile) {
+      min-height: 50px;
+      padding-top: 10px;
+    }
+  }
+  li {
+    @include core-16;
+  }
+  b {
+  font-weight: bold;
+  text-transform: uppercase;
+  }
+}
+
+
+// 4. Images and icons
+// ==========================================================================
+
+.example-images img {
+  max-width: 100%;
+  vertical-align: top;
+}
+
+
+// 5. Data
+// ==========================================================================
+
+.data .bold-xlarge,
+.data .bold-xxlarge {
+  line-height: 0.8;
+}
+
+.example .data p {
+  margin-bottom: 0;
+}
+
+
+// 6. Forms
+// ==========================================================================
+
+
+// 7. Buttons
+// ==========================================================================
+
+// Increase spacing under buttons in example boxes
+.example-button .button {
+  margin-bottom: 15px;
+}
+
+// Remove top margin from "Creating buttons" example
+.example-button .heading-small {
+  margin-top: 0;
+}
+
+// Make swatch wrapper full width for "Creating buttons" example
+.example-button .swatch-wrapper {
+  width: 100%;
+}
+
+// Remove bottom padding to keep "Creating buttons" example
+.example-button ul {
+  padding-bottom: 0;
+}

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

@@ -0,0 +1,44 @@
+// 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;
+  padding: em(10) em(15) em(5) em(15);
+  vertical-align: top;
+}
+
+.button:focus {
+  outline: 3px solid $yellow;
+}
+
+// Disabled buttons
+.button[disabled="disabled"] {
+  background: $button-colour;
+}
+
+.button[disabled="disabled"]:focus {
+  outline: none;
+}
+
+// Start now buttons
+.button-get-started {
+  @include bold-24;
+  background-image: file-url("icons/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("icons/icon-pointer-2x.png");
+    background-size: 30px 19px;
+  }
+
+  @include ie(6) {
+    background-image: file-url("icons/icon-pointer-2x.png");
+  }
+}

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

@@ -0,0 +1,39 @@
+// Details
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "colours";
+
+details {
+  display: block;
+}
+
+details summary {
+  display: inline-block;
+  color: $govuk-blue;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: em(5);
+}
+
+details summary:hover {
+  color: $link-hover-colour;
+}
+
+details summary:focus {
+  outline: 3px solid $yellow;
+}
+
+// Underline only summary text (not the arrow)
+details .summary {
+  text-decoration: underline;
+}
+
+// Match fallback arrow spacing with -webkit default
+details .arrow {
+  margin-right: 0.35em;
+}
+
+// Remove top margin from bordered panel
+details .panel-indent {
+  margin-top: 0;
+}

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

@@ -0,0 +1,179 @@
+// 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
+
+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();
+}
+
+// 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;
+}
+
+// Code styles
+pre,
+code {
+  font-size: 13px;
+  line-height: 19px;
+  color: $black;
+  background-color: $highlight-colour;
+  border: 1px solid $border-colour;
+  padding: 3px 7px;
+}
+
+