aloha-vue 2.62.0 → 2.63.0

package/scss/components/ui/ASelect.scss

@@ -1,236 +1,236 @@
-.a_form_element__parent_float.a_select__parent_has_error_icon {
-  > .a_form_element_label,
-  > .a_form_element_label.a_form_element_label_float,
-  > .a_form_element_label.a_form_element_label_error {
-    left: 2rem;
-    max-width: calc(100% - 2.625rem);
-  }
-
-  &:focus-within,
-  &.a_form_element__parent_not_empty {
-    > .a_form_element_label,
-    > .a_form_element_label.a_form_element_label_float,
-    > .a_form_element_label.a_form_element_label_error {
-      left: 0.625rem;
-      max-width: calc(100% - 1.25rem);
-    }
-  }
-}
-
-.a_select {
-  --a_select_border_radius: var(--a_border_radius);
-  --a_select_close_hover_color: --a_color_primary;
-  --a_select_placeholder_color: --a_color_gray_600;
-  --a_select_min_width: 12.5rem;
-  --a_select_closeable_item_bg: var(--a_color_gray_200);
-  --a_select_toggle_padding_right: 1.875rem;
-
-  position: relative;
-}
-
-.a_select_toggle {
-  position: relative;
-  min-width: var(--a_select_min_width);
-  min-height: calc(1.625rem + 0.375rem * 2);
-  padding-right: var(--a_select_toggle_padding_right);
-  text-align: left;
-  &.a_select_toggle_has_error_icon.a_form_control {
-    padding-left: 1.75rem;
-  }
-  &.a_select_toggle_closeable {
-    padding: 0 1.875rem 0 0;
-    &.a_select_toggle_has_error_icon.a_form_control {
-      padding-left: 1.75rem;
-    }
-  }
-}
-
-.a_select__error_icon.a_input__icon_error {
-  left: 0.625rem;
-  z-index: 1;
-}
-
-
-.a_caret {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 1.875rem;
-}
-
-.a_select__search {
-  margin-bottom: 0.625rem;
-}
-.a_select__search__group {
-  display: flex;
-  width: 100%;
-  & > div {
-    width: 100%;
-    .a_form_control {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-  & > button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    white-space: nowrap;
-  }
-}
-
-.a_select_menu {
-  --a_select_divider_margin_y: 0.5rem;
-  --a_select_divider_bg: var(--a_color_gray_300);
-  --a_select_border_radius: var(--a_border_radius);
-  --a_select_menu_max_height: 15.625rem;
-  --a_select_menu_max_width: 25rem;
-  --a_select_menu_link_color: var(--a_color_text);
-  --a_select_menu_link_hover_color: var(--a_color_text);
-  --a_select_menu_link_hover_bg: var(--a_color_gray_200);
-  --a_select_menu_link_focus_color: var(--a_color_focus);
-  --a_select_menu_link_disabled_color: var(--a_color_gray_500);
-
-  display: block;
-  min-width: 12.5rem;
-  max-width: var(--a_select_menu_max_width);
-  z-index: 1055;
-  background-color: #fff;
-  border: 1px solid grey;
-  padding: 0.625rem;
-  border-radius: var(--a_select_border_radius);
-  box-shadow: 0 0 7px 3px var(--a_color_gray_600);
-  &[data-popper-reference-hidden] {
-    visibility: hidden !important;
-    pointer-events: none !important;
-  }
-  .a_fieldset {
-    margin-top: 1rem;
-  }
-}
-.a_select_menu_by_content {
-  --a_select_menu_max_width: 100vw;
-  .a_select__menu__link {
-    white-space: nowrap;
-  }
-}
-.a_select_menu_right {
-  right: 0;
-  left: auto;
-}
-.a_select_menu__child {
-  max-height: var(--a_select_menu_max_height);
-  overflow: auto;
-}
-
-.a_select_list {
-  overflow: auto;
-  width: 100%;
-  min-height: 6.25rem;
-}
-
-.a_select__divider {
-  height: 0;
-  margin: var(--a_select_divider_margin_y) 0;
-  overflow: hidden;
-  border-top: 1px solid var(--a_select_divider_bg);
-  opacity: 1;
-}
-
-.a_select__menu__link {
-  position: relative;
-  display: block;
-  text-align: left;
-  padding: 0.125rem 0.25rem 0.125rem 1.5625rem;
-  border: none;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--a_select_menu_link_color);
-  word-wrap: break-word;
-  word-break: break-word;
-  hyphens: auto;
-  overflow-y: hidden;
-  &:not(.a_select__menu__link_disabled) {
-    &:hover {
-      background-color: var(--a_select_menu_link_hover_bg);
-      color: var(--a_select_menu_link_hover_color);
-    }
-    &:focus {
-      box-shadow: inset 0 0 1px 3px var(--a_select_menu_link_focus_color);
-      outline: none;
-    }
-  }
-}
-
-.a_select__menu__link_disabled {
-  color: var(--a_select_menu_link_disabled_color);
-  cursor: not-allowed;
-}
-
-.a_select__menu__link__icon_box {
-  // border: $checkbox-border;
-  width: 1.2rem;
-  height: 1.2rem;
-  display: block;
-  background-color: inherit;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-55%);
-  left: 0.3125rem;
-  > .a_icon {
-    vertical-align: inherit;
-  }
-}
-
-.a_select_not_items {
-  padding: 0.125rem 0.25rem 0.125rem 1.5625rem;
-  width: 100%;
-  display: inline-block;
-  text-align: left;
-}
-
-
-.a_select__value__label {
-  display: block;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 1.5625rem;
-}
-
-.a_select_toggle_has_error_icon {
-  .a_select__value__label {
-    padding-left: 0.25rem;
-  }
-  .a_select__ul_closeable {
-    padding-left: 0.25rem;
-  }
-}
-
-.a_select__ul_closeable {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
-}
-
-.a_select__ul_closeable__item {
-  display: flex;
-  margin: .25rem .375rem;
-  background-color: var(--a_select_closeable_item_bg);
-  padding-left: .5rem;
-  padding-right: .5rem;
-  border-radius: var(--a_select_border_radius);
-  word-wrap: break-word;
-  word-break: break-word;
-  hyphens: auto;
-}
-
-.a_select__ul_closeable__item__btn {
-  padding: 0 0 0 .25rem;
-}
+.a_form_element__parent_float.a_select__parent_has_error_icon {
+  > .a_form_element_label,
+  > .a_form_element_label.a_form_element_label_float,
+  > .a_form_element_label.a_form_element_label_error {
+    left: 2rem;
+    max-width: calc(100% - 2.625rem);
+  }
+
+  &:focus-within,
+  &.a_form_element__parent_not_empty {
+    > .a_form_element_label,
+    > .a_form_element_label.a_form_element_label_float,
+    > .a_form_element_label.a_form_element_label_error {
+      left: 0.625rem;
+      max-width: calc(100% - 1.25rem);
+    }
+  }
+}
+
+.a_select {
+  --a_select_border_radius: var(--a_border_radius);
+  --a_select_close_hover_color: --a_color_primary;
+  --a_select_placeholder_color: --a_color_gray_600;
+  --a_select_min_width: 12.5rem;
+  --a_select_closeable_item_bg: var(--a_color_gray_200);
+  --a_select_toggle_padding_right: 1.875rem;
+
+  position: relative;
+}
+
+.a_select_toggle {
+  position: relative;
+  min-width: var(--a_select_min_width);
+  min-height: calc(1.625rem + 0.375rem * 2);
+  padding-right: var(--a_select_toggle_padding_right);
+  text-align: left;
+  &.a_select_toggle_has_error_icon.a_form_control {
+    padding-left: 1.75rem;
+  }
+  &.a_select_toggle_closeable {
+    padding: 0 1.875rem 0 0;
+    &.a_select_toggle_has_error_icon.a_form_control {
+      padding-left: 1.75rem;
+    }
+  }
+}
+
+.a_select__error_icon.a_input__icon_error {
+  left: 0.625rem;
+  z-index: 1;
+}
+
+
+.a_caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 1.875rem;
+}
+
+.a_select__search {
+  margin-bottom: 0.625rem;
+}
+.a_select__search__group {
+  display: flex;
+  width: 100%;
+  & > div {
+    width: 100%;
+    .a_form_control {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  & > button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    white-space: nowrap;
+  }
+}
+
+.a_select_menu {
+  --a_select_divider_margin_y: 0.5rem;
+  --a_select_divider_bg: var(--a_color_gray_300);
+  --a_select_border_radius: var(--a_border_radius);
+  --a_select_menu_max_height: 15.625rem;
+  --a_select_menu_max_width: 25rem;
+  --a_select_menu_link_color: var(--a_color_text);
+  --a_select_menu_link_hover_color: var(--a_color_text);
+  --a_select_menu_link_hover_bg: var(--a_color_gray_200);
+  --a_select_menu_link_focus_color: var(--a_color_focus);
+  --a_select_menu_link_disabled_color: var(--a_color_gray_500);
+
+  display: block;
+  min-width: 12.5rem;
+  max-width: var(--a_select_menu_max_width);
+  z-index: 1055;
+  background-color: #fff;
+  border: 1px solid grey;
+  padding: 0.625rem;
+  border-radius: var(--a_select_border_radius);
+  box-shadow: 0 0 7px 3px var(--a_color_gray_600);
+  &[data-popper-reference-hidden] {
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+  .a_fieldset {
+    margin-top: 1rem;
+  }
+}
+.a_select_menu_by_content {
+  --a_select_menu_max_width: 100vw;
+  .a_select__menu__link {
+    white-space: nowrap;
+  }
+}
+.a_select_menu_right {
+  right: 0;
+  left: auto;
+}
+.a_select_menu__child {
+  max-height: var(--a_select_menu_max_height);
+  overflow: auto;
+}
+
+.a_select_list {
+  overflow: auto;
+  width: 100%;
+  min-height: 6.25rem;
+}
+
+.a_select__divider {
+  height: 0;
+  margin: var(--a_select_divider_margin_y) 0;
+  overflow: hidden;
+  border-top: 1px solid var(--a_select_divider_bg);
+  opacity: 1;
+}
+
+.a_select__menu__link {
+  position: relative;
+  display: block;
+  text-align: left;
+  padding: 0.125rem 0.25rem 0.125rem 1.5625rem;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--a_select_menu_link_color);
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  overflow-y: hidden;
+  &:not(.a_select__menu__link_disabled) {
+    &:hover {
+      background-color: var(--a_select_menu_link_hover_bg);
+      color: var(--a_select_menu_link_hover_color);
+    }
+    &:focus {
+      box-shadow: inset 0 0 1px 3px var(--a_select_menu_link_focus_color);
+      outline: none;
+    }
+  }
+}
+
+.a_select__menu__link_disabled {
+  color: var(--a_select_menu_link_disabled_color);
+  cursor: not-allowed;
+}
+
+.a_select__menu__link__icon_box {
+  // border: $checkbox-border;
+  width: 1.2rem;
+  height: 1.2rem;
+  display: block;
+  background-color: inherit;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-55%);
+  left: 0.3125rem;
+  > .a_icon {
+    vertical-align: inherit;
+  }
+}
+
+.a_select_not_items {
+  padding: 0.125rem 0.25rem 0.125rem 1.5625rem;
+  width: 100%;
+  display: inline-block;
+  text-align: left;
+}
+
+
+.a_select__value__label {
+  display: block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 1.5625rem;
+}
+
+.a_select_toggle_has_error_icon {
+  .a_select__value__label {
+    padding-left: 0.25rem;
+  }
+  .a_select__ul_closeable {
+    padding-left: 0.25rem;
+  }
+}
+
+.a_select__ul_closeable {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.a_select__ul_closeable__item {
+  display: flex;
+  margin: .25rem .375rem;
+  background-color: var(--a_select_closeable_item_bg);
+  padding-left: .5rem;
+  padding-right: .5rem;
+  border-radius: var(--a_select_border_radius);
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.a_select__ul_closeable__item__btn {
+  padding: 0 0 0 .25rem;
+}