aloha-vue 2.62.0 → 2.63.0

package/scss/utils/modal.scss

@@ -1,173 +1,173 @@
-@use "aloha_prefix" as aloha;
-@use "breakpoint";
-@use "backdrop";
-
-.#{aloha.$aloha-prefix}modal_open {
-  overflow: hidden;
-  padding-right: 0.9375rem;
-}
-
-.#{aloha.$aloha-prefix}modal {
-  --#{aloha.$aloha-prefix}modal_zindex: var(--a_z_index_modal);
-  --#{aloha.$aloha-prefix}modal_width: 31.25rem;
-  --#{aloha.$aloha-prefix}modal_padding: 1rem;
-  --#{aloha.$aloha-prefix}modal_margin: 0.5rem;
-  --#{aloha.$aloha-prefix}modal_color: inherit;
-  --#{aloha.$aloha-prefix}modal_bg: #fff;
-  --#{aloha.$aloha-prefix}modal_border_color: var(--#{aloha.$aloha-prefix}border_color_translucent);
-  --#{aloha.$aloha-prefix}modal_border_width: 1px;
-  --#{aloha.$aloha-prefix}modal_border_radius: var(--#{aloha.$aloha-prefix}border_radius_large);
-  --#{aloha.$aloha-prefix}modal_box_shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  --#{aloha.$aloha-prefix}modal_inner_border_radius: calc(0.5rem - 0.0625rem);
-  --#{aloha.$aloha-prefix}modal_header_padding_x: 1rem;
-  --#{aloha.$aloha-prefix}modal_header_padding_y: 1rem;
-  --#{aloha.$aloha-prefix}modal_header_padding: 1rem 1rem;
-  --#{aloha.$aloha-prefix}modal_header_border_color: var(--#{aloha.$aloha-prefix}border_color);
-  --#{aloha.$aloha-prefix}modal_header_border_width: 1px;
-  --#{aloha.$aloha-prefix}modal_title_line_height: 1.5;
-  --#{aloha.$aloha-prefix}modal_footer_gap: 0.5rem;
-  --#{aloha.$aloha-prefix}modal_footer_bg: inherit;
-  --#{aloha.$aloha-prefix}modal_footer_border_color: var(--#{aloha.$aloha-prefix}border_color);
-  --#{aloha.$aloha-prefix}modal_footer_border_width: 1px;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--#{aloha.$aloha-prefix}modal_zindex);
-  display: none;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: 0;
-}
-.#{aloha.$aloha-prefix}modal_confirm {
-  --#{aloha.$aloha-prefix}modal_zindex: var(--a_z_index_confirm);
-}
-.#{aloha.$aloha-prefix}modal_show {
-  display: block;
-}
-.#{aloha.$aloha-prefix}modal_dialog {
-  position: relative;
-  width: auto;
-  margin: var(--#{aloha.$aloha-prefix}modal_margin);
-  pointer-events: none;
-}
-
-.#{aloha.$aloha-prefix}modal_content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  color: var(--#{aloha.$aloha-prefix}modal_color);
-  pointer-events: auto;
-  background-color: var(--#{aloha.$aloha-prefix}modal_bg);
-  background-clip: padding-box;
-  border: var(--#{aloha.$aloha-prefix}modal_border_width) solid var(--#{aloha.$aloha-prefix}modal_border_color);
-  border-radius: var(--#{aloha.$aloha-prefix}modal_border_radius);
-  outline: 0;
-  .#{aloha.$aloha-prefix}modal_dialog_scrollable & {
-    max-height: 100%;
-    overflow: hidden;
-  }
-}
-.#{aloha.$aloha-prefix}modal_dialog_scrollable {
-  height: calc(100% - var(--#{aloha.$aloha-prefix}modal_margin) * 2);
-}
-.#{aloha.$aloha-prefix}modal_header {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--#{aloha.$aloha-prefix}modal_header_padding);
-  border-bottom: var(--#{aloha.$aloha-prefix}modal_header_border_width) solid var(--#{aloha.$aloha-prefix}modal_header_border_color);
-  border-top-left-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
-  border-top-right-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
-  .#{aloha.$aloha-prefix}btn_close {
-    padding: calc(var(--#{aloha.$aloha-prefix}modal_header_padding_y) * .5) calc(var(--#{aloha.$aloha-prefix}modal_header_padding_x) * .5);
-    margin: calc(var(--#{aloha.$aloha-prefix}modal_header_padding_y) * -.5) calc(var(--#{aloha.$aloha-prefix}modal_header_padding_x) * -.5) calc(var(--#{aloha.$aloha-prefix}modal_header_padding_y) * -.5) auto;
-  }
-}
-.#{aloha.$aloha-prefix}modal_title {
-  margin: 0;
-  line-height: var(--#{aloha.$aloha-prefix}modal_title_line_height);
-}
-.#{aloha.$aloha-prefix}modal_body {
-  position: relative;
-  flex: 1 1 auto;
-  padding: var(--#{aloha.$aloha-prefix}modal_padding);
-  .#{aloha.$aloha-prefix}modal_dialog_scrollable & {
-    overflow-y: auto;
-  }
-}
-.#{aloha.$aloha-prefix}modal_footer {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  padding: calc(var(--#{aloha.$aloha-prefix}modal_padding) - var(--#{aloha.$aloha-prefix}modal_footer_gap) * .5);
-  background-color: var(--#{aloha.$aloha-prefix}modal_footer_bg);
-  border-top: var(--#{aloha.$aloha-prefix}modal_footer_border_width) solid var(--#{aloha.$aloha-prefix}modal_footer_border_color);
-  border-bottom-right-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
-  border-bottom-left-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
-  & > * {
-    margin: calc(var(--#{aloha.$aloha-prefix}modal_footer_gap) * 0.5);
-  }
-}
-@media (min-width: #{breakpoint.$a_breakpoint_mobile}) {
-  .#{aloha.$aloha-prefix}modal_large {
-    --#{aloha.$aloha-prefix}modal_width: min(800px, 90vw);
-  }
-  .#{aloha.$aloha-prefix}modal_xl,
-  .#{aloha.$aloha-prefix}modal_xxl {
-    --#{aloha.$aloha-prefix}modal_width: 90vw;
-  }
-  .#{aloha.$aloha-prefix}modal {
-    --#{aloha.$aloha-prefix}modal_margin: 1.75rem;
-    --#{aloha.$aloha-prefix}modal_box_shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  }
-  .#{aloha.$aloha-prefix}modal_dialog {
-    max-width: var(--#{aloha.$aloha-prefix}modal_width);
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .#{aloha.$aloha-prefix}modal_small {
-    --#{aloha.$aloha-prefix}modal_width: 300px;
-  }
-}
-@media (min-width: #{breakpoint.$a_breakpoint_tablet}) {
-  .#{aloha.$aloha-prefix}modal_large {
-    --#{aloha.$aloha-prefix}modal_width: 800px;
-  }
-  .#{aloha.$aloha-prefix}modal_xl,
-  .#{aloha.$aloha-prefix}modal_xxl {
-    --#{aloha.$aloha-prefix}modal_width: 90vw;
-  }
-}
-@media (min-width: #{breakpoint.$a_breakpoint_desktop}) {
-  .#{aloha.$aloha-prefix}modal_xl {
-    --#{aloha.$aloha-prefix}modal_width: 1140px;
-  }
-  .#{aloha.$aloha-prefix}modal_xxl {
-    --#{aloha.$aloha-prefix}modal_width: 90vw;
-  }
-}
-.#{aloha.$aloha-prefix}modal_fullscreen {
-  width: 100vw;
-  max-width: none;
-  height: 100%;
-  margin: 0;
-  .#{aloha.$aloha-prefix}modal_content {
-    height: 100%;
-    border: 0;
-    border-radius: 0;
-  }
-  .#{aloha.$aloha-prefix}modal_header,
-  .#{aloha.$aloha-prefix}modal_footer {
-    border-radius: 0;
-  }
-  .#{aloha.$aloha-prefix}modal_body {
-    overflow-y: auto;
-  }
-}
+@use "aloha_prefix" as aloha;
+@use "breakpoint";
+@use "backdrop";
+
+.#{aloha.$aloha-prefix}modal_open {
+  overflow: hidden;
+  padding-right: 0.9375rem;
+}
+
+.#{aloha.$aloha-prefix}modal {
+  --#{aloha.$aloha-prefix}modal_zindex: var(--a_z_index_modal);
+  --#{aloha.$aloha-prefix}modal_width: 31.25rem;
+  --#{aloha.$aloha-prefix}modal_padding: 1rem;
+  --#{aloha.$aloha-prefix}modal_margin: 0.5rem;
+  --#{aloha.$aloha-prefix}modal_color: inherit;
+  --#{aloha.$aloha-prefix}modal_bg: #fff;
+  --#{aloha.$aloha-prefix}modal_border_color: var(--#{aloha.$aloha-prefix}border_color_translucent);
+  --#{aloha.$aloha-prefix}modal_border_width: 1px;
+  --#{aloha.$aloha-prefix}modal_border_radius: var(--#{aloha.$aloha-prefix}border_radius_large);
+  --#{aloha.$aloha-prefix}modal_box_shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --#{aloha.$aloha-prefix}modal_inner_border_radius: calc(0.5rem - 0.0625rem);
+  --#{aloha.$aloha-prefix}modal_header_padding_x: 1rem;
+  --#{aloha.$aloha-prefix}modal_header_padding_y: 1rem;
+  --#{aloha.$aloha-prefix}modal_header_padding: 1rem 1rem;
+  --#{aloha.$aloha-prefix}modal_header_border_color: var(--#{aloha.$aloha-prefix}border_color);
+  --#{aloha.$aloha-prefix}modal_header_border_width: 1px;
+  --#{aloha.$aloha-prefix}modal_title_line_height: 1.5;
+  --#{aloha.$aloha-prefix}modal_footer_gap: 0.5rem;
+  --#{aloha.$aloha-prefix}modal_footer_bg: inherit;
+  --#{aloha.$aloha-prefix}modal_footer_border_color: var(--#{aloha.$aloha-prefix}border_color);
+  --#{aloha.$aloha-prefix}modal_footer_border_width: 1px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--#{aloha.$aloha-prefix}modal_zindex);
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+.#{aloha.$aloha-prefix}modal_confirm {
+  --#{aloha.$aloha-prefix}modal_zindex: var(--a_z_index_confirm);
+}
+.#{aloha.$aloha-prefix}modal_show {
+  display: block;
+}
+.#{aloha.$aloha-prefix}modal_dialog {
+  position: relative;
+  width: auto;
+  margin: var(--#{aloha.$aloha-prefix}modal_margin);
+  pointer-events: none;
+}
+
+.#{aloha.$aloha-prefix}modal_content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: var(--#{aloha.$aloha-prefix}modal_color);
+  pointer-events: auto;
+  background-color: var(--#{aloha.$aloha-prefix}modal_bg);
+  background-clip: padding-box;
+  border: var(--#{aloha.$aloha-prefix}modal_border_width) solid var(--#{aloha.$aloha-prefix}modal_border_color);
+  border-radius: var(--#{aloha.$aloha-prefix}modal_border_radius);
+  outline: 0;
+  .#{aloha.$aloha-prefix}modal_dialog_scrollable & {
+    max-height: 100%;
+    overflow: hidden;
+  }
+}
+.#{aloha.$aloha-prefix}modal_dialog_scrollable {
+  height: calc(100% - var(--#{aloha.$aloha-prefix}modal_margin) * 2);
+}
+.#{aloha.$aloha-prefix}modal_header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--#{aloha.$aloha-prefix}modal_header_padding);
+  border-bottom: var(--#{aloha.$aloha-prefix}modal_header_border_width) solid var(--#{aloha.$aloha-prefix}modal_header_border_color);
+  border-top-left-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
+  border-top-right-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
+  .#{aloha.$aloha-prefix}btn_close {
+    padding: calc(var(--#{aloha.$aloha-prefix}modal_header_padding_y) * .5) calc(var(--#{aloha.$aloha-prefix}modal_header_padding_x) * .5);
+    margin: calc(var(--#{aloha.$aloha-prefix}modal_header_padding_y) * -.5) calc(var(--#{aloha.$aloha-prefix}modal_header_padding_x) * -.5) calc(var(--#{aloha.$aloha-prefix}modal_header_padding_y) * -.5) auto;
+  }
+}
+.#{aloha.$aloha-prefix}modal_title {
+  margin: 0;
+  line-height: var(--#{aloha.$aloha-prefix}modal_title_line_height);
+}
+.#{aloha.$aloha-prefix}modal_body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--#{aloha.$aloha-prefix}modal_padding);
+  .#{aloha.$aloha-prefix}modal_dialog_scrollable & {
+    overflow-y: auto;
+  }
+}
+.#{aloha.$aloha-prefix}modal_footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: calc(var(--#{aloha.$aloha-prefix}modal_padding) - var(--#{aloha.$aloha-prefix}modal_footer_gap) * .5);
+  background-color: var(--#{aloha.$aloha-prefix}modal_footer_bg);
+  border-top: var(--#{aloha.$aloha-prefix}modal_footer_border_width) solid var(--#{aloha.$aloha-prefix}modal_footer_border_color);
+  border-bottom-right-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
+  border-bottom-left-radius: var(--#{aloha.$aloha-prefix}modal_inner_border_radius);
+  & > * {
+    margin: calc(var(--#{aloha.$aloha-prefix}modal_footer_gap) * 0.5);
+  }
+}
+@media (min-width: #{breakpoint.$a_breakpoint_mobile}) {
+  .#{aloha.$aloha-prefix}modal_large {
+    --#{aloha.$aloha-prefix}modal_width: min(800px, 90vw);
+  }
+  .#{aloha.$aloha-prefix}modal_xl,
+  .#{aloha.$aloha-prefix}modal_xxl {
+    --#{aloha.$aloha-prefix}modal_width: 90vw;
+  }
+  .#{aloha.$aloha-prefix}modal {
+    --#{aloha.$aloha-prefix}modal_margin: 1.75rem;
+    --#{aloha.$aloha-prefix}modal_box_shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+  .#{aloha.$aloha-prefix}modal_dialog {
+    max-width: var(--#{aloha.$aloha-prefix}modal_width);
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .#{aloha.$aloha-prefix}modal_small {
+    --#{aloha.$aloha-prefix}modal_width: 300px;
+  }
+}
+@media (min-width: #{breakpoint.$a_breakpoint_tablet}) {
+  .#{aloha.$aloha-prefix}modal_large {
+    --#{aloha.$aloha-prefix}modal_width: 800px;
+  }
+  .#{aloha.$aloha-prefix}modal_xl,
+  .#{aloha.$aloha-prefix}modal_xxl {
+    --#{aloha.$aloha-prefix}modal_width: 90vw;
+  }
+}
+@media (min-width: #{breakpoint.$a_breakpoint_desktop}) {
+  .#{aloha.$aloha-prefix}modal_xl {
+    --#{aloha.$aloha-prefix}modal_width: 1140px;
+  }
+  .#{aloha.$aloha-prefix}modal_xxl {
+    --#{aloha.$aloha-prefix}modal_width: 90vw;
+  }
+}
+.#{aloha.$aloha-prefix}modal_fullscreen {
+  width: 100vw;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+  .#{aloha.$aloha-prefix}modal_content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .#{aloha.$aloha-prefix}modal_header,
+  .#{aloha.$aloha-prefix}modal_footer {
+    border-radius: 0;
+  }
+  .#{aloha.$aloha-prefix}modal_body {
+    overflow-y: auto;
+  }
+}

