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

package/dist/scss/Foundation/Utilities/AspectRatio.scss

@@ -1,25 +0,0 @@
-// ============
-// $ASPECT RATIO
-// ============
-// Allows you to set an aspect ratio on a div (contents need to be in a .content)
-
-@use "sass:math";
-
-@mixin aspect-ratio($width, $height) {
-  position: relative;
-
-  &::before {
-    display: block;
-    content: '';
-    width: 100%;
-    padding-top: math.div($height, $width) * 100%;
-  }
-
-  > .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}

package/dist/scss/Foundation/Utilities/Borders.scss

@@ -1,23 +0,0 @@
-// ============
-// $BORDER
-// ============
-
-// Border radius ============
-@mixin border-radius($borderRadius) {
-  border-radius: $borderRadius;
-  background-clip: padding-box; // stops bg color from leaking outside the border
-}
-
-// Border ============
-@mixin border(
-  $width: 1px,
-  $style: solid,
-  $color: $silver,
-  $borderRadius: null
-) {
-  @if ($borderRadius != null) {
-    @include border-radius($borderRadius);
-  }
-  border: $width $style $color;
-  background-clip: padding-box; // stops bg color from leaking outside the border
-}

package/dist/scss/Foundation/Utilities/BoxShadow.scss

@@ -1,7 +0,0 @@
-// ============
-// Box Shadow
-// ============
-
-@mixin box-shadow {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-}

package/dist/scss/Foundation/Utilities/Breakpoint.scss

@@ -1,29 +0,0 @@
-@use "../Variables/BreakpointVars.scss" as *;
-
-@mixin breakpoint($breakpoint) {
-  @if ($breakpoint == sm) {
-    @media screen and (min-width: #{$breakpoint1}) {
-      @content;
-    }
-  } @else if ($breakpoint == md) {
-    @media screen and (min-width: #{$breakpoint2}) {
-      @content;
-    }
-  } @else if ($breakpoint == lg) {
-    @media screen and (min-width: #{$breakpoint3}) {
-      @content;
-    }
-  } @else if ($breakpoint == xl) {
-    @media screen and (min-width: #{$breakpoint4}) {
-      @content;
-    }
-  } @else if ($breakpoint == xxl) {
-    @media screen and (min-width: #{$breakpoint5}) {
-      @content;
-    }
-  } @else {
-    @media screen and (min-width: #{$breakpoint}) {
-      @content;
-    }
-  }
-}

package/dist/scss/Foundation/Utilities/DLColumns.scss

@@ -1,52 +0,0 @@
-// ============
-// $DEFINITION LIST COLUMNS
-// ============
-
-// USAGE
-// dl.my-definition-list {
-//   @include dl--columns(25%, 25%, $v*2, $v);
-// }
-
-// NOTE
-// 1. Remove browser default margins
-// 2. Excludes top and bottom item spacing by default
-
-@mixin dl--columns(
-  $dt-width,
-  $dt-width-desktop,
-  $dl-gutter-width: $v * 2,
-  $dl-row-height: $v
-) {
-  margin-top: 0; // 1
-  margin-bottom: 0; // 1
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-
-  dt {
-    width: $dt-width;
-    @media #{$desktop} {
-      width: $dt-width-desktop;
-    }
-  }
-
-  dd {
-    margin-left: 0;
-    padding-left: $dl-gutter-width;
-    width: calc(100% - #{$dt-width});
-    @media #{$desktop} {
-      width: calc(100% - #{$dt-width-desktop});
-    }
-  }
-
-  dt,
-  dd {
-    // 2
-    &:not(:first-of-type) {
-      padding-top: #{$dl-row-height * 0.5};
-    }
-    &:not(:last-of-type) {
-      padding-bottom: #{$dl-row-height * 0.5};
-    }
-  }
-}

package/dist/scss/Foundation/Utilities/Ease.scss

@@ -1,41 +0,0 @@
-@use "sass:map";
-// ==========================================
-// $EASING FUNCTIONS
-// ==========================================
-// see: https://github.com/matthewlein/Ceaser/blob/master/developer/ceaser-easings.scss
-// usage: animation-timing-function: ease(in-out-expo);
-// ==========================================
-$ease: (
-  in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19),
-  out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1),
-  in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1),
-  in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335),
-  out-circ: cubic-bezier(0.075, 0.82, 0.165, 1),
-  in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86),
-  in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035),
-  out-expo: cubic-bezier(0.19, 1, 0.22, 1),
-  in-out-expo: cubic-bezier(1, 0, 0, 1),
-  in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53),
-  out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94),
-  in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955),
-  in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22),
-  out-quart: cubic-bezier(0.165, 0.84, 0.44, 1),
-  in-out-quart: cubic-bezier(0.77, 0, 0.175, 1),
-  in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06),
-  out-quint: cubic-bezier(0.23, 1, 0.32, 1),
-  in-out-quint: cubic-bezier(0.86, 0, 0.07, 1),
-  in-sine: cubic-bezier(0.47, 0, 0.745, 0.715),
-  out-sine: cubic-bezier(0.39, 0.575, 0.565, 1),
-  in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95),
-  in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045),
-  out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275),
-  in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55),
-);
-
-@function ease($key) {
-  @if map.has-key($ease, $key) {
-    @return map.get($ease, $key);
-  }
-  @warn "Unkown easing function '#{$key}' in $ease.";
-  @return null;
-}

