@graupl/graupl 1.0.0-beta.1 → 1.0.0-beta.10

package/src/scss/base/link/_index.scss

@@ -1,134 +0,0 @@
-// @graupl/graupl link base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/animation";
-
-@include layer(base) {
-  #{defaults.$link-selector} {
-    min-width: $link-min-width;
-    min-height: $link-min-height;
-    padding: $link-padding;
-    transform: $link-transform;
-    transition: $link-transition;
-    border: $link-border;
-    border-radius: $link-border-radius;
-    text-decoration: $link-text-decoration;
-    text-decoration-style: $link-text-decoration-style;
-    text-decoration-thickness: $link-text-decoration-thickness;
-
-    &:visited {
-      --#{root-defaults.$prefix}link-text-decoration: #{$link-visited-text-decoration};
-      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
-      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-visited-text-decoration-style};
-      --#{root-defaults.$prefix}link-transform: #{$link-visited-transform};
-    }
-
-    &:focus-visible {
-      --#{root-defaults.$prefix}link-text-decoration: #{$link-focus-text-decoration};
-      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
-      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-focus-text-decoration-style};
-      --#{root-defaults.$prefix}link-transform: #{$link-focus-transform};
-    }
-
-    &:hover {
-      --#{root-defaults.$prefix}link-text-decoration: #{$link-hover-text-decoration};
-      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
-      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-hover-text-decoration-style};
-      --#{root-defaults.$prefix}link-transform: #{$link-hover-transform};
-    }
-
-    &:active {
-      --#{root-defaults.$prefix}link-text-decoration: #{$link-active-text-decoration};
-      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
-      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-active-text-decoration-style};
-      --#{root-defaults.$prefix}link-transform: #{$link-active-transform};
-    }
-
-    &:disabled,
-    &[disabled] {
-      cursor: not-allowed;
-
-      &,
-      &:visited,
-      &:focus-visible,
-      &:hover,
-      &:active {
-        --#{root-defaults.$prefix}link-text-decoration: #{$link-disabled-text-decoration};
-        --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
-        --#{root-defaults.$prefix}link-text-decoration-style: #{$link-disabled-text-decoration-style};
-        --#{root-defaults.$prefix}link-transform: #{$link-disabled-transform};
-      }
-    }
-
-    &#{defaults.$stretched-link-selector} {
-      isolation: isolate;
-
-      &::#{defaults.$stretched-link-pseudo-selector} {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: $stretched-link-z-index;
-      }
-    }
-  }
-
-  @include animation.off {
-    #{defaults.$link-selector} {
-      --#{root-defaults.$prefix}link-transition: #{$link-transition-reduced-motion};
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$link-selector} {
-    border-color: $link-border-color;
-    background: $link-background;
-    color: $link-color;
-    text-decoration-color: $link-text-decoration-color;
-
-    &:visited {
-      --#{root-defaults.$prefix}link-color: #{$link-visited-color};
-      --#{root-defaults.$prefix}link-background: #{$link-visited-background};
-      --#{root-defaults.$prefix}link-border-color: #{$link-visited-border-color};
-      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-visited-text-decoration-color};
-    }
-
-    &:focus-visible {
-      --#{root-defaults.$prefix}link-color: #{$link-focus-color};
-      --#{root-defaults.$prefix}link-background: #{$link-focus-background};
-      --#{root-defaults.$prefix}link-border-color: #{$link-focus-border-color};
-      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-focus-text-decoration-color};
-    }
-
-    &:hover {
-      --#{root-defaults.$prefix}link-color: #{$link-hover-color};
-      --#{root-defaults.$prefix}link-background: #{$link-hover-background};
-      --#{root-defaults.$prefix}link-border-color: #{$link-hover-border-color};
-      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-hover-text-decoration-color};
-    }
-
-    &:active {
-      --#{root-defaults.$prefix}link-color: #{$link-active-color};
-      --#{root-defaults.$prefix}link-background: #{$link-active-background};
-      --#{root-defaults.$prefix}link-border-color: #{$link-active-border-color};
-      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-active-text-decoration-color};
-    }
-
-    &:disabled,
-    &[disabled] {
-      &,
-      &:visited,
-      &:focus-visible,
-      &:hover,
-      &:active {
-        --#{root-defaults.$prefix}link-color: #{$link-disabled-color};
-        --#{root-defaults.$prefix}link-background: #{$link-disabled-background};
-        --#{root-defaults.$prefix}link-border-color: #{$link-disabled-border-color};
-        --#{root-defaults.$prefix}link-text-decoration-color: #{$link-disabled-text-decoration-color};
-      }
-    }
-  }
-}

