@linzjs/lui 12.1.4 → 12.2.0-roll-up.0

package/dist/scss/Foundation/Variables/_ExportCSS.scss

@@ -1,121 +0,0 @@
-@use 'LuiColors';
-
-$prefix: '--'; // Prefix string for custom CSS properties
-
-// Merges a variable name with $prefix
-@function custom-property-name($name) {
-  @return $prefix + $name;
-}
-
-// Defines a custom property
-@mixin define-custom-property($name, $value) {
-  #{custom-property-name($name)}: $value;
-}
-
-// Append SCSS variables which are desired to be accessible:
-:root {
-  @include define-custom-property('grey-80', LuiColors.$charcoal);
-  @include define-custom-property('grey-60', LuiColors.$fuscous);
-  @include define-custom-property('$gray', LuiColors.$gray);
-  @include define-custom-property('grey-20', LuiColors.$silver);
-  @include define-custom-property('grey-10', LuiColors.$lily);
-  @include define-custom-property('grey-05', LuiColors.$hint);
-
-  @include define-custom-property('teal', LuiColors.$teal);
-  // blue-85,// $blue-85
-  @include define-custom-property('sea', LuiColors.$sea);
-  @include define-custom-property('electric', LuiColors.$electric);
-  @include define-custom-property('spray', LuiColors.$spray);
-  @include define-custom-property('polar', LuiColors.$polar);
-
-  @include define-custom-property('sherpa', LuiColors.$sherpa);
-  @include define-custom-property('surfie', LuiColors.$surfie);
-  @include define-custom-property('persian', LuiColors.$persian);
-  @include define-custom-property('downy', LuiColors.$downy);
-  @include define-custom-property('iceberg', LuiColors.$iceberg);
-
-  @include define-custom-property('sacramento', LuiColors.$sacramento);
-  @include define-custom-property('salem', LuiColors.$salem);
-  @include define-custom-property('pigment', LuiColors.$pigment);
-  @include define-custom-property('granny', LuiColors.$granny);
-  @include define-custom-property('panache', LuiColors.$panache);
-
-  @include define-custom-property('brand-primary', LuiColors.$brand-primary);
-  @include define-custom-property(
-    'brand-secondary',
-    LuiColors.$brand-secondary
-  );
-
-  // System colours,// System colours
-
-  // reserved colours,// reserved colours
-  @include define-custom-property('success', LuiColors.$success);
-  @include define-custom-property('success-bg', LuiColors.$success-bg);
-  @include define-custom-property('info', LuiColors.$info);
-  @include define-custom-property('info-bg', LuiColors.$info-bg);
-  @include define-custom-property('warning', LuiColors.$warning);
-  @include define-custom-property('warning-bg', LuiColors.$warning-bg);
-  @include define-custom-property('error', LuiColors.$error);
-  @include define-custom-property('error-focus', LuiColors.$error-focus);
-  @include define-custom-property('error-bg', LuiColors.$error-bg);
-
-  @include define-custom-property('visited', LuiColors.$visited);
-
-  // restricted colours for btn hover states,// restricted colours for btn hover states
-  @include define-custom-property('green-hover', LuiColors.$green-hover);
-  @include define-custom-property(
-    'color-green-active',
-    LuiColors.$green-active
-  );
-  @include define-custom-property('green-btn', LuiColors.$green-btn);
-  @include define-custom-property('txt-link', LuiColors.$txt-link);
-  @include define-custom-property(
-    'color-primary-hover-btn',
-    LuiColors.$primary-hover-btn
-  );
-  @include define-custom-property('color-selection', LuiColors.$selection);
-
-  //Type
-  @include define-custom-property('heading-color', LuiColors.$surfie);
-  @include define-custom-property(
-    'heading-color--secondary',
-    LuiColors.$charcoal
-  );
-  @include define-custom-property('base-type-color', LuiColors.$charcoal);
-
-  // Icons & radio/checkboxes
-  @include define-custom-property('base-icon-color', LuiColors.$sea);
-  @include define-custom-property('disabled-color', LuiColors.$gray);
-  @include define-custom-property('disabled-color-dark', LuiColors.$fuscous);
-
-  //LINZ public site colour variables,//LINZ public site colour variables
-
-  @include define-custom-property(
-    'linz-color-primary',
-    LuiColors.$linz-color-primary
-  );
-  @include define-custom-property(
-    'linz-color-primary-hover',
-    LuiColors.$linz-color-primary-hover
-  );
-
-  @include define-custom-property(
-    'linz-color-tertiary',
-    LuiColors.$linz-color-tertiary
-  );
-  @include define-custom-property(
-    'linz-color-tertiary-hover',
-    LuiColors.$linz-color-tertiary-hover
-  );
-
-  @include define-custom-property('color-test-pink', LuiColors.$test-pink);
-
-  @include define-custom-property(
-    'linz-linear-gradient-blue',
-    LuiColors.$linz-linear-gradient-blue
-  );
-  @include define-custom-property(
-    'linz-linear-gradient-teal',
-    LuiColors.$linz-linear-gradient-teal
-  );
-} // end :root

