aloha-vue 2.75.1 → 2.76.0

package/scss/text/text_size.scss

@@ -1,88 +1,88 @@
-@use "sass:map";
-@use "sass:string";
-
-@use "../utils/aloha_prefix" as aloha;
-@use "../utils/breakpoint";
-
-$a_font_sizes: (
-        (
-                class: "1",
-                value: calc(1.375rem + 1.5vw),
-                value-desktop: 2.5,
-                is-tag: true,
-        ),
-        (
-                class: "2",
-                value: calc(1.325rem + .9vw),
-                value-desktop: 2,
-                is-tag: true,
-        ),
-        (
-                class: "3",
-                value: calc(1.3rem + .6vw),
-                value-desktop: 1.75,
-                is-tag: true,
-        ),
-        (
-                class: "4",
-                value: calc(1.275rem + .3vw),
-                value-desktop: 1.5,
-                is-tag: true,
-        ),
-        (
-                class: "5",
-                value: 1.25,
-                is-tag: true,
-        ),
-        (
-                class: "6",
-                value: 1,
-                is-tag: true,
-        ),
-        (
-                class: "7",
-                value: 0.75,
-        ),
-) !default;
-
-@each $font_size in $a_font_sizes {
-  $font_size_class: map.get($font_size, "class");
-  $font_size_value: map.get($font_size, "value");
-  $font_size_value_desktop: map.get($font_size, "value-desktop");
-  $font_size_is_tag: map.get($font_size, "is-tag");
-  $font_size_local: null;
-  @if $font_size_value {
-    @if string.index("" + $font_size_value, "calc") {
-      $font_size_local: #{ $font_size_value };
-    } @else {
-      $font_size_local: calc(var(--#{aloha.$aloha-prefix}body_font_size) * #{ $font_size_value });
-    }
-    .#{aloha.$aloha-prefix}fs_#{$font_size_class} {
-      font-size: #{ $font_size_local } !important;
-    }
-    @if $font_size_is_tag {
-      h#{$font_size_class} {
-        font-size: #{ $font_size_local };
-      }
-    }
-  }
-
-  @if $font_size_value_desktop {
-    @if string.index($font_size_value_desktop + "", "calc") {
-      $font_size_local: #{ $font_size_value_desktop };
-    } @else {
-      $font_size_local: calc(var(--#{aloha.$aloha-prefix}body_font_size) * #{ $font_size_value_desktop });
-    }
-    @media (min-width: #{breakpoint.$a_breakpoint_desktop_min}) {
-      .#{aloha.$aloha-prefix}fs_#{$font_size_class} {
-        font-size: #{ $font_size_local } !important;
-      }
-      @if $font_size_is_tag {
-        h#{$font_size_class} {
-          font-size: #{ $font_size_local };
-        }
-      }
-    }
-  }
-}
-
+@use "sass:map";
+@use "sass:string";
+
+@use "../utils/aloha_prefix" as aloha;
+@use "../utils/breakpoint";
+
+$a_font_sizes: (
+        (
+                class: "1",
+                value: calc(1.375rem + 1.5vw),
+                value-desktop: 2.5,
+                is-tag: true,
+        ),
+        (
+                class: "2",
+                value: calc(1.325rem + .9vw),
+                value-desktop: 2,
+                is-tag: true,
+        ),
+        (
+                class: "3",
+                value: calc(1.3rem + .6vw),
+                value-desktop: 1.75,
+                is-tag: true,
+        ),
+        (
+                class: "4",
+                value: calc(1.275rem + .3vw),
+                value-desktop: 1.5,
+                is-tag: true,
+        ),
+        (
+                class: "5",
+                value: 1.25,
+                is-tag: true,
+        ),
+        (
+                class: "6",
+                value: 1,
+                is-tag: true,
+        ),
+        (
+                class: "7",
+                value: 0.75,
+        ),
+) !default;
+
+@each $font_size in $a_font_sizes {
+  $font_size_class: map.get($font_size, "class");
+  $font_size_value: map.get($font_size, "value");
+  $font_size_value_desktop: map.get($font_size, "value-desktop");
+  $font_size_is_tag: map.get($font_size, "is-tag");
+  $font_size_local: null;
+  @if $font_size_value {
+    @if string.index("" + $font_size_value, "calc") {
+      $font_size_local: #{ $font_size_value };
+    } @else {
+      $font_size_local: calc(var(--#{aloha.$aloha-prefix}body_font_size) * #{ $font_size_value });
+    }
+    .#{aloha.$aloha-prefix}fs_#{$font_size_class} {
+      font-size: #{ $font_size_local } !important;
+    }
+    @if $font_size_is_tag {
+      h#{$font_size_class} {
+        font-size: #{ $font_size_local };
+      }
+    }
+  }
+
+  @if $font_size_value_desktop {
+    @if string.index($font_size_value_desktop + "", "calc") {
+      $font_size_local: #{ $font_size_value_desktop };
+    } @else {
+      $font_size_local: calc(var(--#{aloha.$aloha-prefix}body_font_size) * #{ $font_size_value_desktop });
+    }
+    @media (min-width: #{breakpoint.$a_breakpoint_desktop_min}) {
+      .#{aloha.$aloha-prefix}fs_#{$font_size_class} {
+        font-size: #{ $font_size_local } !important;
+      }
+      @if $font_size_is_tag {
+        h#{$font_size_class} {
+          font-size: #{ $font_size_local };
+        }
+      }
+    }
+  }
+}
+