package/src/scss/base/table/_defaults.scss

@@ -1,53 +0,0 @@
-// @graupl/graupl table base default values.
-//
-// Generally, these should not be used directly when styling bases unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-@use "sass:map";
-
-// Table selectors.
-$table-selector: "table" !default;
-$table-caption-selector: "caption" !default;
-$table-header-selector: "th" !default;
-$table-cell-selector: "td" !default;
-$table-row-selector: "tr" !default;
-$table-head-selector: "thead" !default;
-$table-body-selector: "tbody" !default;
-$table-foot-selector: "tfoot" !default;
-$table-theme-prefix-selector: "." !default;
-$table-bordered-selector: ".bordered" !default;
-$table-collapsed-selector: ".collapsed" !default;
-$table-striped-columns-selector: ".striped-columns" !default;
-$table-striped-rows-selector: ".striped-rows" !default;
-$table-hoverable-selector: ".hoverable" !default;
-$table-highlight-selector: ".highlight" !default;
-$table-responsive-selector: ".responsive-table" !default;
-
-// Table properties.
-$table-caption-side: bottom !default;
-
-// Table theme defaults.
-// This map is used to define the default colour shades for the
-// themed table bases.
-//
-// e.g.
-// Primary tables will use primary--700 as the header background,
-// and primary--100 as the header text colour.
-//
-// Secondary/tertiary tables will use the same shade for their respective colours.
-$base-table-theme-map: (
-  header-background: 700,
-  header-color: 100,
-  striped-background: 200,
-  striped-color: 900,
-  hover-background: 300,
-  hover-color: 900,
-  border-color: 900,
-  highlight-background: 500,
-  highlight-color: 100,
-);
-$custom-table-theme-map: () !default;
-$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);

package/src/scss/base/table/_index.scss

@@ -1,121 +0,0 @@
-// @graupl/graupl table base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../defaults" as root-defaults;
-@use "../../functions/theme";
-
-@include layer(base) {
-  #{defaults.$table-selector} {
-    #{defaults.$table-caption-selector} {
-      padding: $table-caption-padding;
-      caption-side: $table-caption-side;
-    }
-
-    #{defaults.$table-header-selector} {
-      padding: $table-header-padding;
-      font-weight: $table-header-font-weight;
-    }
-
-    #{defaults.$table-cell-selector},
-    #{defaults.$table-body-selector} #{defaults.$table-header-selector} {
-      padding: $table-cell-padding;
-    }
-
-    &#{defaults.$table-collapsed-selector} {
-      border-collapse: collapse;
-    }
-
-    &#{defaults.$table-bordered-selector} {
-      border-collapse: collapse;
-      border: $table-border;
-
-      #{defaults.$table-row-selector} > * {
-        border: $table-cell-border;
-      }
-    }
-  }
-
-  #{defaults.$table-responsive-selector} {
-    display: block;
-    width: 100%;
-    overflow: scroll hidden;
-
-    #{defaults.$table-selector} {
-      width: 100%;
-      margin-bottom: 0;
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$table-selector} {
-    @each $variant in theme.variants() {
-      &#{defaults.$table-theme-prefix-selector}#{$variant},
-      #{defaults.$table-theme-prefix-selector}#{$variant} {
-        @each $prop, $key in defaults.$table-theme-map {
-          --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
-              $variant,
-              $key
-            )};
-        }
-      }
-    }
-
-    #{defaults.$table-header-selector} {
-      background: $table-header-background;
-      color: $table-header-color;
-    }
-
-    #{defaults.$table-cell-selector},
-    #{defaults.$table-body-selector} #{defaults.$table-header-selector} {
-      background: $table-cell-background;
-      color: $table-cell-color;
-    }
-
-    &#{defaults.$table-bordered-selector} {
-      border-color: $table-border-color;
-
-      #{defaults.$table-row-selector} > * {
-        border-color: $table-cell-border-color;
-      }
-    }
-
-    &#{defaults.$table-striped-columns-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}:nth-child(odd)
-        > * {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &#{defaults.$table-striped-rows-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}
-        > :nth-child(odd) {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &#{defaults.$table-hoverable-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}:hover
-        > * {
-        background: $table-hover-background;
-        color: $table-hover-color;
-      }
-    }
-
-    #{defaults.$table-highlight-selector} {
-      --#{root-defaults.$prefix}table-cell-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}table-cell-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}table-header-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}table-header-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}table-striped-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}table-striped-color: #{$table-highlight-color};
-    }
-  }
-}

