@solcre-org/core-ui 2.16.0 → 2.16.3

package/assets/css/inc/components/bottom-alert.css

@@ -13,7 +13,7 @@
     gap: var(--app-alerts-gap, 1rem);
     overflow: hidden;
     overflow-y: auto;
-    padding-inline: calc(var(--_spacing)*2);
+    padding-inline: 2rem;
     padding-bottom: var(--app-alert-bottom, 4rem);
     max-height: 100svh;
     pointer-events: none;

package/assets/css/inc/components/calendar.css

@@ -1,11 +1,15 @@
 /* ******************************************** */
-/** COMPONENTS: CALENDAR
+/** CALENDAR DEMO STYLES (migrated from WTC)
+/* ******************************************** */
+
+/* ******************************************** */
+/** COMPONENTS: CALENDAR (date picker)
 /* ******************************************** */
 
 .c-calendar{
-    --_color-base-hsl: var(--color-neutral-800-hsl);
-    --_color-main-hsl: var(--color-primary-400-hsl);
-    --_fz: calc( var(--fz-000) - 1px );
+    --_color-base-hsl: var(--color-neutral-800-hsl, 220 9% 46%);
+    --_color-main-hsl: var(--color-primary-400-hsl, 217 91% 60%);
+    --_fz: calc( var(--fz-000, 14px) - 1px );
     --_fw: 500;
     --_margin-x: -0.5em;
     --_gap-y: 0.75em;
@@ -20,9 +24,20 @@
     margin-inline: var(--_margin-x);
 }
 
