@nice-digital/nds-core 1.3.2 → 1.3.5-alpha.0

package/scss/helpers/_helpers-text.scss

@@ -1,21 +0,0 @@
-////
-/// @group helpers
-////
-
-/// Text truncate
-/// Requires inline-block or block for proper styling
-/// @since 0.1.0
-@mixin nds-text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/// Set and element to display as block and align
-/// centrally via auto left/right margins
-/// @since 0.1.0
-@mixin nds-center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}

package/scss/helpers/_helpers-visibility.scss

@@ -1,37 +0,0 @@
-////
-/// @group helpers
-////
-
-//## Mixins
-
-/// Portrait media query
-@mixin nds-portrait {
-  @media screen and (orientation: portrait) {
-    @content;
-  }
-}
-
-/// Landscape media query
-@mixin nds-landscape {
-  @media screen and (orientation: landscape) {
-    @content;
-  }
-}
-
-/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
-@mixin nds-invisible {
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  width: 1px;
-}
-
-/// Reverses the CSS output created by the `invisible()` mixin.
-@mixin nds-invisible-off {
-  clip: auto;
-  height: auto;
-  overflow: visible;
-  position: static !important;
-  width: auto;
-}

package/scss/helpers/_helpers.scss

@@ -1,2 +0,0 @@
-@import 'helpers-utils', 'helpers-clearfix', 'helpers-focus', 'helpers-glyphs',
-  'helpers-lists', 'helpers-text', 'helpers-visibility', 'helpers-print';

package/scss/layout/_layout-container.scss