package/src/scss/base/table/_variables.scss

@@ -1,135 +0,0 @@
-// @graupl/graupl table base variables.
-//
-// These values are to be used to directly style bases and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../variables" as root-variables;
-@use "../../theme/typography/variables" as typography;
-@use "../../theme/color/variables" as color;
-@use "../../functions/theme";
-@use "sass:map";
-
-// Table caption properties.
-$table-caption-side: var(
-  --#{root-defaults.$prefix}table-caption-side,
-  #{defaults.$table-caption-side}
-);
-$table-caption-padding-x: var(
-  --#{root-defaults.$prefix}table-caption-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-caption-padding-y: var(
-  --#{root-defaults.$prefix}table-caption-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
-
-// Table header properties.
-$table-header-font-weight: var(
-  --#{root-defaults.$prefix}table-header-font-weight,
-  #{typography.$font-weight-bold}
-);
-$table-header-padding-x: var(
-  --#{root-defaults.$prefix}table-header-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-header-padding-y: var(
-  --#{root-defaults.$prefix}table-header-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-header-padding: $table-header-padding-y $table-header-padding-x;
-$table-header-background: var(
-  --#{root-defaults.$prefix}table-header-background,
-  #{color.$root-background}
-);
-$table-header-color: var(
-  --#{root-defaults.$prefix}table-header-color,
-  #{color.$root-color}
-);
-
-// Table cell properties.
-$table-cell-padding-x: var(
-  --#{root-defaults.$prefix}table-cell-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-cell-padding-y: var(
-  --#{root-defaults.$prefix}table-cell-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
-$table-cell-background: var(
-  --#{root-defaults.$prefix}table-cell-background,
-  #{color.$root-background}
-);
-$table-cell-color: var(
-  --#{root-defaults.$prefix}table-cell-color,
-  #{color.$root-color}
-);
-
-// Table border properties.
-$table-border-width: var(
-  --#{root-defaults.$prefix}table-border-width,
-  #{root-variables.$border-width}
-);
-$table-border-style: var(
-  --#{root-defaults.$prefix}table-border-style,
-  #{root-variables.$border-style}
-);
-$table-border: var(
-  --#{root-defaults.$prefix}table-border,
-  #{$table-border-width} #{$table-border-style}
-);
-$table-border-color: var(
-  --#{root-defaults.$prefix}table-border-color,
-  #{theme.get(primary, 900)}
-);
-
-// Table cell border properties.
-$table-cell-border-width: var(
-  --#{root-defaults.$prefix}table-cell-border-width,
-  #{$table-border-width}
-);
-$table-cell-border-style: var(
-  --#{root-defaults.$prefix}table-cell-border-style,
-  #{$table-border-style}
-);
-$table-cell-border: var(
-  --#{root-defaults.$prefix}table-cell-border,
-  #{$table-cell-border-width} #{$table-cell-border-style}
-);
-$table-cell-border-color: var(
-  --#{root-defaults.$prefix}table-cell-border-color,
-  #{$table-border-color}
-);
-
-// Table striped properties.
-$table-striped-background: var(
-  --#{root-defaults.$prefix}table-striped-background,
-  #{theme.get(secondary, 200)}
-);
-$table-striped-color: var(
-  --#{root-defaults.$prefix}table-striped-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table hover properties.
-$table-hover-background: var(
-  --#{root-defaults.$prefix}table-hover-background,
-  #{theme.get(secondary, 300)}
-);
-$table-hover-color: var(
-  --#{root-defaults.$prefix}table-hover-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table highlight properties.
-$table-highlight-background: var(
-  --#{root-defaults.$prefix}table-highlight-background,
-  #{theme.get(secondary, 500)}
-);
-$table-highlight-color: var(
-  --#{root-defaults.$prefix}table-highlight-color,
-  #{theme.get(secondary, 100)}
-);

package/src/scss/component/navigation/_defaults.scss

@@ -1,29 +0,0 @@
-// @graupl/graupl navigation component default values.
-//
-// Generally, these should not be used directly when styling components unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-// Navigation selectors.
-$navigation-selector: ".navigation" !default;
-$navigation-toggle-selector: ".navigation-toggle" !default;
-$navigation-branding-selector: ".navigation-branding" !default;
-
-// Navigation toggle properties.
-$navigation-toggle-content: "'☰'" !default;
-
-// Navigation branding properties.
-$navigation-branding-text-decoration: none !default;
-$navigation-branding-visited-text-decoration: $navigation-branding-text-decoration !default;
-$navigation-branding-focus-text-decoration: $navigation-branding-text-decoration !default;
-$navigation-branding-hover-text-decoration: $navigation-branding-text-decoration !default;
-$navigation-branding-active-text-decoration: $navigation-branding-text-decoration !default;
-$navigation-branding-disabled-text-decoration: $navigation-branding-text-decoration !default;
-$navigation-branding-text-decoration-style: solid !default;
-$navigation-branding-visited-text-decoration-style: $navigation-branding-text-decoration-style !default;
-$navigation-branding-focus-text-decoration-style: $navigation-branding-text-decoration-style !default;
-$navigation-branding-hover-text-decoration-style: $navigation-branding-text-decoration-style !default;
-$navigation-branding-active-text-decoration-style: $navigation-branding-text-decoration-style !default;
-$navigation-branding-disabled-text-decoration-style: $navigation-branding-text-decoration-style !default;

package/src/scss/functions/_important.scss

@@ -1,13 +0,0 @@
-// @graupl/graupl important functions.
-//
-// A function to determine if the !important flag should be added to a property.
-
-@use "../defaults";
-
-@function insert($value) {
-  @if defaults.$use-important {
-    @return #{$value !important};
-  }
-
-  @return #{$value};
-}

package/src/scss/layout/columns/_index.scss

@@ -1,58 +0,0 @@
-// @graupl/graupl columns layout styles.
-
-@use "variables" as *;
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/screen";
-
-@include layer(layout) {
-  #{defaults.$columns-selector} {
-    display: grid;
-    grid-template-columns: $columns-grid-template-columns;
-    gap: $columns-row-gap $columns-column-gap;
-
-    > * {
-      grid-column: span $columns-span;
-    }
-  }
-
-  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    #{defaults.$columns-count-selector-prefix}#{$i} {
-      --#{root-defaults.$prefix}columns-count: #{$i};
-
-      // For span values bigger than the actual column count, set them to the
-      // maximum column count so they don't break the layout.
-      @for $j from $i + 1 through defaults.$columns-max-count {
-        #{defaults.$columns-span-selector-prefix}#{$j} {
-          --#{root-defaults.$prefix}columns-span: #{$i};
-        }
-      }
-    }
-
-    #{defaults.$columns-span-selector-prefix}#{$i} {
-      --#{root-defaults.$prefix}columns-span: #{$i};
-    }
-  }
-
-  // Disable columns on small screens to avoid horizontal bleeding.
-  @include screen.trigger(force-single-column) {
-    #{defaults.$columns-selector} {
-      --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};
-
-      > * {
-        --#{root-defaults.$prefix}columns-span: 1;
-      }
-
-      // All spans should be set to 1 to avoid adding columns.
-      @for $i
-        from defaults.$columns-min-count
-        through defaults.$columns-max-count
-      {
-        #{defaults.$columns-span-selector-prefix}#{$i} {
-          --#{root-defaults.$prefix}columns-span: 1;
-        }
-      }
-    }
-  }
-}

