@ons/design-system 44.0.1 → 45.0.0

package/scss/base/_fonts.scss

@@ -0,0 +1,4 @@
+@include font-face(OpenSans, '#{$static}/fonts/opensans-regular', $weight: $font-weight-regular, $style: null, $exts: woff2 woff);
+@include font-face(OpenSans, '#{$static}/fonts/opensans-bold', $weight: $font-weight-bold, $style: null, $exts: woff2 woff);
+@include font-face(RobotoMono, '#{$static}/fonts/robotomono-regular', $weight: $font-weight-regular, $style: null, $exts: woff2 woff);
+@include font-face(RobotoMono, '#{$static}/fonts/robotomono-bold', $weight: $font-weight-bold, $style: null, $exts: woff2 woff);

package/scss/base/_forms.scss

@@ -0,0 +1,29 @@
+fieldset,
+legend {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+fieldset {
+  width: 100%;
+}
+
+input {
+  box-sizing: border-box;
+}
+
+::-webkit-inner-spin-button {
+  display: none;
+}
+
+input[type='text'],
+input[type='number'] {
+  appearance: none;
+}
+
+select {
+  option[disabled][value=''] {
+    display: none;
+  }
+}

package/scss/base/_global.scss

@@ -0,0 +1,65 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+
+html {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  position: relative;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid $color-borders;
+  margin: 2rem 0 0;
+}
+
+%a-focus {
+  background-color: $color-focus;
+  box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus;
+  color: $color-text-link-focus;
+  outline: 3px solid transparent;
+  text-decoration: none;
+}
+
+a {
+  color: $color-text-link;
+  text-decoration-thickness: 1px;
+  text-underline-position: under;
+  &:not(.ons-u-fs-r--b):hover {
+    .ons-u-fs-l &,
+    h2:not(.ons-u-fs-m) & {
+      text-decoration-thickness: 3px;
+    }
+
+    @include mq(m) {
+      .ons-u-fs-m &,
+      h2 &,
+      h3 & {
+        text-decoration-thickness: 3px;
+      }
+    }
+  }
+  &:hover {
+    color: $color-text-link-hover;
+    text-decoration: underline solid $color-text-link-hover 2px;
+  }
+  &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
+    @extend %a-focus;
+  }
+}

package/scss/base/_index.scss

@@ -0,0 +1,4 @@
+@import './fonts';
+@import './forms';
+@import './global';
+@import './typography';

package/scss/base/_typography.scss