+.c-calendar__day-header {
+    font-size: var(--_fz);
+    font-weight: 600;
+    color: hsl( var(--_color-base-hsl) / 0.6 );
+    padding-block: 0.5em;
+}
+
 .c-calendar__day:is(a, button){
     position: relative;
     isolation: isolate;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.5em;
 }
 .c-calendar__day:is(a, button)::before{
     content: "";
@@ -38,8 +53,8 @@
     background-color: hsl( var(--_color-base-hsl) );
     opacity: 0;
     transition:
-        background-color var(--trs-duration-400),
-        opacity var(--trs-duration-400);
+        background-color 0.2s,
+        opacity 0.2s;
 }
 .c-calendar__day.not-current{
     opacity: 0.2;
@@ -56,27 +71,421 @@
     cursor: default;
 }
 .c-calendar__day.is-active::before{
-    background-color: hsl( var(--color-primary-300-hsl) / 0.4 );
+    background-color: hsl( var(--color-primary-300-hsl, 217 91% 70%) / 0.4 );
     opacity: 1;
 }
 
 .c-calendar__day.is-current{
-    color: var(--color-neutral-100);
-    font-weight: 800;
+    color: var(--color-neutral-100, #fff);
 }
 .c-calendar__day.is-current::before{
     background-color: hsl( var(--_color-main-hsl) );
     opacity: 1;
 }
 .c-calendar__day.is-current:hover::before{
-    background-color: hsl( var(--color-hover-hsl) );
+    background-color: hsl( var(--color-hover-hsl, 217 91% 50%) );
     opacity: 1;
 }
 
-@media (min-width: 112.5rem) /* 1800px */ {
+.c-calendar__day.is-disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.c-calendar__day.is-holiday::after {
+    content: "";
+    display: block;
+    width: 4px;
+    height: 4px;
+    background: hsl(var(--color-warning-hsl, 38 92% 50%));
+    border-radius: 50%;
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* ******************************************** */
+/** BOOKINGS: CARD
+/* ******************************************** */
+
+.c-bookings-card{
+    padding-inline: var(--layout-padd-x, 1.5rem);
+    padding-block: var(--layout-padd-y, 1.5rem);
+    background: var(--layout-bg-default, var(--color-neutral-100, #f5f5f5));
+    border-radius: var(--app-br, 8px);
+}
+.c-bookings-card__top{
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+}
+
+.c-bookings-subtitle{
+    font-size: var(--fz-200, 1.125rem);
+    font-weight: 500;
+}
+
+/* ******************************************** */
+/** BOOKINGS: GRID
+/* ******************************************** */
 
-    .c-calendar{
-        --_fz: var(--fz-100);
+.c-bookings-grid{
+    --_color-main: #4783E1;
+    --_line-color: var(--color-neutral-300, #d1d5db);
+    --_bg: var(--color-neutral-100, #f5f5f5);
+    --_fz: max( var(--fz-000, 14px) - 1px, 12px );
+    --_fz-xl: var(--fz-000, 14px);
+    --_padd-x: 1.2rem;
+    --_top-padd-y: calc( var(--_padd-x) * 1.25 );
+
+    --_row-height: 4rem;
+    --_col-min-w: 22rem;
+    --_col-max-w: max(35vw, 30rem);
+}
+.c-bookings-grid__wrapper{
+    display: grid;
+    grid-template-columns: auto repeat(var(--cols, 1), 1fr);
+    position: relative;
+}
+.c-bookings-grid__col{
+    min-width: var(--_col-min-w);
+    max-width: var(--_col-max-w);
+    border-left: 1px solid var(--_line-color);
+}
+.c-bookings-grid__row{
+    height: max( var(--_row-height) * var(--_size-factor, 1), 3.2rem );
+    padding: calc( var(--_padd-x) * 0.5 );
+    position: relative;
+    border-top: 1px solid var(--_line-color);
+}
+.c-bookings-grid__top + .c-bookings-grid__row{
+    border-top: none;
+}
+.c-bookings-grid__times + .c-bookings-grid__col{
+    border-left: none;
+}
+
+.c-bookings-grid__col,
+.c-bookings-grid__times{
+    padding-top: calc( var(--layout-padd-y, 1.5rem) - var(--_top-padd-y));
+}
+
+/* Times */
+
+.c-bookings-grid__times{
+    padding-left: var(--layout-padd-x, 1.5rem);
+    position: sticky;
+    left: 0;
+    background-color: var(--_bg);
+    z-index: 60;
+    border-right: 1px solid var(--_line-color);
+    border-top-left-radius: var(--app-br, 8px);
+    border-bottom-left-radius: var(--app-br, 8px);
+    z-index: 110;
+}
+.c-bookings-grid__times .c-bookings-grid__row{
+    border-color: transparent;
+}
+.c-bookings-grid__times .c-bookings-grid__row::before{
+    content: "";
+    display: block;
+    width: 1rem;
+    position: absolute;
+    right: 0;
+    top: -1px;
+    border-top: 1px solid var(--_line-color);
+}
+
+.c-bookings-grid__row:nth-child(odd),
+.c-bookings-grid__times .c-bookings-grid__row:nth-child(odd)::before{
+    border-top-style: dashed;
+}
+
+.c-bookings-grid__top{
+    display: grid;
+    align-items: end;
+    padding-inline: var(--_padd-x);
+    padding-block: calc( var(--_padd-x) * 1.25 );
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background-color: var(--_bg);
+    border-bottom: 1px solid var(--_line-color);
+    z-index: 100;
+}
+.c-bookings-grid__times .c-bookings-grid__top{
+    visibility: hidden;
+}
+
+
+/* ******************************************** */
+/** BOOKINGS: ELEMENTS
+/* ******************************************** */
+
+.c-bookings-grid__title{
+    font-size: var(--_fz-xl);
+    font-weight: 500;
+}
+:where(.c-bookings-grid__top) .c-bookings-grid__title{
+    font-size: calc( var(--_fz-xl) + 2px);
+}
+
+.c-bookings-grid__time{
+    display: block;
+    padding-right: 16px;
+    font-size: var(--_fz);
+    font-weight: 500;
+    translate: 0 calc( var(--_padd-x) * -0.5 - 50%);
+}
+
+.c-bookings-grid__slot{
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-neutral-300, #d1d5db);
+    border-radius: 8px;
+    opacity: 0;
+    font-size: var(--_fz-xl);
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+}
+@media (hover: hover){
+    .c-bookings-grid__slot:hover{
+        opacity: 0.7;
     }
 
-}
+    .c-bookings-grid__slot.c-bookings-grid__slot--disabled:hover{
+        opacity: 0.3;
+    }
+}
+
+/* Booking */
+
+.c-bookings-grid__booking{
+    --link-fz: 1em;
+    --link-fw: 600;
+    --link-color-main-hsl: var(--color-neutral-100-hsl, 0 0% 100%);
+    
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-block: calc( var(--_padd-x) * 0.5 );
+    padding-inline: var(--_padd-x);
+    font-size: var(--_fz);
+    line-height: 1.3;
+    color: var(--color-neutral-100, #fff);
+    background-color: var(--_color-main);
+    border-radius: 8px;
+    cursor: pointer;
+}
+:where(.c-bookings-grid) .c-bookings-grid__booking{
+    height: calc( var(--rows, 1) * 100% - var(--_padd-x) );
+    position: absolute;
+    top: calc( var(--_padd-x) * 0.5 );
+    left: calc( var(--_padd-x) * 0.5 );
+    right: calc( var(--_padd-x) * 0.5 );
+    z-index: 10;
+}
+.c-bookings-grid__booking:is(
+    [style*="--rows: 1;"],
+    [style*="--rows:1;"]
+){
+    flex-direction: row;
+    gap: 1em;
+    align-items: center;
+}
+
+.c-bookings-grid__booking:is([style*="--rows: 1;"],[style*="--rows:1;"]) .c-bookings-grid__title{
+    max-width: 90%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.c-bookings-grid__booking[data-type="cleaning"]{
+    background-color: #E2ECFF;
+    color: #4783E1;
+}
+.c-bookings-grid__booking[data-type="maintenance"]{
+    --link-color-main-hsl: var(--color-neutral-800, 220 9% 46%);
+    background-color: var(--color-neutral-300, #d1d5db);
+    color: inherit;
+}
+.c-bookings-grid__booking[data-type="unavailable"],
+.c-bookings-grid__booking[data-type="blocked"]{
+    --link-color-main-hsl: var(--color-neutral-800, 220 9% 46%);
+    background-color: var(--color-neutral-200, #e5e7eb);
+    color: var(--color-neutral-600, #4b5563);
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* Mi reserva */
+.c-bookings-grid__booking:is( [data-type="user-event"], [data-type="pending"], [data-type="confirmed"]){    
+    background: linear-gradient(
+        145deg,
+        #0036C0 0%,
+        #1262D2 100%
+    );
+}
+.c-bookings-grid__booking:is( [data-type="user-event"], [data-type="pending"], [data-type="confirmed"]) .c-bookings-grid__title{
+    font-weight: 600;
+}
+
+.c-bookings-grid__booking[data-type="event"]{
+    background-color: #4783E1;
+}
+
+.c-bookings-grid__text {
+    font-size: var(--_fz);
+    opacity: 0.85;
+    margin-top: 0.25em;
+}
+
+.c-bookings-grid__link{
+    margin-top: 0.5em;
+    text-underline-offset: 4px;
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+    font-size: var(--link-fz);
+    font-weight: var(--link-fw);
+    text-decoration: underline;
+}
+.c-bookings-grid__link [class*="icon-"]{
+    font-size: calc(1em - 1px);
+}
+
+/* Quick actions */
+
+.c-bookings-grid__quick-actions{
+    display: flex;
+    gap: 0.8rem;
+    margin-top: auto;
+    margin-bottom: 6px;
+    margin-left: auto;
+}
+
+
+/* ******************************************** */
+/** CURRENT TIME LINE INDICATOR
+/* ******************************************** */
+
+.c-bookings-grid__current-time-line {
+    --_dot-size: 14px;
+    --_line-color: #f59e0b;
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-width: calc(8rem + var(--cols, 1) * 22rem);
+    top: calc(6rem + var(--time-position-rem, 0) * 1rem);
+    
+    height: 2px;
+    background: linear-gradient(90deg, 
+        transparent 0%, 
+        transparent 8rem,
+        var(--_line-color) 8rem,
+        var(--_line-color) 100%
+    );
+    z-index: 100;
+    pointer-events: none;
+}
+
+.c-bookings-grid__current-time-line::before{
+    content: '';
+    position: sticky;
+    display: block;
+    left: 8.2rem;
+    top: 0;
+    transform: translateY(-45%);
+    width: var(--_dot-size);
+    min-width: var(--_dot-size);
+    height: var(--_dot-size);
+    min-height: var(--_dot-size);
+    background-color: var(--_line-color);
+    border: 2px solid white;
+    border-radius: 50%;
+    box-shadow: 0 0 6px var(--_line-color);
+}
+
+/* ******************************************** */
+/** BOOKINGS: HEADER
+/* ******************************************** */
+
+.c-bookings-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding-block: 1rem;
+    margin-bottom: 1rem;
+}
+
+.c-bookings-header__today {
+    padding: 0.5em 1em;
+    font-size: var(--fz-000, 14px);
+    font-weight: 500;
+    color: var(--color-primary-500, #3b82f6);
+    background: transparent;
+    border: 1px solid var(--color-primary-500, #3b82f6);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+}
+.c-bookings-header__today:hover {
+    background: var(--color-primary-500, #3b82f6);
+    color: var(--color-neutral-100, #fff);
+}
+
+.c-bookings-header__date {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: var(--fz-100, 1rem);
+    font-weight: 500;
+}
+
+.c-bookings-header__date > span {
+    min-width: 200px;
+    text-align: center;
+}
+.c-bookings-header__date > span::first-letter {
+    text-transform: uppercase;
+}
+
+.c-bookings-header__date-arrow {
+    display: grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    font-size: 12px;
+    background: transparent;
+    border: 1px solid var(--color-neutral-300, #d1d5db);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+.c-bookings-header__date-arrow:hover {
+    background: var(--color-neutral-200, #e5e7eb);
+    border-color: var(--color-neutral-400, #9ca3af);
+}
+
+/* ******************************************** */
+/** UTILITY CLASSES
+/* ******************************************** */
+
+.u-push-t {
+    margin-top: 1rem;
+}
+
+.u-flex {
+    display: flex;
+}
+
+.u-gap-lg {
+    gap: 1.5rem;
+}

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

@@ -107,6 +107,7 @@ app-field-errors:not(:has(*)){
      :root{
         --_entry-group-gap: 2rem;
         --_entry-input-padd-y: 0.79em;
+        --_entry-stepper-control-fz: 3rem;
      }
 
 }

package/assets/css/inc/components/header-mobile.css

@@ -59,7 +59,7 @@
 
 .c-header-mobile__subnav--light{
     background-color: var(--color-neutral-100);
-    padding-block: 1.4rem;
+    padding-block: 2rem;
 }
 
 .c-header-mobile__subnav--light .c-btn--secondary{
@@ -68,15 +68,24 @@
 
 /* Calendar */
 
-.c-header-mobile .c-calendar{
-    --_gap-y: 0.35em;
+.c-header-mobile .c-calendar-holder{
     color: var(--color-neutral-100);
     background: var(--_header-mobile-bg);
     padding-block: 1rem;
     width: 100%;
+}
+
+.c-header-mobile .c-calendar{
+    width: 100%;
     margin: 0;
 }
 
+.c-calendar-holder__year{
+    font-size: 1.2rem;
+    opacity: 0.7;
+    padding-inline: var(--layout-padd-x, var(--_layout-padd-x));
+}
+
 .c-header-mobile .c-calendar__day-header{
     color: var(--color-primary-300);
 }

package/assets/css/inc/components/modal.css

@@ -259,7 +259,7 @@ body:has(.c-modal.is-visible) {
     {
 
     .c-modal {
-        --_holder-px: calc(var(--wrapper-x)*1.2);
+        --_holder-px: calc(var(--wrapper-x)*1.8);
         --_holder-w: calc(100% - var(--_ouside-padding)*2);
         --_header-py: 1.8rem;
 

package/assets/css/inc/components/popup.css

@@ -224,6 +224,11 @@ body:has(.c-popup.is-visible){
 }
 
 
+.c-popup .c-popup__btns button{
+    text-align: center;
+}
+
+
 /* ********************** MEDIA HOVER ********************** */
 
 @media (hover: hover) { 

package/assets/css/inc/components/table.css

@@ -395,8 +395,8 @@
         --_gap-x: 0;
         --_gap-y: calc(var(--space-y)*.5);
         --_card-padding-y: 2.1rem;
-        --_card-padding-x: var(--space-x);
-        --_fz: var(--fz-100);
+        --_card-padding-x: calc(var(--space-x)*1.3);
+        --_fz: 1.5rem;
     }
 
     .c-table table,
@@ -450,7 +450,8 @@
     }
 
     .c-table td:not(:first-child) {
-        margin-top: .4em;
+        margin-top: .6em;
+        text-align: left;
     }
 
     .c-table__mobile-heading {
@@ -461,4 +462,8 @@
         margin-top: var(--_card-padding-y);
     }
 
+    .c-table__actions [class*=c-icon-btn] {
+        --_size-factor: 1.3;
+    }
+
 }

package/assets/css/inc/generic/screen.css

@@ -78,10 +78,9 @@ a, button{
 /* ********************** MOBILE & TABLET ********************** */
 
 @media (max-width: 61.1875rem) /* up to 979px */ { 
-
-    body{
-        /* ! Habría que hacer este cálculo con JS */
+    /* ! Habría que hacer este cálculo con JS */
+    /* body{
         padding-bottom: 60px;
-    }
+    } */
 
 }

package/assets/css/main.css

@@ -78,6 +78,7 @@
  /* ✅ */ @import url(inc/components/fixed-actions.css); /* !(new) */
 /* ✅ */ @import url(inc/components/header-mobile.css); /* !(new) */
 /* ✅ */ @import url(inc/components/mobile-nav.css); /* !(new) */
+/* ✅ */ @import url(inc/components/calendar.css); /* !(new) */
  
 /* Utilities */
  @import url(inc/utilities/headings.css);