@solcre-org/core-ui 2.12.41 → 2.12.43
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.
- package/assets/css/inc/components/modal.css +15 -5
- package/assets/css/inc/components/pagination.css +28 -1
- package/assets/css/inc/components/refresh.css +92 -0
- package/assets/css/inc/components/table.css +53 -0
- package/assets/css/inc/components/tabs.css +10 -0
- package/assets/css/main.css +73 -71
- package/assets/i18n/en/common.json +9 -1
- package/assets/i18n/es/common.json +4 -2
- package/fesm2022/solcre-org-core-ui.mjs +184 -87
- package/fesm2022/solcre-org-core-ui.mjs.map +1 -1
- package/index.d.ts +14 -2
- package/package.json +1 -1
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
.c-modal__header {
|
|
85
85
|
display: flex;
|
|
86
86
|
padding-block: var(--_header-py);
|
|
87
|
-
align-items:
|
|
87
|
+
align-items: flex-start;
|
|
88
88
|
justify-content: space-between;
|
|
89
89
|
border-bottom: var(--_separator-line-w) solid var(--_separator-line-color);
|
|
90
90
|
height: fit-content;
|
|
@@ -92,6 +92,8 @@
|
|
|
92
92
|
|
|
93
93
|
.c-modal__close {
|
|
94
94
|
color: var(--_close-color);
|
|
95
|
+
border: none;
|
|
96
|
+
margin-right: -0.3em;
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
.c-modal__body {
|
|
@@ -126,8 +128,8 @@ body:has(.c-modal.is-visible) {
|
|
|
126
128
|
color: var(--_title-color);
|
|
127
129
|
}
|
|
128
130
|
|
|
129
|
-
.c-
|
|
130
|
-
|
|
131
|
+
.c-modal__title small{
|
|
132
|
+
opacity: .6;
|
|
131
133
|
}
|
|
132
134
|
|
|
133
135
|
.c-modal__icon {
|
|
@@ -257,9 +259,9 @@ body:has(.c-modal.is-visible) {
|
|
|
257
259
|
{
|
|
258
260
|
|
|
259
261
|
.c-modal {
|
|
260
|
-
--_holder-px: var(--wrapper-x);
|
|
262
|
+
--_holder-px: calc(var(--wrapper-x)*1.2);
|
|
261
263
|
--_holder-w: calc(100% - var(--_ouside-padding)*2);
|
|
262
|
-
--_header-py: 1.
|
|
264
|
+
--_header-py: 1.8rem;
|
|
263
265
|
|
|
264
266
|
}
|
|
265
267
|
|
|
@@ -289,6 +291,10 @@ body:has(.c-modal.is-visible) {
|
|
|
289
291
|
border: none;
|
|
290
292
|
}
|
|
291
293
|
|
|
294
|
+
.c-modal__body{
|
|
295
|
+
padding-top: 0;
|
|
296
|
+
}
|
|
297
|
+
|
|
292
298
|
}
|
|
293
299
|
|
|
294
300
|
|
|
@@ -342,6 +348,10 @@ body:has(.c-modal.is-visible) {
|
|
|
342
348
|
.c-modal.is-closing .c-modal__holder {
|
|
343
349
|
animation: hidemodal var(--_modal-animation-out) ease-out forwards;
|
|
344
350
|
}
|
|
351
|
+
|
|
352
|
+
.c-modal__close {
|
|
353
|
+
margin-right: -0.8em;
|
|
354
|
+
}
|
|
345
355
|
}
|
|
346
356
|
|
|
347
357
|
@media (min-width: 48rem) and (orientation: portrait) {}
|
|
@@ -18,12 +18,39 @@ app-generic-pagination{
|
|
|
18
18
|
z-index: 1;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
|
|
22
21
|
.c-pagination__summary{
|
|
23
22
|
color: var(--_summary-color);
|
|
24
23
|
font-size: var(--summary-fz, var(--_fz));
|
|
25
24
|
}
|
|
26
25
|
|
|
26
|
+
.c-pagination__select .c-input {
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
padding: 0.9em 1.8em 0.9em 1em;
|
|
29
|
+
font-weight: 700;
|
|
30
|
+
border-radius: 8px;
|
|
31
|
+
line-height: 1;
|
|
32
|
+
border: 1px solid hsl(var(--color-neutral-800-hsl) / 30%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.c-pagination__select-holder{
|
|
36
|
+
position: relative;
|
|
37
|
+
display: inline-block;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.c-pagination__select-holder:after {
|
|
41
|
+
content: "";
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
position: absolute;
|
|
44
|
+
width: 0.7em;
|
|
45
|
+
height: 0.7em;
|
|
46
|
+
right: 1rem;
|
|
47
|
+
top: 50%;
|
|
48
|
+
transform: translateY(-70%) rotate(-45deg);
|
|
49
|
+
border-left: 2px solid var(--color-primary-400);
|
|
50
|
+
border-bottom: 2px solid var(--color-primary-400);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
27
54
|
/* PAGER */
|
|
28
55
|
.c-pager{
|
|
29
56
|
--_fw: 700;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/* ******************************************** */
|
|
2
|
+
/** COMPONENT: REFRESH
|
|
3
|
+
/* ******************************************** */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
.c-refresh{
|
|
7
|
+
--text-fz: var(--fz-000);
|
|
8
|
+
|
|
9
|
+
justify-content: flex-end;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
/* ********************** SHORT MOBILE ********************** */
|
|
15
|
+
|
|
16
|
+
@media (max-width: 22.4375rem) { /* 359px */
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
/* ********************** TALL MOBILE PORTRAIT ********************** */
|
|
24
|
+
|
|
25
|
+
@media (max-width: 47.9375rem) and (min-height: 45.625rem) { /* 767px, 730px */
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/* ********************** MOBILE LANDSCAPE ********************** */
|
|
33
|
+
|
|
34
|
+
@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) { /* 500px, 767px */
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
/* ********************** de Mobile a TABLET ********************** */
|
|
42
|
+
|
|
43
|
+
@media (min-width: 48rem) { /* 768px */
|
|
44
|
+
}
|
|
45
|
+
@media (min-width: 48rem) and (orientation: portrait) {
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
/* ********************** de Tablet a DESKTOP ********************** */
|
|
52
|
+
|
|
53
|
+
@media (min-width: 61.25rem) { /* 980px */
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
/* ********************** de Desktop a DESKTOP 2 ********************** */
|
|
60
|
+
|
|
61
|
+
@media (min-width: 75rem) { /* 1200px */
|
|
62
|
+
}
|
|
63
|
+
@media (min-width: 75rem) and (min-height: 45rem) { /* 1200, 720 */
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
/* ********************** de Desktop 2 a HD ********************** */
|
|
70
|
+
|
|
71
|
+
@media (min-width: 87.5rem) { /* 1400px */
|
|
72
|
+
}
|
|
73
|
+
@media (min-width: 87.5rem) and (min-height: 49.375rem) { /* 1400px, 790px */
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
/* ********************** de Hd a FULL HD ********************** */
|
|
80
|
+
|
|
81
|
+
@media (min-width: 100rem) { /* 1600px */
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@media (min-width: 100rem) and (min-height: 49.375rem) { /* 1600px, 790px */
|
|
85
|
+
}
|
|
86
|
+
@media (min-width: 100rem) and (min-height: 56.25rem) { /* 1600px, 900px */
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@media (min-width: 112.5rem) { /* 1800px */
|
|
90
|
+
}
|
|
91
|
+
@media (min-width: 112.5rem) and (min-height: 56.25rem) { /* 1800px, 900px */
|
|
92
|
+
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
.c-table{
|
|
6
6
|
--_color-base: var(--color-neutral-800);
|
|
7
7
|
--_color-main: var(--color-primary-400);
|
|
8
|
+
--_color-new: color-mix(in srgb, hsl(var(--color-context-success-hsl)) 10%, white 30%);
|
|
8
9
|
|
|
9
10
|
/* General */
|
|
10
11
|
--_fz: var(--fz-000);
|
|
@@ -59,6 +60,7 @@
|
|
|
59
60
|
padding-right: calc(var(--_gap-x)*.5);
|
|
60
61
|
}
|
|
61
62
|
|
|
63
|
+
|
|
62
64
|
/* Head */
|
|
63
65
|
.c-table thead *{
|
|
64
66
|
font-size: var(--_head-fz);
|
|
@@ -66,6 +68,57 @@
|
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
/* Body */
|
|
71
|
+
|
|
72
|
+
/* Is new! */
|
|
73
|
+
|
|
74
|
+
.c-table tbody tr.is-new{
|
|
75
|
+
background-color: inherit;
|
|
76
|
+
animation: showNewEntryTable 1.2s ease-out forwards;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.c-table tbody tr.is-new td:first-child{
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.c-table tbody tr.is-new td:first-child::before{
|
|
84
|
+
content: "";
|
|
85
|
+
position: absolute;
|
|
86
|
+
top: 0;
|
|
87
|
+
left: 0;
|
|
88
|
+
height: 100%;
|
|
89
|
+
width: .3rem;
|
|
90
|
+
background-color: var(--color-context-success);
|
|
91
|
+
border-radius: 0 .3rem .3rem 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@keyframes showNewEntryTable {
|
|
95
|
+
0% {
|
|
96
|
+
opacity: 0;
|
|
97
|
+
transform: translateY(15px);
|
|
98
|
+
background-color: var(--_color-new);
|
|
99
|
+
}
|
|
100
|
+
40% {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
transform: translateY(0);
|
|
103
|
+
background-color: var(--_color-new);
|
|
104
|
+
}
|
|
105
|
+
55% {
|
|
106
|
+
background-color: hsl(var(--color-neutral-200-hsl)/40%);;
|
|
107
|
+
}
|
|
108
|
+
70% {
|
|
109
|
+
background-color: var(--_color-new);
|
|
110
|
+
}
|
|
111
|
+
85% {
|
|
112
|
+
background-color: hsl(var(--color-neutral-200-hsl)/40%);;
|
|
113
|
+
}
|
|
114
|
+
100% {
|
|
115
|
+
background-color: hsl(var(--color-neutral-200-hsl)/40%);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
69
122
|
.c-table td{
|
|
70
123
|
height: var(--_cell-h);
|
|
71
124
|
border-top: 1px solid hsl(var(--_bc));
|
|
@@ -50,6 +50,16 @@
|
|
|
50
50
|
pointer-events: none;
|
|
51
51
|
opacity: .4;
|
|
52
52
|
}
|
|
53
|
+
/* SOLCRE: Estilos de error en TABS */
|
|
54
|
+
.c-tabs__link[class*="context:error"]{
|
|
55
|
+
color: var(--color-context-error);
|
|
56
|
+
border-color: var(--color-context-error);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.c-tabs__link[class*="context:error"].is-active{
|
|
60
|
+
color: var(--color-context-error);
|
|
61
|
+
box-shadow: 0 var(--_line-w) 0 0 var(--color-context-error);
|
|
62
|
+
}
|
|
53
63
|
|
|
54
64
|
.c-tabs__link [class*="icon-"]{
|
|
55
65
|
font-size: 1.1em;
|
package/assets/css/main.css
CHANGED
|
@@ -3,83 +3,85 @@
|
|
|
3
3
|
/* ******************************************** */
|
|
4
4
|
|
|
5
5
|
/* Settings */
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
@import url(inc/settings/sizes.css);
|
|
7
|
+
@import url(inc/settings/colors.css);
|
|
8
|
+
@import url(inc/settings/font-face.css);
|
|
9
|
+
@import url(inc/settings/font.css);
|
|
10
|
+
@import url(inc/settings/transitions.css);
|
|
11
11
|
|
|
12
12
|
/* Generic */
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
@import url(inc/generic/reset.css);
|
|
14
|
+
@import url(inc/generic/screen.css);
|
|
15
|
+
@import url(inc/generic/focus.css);
|
|
16
16
|
|
|
17
17
|
/* Objects */
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
@import url(inc/objects/section.css);
|
|
19
|
+
@import url(inc/objects/layout.css);
|
|
20
|
+
@import url(inc/objects/layout.grid.css);
|
|
21
|
+
@import url(inc/objects/layout.styles.css);
|
|
22
|
+
@import url(inc/objects/grid.css);
|
|
23
23
|
|
|
24
24
|
/* Components */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
25
|
+
@import url(inc/components/btn.css);
|
|
26
|
+
@import url(inc/components/btn.icon.css);
|
|
27
|
+
@import url(inc/components/links.css);
|
|
28
|
+
@import url(inc/components/pic.css);
|
|
29
|
+
@import url(inc/components/main-nav.css);
|
|
30
|
+
@import url(inc/components/main-nav.brand.css);
|
|
31
|
+
@import url(inc/components/main-nav.toggle.css);
|
|
32
|
+
@import url(inc/components/main-nav.nav.css);
|
|
33
|
+
@import url(inc/components/table.css);
|
|
34
|
+
@import url(inc/components/header.css);
|
|
35
|
+
@import url(inc/components/data-entry.general.css);
|
|
36
|
+
@import url(inc/components/data-entry.layout.css);
|
|
37
|
+
@import url(inc/components/data-entry.labels.css);
|
|
38
|
+
@import url(inc/components/data-entry.input.css);
|
|
39
|
+
@import url(inc/components/data-entry.input.numeric.css);
|
|
40
|
+
@import url(inc/components/data-entry.toggle.css);
|
|
41
|
+
@import url(inc/components/data-entry.select.css);
|
|
42
|
+
@import url(inc/components/data-entry.input.datetime.css);
|
|
43
|
+
@import url(inc/components/tooltip.css);
|
|
44
|
+
@import url(inc/components/rating.css);
|
|
45
|
+
@import url(inc/components/active-filters.css);
|
|
46
|
+
@import url(inc/components/ticket-list.css);
|
|
47
|
+
@import url(inc/components/steps.css);
|
|
48
|
+
@import url(inc/components/image-preview.css);
|
|
49
|
+
@import url(inc/components/data-entry.input.file.css);
|
|
50
|
+
@import url(inc/components/tag.css);
|
|
51
|
+
@import url(inc/components/sidenav.css);
|
|
52
|
+
@import url(inc/components/data-list.css);
|
|
53
|
+
@import url(inc/components/tabs.css);
|
|
54
|
+
@import url(inc/components/bulleted-text.css);
|
|
55
|
+
@import url(inc/components/alert.css);
|
|
56
|
+
@import url(inc/components/bottom-alert.css);
|
|
57
|
+
@import url(inc/components/timeline.css);
|
|
58
|
+
@import url(inc/components/attachments.css);
|
|
59
|
+
@import url(inc/components/hint.css);
|
|
60
|
+
@import url(inc/components/doc.css);
|
|
61
|
+
@import url(inc/components/pagination.css);
|
|
62
|
+
@import url(inc/components/submenu-options.css);
|
|
63
|
+
@import url(inc/components/modal.css);
|
|
64
|
+
@import url(inc/components/popup.css);
|
|
65
|
+
@import url(inc/components/breadcrumb.css);
|
|
66
|
+
@import url(inc/components/placeholder.css);
|
|
67
|
+
@import url(inc/components/bottom-nav.css);
|
|
68
|
+
@import url(inc/components/calendar.css);
|
|
69
|
+
@import url(inc/components/progressbar.css);
|
|
70
|
+
@import url(inc/components/image-carousel.css);
|
|
71
|
+
@import url(inc/components/skeleton.css);
|
|
72
|
+
@import url(inc/components/chat-layout.css);
|
|
73
|
+
@import url(inc/components/chat-input.css);
|
|
74
|
+
@import url(inc/components/gallery.css);
|
|
75
|
+
@import url(inc/components/refresh.css); /* !(new) */
|
|
76
|
+
|
|
75
77
|
/* Utilities */
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
@import url(inc/utilities/headings.css);
|
|
79
|
+
@import url(inc/utilities/subtitles.css);
|
|
80
|
+
@import url(inc/utilities/general.css);
|
|
81
|
+
@import url(inc/utilities/type.css);
|
|
82
|
+
@import url(inc/utilities/layout.css);
|
|
83
|
+
@import url(inc/utilities/media-visibility.css);
|
|
84
|
+
@import url(inc/utilities/card.css);
|
|
83
85
|
|
|
84
86
|
/* Overrides */
|
|
85
|
-
|
|
87
|
+
@import url(inc/overrides/angular-fixes.css);
|
|
@@ -109,7 +109,15 @@
|
|
|
109
109
|
"noResults": "No se encontraron resultados",
|
|
110
110
|
"typeToSearch": "Escribe para buscar"
|
|
111
111
|
}
|
|
112
|
-
}
|
|
112
|
+
},
|
|
113
|
+
"unsavedChanges": {
|
|
114
|
+
"title": "Unsaved changes",
|
|
115
|
+
"message": "You have unsaved changes. Are you sure you want to close the modal?",
|
|
116
|
+
"confirm": "Close without saving",
|
|
117
|
+
"cancel": "Continue editing"
|
|
118
|
+
},
|
|
119
|
+
"validationErrors": "Please fix the validation errors before saving.",
|
|
120
|
+
"stepErrors": "Please fix the validation errors before proceeding to the next step."
|
|
113
121
|
},
|
|
114
122
|
"dashboard": {
|
|
115
123
|
"title": "Panel de Control",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"save": "Guardar",
|
|
102
102
|
"close": "Cerrar",
|
|
103
103
|
"noData": "No se encontraron datos...",
|
|
104
|
-
"createTitle": "
|
|
104
|
+
"createTitle": "Agregar",
|
|
105
105
|
"next": "Siguiente",
|
|
106
106
|
"previous": "Anterior",
|
|
107
107
|
"field": {
|
|
@@ -115,7 +115,9 @@
|
|
|
115
115
|
"message": "Tienes cambios sin guardar. ¿Estás seguro de que quieres cerrar el modal?",
|
|
116
116
|
"confirm": "Cerrar sin guardar",
|
|
117
117
|
"cancel": "Continuar editando"
|
|
118
|
-
}
|
|
118
|
+
},
|
|
119
|
+
"validationErrors": "Por favor, corrige los errores de validación antes de guardar.",
|
|
120
|
+
"stepErrors": "Por favor, corrige los errores de validación antes de continuar al siguiente paso."
|
|
119
121
|
},
|
|
120
122
|
"dashboard": {
|
|
121
123
|
"title": "Panel de Control",
|