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

package/dist/scss/Elements/Forms/FormComponents/FormSpacing.scss

@@ -1,32 +0,0 @@
-@use "../../../Foundation/Variables/MiscVars.scss" as misc;
-
-@mixin form-spacing(
-  // top margin for labels that aren't for checkboxes or radio
-  $my-label-top-margin,
-  // top offset for radio and checkbox inputs
-  $my-checkbox-input-top-offset,
-  // top margin for radio and checkboxes
-  $my-checkbox-margin-top,
-  // top margin for the container of radio or checkbox group
-  $my-input-wrapper-spacing,
-  // Error message top margin
-  $my-error-msg-top-margin,
-  // Top margin on error text that appears next to inputs
-  $my-lui-error-text-top-margin,
-  // mobile option for top margin for labels that aren't for checkboxes or radio
-  $my-label-top-margin-mob: $my-label-top-margin
-) {
-  // All the margin declarations
-  // ------------------------------------------------------------------------------------------------
-  .lui-input-group-wrapper {
-    margin-top: $my-input-wrapper-spacing;
-  }
-
-  p.lui-fieldset-support-txt {
-    margin-top: $my-error-msg-top-margin;
-  }
-
-  .lui-error-msg {
-    margin-top: $my-lui-error-text-top-margin;
-  }
-}

package/dist/scss/Elements/Forms/FormComponents/Inputs.scss

@@ -1,173 +0,0 @@
-@use "../../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../../Foundation/Variables/FormVars.scss" as forms;
-@use "../../../Foundation/Utilities/" as *;
-
-// All this is now legacy, deprecated styling.
-// In order to access these styles, use a wrapping div with the class LuiDeprecatedForms as close to the desired form/elements as possible
-// There will be global styles that these will override so make sure you're scoping the wrapper really close to avoid unexpected behaviour
-
-// START inputs, textareas and select base styling - excludes checkboxes and radios
-
-@mixin inputs(
-  $my-font-size,
-  $my-line-height,
-  $my-label-font-size,
-  $my-padding,
-  $my-lui-form-error-icon-size,
-  $my-lui-error-icon-pos,
-  $my-input-height
-) {
-  input:not([type='checkbox']):not([type='radio']),
-  textarea,
-  select {
-    @include fonts.font-regular;
-    font-size: $my-font-size;
-    color: colors.$input-text;
-    border: forms.$input-border-width solid colors.$silver;
-    border-radius: misc.$borderRadius;
-    line-height: $my-input-height;
-    width: 100%;
-    margin: 0;
-    transition: border 0.3s ease(in-out-expo);
-    box-sizing: border-box;
-    min-height: $my-input-height;
-
-    &::placeholder {
-      @include fonts.font-italic;
-      color: colors.$input-placeholder;
-    }
-  }
-
-  textarea {
-    @include fonts.font-regular; // for textarea input
-    line-height: fonts.$base-line-height;
-    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
-  }
-
-  select {
-    @include appearance(none);
-    @include fonts.font-regular;
-    cursor: pointer;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-repeat: no-repeat;
-    background-position: right 0.7em top 50%;
-    background-size: 1.5rem auto;
-    // use url-encode-decode.com to decode the below SVG for any changes
-    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%20%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%20fill%3D%22%23414042%22%20%2F%3E%20%0A%20%3C%2Fsvg%3E');
-  }
-
-  input:not([type='checkbox']):not([type='radio']),
-  select {
-    padding: 0 0.75rem;
-  }
-
-  .lui-input-error {
-    position: relative;
-
-    .lui-form-status-icon {
-      position: absolute;
-      top: $my-lui-error-icon-pos;
-      left: $my-lui-error-icon-pos;
-      color: white;
-      z-index: 1;
-      font-size: $my-lui-form-error-icon-size;
-    }
-    // Style all inputs but checkboxes and radio's. They are styled as a group
-    input:not([type='checkbox']):not([type='radio']),
-    textarea,
-    select {
-      border: forms.$input-border-width solid colors.$error;
-      border-left: $my-line-height solid colors.$error;
-      @include box-shadow;
-      &:focus {
-        outline: forms.$input-border-width solid colors.$error-focus;
-      }
-    }
-
-    p {
-      font-size: $my-label-font-size;
-    }
-  }
-
-  .lui-input-warning {
-    position: relative;
-
-    .lui-form-status-icon {
-      position: absolute;
-      top: $my-lui-error-icon-pos;
-      left: $my-lui-error-icon-pos;
-      color: white;
-      z-index: 100;
-      font-size: $my-lui-form-error-icon-size;
-    }
-    // Style all inputs but checkboxes and radio's. They are styled as a group
-    input:not([type='checkbox']):not([type='radio']),
-    textarea,
-    select {
-      border: forms.$input-border-width solid colors.$warning;
-      border-left: $my-line-height solid colors.$warning;
-      @include box-shadow;
-      &:focus {
-        outline: forms.$input-border-width solid colors.$warning-focus;
-      }
-    }
-
-    p {
-      font-size: $my-label-font-size;
-    }
-  }
-
-  label,
-  fieldset,
-  legend {
-    display: block;
-  }
-
-  label,
-  legend {
-    font-size: $my-label-font-size;
-    @include fonts.font-semibold;
-  }
-
-  fieldset {
-    border: none;
-    padding: 0;
-  }
-
-  .lui-required-input-icon {
-    display: inline-block;
-    width: 10px;
-    margin: 0 0 0 -10px;
-    color: colors.$error;
-    @include breakpoint(md) {
-      margin: 0 5px 0 -15px;
-    }
-  }
-
-  .lui-error-msg {
-    @include fonts.font-semibold;
-    color: colors.$error;
-  }
-
-  .lui-bearing-input-wrapper {
-    max-width: 750px;
-    position: relative;
-
-    .lui-bearing-display {
-      position: absolute;
-      right: 14px;
-      top: 0;
-      line-height: $my-line-height;
-      color: colors.$silver;
-    }
-  }
-}
-
-.LuiDeprecatedForms {
-  .LuiFormLabel-wrapper {
-    margin-bottom: 4px;
-  }
-}

