@solcre-org/core-ui 2.12.42 → 2.12.44

package/assets/css/inc/components/area-code.css

@@ -0,0 +1,174 @@
+/* ******************************************** */
+/** COMPONENT: AREA CODE
+/* ******************************************** */
+
+.c-area-code{
+   position: relative;
+   width: auto;
+   cursor: pointer;
+   padding-inline: 0.7em;
+}
+
+.c-area-code__selected{
+    display: flex;
+    gap: 0.4em;
+    width: 5.9em;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.c-area-code__arrow{
+    font-size: 10px;
+    margin-top: 0.3em;
+    /* opacity: 0.7; */
+}
+
+.c-area-code__options {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 12em;
+    border: 1px solid #f2f4f8;
+    background-color: #f2f5fa;
+    border-radius: var(--_entry-input-br);
+    box-shadow: 1em 2.4em 3.4em -2em hsl(var(--color-neutral-900-hsl)/25%);
+    display: none;
+    flex-direction: column;
+    max-height: 20rem;
+    overflow-y: auto;
+    line-height: 1.2;
+    z-index: 10;
+}
+
+.c-area-code__options.show{
+    display: flex;
+}
+
+.c-area-code__option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0.7em 0.8em;
+    cursor: pointer;
+}
+
+.c-area-code__option img {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    object-fit: cover;
+}
+
+.c-area-code__flag{
+    width: 1.6em;
+    height: 1.6em;
+}
+
+/* ********************** MEDIA HOVER ********************** */
+
+@media (hover: hover) { 
+
+    .c-area-code__option:hover {
+        background: #e0e7f1;
+    }
+
+}
+
+
+/* ********************** SHORT MOBILE ********************** */
+
+@media (max-width: 22.4375rem) {
+    /* 359px */
+}
+
+
+
+
+
+/* ********************** TALL MOBILE PORTRAIT ********************** */
+
+@media (max-width: 47.9375rem) and (min-height: 45.625rem) {
+    /* 767px, 730px */
+}
+
+
+
+
+
+/* ********************** MOBILE LANDSCAPE ********************** */
+
+@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) {
+    /* 500px, 767px */
+}
+
+
+
+
+
+/* ********************** de Mobile a TABLET ********************** */
+
+@media (min-width: 48rem) {
+    /* 768px */
+}
+
+@media (min-width: 48rem) and (orientation: portrait) {}
+
+
+
+
+/* ********************** de Tablet a DESKTOP ********************** */
+
+@media (min-width: 61.25rem) {
+    /* 980px */
+}
+
+
+
+
+/* ********************** de Desktop a DESKTOP 2 ********************** */
+
+@media (min-width: 75rem) {
+    /* 1200px */
+}
+
+@media (min-width: 75rem) and (min-height: 45rem) {
+    /* 1200, 720 */
+}
+
+
+
+
+/* ********************** de Desktop 2 a HD ********************** */
+
+@media (min-width: 87.5rem) {
+    /* 1400px */
+}
+
+@media (min-width: 87.5rem) and (min-height: 49.375rem) {
+    /* 1400px, 790px */
+}
+
+
+
+
+/* ********************** de Hd a FULL HD ********************** */
+
+@media (min-width: 100rem) {
+    /* 1600px */
+}
+
+@media (min-width: 100rem) and (min-height: 49.375rem) {
+    /* 1600px, 790px */
+}
+
+@media (min-width: 100rem) and (min-height: 56.25rem) {
+    /* 1600px, 900px */
+}
+
+@media (min-width: 112.5rem) {
+    /* 1800px */
+}
+
+@media (min-width: 112.5rem) and (min-height: 56.25rem) {
+    /* 1800px, 900px */
+}

package/assets/css/inc/components/data-entry.input.css

@@ -105,6 +105,12 @@
     opacity: 0.5;
 }
 