package/scss/utils/sizing.scss

@@ -1,137 +1,137 @@
-@use "sass:map";
-
-@use "aloha_prefix" as aloha;
-@use "breakpoint";
-@use "funktions";
-@use "mixins";
-
-$a_is_sizing_important: true !default;
-$a_sizing_width: (
-    property: width,
-    class: width,
-    values: (
-        50px:   50px,
-        100px:  100px,
-        150px:  150px,
-        200px:  200px,
-        250px:  250px,
-        300px:  300px,
-        350px:  350px,
-        400px:  400px,
-        1:      .25rem,
-        2:      .5rem,
-        3:      .75rem,
-        4:      1rem,
-        5:      1.5rem,
-        6:      3rem,
-        25:     25%,
-        50:     50%,
-        75:     75%,
-        100:    100%,
-        1rem:   1rem,
-        2rem:   2rem,
-        3rem:   3rem,
-        auto:   auto,
-    ),
-) !default;
-$a_sizing_max_width: (
-    property: max-width,
-    class: max_width,
-    values: (
-        100: 100%,
-    ),
-) !default;
-$a_sizing_viewport_width: (
-    property: width,
-    class: viewport_width,
-    values: (
-        100: 100vw,
-    ),
-) !default;
-$a_sizing_min_viewport_width: (
-    property: min-width,
-    class: min_viewport_width,
-    values: (
-        100: 100vw,
-    ),
-) !default;
-$a_sizing_height: (
-    property: height,
-    class: height,
-    values: (
-        1:  .25rem,
-        2:  .5rem,
-        3:  .75rem,
-        4:  1rem,
-        5:  1.5rem,
-        6:  3rem,
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%,
-        1rem:   1rem,
-        2rem:   2rem,
-        3rem:   3rem,
-        auto: auto,
-    ),
-) !default;
-$a_sizing_max_height: (
-    property: max-height,
-    class: max_height,
-    values: (
-        100: 100%,
-    ),
-) !default;
-$a_sizing_viewport_height: (
-    property: height,
-    class: viewport_height,
-    values: (
-        100: 100vh,
-    ),
-) !default;
-$a_sizing_min_viewport_height: (
-    property: min-height,
-    class: min_viewport_height,
-    values: (
-        100: 100vh,
-    ),
-) !default;
-
-$a_sizing: (
-        "width": $a_sizing_width,
-        "max-width": $a_sizing_max_width,
-        "viewport-width": $a_sizing_viewport_width,
-        "min-viewport-width": $a_sizing_min_viewport_width,
-        "height": $a_sizing_height,
-        "max-height": $a_sizing_max_height,
-        "viewport-height": $a_sizing_viewport_height,
-        "min-viewport-height": $a_sizing_min_viewport_height,
-);
-
-$a_sizing_important_suffix: "";
-@if $a_is_sizing_important {
-  $a_sizing_important_suffix: " !important";
-}
-
-$a_breakpoints_display: funktions.prepend(breakpoint.$a_breakpoints, (class: null));
-
-@each $breakpoint in $a_breakpoints_display {
-  $breakpoint-class: map.get($breakpoint, "class");
-  $breakpoint-min: map.get($breakpoint, "min");
-  $breakpoint-max: map.get($breakpoint, "max");
-
-  @each $name, $sizing-value in $a_sizing {
-    $property: map.get($sizing-value, "property");
-    $class: map.get($sizing-value, "class");
-    $values: map.get($sizing-value, "values");
-
-    @each $value-key, $value in $values {
-      @include mixins.media-width-all($breakpoint-min, $breakpoint-max) {
-        .#{aloha.$aloha-prefix}#{$class}_#{$value-key}#{ breakpoint.getBreakpointWithPrefix($breakpoint-class) } {
-          #{$property}: #{ $value }#{$a_sizing_important_suffix};
-        }
-      }
-    }
-  }
-}
-
+@use "sass:map";
+
+@use "aloha_prefix" as aloha;
+@use "breakpoint";
+@use "funktions";
+@use "mixins";
+
+$a_is_sizing_important: true !default;
+$a_sizing_width: (
+    property: width,
+    class: width,
+    values: (
+        50px:   50px,
+        100px:  100px,
+        150px:  150px,
+        200px:  200px,
+        250px:  250px,
+        300px:  300px,
+        350px:  350px,
+        400px:  400px,
+        1:      .25rem,
+        2:      .5rem,
+        3:      .75rem,
+        4:      1rem,
+        5:      1.5rem,
+        6:      3rem,
+        25:     25%,
+        50:     50%,
+        75:     75%,
+        100:    100%,
+        1rem:   1rem,
+        2rem:   2rem,
+        3rem:   3rem,
+        auto:   auto,
+    ),
+) !default;
+$a_sizing_max_width: (
+    property: max-width,
+    class: max_width,
+    values: (
+        100: 100%,
+    ),
+) !default;
+$a_sizing_viewport_width: (
+    property: width,
+    class: viewport_width,
+    values: (
+        100: 100vw,
+    ),
+) !default;
+$a_sizing_min_viewport_width: (
+    property: min-width,
+    class: min_viewport_width,
+    values: (
+        100: 100vw,
+    ),
+) !default;
+$a_sizing_height: (
+    property: height,
+    class: height,
+    values: (
+        1:  .25rem,
+        2:  .5rem,
+        3:  .75rem,
+        4:  1rem,
+        5:  1.5rem,
+        6:  3rem,
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%,
+        1rem:   1rem,
+        2rem:   2rem,
+        3rem:   3rem,
+        auto: auto,
+    ),
+) !default;
+$a_sizing_max_height: (
+    property: max-height,
+    class: max_height,
+    values: (
+        100: 100%,
+    ),
+) !default;
+$a_sizing_viewport_height: (
+    property: height,
+    class: viewport_height,
+    values: (
+        100: 100vh,
+    ),
+) !default;
+$a_sizing_min_viewport_height: (
+    property: min-height,
+    class: min_viewport_height,
+    values: (
+        100: 100vh,
+    ),
+) !default;
+
+$a_sizing: (
+        "width": $a_sizing_width,
+        "max-width": $a_sizing_max_width,
+        "viewport-width": $a_sizing_viewport_width,
+        "min-viewport-width": $a_sizing_min_viewport_width,
+        "height": $a_sizing_height,
+        "max-height": $a_sizing_max_height,
+        "viewport-height": $a_sizing_viewport_height,
+        "min-viewport-height": $a_sizing_min_viewport_height,
+);
+
+$a_sizing_important_suffix: "";
+@if $a_is_sizing_important {
+  $a_sizing_important_suffix: " !important";
+}
+
+$a_breakpoints_display: funktions.prepend(breakpoint.$a_breakpoints, (class: null));
+
+@each $breakpoint in $a_breakpoints_display {
+  $breakpoint-class: map.get($breakpoint, "class");
+  $breakpoint-min: map.get($breakpoint, "min");
+  $breakpoint-max: map.get($breakpoint, "max");
+
+  @each $name, $sizing-value in $a_sizing {
+    $property: map.get($sizing-value, "property");
+    $class: map.get($sizing-value, "class");
+    $values: map.get($sizing-value, "values");
+
+    @each $value-key, $value in $values {
+      @include mixins.media-width-all($breakpoint-min, $breakpoint-max) {
+        .#{aloha.$aloha-prefix}#{$class}_#{$value-key}#{ breakpoint.getBreakpointWithPrefix($breakpoint-class) } {
+          #{$property}: #{ $value }#{$a_sizing_important_suffix};
+        }
+      }
+    }
+  }
+}
+