@sankhyalabs/sankhyablocks 1.1.24 → 1.1.25

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-text-input/ez-text-input.css

@@ -0,0 +1,196 @@
+:host {
+  /* dimensions */
+  /*@doc Define a altura do componente.*/
+  --ez-text-input--height: 42px;
+  /*@doc Define a largura do componente.*/
+  --ez-text-input--width: 100%;
+  /*@doc Define a largura do slot que contém o ícone.*/
+  --ez-text-input__icon--width: 48px;
+
+  /* general */
+  /*@doc Define o raio da borda do input do componente.*/
+  --ez-text-input--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o tamanho da fonte do input e label do componente.*/
+  --ez-text-input--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
+  --ez-text-input--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label do componente.*/
+  --ez-text-input--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte do input e label do componente.*/
+  --ez-text-input--color: var(--title--primary, #000);
+
+  /* input */
+  /*@doc Define a cor de fundo do input.*/
+  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
+  /*@doc Define o estilo da borda do input.*/
+  --ez-text-input__input--border: var(--border--medium, 2px solid);
+  /*@doc Define a cor da borda do input.*/
+  --ez-text-input__input--border-color: var(--ez-text-input__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  /*@doc Define a cor da borda do input quando focado.*/
+  --ez-text-input__input--focus--border-color: var(--color--primary, #008561);
+  /*@doc Define a cor de fundo do input quando desabilitado.*/
+  --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor do texto do input.*/
+  --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor da borda do input quando com erro.*/
+  --ez-text-input__input--error--border-color: #CC2936;
+
+  /* message box */
+  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
+  --ez-text-input__message_box--font-size: var(--text--small, 12px);
+  /*@doc Define a cor da fonte da mensagem quando info.*/
+  --ez-text-input__message_box--info--color: var(--color--success, #22085d);
+  /*@doc Define a cor da fonte da mensagem quando erro.*/
+  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
+
+  /* label */
+  /*@doc Define o posicionamento do label.*/
+  --ez-text-input__label--floating--top: 6px;
+  /*@doc Define o posicionamento do label.*/
+  --ez-text-input__label--padding-top: 12px;
+  /*@doc Define o espaçamento esquerdo do label.*/
+  --ez-text-input__label--padding-left: 14px;
+  /*@doc Define o espaçamento direito do label.*/
+  --ez-text-input__label--padding-right: 12px;
+
+
+  /***************
+  host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  /*public*/
+  width: var(--ez-text-input--width);
+}
+
+input {
+  /*private*/
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--space--medium, 6px);
+  font-weight: var(--text-weight--large, 600);
+
+  /*public*/
+  height: var(--ez-text-input--height);
+  border-radius: var(--ez-text-input--border-radius);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  border: var(--ez-text-input__input--border);
+  border-color: var(--ez-text-input__input--border-color);
+  background-color: var(--ez-text-input__input--background-color);
+  color: var(--ez-text-input--color);
+}
+
+input:disabled {
+  /*public*/
+  background-color: var(--ez-text-input__input--disabled--background-color);
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+input:focus {
+  /*private*/
+  outline: none;
+  /*public*/
+  border-color: var(--ez-text-input__input--focus--border-color);
+}
+
+input.icon--left {
+  padding-left: var(--ez-text-input__icon--width);
+}
+
+input.icon--right {
+  padding-right: var(--ez-text-input__icon--width);
+}
+
+input.hasError {
+  color: var(--ez-text-input--color);
+  border-color: var(--ez-text-input__input--error--border-color);
+}
+
+input.text--right {
+  text-align: right;
+}
+
+.message-box {
+  /*private*/
+  min-height: 16px;
+  min-width: 100%;
+  margin-top: 3px;
+  line-height: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input__message_box--font-size);
+  color: var(--ez-text-input__message_box--info--color);
+}
+
+.hasError {
+  /*public*/
+  color: var(--ez-text-input__message_box--error--color);
+}
+
+.input__label {
+  /*private*/
+  box-sizing: border-box;
+  position: absolute;
+  z-index: var(--visible);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-transition: font-size .05s, top .05s;
+  transition: font-size .05s, top .05s;
+  width: calc(100% - var(--ez-text-input__label--padding-right));
+  left: var(--ez-text-input--space--medium);
+
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+  top: var(--ez-text-input__label--padding-top);
+  left: var(--ez-text-input__label--padding-left);
+  padding-right: var(--ez-text-input__label--padding-right);
+}
+
+.input__label--floated {
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--text--extra-small);
+  color: var(--text--primary);
+  top: var(--ez-text-input__label--floating--top);
+}
+
+.input__label--disabled {
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input__label--left {
+  /*public*/
+  text-align: left;
+  left: calc(var(--ez-text-input__icon--width) + 2px);
+  /*borda*/
+  width: calc(100% - var(--ez-text-input__icon--width));
+}
+
+.input__label--right {
+  /*public*/
+  right: var(--ez-text-input__icon--width);
+  width: calc(100% - var(--ez-text-input__icon--width));
+}
+
+/* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
+.input__label--left.input__label--right {
+  left: calc(var(--ez-text-input__icon--width) + 2px);
+  /*borda*/
+  width: calc(100% - var(--ez-text-input__icon--width) * 2);
+}
+
+.input--with--label {
+  /*public*/
+  padding-bottom: 0;
+}

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-time-input/ez-time-input.css

@@ -0,0 +1,10 @@
+:host {
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
+}

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-toast/ez-toast.css

@@ -0,0 +1,127 @@
+:host {
+
+  /* Buttons */
+  /*@doc Contém o ícone de fechamento do toast.*/
+  --ez-toast__btn__close__image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg%22%3E<path d="M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z"/></svg>');
+
+  /* Container */
+  /*@doc Define a camada em que o container será exibido.*/
+  --ez-toast__container-z-index: var(--more-visible, 2);
+  /*@doc Define a cor de fundo do container.*/
+  --ez-toast__container--background-color: var(--color--secondary, #383c45);
+
+  /* Icon */
+  /*@doc Define o espaçamento à esquerda do ícone.*/
+  --ez-toast__icon--padding-left: var(--space--small, 6px);
+}
+
+.toast__container {
+  position: fixed;
+  display: flex;
+  bottom: 100px;
+  z-index: var(--ez-toast__container-z-index);
+  left: 100px;
+  width: 280px;
+  box-sizing: border-box;
+  background-color: var(--ez-toast__container--background-color);
+  border-radius: 6px;
+  align-items: center;
+  padding: 12px;
+  visibility: hidden;
+}
+
+.message__container {
+  font-family: "Sora", "Algerian";
+  text-shadow: 0 0 0 #353535, 0 0 1px transparent;
+  color: #FFFFFF;
+  font-size: 14px;
+  width: 90%;
+  overflow: hidden;
+  word-break: break-all;
+  height: auto;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+}
+
+.message__conteiner--icon {
+  padding-left: var(--ez-toast__icon--padding-left);
+  width: 80%;
+}
+
+.btn-close {
+  margin-top: 3px;
+  display: flex;
+  justify-content: flex-end;
+  align-self: flex-start;
+  padding: 0;
+  outline: none;
+  width: 10%;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-close::after {
+  content: '';
+  display: flex;
+  background-color: #FFFFFF;
+  width: 12px;
+  height: 12px;
+  -webkit-mask-image: var(--ez-toast__btn__close__image);
+  mask-image: var(--ez-toast__btn__close__image);
+}
+
+.toast__container--oppened {
+  animation: fadein 0.5s, fadeout 0.5s 3s;
+  visibility: visible;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    left: -100px;
+    opacity: 0;
+  }
+
+  to {
+    left: 100px;
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    left: -100px;
+    opacity: 0;
+  }
+
+  to {
+    left: 100px;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    left: 100px;
+    opacity: 1;
+  }
+
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    left: 100px;
+    opacity: 1;
+  }
+
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}