halleyx-ui-framework 1.0.4

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 (163) hide show
  1. package/LICENSE +28 -0
  2. package/README.md +158 -0
  3. package/dist/cjs/index.js +9 -0
  4. package/dist/es/index.css +1 -0
  5. package/dist/es/index.js +9 -0
  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/halley-icons-v4.eot +0 -0
  11. package/dist/src/assets/fonts/halley-icons-v4.svg +356 -0
  12. package/dist/src/assets/fonts/halley-icons-v4.ttf +0 -0
  13. package/dist/src/assets/fonts/halley-icons-v4.woff +0 -0
  14. package/dist/src/assets/fonts/halley-icons-v6.eot +0 -0
  15. package/dist/src/assets/fonts/halley-icons-v6.svg +359 -0
  16. package/dist/src/assets/fonts/halley-icons-v6.ttf +0 -0
  17. package/dist/src/assets/fonts/halley-icons-v6.woff +0 -0
  18. package/dist/src/assets/fonts/icomoon.eot +0 -0
  19. package/dist/src/assets/fonts/icomoon.svg +139 -0
  20. package/dist/src/assets/fonts/icomoon.ttf +0 -0
  21. package/dist/src/assets/fonts/icomoon.woff +0 -0
  22. package/dist/src/assets/fonts/magicoon-icons.eot +0 -0
  23. package/dist/src/assets/fonts/magicoon-icons.svg +2310 -0
  24. package/dist/src/assets/fonts/magicoon-icons.ttf +0 -0
  25. package/dist/src/assets/fonts/magicoon-icons.woff +0 -0
  26. package/dist/src/assets/fonts/ostrich-regular.ttf +0 -0
  27. package/dist/src/assets/icon-style.css +1423 -0
  28. package/dist/src/assets/icons/fonts/JosefinSans-Regular.ttf +0 -0
  29. package/dist/src/assets/icons/fonts/OpenSans.ttf +0 -0
  30. package/dist/src/assets/icons/fonts/Pacifico.ttf +0 -0
  31. package/dist/src/assets/icons/fonts/Quicksand.ttf +0 -0
  32. package/dist/src/assets/icons/fonts/halley-icons-v4.eot +0 -0
  33. package/dist/src/assets/icons/fonts/halley-icons-v4.svg +356 -0
  34. package/dist/src/assets/icons/fonts/halley-icons-v4.ttf +0 -0
  35. package/dist/src/assets/icons/fonts/halley-icons-v4.woff +0 -0
  36. package/dist/src/assets/icons/fonts/halley-icons-v6.eot +0 -0
  37. package/dist/src/assets/icons/fonts/halley-icons-v6.svg +359 -0
  38. package/dist/src/assets/icons/fonts/halley-icons-v6.ttf +0 -0
  39. package/dist/src/assets/icons/fonts/halley-icons-v6.woff +0 -0
  40. package/dist/src/assets/icons/fonts/icomoon.eot +0 -0
  41. package/dist/src/assets/icons/fonts/icomoon.svg +139 -0
  42. package/dist/src/assets/icons/fonts/icomoon.ttf +0 -0
  43. package/dist/src/assets/icons/fonts/icomoon.woff +0 -0
  44. package/dist/src/assets/icons/fonts/ostrich-regular.ttf +0 -0
  45. package/dist/src/assets/icons/icon-style(old).css +1423 -0
  46. package/dist/src/assets/icons/icon-style.css +6927 -0
  47. package/dist/src/assets/img/Group_12640.png +0 -0
  48. package/dist/src/assets/img/Halleyx-Logo-Black.png +0 -0
  49. package/dist/src/assets/img/Halleyx-Logo-Line-Dark.png +0 -0
  50. package/dist/src/assets/img/Halleyx-Logo-Line-Lite.png +0 -0
  51. package/dist/src/assets/img/Halleyx-Logo-Only.png +0 -0
  52. package/dist/src/assets/img/Halleyx-Logo-White.png +0 -0
  53. package/dist/src/assets/img/Halleyx-collage-login.svg +29 -0
  54. package/dist/src/assets/img/illustration1.png +0 -0
  55. package/dist/src/assets/img/login_collage.svg +29 -0
  56. package/dist/src/assets/img/logo (Small) (Small).png +0 -0
  57. package/dist/src/assets/img/logo (Small).png +0 -0
  58. package/dist/src/assets/img/logo.png +0 -0
  59. package/dist/src/assets/img/new_logo/logo-black.svg +10 -0
  60. package/dist/src/assets/img/new_logo/logo-large.png +0 -0
  61. package/dist/src/assets/img/new_logo/logo-large.svg +3 -0
  62. package/dist/src/assets/img/new_logo/logo-line-black-large.png +0 -0
  63. package/dist/src/assets/img/new_logo/logo-line-black-large.svg +10 -0
  64. package/dist/src/assets/img/new_logo/logo-line-black-medium.png +0 -0
  65. package/dist/src/assets/img/new_logo/logo-line-black-medium.svg +10 -0
  66. package/dist/src/assets/img/new_logo/logo-line-black-small.png +0 -0
  67. package/dist/src/assets/img/new_logo/logo-line-black-small.svg +10 -0
  68. package/dist/src/assets/img/new_logo/logo-medium.png +0 -0
  69. package/dist/src/assets/img/new_logo/logo-medium.svg +3 -0
  70. package/dist/src/assets/img/new_logo/logo-small.png +0 -0
  71. package/dist/src/assets/img/new_logo/logo-small.svg +3 -0
  72. package/dist/src/assets/img/new_logo/logo-white.svg +10 -0
  73. package/dist/src/assets/img/search3.svg +11 -0
  74. package/dist/src/assets/img/search3_active.svg +11 -0
  75. package/dist/src/assets/img/search3_hover.svg +11 -0
  76. package/dist/src/assets/img/verification-mail-sent.png +0 -0
  77. package/dist/src/assets/styles/accordion.scss +113 -0
  78. package/dist/src/assets/styles/alert.scss +215 -0
  79. package/dist/src/assets/styles/badge.scss +34 -0
  80. package/dist/src/assets/styles/base.scss +1 -0
  81. package/dist/src/assets/styles/breadcrumb.scss +64 -0
  82. package/dist/src/assets/styles/buttons.scss +762 -0
  83. package/dist/src/assets/styles/calendar.scss +361 -0
  84. package/dist/src/assets/styles/cards.scss +93 -0
  85. package/dist/src/assets/styles/colorPicker.scss +15 -0
  86. package/dist/src/assets/styles/colorpalette.scss +158 -0
  87. package/dist/src/assets/styles/common/var.scss +327 -0
  88. package/dist/src/assets/styles/componentlayout.scss +150 -0
  89. package/dist/src/assets/styles/contextMenu.scss +59 -0
  90. package/dist/src/assets/styles/customdropdown.scss +117 -0
  91. package/dist/src/assets/styles/dashboard.scss +970 -0
  92. package/dist/src/assets/styles/dataview.scss +248 -0
  93. package/dist/src/assets/styles/divider.scss +9 -0
  94. package/dist/src/assets/styles/dottedPagination.scss +46 -0
  95. package/dist/src/assets/styles/draggables.scss +146 -0
  96. package/dist/src/assets/styles/drawer.scss +113 -0
  97. package/dist/src/assets/styles/errorpage.scss +78 -0
  98. package/dist/src/assets/styles/fileupload.scss +231 -0
  99. package/dist/src/assets/styles/fonts/JosefinSans-Regular.ttf +0 -0
  100. package/dist/src/assets/styles/fonts/OpenSans.ttf +0 -0
  101. package/dist/src/assets/styles/fonts/Pacifico.ttf +0 -0
  102. package/dist/src/assets/styles/fonts/Quicksand.ttf +0 -0
  103. package/dist/src/assets/styles/fonts/halley-icons-v4.eot +0 -0
  104. package/dist/src/assets/styles/fonts/halley-icons-v4.svg +356 -0
  105. package/dist/src/assets/styles/fonts/halley-icons-v4.ttf +0 -0
  106. package/dist/src/assets/styles/fonts/halley-icons-v4.woff +0 -0
  107. package/dist/src/assets/styles/fonts/halley-icons-v6.eot +0 -0
  108. package/dist/src/assets/styles/fonts/halley-icons-v6.svg +359 -0
  109. package/dist/src/assets/styles/fonts/halley-icons-v6.ttf +0 -0
  110. package/dist/src/assets/styles/fonts/halley-icons-v6.woff +0 -0
  111. package/dist/src/assets/styles/fonts/icomoon.eot +0 -0
  112. package/dist/src/assets/styles/fonts/icomoon.svg +139 -0
  113. package/dist/src/assets/styles/fonts/icomoon.ttf +0 -0
  114. package/dist/src/assets/styles/fonts/icomoon.woff +0 -0
  115. package/dist/src/assets/styles/fonts/ostrich-regular.ttf +0 -0
  116. package/dist/src/assets/styles/fonts.scss +46 -0
  117. package/dist/src/assets/styles/icon.scss +1424 -0
  118. package/dist/src/assets/styles/imagegallery.scss +195 -0
  119. package/dist/src/assets/styles/importProgress.scss +48 -0
  120. package/dist/src/assets/styles/index.scss +17 -0
  121. package/dist/src/assets/styles/inputfields.scss +296 -0
  122. package/dist/src/assets/styles/inputitems.scss +296 -0
  123. package/dist/src/assets/styles/label.scss +285 -0
  124. package/dist/src/assets/styles/loaders.scss +147 -0
  125. package/dist/src/assets/styles/mixins/_var.scss +89 -0
  126. package/dist/src/assets/styles/mixins/config.scss +4 -0
  127. package/dist/src/assets/styles/mixins/functions.scss +36 -0
  128. package/dist/src/assets/styles/modalwindow.scss +110 -0
  129. package/dist/src/assets/styles/newtable.scss +318 -0
  130. package/dist/src/assets/styles/objectViewer.scss +101 -0
  131. package/dist/src/assets/styles/pagination.scss +221 -0
  132. package/dist/src/assets/styles/partials.scss +8 -0
  133. package/dist/src/assets/styles/rating.scss +41 -0
  134. package/dist/src/assets/styles/scrollbar.scss +15 -0
  135. package/dist/src/assets/styles/search.scss +195 -0
  136. package/dist/src/assets/styles/select.scss +776 -0
  137. package/dist/src/assets/styles/sidebar.scss +468 -0
  138. package/dist/src/assets/styles/signup.scss +150 -0
  139. package/dist/src/assets/styles/slideControl.scss +116 -0
  140. package/dist/src/assets/styles/source_content.scss +14 -0
  141. package/dist/src/assets/styles/speeddial.scss +200 -0
  142. package/dist/src/assets/styles/stepControl.scss +76 -0
  143. package/dist/src/assets/styles/style.css +252 -0
  144. package/dist/src/assets/styles/style.css.map +13 -0
  145. package/dist/src/assets/styles/switch.scss +224 -0
  146. package/dist/src/assets/styles/tablev2.scss +244 -0
  147. package/dist/src/assets/styles/tabs.scss +55 -0
  148. package/dist/src/assets/styles/tag.scss +102 -0
  149. package/dist/src/assets/styles/texteditor.scss +286 -0
  150. package/dist/src/assets/styles/timeline.scss +382 -0
  151. package/dist/src/assets/styles/tooltip.scss +360 -0
  152. package/dist/src/assets/styles/tree.scss +516 -0
  153. package/dist/src/assets/styles/treeSelect.scss +286 -0
  154. package/dist/src/assets/styles/variables.scss +77 -0
  155. package/dist/src/assets/styles/visualbuilder.scss +493 -0
  156. package/dist/src/assets/svg/color-palette.svg +15 -0
  157. package/dist/src/assets/svg/search3.svg +11 -0
  158. package/dist/src/assets/svg/search3_active.svg +11 -0
  159. package/dist/src/assets/svg/search3_hover.svg +11 -0
  160. package/dist/umd/index.umd.css +1 -0
  161. package/dist/umd/index.umd.js +10 -0
  162. package/dist/umd/index.umd.js.map +1 -0
  163. package/package.json +61 -0
package/dist/src/assets/styles/buttons.scss ADDED
@@ -0,0 +1,762 @@
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: rgba(var(--hlx-color-link-rgb), 0.7);
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
+ }