@solcre-org/core-ui 2.12.14 → 2.12.16

package/assets/css/inc/components/chat-input.css

@@ -0,0 +1,238 @@
+/* ******************************************** */
+/** COMPONENT: CHAT INPUT
+/* ******************************************** */
+
+.c-chat-input{
+    --_color-main-hsl: var(--color-primary-400-hsl);
+    --_color-text-hsl: var(--color-neutral-800-hsl);
+
+    --_fz: var(--fz-100);
+    --_input-padd-y: 0.687em;
+    --_input-padd-x: 1.2em;
+    --_input-height: 3.8rem;
+    --_input-placeholder-color: hsl(from hsl(var(--_color-main-hsl)) h calc(s * 0.6) l / 0.5);
+    --_submit-color: var(--color-neutral-100);
+    --_br: 2em;
+
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    gap: 1rem;
+}
+
+.c-chat-input__textarea{
+    display: flex;
+    background-color: hsl(from hsl(var(--_color-main-hsl)) h s l / 0.1 );
+    padding-inline: var(--_input-padd-x);
+    border-radius: var(--_br);
+    align-items: flex-end;
+    gap: 1rem;
+    width: 100%;
+    font-size: var(--_fz);
+}
+
+.c-chat-input__textarea label{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: flex-end;
+    position: relative;
+}
+
+.c-chat-input textarea{
+    display: block;
+    width: 100%;
+    color: hsl(from hsl(var(--_color-text-hsl)) h s l / 0.9 );
+    padding-block: var(--_input-padd-y);
+    padding-bottom: calc(var(--_input-padd-y) + var(--font-visual-correction-b));
+    
+    min-height: var(--_input-height);
+    max-height: 30rem;
+    resize: none;
+    overflow: hidden;
+    overflow-y: auto;
+    /* box-sizing: border-box; */
+    transition: height 0.2s ease;
+}
+
+.js-chat-textarea-ghost {
+  position: absolute;
+  top: 0;
+  left: -9999px;
+  visibility: hidden;
+  height: auto;
+  overflow: hidden;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.c-chat-input__actions {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    gap: 0.6em;
+    min-height: var(--_input-height);
+}
+
+.c-chat-input__actions > *{
+    color: hsl(from hsl(var(--_color-main-hsl)) h calc(s * 0.6) l / 0.8);
+    font-size: 1.2em;
+}
+
+.c-chat-input__submit{
+    display: inline-flex;
+    background-color: hsl(var(--_color-main-hsl));
+    color: var(--_submit-color);
+    width: var(--_input-height);
+    min-width: var(--_input-height);
+    height: var(--_input-height);
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--_fz);
+}
+
+.c-chat-input textarea::placeholder,
+.c-chat-input textarea input::placeholder {
+    font-weight: 400;
+    color: var(--_input-placeholder-color);
+    font-style: italic;
+    /* Navegadores modernos */
+    opacity: 1;
+    /* Para que el color sea visible en Firefox */
+}
+
+.c-chat-input textarea::-webkit-input-placeholder,
+.c-chat-input textarea input::-webkit-input-placeholder {
+    font-weight: 400;
+    color: var(--_input-placeholder-color);
+    font-style: italic;
+    /* Chrome, Safari, Edge (antiguo) */
+}
+
+.c-chat-input textarea:-moz-placeholder,
+.c-chat-input textarea input:-moz-placeholder {
+    font-weight: 400;
+    color: var(--_input-placeholder-color);
+    font-style: italic;
+    /* Firefox 4-18 */
+    opacity: 1;
+}
+
+.c-chat-input textarea::-moz-placeholder,
+.c-chat-input textarea input::-moz-placeholder {
+    font-weight: 400;
+    color: var(--_input-placeholder-color);
+    font-style: italic;
+    /* Firefox 19+ */
+    opacity: 1;
+}
+
+.c-chat-input textarea:-ms-input-placeholder,
+.c-chat-input textarea input:-ms-input-placeholder {
+    font-weight: 400;
+    color: var(--_input-placeholder-color);
+    font-style: italic;
+    /* Internet Explorer 10-11 */
+}
+
+
+/* ********************** MEDIA HOVER ********************** */
+
+@media (hover: hover) { 
+
+     .c-chat-input__submit:hover{
+        background-color: var(--color-hover);
+     }
+
+     .c-chat-input__actions > button:hover{
+        color: var(--color-hover);
+     }
+
+}
+
+
+/* ********************** 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/chat-layout.css

@@ -0,0 +1,131 @@
+/* ******************************************** */
+/** COMPONENT: CHAT LAYOUT
+/* ******************************************** */
+
+
+.c-chat-layout {
+    --_bottom-gap-x: 1.5rem;
+    --_bottom-py: 1.6rem;
+    --_bottom-min-height: 7rem;
+    --_sepatarion-y: 2.2rem;
+    --_separator-line-w: .1rem;
+    --_separator-line-color: var(--color-neutral-400);
+    --_holder-px: 3rem;
+    --_holder-py: 3.6rem;
+
+    position: relative;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+        "chatbody"
+        "chatbottom";
+    align-content: space-between;
+    overflow: hidden;
+}
+
+.c-chat-layout__body,
+.c-chat-layout__bottom{
+    padding: var(--_holder-py) var(--_holder-px);
+}
+
+.c-chat-layout__body {
+    grid-area: chatbody;
+    position: relative;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-block: calc(var(--_holder-py)*.5);
+}
+
+.c-chat-body{
+    display: flex;
+    flex-direction: column;
+    flex-direction: column-reverse;
+}
+
+.c-chat-layout__bottom {
+    grid-area: chatbottom;
+    padding-block: var(--_bottom-py);
+    border-top: var(--_separator-line-w) solid var(--_separator-line-color);
+    height: fit-content;
+    min-height: var(--_bottom-min-height);
+}
+
+/* ********************** 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/main.css

@@ -69,7 +69,8 @@
 /* ⭐️ */ @import url(inc/components/progressbar.css);
 /* ✅ */ @import url(inc/components/image-carousel.css); /* !(new) */
 /* ✅ */ @import url(inc/components/skeleton.css); /* !(new) */
-
+/* ✅ */ @import url(inc/components/chat-layout.css); 
+/* ✅ */ @import url(inc/components/chat-input.css); 
 
 /* Utilities */
 /* ✅ */ @import url(inc/utilities/headings.css);