package/dist/scss/Foundation/Utilities/FitMedia.scss

@@ -1,53 +0,0 @@
-// ============
-// $FIT MEDIA CONTENT / MAINTAIN ASPECT RATIO
-// ============
-
-// e.g.
-// <div class="Column">
-//   <div class="ShowPanel">
-//     <img src="http://lorempixel.com/400/300/nature/" alt="..." />
-//   </div>
-//   <div class="ShowPanel">
-//     <iframe width="560" height="315" src="..."></iframe>
-//   </div>
-// </div>
-//
-// .ShowPanel {
-//   @include fit-media(16, 9);
-// }
-
-@use "sass:math";
-
-@mixin fit-media($width, $height) {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 0;
-  padding-top: math.div($height, $width) * 100%;
-
-  > img,
-  > iframe,
-  > object,
-  > video {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  > img {
-    // don't stretch the image
-    min-width: 100%;
-    min-height: 100%;
-    // Set up proportionate scaling
-    width: 100%;
-    height: auto;
-  }
-
-  > iframe,
-  > object,
-  > video {
-    width: 100%;
-    height: 100%;
-  }
-}

package/dist/scss/Foundation/Utilities/FluidType.scss

@@ -1,85 +0,0 @@
-// ==========================================
-// $Fluid Type
-// ==========================================
-// see: https://css-tricks.com/books/fundamental-css-tactics/scale-typography-screen-size/
-// The idea is that you set the bounds/breakpoints of when the values scale
-//
-// Caveat is min-breakpoint needs to at least be 1px so if it's not compiling then that's your problem
-// You can put in breakpoints that match the project with the following (set in Breakpoints.scss)
-// $breakpoint-sm
-// $breakpoint-md
-// $breakpoint-lg
-// $breakpoint-xl
-// $breakpoint-xxl
-//
-// ==========================================
-
-@use "sass:math";
-
-@function strip-unit($value) {
-  @return math.div($value, $value * 0 + 1);
-}
-
-@mixin fluidType--size(
-  $min-size,
-  $max-size,
-  $min-breakpoint: 1px,
-  $max-breakpoint
-) {
-  $u1: unit($min-breakpoint);
-  $u2: unit($max-breakpoint);
-  $u3: unit($min-size);
-  $u4: unit($max-size);
-
-  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
-    & {
-      font-size: $min-size;
-      @media screen and (min-width: $min-breakpoint) {
-        font-size: calc(
-          #{$min-size} + #{strip-unit($max-size - $min-size)} *
-            (
-              (100vw - #{$min-breakpoint}) / #{strip-unit(
-                  $max-breakpoint - $min-breakpoint
-                )}
-            )
-        );
-      }
-
-      @media screen and (min-width: $max-breakpoint) {
-        font-size: $max-size;
-      }
-    }
-  }
-}
-
-@mixin fluidType--lineHeight(
-  $min-size: 1px,
-  $max-size,
-  $min-breakpoint: 1px,
-  $max-breakpoint
-) {
-  $u1: unit($min-size);
-  $u2: unit($max-size);
-  $u3: unit($min-breakpoint);
-  $u4: unit($max-breakpoint);
-
-  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
-    & {
-      line-height: $min-size;
-      @media screen and (min-width: $min-breakpoint) {
-        line-height: calc(
-          #{$min-size} + #{strip-unit($max-size - $min-size)} *
-            (
-              (100vw - #{$min-breakpoint}) / #{strip-unit(
-                  $max-breakpoint - $min-breakpoint
-                )}
-            )
-        );
-      }
-
-      @media screen and (min-width: $max-breakpoint) {
-        line-height: $max-size;
-      }
-    }
-  }
-}

package/dist/scss/Foundation/Utilities/Hover.scss

@@ -1,23 +0,0 @@
-// ============
-// $HOVER ACTIVE FOCUS
-// ============
-//
-// Can take an optional class name
-// @USAGE
-// @include hover('is-active') {
-// 	color: red;
-// 	text-decoration: underline;
-// }
-
-@mixin hover($class: '') {
-  &:focus,
-  &:hover,
-  &:active {
-    @content;
-  }
-  @if $class != '' {
-    &.#{$class} {
-      @content;
-    }
-  }
-}