package/src/scss/layout/container/_defaults.scss

@@ -1,17 +0,0 @@
-// @graupl/graupl container layout default values.
-//
-// Generally, these should not be used directly when styling components unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-// Container selectors.
-$container-selector: ".container" !default;
-$container-breakout-selector: ".breakout" !default;
-$container-feature-selector: ".feature" !default;
-$container-full-width-selector: ".full-width" !default;
-
-// Container properties.
-$container-breakout-width: 15ch !default;
-$container-feature-width: 20ch !default;

package/src/scss/layout/container/_index.scss

@@ -1,41 +0,0 @@
-// @graupl/graupl container layout styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-
-@include layer(layout) {
-  #{defaults.$container-selector},
-  #{defaults.$container-selector} > #{defaults.$container-full-width-selector} {
-    display: grid;
-    grid-template-columns:
-      [full-width-start] $container-full-width-section-width
-      [feature-start] $container-feature-section-width
-      [breakout-start] $container-breakout-section-width
-      [content-start] $container-content-section-width
-      [content-end]
-      $container-breakout-section-width [breakout-end]
-      $container-feature-section-width [feature-end]
-      $container-full-width-section-width [full-width-end];
-
-    > :not(
-        #{defaults.$container-breakout-selector},
-        #{defaults.$container-full-width-selector},
-        #{defaults.$container-feature-selector}
-      ) {
-      grid-column: content;
-    }
-
-    #{defaults.$container-breakout-selector} {
-      grid-column: breakout;
-    }
-
-    #{defaults.$container-feature-selector} {
-      grid-column: feature;
-    }
-
-    #{defaults.$container-full-width-selector} {
-      grid-column: full-width;
-    }
-  }
-}

