govuk_tech_docs 3.4.5 → 4.0.0

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/pagination/_index.scss

@@ -3,20 +3,14 @@
   // Falls back to a float: left layout on non-flex browsers
   .govuk-pagination {
     @include govuk-responsive-margin(6, "bottom");
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-direction: column;
-        flex-direction: column;
-    -ms-flex-align: center;
-        align-items: center;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
 
     @include govuk-media-query($from: tablet) {
-      -ms-flex-direction: row;
-          flex-direction: row;
-      -ms-flex-align: start;
-          align-items: flex-start;
+      flex-direction: row;
+      align-items: flex-start;
     }
   }
 
@@ -38,7 +32,7 @@
     float: left; // Float is ignored if flex is active for prev/next links
 
     &:hover {
-      background-color: govuk-colour("light-grey", $legacy: "grey-4");
+      background-color: govuk-colour("light-grey");
     }
   }
 
@@ -60,13 +54,11 @@
   .govuk-pagination__next {
     @include govuk-typography-weight-bold;
 
-    // Use flex to get around a whitespace issue between the arrow svg and the link text
-    // without having to rely on whitespace control from backend tooling
+    // Use flex to avoid extra space being introduced when whitespace exists
+    // between the arrow svg and the link text
     .govuk-pagination__link {
-      display: -ms-flexbox;
       display: flex;
-      -ms-flex-align: center;
-          align-items: center;
+      align-items: center;
     }
   }
 
@@ -104,7 +96,7 @@
     @include govuk-typography-weight-bold;
     color: $govuk-secondary-text-colour;
 
-    // Remove hover state for ellipsis items as they don't have links within them
+    // Remove hover state for ellipsis items as they don't contain links
     &:hover {
       background-color: transparent;
     }
