@solcre-org/core-ui 2.12.43 → 2.12.45

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/table.css

@@ -2,17 +2,20 @@
 /** COMPONENT: TABLE
 /* ******************************************** */
 
-.c-table{
+.c-table {
     --_color-base: var(--color-neutral-800);
     --_color-main: var(--color-primary-400);
     --_color-new: color-mix(in srgb, hsl(var(--color-context-success-hsl)) 10%, white 30%);
+    --_color-editable: color-mix(in srgb, hsl(var(--color-context-waiting-hsl)) 10%, white 30%);
 
     /* General */
     --_fz: var(--fz-000);
     --_fw: 500;
     --_va: middle;
-    --_gap-x: calc( var(--_fz) * 1.231 ); /* 16px based on 13px from --fz-000 */
-    --_padd-y: calc( var(--_fz) * 0.615 ); /* 8px based on 13px from --fz-000 */
+    --_gap-x: calc(var(--_fz) * 1.231);
+    /* 16px based on 13px from --fz-000 */
+    --_padd-y: calc(var(--_fz) * 0.615);
+    /* 8px based on 13px from --fz-000 */
     --_color: var(--_color-base);
     --_bc: var(--color-alternative-100-hsl);
     --_bg: var(--color-neutral-100);
@@ -31,38 +34,51 @@
     width: 100%;
     color: var(--_color);
 }
-.c-table table{
+
+.c-table__order-btn--asc {
+    transform: rotate(180deg);
+}
+
+.c-table__order-btn--desc {
+    transform: rotate(0deg);
+}
+
+.c-table table {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--_fz);
     font-weight: var(--_fw);
     text-align: left;
 }
-.c-table :is(td, th){
+
+.c-table :is(td, th) {
     vertical-align: var(--_va);
     padding-block: var(--_padd-y);
 }
-.c-table thead th{
+
+.c-table thead th {
     padding-top: 0;
 }
-:is(td, th) a{
+
+:is(td, th) a {
     overflow-wrap: break-word;
 }
-.c-table tr > *:not(:first-child){
+
+.c-table tr>*:not(:first-child) {
     padding-left: var(--_gap-x);
 }
 
-.c-table tr> *:first-child{
+.c-table tr>*:first-child {
     padding-left: calc(var(--_gap-x)*.5);
 }
 
-.c-table tr> *:last-child{
+.c-table tr>*:last-child {
     padding-right: calc(var(--_gap-x)*.5);
 }
 
 
 /* Head */
-.c-table thead *{
+.c-table thead * {
     font-size: var(--_head-fz);
     font-weight: var(--_head-fw);
 }
@@ -71,16 +87,16 @@
 
 /* Is new! */
 
-.c-table tbody tr.is-new{
+.c-table tbody tr.is-new {
     background-color: inherit;
     animation: showNewEntryTable 1.2s ease-out forwards;
 }
 
-.c-table tbody tr.is-new td:first-child{
+.c-table tbody tr.is-new td:first-child {
     position: relative;
 }
 
-.c-table tbody tr.is-new td:first-child::before{
+.c-table tbody tr.is-new td:first-child::before {
     content: "";
     position: absolute;
     top: 0;
@@ -91,77 +107,128 @@
     border-radius: 0 .3rem .3rem 0;
 }
 
+/* Is editable! */
+
+.c-table tbody tr.is-editable {
+    background-color: inherit;
+    animation: editableEntryTable 1.2s ease-out forwards;
+}
+
+.c-table tbody tr.is-editable td:first-child {
+    position: relative;
+}
+
+.c-table tbody tr.is-editable td:first-child::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: .3rem;
+    background-color: var(--color-context-waiting);
+    border-radius: 0 .3rem .3rem 0;
+}
+
+
+
 @keyframes showNewEntryTable {
-      0% {
-        opacity: 0;
+    0% {
         transform: translateY(15px);
         background-color: var(--_color-new);
-      }
-      40% {
-        opacity: 1;
+    }
+
+    40% {
         transform: translateY(0);
         background-color: var(--_color-new);
-      }
-      55% {
-        background-color: hsl(var(--color-neutral-200-hsl)/40%);;
-      }
-      70% {
+    }
+
+    55% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+        ;
+    }
+
+    70% {
         background-color: var(--_color-new);
-      }
-      85% {
-        background-color: hsl(var(--color-neutral-200-hsl)/40%);;
-      }
-      100% {
+    }
+
+    85% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+        ;
+    }
+
+    100% {
+        background-color: hsl(var(--color-neutral-200-hsl)/40%);
+    }
+}
+
+@keyframes editableEntryTable {
+    0% {
+        opacity: 0;
+        background-color: var(--_color-editable);
+    }
+
+    40% {
+        opacity: 1;
+        background-color: var(--_color-editable);
+    }
+
+    55% {
         background-color: hsl(var(--color-neutral-200-hsl)/40%);
-      }
+        ;
     }
 
+    100% {
+        background-color: var(--_color-editable);
+    }
+}
+
 
 
 
-.c-table td{
+.c-table td {
     height: var(--_cell-h);
     border-top: 1px solid hsl(var(--_bc));
 }
-.c-table tbody .is-disabled .c-table__content{
+
+.c-table tbody .is-disabled .c-table__content {
     opacity: 0.4;
 }
-.c-table__content{
+
+.c-table__content {
     padding-bottom: var(--font-visual-correction-t);
 }
 
 /* Actions */
-.c-table__actions{
+.c-table__actions {
     display: flex;
     flex-wrap: nowrap;
     justify-content: inherit;
     gap: var(--_act-gap);
 }
-.u-align-right .c-table__actions{
+
+.u-align-right .c-table__actions {
     justify-content: flex-end;
 }
 
 /* ! Stick cell right */
 
-.c-table .u-stick-right{
+.c-table .u-stick-right {
     position: sticky;
     right: 0;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        var(--_bg) calc( var(--_scroll-w) * 0.5)
-    );
+    background: linear-gradient(90deg,
+            transparent,
+            var(--_bg) calc(var(--_scroll-w) * 0.5));
 }
 
 /* Fixed layout */
 
-.c-table.c-table--fixed{
+.c-table.c-table--fixed {
     table-layout: fixed;
 }
 
 /* ! Scroll trick */
 
-.c-table--scroll{
+.c-table--scroll {
     --fix-hidden-tooltip-height: 70px;
     --fix-hidden-tooltip-width: 70px;
     overflow: hidden;
@@ -186,36 +253,36 @@
     z-index: 1;
 } */
 
-.c-table--scroll table{
+.c-table--scroll table {
     box-shadow: 2px 0 0 var(--_bg);
-    background: linear-gradient(
-        90deg,
-        transparent calc( 100% - var(--_scroll-w) * 3 ),
-        var(--_bg) calc( 100% - var(--_scroll-w) * 2 )
-    );
+    background: linear-gradient(90deg,
+            transparent calc(100% - var(--_scroll-w) * 3),
+            var(--_bg) calc(100% - var(--_scroll-w) * 2));
 }
 
 
 /* Order */
 
-.c-table__order{
+.c-table__order {
     display: inline-flex;
     align-items: center;
     gap: 0.5em;
 }
-.c-table__order [class*="icon-"]{
+
+.c-table__order [class*="icon-"] {
     font-size: max(0.667em, 8px);
     transition: transform var(--trs-duration-700) ease-out;
-    top: max( var(--font-visual-correction-b), 2px );
+    top: max(var(--font-visual-correction-b), 2px);
 }
-.c-table__order.is-active [class*="icon-"]{
+
+.c-table__order.is-active [class*="icon-"] {
     transform: rotate(180deg);
 }
 
 
 /* Order V2 */
 
-.c-table-order{
+.c-table-order {
     --_op: 0.3;
     --_op-current: var(--_op);
 
@@ -225,63 +292,75 @@
     border-radius: 4px;
     white-space: nowrap;
 }
-.c-table-order__controls{
+
+.c-table-order__controls {
     display: flex;
     flex-direction: column;
     /* align-self: stretch; */
 }
-[class*="c-table-order__arrow"]{
+
+[class*="c-table-order__arrow"] {
     opacity: var(--_op-current);
     transition: opacity var(--trs-duration-400) ease-out;
 }
-:root:root:root [class*="c-table-order__arrow"]{
+
+:root:root:root [class*="c-table-order__arrow"] {
     font-size: 8px;
 }
 
 .is-asc .c-table-order__arrow--desc,
-.is-desc .c-table-order__arrow--asc{
+.is-desc .c-table-order__arrow--asc {
     --_op-current: 0.15;
 }
-.is-asc .c-table-order__arrow--asc{ --_op-current: 0.8 }
-.is-desc .c-table-order__arrow--desc{ --_op-current: 0.8 }
 
-@media (hover: hover){
-    .c-table-order:not([disabled],.is-disabled):hover{
-        --_op-current: calc( var(--_op) + 0.1);
+.is-asc .c-table-order__arrow--asc {
+    --_op-current: 0.8
+}
+
+.is-desc .c-table-order__arrow--desc {
+    --_op-current: 0.8
+}
+
+@media (hover: hover) {
+    .c-table-order:not([disabled], .is-disabled):hover {
+        --_op-current: calc(var(--_op) + 0.1);
 
-        color: hsl( from var(--_color) h s calc( l - 8 ) );
+        color: hsl(from var(--_color) h s calc(l - 8));
     }
 }
 
 .c-table-order:is([disabled], .is-disabled),
-.c-table-order:is([disabled], .is-disabled) [class*="c-table-order__arrow"]{
+.c-table-order:is([disabled], .is-disabled) [class*="c-table-order__arrow"] {
     --_op-current: 0.2;
 }
 
 
 /* Context */
 
-.c-table tr[class*="context:error"]{
+.c-table tr[class*="context:error"] {
     background-color: hsl(var(--color-context-error-hsl)/5%);
 }
-.c-table tr[class*="context:success"]{
+
+.c-table tr[class*="context:success"] {
     background-color: hsl(var(--color-context-success-hsl)/5%);
 }
-.c-table tr[class*="context:highlight"]{
+
+.c-table tr[class*="context:highlight"] {
     background-color: hsl(var(--color-context-highlight-hsl)/5%);
 }
-.c-table tr[class*="context:waiting"]{
+
+.c-table tr[class*="context:waiting"] {
     background-color: hsl(var(--color-context-waiting-hsl)/5%);
 }
 
 
 /* BTN */
 
-.c-table .c-btn.c-btn--stroke{
+.c-table .c-btn.c-btn--stroke {
     border-color: var(--color-alternative-100);
 }
 
-.c-table .c-btn.c-btn--stroke:hover{
+.c-table .c-btn.c-btn--stroke:hover {
     --_bg: hsl(from hsl(var(--_color-main-hsl)) h s l / 0.05);
     --_current-color-hsl: from hsl(var(--_color-main-hsl)) h s calc(l - 12);
 }
@@ -289,16 +368,25 @@
 
 /* Mobile title */
 
-.c-table__mobile-heading{
+.c-table__mobile-heading {
     display: none;
 }
 
+/* In modal */
+
+.in-modal .c-table thead th:last-child,
+.c-table tbody td:last-child {
+    text-align: left;
+}
+
 
 /* ********************** MOBILE & TABLET ********************** */
 
-@media (max-width: 61.1875rem) /* up to 979px */ { 
+@media (max-width: 61.1875rem)
+/* up to 979px */
+    {
 
-    .c-table{
+    .c-table {
         --_cell-h: auto;
         --_padd-y: 0;
         --_gap-x: 0;
@@ -311,43 +399,44 @@
     .c-table table,
     .c-table tfoot,
     .c-table tr,
-    .c-table th, td{
+    .c-table th,
+    td {
         display: block;
     }
 
-    .c-table thead{
+    .c-table thead {
         display: none;
     }
 
-    .c-table tbody{
+    .c-table tbody {
         display: flex;
         flex-direction: column;
         gap: var(--_gap-y) 0;
     }
 
-    .c-table tr{
+    .c-table tr {
         border-radius: var(--app-br);
         padding: var(--_card-padding-y) var(--_card-padding-x);
         border: 1px solid hsl(var(--_bc));
     }
 
-    .c-table td{
+    .c-table td {
         border: none;
     }
 
-    .c-table td:first-child{
+    .c-table td:first-child {
         font-weight: 600;
     }
 
-    .c-table td:not(:first-child){
+    .c-table td:not(:first-child) {
         margin-top: .4em;
     }
 
-    .c-table__mobile-heading{
+    .c-table__mobile-heading {
         display: inline-block;
     }
 
-    .c-table__actions{
+    .c-table__actions {
         margin-top: var(--_card-padding-y);
     }
 

package/assets/css/main.css

@@ -73,6 +73,7 @@
  @import url(inc/components/chat-input.css); 
  @import url(inc/components/gallery.css); 
  @import url(inc/components/refresh.css); /* !(new) */
+ @import url(inc/components/area-code.css); /* !(new) */
  
 /* Utilities */
  @import url(inc/utilities/headings.css);