govuk_tech_docs 1.9.0.pre.rc2 → 2.0.0.pre.test.pre.release.pre.524

data/lib/assets/stylesheets/govuk_frontend_toolkit/design-patterns/_media-player.scss

@@ -1,242 +0,0 @@
-@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;
-        left: 120px;
-        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;
-        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: file-url('player-icon-volume.png');
-      }
-    }
-
-    .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;
-        // 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/lib/assets/stylesheets/modules/_govuk-logo.scss

@@ -1,47 +0,0 @@
-/**
- * GOV.UK Logo Component
- *
- * Based on the existing GOV.UK logo from the header in GOV.UK Template.
- *
- * Notes:
- *
- * - The printable-crown element is an image that is included when the page is
- *   printed. It's hidden for the screen media type, where the background image
- *   is used instead.
- *
- * Example Usage:
- *
- * <span class="govuk-logo">
- *   <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
- *   GOV.UK
- * </span>
- */
-
-.govuk-logo {
-  font-weight: bold;
-  display: inline-block;
-
-  @include screen {
-    background-image: file-url('/images/gov.uk_logotype_crown.png');
-    background-repeat: no-repeat;
-
-    @include device-pixel-ratio {
-      background-image: file-url('/images/gov.uk_logotype_crown-2x.png');
-      background-size: 36px 32px;
-    }
-
-    @include media(tablet) {
-      margin-right: 8px;
-      background-position: 0 1px;
-    }
-  }
-}
-
-.govuk-logo__printable-crown {
-  vertical-align: middle;
-  margin-right: 1px;
-
-  @include screen {
-    visibility: hidden;
-  }
-}

data/lib/assets/stylesheets/modules/_header.scss