@@ -116,7 +108,7 @@
 
     // Increase the touch area for the link to the parent element.
     @media screen {
-      &:after {
+      &::after {
         content: "";
         position: absolute;
         top: 0;
@@ -126,8 +118,8 @@
       }
     }
 
-    // Add link hover decoration to prev/next text if no label present on prev/next only mode
-    // We do this so that we have a hover state in all possible instances
+    // Add link hover decoration to prev/next text if no label present on
+    // prev/next only mode,  so that we have a hover state in all cases
     &:hover,
     &:active {
       .govuk-pagination__link-title--decorated {
@@ -156,14 +148,13 @@
   }
 
   .govuk-pagination__link-label {
-    @include govuk-font($size: 19, $weight: "regular");
+    @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
     display: inline-block;
-    padding-left: govuk-spacing(6);
   }
 
   .govuk-pagination__icon {
-    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    // Set size using rems to make the icon scale with text
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
     color: $govuk-secondary-text-colour;
@@ -183,23 +174,18 @@
   .govuk-pagination--block {
     display: block;
 
-    .govuk-pagination__item {
-      padding: govuk-spacing(3);
-      float: none;
-    }
-
     .govuk-pagination__next,
     .govuk-pagination__prev {
       padding-left: 0;
       float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
     }
 
     .govuk-pagination__next {
       padding-right: govuk-spacing(3);
-
-      .govuk-pagination__icon {
-        margin-left: 0;
-      }
     }
 
     // Only apply a border between prev and next if both are present
@@ -207,41 +193,36 @@
       border-top: 1px solid $govuk-border-colour;
     }
 
-    // Reset both these elements to their inline default, both to ensure that the focus state
-    // for block mode "shrink wraps" text as expected
-    .govuk-pagination__link,
-    .govuk-pagination__link-title {
-      display: inline;
-    }
-
-    // Set the after pseudo element to a block which makes the title visually display
-    // as block level whilst programmatically being inline
-    // We do this to get around an NVDA quirk where adjacent block level
-    // elements are always read out separately
-    .govuk-pagination__link-title:after {
+    // Set the after pseudo element to a block which makes the title visually
+    // display as block level whilst programmatically being inline. We do this
+    // to get around an NVDA quirk where adjacent block level elements are
+    // always read out separately
+    .govuk-pagination__link-title::after {
       content: "";
       display: block;
     }
 
     .govuk-pagination__link {
+      padding-left: govuk-spacing(6);
       text-align: left;
 
-      &:focus {
-        // apply focus styling to the label within the link as if it were being focused
-        // to get around a display issue with a focusable inline element containing a mixture
-        // of inline and inline-block level elements
-        .govuk-pagination__link-label {
-          @include govuk-focused-text;
-        }
-      }
-
       &:not(:focus) {
         text-decoration: none;
       }
     }
 
     .govuk-pagination__icon {
-      margin-right: govuk-spacing(2);
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: govuk-spacing(6) * -1;
+      float: left;
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/pagination/_pagination.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_pagination.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss

@@ -0,0 +1,58 @@
+@include govuk-exports("govuk/component/panel") {
+  .govuk-panel {
+    @include govuk-font($size: 36);
+
+    box-sizing: border-box;
+
+    margin-bottom: govuk-spacing(3);
+    padding: govuk-spacing(7) - $govuk-border-width;
+
+    border: $govuk-border-width solid transparent;
+
+    text-align: center;
+
+    @include govuk-media-query($until: tablet) {
+      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
+
+      // This is an if-all-else-fails attempt to stop long words from
+      // overflowing the container on very narrow viewports by forcing them to
+      // break and wrap instead. This overflowing is more likely to happen when
+      // user increases text size on a mobile eg. using iOS Safari text resize
+      // controls.
+      //
+      // The overflowing is a particular problem with the panel component since
+      // it uses white text: when the text overflows the container, it is
+      // invisible on the white (page) background. When the text in our other
+      // components overflow, the user might have to scroll horizontally to view
+      // it but the the text remains legible.
+      overflow-wrap: break-word;
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
+    }
+  }
+
+  .govuk-panel--confirmation {
+    color: govuk-colour("white");
+    background: govuk-colour("green");
+
+    @include govuk-media-query($media-type: print) {
+      border-color: currentcolor;
+      color: $govuk-print-text-colour;
+      background: none;
+    }
+  }
+
+  .govuk-panel__title {
+    @include govuk-font-size($size: 48);
+    @include govuk-typography-weight-bold;
+    margin-top: 0;
+    margin-bottom: govuk-spacing(6);
+  }
+
+  .govuk-panel__title:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/panel/_panel.scss

@@ -1,2 +1,4 @@
 @import "../../base";
 @import "./index";
+
+/*# sourceMappingURL=_panel.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss

@@ -0,0 +1,57 @@
+@import "../button/index";
+@import "../input/index";
+
+@include govuk-exports("govuk/component/password-input") {
+  .govuk-password-input__wrapper {
+    // This element inherits styles from .govuk-input__wrapper, including:
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
+    // - being display: flex above the mobile breakpoint
+
+    @include govuk-media-query($from: mobile) {
+      flex-direction: row;
+
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
+      align-items: flex-start;
+    }
+  }
+
+  .govuk-password-input__input {
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We
+    // want to hide it, so that there aren't two controls presented to the user
+    // that do the same thing but aren't in sync with one another. This doesn't
+    // affect the function that allows Edge users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
+    &::-ms-reveal {
+      display: none;
+    }
+  }
+
+  .govuk-password-input__toggle {
+    // Add top margin so the button doesn't obscure the input's focus style
+    margin-top: govuk-spacing(1);
+
+    // Remove default margin-bottom from button
+    margin-bottom: 0;
+
+    // Hide the button by default, JS removes this attribute
+    &[hidden] {
+      display: none;
+    }
+
+    @include govuk-media-query($from: mobile) {
+      // Buttons are normally 100% wide on mobile, but we don't want that here
+      width: auto;
+      flex-shrink: 0;
+      flex-basis: 5em;
+
+      // Move the spacing from top to the left
+      margin-top: 0;
+      margin-left: govuk-spacing(1);
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_password-input.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_password-input.scss.map */