RubyGems - dxw_govuk_frontend_rails - Versions diffs - 2.9.0.pre.alpha.1 - Mend

dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

Files changed (134) hide show

data/vendor/assets/stylesheets/settings/_typography-font-families.scss ADDED Viewed

@@ -0,0 +1,22 @@
+////
+/// @group settings/typography
+////
+/// List of font families to use if using NTA (the default font 'stack' for
+/// GOV.UK)
+///
+/// @type List
+/// @access public
+$govuk-font-family-nta: "nta", Arial, sans-serif;
+/// List of font families to use if using the 'tabular numbers' subset of NTA
+/// (the default font 'stack' for GOV.UK)
+///
+/// Because ntatabularnumbers only includes the digits 0-10, all other glyphs
+/// will 'fall-through' the stack to NTA.
+///
+/// @type List
+/// @access public
+$govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta;

data/vendor/assets/stylesheets/settings/_typography-font.scss ADDED Viewed

@@ -0,0 +1,60 @@
+////
+/// @group settings/typography
+////
+// =========================================================
+// Font families
+// =========================================================
+/// Font families to use for all typography on screen media
+///
+/// @type List
+/// @access public
+$govuk-font-family: $govuk-font-family-nta !default;
+/// Font families to use when displaying tabular numbers
+///
+/// @type List
+/// @access public
+$govuk-font-family-tabular: $govuk-font-family-nta-tabular !default;
+/// Font families to use for print media
+///
+/// @type List
+/// @access public
+$govuk-font-family-print: sans-serif !default;
+/// Include the default @font-face declarations
+///
+/// If you have set $govuk-font-family to something other than $govuk-font-family-nta this option is disabled by default.
+///
+/// If you are using $govuk-compatibility-govuktemplate this option is disabled by default.
+///
+/// @type Boolean
+/// @access public
+$govuk-include-default-font-face: (
+  $govuk-font-family == $govuk-font-family-nta and
+  not($govuk-compatibility-govuktemplate)
+ ) !default;
+// =========================================================
+// Font weights
+// =========================================================
+/// Font weight for regular typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-regular: 400 !default;
+/// Font weight for bold typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-bold: 700 !default;

data/vendor/assets/stylesheets/settings/_typography-responsive.scss ADDED Viewed

