govuk_frontend_toolkit 0.41.1

data/app/assets/stylesheets/design-patterns/_alpha-beta.scss

@@ -0,0 +1,49 @@
+@import "../_colours";
+@import "../_typography";
+@import "../_shims";
+
+@mixin phase-banner($state: alpha) {
+  padding: 8px 0;
+
+  @if $state == alpha {
+    background-color: $alpha-colour;
+  } @else if $state == beta {
+    background-color: $beta-colour;
+  }
+
+  p {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 15px;
+
+    color: $text-colour;
+    @include core-16;
+  }
+
+  a, a:link, a:visited, a:active {
+    color: $text-colour;
+  }
+
+  a:hover {
+    color: $text-colour;
+  }
+}
+
+@mixin phase-tag($state: alpha) {
+  @include inline-block;
+
+  @if $state == alpha {
+    background-color: $alpha-colour;
+  } @else if $state == beta {
+    background-color: $beta-colour;
+  }
+
+  color: #fff;
+  @include bold-16($line-height: 20/16);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-decoration: none;
+
+  margin: 3px 10px 0 5px;
+  padding: 2px 5px 0;
+}

data/app/assets/stylesheets/design-patterns/_buttons.scss

@@ -0,0 +1,142 @@
+@import '../_shims.scss';
+@import '../_css3.scss';
+@import '../_conditionals.scss';
+
+/*
+
+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: 0.35em 0.5em 0.15em 0.5em;
+  border: none;
+  @include border-radius(0);
+  -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;
+    &:hover,
+    &:focus,
+    &:visited{
+      color: $white;
+    }
+  } @else {
+    color: $text-colour;
+    &: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%;
+    }
+  }
+
+  // Reset styles applied to external links
+  &[rel="external"]:after {
+    display: none;
+    content: none;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  // 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=#000000);
+    }
+
+    &[type=submit].button {
+      filter: none;
+    }
+  }
+}

data/app/assets/stylesheets/design-patterns/_media-player.scss

@@ -0,0 +1,232 @@
+/* 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;
+    }
+
+    button, a {
+      &:focus {
+        background-color: orange;
+        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: image-url('player-icon-play.png');
+      }
+
+      .pause {
+        background-image: image-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: image-url('player-icon-rewind.png');
+      }
+
+      .forward {
+        left: 100%;
+        margin-left: -40px;
+        background-image: image-url('player-icon-forward.png');
+      }
+    }
+
+    .volume-controls {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 40px;
+      width: 180px;
+      overflow: visible;
+
+      .mute {
+        position: absolute;
+        bottom: 0;
+        left: 120px;
+        height: 40px;
+        width: 50px;
+        padding-top: 1px;
+        font-size: 14px;
+        line-height: 40px;
+        text-align: center;
+      }
+
+      .muted {
+        color: $light-blue;
+      }
+
+      .muted::after {
+        content: "d";
+      }
+
+      .muted ~ * {
+        opacity: 0.333;
+      }
+
+      .vol-down, .vol-up {
+        position: absolute;
+        bottom: 0;
+        height: 40px;
+        width: 60px;
+        padding-top: 2px;
+        font-size: 24px;
+        line-height: 40px;
+        text-align: center;
+        z-index: 10;
+
+        &:hover, &:focus {
+          color: $light-blue;
+        }
+      }
+
+      .vol-down {
+        text-align: left;
+        padding-left: 10px;
+        left: 0;
+      }
+
+      .vol-up {
+        text-align: right;
+        padding-right: 10px;
+        left: 60px;
+      }
+
+      .vol-display {
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        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: image-url('player-icon-volume.png');
+      }
+
+      .muted ~ .vol-display {
+        text-decoration: line-through;
+      }
+    }
+
+    .current-time {
+      position: absolute;
+      bottom: 0;
+      left: 50px;
+      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;
+        color: rgba(0,0,0,0.5);
+        z-index: 10;
+      }
+    }
+  }
+
+  .ui-helper-hidden-accessible {
+    position: absolute;
+    left: -5000%;
+  }
+}

data/govuk_frontend_toolkit.gemspec

@@ -0,0 +1,50 @@
+$:.push File.expand_path("../lib", __FILE__)
+
+require "govuk_frontend_toolkit/version"
+
+Gem::Specification.new do |s|
+  s.name         = "govuk_frontend_toolkit"
+  s.version      = GovUKFrontendToolkit::VERSION
+  s.summary      = 'Tools for building frontend applications'
+  s.authors      = ['Bradley Wright']
+  s.email        = 'bradley.wright@digital.cabinet-office.gov.uk'
+  s.homepage     = 'https://github.com/alphagov/govuk_frontend_toolkit'
+  s.license      = 'MIT'
+
+  s.add_dependency "rails", ">= 3.1.0"
+  s.add_dependency "sass", ">= 3.2.0"
+  s.add_development_dependency "gem_publisher", "1.2.0"
+  s.add_development_dependency "rake", "0.9.2.2"
+  s.add_development_dependency "gemfury", "0.4.12"
+
+  s.require_paths = ["lib", "app"]
+  s.files         = `git ls-files`.split($\)
+
+  # We need to include the files from the submodules, example from:
+  # http://somethingaboutcode.wordpress.com/2012/09/27/include-files-from-git-submodules-when-building-a-ruby-gem/
+
+  gemroot_path = `pwd`.strip
+  # get an array of submodule dirs by executing 'pwd' inside each submodule
+  `git submodule --quiet foreach pwd`.split($\).each do |submodule_path|
+    # for each submodule, change working directory to that submodule
+    Dir.chdir(submodule_path) do
+
+      # issue git ls-files in submodule's directory
+      submodule_files = `git ls-files`.split($\)
+
+      # prepend the submodule path to create absolute file paths
+      submodule_files_fullpaths = submodule_files.map do |filename|
+        "#{submodule_path}/#{filename}"
+      end
+
+      # remove leading path parts to get paths relative to the gem's root dir
+      # (this assumes, that the gemspec resides in the gem's root dir)
+      submodule_files_paths = submodule_files_fullpaths.map do |filename|
+        filename.gsub "#{gemroot_path}/", ""
+      end
+
+      # add relative paths to gem.files
+      s.files += submodule_files_paths
+    end
+  end
+end