@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/_functions/mixins.scss

@@ -1,643 +1 @@
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:meta';
-@use 'sass:list';
-@use 'sass:string';
-
-@use 'variables' as *;
-@use 'functions' as *;
-
-// Utility generator
-// Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
-  $values: map.get($utility, values);
-
-  // If the values are a list or string, convert it into a map
-  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
-    $values: list.zip($values, $values);
-  }
-
-  @each $key, $value in $values {
-    $properties: map.get($utility, property);
-
-    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
-    @if meta.type-of($properties) == 'string' {
-      $properties: list.append((), $properties);
-    }
-
-    // Use custom class if present
-    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
-    $property-class: if($property-class == null, '', $property-class);
-
-    // Use custom CSS variable name if present, otherwise default to `class`
-    $css-variable-name: if(
-      map.has-key($utility, css-variable-name),
-      map.get($utility, css-variable-name),
-      map.get($utility, class)
-    );
-
-    // State params to generate pseudo-classes
-    $state: if(map.has-key($utility, state), map.get($utility, state), ());
-
-    $infix: if($property-class == '' and string.slice($infix, 1, 1) == '-', string.slice($infix, 2), $infix);
-
-    // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if($key, if($property-class == '' and $infix == '', '', '-') + $key, '');
-
-    @if map.get($utility, rfs) {
-      // Inside the media query
-      @if $is-rfs-media-query {
-        $val: rfs-value($value);
-
-        // Do not render anything if fluid and non fluid values are the same
-        $value: if($val == rfs-fluid-value($value), null, $val);
-      } @else {
-        $value: rfs-fluid-value($value);
-      }
-    }
-
-    $is-css-var: map.get($utility, css-var);
-    $is-local-vars: map.get($utility, local-vars);
-    $is-rtl: map.get($utility, rtl);
-
-    @if $value != null {
-      @if $is-rtl == false {
-        /* rtl:begin:remove */
-      }
-
-      @if $is-css-var {
-        .#{$property-class + $infix + $property-class-modifier} {
-          --#{$css-variable-name}: #{$value};
-        }
-
-        @each $pseudo in $state {
-          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            --#{$css-variable-name}: #{$value};
-          }
-        }
-      } @else {
-        .#{$property-class + $infix + $property-class-modifier} {
-          @each $property in $properties {
-            @if $is-local-vars {
-              @each $local-var, $variable in $is-local-vars {
-                --#{$local-var}: #{$variable};
-              }
-            }
-            #{$property}: $value if($enable-important-utilities, !important, null);
-          }
-        }
-
-        @each $pseudo in $state {
-          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            @each $property in $properties {
-              @if $is-local-vars {
-                @each $local-var, $variable in $is-local-vars {
-                  --#{$local-var}: #{$variable};
-                }
-              }
-              #{$property}: $value if($enable-important-utilities, !important, null);
-            }
-          }
-        }
-      }
-
-      @if $is-rtl == false {
-        /* rtl:end:remove */
-      }
-    }
-  }
-}
-
-// #endregion
-
-// #region Boostrap Grid breakpoints
-// Breakpoint viewport sizes and media queries.
-//
-// Breakpoints are defined as a map of (name: minimum width), order from small to large:
-//
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
-//
-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
-
-// Name of the next breakpoint, or null for the last breakpoint.
-//
-//    >> breakpoint-next(sm)
-//    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
-//    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @if not $n {
-    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
-  }
-  @return if($n < length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
-}
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map.get($breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width.
-// The maximum value is reduced by 0.02px to work around the limitations of
-// `min-` and `max-` prefixes and viewports with fractional widths.
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-// See https://bugs.webkit.org/show_bug.cgi?id=178261
-//
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    767.98px
-/*
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max - 0.02, null);
-}
-*/
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-  $max: breakpoint-max($name, $breakpoints);
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($lower, $breakpoints);
-  $max: breakpoint-max($upper, $breakpoints);
-
-  @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  } @else if $max == null {
-    @include media-breakpoint-up($lower, 'false', $breakpoints) {
-      @content;
-    }
-  } @else if $min == null {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
-  }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $next: breakpoint-next($name, $breakpoints);
-  $max: breakpoint-max($next, $breakpoints);
-
-  @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  } @else if $max == null {
-    @include media-breakpoint-up($name, 'false', $breakpoints) {
-      @content;
-    }
-  } @else if $min == null {
-    @include media-breakpoint-down($next, $breakpoints) {
-      @content;
-    }
-  }
-}
-// #endregion
-
-// #region Bootstrap layout
-// scss-docs-start clearfix
-/*
-@mixin clearfix() {
-  &::after {
-    display: block;
-    clear: both;
-    content: '';
-  }
-}
-  */
-// scss-docs-end clearfix
-// Container mixins
-
-@mixin make-container($gutter: $container-padding-x) {
-  --gutter-x: #{$gutter};
-  --gutter-y: 0;
-  width: 100%;
-  padding-right: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  margin-right: auto;
-  margin-left: auto;
-}
-// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-row($gutter: $grid-gutter-width) {
-  --gutter-x: #{$gutter};
-  --gutter-y: 0;
-  display: flex;
-  flex-wrap: wrap;
-  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
-}
-
-@mixin make-col-ready() {
-  // Add box sizing if only the grid is loaded
-  box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we set the width
-  // later on to override this initial width.
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--gutter-y);
-}
-
-@mixin make-col($size: false, $columns: $grid-columns) {
-  @if $size {
-    flex: 0 0 auto;
-    $width: math.div($size, 12);
-    width: math.percentage($width);
-  } @else {
-    flex: 1 1 0;
-    max-width: 100%;
-  }
-}
-
-@mixin make-col-auto() {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: math.div($size, $columns);
-  margin-left: if($num == 0, 0, math.percentage($num));
-}
-
-// Row columns
-//
-// Specify on a parent element(e.g., .row) to force immediate children into NN
-// number of columns. Supports wrapping to new lines, but does not do a Masonry
-// style grid.
-@mixin row-cols($count) {
-  > * {
-    flex: 0 0 auto;
-    width: math.div(100%, $count);
-  }
-}
-
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map.keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, 'false', $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      }
-
-      .row-cols#{$infix}-auto > * {
-        @include make-col-auto();
-      }
-
-      @if $grid-row-columns > 0 {
-        @for $i from 1 through $grid-row-columns {
-          .row-cols#{$infix}-#{$i} {
-            @include row-cols($i);
-          }
-        }
-      }
-
-      .col#{$infix}-auto {
-        @include make-col-auto();
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .col#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          @if not($infix == '' and $i == 0) {
-            // Avoid emitting useless .offset-0
-            .offset#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-
-      // Gutters
-      //
-      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in $gutters {
-        .g#{$infix}-#{$key},
-        .gx#{$infix}-#{$key} {
-          --gutter-x: #{$value};
-        }
-
-        .g#{$infix}-#{$key},
-        .gy#{$infix}-#{$key} {
-          --gutter-y: #{$value};
-        }
-      }
-    }
-  }
-}
-
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, 'false', $breakpoints) {
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .g-col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
-
-        // Start with `1` because `0` is and invalid value.
-        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-        @for $i from 1 through ($columns - 1) {
-          .g-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
-  }
-}
-
-// #endregion
-
-@mixin media-breakpoint-up($name, $mobileOnly: 'false', $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  @if $min {
-    @if $mobileOnly != 'true' {
-      @media screen and (min-width: $min) {
-        @content;
-      }
-    }
-  } @else if $name == 'xs' {
-    @content;
-  } @else {
-    @if $mobileOnly != 'true' {
-      @content;
-    }
-  }
-}
-
-@mixin dark-mode($darkMode) {
-  @media screen and (prefers-color-scheme: dark) {
-    @if $darkMode == 'true' {
-      @content;
-    }
-  }
-}
-
-@mixin light-mode($darkMode) {
-  @if $darkMode == 'true' {
-    @media screen and (prefers-color-scheme: light) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-@mixin layer($name, $layers: 'true') {
-  @if $layers == 'true' {
-    @layer #{$name} {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-@mixin container-up($name) {
-  @if $name == 'sm' {
-    @container (width > 23.4375em) {
-      @content;
-    }
-  } @else if $name == 'md' {
-    @container (width > 48em) {
-      @content;
-    }
-  } @else if $name == 'xs' {
-    @content;
-  } @else {
-    @if $mobileOnly != 'true' {
-      @content;
-    }
-  }
-}
-
-// Example: @include prefix(transition, transform 1.5s, webkit ms o);
-@mixin prefix($property, $value, $prefixes: (webkit ms o)) {
-  @each $prefix in $prefixes {
-    #{'-' + $prefix + '-' + $property}: $value;
-  }
-
-  // Output standard non-prefixed declaration
-  #{$property}: $value;
-}
-
-// Used to make it possible to use css properties but still support IE11
-@mixin var($property, $varName, $important: '') {
-  #{$property}: var(#{$varName}) #{$important};
-}
-
-@mixin inline-text() {
-  p,
-  ul,
-  ol,
-  dd,
-  .body,
-  table:not(.table--email) td {
-    @content;
-  }
-}
-
-@mixin headers($includeClasses: 'false') {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @content;
-  }
-
-  @if $includeClasses == 'true' {
-    .h1,
-    .h2,
-    .h3,
-    .h4,
-    .h5,
-    .h6 {
-      @content;
-    }
-  }
-}
-
-@mixin bg-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-    --bg-colour: var(--colour-#{str-replace($parent, '.bg-', '')});
-    --bg-colour-tint: var(--colour-#{str-replace($parent, '.bg-', '')}-tint);
-
-    @include var(background-color, --colour-#{str-replace($parent, '.bg-', '')}, !important);
-  }
-}
-@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-    @include var(color, --colour-#{str-replace($parent, '.text-', '')}, '!important');
-  }
-}
-
-@mixin font-size($value) {
-  $found: false;
-
-  @each $size, $subvalue in $font-sizes {
-    @if ($value == $subvalue and $found == false) {
-      font-size: var(--fs-#{$size});
-      $found: true;
-    }
-  }
-  @if $found == false {
-    font-size: $value;
-  }
-}
-
-@mixin is($selector, $before: '', $after: '') {
-  #{$before}:is(#{$selector})#{$after} {
-    @content;
-  }
-}
-
-@mixin reset-colours() {
-  @each $color, $value in $non-theme-colors {
-    --colour-#{$color}: #{$value};
-  }
-
-  .text-primary {
-    color: var(--colour-primary) !important;
-  }
-}
-
-@mixin invert-colours() {
-  @each $color, $value in $dark-mode-functional-colors {
-    --colour-#{$color}: #{$value};
-  }
-}
-
-@mixin slotted($el, $isComponent: 'true') {
-  @if $isComponent == 'true' {
-    ::slotted(#{$el}) {
-      @content;
-    }
-  } @else {
-    #{$el} {
-      @content;
-    }
-  }
-}
-
-@mixin list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-@mixin breakpoint($name, $breakpoints: $breakpoints) {
-  @media screen and (min-width: #{map.get($breakpoints,$name)}) {
-    @content;
-  }
-}
-@mixin input {
-  display: block;
-    width: 100%;
-    display: block;
-    width: 100%;
-    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
-    font-size: var(--input-fs, #{rem(16)});
-    line-height: var(--input-lh, #{rem(20)});
-    color: var(--colour-heading);
-    background-color: var(--colour-canvas-2);
-    background-clip: padding-box;
-    border: 2px solid var(--colour-primary);
-    appearance: none; // Fix appearance for date inputs in Safari
-    border-radius: rem(8);
-    margin-bottom: rem(24);
-    min-height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
-        4px
-    );
-    max-height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
-        4px
-    );
-
-    &:is(textarea) {
-      max-height: 100%;
-    }
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    &:is(:focus, .focus):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-    }
-
-    &:is(:focus, .focus):not(:disabled):not(:invalid) {
-      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-    }
-    // Add some height to date inputs on iOS
-    // https://github.com/twbs/bootstrap/issues/23307
-    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-    &::-webkit-date-and-time-value {
-      // Multiply line-height by 1em if it has no unit
-      height: if(math.unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
-    }
-
-    // Disabled inputs
-    &:disabled {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-}
+/* Empty */