package/dist/scss/Elements/Forms/FormComponents/RadiosCheckboxes.scss

@@ -1,123 +0,0 @@
-@use "../../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../../Foundation/Variables/FormVars.scss" as forms;
-@use "../../../Foundation/Utilities/" as *;
-
-// All this is now legacy, deprecated styling.
-// In order to access these styles, use a wrapping div with the class LuiDeprecatedForms as close to the desired form/elements as possible
-// There will be global styles that these will override so make sure you're scoping the wrapper really close to avoid unexpected behaviour
-
-.LuiDeprecatedForms {
-  .lui-checkbox-container,
-  .lui-radio-container {
-    display: flex;
-    position: relative;
-
-    input {
-      height: forms.$input-width;
-      // min width was added as the checkbox width was being influenced by the width of the container and a cropping effect occurred
-      min-width: forms.$input-width;
-      width: forms.$input-width;
-      @include appearance(none);
-      border: forms.$input-border-width-thick solid
-        forms.$checkbox-border-colour;
-      background-color: colors.$white;
-      position: relative;
-      margin: 0;
-      &:disabled {
-        border: forms.$input-border-width solid colors.$gray;
-        background-color: colors.$lily;
-        + label {
-          color: colors.$gray;
-        }
-      }
-    }
-
-    label {
-      @include fonts.font-light();
-      font-size: fonts.$base-font-size;
-    }
-  }
-
-  .lui-radio-container {
-    input {
-      border-radius: 50%;
-      &:checked {
-        &:before {
-          display: block;
-          position: absolute;
-          left: 50%;
-          content: '';
-          top: 50%;
-          transform: translate(-50%, -50%);
-          width: 14px;
-          height: 14px;
-          border-radius: 50%;
-          background: colors.$brand-primary;
-        }
-        &:disabled:before {
-          background: colors.$disabled-color-dark;
-        }
-      }
-    }
-  }
-
-  .lui-checkbox-container {
-    input[type='checkbox'] {
-      box-sizing: border-box;
-      border-radius: misc.$borderRadius;
-      position: relative;
-      &:checked {
-        border: forms.$input-border-width-thick solid colors.$brand-primary;
-        background-color: colors.$brand-primary;
-        &:before {
-          display: block;
-          position: absolute;
-          width: forms.$input-width -
-            (forms.$input-border-width-thick + forms.$input-border-width-thick);
-          height: forms.$input-width -
-            (forms.$input-border-width-thick + forms.$input-border-width-thick);
-          font-family: 'Material Icons Round';
-          left: 0;
-          top: -1px;
-          content: '\e876';
-          text-align: center;
-          color: #fff;
-          font-size: forms.$checkbox-icon-font-size;
-          line-height: forms.$checkbox-icon-line-height;
-          vertical-align: middle;
-        }
-        &:disabled {
-          background: colors.$disabled-color-dark;
-          border-color: colors.$disabled-color-dark;
-        }
-      }
-    }
-  }
-
-  .lui-input-error {
-    // Checkboxes and radio groups are styled differently in error states. The error styling wraps around the whole group
-    .lui-input-group-wrapper,
-    &.lui-button-group {
-      // Button groups are styled the same as checkbox/radio groups, except for the padding
-      position: relative;
-      border: forms.$input-border-width solid colors.$error;
-      border-left: 48px solid colors.$error;
-      padding: spacing.$unit-xxs spacing.$unit-xs spacing.$unit-xs;
-      margin-top: spacing.$unit-md;
-      @include box-shadow;
-      .lui-form-status-icon {
-        left: spacing.$base-unit * -5;
-        font-size: forms.$form-error-icon-size;
-      }
-    }
-    &.lui-button-group {
-      padding: 0;
-      .lui-button-wrapper button {
-        border: forms.$input-border-width solid colors.$error;
-      }
-    }
-  }
-}