@@ -0,0 +1,46 @@
+html {
+  font-size: $base;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.6;
+}
+
+body {
+  color: $color-text;
+  font-family: $font-sans;
+}
+
+p {
+  margin: 0 0 1rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.2;
+  margin: 0 0 1rem;
+  em {
+    background-color: $color-highlight;
+  }
+}
+
+code {
+  font-size: 0.8rem;
+}
+
+ul {
+  margin: 0 0 1rem;
+  padding-left: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+em {
+  font-style: normal;
+  font-weight: $font-weight-bold;
+}

package/scss/census.scss

@@ -0,0 +1,2 @@
+@import './settings/census';
+@import './main';

package/scss/error.scss

@@ -0,0 +1,27 @@
+@import 'normalize';
+
+body {
+  background: #222;
+  color: #fff;
+  font-family: 'Courier New', Courier, monospace;
+  padding: 20px;
+}
+
+.ons-print-error-stack {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &__heading {
+    color: #c00;
+
+    &--secondary {
+      font-size: 1.5rem;
+    }
+  }
+
+  &__entry {
+    color: #f66;
+    margin-bottom: 1em;
+  }
+}

package/scss/helpers/_functions.scss

@@ -0,0 +1,44 @@
+@use 'sass:math';
+
+@function ems($pxval, $base: $base) {
+  $em-size: math.div($pxval, $base);
+
+  @return #{$em-size}em;
+}
+
+@function rems($pxval, $base: $base) {
+  $rem-size: math.div($pxval, $base);
+
+  @return #{$rem-size}rem;
+}
+
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+@function map-set($map, $key, $value) {
+  $new: (
+    $key: $value,
+  );
+
+  @return map-merge($map, $new);
+}
+
+@function str-replace($string, $search, $replace: '') {
+  $string: to-string($string);
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/helpers/_index.scss

@@ -0,0 +1,3 @@
+@import './functions';
+@import './mixins';
+@import './mq';

package/scss/helpers/_mixins.scss

@@ -0,0 +1,94 @@
+@mixin rem($property, $values...) {
+  $max: length($values);
+  $px-values: '';
+  $rem-values: '';
+
+  @for $i from 1 through $max {
+    $value: strip-unit(nth($values, $i));
+    $px-values: #{$px-values + $value * 16}px;
+
+    @if $i < $max {
+      $px-values: #{$px-values + ' '};
+    }
+  }
+
+  @for $i from 1 through $max {
+    $value: strip-unit(nth($values, $i));
+    $rem-values: #{$rem-values + $value}rem;
+
+    @if $i < $max {
+      $rem-values: #{$rem-values + ' '};
+    }
+  }
+
+  #{$property}: $px-values;
+  #{$property}: $rem-values;
+}
+
+@mixin font-size($size-value: 1.6) {
+  @include rem(font-size, $size-value);
+}
+
+// =============================================================================
+// String Replace
+// =============================================================================
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+// =============================================================================
+// Font Face
+// =============================================================================
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
+  $src: null;
+  $extmods: (
+    eot: '?',
+    svg: '#' + str-replace($name, ' ', '_'),
+  );
+  $formats: (
+    otf: 'opentype',
+    ttf: 'truetype',
+  );
+
+  @each $ext in $exts {
+    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+    $src: append($src, url('#{$path}.#{$extmod}') format(quote($format)), comma);
+  }
+
+  @font-face {
+    font-family: quote($name);
+    font-style: $style;
+    font-weight: $weight;
+    src: $src;
+  }
+}
+
+/* stylelint-disable */
+@mixin clearfix() {
+  // no-op
+}
+/* stylelint-enable */
+
+// =============================================================================
+// Remove nth-Child Padding
+// =============================================================================
+
+@mixin nth-element($num, $px) {
+  &:nth-child(#{$num}) {
+    padding-left: $px;
+  }
+}
+
+// =============================================================================
+// Sets antialiasing - used for light text on dark background
+// =============================================================================
+@mixin font-smoothing() {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}

package/scss/helpers/_mq.scss

@@ -0,0 +1,93 @@
+@mixin mq($from: none, $to: none, $from-operator: none, $to-operator: none) {
+  @if $from != none and type-of($from) == 'string' {
+    $from: get-bp-width($from);
+  }
+
+  @if $to != none and type-of($to) == 'string' {
+    $to: get-bp-width($to);
+  }
+
+  @if ($from == none or $from <= nth(nth($grid-bp, 1), 2)) and $to == none {
+    @content;
+  }
+
+  @else if $from == none or $from <= nth(nth($grid-bp, 1), 2) {
+    @if $to-operator != none and $to-operator == '<' {
+      $to: $to - 1;
+    }
+
+    @media (max-width: $to) {
+      @content;
+    }
+  }
+
+  @else if $to == none {
+    @if $from-operator != none and $from-operator == '<' {
+      $from: $from + 1;
+    }
+
+    @media (min-width: $from) {
+      @content;
+    }
+  }
+
+  @else {
+    @if $from-operator != none and $from-operator == '<' {
+      $from: $from + 1;
+    }
+
+    @if $to-operator != none and $to-operator == '<' {
+      $to: $to - 1;
+    }
+
+    @media (min-width: $from) and (max-width: $to) {
+      @content;
+    }
+  }
+}
+
+@function get-bp-width($name, $breakpoints: $grid-bp) {
+  @if map-has-key($breakpoints, $name) {
+    @return map-get($breakpoints, $name);
+  }
+
+  @else {
+    @warn 'Breakpoint #{$name} wasn\'t found in $breakpoints.';
+  }
+}
+
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+@mixin bp-suffix($class, $original: true, $breakpoints: $grid-bp, $create-between-breakpoints: false) {
+  @if $original {
+    .#{$class} {
+      @content;
+    }
+  }
+
+  @each $breakpoint-min, $size in $breakpoints {
+    @include mq($breakpoint-min) {
+      .#{$class}\@#{$breakpoint-min} {
+        @content;
+      }
+    }
+
+    @if $create-between-breakpoints {
+      @each $breakpoint-max, $size in $grid-bp {
+        @include mq($breakpoint-min, $breakpoint-max, $to-operator: '<') {
+          .#{$class}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+            @content;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/main.scss

@@ -0,0 +1,71 @@
+@import 'normalize';
+@import 'vars/index';
+@import 'helpers/index';
+@import 'base/index';
+@import 'objects/index';
+@import '../components/access-code/uac';
+@import '../components/address-output/address-output';
+@import '../components/articles/articles';
+@import '../components/autosuggest/autosuggest';
+@import '../components/breadcrumbs/breadcrumbs';
+@import '../components/button/button';
+@import '../components/call-to-action/call-to-action';
+@import '../components/card/card';
+@import '../components/checkboxes/checkbox';
+@import '../components/checkboxes/checkboxes';
+@import '../components/collapsible/collapsible';
+@import '../components/content-pagination/content-pagination';
+@import '../components/cookies-banner/cookies-banner';
+@import '../components/download-resources/download-resources';
+@import '../components/downloads/downloads';
+@import '../components/external-link/external-link';
+@import '../components/feedback/feedback';
+@import '../components/field/field-group';
+@import '../components/field/field';
+@import '../components/fieldset/fieldset';
+@import '../components/find-a-support-centre/find-a-support-centre';
+@import '../components/footer/footer';
+@import '../components/header/header-nav';
+@import '../components/header/header';
+@import '../components/hero/hero';
+@import '../components/highlight/highlight';
+@import '../components/icons/icons';
+@import '../components/images/images';
+@import '../components/input/input-type';
+@import '../components/input/input';
+@import '../components/label/label';
+@import '../components/language-selector/language';
+@import '../components/lists/list';
+@import '../components/message-list/message-list';
+@import '../components/message/message';
+@import '../components/metadata/metadata';
+@import '../components/modal/modal';
+@import '../components/pagination/pagination';
+@import '../components/panel/panel';
+@import '../components/phase-banner/phase-banner';
+@import '../components/promotional-banner/promo-banner';
+@import '../components/question/question';
+@import '../components/quote/quote';
+@import '../components/radios/radio';
+@import '../components/radios/radios';
+@import '../components/related-content/related-content';
+@import '../components/relationships/relationships';
+@import '../components/search/search';
+@import '../components/section-navigation/section-navigation';
+@import '../components/skip-to-content/skip';
+@import '../components/status/status';
+@import '../components/summary/summary';
+@import '../components/table-of-contents/toc';
+@import '../components/table/table';
+@import '../components/tabs/tabs';
+@import '../components/text-indent/text-indent';
+@import '../components/timeline/timeline';
+@import '../components/upload/upload';
+@import '../components/video/video';
+@import 'utilities/index';
+
+// Right to left
+@import 'overrides/rtl';
+
+// High Contrast Mode
+@import 'overrides/hcm';

package/scss/objects/_container.scss

@@ -0,0 +1,34 @@
+.ons-container {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: $grid-max-width;
+  padding: 0 $grid-gutters;
+  position: relative;
+  width: 100%;
+
+  @include mq(s) {
+    padding: 0 $grid-gutters;
+  }
+
+  &--wide {
+    max-width: $grid-max-1280;
+  }
+
+  &--full-width {
+    max-width: 100%;
+  }
+}
+
+.ons-grid--align-bottom {
+  .ons-grid__col {
+    vertical-align: bottom;
+  }
+}
+
+.ons-grid__col {
+  font-size: 1rem;
+}
+
+@include bp-suffix('ons-container--gutterless', $create-between-breakpoints: true) {
+  padding: 0;
+}

package/scss/objects/_index.scss

@@ -0,0 +1,3 @@
+@import './container';
+@import './page';
+@import './spacing';

package/scss/objects/_page.scss

@@ -0,0 +1,49 @@
+.ons-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.ons-page__content {
+  flex: 1 0 auto;
+  // NOTE: padding-bottom: 1px fixes safari scroll issue
+  // Issue number #862
+  padding-bottom: 1px;
+  position: relative;
+}
+
+.ons-page__main {
+  margin-bottom: 4.5rem;
+  margin-top: 2.5rem;
+
+  @include mq(xxs, m) {
+    margin-top: 1.5rem;
+  }
+}
+
+.ons-page__body {
+  h2 {
+    @extend .ons-u-fs-xl;
+  }
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 2rem;
+  }
+  .ons-panel__body,
+  .ons-collapsible {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: 0;
+    }
+  }
+  h2:not(:first-child) {
+    margin-top: 2.5rem;
+  }
+}

package/scss/objects/_spacing.scss

@@ -0,0 +1,23 @@
+.ons-field +,
+.ons-field-group +,
+.ons-fieldset +,
+.ons-input-items +,
+.ons-figure +,
+.ons-panel +,
+.ons-summary__group +,
+.ons-collapsible:not(.ons-collapsible--accordion) + {
+  .ons-figure,
+  .ons-field,
+  .ons-field-group,
+  .ons-fieldset,
+  .ons-input-items,
+  .ons-panel:not(.ons-panel--bare),
+  .ons-summary__group,
+  .ons-collapsible:not(.ons-collapsible--accordion) {
+    margin-top: 1.5rem;
+  }
+}
+
+.ons-breadcrumb + .ons-grid {
+  margin-top: -1rem;
+}

package/scss/overrides/hcm.scss

@@ -0,0 +1,81 @@
+// High Contrast Mode
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  // Brightness makes all images black, except transparent parts, which remain transparent
+  // Then, invert(1) makes the black parts white
+  .ons-header__logo,
+  .ons-footer__ogl-img,
+  .ons-quote .ons-svg-icon,
+  .ons-collapsible__icon .ons-svg-icon,
+  .ons-footer img {
+    filter: brightness(0) invert(1);
+  }
+
+  // IE11 fallback
+  .ons-collapsible__icon .ons-svg-icon,
+  .ons-breadcrumb__item .ons-svg-icon,
+  .ons-panel .ons-svg-icon,
+  .ons-list--icons .ons-svg-icon {
+    fill: currentColor;
+  }
+
+  // Matches icon with the link colour
+  .ons-external-link {
+    svg {
+      fill: currentColor !important;
+    }
+  }
+
+  // Adds a border to container error warning panel
+  .ons-panel--error {
+    border: 1px solid currentColor;
+
+    .ons-panel__header {
+      border-bottom: 1px solid currentColor;
+    }
+  }
+
+  // Adds some style adjustments to the focused item to make it obvious something is selected
+  .ons-js-autosuggest .ons-autosuggest-input__option--focused {
+    padding-left: 1.5rem;
+    text-decoration: underline;
+  }
+
+  .ons-radio__input:checked + .ons-radio__label {
+    position: relative;
+
+    // These off pixels are not nice, but due to the way the form controls have been built I have had no choice
+    // I would strongly revisit doing the checkboxes and radios again and fix these non-whole pixel values
+    &::after {
+      border: 6px solid currentColor;
+      border-radius: 50%;
+      content: '';
+      height: 12.5px;
+      left: 16px;
+      position: absolute;
+      top: 18.5px;
+      width: 12.5px;
+      z-index: 1;
+    }
+  }
+
+  // Had to do this without messing with the existing SVG
+  .ons-input--select {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iY2hldnJvbi1kb3duIiBjbGFzcz0ic3ZnLWljb24iIHZpZXdCb3g9IjAgMCAxMiA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMS4yIDBMNiA1LjQgMTAuOCAwIDEyIDEuMyA2IDggMCAxLjN6Ii8+Cjwvc3ZnPgo=');
+    background-size: 12px 8px;
+  }
+
+  // I would have approached the mark differently, but without changing the existing approach this fixes it
+  .ons-timeline__item::before {
+    border: 2px solid currentColor;
+  }
+
+  // Buttons
+  .ons-btn__inner .ons-svg-icon {
+    fill: currentColor !important;
+  }
+
+  // Hero pre title
+  .ons-hero__pre-title {
+    filter: brightness(0) invert(1);
+  }
+}