@@ -0,0 +1,180 @@
+////
+/// @group settings/typography
+////
+/// Whether or not to define font sizes in rem, improving accessibility by
+/// allowing users to adjust the base font-size. This is currently off by
+/// default, but will be enabled by default for projects that do not use
+/// alphagov/govuk_template in the next major release.
+///
+/// If this is enabled, you should make sure that $govuk-root-font-size is set
+/// correctly for your project
+///
+/// If any of the compatibility variables are set, then default
+/// responsive typography to off.
+///
+/// @type Boolean
+/// @access public
+$govuk-typography-use-rem: if((
+    $govuk-compatibility-govukfrontendtoolkit or
+    $govuk-compatibility-govuktemplate or
+    $govuk-compatibility-govukelements
+  ), false, true) !default;
+/// Root font size
+///
+/// This is used to calculate rem sizes for the typography, and should match the
+/// _effective_ font-size of your root (or html) element.
+///
+/// Ideally you should not be setting the font-size on the html or root element
+/// in order to allow it to scale with user-preference, in which case this
+/// should be set to 16px.
+///
+/// If you are integrating Frontend into an existing project that also uses
+/// alphagov/govuk_template then you should set this to 10px to match the 62.5%
+/// (10px) base font size that govuk_template sets on the <html> element.
+///
+/// @type Number
+/// @access public
+$govuk-root-font-size: 16px !default;
+/// Responsive typography font map
+///
+/// This is used to generate responsive typography that adapts according to the
+/// breakpoints.
+///
+/// Font size and font weight can be defined for each breakpoint. You can define
+/// different behaviour on tablet and desktop. The 'null' breakpoint is for
+/// mobile.
+///
+/// Line-heights will automatically be converted from pixel measurements into
+/// relative values. For example, with a font-size of 16px and a line-height of
+/// 24px, the line-height will be converted to 1.5 before output.
+///
+/// You can also specify a separate font size and line height for print media.
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access public
+$govuk-typography-scale: (
+  80: (
+    null: (
+      font-size: 53px,
+      line-height: 55px
+    ),
+    tablet: (
+      font-size: 80px,
+      line-height: 80px
+    ),
+    print: (
+      font-size: 53pt,
+      line-height: 1.1
+    )
+  ),
+  48: (
+    null: (
+      font-size: 32px,
+      line-height: 35px
+    ),
+    tablet: (
+      font-size: 48px,
+      line-height: 50px
+    ),
+    print: (
+      font-size: 32pt,
+      line-height: 1.15
+    )
+  ),
+  36: (
+    null: (
+      font-size: 24px,
+      line-height: 25px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    null: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 19px,
+      line-height: 25px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    null: (
+      font-size: 14px,
+      line-height: 16px
+    ),
+    tablet: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    null: (
+      font-size: 12px,
+      line-height: 15px
+    ),
+    tablet: (
+      font-size: 14px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 12pt,
+      line-height: 1.2
+    )
+  )
+) !default;

data/vendor/assets/stylesheets/tools/_all.scss ADDED Viewed

@@ -0,0 +1,8 @@
+@import "compatibility";
+@import "exports";
+@import "font-url";
+@import "ie8";
+@import "iff";
+@import "image-url";
+@import "px-to-em";
+@import "px-to-rem";

data/vendor/assets/stylesheets/tools/_compatibility.scss ADDED Viewed

@@ -0,0 +1,36 @@
+////
+/// @group tools
+////
+/// Conditional Compatibility Mixin
+///
+/// Selectively output a block (available to the mixin as @content) if a given
+/// $product is also identified as being used in the project.
+///
+/// This can then be used to include styles that are only needed to override
+/// styles provided by those other products (e.g. where govuk_template has a
+/// very specific link selector that otherwise affects buttons).
+///
+/// @example scss
+///   // Override .my-class if GOV.UK Template is also being used
+///   @include govuk-compatibility(govuk_template) {
+///     .my-class {
+///       color: inherit;
+///     }
+///   }
+///
+/// @param {String} $product - Name of product that we are 'defending' against.
+/// @content Passed content is outputted only if Frontend is being used with
+///   this product
+/// @throw Errors if product name is not recognised
+/// @access public
+@mixin govuk-compatibility($product) {
+  @if map-has-key($_govuk-compatibility, $product) {
+    @if map-get($_govuk-compatibility, $product) == true {
+      @content;
+    }
+  } @else {
+    @error "Non existent product '#{$product}'";
+  }
+}

data/vendor/assets/stylesheets/tools/_exports.scss ADDED Viewed

@@ -0,0 +1,33 @@
+////
+/// @group tools
+////
+/// List of modules which have already been exported
+///
+/// @type List
+/// @access private
+$_govuk-imported-modules: () !default;
+/// Export module
+///
+/// Ensure that the modules of CSS that we define throughout Frontend are only
+/// included in the generated CSS once, no matter how many times they are
+/// imported across the individual components.
+///
+/// @param {String} $name - Name of module - must be unique within the codebase
+/// @content The passed content will only be outputted if a module of the same
+///   $name has not already been outputted
+/// @access public
+@mixin govuk-exports($name) {
+  // If the mixin is not in the list of modules already exported...
+  @if (index($_govuk-imported-modules, $name) == null) {
+    // ... then add it to the list
+    $_govuk-imported-modules: append($_govuk-imported-modules, $name) !global;
+    // ... and output the CSS for that module
+    @content;
+  }
+  // The next time exports is called for the module of the same name, it will be
+  // found in the list and so nothing will be outputted.
+}

data/vendor/assets/stylesheets/tools/_font-url.scss ADDED Viewed

@@ -0,0 +1,28 @@
+////
+/// @group tools
+////
+// Disable indentation linting in this file only
+// sass-lint:disable indentation
+/// Font URL
+///
+/// If a custom font-url handler is defined ($govuk-font-url-function) then
+/// it will be called, otherwise a url will be returned with the filename
+/// appended to the font path.
+///
+/// @param {String} $filename - Font filename
+/// @return {String} URL for the filename, wrapped in `url()`
+/// @access public
+@function govuk-font-url($filename) {
+  $use-custom-function: variable-exists("govuk-font-url-function")
+    and $govuk-font-url-function
+    and function-exists($govuk-font-url-function);
+  @if ($use-custom-function) {
+    @return call(get-function($govuk-font-url-function), $filename);
+  } @else {
+    @return url($govuk-fonts-path + $filename);
+  }
+}

data/vendor/assets/stylesheets/tools/_ie8.scss ADDED Viewed

@@ -0,0 +1,51 @@
+////
+/// @group tools
+////
+/// Conditionally include rules only for IE8
+///
+/// @content Passed content is only outputted if we're compiling a stylesheet
+///   that targets IE8 (if `$govuk-is-ie8` is true)
+///
+/// @example scss - Usage
+///
+///   .foo {
+///     min-width: 100px;
+///     // Specify width for IE8 only
+///     @include govuk-if-ie8 {
+///       width: 100px;
+///     }
+///   }
+///
+/// @access public
+@mixin govuk-if-ie8 {
+  @if $govuk-is-ie8 {
+    @content;
+  }
+}
+/// Conditionally exclude rules for IE8
+///
+/// @content Passed content is only outputted if we're not compiling a
+///   stylesheet that targets IE8 (if `$govuk-is-ie8` is false)
+///
+/// @example scss - Usage
+///
+///   .foo {
+///     font-weight: bold;
+///
+///     // Enhance foo only for modern browsers (not IE8)
+///     @include govuk-not-ie8 {
+///       font-family: "Comic Sans MS", "Curlz MT" cursive, sans-serif;
+///       color: #FF69B4;
+///     }
+///   }
+///
+/// @access public
+@mixin govuk-not-ie8 {
+  @if not $govuk-is-ie8 {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/tools/_iff.scss ADDED Viewed

@@ -0,0 +1,15 @@
+////
+/// @group tools
+////
+/// Syntactic sugar around Sass' built-in `if` function that does not require
+/// you to pass a value for `$if-false`.
+///
+/// @param {Boolean} $condition - Whether to return the value of `$if-true`
+/// @param {Mixed} $if-true - Value to return if `$condition` is truthy
+/// @return {Mixed} Value of `$if-true` if `$condition` is truthy, else null
+/// @access public
+@function iff($condition, $if-true) {
+  @return if($condition, $if-true, null);
+}

data/vendor/assets/stylesheets/tools/_image-url.scss ADDED Viewed

@@ -0,0 +1,28 @@
+////
+/// @group tools
+////
+// Disable indentation linting in this file only
+// sass-lint:disable indentation
+/// Image URL
+///
+/// If a custom image-url handler is defined ($govuk-image-url-function) then
+/// it will be called, otherwise a url will be returned with the filename
+/// appended to the image path.
+///
+/// @param {String} Filename for the image to load
+/// @return {String} URL for the filename, wrapped in `url()`
+/// @access public
+@function govuk-image-url($filename) {
+  $use-custom-function: variable-exists("govuk-image-url-function")
+    and $govuk-image-url-function
+    and function-exists($govuk-image-url-function);
+  @if ($use-custom-function) {
+    @return call(get-function($govuk-image-url-function), $filename);
+  } @else {
+    @return url($govuk-images-path + $filename);
+  }
+}

data/vendor/assets/stylesheets/tools/_px-to-em.scss ADDED Viewed

@@ -0,0 +1,20 @@
+////
+/// @group tools
+////
+/// Convert pixels to em
+///
+/// @param {Number} $value - Length in pixels
+/// @param {Number} $context-font-size - Font size of element
+/// @return {Number} Length in ems
+/// @access public
+@function govuk-em($value, $context-font-size) {
+  @if (unitless($value)) {
+    $value: $value * 1px;
+  }
+  @if (unitless($context-font-size)) {
+    $context-font-size: $context-font-size * 1px;
+  }
+  @return $value / $context-font-size * 1em;
+}

data/vendor/assets/stylesheets/tools/_px-to-rem.scss ADDED Viewed

@@ -0,0 +1,20 @@
+////
+/// @group tools
+////
+/// Convert pixels to rem
+///
+/// The $govuk-root-font-size (defined in settings/_typography-responsive.scss)
+/// must be configured to match the font-size of your root (html) element
+///
+/// @param {Number} $value - Length in pixels
+/// @return {Number} Length in rems
+/// @access public
+@function govuk-px-to-rem($value) {
+  @if (unitless($value)) {
+    $value: $value * 1px;
+  }
+  @return $value / $govuk-root-font-size * 1rem;
+}

data/vendor/assets/stylesheets/utilities/_all.scss ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @import "clearfix";
2	+ @import "visually-hidden";

data/vendor/assets/stylesheets/utilities/_clearfix.scss ADDED Viewed

@@ -0,0 +1,5 @@
+@include govuk-exports("govuk/utilities/clearfix") {
+  .govuk-clearfix {
+    @include govuk-clearfix;
+  }
+}

data/vendor/assets/stylesheets/utilities/_visually-hidden.scss ADDED Viewed

@@ -0,0 +1,10 @@
+@include govuk-exports("govuk/utilities/visually-hidden") {
+  .govuk-visually-hidden {
+    @include govuk-visually-hidden;
+  }
+  .govuk-visually-hidden-focusable {
+    @include govuk-visually-hidden-focusable;
+  }
+}