+/* Phone */
+
+.c-entry-phone{
+    display: flex;
+    gap: 1rem;
+}
 
 /* Focus / Hover */
 
@@ -173,6 +179,14 @@
     opacity: .6;
 }
 
+/* Entry grid */
+
+.c-entry-grid{
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+}
+
 /* ********************** MEDIA HOVER ********************** */
 
 @media (hover: hover) { 
@@ -191,7 +205,6 @@
     ):is([disabled],.is-disabled){
     opacity: 0.4;
     cursor: not-allowed;
-    pointer-events: none;
 }
 .c-entry-input:is([disabled],.is-disabled,[readonly],.is-readonly) :is( a, button ){
     pointer-events: none;

package/assets/css/inc/components/pagination.css

@@ -18,12 +18,39 @@ app-generic-pagination{
     z-index: 1;
 }
 
-
 .c-pagination__summary{
     color: var(--_summary-color);
     font-size: var(--summary-fz, var(--_fz));
 }
 
+.c-pagination__select .c-input {
+    cursor: pointer;
+    padding: 0.9em 1.8em 0.9em 1em;
+    font-weight: 700;
+    border-radius: 8px;
+    line-height: 1;
+    border: 1px solid hsl(var(--color-neutral-800-hsl) / 30%);
+}
+
+.c-pagination__select-holder{
+    position: relative;
+    display: inline-block;
+}
+
+.c-pagination__select-holder:after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    width: 0.7em;
+    height: 0.7em;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-70%) rotate(-45deg);
+    border-left: 2px solid var(--color-primary-400);
+    border-bottom: 2px solid var(--color-primary-400);
+}
+
+
 /* PAGER */
 .c-pager{
     --_fw: 700;

package/assets/css/inc/components/refresh.css

@@ -0,0 +1,92 @@
+/* ******************************************** */
+/** COMPONENT: REFRESH
+/* ******************************************** */
+
+
+.c-refresh{
+    --text-fz: var(--fz-000);
+    
+    justify-content: flex-end;
+}
+
+
+
+/* ********************** SHORT MOBILE ********************** */
+
+@media (max-width: 22.4375rem) { /* 359px */
+}
+
+
+
+
+
+/* ********************** TALL MOBILE PORTRAIT ********************** */
+
+@media (max-width: 47.9375rem) and (min-height: 45.625rem) { /* 767px, 730px */
+}
+
+ 
+
+
+
+/* ********************** MOBILE LANDSCAPE ********************** */
+
+@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) { /* 500px, 767px */
+}
+
+
+
+
+
+/* ********************** de Mobile a TABLET ********************** */
+
+@media (min-width: 48rem) { /* 768px */
+}
+@media (min-width: 48rem) and (orientation: portrait) {
+}
+
+
+
+
+/* ********************** de Tablet a DESKTOP ********************** */
+
+@media (min-width: 61.25rem) { /* 980px */
+}
+
+
+
+
+/* ********************** de Desktop a DESKTOP 2 ********************** */
+
+@media (min-width: 75rem) { /* 1200px */
+}
+@media (min-width: 75rem) and (min-height: 45rem) { /* 1200, 720 */
+}
+
+
+
+
+/* ********************** de Desktop 2 a HD ********************** */
+
+@media (min-width: 87.5rem) { /* 1400px */
+}
+@media (min-width: 87.5rem) and (min-height: 49.375rem) { /* 1400px, 790px */
+}
+
+
+
+
+/* ********************** de Hd a FULL HD ********************** */
+
+@media (min-width: 100rem) { /* 1600px */
+}
+
+@media (min-width: 100rem) and (min-height: 49.375rem) { /* 1600px, 790px */
+}
+@media (min-width: 100rem) and (min-height: 56.25rem) { /* 1600px, 900px */
+}
+
+@media (min-width: 112.5rem) { /* 1800px */
+}
+@media (min-width: 112.5rem) and (min-height: 56.25rem) { /* 1800px, 900px */
+}