package/dist/scss/Elements/Forms/forms.scss

@@ -1,51 +0,0 @@
-@use '../../Elements/Forms/FormComponents/Inputs.scss' as Inputs;
-@use '../../Elements/Forms/FormComponents/RadiosCheckboxes.scss' as RadiosCheckboxes;
-@use '../../Elements/Forms/FormComponents/FormSpacing.scss' as FormSpacing;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FormVars.scss" as forms;
-@use "../../Foundation/Utilities/" as *;
-
-// All this is now legacy, deprecated styling.
-// In order to access these styles, use a wrapping div with the class LuiDeprecatedForms as close to the desired form/elements as possible
-// There will be global styles that these will override so make sure you're scoping the wrapper really close to avoid unexpected behaviour
-.LuiDeprecatedForms {
-  // -------------------------------------------------------------------------------------------------------------------------------------
-  // ---- Lui Form has inputs/form elements with all the styling, but no margins set
-  // -------------------------------------------------------------------------------------------------------------------------------------
-
-  @include Inputs.inputs(
-    // The font size
-    fonts.$base-font-size,
-    // The line height
-    48px,
-    // The size of the font for the label
-    rem(14px),
-    // The padding on the input
-    spacing.$unit-xs,
-    // The size of the icon for the warning/error (may change if we have a compressed version of forms)
-    forms.$form-error-icon-size,
-    // The offset positioning of the error icon
-    spacing.$base-unit,
-    // the input height
-    48px
-  );
-
-  @include FormSpacing.form-spacing(
-    // top margin for labels that aren't for checkboxes or radio
-    forms.$label-spacing,
-    // top offset for radio and checkbox inputs
-    forms.$input-spacing,
-    // top margin for radio and checkboxes
-    forms.$input-spacing,
-    // top margin for the container of radio or checkbox group
-    forms.$input-spacing,
-    // Error message top margin
-    0.5rem,
-    // Top margin on error text that appears next to inputs
-    5px,
-    // mobile option for top margin for labels that aren't for checkboxes or radio
-    forms.$label-spacing
-  );
-}

package/dist/scss/Elements/Forms/plain-form-common.scss

@@ -1,4 +0,0 @@
-// Things that are common to all inputs
-
-.input {
-}

package/dist/scss/Elements/Icons/icons.scss

