halleyx-ui-framework 5.4.0 → 5.4.2

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 (135) hide show
  1. package/package.json +1 -1
  2. package/dist/cjs/index.css +0 -1
  3. package/dist/cjs/index.js +0 -9
  4. package/dist/es/index.css +0 -1
  5. package/dist/es/index.js +0 -9
  6. package/dist/src/assets/fonts/JosefinSans-Regular.ttf +0 -0
  7. package/dist/src/assets/fonts/OpenSans.ttf +0 -0
  8. package/dist/src/assets/fonts/Pacifico.ttf +0 -0
  9. package/dist/src/assets/fonts/Quicksand.ttf +0 -0
  10. package/dist/src/assets/fonts/magicoon-icons.eot +0 -0
  11. package/dist/src/assets/fonts/magicoon-icons.svg +0 -2310
  12. package/dist/src/assets/fonts/magicoon-icons.ttf +0 -0
  13. package/dist/src/assets/fonts/magicoon-icons.woff +0 -0
  14. package/dist/src/assets/fonts/ostrich-regular.ttf +0 -0
  15. package/dist/src/assets/icons/fonts/JosefinSans-Regular.ttf +0 -0
  16. package/dist/src/assets/icons/fonts/OpenSans.ttf +0 -0
  17. package/dist/src/assets/icons/fonts/Pacifico.ttf +0 -0
  18. package/dist/src/assets/icons/fonts/Quicksand.ttf +0 -0
  19. package/dist/src/assets/icons/fonts/ostrich-regular.ttf +0 -0
  20. package/dist/src/assets/icons/icon-style.css +0 -6927
  21. package/dist/src/assets/img/Group_12640.png +0 -0
  22. package/dist/src/assets/img/Halleyx-Logo-Black.png +0 -0
  23. package/dist/src/assets/img/Halleyx-Logo-Line-Dark.png +0 -0
  24. package/dist/src/assets/img/Halleyx-Logo-Line-Lite.png +0 -0
  25. package/dist/src/assets/img/Halleyx-Logo-Only.png +0 -0
  26. package/dist/src/assets/img/Halleyx-Logo-White.png +0 -0
  27. package/dist/src/assets/img/Halleyx-collage-login.svg +0 -29
  28. package/dist/src/assets/img/HalleyxUIFramework.png +0 -0
  29. package/dist/src/assets/img/illustration1.png +0 -0
  30. package/dist/src/assets/img/login_collage.svg +0 -29
  31. package/dist/src/assets/img/logo (Small) (Small).png +0 -0
  32. package/dist/src/assets/img/logo (Small).png +0 -0
  33. package/dist/src/assets/img/logo.png +0 -0
  34. package/dist/src/assets/img/new_logo/logo-black.svg +0 -10
  35. package/dist/src/assets/img/new_logo/logo-large.png +0 -0
  36. package/dist/src/assets/img/new_logo/logo-large.svg +0 -3
  37. package/dist/src/assets/img/new_logo/logo-line-black-large.png +0 -0
  38. package/dist/src/assets/img/new_logo/logo-line-black-large.svg +0 -10
  39. package/dist/src/assets/img/new_logo/logo-line-black-medium.png +0 -0
  40. package/dist/src/assets/img/new_logo/logo-line-black-medium.svg +0 -10
  41. package/dist/src/assets/img/new_logo/logo-line-black-small.png +0 -0
  42. package/dist/src/assets/img/new_logo/logo-line-black-small.svg +0 -10
  43. package/dist/src/assets/img/new_logo/logo-medium.png +0 -0
  44. package/dist/src/assets/img/new_logo/logo-medium.svg +0 -3
  45. package/dist/src/assets/img/new_logo/logo-small.png +0 -0
  46. package/dist/src/assets/img/new_logo/logo-small.svg +0 -3
  47. package/dist/src/assets/img/new_logo/logo-white.svg +0 -10
  48. package/dist/src/assets/img/search3.svg +0 -11
  49. package/dist/src/assets/img/search3_active.svg +0 -11
  50. package/dist/src/assets/img/search3_hover.svg +0 -11
  51. package/dist/src/assets/img/verification-mail-sent.png +0 -0
  52. package/dist/src/assets/img/vscode-icons_file-type-pdf2.svg +0 -11
  53. package/dist/src/assets/img/vscode-icons_file-type-word.svg +0 -19
  54. package/dist/src/assets/styles/accordion.scss +0 -120
  55. package/dist/src/assets/styles/alert.scss +0 -472
  56. package/dist/src/assets/styles/badge.scss +0 -34
  57. package/dist/src/assets/styles/base.scss +0 -2
  58. package/dist/src/assets/styles/breadcrumb.scss +0 -64
  59. package/dist/src/assets/styles/buttonGroup.scss +0 -211
  60. package/dist/src/assets/styles/buttons.scss +0 -762
  61. package/dist/src/assets/styles/calendar.scss +0 -363
  62. package/dist/src/assets/styles/calendarfilter.scss +0 -114
  63. package/dist/src/assets/styles/cards.scss +0 -94
  64. package/dist/src/assets/styles/colorPicker.scss +0 -15
  65. package/dist/src/assets/styles/colorpalette.scss +0 -157
  66. package/dist/src/assets/styles/common/var.scss +0 -325
  67. package/dist/src/assets/styles/componentlayout.scss +0 -148
  68. package/dist/src/assets/styles/contextMenu.scss +0 -58
  69. package/dist/src/assets/styles/customdropdown.scss +0 -115
  70. package/dist/src/assets/styles/dashboard.scss +0 -1956
  71. package/dist/src/assets/styles/dataview.scss +0 -245
  72. package/dist/src/assets/styles/datepicker.scss +0 -166
  73. package/dist/src/assets/styles/divider.scss +0 -9
  74. package/dist/src/assets/styles/dottedPagination.scss +0 -46
  75. package/dist/src/assets/styles/draggables.scss +0 -143
  76. package/dist/src/assets/styles/drawer.scss +0 -128
  77. package/dist/src/assets/styles/errorpage.scss +0 -75
  78. package/dist/src/assets/styles/fileupload.scss +0 -332
  79. package/dist/src/assets/styles/fonts/JosefinSans-Regular.ttf +0 -0
  80. package/dist/src/assets/styles/fonts/OpenSans.ttf +0 -0
  81. package/dist/src/assets/styles/fonts/Pacifico.ttf +0 -0
  82. package/dist/src/assets/styles/fonts/Quicksand.ttf +0 -0
  83. package/dist/src/assets/styles/fonts/ostrich-regular.ttf +0 -0
  84. package/dist/src/assets/styles/fonts.scss +0 -46
  85. package/dist/src/assets/styles/icon.scss +0 -1424
  86. package/dist/src/assets/styles/imagegallery.scss +0 -197
  87. package/dist/src/assets/styles/importProgress.scss +0 -48
  88. package/dist/src/assets/styles/index.scss +0 -19
  89. package/dist/src/assets/styles/inputfields.scss +0 -374
  90. package/dist/src/assets/styles/inputitems.scss +0 -423
  91. package/dist/src/assets/styles/label.scss +0 -279
  92. package/dist/src/assets/styles/loaders.scss +0 -147
  93. package/dist/src/assets/styles/mixins/_var.scss +0 -83
  94. package/dist/src/assets/styles/mixins/config.scss +0 -4
  95. package/dist/src/assets/styles/mixins/functions.scss +0 -36
  96. package/dist/src/assets/styles/modalwindow.scss +0 -107
  97. package/dist/src/assets/styles/newtable.scss +0 -305
  98. package/dist/src/assets/styles/objectViewer.scss +0 -195
  99. package/dist/src/assets/styles/overlay.scss +0 -14
  100. package/dist/src/assets/styles/pagination.scss +0 -244
  101. package/dist/src/assets/styles/partials.scss +0 -8
  102. package/dist/src/assets/styles/rating.scss +0 -41
  103. package/dist/src/assets/styles/scrollbar.scss +0 -15
  104. package/dist/src/assets/styles/search.scss +0 -191
  105. package/dist/src/assets/styles/select.scss +0 -1160
  106. package/dist/src/assets/styles/sidebar.scss +0 -467
  107. package/dist/src/assets/styles/signup.scss +0 -140
  108. package/dist/src/assets/styles/slideControl.scss +0 -117
  109. package/dist/src/assets/styles/source_content.scss +0 -14
  110. package/dist/src/assets/styles/speeddial.scss +0 -189
  111. package/dist/src/assets/styles/stepControl.scss +0 -76
  112. package/dist/src/assets/styles/style.css +0 -252
  113. package/dist/src/assets/styles/style.css.map +0 -13
  114. package/dist/src/assets/styles/switch.scss +0 -488
  115. package/dist/src/assets/styles/tablev2.scss +0 -241
  116. package/dist/src/assets/styles/tabs.scss +0 -54
  117. package/dist/src/assets/styles/tag.scss +0 -102
  118. package/dist/src/assets/styles/texteditor.scss +0 -279
  119. package/dist/src/assets/styles/timeline.scss +0 -520
  120. package/dist/src/assets/styles/tooltip.scss +0 -154
  121. package/dist/src/assets/styles/tree.scss +0 -1050
  122. package/dist/src/assets/styles/treeSelect.scss +0 -286
  123. package/dist/src/assets/styles/variables.scss +0 -77
  124. package/dist/src/assets/styles/visualbuilder.scss +0 -509
  125. package/dist/src/assets/svg/arrow.svg +0 -3
  126. package/dist/src/assets/svg/color-palette.svg +0 -15
  127. package/dist/src/assets/svg/file.svg +0 -5
  128. package/dist/src/assets/svg/pdf.svg +0 -11
  129. package/dist/src/assets/svg/search3.svg +0 -11
  130. package/dist/src/assets/svg/search3_active.svg +0 -11
  131. package/dist/src/assets/svg/search3_hover.svg +0 -11
  132. package/dist/src/assets/svg/word.svg +0 -19
  133. package/dist/umd/index.css +0 -1
  134. package/dist/umd/index.umd.js +0 -10
  135. package/dist/umd/index.umd.js.map +0 -1