@@ -1,12 +0,0 @@
-////
-/// @group components
-////
-
-/// Container placeholder.
-/// @since 1.0.0
-@mixin nds-container {
-  margin: auto;
-  max-width: rem($nds-container-max-width);
-  width: 96%; // IE11 support for calc not consistent https://caniuse.com/calc (See "Known issues")
-  width: calc(100% - #{rem($nds-container-gutter * 2)});
-}

package/scss/layout/_layout.scss

@@ -1 +0,0 @@
-@import 'layout-container';

package/scss/settings/_settings-breakpoints.scss

@@ -1,25 +0,0 @@
-/// Extra small break point
-/// @since 0.2.0
-$nds-breakpoint-xs: 400px !default;
-
-/// 'Small' break point. Roughly portrait tablets.
-/// @since 0.2.0
-$nds-breakpoint-sm: 600px !default;
-
-/// 'Medium' break point. Roughly landscape tablets.
-/// @since 0.2.0
-$nds-breakpoint-md: 900px !default;
-
-/// 'Large' break point. Roughly 'dektops'.
-/// @since 0.2.0
-$nds-breakpoint-lg: 1200px !default;
-
-/// 'Extra large' break point for wide screens
-/// @since 0.2.0
-$nds-breakpoint-xl: 1600px !default;
-
-/// Whether the site is responsive. Setting to false will disable
-/// generation of the responsie grid selectors.
-/// True by default.
-/// @since 0.2.0
-$nds-responsive: true !default;

package/scss/settings/_settings-glyphs.scss

@@ -1,3 +0,0 @@
-/// Whether to output the classes for the UTF-8 glyphs.
-/// @since 0.2.0
-$nds-output-glyph-classes: false !default;

package/scss/settings/_settings-layout.scss

@@ -1,15 +0,0 @@
-////
-/// @group grid
-////
-
-/// The maximum width of the default container, in pixels
-/// @since 0.5.2
-$nds-container-max-width: 1170;
-
-/// The gutter for the default container
-/// @since 1.0.0
-$nds-container-gutter: $nds-spacing-medium;
-
-/// The maximum content width to ensure good readability
-/// @since 1.7.0
-$nds-readable-width: 66ch;

package/scss/settings/_settings-mq.scss

@@ -1,17 +0,0 @@
-// SASS MQ OVERRIDES
-
-// A map of breakpoints (name: px) required for SASS MQ
-$mq-breakpoints: (
-  xs: $nds-breakpoint-xs,
-  sm: $nds-breakpoint-sm,
-  md: $nds-breakpoint-md,
-  lg: $nds-breakpoint-lg,
-  xl: $nds-breakpoint-xl
-);
-
-// Base font size
-$mq-base-font-size: $nds-base-font-size * 1px;
-
-$mq-static-breakpoint: lg;
-
-$mq-responsive: $nds-responsive;

package/scss/settings/_settings-print.scss

@@ -1,5 +0,0 @@
-/// Whether to output a default set of generic print styles for things
-/// like avoiding page breaks after headings etc. If you disabled this,
-/// be sure to add your own print styles.
-/// @since 0.2.0
-$nds-output-default-print-styles: true !default;

package/scss/settings/_settings-spacing.scss

@@ -1,43 +0,0 @@
-////
-/// @group spacing
-////
-
-/// Extra extra small spacing
-/// @since 0.2.0
-$nds-spacing-xx-small: 2;
-
-/// Extra small spacing
-/// @since 0.2.0
-$nds-spacing-x-small: 4;
-
-/// Small spacing
-/// @since 0.2.0
-$nds-spacing-small: 8;
-
-/// Medium spacing
-/// @since 0.2.0
-$nds-spacing-medium: 16;
-
-/// Large spacing
-/// @since 0.2.0
-$nds-spacing-large: 32;
-
-/// Extra large spacing
-/// @since 0.2.0
-$nds-spacing-x-large: 48;
-
-/// Extra extra large spacing
-/// @since 0.2.0
-$nds-spacing-xx-large: 64;
-
-/// A map of spacing values
-/// @since 0.2.15
-$nds-spacings: (
-  xx-small: $nds-spacing-xx-small,
-  x-small: $nds-spacing-x-small,
-  small: $nds-spacing-small,
-  medium: $nds-spacing-medium,
-  large: $nds-spacing-large,
-  x-large: $nds-spacing-x-large,
-  xx-large: $nds-spacing-xx-large
-);

package/scss/settings/_settings.scss

@@ -1,4 +0,0 @@
-@import 'settings-colours-nice', 'settings-colours-semantic',
-  'settings-modular-scale', 'settings-spacing', 'settings-breakpoints',
-  'settings-glyphs', 'settings-layout', 'settings-print', 'settings-typography',
-  'settings-mq';

package/scss/typography/_typography-helpers.scss

@@ -1,148 +0,0 @@
-////
-/// @group Typography
-////
-
-/// Gets a font family from the `$nds-font-families` map, given a name
-/// @param {String} $stack The stack name e.g. sans, serif or mono
-/// @since 0.1.0
-@function nds-get-font-family($stack) {
-  $result: map-get($nds-font-families, $stack);
-  @return unquote($result);
-}
-
-/// Gets a numeric scale
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @since 0.1.0
-@function nds-get-scale-integer($scale) {
-  @if map-has-key($nds-named-font-sizes, $scale) {
-    @return map-get($nds-named-font-sizes, $scale);
-  } @else if is-integer($scale) {
-    @return $scale;
-  }
-
-  @error '`$scale` must either be an integer or exist as a named font size in `$nds-named-font-sizes`';
-}
-
-/// Gets a numeric font size (in px) from a given scale multiplier.
-/// Usually not used directly - the font-size or font mixin is usually used instead.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @return {Number} Numeric font size (in px)
-/// @example
-///   $font-size: nds-get-font-size(2)
-/// @example
-///   $font-size: nds-get-font-size(h1)
-/// @since 0.1.0
-@function nds-get-font-size($scale) {
-  $scale-integer: nds-get-scale-integer($scale);
-  $font-map: map-get($nds-font-sizes, $scale-integer);
-  @return map-get($font-map, fs);
-}
-
-/// Gets a numeric line height (in px) from a given scale multiplier.
-/// Usually not used directly - the font-size or font mixin is usually used instead.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @return {Number} Numeric line-height (in px)
-/// @example
-///   $line-height: nds-get-line-height(2)
-/// @example
-///   $line-height: nds-get-line-height(h1)
-/// @since 0.1.0
-@function nds-get-line-height($scale) {
-  $scale-integer: nds-get-scale-integer($scale);
-  $font-map: map-get($nds-font-sizes, $scale-integer);
-  @return map-get($font-map, lh);
-}
-
-/// Applies font size and line-height for the given scale.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @param $important {Boolean} Whether to add an important declaration to the CSS rules.
-/// @example
-///   .test {
-///     @include nds-font-size(-2);
-///   }
-/// @example
-///   .test {
-///     @include nds-font-size(h1, true);
-///   }
-/// @since 0.1.0
-@mixin nds-font-size($scale: 0, $important: false) {
-  $font-size: nds-get-font-size($scale);
-  $line-height: nds-get-line-height($scale);
-
-  @if $important {
-    font-size: rem($font-size) !important;
-    line-height: rem($line-height) !important;
-  } @else {
-    font-size: rem($font-size);
-    line-height: rem($line-height);
-  }
-}
-
-/// Nice font: includes font size, line height, and margins.
-/// @param $scale {Integer|Name} The integer ratio or named font-size.
-/// @param $important {Boolean} Whether to add an important declaration to the CSS rules.
-/// @example
-///   .test {
-///     @include nds-font(3);
-///   }
-/// @example
-///   .test {
-///     @include nds-font(h1, true);
-///   }
-/// @since 0.1.0
-@mixin nds-font($scale, $important: false) {
-  $scale-integer: nds-get-scale-integer($scale);
-  $font-map: map-get($nds-font-sizes, $scale-integer);
-  @include nds-font-size($scale, $important);
-
-  @if $important {
-    margin-bottom: rem(map-get($font-map, mb)) !important;
-    margin-top: rem(map-get($font-map, mt)) !important;
-  } @else {
-    margin-bottom: rem(map-get($font-map, mb));
-    margin-top: rem(map-get($font-map, mt));
-  }
-}
-
-/// Default paragraph style
-/// @since 0.5.2
-@mixin nds-p {
-  @include nds-font(p);
-  font-feature-settings: 'kern', 'onum', 'liga';
-  font-weight: normal;
-  max-width: 66ch;
-}
-
-/// Lead paragraph style
-/// @since 0.2.12
-@mixin nds-lead {
-  @include nds-font(lead);
-  font-weight: normal;
-  max-width: 66ch;
-}
-
-/// Base list style
-/// @since 0.1.0
-@mixin nds-list {
-  font-feature-settings: 'kern', 'onum', 'liga';
-  margin-left: rem($nds-spacing-medium);
-  max-width: 66ch;
-  padding: 0;
-}
-
-// TODO: default-error-style probably belongs elsewhere?
-
-/// The highlight style used for elements like inputs and textareas
-/// if there's an error on the field
-/// @param {Boolean} $rounded whether to use box shadow for border (outline can't be styled to have radius corners)
-/// @output default styling for form elements in an errored state
-/// @since 1.0
-@mixin nds-default-error-style($rounded: false) {
-  @if $rounded {
-    box-shadow: 0 0 0 rem($nds-spacing-x-small) $nds-colour-error;
-    outline: $nds-spacing-x-small solid transparent;
-    outline-offset: $nds-spacing-x-small;
-  } @else {
-    outline: rem($nds-spacing-x-small) solid $nds-colour-error;
-  }
-}

package/scss/typography/_typography-links.scss

@@ -1,73 +0,0 @@
-////
-/// @group Typography
-////
-
-/// Default link style for use on a normal (light) background
-/// @since 0.3.1
-@mixin nds-link-default {
-  color: $nds-colour-link;
-  -webkit-tap-highlight-color: rgba($nds-colour-focus, 0.333);
-  text-decoration: underline;
-  text-decoration-skip-ink: auto;
-
-  &:visited {
-    color: $nds-colour-link-visited;
-  }
-
-  &:hover {
-    color: $nds-colour-link-hover;
-    text-decoration-thickness: 0.15rem;
-  }
-
-  &:focus {
-    @include nds-default-focus-style;
-    color: $nds-colour-link-focus-text;
-  }
-
-  &:active {
-    color: $nds-colour-link-active;
-  }
-}
-/// Default links for use on a light background
-/// @require {mixin} link-default
-/// @since 0.5.0
-@mixin nds-links-default {
-  a {
-    @include nds-link-default;
-  }
-}
-
-/// Inverse link style for use on an inverse (dark) background
-/// @since 0.3.1
-@mixin nds-link-inverse {
-  color: $nds-colour-link-inverse;
-  -webkit-tap-highlight-color: rgba($nds-colour-focus, 0.333);
-  text-decoration: underline;
-  text-decoration-skip-ink: auto;
-
-  &:visited {
-    color: $nds-colour-link-inverse-visited;
-  }
-
-  &:hover {
-    color: $nds-colour-link-inverse-hover;
-  }
-
-  &:focus {
-    @include nds-inverse-focus-style;
-    color: $nds-colour-link-inverse-focus-text;
-  }
-
-  &:active {
-    color: $nds-colour-link-inverse-active;
-  }
-}
-
-/// Inverse links for use on a dark background
-/// @require {mixin} link-inverse
-/// @since 0.3.1
-@mixin nds-links-inverse {
-  a {
-    @include nds-link-inverse;
-  }
-}

package/scss/typography/_typography.scss

@@ -1 +0,0 @@
-@import 'typography-helpers', 'typography-links', 'typography-headings';

package/scss/vendor/_vendor.scss

@@ -1,2 +0,0 @@
-@import 'vendor-is',
-  'vendor-math';