@3t-transform/threeteeui 0.0.9 → 0.0.11

package/dist/collection/components/molecules/{tttx-input/tttx-input.css → tttx-standalone-input/tttx-standalone-input.css}

@@ -3,7 +3,7 @@
 }
 
 .material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
+  font-family: "Material Symbols Rounded", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 24px;
@@ -19,19 +19,6 @@
   color: #9e9e9e;
 }
 
-.field {
-  clear: both;
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  height: 36px;
-  border: 1px solid #c8c8c8;
-  border-radius: 4px;
-}
-
 .icon-left,
 .icon-right {
   flex-basis: 24px;
@@ -56,13 +43,14 @@
   margin-right: 4px;
 }
 
-.input {
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  padding: 8px 16px;
-  background-color: transparent;
+.icon-right {
+  margin-top: 5px;
+  margin-right: 4px;
+}
+
+.icon-left {
+  margin-top: 5px;
+  margin-left: 4px;
 }
 
 .iconleft .input {
@@ -73,29 +61,11 @@
   padding-right: 4px;
 }
 
-.label {
-  display: block;
-  font-size: 16px;
-  height: 18px;
-  font-weight: 600;
-  color: #212121;
-  font-size: 16px;
-  margin-bottom: 4px;
-  z-index: 1;
-}
-
-.disabled {
-  background: #f0f0f0;
-  color: #9e9e9e;
-  border-color: #c8c8c8;
-}
-
 .focused {
   border-color: #1479c6;
 }
 
 .errormsg {
-  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -105,10 +75,9 @@
   background-color: transparent;
   height: 26px;
   font-size: 14px;
-  color: white;
   border-radius: none;
   z-index: 2;
-  color: #DC0000;
+  color: #dc0000;
 }
 
 .errormsg .validationicon {
@@ -117,11 +86,11 @@
   font-size: 16px;
   margin-right: 4px;
   vertical-align: middle;
-  color: #DC0000;
+  color: #dc0000;
 }
 
 .danger {
-  color: #DC0000;
+  color: #dc0000;
 }
 
 .optional {
@@ -129,24 +98,80 @@
   font-weight: normal;
 }
 
-:host {
+label.inputBlock {
   display: block;
+  position: relative;
+  line-height: 21px;
 }
 
-.spacing {
-  margin-bottom: 16px;
+label {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+input:not([type=submit]) {
+  font-family: "Roboto", serif;
+  box-sizing: border-box;
+  width: 100%;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 16px;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  margin-top: 4px;
 }
 
-.errorstate {
-  border-color: #DC0000;
+/* iPhone OS fix */
+input[type=date] {
+  background: white;
+  display: block;
+  min-width: calc(100% - 18px);
+  line-height: 37px;
 }
 
-.icon-right {
-  margin-top: 5px;
+input.invalid:invalid, input.standalone.invalid {
+  border: 1px solid #dc0000;
+}
+
+input ~ .errorBubble {
+  min-height: 27px;
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  width: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #dc0000;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+input ~ .errorBubble:not(.visible) {
+  visibility: hidden;
+}
+
+input ~ .errorBubble span {
+  color: #dc0000;
+  font-size: 16px;
   margin-right: 4px;
+  height: 16px;
 }
 
-.icon-left {
-  margin-top: 5px;
-  margin-left: 4px;
+input.invalid:invalid ~ .errorBubble {
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  width: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #dc0000;
+  visibility: visible;
+}
+
+input:focus {
+  border-color: #1479c6;
+}
+
+:host {
+  display: block;
 }