package/dist/scss/Foundation/Utilities/LuiStandardHeaderBackground.scss

@@ -1,32 +0,0 @@
-@use "../../Foundation/Variables/ColorVars.scss" as colors;
-
-// ============
-// Lui Standard Header Background
-// ============
-
-//   🤔 don't need this as a Util - highly specific, should be with header
-
-@mixin lui-standard-header-background($swish-height) {
-  background: colors.$linz-linear-gradient-blue;
-  color: #fff;
-
-  &:after {
-    width: 100%;
-    content: '';
-    display: block;
-    height: $swish-height;
-    overflow: hidden;
-    background: colors.$linz-linear-gradient-teal;
-  }
-
-  &.lui-header-transparent {
-    background: transparent;
-    color: colors.$sea;
-    &:after {
-      content: none;
-    }
-    .lui-header-menu-icon {
-      color: colors.$surfie;
-    }
-  }
-}

package/dist/scss/Foundation/Utilities/Placeholder.scss

@@ -1,43 +0,0 @@
-// Usage
-//
-// .Input {
-//   input {
-//     // long way
-//     @include placeholder {
-//       color: transparent;
-//       // whatever else you want here
-//     }
-//     // Shorthand for just colour
-//     @include placeholder(transparent);
-//   }
-// }
-
-@mixin placeholder($color: null) {
-  &::-webkit-input-placeholder {
-    @if $color {
-      color: $color;
-    }
-    @content;
-  }
-
-  &::-moz-placeholder {
-    @if $color {
-      color: $color;
-    }
-    @content;
-  }
-
-  &:-moz-placeholder {
-    @if $color {
-      color: $color;
-    }
-    @content;
-  }
-
-  &:-ms-input-placeholder {
-    @if $color {
-      color: $color;
-    }
-    @content;
-  }
-}

package/dist/scss/Foundation/Utilities/REM.scss

@@ -1,13 +0,0 @@
-@use "sass:math";
-
-@use '../Variables/FontVars.scss' as *;
-// ==========================================
-// Convert PX units into REMs
-// ==========================================
-// usage: rem(12px)
-// output: 0.75rem
-// ==========================================
-
-@function rem($size) {
-  @return math.div($size, $base-font-size) * 1rem;
-}

package/dist/scss/Foundation/Utilities/ScreenReadersOnly.scss

@@ -1,15 +0,0 @@
-// This may be the case where and actual class is worthwhile
-
-@mixin ScreenReadersOnly {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(0 0 0 0) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  border: 0 !important;
-  white-space: nowrap !important;
-}

package/dist/scss/Foundation/Utilities/_index.scss

@@ -1,14 +0,0 @@
-@forward "Appearance";
-@forward "AspectRatio";
-@forward "Borders";
-@forward "BoxShadow";
-@forward "Breakpoint";
-@forward "DLColumns";
-@forward 'Ease';
-@forward "FitMedia";
-@forward 'FluidType';
-@forward 'Hover';
-@forward 'LuiStandardHeaderBackground';
-@forward "Placeholder";
-@forward 'REM';
-@forward 'ScreenReadersOnly';

package/dist/scss/Foundation/Variables/BreakpointVars.scss

@@ -1,19 +0,0 @@
-/////////////////////////////////////
-// Breakpoints
-/////////////////////////////////////
-
-// This is based around 'mobile-first' development and design. The idea is to turn off styles as you increase in breakpoint size.
-
-$breakpoint1: 480px;
-$breakpoint2: 768px;
-$breakpoint3: 1024px;
-$breakpoint4: 1280px;
-$breakpoint5: 1600px;
-
-// Following is for mixins such as Fluid Type to use
-
-$breakpoint-sm: $breakpoint1;
-$breakpoint-md: $breakpoint2;
-$breakpoint-lg: $breakpoint3;
-$breakpoint-xl: $breakpoint4;
-$breakpoint-xxl: $breakpoint5;

package/dist/scss/Foundation/Variables/ColorVars.scss

@@ -1,7 +0,0 @@
-
-// @use "Colors";
-@forward "LuiColors";
-@forward "ExportCSS";
-
-// TODO: remove to avoid :export making it into CSS, here because components expect this to be here
-@forward "ExportColors";

package/dist/scss/Foundation/Variables/FontVars.scss

