Isolate admin styles from the frontend

This is so we don't break the admin portal by making frontend changes.

app/assets/stylesheets/admin.scss

@@ -0,0 +1,34 @@
+@import "admin/govuk/conditionals";
+@import "admin/govuk/shims";
+@import "admin/govuk/css3";
+@import "admin/govuk/colours";
+@import "admin/govuk/typography";
+@import "admin/govuk/grid_layout";
+@import "admin/govuk/design-patterns/buttons";
+@import "admin/govuk/details";
+@import "admin/govuk/forms";
+@import "admin/govuk/panels";
+@import "admin/govuk/tables";
+
+@import "admin/petitions/helpers";
+@import "admin/petitions/reset";
+@import "admin/petitions/basic";
+@import "admin/petitions/colours";
+@import "admin/petitions/typography";
+@import "admin/petitions/accessibility";
+@import "admin/petitions/icons";
+@import "admin/petitions/buttons";
+@import "admin/petitions/layout";
+@import "admin/petitions/header";
+@import "admin/petitions/footer";
+@import "admin/petitions/forms";
+@import "admin/petitions/search-inline";
+@import "admin/petitions/colours";
+@import "admin/petitions/meta";
+@import "admin/petitions/actions";
+@import "admin/petitions/locking";
+@import "admin/petitions/list";
+@import "admin/petitions/logout";
+@import "admin/petitions/tables";
+@import "admin/petitions/shared";
+@import "admin/petitions/hub";

app/assets/stylesheets/admin/govuk/_colours.scss

@@ -0,0 +1,2 @@
+@import "colours/palette";
+@import "colours/organisation";

app/assets/stylesheets/admin/govuk/_conditionals.scss

@@ -0,0 +1,85 @@
+// Media query helpers. These make producing IE layouts
+// super easy.
+
+// The base css you write should be for mobile. You can
+// then add desktop styles on top.
+//
+// Usage:
+//
+//   div.columns {
+//     border: 1px solid;
+//
+//     @include media(desktop){
+//       width: 30%;
+//       float: left;
+//     }
+//     @include ie-lte(8) {
+//       something to fix visual bugs in old IE
+//     }
+//     @include ie(6) {
+//       padding: 0;
+//     }
+//   }
+
+
+$is-ie: false !default;
+$mobile-ie6: true !default;
+
+@-ms-viewport {
+  width: device-width;
+}
+
+@-o-viewport {
+  width: device-width;
+}
+
+@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {
+  @if $is-ie and ($ignore-for-ie == false) {
+    @if $size != mobile {
+      @if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
+        @content;
+      }
+    }
+  } @else {
+    @if $size == desktop {
+      @media (min-width: 769px){
+        @content;
+      }
+    } @else if $size == tablet {
+      @media (min-width: 641px){
+        @content;
+      }
+    } @else if $size == mobile {
+      @media (max-width: 640px){
+        @content;
+      }
+    } @else if $max-width != false {
+      @media (max-width: $max-width){
+        @content;
+      }
+    } @else if $min-width != false {
+      @media (min-width: $min-width){
+        @content;
+      }
+    } @else {
+      @media (min-width: $size){
+        @content
+      }
+    }
+  }
+}
+
+@mixin ie-lte($version) {
+  @if $is-ie {
+    @if $ie-version <= $version {
+      @content;
+    }
+  }
+}
+@mixin ie($version) {
+  @if $is-ie {
+    @if $ie-version == $version {
+      @content;
+    }
+  }
+}

app/assets/stylesheets/admin/govuk/_css3.scss