package/scss/utils/acordion.scss

@@ -1,173 +1,173 @@
-@use "aloha_prefix" as aloha;
-@use "color_utils";
-@use "funktions";
-@use "global_variables";
-
-$a_input_btn_focus_width:         .25rem !default;
-$a_input_btn_focus_color_opacity: .25 !default;
-$a_input_btn_focus_color:         rgba(color_utils.$a_primary, $a_input_btn_focus_color_opacity) !default;
-$a_input_btn_focus_blur:          0 !default;
-$a_input_btn_focus_box_shadow:    0 0 $a_input_btn_focus_blur $a_input_btn_focus_width $a_input_btn_focus_color !default;
-
-$a_input_btn_focus_color_opacity: .25 !default;
-$a_input_focus_border_color:              funktions.tint-color(color_utils.$a_primary, 50%) !default;
-$a_btn_focus_box_shadow:        $a_input_btn_focus_box_shadow !default;
-
-$a_accordion_padding_y:                     1rem !default;
-$a_accordion_padding_x:                     1.25rem !default;
-$a_accordion_color:                         var(--#{aloha.$aloha-prefix}color_text) !default;
-$a_accordion_bg:                            color_utils.$a_body_bg !default;
-$a_accordion_border_width:                  global_variables.$a_border_width !default;
-$a_accordion_border_color:                  var(--#{aloha.$aloha-prefix}border_color) !default;
-$a_accordion_border_radius:                 var(--a_border_radius) !default;
-$a_accordion_font_size:                     inherit !default;
-
-$a_accordion_body_padding_y:                $a_accordion_padding_y !default;
-$a_accordion_body_padding_x:                $a_accordion_padding_x !default;
-
-$a_accordion_button_padding_y:              $a_accordion_padding_y !default;
-$a_accordion_button_padding_x:              $a_accordion_padding_x !default;
-$a_accordion_button_color:                  $a_accordion_color !default;
-$a_accordion_button_bg:                     var(--#{aloha.$aloha-prefix}accordion_bg) !default;
-$a_accordion_transition:                    global_variables.$a_btn_transition, border-radius .15s ease !default;
-$a_accordion_button_active_bg:              funktions.tint-color(color_utils.$a_primary, 90%) !default;
-$a_accordion_button_active_color:           funktions.shade-color(color_utils.$a_primary, 10%) !default;
-
-$a_accordion_button_focus_border_color:     $a_input_focus_border_color !default;
-$a_accordion_button_focus_box_shadow:       $a_btn_focus_box_shadow !default;
-$a_accordion_button_hover_bg:               var(--#{aloha.$aloha-prefix}color_gray_100) !default;
-
-$a_accordion_icon_width:                    1.25rem !default;
-
-
-//
-// Base styles
-//
-
-.#{aloha.$aloha-prefix}accordion {
-  --a_accordion_color: #{funktions.color-contrast($a_accordion_bg)};
-  --a_accordion_bg: #{$a_accordion_bg};
-  --a_accordion_transition: #{$a_accordion_transition};
-  --a_accordion_border_color: #{$a_accordion_border_color};
-  --a_accordion_border_width: #{$a_accordion_border_width};
-  --a_accordion_border_radius: #{$a_accordion_border_radius};
-  --a_accordion_btn_padding_x: #{$a_accordion_button_padding_x};
-  --a_accordion_btn_padding_y: #{$a_accordion_button_padding_y};
-  --a_accordion_btn_color: #{$a_accordion_color};
-  --a_accordion_btn_bg: #{$a_accordion_button_bg};
-  --a_accordion_btn_icon_width: #{$a_accordion_icon_width};
-  --a_accordion_btn_focus_border_color: #{$a_accordion_button_focus_border_color};
-  --a_accordion_btn_focus_box_shadow: #{$a_accordion_button_focus_box_shadow};
-  --a_accordion_btn_hover_bg: #{$a_accordion_button_hover_bg};
-  --a_accordion_body_padding_x: #{$a_accordion_body_padding_x};
-  --a_accordion_body_padding_y: #{$a_accordion_body_padding_y};
-  --a_accordion_active_color: #{$a_accordion_button_active_color};
-  --a_accordion_active_bg: #{$a_accordion_button_active_bg};
-  --a_accordion_with_gap_margin_bottom: 1rem;
-
-  font-size: #{ $a_accordion_font_size };
-}
-
-.#{aloha.$aloha-prefix}accordion__button {
-  position: relative;
-  display: flex;
-  gap: .5rem;
-  align-items: center;
-  width: 100%;
-  padding: var(--a_accordion_btn_padding_y) var(--a_accordion_btn_padding_x);
-  color: var(--a_accordion_btn_color);
-  text-align: left; // Reset button style
-  background-color: var(--a_accordion_btn_bg);
-  border: 0;
-  overflow-anchor: none;
-  font-size: inherit;
-  cursor: pointer;
-  &.readonly,
-  &.disabled {
-    cursor: inherit;
-  }
-
-  &:not(.#{aloha.$aloha-prefix}accordion__button_close) {
-    color: var(--a_accordion_active_color);
-    background-color: var(--a_accordion_active_bg);
-    box-shadow: inset 0 calc(var(--a_accordion_border_width) * -1) 0 var(--a_accordion_border_color); // stylelint-disable-line function-disallowed-list
-  }
-
-  .#{aloha.$aloha-prefix}accordion__button__icon {
-    flex-shrink: 0;
-    width: var(--a_accordion_btn_icon_width);
-    height: var(--a_accordion_btn_icon_width);
-    margin-left: auto;
-  }
-
-  &:hover {
-    z-index: 2;
-    background-color: var(--a_accordion_btn_hover_bg);
-  }
-
-  &:focus {
-    z-index: 3;
-    border-color: var(--a_accordion_btn_focus_border_color);
-    outline: 0;
-    box-shadow: var(--a_accordion_btn_focus_box_shadow);
-  }
-}
-
-.#{aloha.$aloha-prefix}accordion__header {
-  margin-bottom: 0;
-}
-
-.#{aloha.$aloha-prefix}accordion__item {
-  color: var(--a_accordion_color);
-  background-color: var(--a_accordion_bg);
-  border: var(--a_accordion_border_width) solid var(--a_accordion_border_color);
-
-  &:first-of-type {
-    border-top-left-radius: var(--a_accordion_border_radius);
-    border-top-right-radius: var(--a_accordion_border_radius);
-    .#{aloha.$aloha-prefix}accordion__button {
-      border-top-left-radius: var(--a_accordion_border_radius);
-      border-top-right-radius: var(--a_accordion_border_radius);
-    }
-  }
-
-  &:not(:first-of-type) {
-    border-top: 0;
-  }
-
-  // Only set a border-radius on the last item if the accordion is collapsed
-  &:last-of-type {
-    border-bottom-right-radius: var(--a_accordion_border_radius);
-    border-bottom-left-radius: var(--a_accordion_border_radius);
-    .#{aloha.$aloha-prefix}accordion__button_close {
-      border-bottom-right-radius: var(--a_accordion_border_radius);
-      border-bottom-left-radius: var(--a_accordion_border_radius);
-    }
-  }
-}
-
-.#{aloha.$aloha-prefix}accordion__body {
-  padding: var(--a_accordion_body_padding_y) var(--a_accordion_body_padding_x);
-  border-radius: inherit;
-}
-
-.#{aloha.$aloha-prefix}accordion__collapse_box {
-  display: none;
-  border-radius: inherit;
-}
-.#{aloha.$aloha-prefix}accordion__collapse_box_show {
-  display: block;
-}
-
-// Gap
-.#{aloha.$aloha-prefix}accordion__item.#{aloha.$aloha-prefix}accordion__item_with_gap {
-  margin-bottom: var(--a_accordion_with_gap_margin_bottom);
-  border: var(--a_accordion_border_width) solid var(--a_accordion_border_color);
-  border-radius: var(--a_accordion_border_radius);
-}
-.#{aloha.$aloha-prefix}accordion__button.#{aloha.$aloha-prefix}accordion__button_with_gap {
-  border-radius: var(--a_accordion_border_radius) var(--a_accordion_border_radius) 0 0;
-  &.#{aloha.$aloha-prefix}accordion__button_collapsed {
-    border-radius: var(--a_accordion_border_radius);
-  }
-}
+@use "aloha_prefix" as aloha;
+@use "color_utils";
+@use "funktions";
+@use "global_variables";
+
+$a_input_btn_focus_width:         .25rem !default;
+$a_input_btn_focus_color_opacity: .25 !default;
+$a_input_btn_focus_color:         rgba(color_utils.$a_primary, $a_input_btn_focus_color_opacity) !default;
+$a_input_btn_focus_blur:          0 !default;
+$a_input_btn_focus_box_shadow:    0 0 $a_input_btn_focus_blur $a_input_btn_focus_width $a_input_btn_focus_color !default;
+
+$a_input_btn_focus_color_opacity: .25 !default;
+$a_input_focus_border_color:              funktions.tint-color(color_utils.$a_primary, 50%) !default;
+$a_btn_focus_box_shadow:        $a_input_btn_focus_box_shadow !default;
+
+$a_accordion_padding_y:                     1rem !default;
+$a_accordion_padding_x:                     1.25rem !default;
+$a_accordion_color:                         var(--#{aloha.$aloha-prefix}color_text) !default;
+$a_accordion_bg:                            color_utils.$a_body_bg !default;
+$a_accordion_border_width:                  global_variables.$a_border_width !default;
+$a_accordion_border_color:                  var(--#{aloha.$aloha-prefix}border_color) !default;
+$a_accordion_border_radius:                 var(--a_border_radius) !default;
+$a_accordion_font_size:                     inherit !default;
+
+$a_accordion_body_padding_y:                $a_accordion_padding_y !default;
+$a_accordion_body_padding_x:                $a_accordion_padding_x !default;
+
+$a_accordion_button_padding_y:              $a_accordion_padding_y !default;
+$a_accordion_button_padding_x:              $a_accordion_padding_x !default;
+$a_accordion_button_color:                  $a_accordion_color !default;
+$a_accordion_button_bg:                     var(--#{aloha.$aloha-prefix}accordion_bg) !default;
+$a_accordion_transition:                    global_variables.$a_btn_transition, border-radius .15s ease !default;
+$a_accordion_button_active_bg:              funktions.tint-color(color_utils.$a_primary, 90%) !default;
+$a_accordion_button_active_color:           funktions.shade-color(color_utils.$a_primary, 10%) !default;
+
+$a_accordion_button_focus_border_color:     $a_input_focus_border_color !default;
+$a_accordion_button_focus_box_shadow:       $a_btn_focus_box_shadow !default;
+$a_accordion_button_hover_bg:               var(--#{aloha.$aloha-prefix}color_gray_100) !default;
+
+$a_accordion_icon_width:                    1.25rem !default;
+
+
+//
+// Base styles
+//
+
+.#{aloha.$aloha-prefix}accordion {
+  --a_accordion_color: #{funktions.color-contrast($a_accordion_bg)};
+  --a_accordion_bg: #{$a_accordion_bg};
+  --a_accordion_transition: #{$a_accordion_transition};
+  --a_accordion_border_color: #{$a_accordion_border_color};
+  --a_accordion_border_width: #{$a_accordion_border_width};
+  --a_accordion_border_radius: #{$a_accordion_border_radius};
+  --a_accordion_btn_padding_x: #{$a_accordion_button_padding_x};
+  --a_accordion_btn_padding_y: #{$a_accordion_button_padding_y};
+  --a_accordion_btn_color: #{$a_accordion_color};
+  --a_accordion_btn_bg: #{$a_accordion_button_bg};
+  --a_accordion_btn_icon_width: #{$a_accordion_icon_width};
+  --a_accordion_btn_focus_border_color: #{$a_accordion_button_focus_border_color};
+  --a_accordion_btn_focus_box_shadow: #{$a_accordion_button_focus_box_shadow};
+  --a_accordion_btn_hover_bg: #{$a_accordion_button_hover_bg};
+  --a_accordion_body_padding_x: #{$a_accordion_body_padding_x};
+  --a_accordion_body_padding_y: #{$a_accordion_body_padding_y};
+  --a_accordion_active_color: #{$a_accordion_button_active_color};
+  --a_accordion_active_bg: #{$a_accordion_button_active_bg};
+  --a_accordion_with_gap_margin_bottom: 1rem;
+
+  font-size: #{ $a_accordion_font_size };
+}
+
+.#{aloha.$aloha-prefix}accordion__button {
+  position: relative;
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  width: 100%;
+  padding: var(--a_accordion_btn_padding_y) var(--a_accordion_btn_padding_x);
+  color: var(--a_accordion_btn_color);
+  text-align: left; // Reset button style
+  background-color: var(--a_accordion_btn_bg);
+  border: 0;
+  overflow-anchor: none;
+  font-size: inherit;
+  cursor: pointer;
+  &.readonly,
+  &.disabled {
+    cursor: inherit;
+  }
+
+  &:not(.#{aloha.$aloha-prefix}accordion__button_close) {
+    color: var(--a_accordion_active_color);
+    background-color: var(--a_accordion_active_bg);
+    box-shadow: inset 0 calc(var(--a_accordion_border_width) * -1) 0 var(--a_accordion_border_color); // stylelint-disable-line function-disallowed-list
+  }
+
+  .#{aloha.$aloha-prefix}accordion__button__icon {
+    flex-shrink: 0;
+    width: var(--a_accordion_btn_icon_width);
+    height: var(--a_accordion_btn_icon_width);
+    margin-left: auto;
+  }
+
+  &:hover {
+    z-index: 2;
+    background-color: var(--a_accordion_btn_hover_bg);
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: var(--a_accordion_btn_focus_border_color);
+    outline: 0;
+    box-shadow: var(--a_accordion_btn_focus_box_shadow);
+  }
+}
+
+.#{aloha.$aloha-prefix}accordion__header {
+  margin-bottom: 0;
+}
+
+.#{aloha.$aloha-prefix}accordion__item {
+  color: var(--a_accordion_color);
+  background-color: var(--a_accordion_bg);
+  border: var(--a_accordion_border_width) solid var(--a_accordion_border_color);
+
+  &:first-of-type {
+    border-top-left-radius: var(--a_accordion_border_radius);
+    border-top-right-radius: var(--a_accordion_border_radius);
+    .#{aloha.$aloha-prefix}accordion__button {
+      border-top-left-radius: var(--a_accordion_border_radius);
+      border-top-right-radius: var(--a_accordion_border_radius);
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    border-bottom-right-radius: var(--a_accordion_border_radius);
+    border-bottom-left-radius: var(--a_accordion_border_radius);
+    .#{aloha.$aloha-prefix}accordion__button_close {
+      border-bottom-right-radius: var(--a_accordion_border_radius);
+      border-bottom-left-radius: var(--a_accordion_border_radius);
+    }
+  }
+}
+
+.#{aloha.$aloha-prefix}accordion__body {
+  padding: var(--a_accordion_body_padding_y) var(--a_accordion_body_padding_x);
+  border-radius: inherit;
+}
+
+.#{aloha.$aloha-prefix}accordion__collapse_box {
+  display: none;
+  border-radius: inherit;
+}
+.#{aloha.$aloha-prefix}accordion__collapse_box_show {
+  display: block;
+}
+
+// Gap
+.#{aloha.$aloha-prefix}accordion__item.#{aloha.$aloha-prefix}accordion__item_with_gap {
+  margin-bottom: var(--a_accordion_with_gap_margin_bottom);
+  border: var(--a_accordion_border_width) solid var(--a_accordion_border_color);
+  border-radius: var(--a_accordion_border_radius);
+}
+.#{aloha.$aloha-prefix}accordion__button.#{aloha.$aloha-prefix}accordion__button_with_gap {
+  border-radius: var(--a_accordion_border_radius) var(--a_accordion_border_radius) 0 0;
+  &.#{aloha.$aloha-prefix}accordion__button_collapsed {
+    border-radius: var(--a_accordion_border_radius);
+  }
+}