@@ -1,66 +0,0 @@
-///////////////////////////////////////////
-// Base definition of our font variables //
-///////////////////////////////////////////
-
-$base-line-height: 1.5;
-$base-font-size: 16px;
-
-//Adjust these to your font – don't need all of them if you don't need
-$base-font--combined: 'Open Sans', system-ui, sans-serif;
-
-// =====================
-// Font Mixins
-// =====================
-// These mixins are just to bundle up code snippets – instead of extending, you can use these to add
-// common styles without having a relationship created. Also, you can use different Mixins at different breakpoints.
-//
-// Feel free to adjust/rename as required. We will use these to setup our generic type styles in the next section.
-
-@mixin font-light {
-  font-family: $base-font--combined;
-  font-style: normal;
-  font-weight: 300;
-}
-
-@mixin font-regular {
-  font-family: $base-font--combined;
-  font-style: normal;
-  font-weight: normal;
-}
-
-@mixin font-italic {
-  font-family: $base-font--combined;
-  font-style: italic;
-  font-weight: normal;
-}
-
-@mixin font-semibold {
-  font-family: $base-font--combined;
-  font-style: normal;
-  font-weight: 600;
-}
-
-@mixin font-bold {
-  font-family: $base-font--combined;
-  font-style: normal;
-  font-weight: 700;
-}
-
-@mixin font-header {
-  font-family: $base-font--combined;
-  font-style: normal;
-  font-weight: 300;
-}
-
-// =====================
-// Margin Mixin
-// =====================
-
-// This is purely for creating vertical rhythm on typography if you want to use it
-$base: 16 * ($base-font-size * 0.01);
-$leading: $base * $base-line-height;
-
-@mixin type-margin-bottom($number) {
-  margin-bottom: #{$number * $leading + 'px'};
-  margin-bottom: #{$number * $line-height + 'rem'};
-}

package/dist/scss/Foundation/Variables/FormVars.scss

@@ -1,44 +0,0 @@
-@use "sass:math";
-
-@use './SpacingVars.scss' as spacing;
-@use './ColorVars.scss' as colors;
-@use './FontVars.scss' as fonts;
-@use '../Utilities/REM.scss' as rem;
-
-$label-spacing: spacing.$unit-md; // 24px
-$input-spacing: spacing.$unit-xs; // 8px
-
-$label-font-size: rem.rem(14px);
-$label-line-height: spacing.$unit-md;
-
-@mixin formLabel {
-  @include fonts.font-semibold();
-  margin-bottom: $input-spacing;
-  font-size: $label-font-size;
-  line-height: $label-line-height;
-  color: colors.$charcoal;
-}
-
-@mixin formPlaceholder {
-  &::placeholder {
-    font-weight: normal;
-    font-style: italic;
-    color: colors.$input-placeholder;
-    opacity: 1; // Because firefox is cool
-
-    .isDisabled & {
-      color: colors.$input-placeholder-when-disabled;
-    }
-  }
-}
-
-$input-width: spacing.$unit-md;
-$input-border-width: 0.06rem; // 1px
-$input-border-width-thick: 0.13rem; // 2px
-
-$checkbox-icon-font-size: 1.13rem; // 18px
-$checkbox-icon-line-height: spacing.$unit-md; // 24px
-$checkbox-label-spacing: $input-spacing;
-$checkbox-border-colour: colors.$sea;
-
-$form-error-icon-size: spacing.$unit-lg;

package/dist/scss/Foundation/Variables/MiscVars.scss

@@ -1,20 +0,0 @@
-@use './ColorVars.scss' as colors;
-
-///////////////////////////////////////
-// Misc Variables
-///////////////////////////////////////
-
-// This file is for holding global variables that don't neatly fall under a specific category
-
-// ============
-// Z-indices
-// ============
-$z-0: 0;
-$z-10: 10;
-$z-20: 20;
-$z-30: 30;
-$z-40: 40;
-$z-50: 50;
-
-// Border radius
-$borderRadius: 3px;

package/dist/scss/Foundation/Variables/SpacingVars.scss

@@ -1,34 +0,0 @@
-// These are for defining  global spacing units – might not be neccessary but helps with consistency – talk to the designer to see if these will help, and whether useful in your use case
-
-@use "sass:math";
-
-// Grid variables and margins
-
-$base-unit: 0.5rem; // changes base unit to 8px
-
-$unit-xxs: $base-unit * 0.5; // 4px
-$unit-xs: $base-unit; // 8px
-$unit-sm: $base-unit * 1.5; // 12px
-$unit-md: $base-unit * 3; // 24px
-$unit-lg: $base-unit * 4; // 32px
-$unit-xl: $base-unit * 6; // 48px
-$unit-xxl: $base-unit * 10; // 80px
-
-/**
-  @deprecated
- */
-$px: 24px;
-/**
-  @deprecated
- */
-$v: $px;
-/**
-  @deprecated
- */
-$h: $v;
-
-// $unit-sm: // 16px -> 12px
-// $unit-md: // 32px ->24px
-// $unit-lg: // 48px -> 32px
-// $unit-xl:  // 80px -> 48px
-// $unit-xxl: // 160px -> 80px