@sankhyalabs/ezui 6.3.3 → 6.4.0-dev.2

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -1,283 +1,299 @@
 :host {
-  /* dimensions */
-  /*@doc Define a largura do componente.*/
-  --text-area--width: 100%;
-
-  /* general */
-  /*@doc Define o raio da borda do input do componente.*/
-  --text-area--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --text-area--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --text-area--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte do label do componente.*/
-  --text-area--font-weight: var(--text-weight--medium, 400);
-  /*@doc Define a cor da fonte do input e label do componente.*/
-  --text-area--color: var(--title--primary, #2B3A54);
-
-  /* input */
-  /*@doc Define a cor de fundo do input.*/
-  --text-area__input--background-color: var(--background--light, #FFFFFF);
-  /*@doc Define o estilo da borda do input.*/
-  --text-area__input--border: var(--border--medium, 2px solid);
-  /*@doc Define a cor da borda do input.*/
-  --text-area__input--border-color: var(--color--strokes,#DCE0E8);
-  /*@doc Define a cor da borda do input quando focado.*/
-  --text-area__input--focus--border-color: var(--color--primary, #008561);
-  /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --text-area__input--disabled--background-color: var(--background--medium, #F0F3F7);
-  /*@doc Define a cor do texto do input.*/
-  --text-area__input--disabled--color: var(--text--primary, #626E82);
-  /*@doc Define a borda do texto do input quando desabilitado.*/
-  --text-area__input--disabled--border--color: var(--color--strokes,#DCE0E8);
-  /*@doc Define a cor da borda do input quando com erro.*/
-  --text-area__input--error--border-color: var(--color-alert--error-800,#BD0025);
-
-  /* message box */
-  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --text-area__message_box--font-size: var(--text--small, 12px);
-  /*@doc Define a cor da fonte da mensagem quando info.*/
-  --text-area__message_box--info--color: var(--color--success, #22085d);
-  /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --text-area__message_box--error--color: var(--color-alert--error-800,#BD0025);
-
-  /* label */
-  /*@doc Define o posicionamento do label.*/
-  --text-area__label--floating--top: 6px;
-  /*@doc Define o espaçamento superior do label.*/
-  --text-area__label--padding-top: 12px;
-  /*@doc Define o espaçamento esquerdo do label.*/
-  --text-area__label--padding-left: 14px;
-  /*@doc Define o espaçamento direito do label.*/
-  --text-area__label--padding-right: 12px;
-
-  /* scrollbar */
-  /*@doc Define a cor da barra de rolagem do componente.*/
-  --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
-  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-  --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
-  /*@doc Define a cor do hover na barra de rolagem do componente.*/
-  --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
-  /*@doc Define a cor do active na barra de rolagem do componente.*/
-  --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
-  /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --text-area__scrollbar--width: var(--space--small, 6px);
-
-  /***************
-  host style  
-  ***************/
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-
-  /*public*/
-  width: var(--text-area--width);
+    /* dimensions */
+    /*@doc Define a largura do componente.*/
+    --text-area--width: 100%;
+
+    /* general */
+    /*@doc Define o raio da borda do input do componente.*/
+    --text-area--border-radius: var(--border--radius-medium, 12px);
+    /*@doc Define o tamanho da fonte do input e label do componente.*/
+    --text-area--font-size: var(--text--medium, 14px);
+    /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
+    --text-area--font-family: var(--font-pattern, Arial);
+    /*@doc Define o peso da fonte do label do componente.*/
+    --text-area--font-weight: var(--text-weight--medium, 400);
+    /*@doc Define a cor da fonte do input e label do componente.*/
+    --text-area--color: var(--title--primary, #2B3A54);
+
+    /* input */
+    /*@doc Define a cor de fundo do input.*/
+    --text-area__input--background-color: var(--background--light, #FFFFFF);
+    /*@doc Define o estilo da borda do input.*/
+    --text-area__input--border: var(--border--medium, 2px solid);
+    /*@doc Define a cor da borda do input.*/
+    --text-area__input--border-color: var(--color--strokes, #DCE0E8);
+    /*@doc Define a cor da borda do input quando focado.*/
+    --text-area__input--focus--border-color: var(--color--primary, #008561);
+    /*@doc Define a cor de fundo do input quando desabilitado.*/
+    --text-area__input--disabled--background-color: var(--background--medium, #F0F3F7);
+    /*@doc Define a cor do texto do input.*/
+    --text-area__input--disabled--color: var(--text--primary, #626E82);
+    /*@doc Define a borda do texto do input quando desabilitado.*/
+    --text-area__input--disabled--border--color: var(--color--strokes, #DCE0E8);
+    /*@doc Define a cor da borda do input quando com erro.*/
+    --text-area__input--error--border-color: var(--color-alert--error-800, #BD0025);
+
+    /* message box */
+    /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
+    --text-area__message_box--font-size: var(--text--small, 12px);
+    /*@doc Define a cor da fonte da mensagem quando info.*/
+    --text-area__message_box--info--color: var(--color--success, #22085d);
+    /*@doc Define a cor da fonte da mensagem quando erro.*/
+    --text-area__message_box--error--color: var(--color-alert--error-800, #BD0025);
+
+    /* label */
+    /*@doc Define o posicionamento do label.*/
+    --text-area__label--floating--top: 6px;
+    /*@doc Define o espaçamento superior do label.*/
+    --text-area__label--padding-top: 12px;
+    /*@doc Define o espaçamento esquerdo do label.*/
+    --text-area__label--padding-left: 14px;
+    /*@doc Define o espaçamento direito do label.*/
+    --text-area__label--padding-right: 12px;
+
+    /* scrollbar */
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+    /*@doc Define a cor do hover na barra de rolagem do componente.*/
+    --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+    /*@doc Define a cor do active na barra de rolagem do componente.*/
+    --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+    /*@doc Define o raio da borda da barra de rolagem do componente.*/
+    --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
+    /*@doc Define a largura da barra de rolagem do componente.*/
+    --text-area__scrollbar--width: var(--space--small, 6px);
+
+    /*Error icon*/
+    /*@doc Define o espaçamento lateral do icone de erro.*/
+    --ez-text-area__tooltip-icon--spacing: var(--space--large);
+    /*@doc Define a largura do icone de erro.*/
+    --ez-text-area__tooltip-icon---width: var(--space--large);
+    /*@doc Define a margem horizontal do icone de erro.*/
+    --ez-text-area__tooltip-icon---horizontal-margin: var(--space--medium, 12px);
+    /*@doc Define a margem vertical do icone de erro.*/
+    --ez-text-area__tooltip-icon---vertical-margin: 10px;
+
+
+    /* tooltip icon */
+    /*@doc Define a cor da fonte da mensagem quando erro.*/
+    --ez-text-area__tooltip_icon--error--color: var(--color-alert--error-800, #BD0025);
+
+
+    /***************
+    host style
+    ***************/
+    /*private*/
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+
+    /*public*/
+    width: var(--text-area--width);
 }
 
 textarea {
-  box-sizing: border-box;
-  border: none;
-  resize: none;
-  width: 100%;
-  padding: 0;
-  background: none;
-  min-height: 42px;
-
-  /*public*/
-  font-weight: var(--text-area--font-weight);
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  color: var(--text-area--color);
-  margin-top: calc(var(--space--medium, 12px) + 4px);
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 16px);
+
+    box-sizing: border-box;
+    border: none;
+    resize: none;
+    width: 100%;
+    padding: 0;
+    background: none;
+    min-height: 42px;
+
+    /*public*/
+    font-weight: var(--text-area--font-weight);
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    color: var(--text-area--color);
+    margin-top: calc(var(--space--medium, 12px) + 4px);
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
 }
 
 textarea:focus {
-  /*private*/
-  outline: none;
+    /*private*/
+    outline: none;
 }
 
 textarea:disabled {
-  /*public*/
-  background-color: transparent;
-  color: var(--text-area__input--disabled--color);
-  border: var(--text-area__input--disabled--border);
-  cursor: not-allowed;
+    /*public*/
+    background-color: transparent;
+    color: var(--text-area__input--disabled--color);
+    border: var(--text-area__input--disabled--border);
+    cursor: not-allowed;
 }
 
 textarea::-webkit-scrollbar {
-  background-color: var(--text-area__scrollbar--color-background);
+    background-color: var(--text-area__scrollbar--color-background);
 
-  width: var(--text-area__scrollbar--width);
-  max-width: var(--text-area__scrollbar--width);
-  min-width: var(--text-area__scrollbar--width);
+    width: var(--text-area__scrollbar--width);
+    max-width: var(--text-area__scrollbar--width);
+    min-width: var(--text-area__scrollbar--width);
 }
 
 textarea::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-default);
-  border-radius: var(--text-area__scrollbar--border-radius);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-default);
+    border-radius: var(--text-area__scrollbar--border-radius);
 }
 
 textarea::-webkit-scrollbar-track {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-background);
-  border-radius: var(--text-area__scrollbar--border-radius);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-background);
+    border-radius: var(--text-area__scrollbar--border-radius);
 }
 
 textarea::-webkit-scrollbar-thumb:vertical:hover,
 textarea::-webkit-scrollbar-thumb:horizontal:hover {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-hover);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-hover);
 }
 
 textarea::-webkit-scrollbar-thumb:vertical:active,
 textarea::-webkit-scrollbar-thumb:horizontal:active {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-clicked);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-clicked);
 }
 
 .textarea {
-  /*private*/
-  width: 100%;
-  min-height: 42px;
-  max-width: 100%;
-
-  box-sizing: border-box;
-  padding-left: var(--space--medium);
-  padding-right: var(--space--extra-small);
-
-  /*public*/
-  border-radius: var(--text-area--border-radius);
-  border: var(--text-area__input--border);
-  border-color: var(--text-area__input--border-color);
-  background-color: var(--text-area__input--background-color);
-}
-.textarea--disabled{
-  border-radius: var(--text-area--border-radius);
-  border: var(--text-area__input--border);
-  border-color: var(--text-area__input--disabled--border--color);
-  background-color: var(--text-area__input--disabled--background-color);
-  cursor: not-allowed;
+    /*private*/
+    width: 100%;
+    min-height: 42px;
+    max-width: 100%;
+
+    box-sizing: border-box;
+    padding-left: var(--space--medium);
+    padding-right: var(--space--extra-small);
+
+    /*public*/
+    border-radius: var(--text-area--border-radius);
+    border: var(--text-area__input--border);
+    border-color: var(--text-area__input--border-color);
+    background-color: var(--text-area__input--background-color);
 }
 
-.textarea--resizable {
-  resize: vertical;
+.textarea--disabled {
+    border-radius: var(--text-area--border-radius);
+    border: var(--text-area__input--border);
+    border-color: var(--text-area__input--disabled--border--color);
+    background-color: var(--text-area__input--disabled--background-color);
+    cursor: not-allowed;
 }
-
 .textarea--focus {
-  border-color: var(--text-area__input--focus--border-color);
+    border-color: var(--text-area__input--focus--border-color);
 }
 
 .textarea.hasError {
-  color: var(--text-area--color);
-  border-color: var(--text-area__input--error--border-color);
+    color: var(--text-area--color);
+    border-color: var(--text-area__input--error--border-color);
 }
 
 .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(--text-area--font-family);
-  font-size: var(--text-area__message_box--font-size);
-  color: var(--text-area__message_box--info--color);
+    /*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(--text-area--font-family);
+    font-size: var(--text-area__message_box--font-size);
+    color: var(--text-area__message_box--info--color);
 }
 
 .hasError {
-  /*public*/
-  color: var(--text-area__message_box--error--color);
+    /*public*/
+    color: var(--text-area__message_box--error--color);
 }
 
 .textarea__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(--text-area__label--padding-right));
-  left: var(--text-area--space--medium);
-
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
-  top: var(--text-area__label--padding-top);
-  left: var(--text-area__label--padding-left);
-  padding-right: var(--text-area__label--padding-right);
+    /*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(--text-area__label--padding-right));
+    left: var(--text-area--space--medium);
+
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
+    top: var(--text-area__label--padding-top);
+    left: var(--text-area__label--padding-left);
+    padding-right: var(--text-area__label--padding-right);
 }
 
 .textarea__label--floated {
-  font-family: var(--text-area--font-family);
-  font-size: var(--text--extra-small);
-  color: var(--text--primary);
-  top: var(--text-area__label--floating--top);
+    font-family: var(--text-area--font-family);
+    font-size: var(--text--extra-small);
+    color: var(--text--primary);
+    top: var(--text-area__label--floating--top);
 }
 
 .textarea__label--disabled {
-  color: var(--text-area__input--disabled--color);
-  cursor: not-allowed;
+    color: var(--text-area__input--disabled--color);
+    cursor: not-allowed;
 }
 
 .textarea--slim {
-  /*public*/
-  margin-top: var(--space--small, 6px);
+    /*public*/
+    margin-top: var(--space--small, 6px);
 }
 
 .textarea--slim::-webkit-input-placeholder { /* Edge */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim::-moz-placeholder { /* Mozilla Firefox 19+ */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim::placeholder {
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim:disabled::-webkit-input-placeholder, /* WebKit browsers */
@@ -285,7 +301,23 @@ textarea::-webkit-scrollbar-thumb:horizontal:active {
 .textarea--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
 .textarea--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
 .textarea--slim:disabled::placeholder {
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-  cursor: not-allowed
+    /*public*/
+    color: var(--text-area__input--disabled--color);
+    cursor: not-allowed;
+}
+
+ez-icon.tooltip-icon.hasError {
+    --ez-icon--color: var(--ez-text-area__tooltip_icon--error--color);
+}
+
+.input-container {
+    display: flex;
+    align-items: center;
+}
+
+
+.textarea--resizable {
+    resize: vertical;
+    overflow: auto;
+    min-height: 42px;
 }