package/dist/src/assets/styles/buttons.scss DELETED
@@ -1,762 +0,0 @@
1
- @use 'sass:color';
2
- #hlx-button-0009.hlx-button {
3
- font-family: var(--hlx-font-type-content) !important;
4
- // font-size: var(--hlx-font-content-size-sm);
5
- // line-height: var(--hlx-line-height-size-sm);
6
- box-sizing: border-box;
7
- border: none;
8
- user-select: none;
9
- position: relative;
10
- border-radius: 6px;
11
- padding: 14px 16px;
12
- height: 46px;
13
- // font-weight: 600;
14
- font-size: 15px;
15
- line-height: 18.15px;
16
- letter-spacing: 0.005em;
17
- min-width: max-content;
18
- // padding: 0.75rem 1.5rem;
19
- min-width: max-content;
20
-
21
- // max-width: fit-content;
22
- cursor: pointer;
23
- // box-shadow: 0 4px 12px -8px black;
24
- // border-radius: 5px;
25
- // &>.link{
26
- // background-color: red;
27
- // &>*{
28
-
29
- // text-decoration: none;
30
- // color: $primary-link;
31
- // font-weight: 600;
32
- // &:hover{
33
- // background-color: transparent;
34
- // text-decoration: underline;
35
- // }
36
- // }
37
- // }
38
-
39
- &.primary {
40
- color: var(--hlx-color-white);
41
- background: var(--hlx-color-primary);
42
- &:hover:not(&:active) {
43
- background-color: var(--hlx-color-primary-dark);
44
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
45
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
46
- transition: all 0.1s;
47
- }
48
- &:hover {
49
- background-color: var(--hlx-color-primary-dark);
50
- // box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
51
- // 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
52
- transition: all 0.1s;
53
- }
54
- &:active {
55
- background-color: var(--hlx-color-primary);
56
- top: 2px;
57
- }
58
- // &:active {
59
- // &:after {
60
- // content: "";
61
- // position: absolute;
62
- // width: 104%;
63
- // // border: 1px solid #54bd95;
64
- // box-shadow: var(--hlx-color-primary) 0px 0px 0.25em,
65
- // rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
66
- // height: 108%;
67
- // left: -1.8%;
68
- // top: -4%;
69
- // border-radius: inherit;
70
- // }
71
- // }
72
- &-success {
73
- color: var(--hlx-color-white);
74
- background: var(--hlx-color-success);
75
- &:hover:not(&:active) {
76
- background-color: var(--hlx-color-success-dark);
77
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
78
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
79
- transition: all 0.1s;
80
- }
81
- // &:active {
82
- // &:after {
83
- // content: "";
84
- // position: absolute;
85
- // width: 104%;
86
- // // border: 1px solid #54bd95;
87
- // box-shadow: var(--hlx-color-success) 0px 0px 0.25em,
88
- // rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
89
- // height: 108%;
90
- // left: -2%;
91
- // top: -2px;
92
- // border-radius: inherit;
93
- // }
94
- // }
95
- &:active {
96
- top: 2px;
97
- background-color: var(--hlx-color-success);
98
- }
99
- }
100
- &-warning {
101
- background: var(--hlx-color-warning);
102
- color: var(--hlx-color-white);
103
- &:hover:not(&:active) {
104
- background-color: var(--hlx-color-warning-dark);
105
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
106
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
107
- transition: all 0.1s;
108
- }
109
- // &:active {
110
- // &:after {
111
- // content: "";
112
- // position: absolute;
113
- // width: 104%;
114
- // // border: 1px solid #54bd95;
115
- // box-shadow: var(--hlx-color-warning-dark) 0px 0px 0.25em,
116
- // rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
117
- // height: 108%;
118
- // left: -2%;
119
- // top: -2px;
120
- // border-radius: inherit;
121
- // }
122
- // }
123
- &:active {
124
- top: 2px;
125
- background-color: var(--hlx-color-warning);
126
- }
127
- }
128
- &-info {
129
- background: var(--hlx-color-info);
130
- color: var(--hlx-color-white);
131
- &:hover:not(&:active) {
132
- background-color: var(--hlx-color-info-dark);
133
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
134
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
135
- transition: all 0.1s;
136
- }
137
- // &:active {
138
- // &:after {
139
- // content: "";
140
- // position: absolute;
141
- // width: 104%;
142
- // // border: 1px solid #54bd95;
143
- // box-shadow: var(--hlx-color-info) 0px 0px 0.25em,
144
- // rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
145
- // height: 108%;
146
- // left: -2%;
147
- // top: -2px;
148
- // border-radius: inherit;
149
- // }
150
- // }
151
- &:active {
152
- top: 2px;
153
- background-color: var(--hlx-color-info);
154
- }
155
- }
156
- &-error {
157
- color: var(--hlx-color-white);
158
- background: var(--hlx-color-error);
159
- &:hover:not(&:active) {
160
- background: var(--hlx-color-error-dark);
161
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
162
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
163
- transition: all 0.1s;
164
- }
165
- // &:active {
166
- // &:after {
167
- // content: "";
168
- // position: absolute;
169
- // width: 104%;
170
- // // border: 1px solid #54bd95;
171
- // box-shadow: var(--hlx-color-error) 0px 0px 0.25em,
172
- // rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
173
- // height: 108%;
174
- // left: -2%;
175
- // top: -2px;
176
- // border-radius: inherit;
177
- // }
178
- // // transition: all 3s;
179
- // }
180
- &:active {
181
- top: 2px;
182
- background: var(--hlx-color-error);
183
- }
184
- }
185
- }
186
- // &.secondary {
187
- // background: var(--hlx-color-white);
188
- // border: 1px solid var(--hlx-color-primary-dark);
189
- // color: var(--hlx-color-primary);
190
- // &:hover {
191
- // background-color: var(--hlx-color-primary-light);
192
- // color: var(--hlx-color-primary-dark);
193
- // }
194
- // &:active {
195
- // background-color: var(--hlx-color-primary-light);
196
- // color: var(--hlx-color-primary-dark);
197
- // opacity: .5;
198
- // transition: active 4s;
199
- // }
200
- // &-success {
201
- // border: 1px solid var(--hlx-color-success-dark);
202
- // background: var(--hlx-color-white);
203
- // color: var(--hlx-color-success-dark);
204
- // &:hover {
205
- // background-color: var(--hlx-color-success-light);
206
- // color: var(--hlx-color-success-dark);
207
- // }
208
- // &:active {
209
- // background-color: var(--hlx-color-success-light);
210
- // color: var(--hlx-color-success-dark);
211
- // transition: active 4s;
212
- // }
213
- // }
214
- // &-warning {
215
- // border: 1px solid var(--hlx-color-warning-dark);
216
- // background: var(--hlx-color-white);
217
-
218
- // color: var(--hlx-color-warning-dark);
219
- // &:hover {
220
- // background-color: var(--hlx-color-warning-light);
221
- // // color: getCssVar('color', 'success');
222
- // }
223
- // &:active {
224
- // background-color: var(--hlx-color-warning-light);
225
- // // color: getCssVar('color', 'success');
226
- // transition: active 4s;
227
- // }
228
- // }
229
- // &-info {
230
- // border: 1px solid var(--hlx-color-info-dark);
231
- // background: var(--hlx-color-white);
232
-
233
- // color: var(--hlx-color-info-dark);
234
- // &:hover {
235
- // background-color: var(--hlx-color-info-light);
236
- // // color: getCssVar('color', 'success');
237
- // }
238
- // &:active {
239
- // background-color: var(--hlx-color-info-light);
240
- // // color: getCssVar('color', 'success');
241
- // transition: active 4s;
242
- // }
243
- // }
244
- // &-error {
245
- // border: 1px solid var(--hlx-color-error-dark);
246
- // background: var(--hlx-color-white);
247
-
248
- // color: var(--hlx-color-error-dark);
249
- // &:hover {
250
- // background-color: var(--hlx-color-error-light);
251
- // // color: getCssVar('color', 'success');
252
- // }
253
- // &:active {
254
- // background-color: var(--hlx-color-error-light);
255
- // // color: getCssVar('color', 'success');
256
- // transition: active 4s;
257
- // }
258
- // }
259
- // }
260
- &.secondary {
261
- background: var(--hlx-color-white);
262
- border: 1px solid var(--hlx-color-primary-dark);
263
- color: var(--hlx-color-primary);
264
- &:hover {
265
- background-color: rgba(var(--hlx-color-primary-rgb), 0.2);
266
- color: var(--hlx-color-primary);
267
- }
268
- &:active {
269
- background-color: rgba(var(--hlx-color-primary-rgb), 0.61);
270
- color: var(--hlx-color-primary-dark);
271
- transition: active 4s;
272
- }
273
- &-success {
274
- border: 1px solid var(--hlx-color-success-dark);
275
- background: var(--hlx-color-white);
276
- color: var(--hlx-color-success);
277
- &:hover {
278
- background-color: rgba(var(--hlx-color-success-rgb), 0.2);
279
- color: var(--hlx-color-success);
280
- }
281
- &:active {
282
- background-color: rgba(var(--hlx-color-success-rgb), 0.61);
283
- color: var(--hlx-color-success-dark);
284
- transition: active 4s;
285
- }
286
- }
287
- &-warning {
288
- border: 1px solid var(--hlx-color-warning);
289
- background: var(--hlx-color-white);
290
-
291
- color: var(--hlx-color-warning);
292
- &:hover {
293
- background-color: rgba(var(--hlx-color-warning-rgb), 0.2);
294
- // color: var(--hlx-color-success);
295
- }
296
- &:active {
297
- background-color: rgba(var(--hlx-color-warning-rgb), 0.61);
298
- // color: var(--hlx-color-primary-dark);
299
- transition: active 4s;
300
- }
301
- }
302
- &-info {
303
- border: 1px solid var(--hlx-color-info);
304
- background: var(--hlx-color-white);
305
-
306
- color: var(--hlx-color-info);
307
- &:hover {
308
- background-color: rgba(var(--hlx-color-info-rgb), 0.2);
309
- // color: var(--hlx-color-success);
310
- }
311
- &:active {
312
- background-color: rgba(var(--hlx-color-info-rgb), 0.61);
313
- // color: var(--hlx-color-primary-dark);
314
- transition: active 4s;
315
- }
316
- }
317
- &-error {
318
- border: 1px solid var(--hlx-color-error);
319
- background: var(--hlx-color-white);
320
-
321
- color: var(--hlx-color-error);
322
- &:hover {
323
- background-color: rgba(var(--hlx-color-error-rgb), 0.2);
324
- // color: var(--hlx-color-success);
325
- }
326
- &:active {
327
- background-color: rgba(var(--hlx-color-error-rgb), 0.61);
328
- // color: var(--hlx-color-primary-dark);
329
- transition: active 4s;
330
- }
331
- }
332
- }
333
- // &.text {
334
- // background: var(--hlx-color-white);
335
- // // border: 1px solid getCssVar('color','primary');
336
- // color: var(--hlx-color-primary);
337
- // // primary hover
338
- // &:hover {
339
- // background-color: var(--hlx-color-primary-light);
340
- // color: var(--hlx-color-success);
341
- // }
342
- // &:active {
343
- // background-color: var(--hlx-color-primary-light);
344
- // color: var(--hlx-color-success-dark);
345
- // transition: active 4s;
346
- // }
347
- // &-success {
348
- // // border: 1px solid getCssVar('color', 'success');
349
- // background: var(--hlx-color-white);
350
- // color: var(--hlx-color-success);
351
- // &:hover {
352
- // background-color: var(--hlx-color-success-light);
353
- // color: var(--hlx-color-success);
354
- // }
355
- // &:active {
356
- // background-color: var(--hlx-color-success-light);
357
- // color: var(--hlx-color-success-dark);
358
- // transition: active 4s;
359
- // }
360
- // }
361
- // &-warning {
362
- // // border: 1px solid getCssVar('color', 'warning');
363
- // background: var(--hlx-color-white);
364
-
365
- // color: var(--hlx-color-warning-dark);
366
- // &:hover {
367
- // background-color: var(--hlx-color-warning-light);
368
- // // color: getCssVar('color', 'success');
369
- // }
370
- // &:active {
371
- // background-color: var(--hlx-color-warning-light);
372
- // color: var(--hlx-color-warning-dark);
373
- // transition: active 4s;
374
- // }
375
- // }
376
- // &-info {
377
- // // border: 1px solid getCssVar('color', 'info');
378
- // background: var(--hlx-color-white);
379
-
380
- // color: var(--hlx-color-info);
381
- // &:hover {
382
- // background-color: var(--hlx-color-info-light);
383
- // // color: getCssVar('color', 'success');
384
- // }
385
- // &:active {
386
- // background-color: var(--hlx-color-info-light);
387
- // color: var(--hlx-color-info-dark);
388
- // transition: active 4s;
389
- // }
390
- // }
391
- // &-error {
392
- // // border: 1px solid getCssVar('color', 'error');
393
- // background: var(--hlx-color-white);
394
-
395
- // color: var(--hlx-color-error);
396
- // &:hover {
397
- // background-color: var(--hlx-color-error-light);
398
- // // color: getCssVar('color', 'success');
399
- // }
400
- // &:active {
401
- // background-color: var(--hlx-color-error-light);
402
- // color: var(--hlx-color-error-dark);
403
- // transition: active 4s;
404
- // }
405
- // }
406
- // }
407
- &.text {
408
- background: var(--hlx-color-white);
409
- // border: 1px solid var(--hlx-color-primary);
410
- color: var(--hlx-color-primary);
411
- // primary hover
412
- &:hover {
413
- background-color: rgba(var(--hlx-color-primary-rgb), 0.2);
414
- color: var(--hlx-color-primary-dark);
415
- }
416
- &:active {
417
- background-color: rgba(var(--hlx-color-primary-rgb), 0.61);
418
- color: var(--hlx-color-primary-dark);
419
- transition: active 4s;
420
- }
421
- &-success {
422
- // border: 1px solid $primary-success;
423
- background: var(--hlx-color-white);
424
- color: var(--hlx-color-success);
425
- &:hover {
426
- background-color: rgba(var(--hlx-color-success-rgb), 0.2);
427
- color: var(--hlx-color-success);
428
- }
429
- &:active {
430
- background-color: rgba(var(--hlx-color-success-rgb), 0.61);
431
- color: var(--hlx-color-success);
432
- transition: active 4s;
433
- }
434
- }
435
- &-warning {
436
- // border: 1px solid var(--hlx-color-warning);
437
- background: var(--hlx-color-white);
438
-
439
- color: var(--hlx-color-warning);
440
- &:hover {
441
- background-color: rgba(var(--hlx-color-warning-rgb), 0.2);
442
- // color: $primary-success;
443
- }
444
- &:active {
445
- background-color: rgba(var(--hlx-color-warning-rgb), 0.61);
446
- // color: var(--hlx-color-primary-dark);
447
- transition: active 4s;
448
- }
449
- }
450
- &-info {
451
- // border: 1px solid var(--hlx-color-info);
452
- background: var(--hlx-color-white);
453
-
454
- color: var(--hlx-color-info);
455
- &:hover {
456
- background-color: rgba(var(--hlx-color-info-rgb), 0.2);
457
- // color: $primary-success;
458
- }
459
- &:active {
460
- background-color: rgba(var(--hlx-color-info-rgb), 0.61);
461
- // color: var(--hlx-color-primary-dark);
462
- transition: active 4s;
463
- }
464
- }
465
- &-error {
466
- // border: 1px solid var(--hlx-color-error);
467
- background: var(--hlx-color-white);
468
-
469
- color: var(--hlx-color-error);
470
- &:hover {
471
- background-color: rgba(var(--hlx-color-error-rgb), 0.2);
472
- // color: $primary-success;
473
- }
474
- &:active {
475
- background-color: rgba(var(--hlx-color-error-rgb), 0.61);
476
- // color: var(--hlx-color-primary-dark);
477
- transition: active 4s;
478
- }
479
- }
480
- }
481
- &.link {
482
- padding: 0 !important;
483
- background: transparent;
484
- // border: 1px solid getCssVar('color','primary');
485
- color: var(--hlx-color-link);
486
- // primary hover
487
- &:hover {
488
- background-color: transparent !important;
489
- box-shadow: none !important;
490
- color: var(--hlx-color-link);
491
- text-decoration: underline;
492
- text-decoration-color: var(--hlx-color-link);
493
- // font-weight: 600;
494
- }
495
- &:active {
496
- // background-color: getCssVar('color', 'link'));
497
- background-color: transparent !important;
498
- border: none !important;
499
- color: var(--hlx-color-link);
500
- &::after {
501
- box-shadow: none !important;
502
- }
503
- transition: active 4s;
504
- }
505
- }
506
- &.pill {
507
- // &:active {
508
- // &:after {
509
- // content: "";
510
- // position: absolute;
511
- // width: 104%;
512
- // // border: 1px solid #54bd95;
513
- // box-shadow: var(--hlx-color-info) 0px 0px 0.25em,
514
- // rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
515
- // height: 108%;
516
- // left: -2%;
517
- // top: -2px;
518
- // border-radius: 24px;
519
- // }
520
- // }
521
- border-radius: 999px !important;
522
- color: var(--hlx-color-white);
523
- background-color: var(--hlx-color-primary);
524
- &:hover:not(&:active) {
525
- background-color: var(--hlx-color-primary-dark);
526
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
527
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
528
- transition: all 0.1s;
529
- }
530
- &:hover {
531
- background: var(--hlx-color-primary-dark);
532
- // box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
533
- // 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
534
- transition: all 0.1s;
535
- }
536
- &:active {
537
- top: 2px;
538
- background: var(--hlx-color-primary);
539
- }
540
- &-success {
541
- border-radius: 22px;
542
- background-color: var(--hlx-color-success);
543
- color: var(--hlx-color-white);
544
- &:hover:not(&:active) {
545
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
546
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
547
- background: var(--hlx-color-success-dark);
548
- transition: all 0.1s;
549
- }
550
- &:active {
551
- top: 2px;
552
- background: var(--hlx-color-success);
553
- }
554
- }
555
- &-warning {
556
- border-radius: 22px;
557
- background-color: var(--hlx-color-warning);
558
- color: var(--hlx-color-white);
559
- &:hover:not(&:active) {
560
- background: var(--hlx-color-warning-dark);
561
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
562
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
563
- transition: all 0.1s;
564
- }
565
- &:active {
566
- top: 2px;
567
- background: var(--hlx-color-warning);
568
- }
569
- }
570
- &-info {
571
- border-radius: 22px;
572
- background: var(--hlx-color-info);
573
- color: var(--hlx-color-white);
574
- &:hover:not(&:active) {
575
- background: var(--hlx-color-info-dark);
576
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
577
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
578
- transition: all 0.1s;
579
- }
580
- &:active {
581
- top: 2px;
582
- background: var(--hlx-color-info);
583
- }
584
- }
585
- &-error {
586
- border-radius: 22px;
587
- color: var(--hlx-color-white);
588
- background: var(--hlx-color-error);
589
- &:hover:not(&:active) {
590
- background: var(--hlx-color-error-dark);
591
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
592
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
593
- transition: all 0.1s;
594
- }
595
- &:active {
596
- top: 2px;
597
- background: var(--hlx-color-error);
598
- }
599
- }
600
- }
601
- &.tertiary {
602
- color: var(--hlx-color-white);
603
- background-color: var(--hlx-color-primary);
604
- // padding: 1.4rem;
605
- height: 50px;
606
- border-radius: 1rem;
607
- font-size: 18px;
608
- line-height: 2rem;
609
- width: 50px;
610
- display: flex;
611
- align-content: center;
612
- flex-direction: column;
613
- align-items: center;
614
- justify-content: center;
615
- &:hover:not(&:active) {
616
- background: var(--hlx-color-primary-dark);
617
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
618
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
619
- transition: all 0.1s;
620
- }
621
- &:hover {
622
- background-color: var(--hlx-color-primary);
623
- transition: all 0.1s;
624
- }
625
- &:active {
626
- &:after {
627
- content: '';
628
- position: absolute;
629
- width: 104%;
630
- // border: 1px solid #54bd95;
631
- box-shadow: var(--hlx-color-primary) 0px 0px 0.25em,
632
- rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
633
- height: 108%;
634
- left: -1.8%;
635
- top: -4%;
636
- border-radius: 1rem;
637
- }
638
- }
639
- &-invert {
640
- color: var(--hlx-color-white);
641
- // padding: 1.4rem;
642
- height: 50px;
643
- border-radius: 1rem;
644
- font-size: 18px;
645
- background: var(--hlx-color-primary-dark);
646
- width: 50px;
647
- display: flex;
648
- align-content: center;
649
- flex-direction: column;
650
- align-items: center;
651
- justify-content: center;
652
- background: var(--hlx-color-white);
653
- color: var(--hlx-color-primary);
654
- &:hover:not(&:active) {
655
- box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%),
656
- 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
657
- background-color: var(--hlx-color-primary);
658
- color: var(--hlx-color-white);
659
- transition: all 0.1s;
660
- }
661
- &:active {
662
- &:after {
663
- content: '';
664
- position: absolute;
665
- width: 104%;
666
- // background-color: var(--hlx-color-primary-dark);
667
- // border: 1px solid #54bd95;
668
-
669
- box-shadow: var(--hlx-color-primary) 0px 0px 0.25em,
670
- rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
671
- height: 108%;
672
- left: -2%;
673
- top: -2px;
674
- border-radius: 1rem;
675
- }
676
- }
677
- }
678
- &-secondary {
679
- // color: var(--hlx-color-white);
680
- // padding: 1.4rem;
681
- height: 50px;
682
- border-radius: 1rem;
683
- font-size: 18 px;
684
- // background: #54bd95;
685
- width: 50px;
686
- background: var(--hlx-color-white);
687
- border: 1px solid var(--hlx-color-primary);
688
- color: var(--hlx-color-primary);
689
- display: flex;
690
- align-content: center;
691
- flex-direction: column;
692
- align-items: center;
693
- justify-content: center;
694
- // primary hover
695
- &:hover {
696
- background-color: rgba(var(--hlx-color-primary-rgb), 0.2);
697
- color: var(--hlx-color-primary);
698
- }
699
- &:active {
700
- background-color: rgba(var(--hlx-color-primary-rgb), 0.6);
701
- color: var(--hlx-color-primary-dark);
702
- transition: active 4s;
703
- }
704
- }
705
- }
706
-
707
- &.sm {
708
- // font-size: var(--hlx-font-content-size-xs);
709
- // line-height: var(--hlx-line-height-size-sm);
710
- // padding: 0.5rem 1rem;
711
- // min-width: 72px;
712
- // border-radius: 3px;
713
- height: 38px;
714
- padding: 10px 12px;
715
- border-radius: 6px;
716
- // font-weight: 600;
717
- font-size: var(--hlx-font-content-size-sm);
718
- line-height: 18.15px;
719
- letter-spacing: 0.005em;
720
- &:active {
721
- &:after {
722
- border-radius: inherit;
723
- }
724
- }
725
- }
726
- &.lg {
727
- // font-size: var(--hlx-line-height-size);
728
- // line-height: var(--hlx-line-height-size);
729
- // padding: 1rem 2rem;
730
- // min-width: 144px;
731
- height: 62px;
732
- padding: 22px 20px;
733
- // border-radius: 999px;
734
- // font-weight: 600;
735
- font-size: 15px;
736
- line-height: 18.15px;
737
- letter-spacing: 0.005em;
738
- }
739
- &.disabled-button {
740
- background: var(--hlx-color-disable) !important;
741
- color: var(--hlx-color-disable-text) !important;
742
- cursor: default;
743
- pointer-events: none;
744
- border: 1px solid var(--hlx-color-disable) !important;
745
- &[class*='text-'] {
746
- background: var(--hlx-color-white) !important;
747
- border: none !important;
748
- &:hover {
749
- background: none !important;
750
- color: var(--hlx-color-disable-text) !important;
751
- // cursor: pointer;
752
- }
753
- }
754
- &:hover,
755
- &:active {
756
- background: var(--hlx-color-disable) !important;
757
- pointer-events: none !important;
758
- // border:none !important;
759
- box-shadow: none !important;
760
- }
761
- }
762
- }