package/dist/scss/Foundation/Variables/_ExportColors.scss

@@ -1,87 +0,0 @@
-@use "LuiColors";
-
-// TODO: This should be used for including into components instead of ColorVars.scss
-
-// the :export directive is the magic sauce for webpack
-:export {
-  charcoal: LuiColors.$charcoal;
-  fuscous: LuiColors.$fuscous;
-  gray: LuiColors.$gray;
-  silver: LuiColors.$silver;
-  lily: LuiColors.$lily;
-  hint: LuiColors.$hint;
-  snow: LuiColors.$snow;
-  white: LuiColors.$white;
-
-  teal: LuiColors.$teal;
-  //blue-85,// $blue-85
-  sea: LuiColors.$sea;
-  electric: LuiColors.$electric;
-  spray: LuiColors.$spray;
-  polar: LuiColors.$polar;
-
-  sherpa: LuiColors.$sherpa;
-  surfie: LuiColors.$surfie;
-  persian: LuiColors.$persian;
-  downy: LuiColors.$downy;
-  iceberg: LuiColors.$iceberg;
-
-  sacramento: LuiColors.$sacramento;
-  salem: LuiColors.$salem;
-  pigment: LuiColors.$pigment;
-  granny: LuiColors.$granny;
-  panache: LuiColors.$panache;
-
-  brand-primary: LuiColors.$brand-primary;
-  brand-secondary: LuiColors.$brand-secondary;
-
-  // System colours,// System colours
-
-  // reserved colours,// reserved colours
-  error: LuiColors.$error;
-  error-bg: LuiColors.$error-bg;
-  error-focus: LuiColors.$error-focus; // Used to highlight what input in an error state has focus
-  warning: LuiColors.$warning;
-  warning-bg: LuiColors.$warning-bg;
-  warning-focus: LuiColors.$warning-focus;
-  success: LuiColors.$success;
-  success-bg: LuiColors.$success-bg;
-  info: LuiColors.$info;
-  info-bg: LuiColors.$info-bg;
-
-  visited: LuiColors.$visited;
-
-  // restricted colours for btn hover states,// restricted colours for btn hover states
-  green-hover: LuiColors.$green-hover;
-  green-active: LuiColors.$green-active;
-  green-btn: LuiColors.$green-btn;
-  txt-link: LuiColors.$txt-link;
-  primary-hover-btn: LuiColors.$primary-hover-btn;
-  selection: LuiColors.$selection;
-
-  //Type
-  heading-color: LuiColors.$surfie;
-  heading-color--secondary: LuiColors.$charcoal;
-  base-type-color: LuiColors.$charcoal;
-
-  // Icons, inputs & radio/checkboxes
-  input-text: LuiColors.$input-text;
-  input-placeholder: LuiColors.$input-placeholder;
-  input-placeholder-when-disabled: LuiColors.$input-placeholder-when-disabled;
-  base-icon-color: LuiColors.$sea;
-  disabled-color: LuiColors.$gray;
-  disabled-color-dark: LuiColors.$fuscous;
-
-  //LINZ public site colour variables,//LINZ public site colour variables
-
-  linz-color-primary: LuiColors.$linz-color-primary;
-  linz-color-primary-hover: LuiColors.$linz-color-primary-hover;
-
-  linz-color-tertiary: LuiColors.$linz-color-tertiary;
-  linz-color-tertiary-hover: LuiColors.$linz-color-tertiary-hover;
-
-  color-test-pink: LuiColors.$test-pink;
-
-  linz-linear-gradient-blue: LuiColors.$linz-linear-gradient-blue;
-  linz-linear-gradient-teal: LuiColors.$linz-linear-gradient-teal;
-} // end :export

