aloha-vue 2.74.0 → 2.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/LICENSE +22 -21
  3. package/dist/aloha-vue.css +13594 -13594
  4. package/dist/aloha-vue.css.map +1 -1
  5. package/dist/aloha-vue.es.js +59266 -64918
  6. package/dist/aloha-vue.umd.js +338 -211
  7. package/package.json +27 -34
  8. package/scss/components/ATable.scss +2 -2
  9. package/scss/utils/button.scss +362 -362
  10. package/scss/utils/funktions.scss +162 -162
  11. package/src/AAccordion/AAccordionItem/AAccordionItem.js +235 -230
  12. package/src/ACarousel/ACarousel.js +7 -2
  13. package/src/ADropdown/ADropdown.js +4 -1
  14. package/src/AFilters/AFilterCenter/AFilterCenter.js +5 -1
  15. package/src/AFilters/AFilterCenter/AFilterCenterItem/AFilterCenterItem.js +7 -2
  16. package/src/AFilters/AFiltersHorizontal/AFiltersHorizontal.js +412 -396
  17. package/src/AFilters/AFiltersHorizontal/AFiltersHorizontalFilter/AFiltersHorizontalFilter.js +102 -99
  18. package/src/AFilters/AFiltersHorizontal/compositionAPI/FiltersSavedDeleteAPI.js +108 -108
  19. package/src/AFilters/AFiltersMain/AFiltersMain.js +114 -111
  20. package/src/AFilters/AFiltersSaveModal/compositionAPI/SaveAPI.js +65 -65
  21. package/src/ALinkCopy/ALinkCopy.js +98 -95
  22. package/src/ALinkCopy/compositionAPI/CopyAPI.js +48 -48
  23. package/src/AList/__tests__/AList.test.js +33 -33
  24. package/src/AList/compositionAPI/__tests__/TagAPI.test.js +43 -43
  25. package/src/AMenu/AMenu.js +4 -1
  26. package/src/AMenu/AMenuBreadcrumbs/AMenuBreadcrumbs.js +240 -237
  27. package/src/AMenu/AMenuPanelLink/AMenuPanelLink.js +4 -1
  28. package/src/AMenu/AMenuSearchPanelBreadcrumbs/AMenuSearchPanelBreadcrumbs.js +122 -119
  29. package/src/AModalWizard/AModalWizard.js +58 -53
  30. package/src/AModalWizard/compositionAPI/__tests__/ScrollAPI.test.js +46 -46
  31. package/src/APagination/APaginationPages/APaginationPages.js +15 -4
  32. package/src/ARate/ARate.js +254 -249
  33. package/src/ARate/ARateIcon/ADecimalIcon/ADecimalIcon.js +53 -50
  34. package/src/ARate/ARateIcon/ARateIcon.js +109 -104
  35. package/src/AResizer/AResizer.js +167 -162
  36. package/src/ATable/ATableHeaderTh/compositionAPI/SortAPI.js +172 -167
  37. package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js +14 -4
  38. package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem/ATableHeaderThActionItem.js +191 -184
  39. package/src/ATable/ATablePreviewDown/ATablePreviewDown.js +72 -69
  40. package/src/ATable/ATablePreviewRight/ATablePreviewRight.js +265 -258
  41. package/src/ATable/ATableSortingAdditional/ATableSortingAdditional.js +224 -219
  42. package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.AttributesAPI.test.js +39 -39
  43. package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.ColumnsAPI.test.js +68 -68
  44. package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.DropdownAPI.test.js +45 -45
  45. package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.FormAPI.test.js +95 -95
  46. package/src/ATable/ATableSortingAdditional/__tests__/ATableSortingAdditional.ModelAPI.test.js +1 -1
  47. package/src/ATable/ATableTd/ATableTd.js +4 -1
  48. package/src/ATable/ATableTdAction/ATableTdAction.js +19 -12
  49. package/src/ATable/ATableTopPanel/ATableTopPanel.js +11 -3
  50. package/src/ATable/ATableTr/ATableTr.js +408 -405
  51. package/src/ATable/__tests__/ATable.HeaderSlot.test.js +102 -97
  52. package/src/ATable/__tests__/ATable.RowIdsAPI.test.js +66 -66
  53. package/src/ATableForm/ATableForm.js +88 -85
  54. package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js +14 -4
  55. package/src/ATableForm/ATableFormCellDnd/ATableFormCellDnd.js +196 -187
  56. package/src/ATableForm/ATableFormRow/compositionAPI/EditAPI.js +104 -104
  57. package/src/ATableForm/__tests__/ATableForm.DragAndDropAPI.test.js +200 -212
  58. package/src/ATableForm/__tests__/ATableForm.ListView.test.js +134 -174
  59. package/src/ATableForm/compositionAPI/IconsAPI.js +24 -21
  60. package/src/AVerticalScroll/AVerticalScroll.js +182 -177
  61. package/src/AWizard/AWizard.js +26 -21
  62. package/src/AWizard/AWizardStep/AWizardStep.js +275 -270
  63. package/src/AWizard/compositionAPI/__tests__/ChangeStepAPI.test.js +32 -32
  64. package/src/AWizard/compositionAPI/__tests__/LocalAPI.test.js +55 -55
  65. package/src/PuxDatepicker/PuxDatepickerCalendarPanel/PuxDatepickerCalendarPanel.js +646 -648
  66. package/src/PuxDatepicker/panel/PanelDate/PanelDate.js +300 -301
  67. package/src/PuxDatepicker/panel/PanelMonth/PanelMonth.js +148 -149
  68. package/src/PuxDatepicker/panel/PanelTime/PanelTime.js +256 -257
  69. package/src/PuxDatepicker/panel/PanelYear/PanelYear.js +136 -137
  70. package/src/PuxDatepicker/utils/index.js +100 -100
  71. package/src/compositionAPI/AHttpAPI.js +593 -593
  72. package/src/compositionAPI/__tests__/AHttpAPI.test.js +42 -42
  73. package/src/filters/__tests__/filterBoolean.test.js +38 -38
  74. package/src/filters/__tests__/filterCapitalize.test.js +38 -38
  75. package/src/filters/__tests__/filterCurrency.test.js +21 -21
  76. package/src/filters/__tests__/filterDate.test.js +42 -42
  77. package/src/filters/__tests__/filterDefaultForEmpty.test.js +24 -24
  78. package/src/filters/__tests__/filterEmail.test.js +42 -42
  79. package/src/filters/__tests__/filterEscapeHtml.test.js +45 -45
  80. package/src/filters/__tests__/filterFileSize.test.js +45 -45
  81. package/src/filters/__tests__/filterFloat.test.js +74 -74
  82. package/src/filters/__tests__/filterJson.test.js +74 -74
  83. package/src/filters/__tests__/filterKeyValue.test.js +50 -50
  84. package/src/filters/__tests__/filterLimitTo.test.js +39 -39
  85. package/src/filters/__tests__/filterLink.test.js +41 -41
  86. package/src/filters/__tests__/filterList.test.js +149 -149
  87. package/src/filters/__tests__/filterLowerCase.test.js +38 -38
  88. package/src/filters/__tests__/filterMask.test.js +80 -80
  89. package/src/filters/__tests__/filterPropertyByValue.test.js +27 -27
  90. package/src/filters/__tests__/filterSearchHighlight.test.js +129 -129
  91. package/src/filters/__tests__/filterUpperCase.test.js +38 -38
  92. package/src/filters/__tests__/filterValueByCondition.test.js +3 -3
  93. package/src/filters/filterJson.js +39 -39
  94. package/src/filters/filterValueByCondition.js +2 -2
  95. package/src/plugins/AAlertPlugin.js +16 -5
  96. package/src/plugins/AMultiselectOrderedPlugin.js +88 -81
  97. package/src/plugins/ASelectPlugin.js +12 -10
  98. package/src/ui/ACheckbox/ACheckbox.js +82 -79
  99. package/src/ui/ADatepicker/compositionAPI/EventsAPI.js +297 -297
  100. package/src/ui/ADatepicker/utils/index.js +76 -76
  101. package/src/ui/ADatepickerAlt/ADatepicker.js +912 -912
  102. package/src/ui/ADatepickerAlt/utils/index.js +98 -98
  103. package/src/ui/AFieldset/__tests__/AFieldset.ClassColumn.test.js +113 -114
  104. package/src/ui/AFormElementBtnClear/AFormElementBtnClear.js +4 -1
  105. package/src/ui/AInputCurrency/AInputCurrency.js +20 -15
  106. package/src/ui/AInputCurrency/__tests__/AInputCurrency.ModelAPI.test.js +73 -73
  107. package/src/ui/AInputNumber/AInputNumber.js +17 -12
  108. package/src/ui/AJson/AJson.js +12 -3
  109. package/src/ui/AJson/compositionAPI/JsonAPI.js +116 -116
  110. package/src/ui/ALabel/__tests__/ALabel.IdAPI.test.js +42 -42
  111. package/src/ui/ALabel/__tests__/ALabel.LabelAPI.test.js +33 -33
  112. package/src/ui/ARadio/ARadio.js +80 -77
  113. package/src/ui/ASelect/ASelect.js +390 -383
  114. package/src/ui/ASelect/ASelectElement/ASelectElement.js +179 -176
  115. package/src/ui/ASelect/ASelectValueCloseable/ASelectValueCloseable.js +143 -141
  116. package/src/ui/ASelect/__tests__/SelectedFirstAPI.test.js +101 -101
  117. package/src/ui/ASelect/__tests__/SelectedVisibleAPI.test.js +98 -98
  118. package/src/ui/ASlider/compositionAPI/SliderAPI.js +23 -23
  119. package/src/ui/AValidatedJson/AValidatedJson.js +4 -1
  120. package/src/ui/AValidatedJson/AValidatedJsonItem/AValidatedJsonItem.js +308 -298
  121. package/src/ui/compositionApi/UiCollapseAPI.js +68 -63
  122. package/src/ui/compositionApi/UiInputAutofillAPI.js +41 -41
  123. package/src/ui/compositionApi/__tests__/UIDataGroupAPI.test.js +106 -106
  124. package/src/ui/compositionApi/__tests__/UIExcludeRenderAttributesAPI.test.js +39 -39
  125. package/src/ui/compositionApi/__tests__/UiDataWithKeyIdAndLabelAPI.test.js +128 -128
  126. package/src/ui/compositionApi/__tests__/UiSearchAPI.test.js +71 -71
  127. package/src/utils/EventBus.js +51 -8
  128. package/src/utils/__tests__/EventBus.test.js +138 -0
  129. package/src/utils/__tests__/utils.aOrderBy.test.js +1 -1
  130. package/src/utils/__tests__/utils.aSortBy.test.js +1 -1
  131. package/src/utils/__tests__/utils.getTotalNestedCount.test.js +56 -56
  132. package/src/utils/__tests__/utils.isArrayOfArrays.test.js +44 -44
  133. package/src/utils/__tests__/utils.isArrayOfStrings.test.js +36 -36
  134. package/src/utils/__tests__/utilsArray.aFirst.test.js +1 -1
  135. package/src/utils/__tests__/utilsArray.aLast.test.js +1 -1
  136. package/src/utils/__tests__/utilsLang.isArguments.test.js +1 -1
  137. package/src/utils/__tests__/utilsLang.isArray.test.js +1 -1
  138. package/src/utils/__tests__/utilsLang.isArrayBuffer.test.js +1 -1
  139. package/src/utils/__tests__/utilsLang.isBoolean.test.js +1 -1
  140. package/src/utils/__tests__/utilsLang.isBuffer.test.js +1 -1
  141. package/src/utils/__tests__/utilsLang.isDate.test.js +1 -1
  142. package/src/utils/__tests__/utilsLang.isElement.test.js +5 -3
  143. package/src/utils/__tests__/utilsLang.isError.test.js +1 -1
  144. package/src/utils/__tests__/utilsLang.isFinite.test.js +1 -1
  145. package/src/utils/__tests__/utilsLang.isFunction.test.js +1 -1
  146. package/src/utils/__tests__/utilsLang.isInteger.test.js +1 -1
  147. package/src/utils/__tests__/utilsLang.isMap.test.js +1 -1
  148. package/src/utils/__tests__/utilsLang.isNaN.test.js +1 -1
  149. package/src/utils/__tests__/utilsLang.isNil.test.js +1 -1
  150. package/src/utils/__tests__/utilsLang.isNull.test.js +1 -1
  151. package/src/utils/__tests__/utilsLang.isNumber.test.js +1 -1
  152. package/src/utils/__tests__/utilsLang.isObject.test.js +1 -1
  153. package/src/utils/__tests__/utilsLang.isObjectLike.test.js +5 -3
  154. package/src/utils/__tests__/utilsLang.isPlainObject.test.js +3 -2
  155. package/src/utils/__tests__/utilsLang.isPromise.test.js +5 -2
  156. package/src/utils/__tests__/utilsLang.isRegExp.test.js +1 -1
  157. package/src/utils/__tests__/utilsLang.isSet.test.js +1 -1
  158. package/src/utils/__tests__/utilsLang.isString.test.js +1 -1
  159. package/src/utils/__tests__/utilsLang.isSymbol.test.js +5 -3
  160. package/src/utils/__tests__/utilsLang.isUndefined.test.js +1 -1
  161. package/src/utils/__tests__/utilsLang.isWeakMap.test.js +1 -1
  162. package/src/utils/__tests__/utilsLang.isWeakSet.test.js +1 -1
  163. package/src/utils/__tests__/utilsMath.isEven.test.js +43 -43
  164. package/src/utils/__tests__/utilsMath.isOdd.test.js +43 -43
  165. package/src/utils/__tests__/utilsUi.isModelForFilterNotEmpty.test.js +65 -65
  166. package/src/utils/autosize.js +1 -1