@@ -1,289 +0,0 @@
-/**
- * Header Component
- *
- * Based on the existing GOV.UK header in GOV.UK Template, with an 'inline'
- * product name and hopefully improved mobile behaviour
- *
- * Notes:
- *
- * - Make sure you include header.js in your application. This will update
- *   the aria-expanded and aria-hidden attributes on the toggle and the nav
- *   respectively so that screen readers know what's happening.
- * - Link the current page to the same place as your skip link (e.g. #main) –
- *   this means that it is included by screen readers but is referred to as a
- *   'same page' link, and clicking it does not reload the page.
- *
- * Example Usage:
- *
- * <header class="header">
- *   <div class="header__container">
- *     <div class="header__brand">
- *       <a href="/">
- *         <span class="header__title">My Product Page</span>
- *       </a>
- *     </div>
- *
- *     <div data-module="navigation">
- *       <button type="button" class="header__navigation-toggle js-nav-toggle" aria-controls="navigation" aria-label="Show or hide top level navigation">
- *         Menu
- *       </button>
- *
- *       <nav id="navigation" class="header__navigation" aria-label="Top Level Navigation" aria-hidden="true">
- *         <ul>
- *           <li class="active"><a href="#main">Active Page</a></li>
- *           <li><a href="/other.html">Other Page</a></li>
- *         </ul>
- *       </nav>
- *     </div>
- *   </div>
- * </header>
- */
-
-$active-nav-color: #1d8feb;
-
-.header {
-  @extend %contain-floats;
-
-  @include screen {
-    background: $black;
-    color: $white;
-    border-bottom: 10px solid $white;
-  }
-}
-
-.header__container {
-  @extend %site-width-container;
-  @extend %contain-floats;
-  zoom: 1;
-
-  padding: 9px 0 6px;
-
-  @include screen {
-    border-bottom: 10px solid $mainstream-brand;
-    margin-bottom: -10px;
-  }
-}
-
-.header.header--full-width {
-  margin-bottom: 0;
-
-  @include screen {
-    border-bottom: 10px solid $mainstream-brand;
-  }
-
-  .header__container {
-    border-bottom: none;
-    width: auto;
-    max-width: none;
-    margin: 0 $gutter-half;
-
-    @include media(tablet) {
-      margin: 0 $gutter;
-    }
-  }
-}
-
-.header--without-border {
-  border-bottom: none;
-  margin-bottom: 0;
-
-  .header__container {
-    border-bottom: none;
-    margin-bottom: 0;
-  }
-}
-
-.header__brand {
-  font-size: 30px;
-  
-  // Give brand focus outline on mobile
-  &:after {
-    content: ".";
-    height: 0;
-    clear: both;
-    visibility: hidden;
-  }
-
-  a:link, a:visited {
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  .govuk-logo {
-    float: left;
-  }
-
-  @include screen {
-    a:link, a:visited {
-      color: $white;
-    }
-
-    a:focus {
-      background-color: inherit;
-    }
-
-    @include media(tablet) {
-      float: left;
-
-      .govuk-logo {
-        float: none;
-      }
-
-      a:hover {
-        text-decoration: none;
-        border-bottom: 1px solid $white;
-      }
-    }
-  }
-
-  @include print {
-    a:link, a:visited {
-      color: $black;
-    }
-  }
-}
-
-.header__title {
-  @include core-24;
-  display: block;
-  float: left;
-  clear: left;
-
-  @include media(tablet) {
-    display: inherit;
-    float: none;
-    clear: none;
-  }
-
-  .phase-banner {
-    margin-left: 5px;
-  }
-}
-
-.header__navigation {
-  @include screen {
-
-    // We want the same font size on mobile as tablet, so we can't use bold-16.
-    @include _core-font-generator(
-      $font-size: 16px,
-      $font-size-640: 16px,
-      $font-size-print: 12pt,
-      $line-height: (20 / 16),
-      $line-height-640: (20 / 16),
-      $font-weight: 700
-    );
-
-    clear: both;
-
-    padding-top: 10px;
-
-    a:link, a:visited {
-      color: $white;
-      text-decoration: none;
-      padding: 8px 0;
-      display: inline-block;
-    }
-
-    .active a:link, .active a:visited {
-      color: $active-nav-color;
-    }
-
-    a:focus, .active a:focus {
-      color: $black;
-    }
-
-    a:hover, a:active {
-      text-decoration: underline;
-    }
-
-    ul {
-      border-top: 1px solid $grey-1;
-      margin: 0;
-      padding: 8px 0 0;
-    }
-
-    li {
-      list-style: none;
-      margin: 2px 0;
-    }
-
-    @include media(tablet) {
-      display: block;
-      clear: none;
-      padding-top: 2px;
-      border-top: none;
-      float: right;
-
-      a:link, a:visited {
-        padding: 0;
-      }
-
-      ul {
-        border-top: none;
-        padding: 0;
-      }
-
-      li {
-        float: left;
-        margin: 12px 0 0 $gutter-half;
-      }
-    }
-  }
-
-  @include print {
-    display: none;
-  }
-}
-
-.header__navigation-toggle {
-  display: none;
-}
-
-.js {
-  .header__navigation {
-    display: none;
-    
-    @include media(tablet) {
-      display: block;
-    }
-  }
-
-  .header__navigation-toggle {
-    display: block;
-    float: right;
-    color: $white;
-    background: transparent;
-    border: 1px solid $grey-1;
-    border-radius: 3px;
-    padding: 2px 6px 1px;
-    font-size: 80%;
-    font-weight: bold;
-
-    input {
-      display: none;
-    }
-
-    @include media(tablet) {
-      display: none;
-    }
-
-    &:after {
-      display: inline-block;
-      font-size: 8px;
-      padding-left: 5px;
-      vertical-align: middle;
-      content: " \25BC";
-    }
-  }
-
-  &.nav-open .header__navigation-toggle:after {
-    content: "\25B2";
-  }
-
-  &.nav-open .header__navigation {
-    display: block;
-  }
-}