package/dist/scss/Foundation/Variables/_LuiColors.scss

@@ -1,139 +0,0 @@
-@use "sass:color";
-// ============
-// Colours
-// ============
-
-// Colours are hard. We've remapped the names in FigLui so that's what's below.
-
-// ----------------------------
-// Brand
-// ----------------------------
-
-// Blues
-$teal: #00425d;
-$sea: #007198;
-$electric: #0096cc;
-$spray: #73c8e1;
-$polar: #e2f3f7;
-$linz-linear-gradient-blue: linear-gradient(70deg, $teal 12%, $sea 100%);
-
-// Teals
-$sherpa: #004b50;
-$surfie: #017a76;
-$persian: #00a599;
-$downy: #73cdc8;
-$iceberg: #dcf5f0;
-$linz-linear-gradient-teal: linear-gradient(270deg, $persian 1%, $downy 100%);
-
-// Greens
-$sacramento: #004e32;
-$salem: #08814d;
-$pigment: #0aa245;
-$granny: #9bd79b;
-$panache: #e9fae7;
-
-// ----------------------------
-// Neutrals
-// ----------------------------
-
-$charcoal: #2a292c;
-$fuscous: #6b6966;
-$gray: #989189;
-$silver: #beb9b4;
-$lily: #eaeaea;
-$hint: #f9f9f9;
-$snow: #ffffff;
-$white: $snow;
-
-// ----------------------------
-// Reserved
-// ----------------------------
-
-// error
-$error: #cc0000;
-$error-bg: #f5cccc;
-$error-focus: #5a0000;
-
-// warning
-$warning: #ea6a2e;
-$warning-bg: #fbdfd2;
-$warning-focus: #b33a01;
-
-// info
-$info: #3a7cdf;
-$info-bg: #d8e5f9;
-
-// success
-$success: $pigment;
-$success-bg: $panache;
-
-// text link
-$txt-link: #1f69c3;
-
-$test-pink: #f09;
-
-// --------------------------------------------------------
-// Deprecated variable sets
-// --------------------------------------------------------
-
-$grey-80: $charcoal;
-$grey-60: $fuscous;
-$grey-30: $gray;
-$grey-20: $silver;
-$grey-10: $lily;
-$grey-05: $hint;
-
-$blue-100: $teal;
-$blue-75: $sea;
-$blue-50: $electric;
-$blue-25: $spray;
-$blue-05: $polar;
-
-$teal-100: $sherpa;
-$teal-75: $surfie;
-$teal-50: $persian;
-$teal-25: $downy;
-$teal-05: $iceberg;
-
-$green-100: $sacramento;
-$green-75: $salem;
-$green-50: $pigment;
-$green-25: $granny;
-$green-05: $panache;
-
-$brand-primary: $sherpa;
-$brand-secondary: $surfie;
-
-// System colours
-
-$visited: $teal;
-$selection: lighten($spray, 20%);
-
-// restricted colours for btn hover states
-$green-hover: $salem;
-$green-active: $sacramento;
-$green-btn: $pigment;
-$txt-link: $electric;
-$primary-hover-btn: $sea;
-
-//Type
-$heading-color: $surfie;
-$heading-color--secondary: $charcoal;
-$base-type-color: $charcoal;
-
-// Icons, inputs & radio/checkboxes
-$input-text: $charcoal;
-$input-placeholder: $fuscous;
-$input-placeholder-when-disabled: $gray;
-$base-icon-color: $sea;
-$disabled-color: $gray;
-$disabled-color-dark: $gray;
-$input-focus: $teal;
-
-//LINZ public site colour variables
-
-$linz-color-primary: #023d48;
-$linz-color-primary-hover: #01818a;
-
-$linz-color-tertiary: #e1e44a;
-$linz-color-tertiary-hover: #cdcf59;

