@sankhyalabs/ezui 1.1.8 → 1.1.9

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

@@ -1,170 +1,170 @@
-:host {
-  /* dimensions */
-  --it--height: 42px;
-  --it--width: 100%;
-  --it__icon--width: 48px;
-
-  /* general */
-  --it--border-radius: var(--border--radius-medium, 12px);
-  --it--font-size: var(--text--medium, 14px);
-  --it--font-family: var(--font-pattern, Arial);
-  --it--font-weight: var(--text-weight--large, 500);
-  --it--color: var(--title--primary, #000);
-  
-  /* input */
-  --it__input--background-color: var(--background--medium, #e0e0e0);
-  --it__input--border: var(--border--medium, 2px solid);
-  --it__input--border-color: var(--it__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
-  --it__input--focus--border-color: var(--color--primary, #008561);
-  --it__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
-  --it__input--disabled--color: var(--text--disable, #AFB6C0);
-  --it__input--error--border-color: #CC2936;
-  
-  /* message box */
-  --it__message_box--font-size: var(--text--small, 12px);
-  --it__message_box--info--color: var(--color--success, #22085d);
-  --it__message_box--error--color: var(--color--error, #FF0000);
-  
-  /* label */
-  --it__label--floating--top: 6px;
-  --it__label--padding-top: 12px;
-  --it__label--padding-left: 14px;
-  --it__label--padding-right: 12px;
-  
-  
-  /***************
-  host style  
-  ***************/
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  /*public*/
-  width: var(--it--width);
-}
-
-input {
-  /*private*/
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--space--medium, 6px);
-  font-weight: var(--text-weight--large, 600);
-
-  /*public*/
-  height: var(--it--height);
-  border-radius: var(--it--border-radius);
-  font-family: var(--it--font-family);
-  font-size: var(--it--font-size);
-  border: var(--it__input--border);
-  border-color: var(--it__input--border-color);
-  background-color: var(--it__input--background-color);
-  color: var(--it--color);
-}
-
-input:disabled {
-  /*public*/
-  background-color: var(--it__input--disabled--background-color);
-  color: var(--it__input--disabled--color);
-}
-
-input:focus {
-  /*private*/
-  outline: none;
-  /*public*/
-  border-color: var(--it__input--focus--border-color);
-}
-
-input.icon--left {
-  padding-left: var(--it__icon--width);
-}
-
-input.icon--right {
-  padding-right: var(--it__icon--width);
-}
-
-input.hasError {
-  color: var(--it--color);
-  border-color: var(--it__input--error--border-color);
-}
-
-input.text--right {
-  text-align: right;
-}
-
-.message-box {
-  /*private*/
-  min-height: 16px;
-  min-width: 100%;
-  margin-top: 2px;
-  line-height: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  /*public*/
-  font-family: var(--it--font-family);
-  font-size: var(--it__message_box--font-size);
-  color: var(--it__message_box--info--color);
-}
-
-.hasError {
-  /*public*/
-  color: var(--it__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(--it__label--padding-right));
-  left: var(--it--space--medium);
-
-  /*public*/
-  font-family: var(--it--font-family);
-  font-size: var(--it--font-size);
-  font-weight: var(--it--font-weight);
-  color: var(--it--color);
-  top: var(--it__label--padding-top);
-  left: var(--it__label--padding-left);
-  padding-right: var(--it__label--padding-right);
-}
-
-.input__label--floated {
-  font-family: var(--it--font-family);
-  font-size: var(--text--extra-small);
-  color: var(--text--primary);
-  top: var(--it__label--floating--top);
-}
-
-.input__label--disabled {
-  color: var(--it__input--disabled--color);
-}
-
-.input__label--left {
-  /*public*/
-  left: calc(var(--it__icon--width) + 2px); /*borda*/
-  width: calc(100% - var(--it__icon--width));
-}
-
-.input__label--right {
-  /*public*/
-  right: var(--it__icon--width);
-  width: calc(100% - var(--it__icon--width));
-}
-
-.input__label--left.input__label--right {
-  left: calc(var(--it__icon--width) + 2px); /*borda*/
-  width: calc(100% - var(--it__icon--width) * 2);
-}
-
-.input--with--label {
-  /*public*/
-  padding-bottom: 0;
+:host {
+  /* dimensions */
+  --it--height: 42px;
+  --it--width: 100%;
+  --it__icon--width: 48px;
+
+  /* general */
+  --it--border-radius: var(--border--radius-medium, 12px);
+  --it--font-size: var(--text--medium, 14px);
+  --it--font-family: var(--font-pattern, Arial);
+  --it--font-weight: var(--text-weight--large, 500);
+  --it--color: var(--title--primary, #000);
+  
+  /* input */
+  --it__input--background-color: var(--background--medium, #e0e0e0);
+  --it__input--border: var(--border--medium, 2px solid);
+  --it__input--border-color: var(--it__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --it__input--focus--border-color: var(--color--primary, #008561);
+  --it__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --it__input--disabled--color: var(--text--disable, #AFB6C0);
+  --it__input--error--border-color: #CC2936;
+  
+  /* message box */
+  --it__message_box--font-size: var(--text--small, 12px);
+  --it__message_box--info--color: var(--color--success, #22085d);
+  --it__message_box--error--color: var(--color--error, #FF0000);
+  
+  /* label */
+  --it__label--floating--top: 6px;
+  --it__label--padding-top: 12px;
+  --it__label--padding-left: 14px;
+  --it__label--padding-right: 12px;
+  
+  
+  /***************
+  host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  /*public*/
+  width: var(--it--width);
+}
+
+input {
+  /*private*/
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--space--medium, 6px);
+  font-weight: var(--text-weight--large, 600);
+
+  /*public*/
+  height: var(--it--height);
+  border-radius: var(--it--border-radius);
+  font-family: var(--it--font-family);
+  font-size: var(--it--font-size);
+  border: var(--it__input--border);
+  border-color: var(--it__input--border-color);
+  background-color: var(--it__input--background-color);
+  color: var(--it--color);
+}
+
+input:disabled {
+  /*public*/
+  background-color: var(--it__input--disabled--background-color);
+  color: var(--it__input--disabled--color);
+}
+
+input:focus {
+  /*private*/
+  outline: none;
+  /*public*/
+  border-color: var(--it__input--focus--border-color);
+}
+
+input.icon--left {
+  padding-left: var(--it__icon--width);
+}
+
+input.icon--right {
+  padding-right: var(--it__icon--width);
+}
+
+input.hasError {
+  color: var(--it--color);
+  border-color: var(--it__input--error--border-color);
+}
+
+input.text--right {
+  text-align: right;
+}
+
+.message-box {
+  /*private*/
+  min-height: 16px;
+  min-width: 100%;
+  margin-top: 2px;
+  line-height: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /*public*/
+  font-family: var(--it--font-family);
+  font-size: var(--it__message_box--font-size);
+  color: var(--it__message_box--info--color);
+}
+
+.hasError {
+  /*public*/
+  color: var(--it__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(--it__label--padding-right));
+  left: var(--it--space--medium);
+
+  /*public*/
+  font-family: var(--it--font-family);
+  font-size: var(--it--font-size);
+  font-weight: var(--it--font-weight);
+  color: var(--it--color);
+  top: var(--it__label--padding-top);
+  left: var(--it__label--padding-left);
+  padding-right: var(--it__label--padding-right);
+}
+
+.input__label--floated {
+  font-family: var(--it--font-family);
+  font-size: var(--text--extra-small);
+  color: var(--text--primary);
+  top: var(--it__label--floating--top);
+}
+
+.input__label--disabled {
+  color: var(--it__input--disabled--color);
+}
+
+.input__label--left {
+  /*public*/
+  left: calc(var(--it__icon--width) + 2px); /*borda*/
+  width: calc(100% - var(--it__icon--width));
+}
+
+.input__label--right {
+  /*public*/
+  right: var(--it__icon--width);
+  width: calc(100% - var(--it__icon--width));
+}
+
+.input__label--left.input__label--right {
+  left: calc(var(--it__icon--width) + 2px); /*borda*/
+  width: calc(100% - var(--it__icon--width) * 2);
+}
+
+.input--with--label {
+  /*public*/
+  padding-bottom: 0;
 }