@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,30 @@
+//
+// Form mixins.
+//
+
+//
+// Hide native form control.
+//
+@mixin ct-form-control-no-appearance() {
+  appearance: none;
+
+  // Not removed via appearance.
+  margin: 0;
+}
+
+//
+// Disabled form control.
+//
+@mixin ct-form-control-disabled($opacity: 40%) {
+  &[disabled] {
+    opacity: $opacity;
+    pointer-events: none;
+  }
+}
+
+//
+// Set inset border for a control.
+//
+@mixin ct-form-control-border-inset($color, $width: ct-particle(0.125)) {
+  box-shadow: inset 0 0 0 $width $color;
+}

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

@@ -0,0 +1,35 @@
+//
+// Generator mixins.
+//
+
+//
+// Generate classes variations from provided map with optional prefix.
+//
+@mixin ct-generate-class-variations-from-map($map, $prefix: false, $use-value: false) {
+  $index: 0;
+
+  @each $key, $value in $map {
+    // Handle lists.
+    @if type-of($map) == 'list' or $value == null {
+      $value: $key;
+      $key: $index + 1;
+    }
+
+    $classname: $key;
+    $suffix: $key;
+
+    @if $use-value != false {
+      $suffix: $value;
+    }
+
+    @if $prefix != false {
+      $classname: #{$prefix}--#{$suffix};
+    }
+
+    .#{$classname} {
+      @content($key, $value, $index);
+    }
+
+    $index: $index + 1;
+  }
+}

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

