halleyx-ui-framework 4.2.7 → 4.2.9

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.
@@ -29,7 +29,7 @@
29
29
  }
30
30
  }
31
31
  .right {
32
- width: 100px;
32
+ width: 100%;
33
33
  height: 40px;
34
34
  border: 1px solid var(--hlx-border-color);
35
35
  border-radius: 6px;
@@ -40,7 +40,7 @@
40
40
  .list {
41
41
  // background: white;
42
42
  border-radius: 5px 0 0 5px;
43
- width: 50px;
43
+ width: 50%;
44
44
  font-size: var(--hlx-font-content-size-xl);
45
45
  display: flex;
46
46
  align-items: center;
@@ -50,7 +50,7 @@
50
50
  .grid {
51
51
  // background: white;
52
52
  border-radius: 0 5px 5px 0;
53
- width: 50px;
53
+ width: 50%;
54
54
  font-size: var(--hlx-font-content-size-xl);
55
55
  display: flex;
56
56
  align-items: center;
@@ -264,7 +264,7 @@
264
264
  font-weight: 500;
265
265
  line-height: 16px;
266
266
  letter-spacing: 0.005em;
267
- border-radius: 5px;
267
+ border-radius: .4em;
268
268
  padding: 1px 3px;
269
269
  }
270
270
  &.lg {
@@ -32,6 +32,7 @@
32
32
  .array-string {
33
33
  display: flex;
34
34
  margin-top: 6px;
35
+ width: max-content;
35
36
  }
36
37
 
37
38
  .array-index {
@@ -1,7 +1,12 @@
1
- [id^='hlx-pagination-container-hlx-'] {
2
- display: grid;
1
+ [id^="hlx-pagination-container-hlx-"] {
2
+ // display: grid;
3
+ // width: 100%;
4
+ // justify-content: end;
5
+ display: flex;
3
6
  width: 100%;
4
- justify-content: end;
7
+ flex-wrap: wrap;
8
+ gap: 0.875em;
9
+ justify-content: space-between;
5
10
  p {
6
11
  font-size: var(--hlx-font-content-size-sm);
7
12
  min-width: max-content;
@@ -14,180 +19,192 @@
14
19
  display: flex;
15
20
  align-items: center;
16
21
  gap: 10px;
22
+ flex-wrap: wrap;
23
+ & > .hlx-select-container {
24
+ width: 60px;
25
+ }
17
26
  & > p.rpp-title {
18
27
  min-width: max-content;
19
28
  // margin-right: 7%;
20
29
  }
21
30
  & > p.rpp-result {
22
31
  min-width: max-content;
23
- margin-left: 8px;
32
+ // margin-left: 8px;
24
33
  }
25
34
  }
26
- &.go-to:not(.rows-per-page) {
27
- grid-template-columns: 1fr auto;
28
- .hlx-go-to-container {
29
- width: 100%;
30
- display: flex;
31
- justify-content: center;
32
- gap: 10px;
33
- align-items: center;
34
- .go-to-wrapper {
35
- margin-left: auto;
35
+ .pagination-and-goto {
36
+ display: flex;
37
+ align-items: center;
38
+ &.go-to:not(.rows-per-page) {
39
+ grid-template-columns: 1fr auto;
40
+ .hlx-go-to-container {
41
+ width: 100%;
36
42
  display: flex;
37
43
  justify-content: center;
38
44
  gap: 10px;
39
45
  align-items: center;
40
- }
41
- .input-area {
42
- width: 70px;
46
+ .go-to-wrapper {
47
+ // margin-left: auto;
48
+ display: flex;
49
+ justify-content: center;
50
+ gap: 10px;
51
+ align-items: center;
52
+ }
53
+ .input-area {
54
+ width: 70px;
55
+ }
43
56
  }
44
57
  }
45
- }
46
- &.rows-per-page.go-to {
47
- grid-template-columns: 70px 1fr auto;
48
- .hlx-go-to-container {
49
- width: 100%;
58
+ & .hlx-pagination {
59
+ // margin-left: auto;
50
60
  display: flex;
51
- justify-content: center;
52
- gap: 10px;
61
+ flex-flow: row unwrap;
62
+ flex-direction: row;
53
63
  align-items: center;
54
- .go-to-wrapper {
55
- margin-left: auto;
56
- display: flex;
57
- justify-content: center;
58
- gap: 10px;
59
- align-items: center;
60
- }
61
- .input-area {
62
- width: 70px;
63
- }
64
- }
65
- }
66
- & .hlx-pagination {
67
- // margin-left: auto;
68
- display: flex;
69
- flex-flow: row unwrap;
70
- flex-direction: row;
71
- align-items: center;
72
- justify-content: flex-start;
73
- user-select: none;
74
- font-size: var(--hlx-font-content-size-sm);
75
- line-height: 24px;
76
- letter-spacing: 0.005em;
77
- font-weight: 500;
78
- gap: 4px;
79
- .nav {
80
- color: var(--hlx-color-primary);
81
- -webkit-user-select: none;
82
- -moz-user-select: none;
83
- // width: 2em;
84
- min-width: 35px;
85
- min-height: 35px;
64
+ justify-content: flex-start;
86
65
  user-select: none;
87
- // height: 2em;
88
- display: flex;
89
- flex-direction: row;
90
- // background: $grey;
91
- &.prev-btn,
92
- &.next-btn {
93
- font-size: 14px;
94
- font-weight: bold;
66
+ font-size: var(--hlx-font-content-size-sm);
67
+ line-height: 24px;
68
+ letter-spacing: 0.005em;
69
+ font-weight: 500;
70
+ gap: 4px;
71
+ .nav {
72
+ color: var(--hlx-color-primary);
73
+ -webkit-user-select: none;
74
+ -moz-user-select: none;
75
+ // width: 2em;
95
76
  max-width: 35px;
96
77
  min-height: 35px;
97
- i {
78
+ user-select: none;
79
+ // height: 2em;
80
+ display: flex;
81
+ flex-direction: row;
82
+ // background: $grey;
83
+ &.prev-btn,
84
+ &.next-btn {
85
+ font-size: 14px;
98
86
  font-weight: bold;
99
- font-size: var(--hlx-icon-size-xs);
87
+ min-width: 35px;
88
+ min-height: 35px;
89
+ i {
90
+ font-weight: bold;
91
+ font-size: var(--hlx-icon-size-xs);
92
+ }
93
+ &:hover {
94
+ cursor: pointer;
95
+ background: var(--hlx-color-primary-light);
96
+ // color:$border-color-secondary;
97
+ // color: getCssVar('color', 'primary');
98
+ }
99
+ // & > i:last-child {
100
+ // margin-left: -26px;
101
+ // }
100
102
  }
103
+ &.background {
104
+ background: rgba(var(--hlx-color-disable-rgb), 0.6);
105
+ }
106
+ align-items: center;
107
+ justify-content: center;
108
+ border-radius: 50%;
101
109
  &:hover {
102
110
  cursor: pointer;
103
111
  background: var(--hlx-color-primary-light);
104
- // color:$border-color-secondary;
112
+
105
113
  // color: getCssVar('color', 'primary');
106
114
  }
107
115
  }
108
- &.background {
109
- background: rgba(var(--hlx-color-disable-rgb), 0.6);
110
- }
111
- align-items: center;
112
- justify-content: center;
113
- border-radius: 50%;
114
- &:hover {
115
- cursor: pointer;
116
- background: var(--hlx-color-primary-light);
117
-
118
- // color: getCssVar('color', 'primary');
116
+ .nav.disabled {
117
+ color: var(--hlx-border-color);
119
118
  }
120
- }
121
- .nav.disabled {
122
- color: var(--hlx-border-color);
123
- }
124
- .page-btn {
125
- /* padding: 10px; */
126
- /* border: 1px solid; */
127
- // width: 2em;
119
+ .page-btn {
120
+ /* padding: 10px; */
121
+ /* border: 1px solid; */
122
+ // width: 2em;
128
123
 
129
- // height: 2em;
130
- user-select: none;
124
+ // height: 2em;
125
+ user-select: none;
131
126
 
132
- min-width: 35px;
133
- min-height: 35px;
134
- display: flex;
135
- justify-items: flex-start;
136
- align-items: center;
137
- justify-content: center;
138
- border-radius: 50%;
139
- // box-shadow: 1px 2px 11px -7px;
140
- /* background: getCssVar('color', 'primary'); */
141
- &.background {
142
- background: rgba(var(--hlx-color-disable-rgb), $alpha: 0.4);
143
- }
144
- i {
145
- font-size: var(--hlx-icon-size-sm);
146
- }
147
- &.hide {
148
- display: none;
149
- }
150
- &.higlight {
127
+ min-width: 35px;
128
+ min-height: 35px;
129
+ display: flex;
130
+ justify-items: flex-start;
131
+ align-items: center;
132
+ justify-content: center;
151
133
  border-radius: 50%;
152
- // border:1px solid #f97a19; -->
153
- // display: block;
154
- background-color: var(--hlx-color-primary);
155
- cursor: pointer;
156
- // box-shadow: 0px 1px 8px -4px black;
134
+ // box-shadow: 1px 2px 11px -7px;
135
+ /* background: getCssVar('color', 'primary'); */
136
+ &.background {
137
+ background: rgba(var(--hlx-color-disable-rgb), $alpha: 0.4);
138
+ }
139
+ i {
140
+ font-size: var(--hlx-icon-size-sm);
141
+ }
142
+ &.hide {
143
+ display: none;
144
+ }
145
+ &.higlight {
146
+ border-radius: 50%;
147
+ // border:1px solid #f97a19; -->
148
+ // display: block;
149
+ background-color: var(--hlx-color-primary);
150
+ cursor: pointer;
151
+ // box-shadow: 0px 1px 8px -4px black;
157
152
 
158
- color: white;
159
- }
160
- &.dec::before,
161
- &.inc::before {
162
- content: '...';
163
- }
164
- &:hover:not(.higlight) {
165
- border-radius: 50%;
166
- // border:1px solid #f97a19; -->
167
- background: var(--hlx-color-primary-light);
168
- cursor: pointer;
169
- color: var(--hlx-text-color-primary);
170
- transform: scale(1.01);
171
- }
172
- .dec-icon {
173
- // font-size: 0.7rem;
174
- display: none;
175
- }
176
- &.dec:hover {
177
- .dec-icon {
178
- display: block;
153
+ color: white;
179
154
  }
180
- &::before {
181
- content: '';
155
+ &.dec::before,
156
+ &.inc::before {
157
+ content: "...";
158
+ }
159
+ &:hover:not(.higlight) {
160
+ border-radius: 50%;
161
+ // border:1px solid #f97a19; -->
162
+ background: var(--hlx-color-primary-light);
163
+ cursor: pointer;
164
+ color: var(--hlx-text-color-primary);
165
+ transform: scale(1.01);
182
166
  }
183
- }
184
- &.inc:hover {
185
167
  .dec-icon {
186
- display: block;
168
+ // font-size: 0.7rem;
169
+ display: none;
187
170
  }
188
- &::before {
189
- content: '';
171
+ &.dec:hover {
172
+ .dec-icon {
173
+ display: block;
174
+ }
175
+ &::before {
176
+ content: "";
177
+ }
190
178
  }
179
+ &.inc:hover {
180
+ .dec-icon {
181
+ display: block;
182
+ }
183
+ &::before {
184
+ content: "";
185
+ }
186
+ }
187
+ }
188
+ }
189
+ }
190
+
191
+ &.rows-per-page.go-to {
192
+ grid-template-columns: 70px 1fr auto;
193
+ .hlx-go-to-container {
194
+ width: 100%;
195
+ display: flex;
196
+ justify-content: center;
197
+ gap: 10px;
198
+ align-items: center;
199
+ .go-to-wrapper {
200
+ margin-left: auto;
201
+ display: flex;
202
+ justify-content: center;
203
+ gap: 10px;
204
+ align-items: center;
205
+ }
206
+ .input-area {
207
+ width: 70px;
191
208
  }
192
209
  }
193
210
  }
@@ -202,20 +219,20 @@
202
219
  // }
203
220
  // }
204
221
  @media screen and (max-width: 740px) {
205
- [id^='hlx-pagination-container-hlx-'] {
222
+ [id^="hlx-pagination-container-hlx-"] {
206
223
  &.rows-per-page:not(.go-to) {
207
224
  grid-template-columns: auto;
208
225
  grid-template-rows: auto;
209
226
  gap: 14px;
210
227
  }
211
228
  &.rows-per-page.go-to {
212
- grid-template-columns: 70px auto;
229
+ grid-template-columns: 1fr auto;
213
230
  grid-template-rows: auto auto;
214
231
  gap: 23px;
215
232
  justify-content: left;
216
- .hlx-rows-per-page-container {
217
- width: 70px;
218
- }
233
+ // .hlx-rows-per-page-container {
234
+ // // width: 70px;
235
+ // }
219
236
  }
220
237
  }
221
238
  }
@@ -63,6 +63,7 @@
63
63
  display: flex;
64
64
  flex-direction: row;
65
65
  align-items: center;
66
+ justify-content: space-between;
66
67
 
67
68
  input {
68
69
  display: block;
@@ -76,6 +77,7 @@
76
77
  outline: none;
77
78
  border: solid 1px var(--hlx-border-color);
78
79
  border-radius: 20px;
80
+ margin-right: 10px;
79
81
  &:hover {
80
82
  border: 1px solid var(--hlx-color-primary);
81
83
  }
@@ -92,7 +94,7 @@
92
94
  .icon-2 {
93
95
  width: 38px;
94
96
  height: 38px;
95
- margin-left: 10px;
97
+ // margin-left: 10px;
96
98
  border-radius: 100%;
97
99
  background: var(--hlx-border-color-dark);
98
100
  display: flex;
@@ -186,3 +188,4 @@ input[type='search']::-webkit-search-results-button,
186
188
  input[type='search']::-webkit-search-results-decoration {
187
189
  -webkit-appearance: none;
188
190
  }
191
+
@@ -225,7 +225,8 @@
225
225
  display: inline-flex;
226
226
  align-items: center;
227
227
  letter-spacing: 0.14px;
228
- padding: 10px 14px;
228
+ // padding: 10px 14px;
229
+ padding: .5em .7em;
229
230
  margin-bottom: 0;
230
231
  font-size: 14px;
231
232
  font-weight: 400;
@@ -505,3 +505,16 @@
505
505
  background-color: var(--hlx-color-primary);
506
506
  border-radius: 100%;
507
507
  }
508
+
509
+ @media only screen and (max-width: 600px) {
510
+ .t-title {
511
+ // background-color: red;
512
+ width: 100px !important;
513
+
514
+ }
515
+ .t-title-new {
516
+
517
+ width: 50px ;
518
+
519
+ }
520
+ }