@dta-au/civictheme-twig 1.13.1

package/components/00-base/mixins/_link.scss

@@ -0,0 +1,163 @@
+//
+// Link mixins.
+//
+
+//
+// Set link colors.
+//
+@mixin ct-link-colors($normal, $hover: $normal, $visited: $normal, $active: $normal, $focus: false) {
+  & {
+    color: $normal;
+  }
+
+  @if $hover != false {
+    &:hover,
+    &:visited:hover {
+      color: $hover;
+    }
+  }
+
+  @if $visited != false {
+    &:visited {
+      color: $visited;
+    }
+  }
+
+  @if $active != false {
+    &--active,
+    &:active {
+      color: $active;
+    }
+  }
+
+  @if $focus != false {
+    &:focus-visible {
+      color: $focus;
+    }
+  }
+}
+
+//
+// Set link background colors.
+//
+@mixin ct-link-backgrounds($normal, $hover: $normal, $visited: $normal, $active: $normal, $focus: false) {
+  background-color: $normal;
+
+  @if $hover != false {
+    &:hover {
+      background-color: $hover;
+    }
+  }
+
+  @if $visited != false {
+    &:visited {
+      background-color: $visited;
+    }
+  }
+
+  @if $active != false {
+    &--active,
+    &:active {
+      background-color: $active;
+    }
+  }
+
+  @if $focus != false {
+    &:focus-visible {
+      background-color: $focus;
+    }
+  }
+}
+
+//
+// Add text decoration to a link.
+//
+@mixin ct-link-decoration($underline: false, $underline-hover: true, $underline-active: true, $underline-focus: true) {
+  & {
+    text-decoration: none;
+
+    .ct-text-icon__text {
+      @if $underline {
+        text-decoration: underline;
+      }
+      @else {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &:hover {
+    .ct-text-icon__text {
+      @if $underline-hover {
+        text-decoration: underline;
+      }
+      @else {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &--active,
+  &:active {
+    .ct-text-icon__text {
+      @if $underline-active {
+        text-decoration: underline;
+      }
+      @else {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &:focus-visible {
+    .ct-text-icon__text {
+      @if $underline-focus {
+        text-decoration: underline;
+      }
+      @else {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+//
+// Remove text decoration from a link.
+//
+@mixin ct-link-no-decoration() {
+  @include ct-link-decoration(false, false, false, false);
+}
+
+//
+// Remove an outline from the link.
+//
+@mixin ct-link-no-outline() {
+  outline: 0;
+
+  &:focus-visible {
+    outline: 0;
+  }
+}
+
+//
+// Cover parent to allow the whole element to become a link.
+//
+@mixin ct-link-cover-parent() {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+@mixin ct-link-wide() {
+  display: flex;
+  column-gap: ct-spacing(2);
+
+  .ct-link__icon {
+    @include ct-flex-align-right();
+  }
+}

package/components/00-base/mixins/_map.scss

@@ -0,0 +1,90 @@
+//
+// Map functions to extend SASS functionality.
+//
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+
+//
+// Get the next element from the map.
+//
+// @see https://gist.github.com/agorilla/9df052eb1e15d8aea446
+//
+@function ct-map-get-next($map, $key, $fallback: false, $return: value) {
+  // Check if map is valid.
+  @if type-of($map) == map {
+    // Check if key exists in map.
+    @if map.has-key($map, $key) {
+      // Init index counter variable.
+      $i: 0;
+
+      // Init key index.
+      $key-index: false;
+
+      // Traverse map for key.
+      @each $map-key,
+        $map-value in $map {
+        // Update index
+        $i: $i + 1;
+
+        // If map key found, set key index.
+        @if $map-key == $key {
+          $key-index: $i;
+        }
+
+        // If next index return next value or key based on $return.
+        @if $i == $key-index + 1 {
+          @if $return == key {
+            @return $map-key;
+          }
+          @else {
+            @return $map-value;
+          }
+        }
+
+        // If last entry return the fallback.
+        @if $i == length($map) {
+          @return $fallback;
+        }
+      }
+
+      @warn 'No next map item for key #{$key}';
+      @return $fallback;
+    }
+
+    @warn 'No valid key #{$key} in map';
+    @return $fallback;
+  }
+
+  @warn 'No valid map';
+  @return $fallback;
+}
+
+@function ct-join-lists($lists, $separator: ' ') {
+  $value: '';
+
+  @if $lists and list.length($lists) > 0 {
+    @if list.nth($lists, 1) and list.length(list.nth($lists, 1)) > 0 {
+      $value: list.nth($lists, 1);
+    }
+  }
+
+  @for $i from 1 to list.length($lists) {
+    @if $i == 1 {
+      @if list.nth($lists, 1) and list.length(list.nth($lists, 1)) > 0 and list.nth($lists, $i + 1)
+        and list.length(list.nth($lists, $i + 1)) > 0 {
+        $value: $value + $separator + list.nth($lists, $i + 1);
+      }
+      @else if (not list.nth($lists, 1) or list.length(list.nth($lists, 1)) == 0)
+        and list.nth($lists, $i + 1) and list.length(list.nth($lists, $i + 1)) > 0 {
+        $value: $value + list.nth($lists, $i + 1);
+      }
+    }
+    @else if list.nth($lists, $i + 1) and list.length(list.nth($lists, $i + 1)) > 0 {
+      $value: $value + $separator + list.nth($lists, $i + 1);
+    }
+  }
+
+  @return list.join(#{$value}, ());
+}

package/components/00-base/mixins/_message.scss

@@ -0,0 +1,11 @@
+//
+// Message mixins.
+//
+
+//
+// Compile all field message types into a single map.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-message-types-all() {
+  @return map.merge($ct-message-types-default, $ct-message-types);
+}

package/components/00-base/mixins/_outline.scss

@@ -0,0 +1,32 @@
+//
+// Outline mixins.
+//
+
+//
+// Set element outline.
+//
+@mixin ct-outline($is_dark: false) {
+  outline-offset: var(--ct-outline-offset);
+  outline-width: var(--ct-outline-width);
+  outline-style: solid;
+
+  @if $is_dark {
+    outline-color: var(--ct-outline-dark);
+  }
+  @else {
+    outline-color: var(--ct-outline-light);
+  }
+}
+
+@mixin ct-outline-theme($theme) {
+  @if $theme == 'light' {
+    @include ct-outline();
+  }
+  @else {
+    @include ct-outline(true);
+  }
+}
+
+@mixin ct-outline-border() {
+  border-radius: var(--ct-outline-border-radius);
+}

package/components/00-base/mixins/_particle.scss

@@ -0,0 +1,40 @@
+//
+// Particle mixins.
+//
+
+@use 'sass:list';
+@use 'sass:math';
+
+//
+// Get a particle multiplied by a number.
+//
+@function ct-particle($multiplier: 1) {
+  @return _ct-particle($multiplier);
+}
+
+//
+// Get a pixel value of the particle multiplied by a number.
+//
+@function ct-particle-px($multiplier: 1) {
+  @return _ct-particle($multiplier, false);
+}
+
+//
+// Get a particle multiplied by a number as a rem or pixel value.
+//
+// Do not use directly.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-particle($multiplier: 1, $use-rem: true) {
+  @if type-of($multiplier) != number {
+    @error '"#{$multiplier}" is not a valid number!';
+  }
+
+  $value: $ct-particle * $multiplier;
+
+  @if $use-rem {
+    $value: rem($value);
+  }
+
+  @return $value;
+}

package/components/00-base/mixins/_print.scss

@@ -0,0 +1,26 @@
+//
+// Print mixins.
+//
+
+// Adjust rules for print.
+//
+// @code
+//
+// @include ct-print(s) {
+//   width: 50%;
+// }
+//
+// @endcode
+//
+@mixin ct-print() {
+  @media print {
+    @content;
+  }
+}
+
+// Shorthand to hide elements for print.
+@mixin ct-print-hide() {
+  @media print {
+    display: none !important;
+  }
+}

package/components/00-base/mixins/_rem.scss

@@ -0,0 +1,20 @@
+//
+// Functions to work with REM.
+//
+
+@use 'sass:math';
+
+//
+// Convert a pixel value into a rem value.
+//
+// Exception case where we are not prefixing a function with `ct-` for brevity.
+//
+@function rem($pxval, $base: null) {
+  @if $base == null {
+    $base: $ct-font-base-size;
+  }
+
+  $pxbase: $base;
+
+  @return math.div($pxval, $pxbase) * 1rem;
+}

package/components/00-base/mixins/_reset.scss

@@ -0,0 +1,85 @@
+//
+// Reset mixins.
+//
+
+//
+// Reset the box model dimensions.
+//
+@mixin ct-reset-box-model() {
+  @include ct-reset-margins();
+
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+//
+// Reset margins.
+//
+@mixin ct-reset-margins() {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+//
+// Subset of normalize.css
+// v8.0.1 | MIT License | github.com/necolas/normalize.css.
+//
+@mixin ct-reset-basic-content {
+  // 1. Add the correct box sizing in Firefox.
+  // 2. Show the overflow in Edge and IE.
+  hr {
+    box-sizing: content-box; // 1
+    height: 0; // 1
+    overflow: visible; // 2
+  }
+
+  // 1. Correct the inheritance and scaling of font size in all browsers.
+  // 2. Correct the odd `em` font sizing in all browsers.
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: monospace; // 1
+    font-size: 1em; // 2
+  }
+
+  // 1. Remove the bottom border in Chrome 57-
+  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+  abbr[title] {
+    border-bottom: none; // 1
+    text-decoration: underline; // 2
+    text-decoration: underline dotted; // 2
+  }
+
+  // Add the correct font weight in Chrome, Edge, and Safari.
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  // Add the correct font size in all browsers.
+  small {
+    font-size: 80%;
+  }
+
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+}

package/components/00-base/mixins/_spacing.scss

@@ -0,0 +1,57 @@
+//
+// Spacing mixins.
+//
+
+@use 'sass:list';
+@use 'sass:math';
+
+//
+// Get a spacing value from the pre-defined list of spacings.
+//
+@function ct-spacing($multiplier: 1) {
+  @if type-of($multiplier) != number {
+    @error '"#{$multiplier}" is not a valid number!';
+  }
+
+  @return $ct-spacing * $multiplier;
+}
+
+//
+// Set vertical spacing as padding or margin for a component.
+//
+@mixin ct-component-with-vertical-spacing($type, $top, $bottom: $top, $is_padding: true) {
+  $types: top, bottom, both;
+
+  @if not list.index($type, $type) {
+    @error '#{$type} is not a valid space type. Expected one of #{$types}.';
+  }
+
+  @if $type == 'top' or $type == 'both' {
+    @if $is_padding {
+      padding-top: $top;
+    }
+    @else {
+      margin-top: $top;
+    }
+  }
+
+  @if $type == 'bottom' or $type == 'both' {
+    @if $is_padding {
+      padding-bottom: $bottom;
+    }
+    @else {
+      margin-bottom: $bottom;
+    }
+  }
+
+  @if $type == 'none' {
+    @if $is_padding {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    @else {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}

package/components/00-base/mixins/_string.scss

@@ -0,0 +1,76 @@
+//
+// String functions to extend SASS functionality.
+//
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+
+//
+// Replace $search with $replace in $string.
+//
+@function ct-str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + ct-str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function ct-string-last-index($string, $needle) {
+  $index: string.index($string, $needle);
+  $result: $index;
+
+  @if $index {
+    @for $i from $index + string.length($needle) through string.length($string) {
+      @if string.slice($string, $i, $i + string.length($needle) - 1) == $needle {
+        $result: $i;
+      }
+    }
+  }
+
+  @return $result;
+}
+
+@function ct-string-is-quoted($string) {
+  @if type-of($string) != string {
+    @return false;
+  }
+
+  @return "#{$string#{''}}" != $string;
+}
+
+// Convert to string.
+@function ct-string($string) {
+  @if not ct-string-is-quoted($string) {
+    $string: "#{$string#{''}}";
+  }
+
+  @return $string;
+}
+
+@function ct-unquote($value) {
+  @if type-of($value) != string {
+    @return $value;
+  }
+
+  @return string.unquote($value);
+}
+
+@function ct-string-split($string, $separator) {
+  $result: ();
+  $index: string.index($string, $separator);
+
+  @while $index != null {
+    $substring: string.slice($string, 1, $index - 1);
+    $result: list.append($result, $substring);
+    $string: string.slice($string, $index + string.length($separator));
+    $index: string.index($string, $separator);
+  }
+
+  $split-arr: list.append($result, $string);
+
+  @return $split-arr;
+}