@@ -0,0 +1,223 @@
+//
+// Grid mixins.
+//
+// Grid system taken from: http://sassflexboxgrid.com/
+// Modified for use with CivicTheme.
+// - added gutters support
+// - added offset (outside gutters) support
+// - added grid overlay support
+// - added utility grid classes
+//
+
+@use 'sass:math';
+@use 'sass:map';
+
+//
+// Container class should wrap every row.
+//
+@mixin ct-container($contained: true) {
+  & {
+    margin: 0 auto;
+  }
+
+  @if $contained {
+    // Support super-narrow screens as well.
+    $_width: map.get($ct-grid-offsets, xs) * 2;
+
+    // Use vw instead of % so it calculates on viewport and not parent container.
+    & {
+      max-width: calc(100vw - #{$_width});
+    }
+
+    // Set width for container at each breakpoint accounting for offsets at this
+    // breakpoint.
+    @each $bp, $value in $ct-breakpoints {
+      @include ct-breakpoint($bp) {
+        $bp-width: map.get($ct-breakpoints, $bp);
+
+        @if $bp-width > 0 {
+          max-width: max($bp-width - (map.get($ct-grid-offsets, $bp) * 2), 0);
+        }
+      }
+    }
+  }
+  @else {
+    & {
+      width: 100%;
+    }
+
+    // Reset negative row margins which are used to offset column margins.
+    > .row {
+      @each $bp, $value in $ct-breakpoints {
+        @include ct-breakpoint($bp) {
+          margin-left: auto;
+          margin-right: auto;
+
+          > .col,
+          > [class*='col-'] {
+            &:first-child {
+              padding-left: 0;
+            }
+
+            &:last-child {
+              padding-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ct-row($gutters: $ct-grid-gutters) {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-inline-start: 0;
+  list-style: none;
+
+  @include _ct-print-all-gutters($rule-prefix: margin);
+}
+
+@mixin ct-flex-align-right() {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+//
+// Print all vertical and horizontal gutters at their breakpoints.
+//
+// Do not use directly.
+//
+@mixin _ct-print-all-gutters($gutters: $ct-grid-gutters, $rule-prefix: padding) {
+  $_scale: 1;
+
+  @if $rule-prefix == margin {
+    $_scale: -1;
+  }
+
+  @if $gutters {
+    @each $bp, $gutter in $gutters {
+      @if $bp == $ct-grid-lowest-breakpoint {
+        #{$rule-prefix}-left: math.div($gutter, 2) * $_scale;
+        #{$rule-prefix}-right: math.div($gutter, 2) * $_scale;
+      }
+      @else {
+        @include ct-breakpoint($bp) {
+          #{$rule-prefix}-left: math.div($gutter, 2) * $_scale;
+          #{$rule-prefix}-right: math.div($gutter, 2) * $_scale;
+        }
+      }
+    }
+  }
+}
+
+//
+// Condition to run inside of the col mixin.
+//
+// Do not use directly.
+//
+@mixin _ct-col-condition($col-number) {
+  @if type-of($col-number) == number {
+    @if $col-number > $ct-grid-columns or $col-number == 0 {
+      @warn 'Column number must be greater than 0 and less than or equal to total number of columns in the grid (#{$ct-grid-columns})';
+    }
+    @else {
+      flex-basis: math.div(100%, $ct-grid-columns) * $col-number;
+      max-width: math.div(100%, $ct-grid-columns) * $col-number;
+
+      @include _ct-print-all-gutters();
+    }
+  }
+
+  // If no col number is passed then arg is set to "auto" by default
+  // "auto" mode fills the horizontal space with evenly sized containers
+  @else if $col-number == 'auto' {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+
+    @include _ct-print-all-gutters();
+  }
+  @else {
+    @warn "Column number argument must either be the string 'auto' or a number greater than 0 and less than or equal to total number of columns in the grid (#{$ct-grid-columns})";
+  }
+}
+
+//
+// Condition to run inside of the col mixin.
+//
+// Do not use directly.
+//
+@mixin _ct-grid-col($breakpoint: 'xs', $col-number: 'auto') {
+  // If no breakpoint is passed and a col number is just use the first arg as
+  // the col number and act like xs.
+  @if type-of($breakpoint) == number {
+    $col-number: $breakpoint;
+
+    @include _ct-col-condition($col-number);
+  }
+  @else if $breakpoint == $ct-grid-lowest-breakpoint {
+    @include _ct-col-condition($col-number);
+  }
+  @else {
+    @include ct-breakpoint($breakpoint) {
+      @include _ct-col-condition($col-number);
+    }
+  }
+}
+
+//
+// Mixin to run inside of for loop - creates col/breakpoint classes.
+//
+// Do not use directly.
+//
+@mixin _ct-col-factory($bp) {
+  .col-#{$bp} {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+
+    @include _ct-print-all-gutters();
+  }
+
+  @for $i from 1 through $ct-grid-columns {
+    .col-#{$bp}-#{$i} {
+      flex-basis: math.div(100%, $ct-grid-columns) * $i;
+      max-width: math.div(100%, $ct-grid-columns) * $i;
+
+      @include _ct-print-all-gutters();
+    }
+
+    .col-#{$bp}-offset-#{$i} {
+      margin-left: math.div(100%, $ct-grid-columns) * $i;
+    }
+  }
+
+  .col-#{$bp}-offset-0 {
+    margin-left: 0;
+  }
+}
+
+//
+// Offset column.
+//
+@mixin ct-col-offset($column_num) {
+  margin-left: math.div(100%, $ct-grid-columns) * $column_num;
+}
+
+//
+// Make content equal heights by stretching all children to the same height.
+//
+@mixin ct-equal-heights() {
+  display: flex;
+
+  > * {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,84 @@
+//
+// Highlight mixins.
+//
+
+//
+// Add highlight stripe to an element.
+//
+@mixin ct-highlight-stripe-vertical($width, $border-radius: 0, $border-width: ct-particle(0.125), $position: 'left') {
+  $_stripe_size: $width;
+
+  @if $border-width != 0 {
+    $_stripe_size: calc(#{$width} + #{$border-width});
+  }
+
+  & {
+    position: relative;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -$border-width;
+    bottom: -$border-width;
+    left: -$border-width;
+    width: $_stripe_size;
+
+    @if $position == 'left' {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+    @else {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    @if $ct-animation-enabled {
+      transition: width 0.25s;
+    }
+  }
+}
+
+//
+// Add highlight stripe to an element.
+//
+@mixin ct-highlight-stripe-horizontal($height, $border-radius, $border-width: ct-particle(0.125), $position: 'top') {
+  $_stripe_size: $height;
+
+  @if $border-width != 0 {
+    $_stripe_size: calc(#{$height} + #{$border-width});
+  }
+
+  & {
+    position: relative;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -$border-width;
+    right: -$border-width;
+    height: $_stripe_size;
+
+    @if $position == 'top' {
+      top: -$border-width;
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+    @else {
+      bottom: -$border-width;
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    @if $ct-animation-enabled {
+      transition: height 0.25s;
+    }
+  }
+}
+
+@mixin ct-highlight-stripe-background-color($color) {
+  &::before {
+    background-color: $color;
+  }
+}

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

@@ -0,0 +1,118 @@
+//
+// Icon mixins.
+//
+
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:string';
+
+//
+// Get icon size at breakpoint.
+//
+@function ct-icon-size-dimension($size, $breakpoint, $dimension) {
+  $all-icon-sizes: _ct-icon-sizes-all();
+
+  @if map.get($all-icon-sizes, $size) == null {
+    @error '"#{$size}" is not an available size.';
+  }
+
+  $size-at-breakpoints: map.get($all-icon-sizes, $size);
+
+  @if map.get($size-at-breakpoints, $breakpoint) == null {
+    @error '"#{$breakpoint}" is not an available breakpoint for size #{$size}.';
+  }
+
+  $dimensions: map.get($size-at-breakpoints, $breakpoint);
+
+  @if list.length($dimensions) != 2 {
+    @error 'Dimenstions list must contain exactly 2 entries for icon size #{$size} at breakpoint #{$breakpoint}.';
+  }
+
+  $value: '';
+
+  @if $dimension == 'width' {
+    $value: list.nth($dimensions, 1);
+  }
+  @else if $dimension == 'height' {
+    $value: list.nth($dimensions, 2);
+  }
+
+  @if ct-string-is-quoted($value) {
+    $value: string.unquote($value);
+  }
+
+  @if $value {
+    // @todo Review and replace this to use rem() in source variables.
+    @return rem($value);
+  }
+
+  @error '"#{$dimension}" is not an available dimension for size #{$size} at breakpoint #{$breakpoint}.';
+}
+
+//
+// Compile all icon sizes into a single map.
+//
+// Do not use directly.
+// Use ct-icon-size-dimension() function instead.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-icon-sizes-all() {
+  @return map.merge($ct-icon-sizes-default, $ct-icon-sizes);
+}
+
+//
+// Include icon size for one-to-many breakpoints.
+//
+// Note that icons inherit font size by default. This mixin should be used
+// only as an override for the default functionality.
+//
+// @include ct-icon-size('regular');
+//
+@mixin ct-icon-size($size: 'regular', $use-font-size: true) {
+  $all-icon-sizes: _ct-icon-sizes-all();
+
+  @if map.get($all-icon-sizes, $size) == null {
+    @error '"#{$size}" is not an available size.';
+  }
+
+  $size-at-breakpoints: map.get($all-icon-sizes, $size);
+  $breakpoints: map.keys($size-at-breakpoints);
+
+  @each $breakpoint in $breakpoints {
+    @include ct-breakpoint($breakpoint) {
+      @if $use-font-size {
+        font-size: ct-icon-size-dimension($size, $breakpoint, 'width');
+      }
+      @else {
+        width: ct-icon-size-dimension($size, $breakpoint, 'width');
+        height: ct-icon-size-dimension($size, $breakpoint, 'height');
+      }
+    }
+  }
+}
+
+//
+// Align icon with a top part of text (aka ascender line).
+//
+// @see https://www.monotype.com/resources/z-typographic-terms
+//
+@mixin ct-icon-align-with-text($text-name, $icon-size: 'regular') {
+  $text-name: 'text-regular';
+  $typography-rulesets: _ct-typography-get-ruleset-rule($text-name);
+
+  vertical-align: top;
+  line-height: 100%;
+
+  @each $breakpoint, $rules in $typography-rulesets {
+    $font-size: ct-typography-rule($text-name, 'font-size', $breakpoint);
+    $line-height: ct-typography-rule($text-name, 'line-height', $breakpoint);
+    $text-height: math.max($font-size, $line-height);
+    $icon-height: ct-icon-size-dimension($icon-size, $breakpoint, 'height');
+    $delta: $text-height - $icon-height;
+
+    @include ct-breakpoint($breakpoint) {
+      margin-top: math.div($delta, 2);
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+//
+// Image mixins.
+//
+
+//
+// Fit image into parent object.
+//
+@mixin ct-image-fit($self: false) {
+  @if $self {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  @else {
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+//
+// Fit image into text size.
+//
+@mixin ct-image-fit-text-size($self: false) {
+  @if $self {
+    height: 1em;
+    width: 1em;
+    object-fit: cover;
+  }
+  @else {
+    img {
+      height: 1em;
+      width: 1em;
+      object-fit: cover;
+    }
+  }
+}
+
+//
+// Fit image into a container.
+//
+@mixin ct-image-fit-container() {
+  @include ct-image-fit();
+
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+//
+// Fit image into a square container.
+//
+@mixin ct-image-container-square() {
+  @include ct-image-fit();
+
+  position: relative;
+  width: 100%;
+  padding-top: 100%;
+  box-sizing: border-box;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+//
+// Drop shadow for image.
+//
+@mixin ct-image-shadow($color, $direction: down, $offset-x: ct-particle(2), $offset-y: ct-particle(2)) {
+  $_multiplier-x: 1;
+  $_multiplier-y: 1;
+  $allowed-directions: up, down, left, right, up-left, up-right, down-left, down-right;
+
+  @if not index($allowed-directions, $direction) {
+    @error "Invalid direction: #{$direction}. Allowed directions are: #{join($allowed-directions, ', ')}";
+  }
+
+  @if $direction == 'up' {
+    $_multiplier-y: -1;
+    $_multiplier-x: 0;
+  }
+  @else if $direction == 'down' {
+    $_multiplier-y: 1;
+    $_multiplier-x: 0;
+  }
+  @else if $direction == 'left' {
+    $_multiplier-x: -1;
+    $_multiplier-y: 0;
+  }
+  @else if $direction == 'right' {
+    $_multiplier-x: 1;
+    $_multiplier-y: 0;
+  }
+  @else if $direction == 'up-left' {
+    $_multiplier-x: -1;
+    $_multiplier-y: -1;
+  }
+  @else if $direction == 'up-right' {
+    $_multiplier-x: 1;
+    $_multiplier-y: -1;
+  }
+  @else if $direction == 'down-left' {
+    $_multiplier-x: -1;
+    $_multiplier-y: 1;
+  }
+  @else if $direction == 'down-right' {
+    $_multiplier-x: 1;
+    $_multiplier-y: 1;
+  }
+
+  // Avoid unnecessary calc functions.
+  $_shadow_length_x: $offset-x;
+  $_shadow_length_y: $offset-y;
+
+  @if $_multiplier-x != 1 {
+    @if type-of($offset-x) == 'string' {
+      $_shadow_length_x: calc(#{$_multiplier-x} * #{$offset-x});
+    }
+    @else {
+      $_shadow_length_x: $_multiplier-x * $offset-x;
+    }
+  }
+
+  @if $_multiplier-y != 1 {
+    @if type-of($offset-y) == 'string' {
+      $_shadow_length_y: calc(#{$_multiplier-y} * #{$offset-y});
+    }
+    @else {
+      $_shadow_length_y: $_multiplier-y * $offset-y;
+    }
+  }
+
+  filter: drop-shadow($_shadow_length_x $_shadow_length_y 0 $color);
+}
+
+//
+// String to set SVG viewbox.
+//
+@function ct-svg-viewbox($svg, $value) {
+  @return ct-str-replace($svg, "viewBox=''", "viewBox='#{$value}'");
+}

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

@@ -0,0 +1,25 @@
+@import 'particle';
+@import 'debug';
+@import 'background';
+@import 'breakpoint';
+@import 'color';
+@import 'cssgrid';
+@import 'component';
+@import 'content';
+@import 'disabled';
+@import 'elevation';
+@import 'font';
+@import 'generator';
+@import 'grid';
+@import 'icon';
+@import 'image';
+@import 'link';
+@import 'map';
+@import 'outline';
+@import 'print';
+@import 'rem';
+@import 'spacing';
+@import 'string';
+@import 'table';
+@import 'typography';
+@import 'visibility';