package/scss/utils/button.scss CHANGED
@@ -1,362 +1,362 @@
1
- @use "sass:color";
2
-
3
- @use "aloha_prefix" as aloha;
4
- @use "color_utils";
5
- @use "funktions";
6
-
7
- $a_btn_hover_bg_shade_amount: 15% !default;
8
- $a_btn_hover_bg_tint_amount: 15% !default;
9
- $a_btn_hover_border_shade_amount: 20% !default;
10
- $a_btn_hover_border_tint_amount: 10% !default;
11
- $a_btn_active_bg_shade_amount: 20% !default;
12
- $a_btn_active_bg_tint_amount: 20% !default;
13
- $a_btn_active_border_shade_amount: 25% !default;
14
- $a_btn_active_border_tint_amount: 10% !default;
15
-
16
- $a_btn_active_box_shadow: inset 0 3px 5px rgba(color_utils.$a_black, .125) !default;
17
-
18
- $a_btn_link_color: var(--#{aloha.$aloha-prefix}color_link) !default;
19
- $a_btn_link_hover_color: var(--#{aloha.$aloha-prefix}color_link_hover) !default;
20
- $a_btn_link_disabled_color: var(--#{aloha.$aloha-prefix}color_gray_600) !default;
21
-
22
- $a_btn_switch_color: #ffffff !default;
23
- $a_btn_switch_border_color: color_utils.$a_gray_500 !default;
24
- $a_btn_switch_active_color: #b8d476 !default;
25
-
26
- .#{aloha.$aloha-prefix}btn {
27
- --#{aloha.$aloha-prefix}btn_padding_x: 0.75rem;
28
- --#{aloha.$aloha-prefix}btn_padding_y: 0.375rem;
29
- --#{aloha.$aloha-prefix}btn_font_size: 1rem;
30
- --#{aloha.$aloha-prefix}btn_font_weight: 400;
31
- --#{aloha.$aloha-prefix}btn_line_height: 1.5;
32
- --#{aloha.$aloha-prefix}btn_color: #212529;
33
- --#{aloha.$aloha-prefix}btn_bg: transparent;
34
- --#{aloha.$aloha-prefix}btn_border_width: 1px;
35
- --#{aloha.$aloha-prefix}btn_border_color: transparent;
36
- --#{aloha.$aloha-prefix}btn_border_radius: var(--#{aloha.$aloha-prefix}border_radius);
37
- --#{aloha.$aloha-prefix}btn_disabled_opacity: 0.65;
38
- --#{aloha.$aloha-prefix}btn_focus_box_shadow: 0 0 0 0.25rem rgba(var(--#{aloha.$aloha-prefix}btn_focus_shadow_rgb), .5);
39
-
40
- display: inline-block;
41
- padding: var(--#{aloha.$aloha-prefix}btn_padding_y) var(--#{aloha.$aloha-prefix}btn_padding_x);
42
- font-family: var(--#{aloha.$aloha-prefix}btn_font_family);
43
- font-size: var(--#{aloha.$aloha-prefix}btn_font_size);
44
- font-weight: var(--#{aloha.$aloha-prefix}btn_font_weight);
45
- line-height: var(--#{aloha.$aloha-prefix}btn_line_height);
46
- color: var(--#{aloha.$aloha-prefix}btn_color);
47
- text-align: center;
48
- text-decoration: none;
49
- vertical-align: middle;
50
- cursor: pointer;
51
- user-select: none;
52
- border: var(--#{aloha.$aloha-prefix}btn_border_width) solid var(--#{aloha.$aloha-prefix}btn_border_color);
53
- border-radius: var(--#{aloha.$aloha-prefix}btn_border_radius);
54
- background-color: var(--#{aloha.$aloha-prefix}btn_bg);
55
-
56
- &.readonly {
57
- cursor: default;
58
- user-select: auto;
59
- }
60
-
61
- &:not(.readonly) {
62
- &:hover {
63
- color: var(--#{aloha.$aloha-prefix}btn_hover_color);
64
- background-color: var(--#{aloha.$aloha-prefix}btn_hover_bg);
65
- border-color: var(--#{aloha.$aloha-prefix}btn_hover_border_color);
66
- }
67
- .a_btn_check + &:hover {
68
- // override for the checkbox/radio buttons
69
- color: var(--#{aloha.$aloha-prefix}btn_color);
70
- background-color: var(--#{aloha.$aloha-prefix}btn_bg);
71
- border-color: var(--#{aloha.$aloha-prefix}btn_border_color);
72
- }
73
-
74
- &:not(.a_btn_link):hover {
75
- text-decoration: none;
76
- }
77
-
78
- &:focus {
79
- color: var(--#{aloha.$aloha-prefix}btn_focus_color, var(--#{aloha.$aloha-prefix}btn_hover_color));
80
- background-color: var(--#{aloha.$aloha-prefix}btn_hover_bg);
81
- border-color: var(--#{aloha.$aloha-prefix}btn_hover_border_color);
82
- outline: 0;
83
- box-shadow: var(--#{aloha.$aloha-prefix}btn_focus_box_shadow);
84
- }
85
-
86
- .a_btn_check:focus-visible + & {
87
- border-color: var(--#{aloha.$aloha-prefix}btn_hover_border_color);
88
- outline: 0;
89
- box-shadow: var(--#{aloha.$aloha-prefix}btn_focus_box_shadow);
90
- }
91
-
92
- .a_btn_check:checked + &,
93
- :not(.a_btn_check) + &:active,
94
- &:first-child:active,
95
- &.active {
96
- color: var(--#{aloha.$aloha-prefix}btn_active_color);
97
- background-color: var(--#{aloha.$aloha-prefix}btn_active_bg);
98
- border-color: var(--#{aloha.$aloha-prefix}btn_active_border_color);
99
- }
100
-
101
- &.disabled,
102
- &:disabled,
103
- fieldset:disabled & {
104
- color: var(--#{aloha.$aloha-prefix}btn_disabled_color);
105
- background-color: var(--#{aloha.$aloha-prefix}btn_disabled_bg);
106
- border-color: var(--#{aloha.$aloha-prefix}btn_disabled_border_color);
107
- opacity: var(--#{aloha.$aloha-prefix}btn_disabled_opacity);
108
- cursor: not-allowed;
109
- }
110
- }
111
- }
112
-
113
- .#{aloha.$aloha-prefix}btn_group_large > .#{aloha.$aloha-prefix}btn,
114
- .#{aloha.$aloha-prefix}btn_large {
115
- --#{aloha.$aloha-prefix}btn_padding_y: 0.5rem;
116
- --#{aloha.$aloha-prefix}btn_padding_x: 1rem;
117
- --#{aloha.$aloha-prefix}btn_font_size: 1.25rem;
118
- --#{aloha.$aloha-prefix}btn_border_radius: var(--#{aloha.$aloha-prefix}border_radius_large);
119
- }
120
-
121
- .#{aloha.$aloha-prefix}btn_group_small > .#{aloha.$aloha-prefix}btn,
122
- .#{aloha.$aloha-prefix}btn_small {
123
- --#{aloha.$aloha-prefix}btn_padding_y: 0.25rem;
124
- --#{aloha.$aloha-prefix}btn_padding_x: 0.5rem;
125
- --#{aloha.$aloha-prefix}btn_font_size: 0.875rem;
126
- --#{aloha.$aloha-prefix}btn_border_radius: var(--#{aloha.$aloha-prefix}border_radius_small);
127
- }
128
-
129
- @mixin button-variant(
130
- $background,
131
- $border,
132
- $color: funktions.color-contrast($background),
133
- $hover-background: if($color == color_utils.$a_color_contrast_light, funktions.shade-color($background, $a_btn_hover_bg_shade_amount), funktions.tint-color($background, $a_btn_hover_bg_tint_amount)),
134
- $hover-border: if($color == color_utils.$a_color_contrast_light, funktions.shade-color($border, $a_btn_hover_border_shade_amount), funktions.tint-color($border, $a_btn_hover_border_tint_amount)),
135
- $hover-color: funktions.color-contrast($hover-background),
136
- $active-background: if($color == color_utils.$a_color_contrast_light, funktions.shade-color($background, $a_btn_active_bg_shade_amount), funktions.tint-color($background, $a_btn_active_bg_tint_amount)),
137
- $active-border: if($color == color_utils.$a_color_contrast_light, funktions.shade-color($border, $a_btn_active_border_shade_amount), funktions.tint-color($border, $a_btn_active_border_tint_amount)),
138
- $active-color: funktions.color-contrast($active-background),
139
- $disabled-background: $background,
140
- $disabled-border: $border,
141
- $disabled-color: funktions.color-contrast($disabled-background)
142
- ) {
143
- --#{aloha.$aloha-prefix}btn_color: #{$color};
144
- --#{aloha.$aloha-prefix}btn_bg: #{$background};
145
- --#{aloha.$aloha-prefix}btn_border_color: #{$border};
146
- --#{aloha.$aloha-prefix}btn_hover_color: #{$hover-color};
147
- --#{aloha.$aloha-prefix}btn_hover_bg: #{$hover-background};
148
- --#{aloha.$aloha-prefix}btn_hover_border_color: #{$hover-border};
149
- --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb(color.mix($color, $border, 15%))};
150
- --#{aloha.$aloha-prefix}btn_active_color: #{$active-color};
151
- --#{aloha.$aloha-prefix}btn_active_bg: #{$active-background};
152
- --#{aloha.$aloha-prefix}btn_active_border_color: #{$active-border};
153
- --#{aloha.$aloha-prefix}btn_active_shadow: #{$a_btn_active_box_shadow};
154
- --#{aloha.$aloha-prefix}btn_disabled_color: #{$disabled-color};
155
- --#{aloha.$aloha-prefix}btn_disabled_bg: #{$disabled-background};
156
- --#{aloha.$aloha-prefix}btn_disabled_border_color: #{$disabled-border};
157
- }
158
-
159
- @mixin button-outline-variant(
160
- $color,
161
- $color-hover: funktions.color-contrast($color),
162
- $active-background: $color,
163
- $active-border: $color,
164
- $active-color: funktions.color-contrast($active-background)
165
- ) {
166
- --#{aloha.$aloha-prefix}btn_color: #{$color};
167
- --#{aloha.$aloha-prefix}btn_border_color: #{$color};
168
- --#{aloha.$aloha-prefix}btn_hover_color: #{$color-hover};
169
- --#{aloha.$aloha-prefix}btn_hover_bg: #{$active-background};
170
- --#{aloha.$aloha-prefix}btn_hover_border_color: #{$active-border};
171
- --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb($color)};
172
- --#{aloha.$aloha-prefix}btn_active_color: #{$active-color};
173
- --#{aloha.$aloha-prefix}btn_active_bg: #{$active-background};
174
- --#{aloha.$aloha-prefix}btn_active_border_color: #{$active-border};
175
- --#{aloha.$aloha-prefix}btn_active_shadow: #{$a_btn_active_box_shadow};
176
- --#{aloha.$aloha-prefix}btn_disabled_color: #{$color};
177
- --#{aloha.$aloha-prefix}btn_disabled_bg: transparent;
178
- --#{aloha.$aloha-prefix}btn_disabled_border_color: #{$color};
179
- --#{aloha.$aloha-prefix}gradient: none;
180
- }
181
-
182
- @mixin button-transparent-variant(
183
- $color,
184
- $background: color_utils.$a_gray_200,
185
- $hover-background: if($color == color_utils.$a_color_contrast_light, funktions.shade-color(color_utils.$a_gray_200, $a_btn_hover_bg_shade_amount), funktions.tint-color(color_utils.$a_gray_200, $a_btn_hover_bg_tint_amount)),
186
- // $hover-color: funktions.color-contrast($hover-background),
187
- $hover-color: $color,
188
- $active-background: transparent,
189
- // $active-color: funktions.color-contrast($active-background),
190
- $active-color: $color,
191
- $disabled-background: transparent,
192
- $disabled-color: $color
193
- ) {
194
- --#{aloha.$aloha-prefix}btn_color: #{$color};
195
- --#{aloha.$aloha-prefix}btn_border_color: transparent;
196
- --#{aloha.$aloha-prefix}btn_bg: transparent;
197
- --#{aloha.$aloha-prefix}btn_hover_color: #{$hover-color};
198
- --#{aloha.$aloha-prefix}btn_hover_bg: #{$hover-background};
199
- --#{aloha.$aloha-prefix}btn_hover_border_color: #{$hover-background};;
200
- --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb(color.mix($color, $color, 15%))};
201
- --#{aloha.$aloha-prefix}btn_active_color: #{$active-color};
202
- --#{aloha.$aloha-prefix}btn_active_bg: #{$active-background};
203
- --#{aloha.$aloha-prefix}btn_active_border_color: #{$active-background};
204
- --#{aloha.$aloha-prefix}btn_active_shadow: #{$a_btn_active_box_shadow};
205
- --#{aloha.$aloha-prefix}btn_disabled_color: #{$disabled-color};
206
- --#{aloha.$aloha-prefix}btn_disabled_border_color: #{$disabled-background};
207
- --#{aloha.$aloha-prefix}btn_disabled_bg: #{$disabled-background};
208
- }
209
-
210
- .#{aloha.$aloha-prefix}btn_primary {
211
- @include button-variant(color_utils.$a_primary, color_utils.$a_primary);
212
- }
213
- .#{aloha.$aloha-prefix}btn_secondary {
214
- @include button-variant(color_utils.$a_secondary, color_utils.$a_secondary);
215
- }
216
- .#{aloha.$aloha-prefix}btn_tertiary {
217
- @include button-variant(color_utils.$a_tertiary, color_utils.$a_tertiary);
218
- }
219
- .#{aloha.$aloha-prefix}btn_success {
220
- @include button-variant(color_utils.$a_success, color_utils.$a_success);
221
- }
222
- .#{aloha.$aloha-prefix}btn_info {
223
- @include button-variant(color_utils.$a_info, color_utils.$a_info);
224
- }
225
- .#{aloha.$aloha-prefix}btn_warning {
226
- @include button-variant(color_utils.$a_warning, color_utils.$a_warning);
227
- }
228
- .#{aloha.$aloha-prefix}btn_danger {
229
- @include button-variant(color_utils.$a_danger, color_utils.$a_danger);
230
- }
231
- .#{aloha.$aloha-prefix}btn_light {
232
- @include button-variant(
233
- color_utils.$a_light,
234
- color_utils.$a_light,
235
- $hover-background: funktions.shade-color(color_utils.$a_light, $a_btn_hover_bg_shade_amount),
236
- $hover-border: funktions.shade-color(color_utils.$a_light, $a_btn_hover_border_shade_amount),
237
- $active-background: funktions.shade-color(color_utils.$a_light, $a_btn_active_bg_shade_amount),
238
- $active-border: funktions.shade-color(color_utils.$a_light, $a_btn_active_border_shade_amount)
239
- );
240
- }
241
- .#{aloha.$aloha-prefix}btn_dark {
242
- @include button-variant(
243
- color_utils.$a_dark,
244
- color_utils.$a_dark,
245
- $hover-background: funktions.tint-color(color_utils.$a_dark, $a_btn_hover_bg_tint_amount),
246
- $hover-border: funktions.tint-color(color_utils.$a_dark, $a_btn_hover_border_tint_amount),
247
- $active-background: funktions.tint-color(color_utils.$a_dark, $a_btn_active_bg_tint_amount),
248
- $active-border: funktions.tint-color(color_utils.$a_dark, $a_btn_active_border_tint_amount)
249
- );
250
- }
251
- .#{aloha.$aloha-prefix}btn_switch {
252
- @include button-variant(
253
- $a_btn_switch_color,
254
- $a_btn_switch_border_color,
255
- $hover-background: funktions.shade-color($a_btn_switch_color, $a_btn_hover_bg_shade_amount),
256
- $hover-border: funktions.shade-color($a_btn_switch_color, $a_btn_hover_border_shade_amount),
257
- $active-background: funktions.shade-color($a_btn_switch_color, $a_btn_active_bg_shade_amount),
258
- $active-border: funktions.shade-color($a_btn_switch_color, $a_btn_active_border_shade_amount)
259
- );
260
- }
261
- .#{aloha.$aloha-prefix}btn_switch_active {
262
- @include button-variant($a_btn_switch_active_color, $a_btn_switch_active_color);
263
- }
264
-
265
- .#{aloha.$aloha-prefix}btn_outline_primary {
266
- @include button-outline-variant(color_utils.$a_primary);
267
- }
268
- .#{aloha.$aloha-prefix}btn_outline_secondary {
269
- @include button-outline-variant(color_utils.$a_secondary);
270
- }
271
- .#{aloha.$aloha-prefix}btn_outline_tertiary {
272
- @include button-outline-variant(color_utils.$a_tertiary);
273
- }
274
- .#{aloha.$aloha-prefix}btn_outline_success {
275
- @include button-outline-variant(color_utils.$a_success);
276
- }
277
- .#{aloha.$aloha-prefix}btn_outline_info {
278
- @include button-outline-variant(color_utils.$a_info);
279
- }
280
- .#{aloha.$aloha-prefix}btn_outline_warning {
281
- @include button-outline-variant(color_utils.$a_warning);
282
- }
283
- .#{aloha.$aloha-prefix}btn_outline_danger {
284
- @include button-outline-variant(color_utils.$a_danger);
285
- }
286
- .#{aloha.$aloha-prefix}btn_outline_light {
287
- @include button-outline-variant(color_utils.$a_light);
288
- }
289
- .#{aloha.$aloha-prefix}btn_outline_dark {
290
- @include button-outline-variant(color_utils.$a_dark);
291
- }
292
-
293
- .#{aloha.$aloha-prefix}btn_transparent_primary {
294
- @include button-transparent-variant(color_utils.$a_primary);
295
- }
296
- .#{aloha.$aloha-prefix}btn_transparent_secondary {
297
- @include button-transparent-variant(color_utils.$a_secondary);
298
- }
299
- .#{aloha.$aloha-prefix}btn_transparent_tertiary {
300
- @include button-transparent-variant(color_utils.$a_tertiary);
301
- }
302
- .#{aloha.$aloha-prefix}btn_transparent_success {
303
- @include button-transparent-variant(color_utils.$a_success);
304
- }
305
- .#{aloha.$aloha-prefix}btn_transparent_info {
306
- @include button-transparent-variant(color_utils.$a_info);
307
- }
308
- .#{aloha.$aloha-prefix}btn_transparent_warning {
309
- @include button-transparent-variant(color_utils.$a_warning);
310
- }
311
- .#{aloha.$aloha-prefix}btn_transparent_danger {
312
- @include button-transparent-variant(color_utils.$a_danger);
313
- }
314
- .#{aloha.$aloha-prefix}btn_transparent_light {
315
- @include button-transparent-variant(color_utils.$a_light);
316
- }
317
- .#{aloha.$aloha-prefix}btn_transparent_dark {
318
- @include button-transparent-variant(color_utils.$a_dark);
319
- }
320
-
321
-
322
- .#{aloha.$aloha-prefix}btn_link {
323
- --#{aloha.$aloha-prefix}btn_font_weight: 400;
324
- --#{aloha.$aloha-prefix}btn_color: #{$a_btn_link_color};
325
- --#{aloha.$aloha-prefix}btn_bg: transparent;
326
- --#{aloha.$aloha-prefix}btn_border_color: transparent;
327
- --#{aloha.$aloha-prefix}btn_hover_color: #{$a_btn_link_hover_color};
328
- --#{aloha.$aloha-prefix}btn_hover_border_color: transparent;
329
- --#{aloha.$aloha-prefix}btn_focus_color: #{$a_btn_link_color};
330
- --#{aloha.$aloha-prefix}btn_active_color: #{$a_btn_link_hover_color};
331
- --#{aloha.$aloha-prefix}btn_active_border_color: transparent;
332
- --#{aloha.$aloha-prefix}btn_disabled_color: #{$a_btn_link_disabled_color};
333
- --#{aloha.$aloha-prefix}btn_disabled_border_color: transparent;
334
- --#{aloha.$aloha-prefix}btn_box_shadow: none;
335
- --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb(color.mix(funktions.color-contrast(color_utils.$a_primary), color_utils.$a_primary, 15%))};
336
- --#{aloha.$aloha-prefix}btn_text_decoration: #{color_utils.$a_link_decoration};
337
-
338
- text-decoration: var(--#{aloha.$aloha-prefix}btn_text_decoration);
339
-
340
- &:hover,
341
- &:focus {
342
- --#{aloha.$aloha-prefix}btn_text_decoration: #{color_utils.$a_link_hover_decoration};
343
- }
344
- }
345
-
346
- .a_btn_check {
347
- position: absolute;
348
- clip: rect(0,0,0,0);
349
- pointer-events: none;
350
-
351
- &[disabled],
352
- &:disabled {
353
- + .btn {
354
- filter: none;
355
- opacity: .65;
356
- }
357
- }
358
- }
359
-
360
- .a_btn_link {
361
- user-select: auto;
362
- }
1
+ @use "sass:color";
2
+
3
+ @use "aloha_prefix" as aloha;
4
+ @use "color_utils";
5
+ @use "funktions";
6
+
7
+ $a_btn_hover_bg_shade_amount: 15% !default;
8
+ $a_btn_hover_bg_tint_amount: 15% !default;
9
+ $a_btn_hover_border_shade_amount: 20% !default;
10
+ $a_btn_hover_border_tint_amount: 10% !default;
11
+ $a_btn_active_bg_shade_amount: 20% !default;
12
+ $a_btn_active_bg_tint_amount: 20% !default;
13
+ $a_btn_active_border_shade_amount: 25% !default;
14
+ $a_btn_active_border_tint_amount: 10% !default;
15
+
16
+ $a_btn_active_box_shadow: inset 0 3px 5px rgba(color_utils.$a_black, .125) !default;
17
+
18
+ $a_btn_link_color: var(--#{aloha.$aloha-prefix}color_link) !default;
19
+ $a_btn_link_hover_color: var(--#{aloha.$aloha-prefix}color_link_hover) !default;
20
+ $a_btn_link_disabled_color: var(--#{aloha.$aloha-prefix}color_gray_600) !default;
21
+
22
+ $a_btn_switch_color: #ffffff !default;
23
+ $a_btn_switch_border_color: color_utils.$a_gray_500 !default;
24
+ $a_btn_switch_active_color: #b8d476 !default;
25
+
26
+ .#{aloha.$aloha-prefix}btn {
27
+ --#{aloha.$aloha-prefix}btn_padding_x: 0.75rem;
28
+ --#{aloha.$aloha-prefix}btn_padding_y: 0.375rem;
29
+ --#{aloha.$aloha-prefix}btn_font_size: 1rem;
30
+ --#{aloha.$aloha-prefix}btn_font_weight: 400;
31
+ --#{aloha.$aloha-prefix}btn_line_height: 1.5;
32
+ --#{aloha.$aloha-prefix}btn_color: #212529;
33
+ --#{aloha.$aloha-prefix}btn_bg: transparent;
34
+ --#{aloha.$aloha-prefix}btn_border_width: 1px;
35
+ --#{aloha.$aloha-prefix}btn_border_color: transparent;
36
+ --#{aloha.$aloha-prefix}btn_border_radius: var(--#{aloha.$aloha-prefix}border_radius);
37
+ --#{aloha.$aloha-prefix}btn_disabled_opacity: 0.65;
38
+ --#{aloha.$aloha-prefix}btn_focus_box_shadow: 0 0 0 0.25rem rgba(var(--#{aloha.$aloha-prefix}btn_focus_shadow_rgb), .5);
39
+
40
+ display: inline-block;
41
+ padding: var(--#{aloha.$aloha-prefix}btn_padding_y) var(--#{aloha.$aloha-prefix}btn_padding_x);
42
+ font-family: var(--#{aloha.$aloha-prefix}btn_font_family);
43
+ font-size: var(--#{aloha.$aloha-prefix}btn_font_size);
44
+ font-weight: var(--#{aloha.$aloha-prefix}btn_font_weight);
45
+ line-height: var(--#{aloha.$aloha-prefix}btn_line_height);
46
+ color: var(--#{aloha.$aloha-prefix}btn_color);
47
+ text-align: center;
48
+ text-decoration: none;
49
+ vertical-align: middle;
50
+ cursor: pointer;
51
+ user-select: none;
52
+ border: var(--#{aloha.$aloha-prefix}btn_border_width) solid var(--#{aloha.$aloha-prefix}btn_border_color);
53
+ border-radius: var(--#{aloha.$aloha-prefix}btn_border_radius);
54
+ background-color: var(--#{aloha.$aloha-prefix}btn_bg);
55
+
56
+ &.readonly {
57
+ cursor: default;
58
+ user-select: auto;
59
+ }
60
+
61
+ &:not(.readonly) {
62
+ &:hover {
63
+ color: var(--#{aloha.$aloha-prefix}btn_hover_color);
64
+ background-color: var(--#{aloha.$aloha-prefix}btn_hover_bg);
65
+ border-color: var(--#{aloha.$aloha-prefix}btn_hover_border_color);
66
+ }
67
+ .a_btn_check + &:hover {
68
+ // override for the checkbox/radio buttons
69
+ color: var(--#{aloha.$aloha-prefix}btn_color);
70
+ background-color: var(--#{aloha.$aloha-prefix}btn_bg);
71
+ border-color: var(--#{aloha.$aloha-prefix}btn_border_color);
72
+ }
73
+
74
+ &:not(.a_btn_link):hover {
75
+ text-decoration: none;
76
+ }
77
+
78
+ &:focus {
79
+ color: var(--#{aloha.$aloha-prefix}btn_focus_color, var(--#{aloha.$aloha-prefix}btn_hover_color));
80
+ background-color: var(--#{aloha.$aloha-prefix}btn_hover_bg);
81
+ border-color: var(--#{aloha.$aloha-prefix}btn_hover_border_color);
82
+ outline: 0;
83
+ box-shadow: var(--#{aloha.$aloha-prefix}btn_focus_box_shadow);
84
+ }
85
+
86
+ .a_btn_check:focus-visible + & {
87
+ border-color: var(--#{aloha.$aloha-prefix}btn_hover_border_color);
88
+ outline: 0;
89
+ box-shadow: var(--#{aloha.$aloha-prefix}btn_focus_box_shadow);
90
+ }
91
+
92
+ .a_btn_check:checked + &,
93
+ :not(.a_btn_check) + &:active,
94
+ &:first-child:active,
95
+ &.active {
96
+ color: var(--#{aloha.$aloha-prefix}btn_active_color);
97
+ background-color: var(--#{aloha.$aloha-prefix}btn_active_bg);
98
+ border-color: var(--#{aloha.$aloha-prefix}btn_active_border_color);
99
+ }
100
+
101
+ &.disabled,
102
+ &:disabled,
103
+ fieldset:disabled & {
104
+ color: var(--#{aloha.$aloha-prefix}btn_disabled_color);
105
+ background-color: var(--#{aloha.$aloha-prefix}btn_disabled_bg);
106
+ border-color: var(--#{aloha.$aloha-prefix}btn_disabled_border_color);
107
+ opacity: var(--#{aloha.$aloha-prefix}btn_disabled_opacity);
108
+ cursor: not-allowed;
109
+ }
110
+ }
111
+ }
112
+
113
+ .#{aloha.$aloha-prefix}btn_group_large > .#{aloha.$aloha-prefix}btn,
114
+ .#{aloha.$aloha-prefix}btn_large {
115
+ --#{aloha.$aloha-prefix}btn_padding_y: 0.5rem;
116
+ --#{aloha.$aloha-prefix}btn_padding_x: 1rem;
117
+ --#{aloha.$aloha-prefix}btn_font_size: 1.25rem;
118
+ --#{aloha.$aloha-prefix}btn_border_radius: var(--#{aloha.$aloha-prefix}border_radius_large);
119
+ }
120
+
121
+ .#{aloha.$aloha-prefix}btn_group_small > .#{aloha.$aloha-prefix}btn,
122
+ .#{aloha.$aloha-prefix}btn_small {
123
+ --#{aloha.$aloha-prefix}btn_padding_y: 0.25rem;
124
+ --#{aloha.$aloha-prefix}btn_padding_x: 0.5rem;
125
+ --#{aloha.$aloha-prefix}btn_font_size: 0.875rem;
126
+ --#{aloha.$aloha-prefix}btn_border_radius: var(--#{aloha.$aloha-prefix}border_radius_small);
127
+ }
128
+
129
+ @mixin button-variant(
130
+ $background,
131
+ $border,
132
+ $color: funktions.color-contrast($background),
133
+ $hover-background: if(sass($color == color_utils.$a_color_contrast_light): funktions.shade-color($background, $a_btn_hover_bg_shade_amount); else: funktions.tint-color($background, $a_btn_hover_bg_tint_amount)),
134
+ $hover-border: if(sass($color == color_utils.$a_color_contrast_light): funktions.shade-color($border, $a_btn_hover_border_shade_amount); else: funktions.tint-color($border, $a_btn_hover_border_tint_amount)),
135
+ $hover-color: funktions.color-contrast($hover-background),
136
+ $active-background: if(sass($color == color_utils.$a_color_contrast_light): funktions.shade-color($background, $a_btn_active_bg_shade_amount); else: funktions.tint-color($background, $a_btn_active_bg_tint_amount)),
137
+ $active-border: if(sass($color == color_utils.$a_color_contrast_light): funktions.shade-color($border, $a_btn_active_border_shade_amount); else: funktions.tint-color($border, $a_btn_active_border_tint_amount)),
138
+ $active-color: funktions.color-contrast($active-background),
139
+ $disabled-background: $background,
140
+ $disabled-border: $border,
141
+ $disabled-color: funktions.color-contrast($disabled-background)
142
+ ) {
143
+ --#{aloha.$aloha-prefix}btn_color: #{$color};
144
+ --#{aloha.$aloha-prefix}btn_bg: #{$background};
145
+ --#{aloha.$aloha-prefix}btn_border_color: #{$border};
146
+ --#{aloha.$aloha-prefix}btn_hover_color: #{$hover-color};
147
+ --#{aloha.$aloha-prefix}btn_hover_bg: #{$hover-background};
148
+ --#{aloha.$aloha-prefix}btn_hover_border_color: #{$hover-border};
149
+ --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb(color.mix($color, $border, 15%))};
150
+ --#{aloha.$aloha-prefix}btn_active_color: #{$active-color};
151
+ --#{aloha.$aloha-prefix}btn_active_bg: #{$active-background};
152
+ --#{aloha.$aloha-prefix}btn_active_border_color: #{$active-border};
153
+ --#{aloha.$aloha-prefix}btn_active_shadow: #{$a_btn_active_box_shadow};
154
+ --#{aloha.$aloha-prefix}btn_disabled_color: #{$disabled-color};
155
+ --#{aloha.$aloha-prefix}btn_disabled_bg: #{$disabled-background};
156
+ --#{aloha.$aloha-prefix}btn_disabled_border_color: #{$disabled-border};
157
+ }
158
+
159
+ @mixin button-outline-variant(
160
+ $color,
161
+ $color-hover: funktions.color-contrast($color),
162
+ $active-background: $color,
163
+ $active-border: $color,
164
+ $active-color: funktions.color-contrast($active-background)
165
+ ) {
166
+ --#{aloha.$aloha-prefix}btn_color: #{$color};
167
+ --#{aloha.$aloha-prefix}btn_border_color: #{$color};
168
+ --#{aloha.$aloha-prefix}btn_hover_color: #{$color-hover};
169
+ --#{aloha.$aloha-prefix}btn_hover_bg: #{$active-background};
170
+ --#{aloha.$aloha-prefix}btn_hover_border_color: #{$active-border};
171
+ --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb($color)};
172
+ --#{aloha.$aloha-prefix}btn_active_color: #{$active-color};
173
+ --#{aloha.$aloha-prefix}btn_active_bg: #{$active-background};
174
+ --#{aloha.$aloha-prefix}btn_active_border_color: #{$active-border};
175
+ --#{aloha.$aloha-prefix}btn_active_shadow: #{$a_btn_active_box_shadow};
176
+ --#{aloha.$aloha-prefix}btn_disabled_color: #{$color};
177
+ --#{aloha.$aloha-prefix}btn_disabled_bg: transparent;
178
+ --#{aloha.$aloha-prefix}btn_disabled_border_color: #{$color};
179
+ --#{aloha.$aloha-prefix}gradient: none;
180
+ }
181
+
182
+ @mixin button-transparent-variant(
183
+ $color,
184
+ $background: color_utils.$a_gray_200,
185
+ $hover-background: if(sass($color == color_utils.$a_color_contrast_light): funktions.shade-color(color_utils.$a_gray_200, $a_btn_hover_bg_shade_amount); else: funktions.tint-color(color_utils.$a_gray_200, $a_btn_hover_bg_tint_amount)),
186
+ // $hover-color: funktions.color-contrast($hover-background),
187
+ $hover-color: $color,
188
+ $active-background: transparent,
189
+ // $active-color: funktions.color-contrast($active-background),
190
+ $active-color: $color,
191
+ $disabled-background: transparent,
192
+ $disabled-color: $color
193
+ ) {
194
+ --#{aloha.$aloha-prefix}btn_color: #{$color};
195
+ --#{aloha.$aloha-prefix}btn_border_color: transparent;
196
+ --#{aloha.$aloha-prefix}btn_bg: transparent;
197
+ --#{aloha.$aloha-prefix}btn_hover_color: #{$hover-color};
198
+ --#{aloha.$aloha-prefix}btn_hover_bg: #{$hover-background};
199
+ --#{aloha.$aloha-prefix}btn_hover_border_color: #{$hover-background};;
200
+ --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb(color.mix($color, $color, 15%))};
201
+ --#{aloha.$aloha-prefix}btn_active_color: #{$active-color};
202
+ --#{aloha.$aloha-prefix}btn_active_bg: #{$active-background};
203
+ --#{aloha.$aloha-prefix}btn_active_border_color: #{$active-background};
204
+ --#{aloha.$aloha-prefix}btn_active_shadow: #{$a_btn_active_box_shadow};
205
+ --#{aloha.$aloha-prefix}btn_disabled_color: #{$disabled-color};
206
+ --#{aloha.$aloha-prefix}btn_disabled_border_color: #{$disabled-background};
207
+ --#{aloha.$aloha-prefix}btn_disabled_bg: #{$disabled-background};
208
+ }
209
+
210
+ .#{aloha.$aloha-prefix}btn_primary {
211
+ @include button-variant(color_utils.$a_primary, color_utils.$a_primary);
212
+ }
213
+ .#{aloha.$aloha-prefix}btn_secondary {
214
+ @include button-variant(color_utils.$a_secondary, color_utils.$a_secondary);
215
+ }
216
+ .#{aloha.$aloha-prefix}btn_tertiary {
217
+ @include button-variant(color_utils.$a_tertiary, color_utils.$a_tertiary);
218
+ }
219
+ .#{aloha.$aloha-prefix}btn_success {
220
+ @include button-variant(color_utils.$a_success, color_utils.$a_success);
221
+ }
222
+ .#{aloha.$aloha-prefix}btn_info {
223
+ @include button-variant(color_utils.$a_info, color_utils.$a_info);
224
+ }
225
+ .#{aloha.$aloha-prefix}btn_warning {
226
+ @include button-variant(color_utils.$a_warning, color_utils.$a_warning);
227
+ }
228
+ .#{aloha.$aloha-prefix}btn_danger {
229
+ @include button-variant(color_utils.$a_danger, color_utils.$a_danger);
230
+ }
231
+ .#{aloha.$aloha-prefix}btn_light {
232
+ @include button-variant(
233
+ color_utils.$a_light,
234
+ color_utils.$a_light,
235
+ $hover-background: funktions.shade-color(color_utils.$a_light, $a_btn_hover_bg_shade_amount),
236
+ $hover-border: funktions.shade-color(color_utils.$a_light, $a_btn_hover_border_shade_amount),
237
+ $active-background: funktions.shade-color(color_utils.$a_light, $a_btn_active_bg_shade_amount),
238
+ $active-border: funktions.shade-color(color_utils.$a_light, $a_btn_active_border_shade_amount)
239
+ );
240
+ }
241
+ .#{aloha.$aloha-prefix}btn_dark {
242
+ @include button-variant(
243
+ color_utils.$a_dark,
244
+ color_utils.$a_dark,
245
+ $hover-background: funktions.tint-color(color_utils.$a_dark, $a_btn_hover_bg_tint_amount),
246
+ $hover-border: funktions.tint-color(color_utils.$a_dark, $a_btn_hover_border_tint_amount),
247
+ $active-background: funktions.tint-color(color_utils.$a_dark, $a_btn_active_bg_tint_amount),
248
+ $active-border: funktions.tint-color(color_utils.$a_dark, $a_btn_active_border_tint_amount)
249
+ );
250
+ }
251
+ .#{aloha.$aloha-prefix}btn_switch {
252
+ @include button-variant(
253
+ $a_btn_switch_color,
254
+ $a_btn_switch_border_color,
255
+ $hover-background: funktions.shade-color($a_btn_switch_color, $a_btn_hover_bg_shade_amount),
256
+ $hover-border: funktions.shade-color($a_btn_switch_color, $a_btn_hover_border_shade_amount),
257
+ $active-background: funktions.shade-color($a_btn_switch_color, $a_btn_active_bg_shade_amount),
258
+ $active-border: funktions.shade-color($a_btn_switch_color, $a_btn_active_border_shade_amount)
259
+ );
260
+ }
261
+ .#{aloha.$aloha-prefix}btn_switch_active {
262
+ @include button-variant($a_btn_switch_active_color, $a_btn_switch_active_color);
263
+ }
264
+
265
+ .#{aloha.$aloha-prefix}btn_outline_primary {
266
+ @include button-outline-variant(color_utils.$a_primary);
267
+ }
268
+ .#{aloha.$aloha-prefix}btn_outline_secondary {
269
+ @include button-outline-variant(color_utils.$a_secondary);
270
+ }
271
+ .#{aloha.$aloha-prefix}btn_outline_tertiary {
272
+ @include button-outline-variant(color_utils.$a_tertiary);
273
+ }
274
+ .#{aloha.$aloha-prefix}btn_outline_success {
275
+ @include button-outline-variant(color_utils.$a_success);
276
+ }
277
+ .#{aloha.$aloha-prefix}btn_outline_info {
278
+ @include button-outline-variant(color_utils.$a_info);
279
+ }
280
+ .#{aloha.$aloha-prefix}btn_outline_warning {
281
+ @include button-outline-variant(color_utils.$a_warning);
282
+ }
283
+ .#{aloha.$aloha-prefix}btn_outline_danger {
284
+ @include button-outline-variant(color_utils.$a_danger);
285
+ }
286
+ .#{aloha.$aloha-prefix}btn_outline_light {
287
+ @include button-outline-variant(color_utils.$a_light);
288
+ }
289
+ .#{aloha.$aloha-prefix}btn_outline_dark {
290
+ @include button-outline-variant(color_utils.$a_dark);
291
+ }
292
+
293
+ .#{aloha.$aloha-prefix}btn_transparent_primary {
294
+ @include button-transparent-variant(color_utils.$a_primary);
295
+ }
296
+ .#{aloha.$aloha-prefix}btn_transparent_secondary {
297
+ @include button-transparent-variant(color_utils.$a_secondary);
298
+ }
299
+ .#{aloha.$aloha-prefix}btn_transparent_tertiary {
300
+ @include button-transparent-variant(color_utils.$a_tertiary);
301
+ }
302
+ .#{aloha.$aloha-prefix}btn_transparent_success {
303
+ @include button-transparent-variant(color_utils.$a_success);
304
+ }
305
+ .#{aloha.$aloha-prefix}btn_transparent_info {
306
+ @include button-transparent-variant(color_utils.$a_info);
307
+ }
308
+ .#{aloha.$aloha-prefix}btn_transparent_warning {
309
+ @include button-transparent-variant(color_utils.$a_warning);
310
+ }
311
+ .#{aloha.$aloha-prefix}btn_transparent_danger {
312
+ @include button-transparent-variant(color_utils.$a_danger);
313
+ }
314
+ .#{aloha.$aloha-prefix}btn_transparent_light {
315
+ @include button-transparent-variant(color_utils.$a_light);
316
+ }
317
+ .#{aloha.$aloha-prefix}btn_transparent_dark {
318
+ @include button-transparent-variant(color_utils.$a_dark);
319
+ }
320
+
321
+
322
+ .#{aloha.$aloha-prefix}btn_link {
323
+ --#{aloha.$aloha-prefix}btn_font_weight: 400;
324
+ --#{aloha.$aloha-prefix}btn_color: #{$a_btn_link_color};
325
+ --#{aloha.$aloha-prefix}btn_bg: transparent;
326
+ --#{aloha.$aloha-prefix}btn_border_color: transparent;
327
+ --#{aloha.$aloha-prefix}btn_hover_color: #{$a_btn_link_hover_color};
328
+ --#{aloha.$aloha-prefix}btn_hover_border_color: transparent;
329
+ --#{aloha.$aloha-prefix}btn_focus_color: #{$a_btn_link_color};
330
+ --#{aloha.$aloha-prefix}btn_active_color: #{$a_btn_link_hover_color};
331
+ --#{aloha.$aloha-prefix}btn_active_border_color: transparent;
332
+ --#{aloha.$aloha-prefix}btn_disabled_color: #{$a_btn_link_disabled_color};
333
+ --#{aloha.$aloha-prefix}btn_disabled_border_color: transparent;
334
+ --#{aloha.$aloha-prefix}btn_box_shadow: none;
335
+ --#{aloha.$aloha-prefix}btn_focus_shadow_rgb: #{funktions.to-rgb(color.mix(funktions.color-contrast(color_utils.$a_primary), color_utils.$a_primary, 15%))};
336
+ --#{aloha.$aloha-prefix}btn_text_decoration: #{color_utils.$a_link_decoration};
337
+
338
+ text-decoration: var(--#{aloha.$aloha-prefix}btn_text_decoration);
339
+
340
+ &:hover,
341
+ &:focus {
342
+ --#{aloha.$aloha-prefix}btn_text_decoration: #{color_utils.$a_link_hover_decoration};
343
+ }
344
+ }
345
+
346
+ .a_btn_check {
347
+ position: absolute;
348
+ clip: rect(0,0,0,0);
349
+ pointer-events: none;
350
+
351
+ &[disabled],
352
+ &:disabled {
353
+ + .btn {
354
+ filter: none;
355
+ opacity: .65;
356
+ }
357
+ }
358
+ }
359
+
360
+ .a_btn_link {
361
+ user-select: auto;
362
+ }