package/dist/scss/Foundation/Variables/_index.scss

@@ -1,6 +0,0 @@
-@forward 'ColorVars';
-@forward 'FontVars';
-@forward 'BreakpointVars';
-@forward 'MiscVars';
-@forward 'SpacingVars';
-@forward 'FormVars';

package/dist/scss/Foundation/_index.scss

@@ -1,2 +0,0 @@
-@forward 'Utilities';
-@forward 'Variables';

package/dist/scss/Global/GenericElements/Buttons.scss

@@ -1,75 +0,0 @@
-// ========================
-// Buttons
-// ========================
-
-// ==========================================
-//  common variables
-// ==========================================
-$button-height: 40px;
-$button-min-width: 180px;
-$button-border-width: 2px;
-$button-border-radius: 40px;
-$button-disabled-opacity: 0.5;
-$button-horizontal-padding: 48px;
-$button-transition-speed: 150ms;
-
-// Base button styles
-.Button,
-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  appearance: none;
-  text-decoration: none;
-  cursor: pointer;
-  height: $button-height;
-  margin: 0;
-  padding: 0 $button-horizontal-padding;
-  position: relative;
-  text-align: center;
-  user-select: none;
-  white-space: normal;
-  border: none;
-  border-radius: $button-border-radius;
-  min-width: $button-min-width;
-  transition: all $button-transition-speed ease-in-out;
-}
-
-// ========================
-// MODIFIERS
-// ========================
-.Button--block {
-  width: 100%;
-}
-
-.Button--small {
-  @extend %small !optional;
-  height: $button-height * 0.8;
-  padding: 0 $button-horizontal-padding * 0.5;
-  min-width: $button-min-width * 0.5;
-}
-
-// ========================
-// UI STATES
-// ========================
-.Button {
-  &:hover,
-  &:focus,
-  &:active,
-  &:disabled,
-  &.is-disabled,
-  &.is-loading {
-    text-decoration: none;
-    outline: none;
-  }
-
-  &.is-loading {
-    cursor: wait;
-  }
-
-  &:disabled,
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: $button-disabled-opacity;
-  }
-}

package/dist/scss/Global/GenericElements/Icon.scss

@@ -1,45 +0,0 @@
-$icon-lg: 48px;
-$icon-md: 32px;
-$icon-sm: 16px;
-
-.Icon {
-  display: inline-block;
-  height: 100%;
-  width: 100%;
-}
-
-.Icon--lg {
-  max-height: $icon-lg;
-  max-width: $icon-lg;
-
-  > svg {
-    height: $icon-lg;
-    width: $icon-lg;
-  }
-}
-
-.Icon--md {
-  height: $icon-md;
-  max-height: $icon-md;
-  max-width: $icon-md;
-  width: $icon-md;
-
-  > svg {
-    height: $icon-md;
-    width: $icon-md;
-  }
-}
-
-.Icon--sm {
-  max-height: $icon-sm;
-  max-width: $icon-sm;
-
-  > svg {
-    height: $icon-sm;
-    width: $icon-sm;
-  }
-}
-
-#root > svg {
-  display: none;
-}

package/dist/scss/Global/GenericElements/Link.scss