package/src/scss/layout/container/_variables.scss

@@ -1,50 +0,0 @@
-// @graupl/graupl container layout variables.
-//
-// These values are to be used to directly style components and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../variables" as root-variables;
-@use "../../defaults" as root-defaults;
-@use "sass:map";
-
-$container-gap: var(
-  --#{root-defaults.$prefix}container-gap,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$container-content-max-width: var(
-  --#{root-defaults.$prefix}container-content-max-width,
-  #{root-variables.$content-max-width}
-);
-$container-breakout-max-width: var(
-  --#{root-defaults.$prefix}container-breakout-max-width,
-  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
-);
-$container-breakout-width: var(
-  --#{root-defaults.$prefix}container-breakout-width,
-  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
-);
-$container-feature-max-width: var(
-  --#{root-defaults.$prefix}container-feature-max-width,
-  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
-);
-$container-feature-width: var(
-  --#{root-defaults.$prefix}container-feature-width,
-  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
-);
-$container-content-section-width: var(
-  --#{root-defaults.$prefix}container-content-section-width,
-  min(#{$container-content-max-width}, calc(100% - #{$container-gap} * 2))
-);
-$container-full-width-section-width: var(
-  --#{root-defaults.$prefix}container-full-width-section-width,
-  minmax(#{$container-gap}, 1fr)
-);
-$container-breakout-section-width: var(
-  --#{root-defaults.$prefix}container-breakout-section-width,
-  minmax(0, #{$container-breakout-width})
-);
-$container-feature-section-width: var(
-  --#{root-defaults.$prefix}container-feature-section-width,
-  minmax(0, #{$container-feature-width})
-);

package/src/scss/layout/flex-columns/_defaults.scss

@@ -1,18 +0,0 @@
-// @graupl/graupl flex columns layout default values.
-//
-// Generally, these should not be used directly when styling components unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-// Flex columns selectors.
-$flex-columns-selector: ".flex-columns" !default;
-$flex-columns-column-selector-prefix: ".col-" !default;
-$flex-columns-fill-selector: ".fill" !default;
-
-// Flex columns properties.
-$flex-columns-min-count: 1 !default;
-$flex-columns-max-count: 12 !default;
-$flex-columns-size: auto !default;
-$flex-columns-max-width: unset !default;