@solcre-org/core-ui 2.12.27 → 2.12.29

package/assets/css/inc/components/gallery.css

@@ -0,0 +1,326 @@
+/* ******************************************** */
+/** COMPONENT: GALLERY
+/* ******************************************** */
+
+.c-gallery-grid {
+    --_total-items: calc(var(--total-items) - 1);
+    --_gap: 8px;
+    --_br: var(--app-br, 0px);
+    --_sides-size: var(--sides-size, 1fr);
+
+    display: grid;
+    grid-template-rows: var(--_sides-size);
+    gap: var(--_gap);
+}
+
+.c-gallery-grid__imgs-xs {
+    display: flex;
+    height: 100%;
+    gap: var(--_gap);
+}
+
+.c-gallery-grid__img {
+    position: relative;
+    width: 100%;
+    border-radius: var(--_br);
+    overflow: hidden;
+}
+
+.c-gallery-grid__img::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: hsl(var(--color-hover-hsl)/70%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--trs-duration-400) ease-out;
+}
+
+.c-gallery-grid__img::after {
+    content: "\e902";
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    color: var(--color-neutral-100);
+    font-size: var(--fz-500);
+    transform: translate(-50%,-50%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--trs-duration-400) ease-out;
+}
+
+.c-gallery-grid img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    object-fit: cover;
+}
+
+/* Side items */
+
+.c-gallery-grid--side-items {
+    grid-template-columns: var(--_sides-size);
+    grid-template-rows: 1fr;
+}
+
+.c-gallery-grid--side-items .c-gallery-grid__imgs-xs {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(var(--_total-items), 1fr);
+}
+
+
+/* Modal */
+.c-gallery-modal {
+    --_overlay-bg: var(--app-popup-overlay);
+    --_modal-animation-in: .4s;
+    --_modal-animation-out: .2s;
+    --_br: var(--app-br, 0px);
+    --_close-size: 2rem;
+    --_nav-size: 3rem;
+    --_controls-color: var(--color-neutral-100);
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 6rem 2rem;
+    z-index: 1000;
+    isolation: isolate;
+}
+
+.c-gallery-modal__overlay {
+    background: var(--_overlay-bg);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(0.8rem);
+    opacity: 0;
+}
+
+.c-gallery-modal.is-visible .c-gallery-modal__overlay {
+    animation: showOverlay var(--_modal-animation-in) ease-out forwards;
+}
+
+.c-gallery-modal.is-closing .c-gallery-modal__overlay {
+    animation: hideOverlay var(--_modal-animation-out) ease-out forwards;
+}
+
+.c-gallery-modal.is-visible {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
+
+.c-gallery-modal__holder {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.c-gallery-modal__holder img {
+    max-width: 85%;
+    max-height: 80vh;
+    max-height: 80svh;
+    border-radius: var(--_br);
+}
+
+.c-gallery-modal__close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: var(--_controls-color);
+    font-size: var(--_close-size);
+    cursor: pointer;
+    z-index: 1;
+}
+
+.c-gallery-modal__nav {
+    background: none;
+    border: none;
+    color: var(--_controls-color);
+    font-size: var(--_nav-size);
+    cursor: pointer;
+    padding: 10px;
+    transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
+    z-index: 1;
+}
+
+.c-gallery-modal__nav:disabled {
+    opacity: .4;
+    transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
+}
+
+.c-gallery-modal__counter {
+    margin-top: 10px;
+    color: var(--_controls-color);
+    font-size: 18px;
+    z-index: 1;
+}
+
+
+@keyframes showOverlay {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes hideOverlay {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+
+/* ********************** MEDIA HOVER ********************** */
+
+@media (hover: hover) {
+
+    .c-gallery-modal__close {
+        transition: color var(--trs-duration-400) ease-out;
+    }
+
+    .c-gallery-modal__close:hover,
+    .c-gallery-modal__nav:not(:disabled):hover {
+        color: var(--color-hover);
+        transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
+    }
+
+    .c-gallery-grid__img:hover::after,
+    .c-gallery-grid__img:hover::before {
+        opacity: 1;
+        transition: opacity var(--trs-duration-400) ease-out;
+    }
+
+}
+
+
+/* ********************** 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 */
+    .c-gallery-grid {
+        --_br: 16px;
+    }
+}
+
+@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/main.css

@@ -71,7 +71,7 @@
 /* ✅ */ @import url(inc/components/skeleton.css); /* !(new) */
 /* ✅ */ @import url(inc/components/chat-layout.css); 
 /* ✅ */ @import url(inc/components/chat-input.css); 
-
+/* ✅ */ @import url(inc/components/gallery.css); /* !(new) */
 /* Utilities */
 /* ✅ */ @import url(inc/utilities/headings.css);
 /* ✅ */ @import url(inc/utilities/subtitles.css);

package/assets/i18n/en/common.json

@@ -78,10 +78,12 @@
     "expand": "Expand row",
     "collapse": "Collapse row",
     "sort": {
-      "asc": "Hacer clic para ordenar ascendente",
-      "desc": "Hacer clic para ordenar descendente",
-      "reset": "Hacer clic para quitar ordenamiento"
-    }
+      "asc": "Click to sort ascending",
+      "desc": "Click to sort descending",
+      "reset": "Click to remove sorting"
+    },
+    "refresh": "Refresh data",
+    "lastUpdate": "Last update"
   },
   "pagination": {
     "viewing": "Viewing",
@@ -1075,5 +1077,9 @@
     "forbidden": "Access denied.",
     "notFound": "Resource not found.",
     "validationError": "Invalid data. Please check the information entered."
+  },
+  "manual-refresh": {
+    "refresh": "Refresh",
+    "lastUpdated": "Last updated at {{time}}"
   }
 }

package/assets/i18n/es/common.json

@@ -81,7 +81,9 @@
       "asc": "Hacer clic para ordenar ascendente",
       "desc": "Hacer clic para ordenar descendente", 
       "reset": "Hacer clic para quitar ordenamiento"
-    }
+    },
+    "refresh": "Actualizar datos",
+    "lastUpdate": "Última actualización"
   },
   "pagination": {
     "viewing": "Mostrando",