@@ -1,80 +0,0 @@
-@use '../../Foundation/Variables/ColorVars.scss' as colors;
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
-@use '../../Foundation/Utilities/Hover.scss' as hover;
-
-// ============
-// $LINK
-// ============
-
-a {
-  color: colors.$txt-link;
-  @include fonts.font-regular;
-  display: inline-block; // By setting them in inline block they stay together and fixes an issue with REACT adding display block and the borders dropping off.
-  position: relative;
-  transition: all 0.3s ease(expo-in-out);
-  text-underline-offset: 0em;
-  text-underline-position: under;
-
-  &:visited {
-    color: colors.$visited;
-  }
-
-  &:hover {
-    color: colors.$brand-primary;
-
-    &:before {
-      background-color: colors.$brand-primary;
-    }
-  }
-
-  &:disabled {
-    color: colors.$disabled-color;
-    box-shadow: none;
-
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
-
-  &.lui-link-icon {
-    box-shadow: none;
-    &-disabled {
-      box-shadow: none;
-      color: colors.$disabled-color;
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &.lui-button:before {
-    display: none;
-  }
-}
-
-// Is Link being used?
-.Link {
-  color: colors.$txt-link;
-  @include hover.hover('is-active') {
-    color: colors.$txt-link;
-  }
-}
-
-.Link--reversed {
-  color: colors.$white;
-  @include hover.hover('is-active') {
-    color: colors.$charcoal;
-  }
-}
-
-.lui-external-link {
-  padding-right: 26px;
-  position: relative;
-
-  i {
-    position: absolute;
-    right: 0;
-    width: 24px;
-    height: 24px;
-  }
-}

package/dist/scss/Global/GenericElements/Lists.scss

@@ -1,28 +0,0 @@
-@use "../../Foundation/Variables" as lui;
-
-////////////////////////////////////////////////////////
-// Let's be honest gang, we never seem to want normal
-// list styles so here blow it away.
-///////////////////////////////////////////////////////
-
-ul {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  ul,
-  li {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-// This is used to add generic list styles to ul & li's
-.lui-list-bullet {
-  list-style-type: disc;
-  padding-left: lui.$unit-md; // 24px
-
-  li {
-    margin-top: lui.$unit-sm; // 12px
-  }
-}

package/dist/scss/Global/GenericElements/Todo.scss

@@ -1,76 +0,0 @@
-@use '../../Foundation/Variables/ColorVars.scss' as colors;
-
-// ============
-// Todo
-// ============
-// Utility for highlighting items on the page as "Todo", visually, without affecting box sizing.
-// Can also override the text with a `data-todo` attribute
-//
-// e.g.
-//  Render a flashing border with a banner containing "Todo"
-//    <div class="Something u-todo"> … </div>
-//
-//  Render a flashing border with a banner containing the words "Not working"
-//    <div class="Something u-todo" data-todo="Not working"> … </div>
-//
-
-// ============
-// Config
-// ============
-$todo-color: colors.$test-pink;
-$todo-text-color: colors.$white;
-$todo-throb-speed: 1.2s;
-
-// ============
-// Animations
-// ============
-@keyframes border-throb {
-  100% {
-    box-shadow: 0 0 4px 3px transparentize($todo-color, 0.7);
-  }
-}
-@keyframes throb-fade {
-  100% {
-    opacity: 0.3;
-  }
-}
-
-// ============
-// Utility
-// ============
-// Flashing border
-.u-todo {
-  position: relative;
-  box-shadow: 0 0 4px 3px $todo-color;
-  border-collapse: separate; // Needed for IE
-  border-radius: 5px;
-  opacity: 0.8;
-
-  animation: border-throb $todo-throb-speed alternate linear infinite;
-
-  // Flashing banner
-  &::before {
-    content: 'Todo';
-
-    position: absolute;
-    padding: 4px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-
-    background-color: $todo-color;
-    color: $todo-text-color;
-    opacity: 0.8;
-
-    left: 0;
-    top: 0;
-
-    transform: translate(-50%, -50%) scale(1) rotate(-45deg);
-
-    animation: throb-fade $todo-throb-speed alternate linear infinite;
-  }
-
-  // Data attribute override
-  &[data-todo]::before {
-    content: attr(data-todo);
-  }
-}