@@ -0,0 +1,86 @@
+// CSS 3 mixins
+
+// This file includes mixins for CSS properties that require vendor prefixes.
+
+// Please add more mixins here as you need them, rather than adding them to
+// your application - this lets us manage them in one place.
+
+// You can use the @warn directive to deprecate a mixin where the property
+// no longer needs prefixes.
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius; // Chrome 4.0, Safari 3.1 to 4.0, Mobile Safari 3.2, Android Browser 2.1
+     -moz-border-radius: $radius; // Firefox 2.0 to 3.6
+          border-radius: $radius;
+}
+
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
+     -moz-box-shadow: $shadow; // Firefox 3.5 to 3.6
+          box-shadow: $shadow;
+}
+
+@mixin scale($x, $y, $transform-origin: 50% 50% 0) {
+  // $x and $y should be numeric values without units
+  -webkit-transform: scale($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
+     -moz-transform: scale($x, $y); // Firefox 3.5 to 15.0
+      -ms-transform: scale($x, $y); // IE9 only
+          transform: scale($x, $y);
+
+  -webkit-transform-origin: $transform-origin; // Chrome, Safari 3.1
+     -moz-transform-origin: $transform-origin; // Firefox 10 to 15.0
+      -ms-transform-origin: $transform-origin; // IE9
+          transform-origin: $transform-origin;
+}
+
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
+     -moz-transform: translate($x, $y); // Firefox 3.5 to 15.0
+      -ms-transform: translate($x, $y); // IE9 only
+       -o-transform: translate($x, $y); // Opera 10.5 to 12.0
+          transform: translate($x, $y);
+}
+
+@mixin gradient($from, $to) {
+  // Creates a vertical gradient where $from is the colour at the top of the element
+  // and $to is the colour at the bottom. The top colour is used as a background-color
+  // for browsers that don't support gradients.
+  background-color: $from;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); // Safari 4.0 to 5.1, Chrome 1.0 to 10.0, old deprecated syntax
+  background-image: -webkit-linear-gradient($from, $to); // Chrome 10.0 to 25.0, Safari 5.1 to 6.0, Mobile Safari 5.0 to 6.1, Android Browser 4.0 to 4.3
+  background-image:    -moz-linear-gradient($from, $to); // Firefox 3.6 to 15.0
+  background-image:      -o-linear-gradient($from, $to); // Opera 11.1 to 12.0
+  background-image:         linear-gradient($from, $to);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); // IE6 to IE9
+}
+
+@mixin transition($property, $duration, $function, $delay: 0s) {
+  -webkit-transition: ($property $duration $function $delay); // Chrome 4.0 to 25.0, Safari 3.1 to 6.0, Mobile Safari 3.2 to 6.1, Android Browser 2.1 to 4.3
+     -moz-transition: ($property $duration $function $delay); // Firefox 4.0 to 15.0
+       -o-transition: ($property $duration $function $delay); // Opera 10.5 to 12.0
+          transition: ($property $duration $function $delay);
+}
+
+@mixin box-sizing($type) {
+  // http://www.w3.org/TR/css3-ui/#box-sizing
+  // $type can be one of: content-box | padding-box | border-box | inherit
+  -webkit-box-sizing: $type; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
+     -moz-box-sizing: $type; // Firefox 2.0 to 28.0, Firefox for Android 26.0 onwards
+          box-sizing: $type;
+}
+
+@mixin appearance($appearance) {
+  -webkit-appearance: $appearance;
+     -moz-appearance: $appearance;
+}
+
+@mixin calc($property, $calc) {
+  #{$property}: -webkit-calc(#{$calc}); // Chrome 19.0 to 25.0, Safari 6.0, Mobile Safari 6.0 to 6.1
+  #{$property}:         calc(#{$calc});
+}
+
+@mixin opacity($trans) {
+  zoom: 1;
+  filter: unquote('alpha(opacity=' + ($trans * 100) + ')'); // IE6 to IE8
+  opacity: $trans;
+}

app/assets/stylesheets/admin/govuk/_details.scss

@@ -0,0 +1,40 @@
+// Details
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "colours";
+
+details {
+  display: block;
+
+  summary {
+    display: inline-block;
+    color: $govuk-blue;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: em(5);
+
+    &:hover {
+      color: $link-hover-colour;
+    }
+
+    &:focus {
+      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;
+  }
+}

app/assets/stylesheets/admin/govuk/_device-pixels.scss

@@ -0,0 +1,11 @@
+@mixin device-pixel-ratio($ratio: 2) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (  -o-min-device-pixel-ratio: #{($ratio*10)}/10),
+  only screen and (     min-device-pixel-ratio: $ratio),
+  only screen and (             min-resolution: #{($ratio*96)}dpi),
+  only screen and (             min-resolution: #{$ratio}dppx) { 
+    @content;
+  }
+}
+

app/assets/stylesheets/admin/govuk/_font_stack.scss

@@ -0,0 +1,10 @@
+//  Petitions font stacks, referred to in typography.scss
+
+// Petitions font stack
+$petitions-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+// No tabular font stack yet
+$petitions-font-tabular: $petitions-font;
+
+// Font reset for print
+$print-reset: sans-serif;