govuk_publishing_components 8.2.0 → 9.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss

@@ -0,0 +1,49 @@
+// Govspeak contact
+// https://govuk-static.herokuapp.com/component-guide/govspeak/contact
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  // .address is used by the `$A` markdown pattern
+  .address,
+  .contact {
+    border-left: 1px solid $border-colour;
+    padding-left: $gutter-half;
+    margin-bottom: $gutter;
+    margin-top: $gutter;
+  }
+
+  .contact {
+    @extend %contain-floats;
+    position: relative;
+
+    .content {
+      float: none;
+      width: $full-width;
+
+      h3 {
+        @include bold-19;
+        margin-bottom: 5px;
+      }
+
+      .email-url-number {
+        .email {
+          word-wrap: break-word;
+        }
+
+        span {
+          display: block;
+        }
+      }
+
+      .comments {
+        @include core-16;
+        @include media(tablet) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss

@@ -0,0 +1,25 @@
+// Govspeak example callout
+// https://govuk-static.herokuapp.com/component-guide/govspeak/example
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .example {
+    border-left: 1em solid $panel-colour;
+    padding: 1em 0 1em 1em;
+    margin: 2em 0;
+
+    // Remove margin from the last element
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
+
+    strong {
+      display: block;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss

@@ -0,0 +1,27 @@
+// Govspeak footnotes callout
+// https://govuk-static.herokuapp.com/component-guide/govspeak/footnotes
+//
+// Support:
+//
+// This appears to be built into kramdown, we're just applying styling to it.
+// https://kramdown.gettalong.org/syntax.html#footnotes
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .footnotes {
+    border-top: 1px solid $border-colour;
+    margin-top: $gutter;
+    padding-top: $gutter-one-third;
+
+    ol {
+      margin-top: 0;
+      padding-top: 0;
+
+      li p {
+        margin: 10px 0;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss

@@ -0,0 +1,22 @@
+// Govspeak fractions
+// https://govuk-static.herokuapp.com/component-guide/govspeak/image_fractions
+// https://govuk-static.herokuapp.com/component-guide/govspeak/text_fractions
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✘
+
+.gem-c-govspeak {
+  .fraction {
+    sup,
+    sub {
+      @include core-14;
+    }
+
+    img {
+      display: inline-block;
+      width: auto;
+      margin: 0 0 -5px;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -0,0 +1,42 @@
+$highlight-answer-bg-color: #28a197;
+$highlight-answer-color: #fff;
+
+.gem-c-govspeak .highlight-answer {
+  background-color: $highlight-answer-bg-color;
+  color: $highlight-answer-color;
+  text-align: center;
+  padding: 1.75em 0.75em 1.25em;
+  margin: 0 -1em 1em;
+
+  p {
+    @include bold-24;
+    color: $highlight-answer-color;
+
+    em {
+      @include bold-80;
+      display: block;
+      padding-top: 0.1em;
+      color: $highlight-answer-color;
+    }
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  @include media-down(mobile) {
+    margin: 0 0 1em;
+    @include core-48;
+
+    p {
+      font-size: 1em;
+      line-height: inherit;
+
+      em {
+        font-size: 1em;
+        padding-top: 0;
+        display: inline;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss

@@ -0,0 +1,32 @@
+// Govspeak images
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  img {
+    width: auto;
+    height: auto;
+    max-width: $full-width;
+  }
+
+  figure {
+    width: $full-width;
+    clear: both;
+    overflow: hidden;
+    padding: $gutter-one-third 0 0;
+
+    img {
+      display: inline;
+      text-align: center;
+      width: auto;
+      height: auto;
+      max-width: $full-width;
+    }
+
+    figcaption {
+      @include core-14;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss

@@ -0,0 +1,22 @@
+// Govspeak information callout
+// https://govuk-static.herokuapp.com/component-guide/govspeak/information_callout
+//
+// Support:
+//
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .info-notice {
+    border-left: 1em solid $panel-colour;
+    padding: 1em 0 1em 1em;
+    margin: 2em 0;
+
+    // Remove margin from the last element
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss

@@ -0,0 +1,26 @@
+// Govspeak legislative list
+// https://govuk-static.herokuapp.com/component-guide/govspeak/legislative_lists
+
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .legislative-list {
+    list-style: none;
+    margin: 5px 0;
+
+    li {
+      margin: 5px 0;
+    }
+
+    p {
+      margin: 20px 0;
+    }
+
+    ol {
+      margin: 10px 0 10px $gutter;
+      list-style: none;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_media-player.scss

@@ -0,0 +1,15 @@
+// Govspeak media player
+// https://govuk-static.herokuapp.com/component-guide/govspeak/with_youtube_embed
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  // Video player styles from frontend toolkit
+  @import "design-patterns/media-player";
+
+  .media-player {
+    @include media-player;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss

@@ -0,0 +1,29 @@
+.gem-c-govspeak  .place {
+  margin: 1.5em 0;
+  border-bottom: solid 1px $border-colour;
+  padding-bottom: 1.5em;
+
+  .address {
+    margin: 0;
+    padding: 0;
+    width: auto;
+    display: block;
+  }
+
+  .url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .additional-information {
+    @include core-16;
+
+    p {
+      margin: 0.25em 0;
+    }
+  }
+
+  @include media-down(mobile) {
+    margin: 0.75em 0;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss

@@ -0,0 +1,29 @@
+// Govspeak statistic headline
+// https://govuk-static.herokuapp.com/component-guide/govspeak/statistic_headlines
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  .stat-headline {
+    margin-bottom: $gutter-half;
+    margin-top: $gutter-half;
+
+    @include media(tablet) {
+      margin-bottom: $gutter-two-thirds;
+      margin-top: $gutter-two-thirds;
+    }
+
+    p {
+      @include bold-19;
+      margin: 0;
+    }
+
+    em {
+      display: block;
+      @include bold-80;
+      margin: 3px 0 -5px;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -0,0 +1,24 @@
+.gem-c-govspeak .steps {
+  padding-left: 0;
+  margin-left: 0;
+  overflow: hidden;
+
+  > li {
+    background-position: 0 0.87em;
+    background-repeat: no-repeat;
+    list-style-type: decimal;
+    margin-left: 0;
+    padding: 0.75em 0 0.75em 2.2em;
+
+    @for $i from 1 through 14 {
+      &:nth-child(#{$i}) {
+        background-image: image-url("icon-steps/icon-step-#{$i}.png");
+
+        @include device-pixel-ratio() {
+          background-image: image-url("icon-steps/icon-step-#{$i}-2x.png");
+          background-size: 24px 24px;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss

@@ -0,0 +1,24 @@
+.gem-c-govspeak .summary {
+  margin: 0 0 2em;
+  padding: 0;
+  color: $text-colour;
+
+  p {
+    @include core-19;
+  }
+
+  @include media-down(mobile) {
+    margin: 0 0 2em;
+    padding: 0;
+  }
+
+  p,
+  h2 {
+    border: none;
+    margin: 0 0.75em 0 0;
+  }
+
+  h2 {
+    line-height: 1.35em;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -0,0 +1,38 @@
+// Govspeak tables
+// https://govuk-static.herokuapp.com/component-guide/govspeak/tables
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: $gutter 0;
+    width: $full-width;
+    @include core-14;
+
+    caption {
+      text-align: left;
+      margin-bottom: 0.5em;
+    }
+
+    th,
+    td {
+      vertical-align: top;
+      padding: $gutter-one-third $gutter-one-third $gutter-one-third 0;
+      border-bottom: solid 1px $border-colour;
+    }
+
+    th {
+      text-align: left;
+      color: $black;
+      @include bold-14;
+    }
+
+    td small {
+      font-size: 1em;
+    }
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -0,0 +1,224 @@
+// Govspeak typography
+// https://govuk-static.herokuapp.com/component-guide/govspeak/heading_levels
+// https://govuk-static.herokuapp.com/component-guide/govspeak/lists
+// https://govuk-static.herokuapp.com/component-guide/govspeak/nested_lists
+// https://govuk-static.herokuapp.com/component-guide/govspeak/blockquote
+//
+// Support:
+// - alphagov/whitehall: ✔︎
+// - alphagov/govspeak: ✔︎
+
+.gem-c-govspeak {
+  ol,
+  ul,
+  p {
+    @include core-19;
+    margin-top: $gutter-half;
+    margin-bottom: $gutter-half;
+
+    @include media(tablet) {
+      margin-top: $gutter-two-thirds;
+      margin-bottom: $gutter-two-thirds;
+    }
+  }
+
+  // Headings
+
+  h2 {
+    @include bold-27;
+    margin-top: $gutter;
+
+    @include media(desktop) {
+      margin-top: $gutter * 1.5;
+    }
+  }
+
+  h3 {
+    @include bold-19;
+    margin-top: $gutter + 5px;
+  }
+
+  h4 {
+    @include bold-19;
+    margin-top: $gutter + 5px;
+  }
+
+  h4,
+  h5,
+  h6 {
+    @include bold-19;
+
+    + p {
+      margin-top: 5px;
+    }
+  }
+
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  p:first-child {
+    margin-top: 0;
+  }
+
+  // Links
+
+  a {
+    text-decoration: underline;
+  }
+
+  // Lists
+
+  ol,
+  ul {
+    list-style: decimal;
+    list-style-position: outside;
+    margin-left: $gutter-two-thirds;
+
+    ul,
+    ol {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: 0;
+    }
+
+    @include ie(7) {
+      li {
+        margin-left: $gutter;
+      }
+    }
+  }
+
+  ul {
+    list-style: disc;
+    list-style-position: outside;
+  }
+
+  li {
+    margin-bottom: 5px;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    p + p,
+    p + ul,
+    p + ol,
+    ul + p,
+    ul + ol,
+    ol + p,
+    ol + ul {
+      margin-top: 5px;
+    }
+  }
+
+  &.direction-rtl ol,
+  &.direction-rtl ul {
+    margin-left: 0;
+    margin-right: $gutter-two-thirds;
+
+    ul,
+    ol {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  // Block quotes
+
+  blockquote {
+    padding: 0 0 0 $gutter-two-thirds;
+    margin: 0;
+    border: 0;
+
+    @include media(desktop) {
+      margin: 0 0 0 (-$gutter);
+    }
+
+    p {
+      padding-left: $gutter-half;
+
+      @include media(tablet) {
+        padding-left: $gutter;
+      }
+
+      &:before {
+        content: "\201C";
+        float: left;
+        clear: both;
+        margin-left: -$gutter-half;
+      }
+
+      &:last-child:after {
+        content: "\201D";
+      }
+    }
+  }
+
+  &.direction-rtl blockquote {
+    padding: 0 $gutter-two-thirds 0 0;
+
+    @include media(desktop) {
+      margin: 0 (-$gutter) 0 0;
+    }
+
+    p {
+      padding-right: $gutter-half;
+      padding-left: 0;
+
+      @include media(tablet) {
+        padding-right: $gutter;
+        padding-left: 0;
+      }
+
+      &:before {
+        content: "\201D";
+        float: right;
+        margin-right: -$gutter-half;
+        margin-left: 0;
+      }
+
+      &:last-child:after {
+        content: "\201C";
+      }
+    }
+  }
+
+  // Text styles
+
+  strong {
+    font-weight: 400;
+  }
+
+  // rich-govspeak is a modifier for the govspeak component
+  // that allows bold text. Used by the highway code manual.
+  &.rich-govspeak {
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  em,
+  i {
+    font-style: normal;
+    font-weight: inherit;
+  }
+
+  sup {
+    font-size: 0.8em;
+    line-height: 0.7em;
+    vertical-align: super;
+  }
+
+  abbr {
+    cursor: help;
+  }
+
+  // Horizontal Rule
+
+  hr {
+    margin-top: $gutter - 1px;
+    margin-bottom: $gutter;
+    border-top: 1px solid $border-colour;
+  }
+}