@solcre-org/core-ui 2.12.42 → 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.
@@ -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));
@@ -51,12 +51,12 @@
51
51
  opacity: .4;
52
52
  }
53
53
  /* SOLCRE: Estilos de error en TABS */
54
- .c-tabs__link.has-error{
54
+ .c-tabs__link[class*="context:error"]{
55
55
  color: var(--color-context-error);
56
56
  border-color: var(--color-context-error);
57
57
  }
58
58
 
59
- .c-tabs__link.has-error.is-active{
59
+ .c-tabs__link[class*="context:error"].is-active{
60
60
  color: var(--color-context-error);
61
61
  box-shadow: 0 var(--_line-w) 0 0 var(--color-context-error);
62
62
  }
@@ -3,83 +3,85 @@
3
3
  /* ******************************************** */
4
4
 
5
5
  /* Settings */
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);
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
- /* ✅ */ @import url(inc/generic/reset.css);
14
- /* ✅ */ @import url(inc/generic/screen.css);
15
- /* ✅ */ @import url(inc/generic/focus.css);
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
- /* ✅ */ @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);
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
- /* ✅ */ @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); /* !(new) */
44
- /* ✅ */ @import url(inc/components/rating.css); /* !(new) */
45
- /* ✅ */ @import url(inc/components/active-filters.css); /* !(new) */
46
- /* ✅ */ @import url(inc/components/ticket-list.css); /* !(new) */
47
- /* ✅ */ @import url(inc/components/steps.css); /* !(new) */
48
- /* ✅ */ @import url(inc/components/image-preview.css); /* !(new) */
49
- /* ❌ */ @import url(inc/components/data-entry.input.file.css);/* !(improvisado) */
50
- /* ❌ */ @import url(inc/components/tag.css); /* !(revisado) */
51
- /* ❌ */ @import url(inc/components/sidenav.css); /* !(revisado) */
52
- /* ❌ */ @import url(inc/components/data-list.css); /* !(revisado) */
53
- /* ❌ */ @import url(inc/components/tabs.css); /* !(revisado) */
54
- /* ❌ */ @import url(inc/components/bulleted-text.css); /* !(lo armé con estilos muy basicos) */
55
- /* ❌ */ @import url(inc/components/alert.css); /* !(revisado) */
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); /* !(provisorio) */
67
- /* ❌ */ @import url(inc/components/bottom-nav.css); /* !(test) */
68
- /* ⭐️ */ @import url(inc/components/calendar.css);
69
- /* ⭐️ */ @import url(inc/components/progressbar.css);
70
- /* ✅ */ @import url(inc/components/image-carousel.css); /* !(new) */
71
- /* ✅ */ @import url(inc/components/skeleton.css); /* !(new) */
72
- /* ✅ */ @import url(inc/components/chat-layout.css);
73
- /* ✅ */ @import url(inc/components/chat-input.css);
74
- /* ✅ */ @import url(inc/components/gallery.css); /* !(new) */
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
- /* ✅ */ @import url(inc/utilities/headings.css);
77
- /* ✅ */ @import url(inc/utilities/subtitles.css);
78
- /* ✅ */ @import url(inc/utilities/general.css);
79
- /* ✅ */ @import url(inc/utilities/type.css);
80
- /* ✅ */ @import url(inc/utilities/layout.css);
81
- /* ❌ */ @import url(inc/utilities/media-visibility.css); /* !(test) */
82
- /* ⭐️ */ @import url(inc/utilities/card.css);
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
- /* ✅ */ @import url(inc/overrides/angular-fixes.css);
87
+ @import url(inc/overrides/angular-fixes.css);