RubyGems - design_system - Versions diffs - 0.7.0 - Mend

design_system 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (411) hide show

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/objects/_index.scss ADDED Viewed

@@ -0,0 +1,6 @@
+@import "button-group";
+@import "form-group";
+@import "grid";
+@import "main-wrapper";
+@import "template";
+@import "width-container";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/objects/_main-wrapper.scss ADDED Viewed

@@ -0,0 +1,53 @@
+@import "../base";
+////
+/// @group objects/layout
+////
+// Example usage with Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+//   <div class="govuk-main-wrapper">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+//
+// Example usage without Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <div class="govuk-main-wrapper govuk-main-wrapper--l">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+@include govuk-exports("govuk/objects/main-wrapper") {
+  .govuk-main-wrapper {
+    // In IE11 the `main` element can be used, but is not recognized  –
+    // meaning it's not defined in IE's default style sheet,
+    // so it uses CSS initial value, which is inline.
+    display: block;
+    padding-top: govuk-spacing(4);
+    padding-bottom: govuk-spacing(4);
+    @include govuk-media-query($from: tablet) {
+      // This spacing is manually adjusted to replicate the margin of
+      // govuk-heading-xl (50px) minus the spacing of back link and
+      // breadcrumbs (10px)
+      padding-top: govuk-spacing(7);
+      padding-bottom: govuk-spacing(7);
+    }
+  }
+  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+  // correct spacing depending on whether there are any elements
+  // (such the back link, breadcrumbs or phase banner components) before the
+  // `.govuk-main-wrapper` in the `govuk-width-container`.
+  //
+  // If you need to control the spacing manually, use the
+  // `govuk-main-wrapper--l` modifier instead.
+  .govuk-main-wrapper--auto-spacing:first-child,
+  .govuk-main-wrapper--l {
+    @include govuk-responsive-padding(8, "top");
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/objects/_template.scss ADDED Viewed

@@ -0,0 +1,55 @@
+@import "../base";
+@include govuk-exports("govuk/objects/template") {
+  // Applied to the <html> element
+  .govuk-template {
+    // Set the overall page background colour to the same colour as used by the
+    // footer to give the illusion of a long footer.
+    @include _govuk-rebrand(
+      background-color,
+      $from: $govuk-template-background-colour,
+      $to: $_govuk-rebrand-template-background-colour
+    );
+    // Prevent automatic text sizing, as we already cater for small devices and
+    // would like the browser to stay on 100% text zoom by default.
+    -webkit-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
+            text-size-adjust: 100%;
+    // Add scroll padding to the top of govuk-template but remove it if the
+    // exit this page component is present.
+    //
+    // This is a solution to exit this page potentially failing WCAG SC 2.4.12:
+    // Focus Not Obscured (https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)
+    // due to it's sticky positioning.
+    //
+    // This will apply scroll-padding-top in any browsers that don't support :has
+    // (https://caniuse.com/css-has). This is part of the reason we do this in
+    // a "wrong way round" way as we hypothesise that the risks of having
+    // scroll-padding unnecessarily is better than risking not having scroll-padding
+    // and needing it to account for exit this page.
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
+      scroll-padding-top: govuk-spacing(9);
+      &:not(:has(.govuk-exit-this-page)) {
+        scroll-padding-top: 0;
+      }
+    }
+    // Force the scrollbar to always display in IE, to prevent horizontal page
+    // jumps as content height changes (e.g. autocomplete results open).
+    @include govuk-media-query($media-type: screen) {
+      overflow-y: scroll;
+    }
+  }
+  // Applied to the <body> element
+  .govuk-template__body {
+    // The default margins set by user-agents are not required since we have our
+    // own containers.
+    margin: 0;
+    // Set the overall body of the page back to the typical background colour.
+    background-color: $govuk-body-background-colour;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/objects/_width-container.scss ADDED Viewed

@@ -0,0 +1,75 @@
+@import "../base";
+////
+/// @group objects/layout
+////
+/// Width container mixin
+///
+/// Used to create page width and custom width container classes.
+///
+/// @param {String} $width [$govuk-page-width] - Width in pixels
+///
+/// @example scss - Creating a 1200px wide container class
+///  .app-width-container--wide {
+///    @include govuk-width-container(1200px);
+///  }
+///
+/// @access public
+@mixin govuk-width-container($width: $govuk-page-width) {
+  // By default, limit the width of the container to the page width
+  max-width: $width;
+  // On mobile, add half width gutters
+  margin-right: $govuk-gutter-half;
+  margin-left: $govuk-gutter-half;
+  // Respect 'display cutout' safe area (avoids notches and rounded corners)
+  @supports (margin: unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+    // Use max() to pick largest margin, default or with safe area
+    // Escaped due to Sass max() vs. CSS native max()
+    margin-right: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
+    margin-left: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
+  }
+  // On tablet, add full width gutters
+  @include govuk-media-query($from: tablet) {
+    margin-right: $govuk-gutter;
+    margin-left: $govuk-gutter;
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (margin: unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+      // Use max() to pick largest margin, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      margin-right: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
+      margin-left: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
+    }
+  }
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
+    margin-right: auto;
+    margin-left: auto;
+    // Since a safe area may have previously been set above,
+    // we need to duplicate this margin that centers the page.
+    @supports (margin: unquote("max(calc(0px))")) {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+}
+@include govuk-exports("govuk/objects/width-container") {
+  .govuk-width-container {
+    @include govuk-width-container;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_all.scss ADDED Viewed

@@ -0,0 +1,7 @@
+@import "../settings/warnings";
+@import "index";
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/overrides/all' is deprecated. Update your import statement to import 'govuk/overrides/index'."
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_display.scss ADDED Viewed

@@ -0,0 +1,24 @@
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/display") {
+  .govuk-\!-display-inline {
+    display: inline !important;
+  }
+  .govuk-\!-display-inline-block {
+    display: inline-block !important;
+  }
+  .govuk-\!-display-block {
+    display: block !important;
+  }
+  .govuk-\!-display-none {
+    display: none !important;
+  }
+  @include govuk-media-query($media-type: print) {
+    .govuk-\!-display-none-print {
+      display: none !important;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_index.scss ADDED Viewed

@@ -0,0 +1,5 @@
+@import "display";
+@import "spacing";
+@import "text-align";
+@import "typography";
+@import "width";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_spacing.scss ADDED Viewed

@@ -0,0 +1,84 @@
+////
+/// @group overrides
+////
+// stylelint-disable declaration-no-important
+/// Directions for spacing
+///
+/// @type Map
+/// @access private
+$_spacing-directions: ("top", "right", "bottom", "left") !default;
+/// Generate responsive spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the responsive spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example css
+///  .govuk-\!-margin-4 {
+///    margin: 15px !important;
+///  }
+///
+///  @media (min-width: 40.0625em) {
+///    .govuk-\!-margin-4 {
+///      margin: 20px !important;
+///    }
+///  }
+///
+/// @access private
+@mixin _govuk-generate-responsive-spacing-overrides($property) {
+  // For each point in the spacing scale (defined in settings), create an
+  // override that affects all directions...
+  @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
+    .govuk-\!-#{$property}-#{$scale-point} {
+      @include _govuk-responsive-spacing($scale-point, $property, "all", true);
+    }
+    // ... and then an override for each individual direction
+    @each $direction in $_spacing-directions {
+      .govuk-\!-#{$property}-#{$direction}-#{$scale-point} {
+        @include _govuk-responsive-spacing($scale-point, $property, $direction, true);
+      }
+    }
+  }
+}
+/// Generate static spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the non-responsive spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example css
+///   .govuk-\!-static-margin-4 {
+///      margin: 20px !important;
+///   }
+///
+/// @access private
+@mixin _govuk-generate-static-spacing-overrides($property) {
+  @each $spacing-point in map-keys($govuk-spacing-points) {
+    .govuk-\!-static-#{$property}-#{$spacing-point} {
+      #{$property}: govuk-spacing($spacing-point) !important;
+    }
+    @each $direction in $_spacing-directions {
+      .govuk-\!-static-#{$property}-#{$direction}-#{$spacing-point} {
+        #{$property}-#{$direction}: govuk-spacing($spacing-point) !important;
+      }
+    }
+  }
+}
+@include govuk-exports("govuk/overrides/spacing") {
+  @include _govuk-generate-responsive-spacing-overrides("margin");
+  @include _govuk-generate-responsive-spacing-overrides("padding");
+  @include _govuk-generate-static-spacing-overrides("margin");
+  @include _govuk-generate-static-spacing-overrides("padding");
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_text-align.scss ADDED Viewed

@@ -0,0 +1,14 @@
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/text-align") {
+  .govuk-\!-text-align-left {
+    text-align: left !important;
+  }
+  .govuk-\!-text-align-centre {
+    text-align: center !important;
+  }
+  .govuk-\!-text-align-right {
+    text-align: right !important;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_typography.scss ADDED Viewed

@@ -0,0 +1,40 @@
+@include govuk-exports("govuk/overrides/typography") {
+  // Font size and line height
+  // Generate typography override classes for each responsive font map in the
+  // typography scale eg .govuk-\!-font-size-80
+  //
+  // govuk-!-font-size-14 is deprecated
+  @each $size, $font-map in $govuk-typography-scale {
+    .govuk-\!-font-size-#{$size} {
+      $font-map: map-get($govuk-typography-scale, $size);
+      // Add underscore to deprecated typography scale keys
+      @if map-has-key($font-map, "deprecation") {
+        $size: _#{$size};
+      }
+      @include govuk-font-size($size, $important: true);
+    }
+  }
+  // Weights
+  .govuk-\!-font-weight-regular {
+    @include govuk-typography-weight-regular($important: true);
+  }
+  .govuk-\!-font-weight-bold {
+    @include govuk-typography-weight-bold($important: true);
+  }
+  // Typography helpers
+  .govuk-\!-font-tabular-numbers {
+    @include govuk-font-tabular-numbers($important: true);
+  }
+  .govuk-\!-text-break-word {
+    @include govuk-text-break-word($important: true);
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/overrides/_width.scss ADDED Viewed

@@ -0,0 +1,46 @@
+// stylelint-disable declaration-no-important
+@include govuk-exports("govuk/overrides/width") {
+  .govuk-\!-width-full {
+    width: 100% !important;
+  }
+  .govuk-\!-width-three-quarters {
+    width: 100% !important;
+    @include govuk-media-query($from: tablet) {
+      width: 75% !important;
+    }
+  }
+  .govuk-\!-width-two-thirds {
+    width: 100% !important;
+    @include govuk-media-query($from: tablet) {
+      width: 66.66% !important;
+    }
+  }
+  .govuk-\!-width-one-half {
+    width: 100% !important;
+    @include govuk-media-query($from: tablet) {
+      width: 50% !important;
+    }
+  }
+  .govuk-\!-width-one-third {
+    width: 100% !important;
+    @include govuk-media-query($from: tablet) {
+      width: 33.33% !important;
+    }
+  }
+  .govuk-\!-width-one-quarter {
+    width: 100% !important;
+    @include govuk-media-query($from: tablet) {
+      width: 25% !important;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_all.scss ADDED Viewed

@@ -0,0 +1,8 @@
+@import "../settings/warnings";
+@import "index";
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/settings/all' is deprecated. Update your import statement to import 'govuk/settings/index'.",
+  $silence-further-warnings: false
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/settings/_assets.scss ADDED Viewed

@@ -0,0 +1,82 @@
+////
+/// @group settings/assets
+////
+/// Path to the assets directory, with trailing slash.
+///
+/// This is the directory where the images and fonts subdirectories live. You
+/// will need to make this directory available via your application – see the
+/// README for details.
+///
+/// @type String
+/// @access public
+$govuk-assets-path: "/assets/" !default;
+/// Path to the images folder, with trailing slash.
+///
+/// @type String
+/// @access public
+$govuk-images-path: "#{$govuk-assets-path}images/" !default;
+/// Path to the fonts folder, with trailing slash.
+///
+/// @type String
+/// @access public
+$govuk-fonts-path: "#{$govuk-assets-path}fonts/" !default;
+/// Custom image URL function
+///
+/// If the built-in image URL helper does not meet your needs, you can specify
+/// the name of a custom handler – either built in or by writing your own
+/// function.
+///
+/// If you are writing your own handler, ensure that it returns a string wrapped
+/// with `url()`
+///
+/// @type String
+///
+/// @example scss - Rails asset handling
+///   $govuk-image-url-function: 'image-url';
+///
+/// @example scss - Custom asset handling
+///
+///   @function my-url-handler($filename) {
+///     // Some custom URL handling
+///     @return url('example.jpg');
+///   }
+///
+///   $govuk-image-url-function: 'my-url-handler';
+///
+/// @access public
+$govuk-image-url-function: false !default;
+/// Custom font URL function
+///
+/// If the built-in font URL helper does not meet your needs, you can specify
+/// the name of a custom handler – either built in or by writing your own
+/// function.
+///
+/// If you are writing your own handler, ensure that it returns a string wrapped
+/// with `url()`
+///
+/// @type String
+///
+/// @example scss - Rails asset handling
+///   $govuk-font-url-function: 'font-url';
+///
+/// @example scss - Custom asset handling
+///
+///   @function my-url-handler($filename) {
+///     // Some custom URL handling
+///     @return url('example.woff');
+///   }
+///
+///   $govuk-font-url-function: 'my-url-handler';
+///
+/// @access public
+$govuk-font-url-function: false !default;