govuk_tech_docs 2.2.2 → 2.4.2

data/node_modules/govuk-frontend/govuk/components/table/_index.scss

@@ -0,0 +1,71 @@
+@include govuk-exports("govuk/component/table") {
+  .govuk-table {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: 100%;
+    @include govuk-responsive-margin(6, "bottom");
+
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  .govuk-table__header {
+    @include govuk-typography-weight-bold;
+  }
+
+  .govuk-table__header,
+  .govuk-table__cell {
+    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    text-align: left;
+    vertical-align: top;
+    // GOV.UK Elements sets the font-size and line-height for all headers and cells
+    // in tables.
+    @include govuk-compatibility(govuk_elements) {
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+
+  .govuk-table__cell--numeric {
+    @include govuk-font($size: false, $tabular: true);
+  }
+
+  .govuk-table__header--numeric,
+  .govuk-table__cell--numeric {
+    text-align: right;
+  }
+
+  .govuk-table__header:last-child,
+  .govuk-table__cell:last-child {
+    padding-right: 0;
+  }
+
+  .govuk-table__caption {
+    @include govuk-typography-weight-bold;
+
+    display: table-caption;
+    text-align: left;
+  }
+
+  // Modifiers that make captions look more like their equivalent headings
+
+  .govuk-table__caption--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-table__caption--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+}

data/node_modules/govuk-frontend/govuk/components/table/_table.scss

@@ -1,54 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/table") {
-  .govuk-table {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-    width: 100%;
-    @include govuk-responsive-margin(6, "bottom");
-
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-
-  .govuk-table__header {
-    @include govuk-typography-weight-bold;
-  }
-
-  .govuk-table__header,
-  .govuk-table__cell {
-    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-    border-bottom: 1px solid $govuk-border-colour;
-    text-align: left;
-    vertical-align: top;
-    // GOV.UK Elements sets the font-size and line-height for all headers and cells
-    // in tables.
-    @include govuk-compatibility(govuk_elements) {
-      font-size: inherit;
-      line-height: inherit;
-    }
-  }
-
-  .govuk-table__cell--numeric {
-    @include govuk-font($size: false, $tabular: true);
-  }
-
-  .govuk-table__header--numeric,
-  .govuk-table__cell--numeric {
-    text-align: right;
-  }
-
-  .govuk-table__header:last-child,
-  .govuk-table__cell:last-child {
-    padding-right: 0;
-  }
-
-  .govuk-table__caption {
-    @include govuk-typography-weight-bold;
-
-    display: table-caption;
-    text-align: left;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss

@@ -0,0 +1,130 @@
+@include govuk-exports("govuk/component/tabs") {
+  .govuk-tabs {
+    @include govuk-responsive-margin(1, "top");
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-tabs__title {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-tabs__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-tabs__list-item {
+    @include govuk-font($size: 19);
+    margin-left: govuk-spacing(5);
+
+    &:before {
+      @include govuk-text-colour;
+      content: "\2014 "; // "— "
+      margin-left: - govuk-spacing(5);
+      padding-right: govuk-spacing(1);
+    }
+  }
+
+  .govuk-tabs__tab {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+
+    display: inline-block;
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-tabs__panel {
+    @include govuk-responsive-margin(8, "bottom");
+  }
+
+  // JavaScript enabled
+  .js-enabled {
+
+    @include govuk-media-query($from: tablet) {
+      .govuk-tabs__list {
+        @include govuk-clearfix;
+        margin-bottom: 0;
+        border-bottom: 1px solid $govuk-border-colour;
+      }
+
+      .govuk-tabs__title {
+        display: none;
+      }
+
+      .govuk-tabs__list-item {
+        position: relative;
+
+        margin-right: govuk-spacing(1);
+        margin-bottom: 0;
+        margin-left: 0;
+        padding: govuk-spacing(2) govuk-spacing(4);
+
+        float: left;
+        background-color: govuk-colour("light-grey", $legacy: "grey-4");
+        text-align: center;
+
+        &:before {
+          content: none;
+        }
+      }
+
+      .govuk-tabs__list-item--selected {
+        $border-width: 1px;
+
+        position: relative;
+
+        margin-top: - govuk-spacing(1);
+
+        // Compensation for border (otherwise we get a shift)
+        margin-bottom: -$border-width;
+        padding-top: govuk-spacing(3) - $border-width;
+        padding-right: govuk-spacing(4) - $border-width;
+        padding-bottom: govuk-spacing(3) + $border-width;
+        padding-left: govuk-spacing(4) - $border-width;
+
+        border: $border-width solid $govuk-border-colour;
+        border-bottom: 0;
+
+        background-color: $govuk-body-background-colour;
+
+        .govuk-tabs__tab {
+          text-decoration: none;
+        }
+      }
+
+      .govuk-tabs__tab {
+        @include govuk-link-style-text;
+
+        margin-bottom: 0;
+
+        &:after {
+          content: "";
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+      .govuk-tabs__panel {
+        @include govuk-responsive-margin(0, "bottom");
+        padding: govuk-spacing(6) govuk-spacing(4);
+        border: 1px solid $govuk-border-colour;
+        border-top: 0;
+
+        & > :last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .govuk-tabs__panel--hidden {
+        display: none;
+      }
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/tabs/_tabs.scss

@@ -1,142 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/tabs") {
-
-  .govuk-tabs {
-    @include govuk-responsive-margin(1, "top");
-    @include govuk-responsive-margin(6, "bottom");
-  }
-
-  .govuk-tabs__title {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-    margin-bottom: govuk-spacing(2);
-  }
-
-  .govuk-tabs__list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    @include govuk-responsive-margin(6, "bottom");
-  }
-
-  .govuk-tabs__list-item {
-    @include govuk-font($size: 19);
-    margin-left: govuk-spacing(5);
-
-    &::before {
-      @include govuk-text-colour;
-      content: "\2014 "; // "— "
-      margin-left: - govuk-spacing(5);
-      padding-right: govuk-spacing(1);
-    }
-  }
-
-  .govuk-tabs__tab {
-    @include govuk-link-style-default;
-
-    display: inline-block;
-    margin-bottom: govuk-spacing(2);
-
-    // Focus state for mobile and when JavaScript is disabled
-    // It is removed for JS-enabled desktop styles
-    &:focus {
-      @include govuk-focused-text;
-    }
-  }
-
-  .govuk-tabs__panel {
-    @include govuk-responsive-margin(8, "bottom");
-  }
-
-  // JavaScript enabled
-  .js-enabled {
-
-    @include govuk-media-query($from: tablet) {
-
-      .govuk-tabs__list {
-        @include govuk-clearfix;
-        margin-bottom: 0;
-        border-bottom: 1px solid $govuk-border-colour;
-      }
-
-      .govuk-tabs__title {
-        display: none;
-      }
-
-      .govuk-tabs__list-item {
-        position: relative;
-
-        margin-right: govuk-spacing(1);
-        margin-bottom: 0;
-        margin-left: 0;
-        padding: govuk-spacing(2) govuk-spacing(4);
-
-        float: left;
-        background-color: govuk-colour("light-grey", $legacy: "grey-4");
-        text-align: center;
-
-        &::before {
-          content: none;
-        }
-      }
-
-      .govuk-tabs__list-item--selected {
-        $border-width: 1px;
-
-        position: relative;
-
-        margin-top: - govuk-spacing(1);
-
-        // Compensation for border (otherwise we get a shift)
-        margin-bottom: -$border-width;
-        padding-top: govuk-spacing(3) - $border-width;
-        padding-right: govuk-spacing(4) - $border-width;
-        padding-bottom: govuk-spacing(3) + $border-width;
-        padding-left: govuk-spacing(4) - $border-width;
-
-        border: $border-width solid $govuk-border-colour;
-        border-bottom: 0;
-
-        background-color: $govuk-body-background-colour;
-
-        .govuk-tabs__tab {
-          text-decoration: none;
-        }
-      }
-
-      .govuk-tabs__tab {
-        @include govuk-link-style-text;
-
-        margin-bottom: 0;
-
-        &::after {
-          content: "";
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-        }
-      }
-
-      .govuk-tabs__panel {
-        @include govuk-responsive-margin(0, "bottom");
-        padding: govuk-spacing(6) govuk-spacing(4);
-        border: 1px solid $govuk-border-colour;
-        border-top: 0;
-
-        & > :last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      .govuk-tabs__panel--hidden {
-        display: none;
-      }
-    }
-
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/tag/_index.scss

@@ -0,0 +1,86 @@
+@include govuk-exports("govuk/component/tag") {
+  .govuk-tag {
+
+    display: inline-block;
+
+    // When a user customises their colours often the background is removed,
+    // by adding a outline we ensure that the tag component still keeps it's meaning.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+    letter-spacing: 1px;
+
+    text-decoration: none;
+    text-transform: uppercase;
+
+    @if $govuk-use-legacy-font {
+      // Since New Transport sits slightly higher than other common fonts.
+      // We use intentionally uneven padding to make it balanced, this can be
+      // removed using the version of the font that has a more common vertical spacing.
+      @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+      padding-top: 4px;
+      padding-right: 8px;
+      padding-bottom: 1px;
+      padding-left: 8px;
+    } @else {
+      @include govuk-font($size: 16, $weight: bold, $line-height: 1);
+      padding-top: 5px;
+      padding-right: 8px;
+      padding-bottom: 4px;
+      padding-left: 8px;
+    }
+  }
+
+  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
+  .govuk-tag--inactive {
+    background-color: govuk-colour("dark-grey", $legacy: "grey-1");
+  }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
+    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("purple"), 20);
+    background: govuk-tint(govuk-colour("purple"), 80);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60);
+    background: govuk-tint(govuk-colour("turquoise"), 70);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 30);
+    background: govuk-tint(govuk-colour("blue"), 80);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65);
+    background: govuk-tint(govuk-colour("yellow"), 75);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55);
+    background: govuk-tint(govuk-colour("orange"), 70);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 30);
+    background: govuk-tint(govuk-colour("red"), 80);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 40);
+    background: govuk-tint(govuk-colour("pink"), 80);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20);
+    background: govuk-tint(govuk-colour("green"), 80);
+  }
+}