moj_internal_template 0.1.0

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

@@ -0,0 +1,51 @@
+// Helpers
+// ==========================================================================
+
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}
+
+// Use the contain floats mixin for this project,
+// as placeholders are not supported by libsass
+@mixin contain-floats {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+  @include ie-lte(7) {
+    zoom: 1;
+  }
+}
+
+// Want to see how the grid works?
+// add this class to the body to see how grid padding is set
+.example-highlight-grid {
+  .grid-wrapper {
+    background:  $grey-2;
+  }
+  .grid {
+    background: $grey-4;
+  }
+  .is-inner-block-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;
+}

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

@@ -0,0 +1,222 @@
+// GOV.UK icons
+
+.icon {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.icon-calendar {
+  background-image: url("../images/icons/icon-calendar.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-calendar-2x.png");
+    background-size: 100%;
+  }
+  width: 27px;
+  height: 27px;
+}
+
+.icon-download {
+  background-image: url("../images/icons/icon-file-download.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-file-download-2x.png");
+    background-size: 100%;
+  }
+  width: 30px;
+  height: 39px;
+}
+
+.icon-important {
+  background-image: url("../images/icons/icon-important.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-important-2x.png");
+    background-size: 100%;
+  }
+  width: 34px;
+  height: 34px;
+}
+
+.icon-information {
+  background-image: url("../images/icons/icon-information.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-information-2x.png");
+    background-size: 100%;
+  }
+  width: 27px;
+  height: 27px;
+}
+
+.icon-locator {
+  background-image: url("../images/icons/icon-locator.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-locator-2x.png");
+    background-size: 100%;
+  }
+  width: 26px;
+  height: 36px;
+}
+
+.icon-search {
+  background-image: url("../images/icons/icon-search.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-search-2x.png");
+    background-size: 100%;
+  }
+  width: 30px;
+  height: 22px;
+  background-color: black;
+}
+
+// GOV.UK arrow icons
+.icon-pointer {
+  background-image: url("../images/icons/icon-pointer.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-pointer-2x.png");
+    background-size: 100%;
+  }
+  width: 30px;
+  height: 19px;
+  background-color: black;
+}
+.icon-pointer-black {
+  background-image: url("../images/icons/icon-pointer-black.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/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: url("../images/icons/icon-steps/icon-step-1.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-1-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-2 {
+  background-image: url("../images/icons/icon-steps/icon-step-2.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-2-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-3 {
+  background-image: url("../images/icons/icon-steps/icon-step-3.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-3-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-4 {
+  background-image: url("../images/icons/icon-steps/icon-step-4.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-4-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-5 {
+  background-image: url("../images/icons/icon-steps/icon-step-5.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-5-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-6 {
+  background-image: url("../images/icons/icon-steps/icon-step-6.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-6-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-7 {
+  background-image: url("../images/icons/icon-steps/icon-step-7.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-7-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-8 {
+  background-image: url("../images/icons/icon-steps/icon-step-8.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-8-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-9 {
+  background-image: url("../images/icons/icon-steps/icon-step-9.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-9-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-10 {
+  background-image: url("../images/icons/icon-steps/icon-step-10.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-10-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-11 {
+  background-image: url("../images/icons/icon-steps/icon-step-11.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-11-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-12 {
+  background-image: url("../images/icons/icon-steps/icon-step-12.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-12-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}
+
+.icon-step-13 {
+  background-image: url("../images/icons/icon-steps/icon-step-13.png");
+  @include device-pixel-ratio() {
+    background-image: url("../images/icons/icon-steps/icon-step-13-2x.png");
+    background-size: 100%;
+  }
+  width: 23px;
+  height: 23px;
+}

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

@@ -0,0 +1,151 @@
+// Layout
+// ==========================================================================
+
+#wrapper {
+  text-align: center;
+
+  padding-bottom: $gutter;
+  @include media(desktop) {
+    padding-bottom: $gutter*3;
+  }
+}
+
+// Use .outer-block to create a max width block of 1020px,
+// Use .inner-block to create padding that matches the header and footer
+
+// .outer-block,
+#content {
+  text-align: left;
+
+  @include outer-block;
+  @include contain-floats; // Repeated as %extend placeholder isn't supported
+}
+
+.inner-block {
+  @include inner-block(margin);
+}
+
+// Ensure .inner-block doesn't inherit a margin here
+// TODO: Change this in the govuk_template
+#global-cookie-message .inner-block,
+#global-header-bar .inner-block {
+  margin: 0;
+}
+
+
+// ==========================================================================
+// Phase banner
+// ==========================================================================
+
+.phase-banner  {
+  @include phase-banner(alpha);
+}
+
+
+// Grid layout
+// ==========================================================================
+
+// Usage:
+// For two equal columns
+
+// <div class="grid-wrapper">
+//   <div class="grid grid-1-2">
+//     <div class="inner-block">
+
+//     </div>
+//   </div>
+//   <div class="grid grid-1-2">
+//     <div class="inner-block">
+
+//     </div>
+//   </div>
+// </div>
+
+// Use .grid-wrapper to wrap and clear grid sections
+.grid-wrapper {
+  @include contain-floats;
+  @include media(tablet){
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+}
+
+// Use .grid-divider to create borders dividing grid sections
+.grid-divider {
+  @include contain-floats;
+  border-bottom: 1px solid $border-colour;
+  margin-bottom: 20px;
+  margin-left: 15px;
+  margin-right: 15px;
+
+  @include media(tablet){
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+}
+
+// 2. Grid units take 100% width, unless a .grid-width class is applied
+.grid {
+  float: left;
+  width: 100%;
+}
+
+// Grid widths
+.grid-1-4 {
+  @include media(tablet) {
+    width: 25%;
+  }
+}
+
+.grid-1-3 {
+  @include media(tablet) {
+    width: 33.333333333%;
+  }
+}
+
+.grid-1-2 {
+  @include media(tablet) {
+    width: 50%;
+  }
+}
+
+.grid-2-3 {
+  @include media(tablet) {
+    width: 66.666666667%;
+  }
+}
+
+.grid-3-4 {
+  @include media(tablet) {
+    width: 75%;
+  }
+}
+
+// Grid 'inner-block' sets spacing between grid cells
+.grid .inner-block {
+  padding: 0;
+  @include media(tablet) {
+    margin: 0 $gutter-half;
+  }
+}
+
+
+// Don't put .grid-wrapper inside .inner block
+// There's no need for the extra containing div
+// ** These styles are here in case you do, so we don't break the grid **
+
+.inner-block {
+
+  .grid-wrapper {
+    padding: 0;
+
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+
+  .grid-divider {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+}

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

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