@gipisistemas/ngx-core 1.0.12 → 1.0.14

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.
@@ -34,6 +34,18 @@
34
34
  .mdc-evolution-chip__cell .mat-mdc-chip-action {
35
35
  cursor: pointer;
36
36
  }
37
+
38
+ &:hover {
39
+ --mat-chip-elevated-container-color: #{$primary-600};
40
+ --mat-chip-outline-color: #{$primary-600};
41
+ }
42
+
43
+ .g-control-item-all-icon {
44
+ width: 1.8rem;
45
+ height: 1.8rem;
46
+ font-size: 1.8rem;
47
+ color: inherit;
48
+ }
37
49
  }
38
50
 
39
51
  .g-chips-control-item {
@@ -78,11 +90,13 @@
78
90
  background-color: transparent;
79
91
  transition: all 0.2s;
80
92
  cursor: pointer;
93
+ color: $font-color;
81
94
 
82
95
  .g-control-item-button-icon {
83
96
  width: 1.8rem;
84
97
  height: 1.8rem;
85
98
  font-size: 1.8rem;
99
+ color: inherit;
86
100
  }
87
101
 
88
102
  &:disabled {
@@ -99,29 +113,7 @@
99
113
 
100
114
  &:not(:disabled):hover {
101
115
  transform: scale(0.98);
102
-
103
- &:not(.g-control-item-button-all) {
104
- background-color: $secondary-200;
105
- }
106
-
107
- &.g-control-item-button-all {
108
- background-color: $primary-600;
109
- }
110
- }
111
-
112
- &:not(.g-control-item-button-all),
113
- &.g-control-item-button-all {
114
- .g-control-item-button-icon {
115
- color: inherit;
116
- }
117
- }
118
-
119
- &:not(.g-control-item-button-all) {
120
- color: $font-color;
121
- }
122
-
123
- &.g-control-item-button-all {
124
- color: $white-100;
116
+ background-color: $secondary-200;
125
117
  }
126
118
  }
127
119
  }
@@ -3,6 +3,8 @@
3
3
 
