dss_tech_docs 0.1.0

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

@@ -0,0 +1,242 @@
+@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/_anchored-heading.scss

@@ -0,0 +1,54 @@
+.anchored-heading {
+  $icon-width: 23px;
+  $icon-height: 14px;
+  $icon-spacing: 3px;
+
+  position: relative;
+
+  &__icon {
+    position: absolute;
+    width: $icon-width;
+    left: -($icon-width + ($icon-spacing * 2));
+    padding: 0 $icon-spacing;
+    margin-top: -1px;
+
+    opacity: 0;
+    display: none;
+
+    text-decoration: none;
+    text-indent: -9999em;
+
+    background-image: file-url('anchored-heading-icon.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    @include device-pixel-ratio {
+      background-image: file-url('anchored-heading-icon-2x.png');
+      background-size: $icon-width $icon-height;
+    }
+
+    @include media(tablet) {
+      display: block;
+    }
+
+    &:before {
+      // zero width space character so that the link behaves like it has text,
+      // has height, sits on the baseline, etc.
+      content: "\200b";
+    }
+  }
+
+  &:hover &__icon {
+    @include media(tablet) {
+      opacity: 1;
+    }
+  }
+
+  &__icon:focus {
+    @include media(tablet) {
+      opacity: 1;
+      outline-width: 1px;
+      padding: 0 ($icon-spacing - 1);
+    }
+  }
+}

data/lib/assets/stylesheets/modules/_app-pane.scss

@@ -0,0 +1,64 @@
+@include screen {
+  @include media(tablet) {
+    $toc-width: 330px;
+
+    .flexbox, .flexboxtweener {
+
+      body {
+        overflow: hidden;
+      }
+
+      .app-pane {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 100vh;
+      }
+
+      .app-pane__header {
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 auto;
+
+        > * {
+          flex: 1 0 auto;
+        }
+      }
+
+      .app-pane__body {
+        display: flex;
+        flex: 1 1 100%;
+        min-height: 0;
+        position: relative;
+
+        > * {
+          overflow-x: scroll;
+          -webkit-overflow-scrolling: touch;
+          -ms-overflow-style: none;
+        }
+      }
+
+      .app-pane__toc {
+        flex: 0 0 auto;
+        width: $toc-width;
+        border-right: 1px solid $grey-2;
+      }
+
+      .app-pane__content {
+        flex: 1 1 auto;
+      }
+    }
+
+    .no-flexbox.no-flexboxtweener,
+    .no-js {
+      .app-pane__toc {
+        float: left;
+        width: $toc-width;
+      }
+
+      .app-pane__content {
+        margin-left: $toc-width;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+// Collapsible JS component styling, made for the navigation tree.
+// These classes are added in table-of-contents.js.
+// They should not be applied without the JS.
+
+.collapsible {
+  position: relative;
+}
+.collapsible__body {
+  display: none;
+  .collapsible.is-open & {
+    display: block
+  }
+}
+.collapsible__heading,
+.toc__list > ul > li > a:link.collapsible__heading {
+  margin-right: 30px;
+}
+.collapsible__toggle {
+  position: absolute;
+  top: 0;
+  right: -25px;
+  width: 50px;
+  height: 40px;
+  overflow: hidden;
+  text-indent: -999em;
+  border: 0;
+  background: 0;
+  color: inherit;
+  padding: 0;
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
+}
+.collapsible__toggle-icon {
+  position: absolute;
+  top: 0;
+  right: 30px;
+  &::after {
+    content: '';
+    display: block;
+    border: 2px solid $black;
+    border-width: 2px 2px 0 0;
+    transform: rotate(135deg);
+    width: 10px;
+    height: 10px;
+    margin-top: 10px;
+  }
+  .collapsible.is-open &::after {
+    transform: rotate(315deg);
+    margin-top: 18px;
+  }
+}

data/lib/assets/stylesheets/modules/_contribution-banner.scss

@@ -0,0 +1,22 @@
+.contribution-banner {
+  padding: 0;
+  max-width: 40em;
+  margin-top: $gutter * 2;
+  margin-left: $gutter-half;
+  margin-right: $gutter-half;
+
+  @include media(tablet) {
+    margin-left: $gutter + 2px;
+    margin-right: $gutter + 2px;
+  }
+
+  a {
+    margin-right: $gutter-half;
+  }
+
+  li {
+    display: inline-block;
+    list-style: none;
+    margin: 2px 0;
+  }
+}

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

@@ -0,0 +1,130 @@
+/**
+ * Footer Component
+ *
+ * Based on the existing GOV.UK footer in GOV.UK Template, built with flexbox
+ * and with tweaked behaviour for the OGL logo for the smaller viewport (when
+ * allowing for the table of contents)
+ *
+ * Example Usage:
+ *
+ * <footer class="footer">
+ *   <div class="footer__licence">
+ *     <a class="footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a>
+ *     <p class="footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
+ *   </div>
+ * 
+ *   <div class="footer__copyright">
+ *     <a class="footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
+ *   </div>
+ * </footer>
+ */
+
+// Copied from govuk_template
+$footer-background: $grey-3;
+$footer-border-top: #a1acb2;
+$footer-link: #454a4c;
+$footer-link-hover: #171819;
+$footer-text: $footer-link;
+
+.footer {
+  display: block;
+  margin-top: $gutter * 2;
+  padding: $gutter $gutter-half ($gutter * 2);
+  border-top: 1px solid $footer-border-top;
+  background: $footer-background;
+  color: $footer-text;
+  
+  @include media(tablet) {
+    padding: $gutter;
+    display: flex;
+    flex-shrink: 0;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  a:link, a:visited {
+    color: $footer-link;
+  }
+
+  a:hover, a:active {
+    color: $footer-link-hover;
+  }
+}
+
+.footer__licence {
+  line-height: 1;
+  margin-bottom: -1em;
+}
+
+.footer__licence-logo {
+  margin-top: -2px; // Align baseline with paragraph
+  margin-bottom: 1em;
+  display: block;
+  width: 41px;
+  height: 17px;
+  overflow: hidden;
+  text-indent: -999em;
+
+  background-image: file-url("/images/open-government-licence.png");
+  background-repeat: no-repeat;
+  background-size: 41px 17px;
+
+  @include device-pixel-ratio() {
+    background-image: file-url("/images/open-government-licence_2x.png");
+  }
+
+  @include media(tablet) {
+    float: left;
+    margin-right: 12px;
+  }
+}
+
+.footer__licence-description {
+  @include core-16;
+  margin: 0 0 1em;
+  display: inline-block;
+}
+
+.footer__copyright {
+  @include core-16;
+  margin-top: 30px;
+}
+
+.footer__copyright-logo {
+  display: block;
+  white-space: nowrap;
+  
+  padding: 115px 0 0 0;
+  min-width: 125px;
+
+  background-image: file-url("/images/govuk-crest.png");
+  background-size: 125px 102px;
+  background-repeat: no-repeat;
+  background-position: 50% 0%;
+  
+  text-align: center;
+  text-decoration: none;
+
+  @include device-pixel-ratio() {
+    background-image: file-url("/images/govuk-crest-2x.png");
+  }    
+}
+
+.flexbox, .flexboxtweener {
+  @include media(tablet) {
+
+    .footer__license {
+      flex-shrink: 1;
+    }
+
+    .footer__copyright {
+      margin-top: 0;
+      display: inline-block;
+      margin-left: $gutter;
+    }
+
+    .footer__copyright-logo {
+      text-align: right;
+    }
+  }
+}