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

package/dist/scss/Global/helpers.scss

@@ -1,862 +0,0 @@
-@use "../Foundation/Variables/SpacingVars.scss" as spacing;
-@use "../Foundation/Variables/BreakpointVars.scss" as breakpoints;
-@use "../Foundation/Utilities" as *;
-
-// ! ************************************************************ ! //
-// !         TODO: This whole file should be removed              ! //
-// ! ************************************************************ ! //
-
-.lui-box-shadow {
-  @include box-shadow;
-}
-
-$lui-width-xxs: 44px; // icon size
-$lui-width-xs: 122px;
-$lui-width-sm: 220px;
-$lui-width-md: 360px;
-$lui-width-lg: 480px;
-$lui-width-xl: 620px;
-
-// reserved for helper classes only
-
-.lui-full-width {
-  width: 100%;
-}
-
-.lui-half-width {
-  width: 50%;
-}
-
-.lui-width-xxs {
-  width: $lui-width-xxs;
-}
-
-.lui-width-xs {
-  width: $lui-width-xs;
-}
-
-.lui-width-sm {
-  width: $lui-width-sm;
-}
-
-.lui-width-md {
-  width: $lui-width-md;
-}
-
-.lui-width-lg {
-  width: $lui-width-lg;
-}
-
-.lui-width-xl {
-  width: $lui-width-xl;
-}
-
-.lui-max-width {
-  max-width: 100% !important;
-}
-
-.lui-remove-border-bottom {
-  border-bottom: none !important;
-}
-
-// accessiblity -----------------------------------------
-
-.LuiScreenReadersOnly {
-  @include ScreenReadersOnly;
-}
-
-// Alignment -----------------------------------------
-
-.lui-align-right {
-  text-align: right;
-}
-
-.lui-align-top {
-  vertical-align: top;
-}
-
-.lui-align-bottom {
-  vertical-align: bottom;
-}
-
-.lui-align-baseline {
-  vertical-align: baseline;
-}
-
-.lui-align-baseline {
-  vertical-align: middle;
-}
-
-//add padding to the bottom of the wrapper element so the type doesn't sit on the bottom of the container
-.lui-content-buffer {
-  padding-bottom: spacing.$unit-xl;
-}
-
-.lui-content-buffer-lg {
-  padding-bottom: spacing.$unit-lg;
-}
-
-.lui-content-buffer-xl {
-  padding-bottom: spacing.$unit-xl;
-}
-
-// Remove margins
-.lui-remove-margin-all {
-  margin: 0 !important;
-}
-
-.lui-remove-margin-x {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.lui-remove-margin-y {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-// Remove padding
-.lui-remove-padding-all {
-  padding: 0 !important;
-}
-
-.lui-remove-padding-x {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.lui-remove-padding-y {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-// exploration into defining dividers (border top) on various screen sizes so they can be set on the Divs in the required sequence.
-// use the selector: div[class*="row-divider"] to give it a colour
-// Use .lui-row-divider class to apply a divider at all screen sizes
-// @mixin lui-row-divider {
-//   border-top: 1px solid;
-//   margin-top: spacing.$unit-md;
-//   padding-top: spacing.$unit-md;
-// }
-
-// .lui-row-divider {
-//   @include lui-row-divider;
-//   &-xs {
-//     @media only screen and (max-width: $screen-xs) {
-//       @include lui-row-divider;
-//     }
-//   }
-//   &-sm {
-//     @media only screen and (min-width: $screen-xs) and (max-width: $screen-sm) {
-//       @include lui-row-divider;
-//     }
-//   }
-//   &-md {
-//     @media only screen and (min-width: $screen-sm) and (max-width: $screen-md) {
-//       @include lui-row-divider;
-//     }
-//   }
-//   &-lg {
-//     @media only screen and (min-width: $screen-md) and (max-width: $screen-lg) {
-//       @include lui-row-divider;
-//     }
-//   }
-//   &-xl {
-//     @media only screen and (min-width: $screen-lg) and (max-width: $screen-xl) {
-//       @include lui-row-divider;
-//     }
-//   }
-// }
-
-// hide elements depending on screen size
-
-$screen-xs: breakpoints.$breakpoint1;
-
-$screen-sm-min: $screen-xs + 0.1px;
-$screen-sm: breakpoints.$breakpoint2; // 768px
-
-$screen-md-min: $screen-sm + 0.1px;
-$screen-md: breakpoints.$breakpoint3; // 1024px
-
-$screen-lg-min: $screen-md + 0.1px;
-$screen-lg: breakpoints.$breakpoint4; // 1200px
-
-$screen-xl-min: $screen-lg + 0.1px;
-$screen-xl: breakpoints.$breakpoint5;
-
-.lui-hide-xs {
-  @media only screen and (max-width: $screen-xs) {
-    display: none !important;
-  }
-}
-
-.lui-hide-sm {
-  @media only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm) {
-    display: none !important;
-  }
-}
-
-.lui-hide-md {
-  @media only screen and (min-width: $screen-md-min) and (max-width: $screen-md) {
-    display: none !important;
-  }
-}
-
-.lui-hide-lg {
-  @media only screen and (min-width: $screen-lg-min) and (max-width: $screen-lg) {
-    display: none !important;
-  }
-}
-
-.lui-hide-xl {
-  @media only screen and (min-width: $screen-xl-min) {
-    display: none !important;
-  }
-}
-
-.lui-hide {
-  display: none;
-}
-
-// show elements depending on screen size
-
-.lui-show-xs {
-  @media only screen and (max-width: $screen-xs) {
-    display: block !important;
-  }
-}
-
-.lui-show-sm {
-  @media only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm) {
-    display: block !important;
-  }
-}
-
-.lui-show-md {
-  @media only screen and (min-width: $screen-md-min) and (max-width: $screen-md) {
-    display: block !important;
-  }
-}
-
-.lui-show-lg {
-  @media only screen and (min-width: $screen-lg-min) and (max-width: $screen-lg) {
-    display: block !important;
-  }
-}
-
-.lui-show-xl {
-  @media only screen and (min-width: $screen-xl-min) {
-    display: block !important;
-  }
-}
-
-.lui-show-block {
-  display: block;
-}
-
-.lui-show-inline-block {
-  display: inline-block;
-}
-
-// margin helpers ------------------------------------
-
-@mixin margin-builder($selector, $declaration, $value) {
-  #{$selector} {
-    #{$declaration}: $value !important;
-  }
-}
-
-@mixin multi-margin-builder(
-  $selector,
-  $declaration,
-  $value,
-  $declarationTwo,
-  $valueTwo
-) {
-  #{$selector} {
-    #{$declaration}: $value !important;
-    #{$declarationTwo}: $valueTwo !important;
-  }
-}
-
-//vertical margins
-@include multi-margin-builder(
-                '.lui-margin-y-xxs',
-                'margin-top',
-                spacing.$unit-xxs,
-                'margin-bottom',
-                spacing.$unit-xxs
-);
-@include multi-margin-builder(
-                '.lui-margin-y-xs',
-                'margin-top',
-                spacing.$unit-xs,
-                'margin-bottom',
-                spacing.$unit-xs
-);
-@include multi-margin-builder(
-                '.lui-margin-y-sm',
-                'margin-top',
-                spacing.$unit-sm,
-                'margin-bottom',
-                spacing.$unit-sm
-);
-@include multi-margin-builder(
-                '.lui-margin-y-md',
-                'margin-top',
-                spacing.$unit-md,
-                'margin-bottom',
-                spacing.$unit-md
-);
-@include multi-margin-builder(
-                '.lui-margin-y-lg',
-                'margin-top',
-                spacing.$unit-lg,
-                'margin-bottom',
-                spacing.$unit-lg
-);
-@include multi-margin-builder(
-                '.lui-margin-y-xl',
-                'margin-top',
-                spacing.$unit-xl,
-                'margin-bottom',
-                spacing.$unit-xl
-);
-@include multi-margin-builder(
-                '.lui-margin-y-xxl',
-                'margin-top',
-                spacing.$unit-xxl,
-                'margin-bottom',
-                spacing.$unit-xxl
-);
-
-//horizontal margins
-@include multi-margin-builder(
-                '.lui-margin-x-xxs',
-                'margin-left',
-                spacing.$unit-xxs,
-                'margin-right',
-                spacing.$unit-xxs
-);
-@include multi-margin-builder(
-                '.lui-margin-x-xs',
-                'margin-left',
-                spacing.$unit-xs,
-                'margin-right',
-                spacing.$unit-xs
-);
-@include multi-margin-builder(
-                '.lui-margin-x-sm',
-                'margin-left',
-                spacing.$unit-sm,
-                'margin-right',
-                spacing.$unit-sm
-);
-@include multi-margin-builder(
-                '.lui-margin-x-md',
-                'margin-left',
-                spacing.$unit-md,
-                'margin-right',
-                spacing.$unit-md
-);
-@include multi-margin-builder(
-                '.lui-margin-x-lg',
-                'margin-left',
-                spacing.$unit-lg,
-                'margin-right',
-                spacing.$unit-lg
-);
-@include multi-margin-builder(
-                '.lui-margin-x-xl',
-                'margin-left',
-                spacing.$unit-xl,
-                'margin-right',
-                spacing.$unit-xl
-);
-@include multi-margin-builder(
-                '.lui-margin-x-xxl',
-                'margin-left',
-                spacing.$unit-xxl,
-                'margin-right',
-                spacing.$unit-xxl
-);
-
-//top margin
-@include margin-builder('.lui-margin-top-xxs', 'margin-top', spacing.$unit-xxs);
-
-@include margin-builder('.lui-margin-top-xs', 'margin-top', spacing.$unit-xs);
-
-@include margin-builder('.lui-margin-top-sm', 'margin-top', spacing.$unit-sm);
-
-@include margin-builder('.lui-margin-top-md', 'margin-top', spacing.$unit-md);
-
-@include margin-builder('.lui-margin-top-lg', 'margin-top', spacing.$unit-lg);
-
-@include margin-builder('.lui-margin-top-xl', 'margin-top', spacing.$unit-xl);
-
-@include margin-builder('.lui-margin-top-xxl', 'margin-top', spacing.$unit-xxl);
-
-//bottom margin
-
-@include margin-builder(
-                '.lui-margin-bottom-xxs',
-                'margin-bottom',
-                spacing.$unit-xxs
-);
-
-@include margin-builder(
-                '.lui-margin-bottom-xs',
-                'margin-bottom',
-                spacing.$unit-xs
-);
-
-@include margin-builder(
-                '.lui-margin-bottom-sm',
-                'margin-bottom',
-                spacing.$unit-sm
-);
-
-@include margin-builder(
-                '.lui-margin-bottom-md',
-                'margin-bottom',
-                spacing.$unit-md
-);
-
-@include margin-builder(
-                '.lui-margin-bottom-lg',
-                'margin-bottom',
-                spacing.$unit-lg
-);
-
-@include margin-builder(
-                '.lui-margin-bottom-xl',
-                'margin-bottom',
-                spacing.$unit-xl
-);
-
-@include margin-builder(
-                '.lui-margin-bottom-xxl',
-                'margin-bottom',
-                spacing.$unit-xxl
-);
-
-//left margin
-
-@include margin-builder(
-                '.lui-margin-left-xxs',
-                'margin-left',
-                spacing.$unit-xxs
-);
-
-@include margin-builder('.lui-margin-left-xs', 'margin-left', spacing.$unit-xs);
-
-@include margin-builder('.lui-margin-left-sm', 'margin-left', spacing.$unit-sm);
-
-@include margin-builder('.lui-margin-left-md', 'margin-left', spacing.$unit-md);
-
-@include margin-builder('.lui-margin-left-lg', 'margin-left', spacing.$unit-lg);
-
-@include margin-builder('.lui-margin-left-xl', 'margin-left', spacing.$unit-xl);
-
-@include margin-builder(
-                '.lui-margin-left-xxl',
-                'margin-left',
-                spacing.$unit-xxl
-);
-
-//right margin
-
-@include margin-builder(
-                '.lui-margin-right-xxs',
-                'margin-right',
-                spacing.$unit-xxs
-);
-
-@include margin-builder(
-                '.lui-margin-right-xs',
-                'margin-right',
-                spacing.$unit-xs
-);
-
-@include margin-builder(
-                '.lui-margin-right-sm',
-                'margin-right',
-                spacing.$unit-sm
-);
-
-@include margin-builder(
-                '.lui-margin-right-md',
-                'margin-right',
-                spacing.$unit-md
-);
-
-@include margin-builder(
-                '.lui-margin-right-lg',
-                'margin-right',
-                spacing.$unit-lg
-);
-
-@include margin-builder(
-                '.lui-margin-right-xl',
-                'margin-right',
-                spacing.$unit-xl
-);
-
-@include margin-builder(
-                '.lui-margin-right-xxl',
-                'margin-right',
-                spacing.$unit-xxl
-);
-
-// Remove margins
-.lui-remove-margin-all {
-  margin: 0 !important;
-}
-
-.lui-remove-margin-x {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.lui-remove-margin-y {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-// ----------------- PADDING HELPERS ------------------------------------
-//padding all round
-
-@include margin-builder('.lui-padding-xxs', 'padding', spacing.$unit-xxs);
-
-@include margin-builder('.lui-padding-xs', 'padding', spacing.$unit-xs);
-
-@include margin-builder('.lui-padding-sm', 'padding', spacing.$unit-sm);
-
-@include margin-builder('.lui-padding-md', 'padding', spacing.$unit-md);
-
-@include margin-builder('.lui-padding-lg', 'padding', spacing.$unit-lg);
-
-@include margin-builder('.lui-padding-xl', 'padding', spacing.$unit-xl);
-
-@include margin-builder('.lui-padding-xxl', 'padding', spacing.$unit-xxl);
-
-//vertical padding
-@include multi-margin-builder(
-                '.lui-padding-y-xxs',
-                'padding-top',
-                spacing.$unit-xxs,
-                'padding-bottom',
-                spacing.$unit-xxs
-);
-@include multi-margin-builder(
-                '.lui-padding-y-xs',
-                'padding-top',
-                spacing.$unit-xs,
-                'padding-bottom',
-                spacing.$unit-xs
-);
-@include multi-margin-builder(
-                '.lui-padding-y-sm',
-                'padding-top',
-                spacing.$unit-sm,
-                'padding-bottom',
-                spacing.$unit-sm
-);
-@include multi-margin-builder(
-                '.lui-padding-y-md',
-                'padding-top',
-                spacing.$unit-md,
-                'padding-bottom',
-                spacing.$unit-md
-);
-@include multi-margin-builder(
-                '.lui-padding-y-lg',
-                'padding-top',
-                spacing.$unit-lg,
-                'padding-bottom',
-                spacing.$unit-lg
-);
-@include multi-margin-builder(
-                '.lui-padding-y-xl',
-                'padding-top',
-                spacing.$unit-xl,
-                'padding-bottom',
-                spacing.$unit-xl
-);
-@include multi-margin-builder(
-                '.lui-padding-y-xxl',
-                'padding-top',
-                spacing.$unit-xxl,
-                'padding-bottom',
-                spacing.$unit-xxl
-);
-
-//horizontal padding
-@include multi-margin-builder(
-                '.lui-padding-x-xxs',
-                'padding-left',
-                spacing.$unit-xxs,
-                'padding-right',
-                spacing.$unit-xxs
-);
-@include multi-margin-builder(
-                '.lui-padding-x-xs',
-                'padding-left',
-                spacing.$unit-xs,
-                'padding-right',
-                spacing.$unit-xs
-);
-@include multi-margin-builder(
-                '.lui-padding-x-sm',
-                'padding-left',
-                spacing.$unit-sm,
-                'padding-right',
-                spacing.$unit-sm
-);
-@include multi-margin-builder(
-                '.lui-padding-x-md',
-                'padding-left',
-                spacing.$unit-md,
-                'padding-right',
-                spacing.$unit-md
-);
-@include multi-margin-builder(
-                '.lui-padding-x-lg',
-                'padding-left',
-                spacing.$unit-lg,
-                'padding-right',
-                spacing.$unit-lg
-);
-@include multi-margin-builder(
-                '.lui-padding-x-xl',
-                'padding-left',
-                spacing.$unit-xl,
-                'padding-right',
-                spacing.$unit-xl
-);
-@include multi-margin-builder(
-                '.lui-padding-x-xxl',
-                'padding-left',
-                spacing.$unit-xxl,
-                'padding-right',
-                spacing.$unit-xxl
-);
-
-//top padding
-@include margin-builder(
-                '.lui-padding-top-xxs',
-                'padding-top',
-                spacing.$unit-xxs
-);
-
-@include margin-builder('.lui-padding-top-xs', 'padding-top', spacing.$unit-xs);
-
-@include margin-builder('.lui-padding-top-sm', 'padding-top', spacing.$unit-sm);
-
-@include margin-builder('.lui-padding-top-md', 'padding-top', spacing.$unit-md);
-
-@include margin-builder('.lui-padding-top-lg', 'padding-top', spacing.$unit-lg);
-
-@include margin-builder('.lui-padding-top-xl', 'padding-top', spacing.$unit-xl);
-
-@include margin-builder(
-                '.lui-padding-top-xxl',
-                'padding-top',
-                spacing.$unit-xxl
-);
-
-//bottom padding
-
-@include margin-builder(
-                '.lui-padding-bottom-xxs',
-                'padding-bottom',
-                spacing.$unit-xxs
-);
-
-@include margin-builder(
-                '.lui-padding-bottom-xs',
-                'padding-bottom',
-                spacing.$unit-xs
-);
-
-@include margin-builder(
-                '.lui-padding-bottom-sm',
-                'padding-bottom',
-                spacing.$unit-sm
-);
-
-@include margin-builder(
-                '.lui-padding-bottom-md',
-                'padding-bottom',
-                spacing.$unit-md
-);
-
-@include margin-builder(
-                '.lui-padding-bottom-lg',
-                'padding-bottom',
-                spacing.$unit-lg
-);
-
-@include margin-builder(
-                '.lui-padding-bottom-xl',
-                'padding-bottom',
-                spacing.$unit-xl
-);
-
-@include margin-builder(
-                '.lui-padding-bottom-xxl',
-                'padding-bottom',
-                spacing.$unit-xxl
-);
-
-//left padding
-
-@include margin-builder(
-                '.lui-padding-left-xxs',
-                'padding-left',
-                spacing.$unit-xxs
-);
-
-@include margin-builder(
-                '.lui-padding-left-xs',
-                'padding-left',
-                spacing.$unit-xs
-);
-
-@include margin-builder(
-                '.lui-padding-left-sm',
-                'padding-left',
-                spacing.$unit-sm
-);
-
-@include margin-builder(
-                '.lui-padding-left-md',
-                'padding-left',
-                spacing.$unit-md
-);
-
-@include margin-builder(
-                '.lui-padding-left-lg',
-                'padding-left',
-                spacing.$unit-lg
-);
-
-@include margin-builder(
-                '.lui-padding-left-xl',
-                'padding-left',
-                spacing.$unit-xl
-);
-
-@include margin-builder(
-                '.lui-padding-left-xxl',
-                'padding-left',
-                spacing.$unit-xxl
-);
-
-//right padding
-
-@include margin-builder(
-                '.lui-padding-right-xxs',
-                'padding-right',
-                spacing.$unit-xxs
-);
-
-@include margin-builder(
-                '.lui-padding-right-xs',
-                'padding-right',
-                spacing.$unit-xs
-);
-
-@include margin-builder(
-                '.lui-padding-right-sm',
-                'padding-right',
-                spacing.$unit-sm
-);
-
-@include margin-builder(
-                '.lui-padding-right-md',
-                'padding-right',
-                spacing.$unit-md
-);
-
-@include margin-builder(
-                '.lui-padding-right-lg',
-                'padding-right',
-                spacing.$unit-lg
-);
-
-@include margin-builder(
-                '.lui-padding-right-xl',
-                'padding-right',
-                spacing.$unit-xl
-);
-
-@include margin-builder(
-                '.lui-padding-right-xxl',
-                'padding-right',
-                spacing.$unit-xxl
-);
-
-// Remove padding
-.lui-remove-padding-all {
-  padding: 0 !important;
-}
-
-.lui-remove-padding-x {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.lui-remove-padding-y {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-// exploration into defining dividers (border top) on various screen sizes so they can be set on the Divs in the required sequence.
-// use the selector: div[class*="row-divider"] to give it a colour
-// Use .lui-row-divider class to apply a divider at all screen sizes
-@mixin lui-row-divider {
-  border-top: 1px solid;
-  margin-top: spacing.$unit-md;
-  padding-top: spacing.$unit-md;
-}
-
-.lui-row-divider {
-  @include lui-row-divider;
-
-  &-xs {
-    @media only screen and (max-width: $screen-xs) {
-      @include lui-row-divider;
-    }
-  }
-
-  &-sm {
-    @media only screen and (min-width: $screen-xs) and (max-width: $screen-sm) {
-      @include lui-row-divider;
-    }
-  }
-
-  &-md {
-    @media only screen and (min-width: $screen-sm) and (max-width: $screen-md) {
-      @include lui-row-divider;
-    }
-  }
-
-  &-lg {
-    @media only screen and (min-width: $screen-md) and (max-width: $screen-lg) {
-      @include lui-row-divider;
-    }
-  }
-
-  &-xl {
-    @media only screen and (min-width: $screen-lg) and (max-width: $screen-xl) {
-      @include lui-row-divider;
-    }
-  }
-}
-
-// Zebra stripes for tables etc -----------------------------------------------------------
-
-// See the table.scss for these classes
-
-// End Zebra stripes :)  -----------------------------------------------------------