@@ -1,50 +0,0 @@
-@use "../../Foundation/Utilities" as *;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-
-.lui-icon {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-
-  &-lg {
-    width: 48px;
-    height: 48px;
-    font-size: 3rem;
-  }
-  &-maori-land {
-    //background: url(../assets/icons/lui-icon-maori-land.svg) no-repeat center;
-    background-size: cover;
-  }
-}
-
-//Target all i tags that have material icon class names
-//button icons are styled within the button scss
-// Icons within text links are handled in the type.scss file
-*:not[button] {
-  i[class^='material-icons'],
-  .lui-link-icon {
-    color: colors.$base-icon-color;
-    transition: color 0.3s ease(in-out-expo);
-
-    &:hover {
-      cursor: pointer;
-      color: colors.$brand-primary;
-    }
-    &:visited {
-      color: colors.$visited;
-    }
-  }
-
-  .lui-link-icon-disabled {
-    i {
-      color: colors.$disabled-color;
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.lui-inactive-icon {
-  color: colors.$gray;
-}

package/dist/scss/Elements/Tables/tables.scss

@@ -1,147 +0,0 @@
-@use "sass:math";
-
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-
-$icon-col-width: math.div(24, 16) * 1rem; // 24px
-
-td,
-th {
-  vertical-align: top;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: spacing.$unit-lg;
-
-  caption {
-    padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 0;
-    text-align: left;
-    font-size: rem(14px);
-
-    &.lui-table-caption-bottom {
-      caption-side: bottom;
-    }
-  }
-
-  thead {
-    border-top: 1px solid colors.$gray;
-    //automatically style the th in a thead row, but for headers in a column, use the class name on a cell
-    th,
-    .lui-table-head-cell {
-      color: colors.$brand-secondary;
-      @include fonts.font-semibold;
-    }
-  }
-
-  tbody {
-    border-top: 1px solid colors.$gray;
-    border-bottom: 1px solid colors.$gray;
-  }
-
-  tr {
-    border-bottom: 1px solid colors.$lily;
-    //adding white border to the top so there is a clear division between rows when background colour changes on selection
-    &:not(:first-child) {
-      border-top: 1px solid #fff;
-    }
-  }
-
-  .lui-table-row-selected {
-    background-color: colors.$polar !important;
-  }
-
-  th {
-    font-weight: 500;
-  }
-
-  th,
-  td {
-    padding: spacing.$unit-sm spacing.$unit-xs;
-    text-align: left;
-    border-spacing: 0;
-    border: none;
-    margin: 0;
-  }
-
-  // Modify form elements in the table
-  label {
-    display: inline-block;
-    margin: 0;
-
-    .LuiDeprecatedForms & {
-      @include fonts.font-light;
-      display: inline-block;
-    }
-
-    @include fonts.font-light;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  // set the top position of checkboxes for proper alignment in tables
-  .lui-checkbox-container {
-    margin-top: 0;
-
-    input {
-      top: 0;
-    }
-  }
-}
-
-.lui-table-column-headers {
-  th {
-    @include fonts.font-regular;
-  }
-}
-
-// Zebra styling for tables and the alike. Some have a greater scope, while others are very specific
-.lui {
-  // Style all the alternating rows in a table with a zebra
-  &-table-zebra {
-    tr {
-      &:nth-child(even) {
-        background-color: colors.$hint;
-      }
-    }
-  }
-
-  // A class to apply the zebra styling to a specific tag. Could be a <tr>, a <div>, a <li>. Use your App logic for alternating styling between rows as there is no CSS to do this
-  &-row-zebra {
-    background-color: colors.$hint;
-  }
-
-  // To be applied on a <tbody> and only has scope for the rows within that level, it won't style child rows, so it won't affect nested tables
-  &-table-first-level-row-zebra > tr:nth-child(even) {
-    background-color: colors.$hint;
-  }
-}
-
-//use the following to set all cells in the first col to a width
-.lui-table-col-icon-row1 {
-  td {
-    &:first-child {
-      width: $icon-col-width;
-    }
-  }
-}
-
-//use the following to set all cells in the last col of the table to a width
-.lui-table-col-icon-last-row {
-  td {
-    &:last-child {
-      width: $icon-col-width;
-      text-align: right;
-    }
-  }
-}
-
-//Use to restrict the size of a td cell, rather than affecting the whold column like the ones above. Not applying this to a single cell will affect the whole column unless you specify sizes for the other cells in that column.
-.lui-table-icon-cell {
-  width: $icon-col-width;
-}

package/dist/scss/Elements/Tooltips/tippy.scss

@@ -1,85 +0,0 @@
-@use "../../Foundation/Variables/MiscVars.scss" as misc;
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-@use "../../Foundation/Variables/FontVars.scss" as fonts;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-
-$border-width: 2px;
-$border-color: colors.$base-icon-color;
-
-.tippy-box[data-theme~='LUI'] {
-  border: solid $border-width $border-color;
-  border-radius: 5px;
-  background: colors.$white;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-  & > .tippy-content {
-    font-size: 16px;
-    @include fonts.font-regular;
-    color: #363636;
-    padding: 12px 20px;
-    background: colors.$white;
-  }
-
-  & > .tippy-arrow {
-    color: $border-color;
-    transform-style: preserve-3d;
-
-    &::before {
-      border-left: 12px solid transparent;
-      border-right: 12px solid transparent;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      transform: translateZ(-1px);
-      border-left: 12px solid transparent;
-      border-right: 12px solid transparent;
-    }
-  }
-
-  &[data-placement^='top'] > .tippy-arrow {
-    &::before {
-      border-top: 21px solid colors.$white;
-      bottom: -19px;
-    }
-    &::after {
-      border-top: 22px solid $border-color;
-      bottom: -23px;
-    }
-  }
-
-  &[data-placement^='bottom'] > .tippy-arrow {
-    &::before {
-      border-bottom: 21px solid colors.$white;
-      top: -19px;
-    }
-    &::after {
-      border-bottom: 22px solid $border-color;
-      top: -23px;
-    }
-  }
-
-  &[data-placement^='left'] > .tippy-arrow {
-    &::before {
-      border-left: 21px solid colors.$white;
-      left: 12px;
-    }
-    &::after {
-      border-left: 22px solid $border-color;
-      left: 16px;
-    }
-  }
-
-  &[data-placement^='right'] > .tippy-arrow {
-    &::before {
-      border-right: 21px solid colors.$white;
-      left: -30px;
-    }
-    &::after {
-      border-right: 22px solid $border-color;
-      left: -34px;
-    }
-  }
-}

package/dist/scss/Foundation/Utilities/Appearance.scss

@@ -1,12 +0,0 @@
-// ============
-// Appearance
-// ============
-
-//   🤔 don't think we need this - seems highly specific
-
-@mixin appearance($value) {
-  appearance: $value;
-  -webkit-appearance: $value;
-  -moz-appearance: $value;
-  -o-appearance: $value;
-}