govuk-jekyll-theme 0.1.0

data/_sass/govuk_frontend_toolkit/design-patterns/_buttons.scss

@@ -0,0 +1,145 @@
+@import '../shims';
+@import '../css3';
+@import '../conditionals';
+@import '../colours';
+
+// Mixin and defaults for making buttons on GOV.UK services.
+
+// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+
+// Example usage:
+
+// .button{
+//   @include button;
+// }
+// .button-secondary{
+//   @include button($grey-3);
+// }
+// .button-warning{
+//   @include button($red);
+// }
+
+
+@mixin button($colour: $button-colour) {
+  // Colour
+  background-color: $colour;
+
+  // Size and shape
+  position: relative;
+  @include inline-block;
+  padding: .526315em .789473em .263157em; // 10px 15px 5px
+  border: none;
+  @include border-radius(0);
+  outline: 1px solid transparent; // keep some button appearance when changing colour settings in browsers
+  outline-offset: -1px; // fixes bug in Safari that outline width on focus is not overwritten, is reset to 0 on focus in govuk_template
+  -webkit-appearance: none;
+
+  // Bottom edge effect
+  @include box-shadow(0 2px 0 darken($colour, 15%));
+  @include ie-lte(8) {
+    border-bottom: 2px solid darken($colour, 15%);
+  }
+
+  // Text
+  font-size: 1em; // inherit from parent
+  line-height: 1.25;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+
+  // Interaction
+  cursor: pointer;
+
+  &:visited {
+    background-color: $colour;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: darken($colour, 5%);
+  }
+
+  &:active {
+    top: 2px;
+    @include box-shadow(0 0 0 $colour);
+  }
+
+  // Disabled button styles
+  &.disabled,
+  &[disabled="disabled"],
+  &[disabled] {
+    @include opacity(0.5);
+    &:hover {
+      cursor: default;
+      background-color: $colour;
+    }
+
+    &:active {
+      top: 0;
+      @include box-shadow(0 2px 0 darken($colour, 15%));
+      @include ie-lte(8) {
+        border-bottom: 2px solid darken($colour, 15%);
+      }
+    }
+  }
+
+  // Set text colour depending on background colour
+  @if lightness($colour) < 50% {
+    color: $white;
+
+    &:link,
+    &:link:focus,
+    &:hover,
+    &:focus,
+    &:visited {
+      color: $white;
+    }
+  } @else {
+    color: $text-colour;
+
+    &:link,
+    &:link:focus,
+    &:hover,
+    &:focus,
+    &:visited {
+      color: $text-colour;
+    }
+  }
+
+  // making the click target bigger than the button
+  // (and fill the space made when the button moves)
+  &:before {
+    content: "";
+    height: 110%;
+    width: 100%;
+    display: block;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:before {
+    top: -10%;
+    height: 120%;
+
+    // IE6 ignores the :before psuedo-class but applies the block to :active
+    // It therefore needs to be reset
+    @include ie(6) {
+      top: auto;
+      height: 100%;
+    }
+  }
+
+  // Fixes a bug where IE puts a black border around certain elements
+  @include ie-lte(8) {
+    &[type="submit"],
+    &[type="reset"],
+    &[type="button"] {
+      filter: chroma(color = $black);
+    }
+
+    &[type=submit].button {
+      filter: none;
+    }
+  }
+}

data/_sass/govuk_frontend_toolkit/design-patterns/_media-player.scss

@@ -0,0 +1,264 @@
+@import '../colours';
+@import '../url-helpers';
+
+// Player overrides
+
+@mixin media-player {
+  display: block;
+  overflow: hidden;
+  margin: 30px 0;
+
+  &.player-wide {
+    min-width: 580px;
+  }
+
+  span {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .video {
+    position: relative;
+    z-index: 3000;
+
+    iframe {
+      display: block;
+    }
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .control-bar {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    border-bottom: 1px solid $border-colour;
+
+    button {
+      background: transparent;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    a,
+    button {
+      &:focus {
+        background-color: $focus-colour;
+        outline: none;
+      }
+    }
+
+    .player-controls {
+      .play,
+      .pause {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 40px;
+        height: 40px;
+        overflow: hidden;
+        text-indent: -5000%;
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .play {
+        background-image: file-url('player-icon-play.png');
+      }
+
+      .pause {
+        background-image: file-url('player-icon-pause.png');
+      }
+
+      .rewind,
+      .forward {
+        position: absolute;
+        top: 0;
+        z-index: 30;
+        height: 20px;
+        width: 40px;
+        overflow: hidden;
+        text-indent: -5000%;
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .rewind {
+        left: 0;
+        background-image: file-url('player-icon-rewind.png');
+      }
+
+      .forward {
+        left: 100%;
+        margin-left: -40px;
+        background-image: file-url('player-icon-forward.png');
+      }
+    }
+
+    .volume-controls {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 40px;
+      width: 180px;
+      overflow: visible;
+
+      .mute {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        height: 40px;
+        width: 50px;
+        padding-top: 1px;
+        font-size: 14px;
+        line-height: 40px;
+        text-align: center;
+      }
+
+      .muted {
+        color: $light-blue;
+
+        ~ * {
+          opacity: 0.333;
+        }
+
+        ~ .vol-display {
+          text-decoration: line-through;
+        }
+      }
+
+      .muted::after {
+        content: "d";
+      }
+
+      .vol-down,
+      .vol-up {
+        position: absolute;
+        bottom: 0;
+        height: 40px;
+        width: 60px;
+        font-size: 24px;
+        line-height: 40px;
+        text-align: center;
+        z-index: 10;
+
+        &:hover,
+        &:focus {
+          color: $light-blue;
+          background-color: transparent;
+          outline: none;
+
+          &:before {
+            background-color: $focus-colour;
+          }
+        }
+
+        &:before {
+          content: "";
+          display: inline-block;
+          position: absolute;
+          width: 50%;
+          height: 100%;
+          z-index: -1;
+        }
+      }
+
+      .vol-down {
+        text-align: left;
+        padding-left: 10px;
+        left: 0;
+
+        &:before {
+          left: 0;
+        }
+      }
+
+      .vol-up {
+        text-align: right;
+        padding-right: 10px;
+        left: 65px;
+
+        &:before {
+          right: 0;
+        }
+      }
+
+      .vol-display {
+        position: absolute;
+        bottom: 0;
+        left: 25px;
+        height: 40px;
+        width: 0;
+        padding-left: 35px;
+        overflow: visible;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 40px;
+        background-repeat: no-repeat;
+        background-position: center left;
+        background-image: file-url('player-icon-volume.png');
+      }
+    }
+
+    .current-time {
+      position: absolute;
+      bottom: 0;
+      left: 45px;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      font-weight: bold;
+    }
+
+    .duration-time {
+      display: none;
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .ui-slider {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 20px;
+      overflow: hidden;
+      background: $border-colour;
+
+      .progress-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        padding-bottom: 1px;
+        background: $light-blue;
+      }
+
+      .ui-slider-handle {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        padding-bottom: 1px;
+        width: 20px;
+        // Allow RGBA here, it is the only colour value with alpha transparency
+        // scss-lint:disable ColorVariable
+        color: rgba(0, 0, 0, 0.5);
+        z-index: 10;
+      }
+    }
+  }
+
+  .ui-helper-hidden-accessible {
+    position: absolute;
+    left: -5000%;
+  }
+}

data/_sass/govuk_template/fonts-ie8.css

@@ -0,0 +1,30 @@
+/* The below comment needs a ! so that the copyright message doesn't get removed during the minification step. See: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#comments */
+
+/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
+
+
+@font-face {
+  font-family: 'nta';
+  src: url(fonts/GDSTransportWebsite.eot?0.23.0#) format('embedded-opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'nta';
+  src: url(fonts/GDSTransportWebsite-Bold.eot?0.23.0#) format('embedded-opentype');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'ntatabularnumbers';
+  src: url(fonts/GDSTransportTabular-Light.eot?0.23.0#) format('embedded-opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'ntatabularnumbers';
+  src: url(fonts/GDSTransportTabular-Bold.eot?0.23.0#) format('embedded-opentype');
+  font-weight: bold;
+}