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
@@ -1,195 +0,0 @@
1
- .parent {
2
- display: none;
3
- font-size: 14px !important;
4
- }
5
- .parent:first-child {
6
- display: block;
7
- }
8
- .db-row {
9
- display: flex;
10
- width: 100%;
11
- font-size: 14px !important;
12
- // height: 60px;
13
- i {
14
- cursor: pointer;
15
- }
16
- }
17
-
18
- #other {
19
- min-height: 40px;
20
- display: flex;
21
- align-items: baseline;
22
- }
23
- .new-obj-container {
24
- position: relative;
25
- align-items: flex-start;
26
- }
27
- #other2.db-row2 {
28
- height: 32px;
29
- display: flex;
30
- }
31
- #obj.db-row {
32
- min-height: 40px;
33
- padding-left: 4px;
34
- font-size: 14px !important;
35
- }
36
-
37
- #obj.db-row:not(:first-of-type) {
38
- margin-left: -40px;
39
- }
40
-
41
- .array-string {
42
- display: flex;
43
- margin-top: 6px;
44
- width: max-content;
45
- }
46
-
47
- .array-index {
48
- display: flex;
49
- }
50
- .div-with-arrow {
51
- margin-left: 4px;
52
- margin-top: 8px;
53
- // margin-bottom: 16px;
54
- }
55
-
56
- .colon-key {
57
- display: flex;
58
- width: 150px !important;
59
- word-break: break-all;
60
- margin-top: 5px;
61
- margin-right: 20px;
62
- }
63
-
64
- #other {
65
- padding: 4px;
66
- border-radius: 5px;
67
- }
68
- #other:hover {
69
- background: var(--hlx-color-primary-lighter);
70
- .enable-edit {
71
- margin-left: 1rem;
72
- margin-bottom: 3px;
73
- display: flex !important;
74
- }
75
- }
76
-
77
- .array-index-parent:has(.array-index) {
78
- border-right: 1px solid #d8d8d8;
79
- padding-right: 4px;
80
- margin-top: 6px;
81
- margin-bottom: 16px;
82
- }
83
- .array-index-parent:has(.array-string) {
84
- // border-right: 1px solid #d8d8d8;
85
- // width: 150px;
86
- word-break: break-all;
87
- }
88
-
89
- .colon-value {
90
- word-break: break-all;
91
- display: flex;
92
- align-items: flex-end;
93
- min-width: 250px;
94
-
95
- .cancel-edit {
96
- color: var(--error);
97
- font-size: 1.5rem;
98
- margin-left: 4px;
99
- }
100
- .icon-check-square-regular {
101
- color: #54bd95;
102
- font-size: 1.5rem;
103
- }
104
- }
105
-
106
- #other.db-row {
107
- // margin-bottom: 1rem;
108
-
109
- .radio-container {
110
- align-items: center;
111
- }
112
-
113
- .radio-checkmark {
114
- margin-top: 4px;
115
- }
116
- }
117
-
118
- .schema-builder-input {
119
- height: 36px;
120
- border-radius: 5px;
121
- border: 1px solid #d8d8d8;
122
- padding: 8px;
123
- font-size: 14px;
124
- margin-left: 1rem;
125
- margin-bottom: 1rem;
126
- }
127
-
128
- // .schema-builder-key-value {
129
- // display: flex;
130
- // }
131
-
132
- .ov-icon-type {
133
- display: flex;
134
- align-items: center;
135
- justify-content: center;
136
- font-size: 14px;
137
- .icon-holder {
138
- display: flex;
139
- }
140
- .icon-holder.num{
141
- font-size: 20px;
142
- margin-top: -3px;
143
- font-weight: bold;
144
- width: 40px;
145
- display: flex;
146
- justify-content: center;
147
- }
148
- .icon-holder.arr{
149
- font-size: 14px;
150
- margin-top: -2px;
151
- font-weight: bold;
152
- width: 40px;
153
- display: flex;
154
- justify-content: center;
155
- font-family: monospace !important;
156
- }
157
- .icon-holder.obj{
158
- font-size: 14px;
159
- margin-top: -3px;
160
- font-weight: bold;
161
- width: 40px;
162
- display: flex;
163
- justify-content: center;
164
- font-family: monospace !important;
165
- }
166
- .icon-holder.str{
167
- font-family: monospace !important;
168
- font-size: 12px;
169
- font-weight: bold;
170
- width: 40px;
171
- display: flex;
172
- justify-content: center;
173
- margin-top: 1px;
174
- }
175
- .icon-holder.date{
176
- font-size: 18px;
177
- font-weight: bold;
178
- width: 40px;
179
- display: flex;
180
- justify-content: center;
181
- margin-top: 1px;
182
- }
183
- .icon-holder.bool{
184
- font-size: 18px;
185
- font-weight: bold;
186
- width: 40px;
187
- display: flex;
188
- justify-content: center;
189
- margin-top: 1px;
190
- }
191
- .asterisk {
192
- margin-left: 5px;
193
- color: #ff5050;
194
- }
195
- }
@@ -1,14 +0,0 @@
1
- .outer-overlay{
2
- width: 100%;
3
- height: 100%;
4
- position: fixed;
5
- top: 0;
6
- bottom: 0;
7
- left: 0;
8
- right: 0;
9
- background: transparent;
10
- display: flex;
11
- justify-content: center;
12
- align-items: center;
13
- z-index: 10000000;
14
- }
@@ -1,244 +0,0 @@
1
- [id^="hlx-pagination-container-hlx-"] {
2
- // display: grid;
3
- // width: 100%;
4
- // justify-content: end;
5
- .hlx-pagination-input-value-hidden{
6
- display: none;
7
- }
8
- display: flex;
9
- width: 100%;
10
- flex-wrap: wrap;
11
- gap: 0.875em;
12
- justify-content: space-between;
13
- p {
14
- font-size: var(--hlx-font-content-size-sm);
15
- min-width: max-content;
16
- }
17
- &.rows-per-page:not(.go-to) {
18
- justify-content: space-between;
19
- grid-template-columns: 70px auto;
20
- }
21
- .hlx-rows-per-page-container {
22
- display: flex;
23
- align-items: center;
24
- gap: 10px;
25
- flex-wrap: wrap;
26
- & > .hlx-select-container {
27
- width: 60px;
28
- }
29
- & > p.rpp-title {
30
- min-width: max-content;
31
- // margin-right: 7%;
32
- }
33
- & > p.rpp-result {
34
- min-width: max-content;
35
- // margin-left: 8px;
36
- }
37
- }
38
- .pagination-and-goto {
39
- display: flex;
40
- align-items: center;
41
- &.go-to:not(.rows-per-page) {
42
- grid-template-columns: 1fr auto;
43
- .hlx-go-to-container {
44
- width: 100%;
45
- display: flex;
46
- justify-content: center;
47
- gap: 10px;
48
- align-items: center;
49
- .go-to-wrapper {
50
- // margin-left: auto;
51
- display: flex;
52
- justify-content: center;
53
- gap: 10px;
54
- align-items: center;
55
- }
56
- .input-area {
57
- width: 70px;
58
- }
59
- }
60
- }
61
- & .hlx-pagination {
62
- // margin-left: auto;
63
- display: flex;
64
- flex-flow: row unwrap;
65
- flex-direction: row;
66
- align-items: center;
67
- justify-content: flex-start;
68
- user-select: none;
69
- font-size: var(--hlx-font-content-size-sm);
70
- line-height: 24px;
71
- letter-spacing: 0.005em;
72
- font-weight: 500;
73
- gap: 4px;
74
- .nav {
75
- color: var(--hlx-color-primary);
76
- -webkit-user-select: none;
77
- -moz-user-select: none;
78
- // width: 2em;
79
- max-width: 35px;
80
- min-height: 35px;
81
- user-select: none;
82
- // height: 2em;
83
- display: flex;
84
- flex-direction: row;
85
- // background: $grey;
86
- &.prev-btn,
87
- &.next-btn {
88
- font-size: 14px;
89
- font-weight: bold;
90
- min-width: 35px;
91
- min-height: 35px;
92
- i {
93
- font-weight: bold;
94
- font-size: var(--hlx-icon-size-xs);
95
- }
96
- &:hover {
97
- cursor: pointer;
98
- background: var(--hlx-color-primary-light);
99
- // color:$border-color-secondary;
100
- // color: getCssVar('color', 'primary');
101
- }
102
- // & > i:last-child {
103
- // margin-left: -26px;
104
- // }
105
- }
106
- &.background {
107
- background: rgba(var(--hlx-color-disable-rgb), 0.6);
108
- }
109
- align-items: center;
110
- justify-content: center;
111
- border-radius: 50%;
112
- &:hover {
113
- cursor: pointer;
114
- background: var(--hlx-color-primary-light);
115
-
116
- // color: getCssVar('color', 'primary');
117
- }
118
- }
119
- .nav.disabled {
120
- color: var(--hlx-border-color);
121
- }
122
- .page-btn {
123
- /* padding: 10px; */
124
- /* border: 1px solid; */
125
- // width: 2em;
126
-
127
- // height: 2em;
128
- user-select: none;
129
-
130
- min-width: 35px;
131
- min-height: 35px;
132
- display: flex;
133
- justify-items: flex-start;
134
- align-items: center;
135
- justify-content: center;
136
- border-radius: 50%;
137
- // box-shadow: 1px 2px 11px -7px;
138
- /* background: getCssVar('color', 'primary'); */
139
- &.background {
140
- background: rgba(var(--hlx-color-disable-rgb), $alpha: 0.4);
141
- }
142
- i {
143
- font-size: var(--hlx-icon-size-sm);
144
- }
145
- &.hide {
146
- display: none;
147
- }
148
- &.higlight {
149
- border-radius: 50%;
150
- // border:1px solid #f97a19; -->
151
- // display: block;
152
- background-color: var(--hlx-color-primary);
153
- cursor: pointer;
154
- // box-shadow: 0px 1px 8px -4px black;
155
-
156
- color: white;
157
- }
158
- &.dec::before,
159
- &.inc::before {
160
- content: "";
161
- }
162
- &:hover:not(.higlight) {
163
- border-radius: 50%;
164
- // border:1px solid #f97a19; -->
165
- background: var(--hlx-color-primary-light);
166
- cursor: pointer;
167
- color: var(--hlx-text-color-primary);
168
- transform: scale(1.01);
169
- }
170
- .dec-icon {
171
- // font-size: 0.7rem;
172
- display: none;
173
- }
174
- &.dec:hover {
175
- cursor: default;
176
- .dec-icon {
177
- display: block;
178
- }
179
- &::before {
180
- content: "";
181
- }
182
- }
183
- &.inc:hover {
184
- cursor: default;
185
-
186
- .dec-icon {
187
- display: block;
188
- }
189
- &::before {
190
- content: "";
191
- }
192
- }
193
- }
194
- }
195
- }
196
-
197
- &.rows-per-page.go-to {
198
- grid-template-columns: 70px 1fr auto;
199
- .hlx-go-to-container {
200
- width: 100%;
201
- display: flex;
202
- justify-content: center;
203
- gap: 10px;
204
- align-items: center;
205
- .go-to-wrapper {
206
- margin-left: auto;
207
- display: flex;
208
- justify-content: center;
209
- gap: 10px;
210
- align-items: center;
211
- }
212
- .input-area {
213
- width: 70px;
214
- }
215
- }
216
- }
217
- }
218
- // @media screen and (max-width: 800px) {
219
- // [id^='hlx-pagination-container-hlx-'] {
220
- // &.rows-per-page:not(.go-to) {
221
- // grid-template-columns: 70px;
222
- // grid-template-rows: 1fr 1fr;
223
- // gap: 14px;
224
- // }
225
- // }
226
- // }
227
- @media screen and (max-width: 740px) {
228
- [id^="hlx-pagination-container-hlx-"] {
229
- &.rows-per-page:not(.go-to) {
230
- grid-template-columns: auto;
231
- grid-template-rows: auto;
232
- gap: 14px;
233
- }
234
- &.rows-per-page.go-to {
235
- grid-template-columns: 1fr auto;
236
- grid-template-rows: auto auto;
237
- gap: 23px;
238
- justify-content: left;
239
- // .hlx-rows-per-page-container {
240
- // // width: 70px;
241
- // }
242
- }
243
- }
244
- }
@@ -1,8 +0,0 @@
1
-
2
- // @import "./source_content", "./variables", "./component_layout", "./alert",
3
- // "./badge", "./dottedPagination", "./buttons", "./importProgress", "./pagination",
4
- // "./sidebar", "./slideControl", "./stepControl", "./tree", "./cards", "./tabs",
5
- // "./draggables", "./inputfields", "./inputitems","./loaders","./select","./modalwindow",
6
- // "./tooltip","./table","./search", "./fileupload","./accordion", "./timeline",'./divider','./label',
7
- // "./rating",'./dashboard','./breadcrumb','./tag','./signup','./texteditor','./treeSelect', './errorpage', './dataview', './speeddial','./imagegallery','./toggleButton','./colorpalette','./calendar',
8
- // './newtable','./drawer','fonts';
@@ -1,41 +0,0 @@
1
- .rating-group {
2
- display: inline-flex;
3
- height: 40px;
4
- flex-direction: row;
5
- flex-wrap: nowrap;
6
- gap: 7px;
7
- justify-content: center;
8
- align-items: center;
9
- font-size: var(--hlx-icon-size-lg);
10
- }
11
-
12
- // /* make hover effect work properly in IE */
13
- // .rating__icon {
14
- // pointer-events: none;
15
- // }
16
- .full-star[read='false'] {
17
- // background-color: red;
18
- .rating__label:hover:not([class='rated']) {
19
- display: block;
20
- // background: #000;
21
- }
22
- }
23
- .rate-star-wrapper {
24
- margin-left: -4%;
25
- }
26
-
27
- /* hide radio inputs */
28
-
29
- .rating__input {
30
- position: absolute !important;
31
- left: -9999px !important;
32
- }
33
-
34
- /* set icon padding and size */
35
- .rating__label {
36
- cursor: pointer;
37
- color: var(--hlx-color-primary);
38
- // padding: 0 0.1em;
39
- font-size: var(--hlx-icon-size-lg);
40
- display: inline;
41
- }
@@ -1,15 +0,0 @@
1
- ::-webkit-scrollbar {
2
- width: 4px;
3
- height: 4px;
4
- }
5
- ::-webkit-scrollbar-track {
6
- background-color: transparent;
7
- border-radius: 20px;
8
- }
9
- ::-webkit-scrollbar-thumb {
10
- background: #bdbdbd;
11
- border-radius: 10px;
12
- }
13
- ::-webkit-scrollbar-thumb:hover {
14
- background: #bdbdbd;
15
- }
@@ -1,191 +0,0 @@
1
- .box {
2
- margin: 10px;
3
- }
4
- .search-container {
5
- font-family: var(--hlx-font-type-content);
6
- width: 100%;
7
- // margin-right: 50px;
8
- height: 38px;
9
- .search-1 {
10
- // margin: 30px;
11
- padding: 9px 12px 9px 12px;
12
- background: white;
13
- height: 38px;
14
- width: 100%;
15
- position: relative;
16
- display: flex;
17
- flex-direction: row;
18
- align-items: center;
19
- justify-content: space-between;
20
- border: solid 1px var(--hlx-border-color);
21
- border-radius: 20px;
22
- &:hover {
23
- border: 1px solid var(--hlx-color-primary);
24
- }
25
- input {
26
- display: block;
27
- width: 90%;
28
- height: 20px;
29
- color: var(--hlx-text-color-primary);
30
- background: transparent;
31
- transition: all 0.3s ease;
32
- // padding: 6px 0 6px 0px;
33
- outline: none;
34
- border: none;
35
- font-size: 14px;
36
- }
37
- input::placeholder {
38
- font-size: 14px;
39
- }
40
-
41
- .icon-1 {
42
- .icon-search-regular {
43
- font-size: var(--hlx-icon-size-md);
44
- color: var(--hlx-border-color);
45
- }
46
- }
47
- }
48
- .search-1:hover > div > .icon-search-regular {
49
- color: var(--hlx-color-primary);
50
- }
51
-
52
- .search-1 > input:focus + div > .icon-search-regular {
53
- color: var(--hlx-color-primary-dark);
54
- }
55
- .search-1:focus-within {
56
- border: 1px solid var(--hlx-color-primary-dark);
57
- }
58
-
59
- .search-2 {
60
- // margin: 30px;
61
- width: 100%;
62
- position: relative;
63
- display: flex;
64
- flex-direction: row;
65
- align-items: center;
66
- justify-content: space-between;
67
-
68
- input {
69
- display: block;
70
- width: 95%;
71
- height: 38px;
72
- color: var(--hlx-text-color-primary);
73
- background: transparent;
74
- transition: all 0.3s ease;
75
- padding: 10px 12px;
76
- font-size: 14px;
77
- outline: none;
78
- border: solid 1px var(--hlx-border-color);
79
- border-radius: 20px;
80
- margin-right: 10px;
81
- &:hover {
82
- border: 1px solid var(--hlx-color-primary);
83
- }
84
- &:focus {
85
- border: 1px solid var(--hlx-color-primary-dark);
86
- }
87
- }
88
- input:hover + label {
89
- background: var(--hlx-color-primary);
90
- }
91
- input:focus + label {
92
- background: var(--hlx-color-primary-dark);
93
- }
94
- .icon-2 {
95
- width: 38px;
96
- height: 38px;
97
- // margin-left: 10px;
98
- border-radius: 100%;
99
- background: var(--hlx-border-color-dark);
100
- display: flex;
101
- align-items: center;
102
- justify-content: center;
103
- .icon-search-regular {
104
- font-size: var(--hlx-icon-size-sm);
105
- color: #fff;
106
- }
107
- }
108
- }
109
-
110
- .search-3 {
111
- // margin: 30px;
112
- width: 100%;
113
- position: relative;
114
- display: flex;
115
- flex-direction: row;
116
- align-items: center;
117
-
118
- input {
119
- display: block;
120
- width: 95%;
121
- height: 38px;
122
- color: var(--hlx-text-color-primary);
123
- background: transparent;
124
- transition: all 0.3s ease;
125
- padding: 10px 12px;
126
- font-size: 14px;
127
- outline: none;
128
- border: solid 1px var(--hlx-border-color);
129
- border-right: none;
130
- border-radius: 20px 0 0 20px;
131
- &:hover {
132
- border: 1px solid var(--hlx-color-primary);
133
- border-right: none;
134
- }
135
- &:focus {
136
- border: 1px solid var(--hlx-color-primary-dark);
137
- border-right: none;
138
- }
139
- }
140
- input:hover + img {
141
- content: url('https://components.halleyx.com/img/search3_hover.svg');
142
- }
143
- input:focus + img {
144
- content: url('https://components.halleyx.com/img/search3_active.svg');
145
- }
146
-
147
- img {
148
- position: relative;
149
- right: 12px;
150
- }
151
-
152
- .search-3img {
153
- content: url('https://components.halleyx.com/img/search3.svg');
154
- }
155
- // .mycircle{
156
- // width: 38px;
157
- // height: 38px;
158
- // border: 1px solid var(--hlx-border-color);
159
- // border-radius: 50%;
160
- // border-bottom-color: transparent;
161
- // border-right-color: transparent;
162
- // position: relative;
163
- // right: 20px;
164
- // transform: rotate(-46deg);
165
- // }
166
- .icon-3 {
167
- width: 38px;
168
- height: 38px;
169
- position: relative;
170
- right: 45px;
171
- // margin-left: 10px;
172
- border-radius: 100%;
173
- background: var(--hlx-border-color);
174
- display: flex;
175
- align-items: center;
176
- justify-content: center;
177
- .icon-search-regular {
178
- font-size: var(--hlx-icon-size-md);
179
- color: #fff;
180
- }
181
- }
182
- }
183
- }
184
-
185
- input[type='search']::-webkit-search-decoration,
186
- input[type='search']::-webkit-search-cancel-button,
187
- input[type='search']::-webkit-search-results-button,
188
- input[type='search']::-webkit-search-results-decoration {
189
- -webkit-appearance: none;
190
- }
191
-