4
4
  @mixin date-picker-calendar-theme($theme: ()) {
5
5
  $font-family: utils.get-font-family($theme);
6
+ $font-size: utils.get-font-size($theme);
7
+ $font-color: utils.get-font-color($theme);
6
8
 
7
9
  // Paleta de Cores
8
10
  $primary-50: utils.get-color($theme, primary, 50);
@@ -37,6 +39,7 @@
37
39
  display: flex;
38
40
  width: 100%;
39
41
  min-width: 28rem;
42
+ min-height: 35rem;
40
43
 
41
44
  // Em telas menores, o painel de presets e o calendário empilham
42
45
  @include breakpoints.mobile-view {
@@ -102,10 +105,41 @@
102
105
  justify-content: space-between;
103
106
  margin-bottom: 1.6rem;
104
107
 
105
- .g-header-title {
106
- font-size: 1.4rem;
108
+ .g-month-year-toggle {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 0.4rem;
112
+ height: 3.2rem;
113
+ color: $secondary-900;
114
+ font-family: $font-family;
115
+ font-size: $font-size;
107
116
  font-weight: 500;
117
+ background: none;
118
+ border: none;
119
+ cursor: pointer;
120
+ transition: color 0.2s ease;
121
+ padding: 0.4rem;
122
+ border-radius: 0.4rem;
123
+
124
+ &:hover {
125
+ background-color: $secondary-100;
126
+ color: $secondary-700;
127
+ }
128
+
129
+ .g-toggle-icon {
130
+ font-size: 2rem;
131
+ transition: transform 0.2s ease;
132
+
133
+ &.open {
134
+ transform: rotate(180deg);
135
+ }
136
+ }
137
+ }
138
+
139
+ .g-header-title {
108
140
  color: $secondary-900;
141
+ font-size: $font-size;
142
+ font-weight: 500;
109
143
  }
110
144
 
111
145
  .g-navigation-buttons {
@@ -113,26 +147,25 @@
113
147
  gap: 0.4rem;
114
148
 
115
149
  .g-nav-button {
116
- width: 3.2rem;
117
- height: 3.2rem;
118
150
  display: flex;
119
151
  align-items: center;
120
152
  justify-content: center;
121
- background-color: $white-100;
122
- color: $secondary-600;
123
- border: 1px solid $secondary-300;
124
- border-radius: 0.4rem;
153
+ width: 3.2rem;
154
+ height: 3.2rem;
155
+ background-color: $primary-500;
156
+ color: $white-100;
157
+ border: none;
158
+ border-radius: 0.8rem;
125
159
  cursor: pointer;
126
160
  transition: all 0.2s ease;
127
161
  padding: 0;
128
162
 
129
163
  &:hover {
130
- background-color: $secondary-100;
131
- color: $primary-500;
164
+ background-color: $primary-600;
132
165
  }
133
166
 
134
167
  .material-symbols-rounded {
135
- font-size: 2rem;
168
+ font-size: 2.2rem;
136
169
  line-height: 1;
137
170
  }
138
171
  }
@@ -149,11 +182,11 @@
149
182
  .g-year-button {
150
183
  padding: 1rem 0.8rem;
151
184
  font-size: 1.2rem;
152
- border-radius: 0.4rem;
185
+ border-radius: 0.8rem;
153
186
  transition: all 0.2s ease;
154
- border: none;
187
+ border: 1px solid transparent;
155
188
  cursor: pointer;
156
- background: none;
189
+ background: $white-100;
157
190
  font-family: $font-family;
158
191
  color: $secondary-700;
159
192
 
@@ -161,10 +194,15 @@
161
194
  background-color: $primary-500;
162
195
  color: $white-100;
163
196
  font-weight: 600;
197
+
198
+ &:hover {
199
+ background-color: $primary-600;
200
+ }
164
201
  }
165
202
 
166
203
  &.in-range {
167
204
  background-color: $pastels-primary;
205
+
168
206
  &.selected {
169
207
  color: $white-100;
170
208
  }
@@ -172,9 +210,10 @@
172
210
 
173
211
  &:not(.selected):not(.disabled):hover {
174
212
  background-color: $secondary-100;
213
+ border-color: $secondary-300;
175
214
  }
176
215
 
177
- &.current {
216
+ &:not(.selected).current {
178
217
  font-weight: 600;
179
218
  color: $primary-500;
180
219
  }
@@ -196,11 +235,11 @@
196
235
  .g-month-button {
197
236
  padding: 1rem 0.8rem;
198
237
  font-size: 1.2rem;
199
- border-radius: 0.4rem;
238
+ border-radius: 0.8rem;
200
239
  transition: all 0.2s ease;
201
- border: none;
240
+ border: 1px solid transparent;
202
241
  cursor: pointer;
203
- background: none;
242
+ background: $white-100;
204
243
  font-family: $font-family;
205
244
  color: $secondary-700;
206
245
 
@@ -208,6 +247,10 @@
208
247
  background-color: $primary-500;
209
248
  color: $white-100;
210
249
  font-weight: 600;
250
+
251
+ &:hover {
252
+ background-color: $primary-600;
253
+ }
211
254
  }
212
255
 
213
256
  &.in-range {
@@ -219,9 +262,10 @@
219
262
 
220
263
  &:not(.selected):not(.disabled):hover {
221
264
  background-color: $secondary-100;
265
+ border-color: $secondary-300;
222
266
  }
223
267
 
224
- &.current {
268
+ &:not(.selected).current {
225
269
  font-weight: 600;
226
270
  color: $primary-500;
227
271
  }
@@ -233,44 +277,6 @@
233
277
  }
234
278
  }
235
279
 
236
- /* Seletor de Data */
237
- .g-date-header {
238
- display: flex;
239
- align-items: center;
240
- justify-content: space-between;
241
- margin-bottom: 1.2rem;
242
-
243
- .g-month-year-toggle {
244
- display: flex;
245
- align-items: center;
246
- gap: 0.4rem;
247
- font-size: 1.4rem;
248
- font-weight: 500;
249
- color: $secondary-900;
250
- background: none;
251
- border: none;
252
- cursor: pointer;
253
- transition: color 0.2s ease;
254
- font-family: $font-family;
255
- padding: 0.4rem;
256
- border-radius: 0.4rem;
257
-
258
- &:hover {
259
- background-color: $secondary-100;
260
- color: $secondary-700;
261
- }
262
-
263
- .toggle-icon {
264
- font-size: 2rem;
265
- transition: transform 0.2s ease;
266
-
267
- &.open {
268
- transform: rotate(180deg);
269
- }
270
- }
271
- }
272
- }
273
-
274
280
  /* Cabeçalho com dias da semana */
275
281
  .g-weekdays {
276
282
  display: grid;
@@ -303,7 +309,7 @@
303
309
  display: flex;
304
310
  align-items: center;
305
311
  justify-content: center;
306
- font-size: 1.2rem;
312
+ font-size: 1.3rem;
307
313
  border: none;
308
314
  background: none;
309
315
  font-family: $font-family;
@@ -369,11 +375,13 @@
369
375
  display: none;
370
376
  }
371
377
 
372
- &:not(.range-start):not(.range-end):not(.in-range):not(.disabled):hover {
378
+ &:not(.range-start):not(.range-end):not(.in-range):not(.disabled):not(
379
+ .today
380
+ ):not(.selected):hover {
373
381
  background-color: $secondary-100;
374
382
  }
375
383
 
376
- &.today:not(.range-start):not(.range-end) {
384
+ &.today:not(.range-start):not(.range-end):not(.selected) {
377
385
  font-weight: 600;
378
386
  border: 1px solid $primary-500;
379
387
  color: $primary-500;
@@ -388,6 +396,16 @@
388
396
  outline: 2px solid $primary-50;
389
397
  outline-offset: 1px;
390
398
  }
399
+
400
+ &.selected {
401
+ background-color: $primary-500;
402
+ color: $white-100;
403
+ font-weight: 600;
404
+
405
+ &:hover {
406
+ background-color: $primary-600;
407
+ }
408
+ }
391
409
  }
392
410
  }
393
411
 
@@ -189,55 +189,30 @@
189
189
  }
190
190
  }
191
191
 
192
- .g-select-server-side {
193
- .select-load-more-container {
194
- padding: 8px;
195
- border-top: 1px solid #f3f4f6;
196
- background-color: #ffffff;
197
- }
198
-
199
- .select-load-more-button {
200
- font-size: 12px;
201
- color: #2563eb;
202
- font-weight: 500;
203
- padding: 8px 16px;
204
- border-radius: 6px;
205
- border: 1px solid #bfdbfe;
206
- transition: all 0.2s;
207
- display: flex;
208
- align-items: center;
209
- justify-content: center;
210
- gap: 8px;
211
- width: 100%;
212
- background: transparent;
213
- cursor: pointer;
214
- }
215
-
216
- .select-load-more-button:hover:not(:disabled) {
217
- color: #1d4ed8;
218
- background-color: #eff6ff;
219
- }
220
-
221
- .select-load-more-button:disabled {
222
- opacity: 0.5;
223
- cursor: not-allowed;
224
- }
192
+ .select-footer {
193
+ flex-shrink: 0;
225
194
 
226
- .select-load-more-icon {
227
- font-size: 14px;
195
+ &:empty {
196
+ display: none;
228
197
  }
198
+ }
229
199
 
230
- .select-load-more-icon-spin {
231
- animation: spin 1s linear infinite;
232
- }
200
+ .g-select-server-side-footer-container {
201
+ display: flex;
202
+ align-items: center;
203
+ justify-content: space-between;
204
+ gap: 1rem;
205
+ min-height: 4rem;
206
+ padding: 0.8rem 1.2rem;
207
+ border-top: 1px solid $white-300;
208
+ background-color: $white-100;
233
209
 
234
- @keyframes spin {
235
- from {
236
- transform: rotate(0deg);
237
- }
238
- to {
239
- transform: rotate(360deg);
240
- }
210
+ .select-pagination-text {
211
+ font-size: 1.2rem;
212
+ line-height: 1.4;
213
+ color: $black-300;
214
+ font-weight: 500;
215
+ margin-left: auto;
241
216
  }
242
217
  }
243
218
  }
@@ -3,28 +3,115 @@
3
3
  @mixin sidenav-theme($theme: ()) {
4
4
  $font-family: utils.get-font-family($theme);
5
5
  $font-size: utils.get-font-size($theme);
6
- $font-color: utils.get-font-color($theme);
6
+
7
+ .g-sidenav-container {
8
+ width: 100%;
9
+ height: 100%;
10
+
11
+ .g-sidenav-container-inner {
12
+ display: flex;
13
+ width: 100%;
14
+ height: 100%;
15
+ position: relative;
16
+ overflow: hidden;
17
+ }
18
+ }
19
+
20
+ .g-sidenav-content {
21
+ display: flex;
22
+ flex: 1 1 auto;
23
+ min-width: 0;
24
+ height: 100%;
25
+ position: relative;
26
+ z-index: 1;
27
+ }
7
28
 
8
29
  .g-sidenav {
9
30
  display: flex;
10
31
  flex-direction: column;
11
32
  height: 100%;
33
+ box-sizing: border-box;
12
34
  padding: 1.6rem;
35
+ background-color: transparent;
36
+ transition: transform 0.2s ease;
37
+ z-index: 4;
13
38
 
14
39
  &.g-sidenav-opened {
15
- width: 260px;
40
+ width: 280px;
41
+ min-width: 280px;
16
42
  }
17
43
 
18
44
  &.g-sidenav-closed {
19
45
  width: 76px;
46
+ min-width: 76px;
20
47
 
21
48
  .g-sidenav-menu-list-base {
22
49
  scrollbar-width: none !important;
23
50
  }
24
51
  }
52
+
53
+ &.g-sidenav-mobile.g-sidenav-closed {
54
+ width: 0;
55
+ min-width: 0;
56
+ padding-left: 0;
57
+ padding-right: 0;
58
+ overflow: hidden;
59
+ }
60
+
61
+ &.g-sidenav-mode-over {
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ height: 100%;
66
+
67
+ &.g-sidenav-opened {
68
+ width: 280px;
69
+ min-width: 280px;
70
+ }
71
+ }
72
+
73
+ &.g-sidenav-tablet.g-sidenav-closed {
74
+ position: relative;
75
+ top: auto;
76
+ left: auto;
77
+ height: 100%;
78
+ }
79
+
80
+ &.g-sidenav-tablet.g-sidenav-opened {
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ height: 100%;
85
+ }
86
+
87
+ &.g-sidenav-mode-side {
88
+ position: relative;
89
+ top: auto;
90
+ left: auto;
91
+ box-shadow: none;
92
+ }
93
+ }
94
+
95
+ .g-sidenav.g-sidenav-tablet.g-sidenav-mode-over.g-sidenav-opened + .g-sidenav-content {
96
+ margin-left: 76px;
97
+ }
98
+
99
+ .g-sidenav-backdrop {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ background: transparent;
106
+ border: none;
107
+ margin: 0;
108
+ padding: 0;
109
+ z-index: 0;
25
110
  }
26
111
 
27
112
  .g-sidenav-control {
113
+ position: relative;
114
+ z-index: 1;
28
115
  display: flex;
29
116
  align-items: center;
30
117
  width: 100%;
@@ -52,10 +139,14 @@
52
139
  }
53
140
 
54
141
  .g-sidenav-menu {
142
+ position: relative;
143
+ z-index: 1;
55
144
  display: flex;
56
145
  flex-direction: column;
57
146
  flex: 1;
58
147
  gap: 1.6rem;
148
+ background-color: #{utils.get-color($theme, white, 100)};
149
+ border-radius: 8px;
59
150
  }
60
151
 
61
152
  .g-sidenav-menu-list-base {
@@ -68,9 +159,29 @@
68
159
  overflow-y: auto;
69
160
  overflow-x: hidden;
70
161
  scrollbar-width: thin;
71
- scroll-snap-type: x mandatory;
162
+ scroll-snap-type: y mandatory;
163
+ scroll-padding-block: 50%;
72
164
 
73
165
  position: relative;
166
+
167
+ &::-webkit-scrollbar {
168
+ background-color: transparent;
169
+ width: 0.6rem;
170
+ }
171
+
172
+ &::-webkit-scrollbar-track {
173
+ background-color: transparent;
174
+ }
175
+
176
+ &::-webkit-scrollbar-thumb {
177
+ background-color: #{utils.get-color($theme, black, 300)};
178
+ border-radius: 0.6rem;
179
+ border: 0.4rem solid transparent;
180
+ }
181
+
182
+ &::-webkit-scrollbar-button {
183
+ display: none;
184
+ }
74
185
  }
75
186
 
76
187
  .g-sidenav-menu-list {
@@ -107,7 +218,7 @@
107
218
  overflow: hidden;
108
219
  transition: all 0.2s;
109
220
 
110
- scroll-snap-align: start;
221
+ scroll-snap-align: center;
111
222
  scroll-snap-stop: always;
112
223
  flex: 0 0 100%;
113
224