@sellmate/design-system 0.0.56 → 1.0.0

package/dist/collection/components/sd-input/sd-input.css

@@ -86,18 +86,21 @@ sd-icon .sd-icon--rotate-270 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
-.sd-date-range-picker {
+sd-date-range-picker {
   width: fit-content;
-  display: inline-block;
+  display: inline-flex;
 }
-.sd-date-range-picker .sd-date-range-picker--disabled .date-icon {
+sd-date-range-picker .sd-date-range-picker--disabled .date-icon {
   cursor: not-allowed !important;
   color: #888888 !important;
 }
-.sd-date-range-picker .sd-input .sd-input__container {
-  width: 210px;
+sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native {
+  color: #888888 !important;
+}
+sd-date-range-picker .sd-field .sd-field__control {
+  min-width: 210px;
 }
-.sd-date-range-picker .sd-input .sd-date-range-picker__input {
+sd-date-range-picker .sd-field .sd-input__native {
   margin-left: 17px !important;
 }
 
@@ -178,111 +181,51 @@ sd-icon .sd-icon--rotate-270 {
   background-color: #d8d8d8;
 }
 
-.sd-input {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  border: 1px solid #aaaaaa;
-  border-radius: 4px;
-  color: #333333;
-  font-size: 12px;
-  line-height: 20px;
-  width: var(--input-width, 100%);
-  height: 28px;
-  background: white;
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: #000;
+  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+  box-shadow: 0 0 0px 1000px #fff inset;
+  transition: background-color 5000s ease-in-out 0s;
 }
-.sd-input.sd-input--with-label:not(.sd-input--inside-label) {
-  border: none;
-}
-.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__label {
-  margin-right: 8px;
+
+input:autofill,
+input:autofill:hover,
+input:autofill:focus,
+input:autofill:active {
+  -webkit-text-fill-color: #000;
+  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
+  box-shadow: 0 0 0px 1000px #fff inset;
+  transition: background-color 5000s ease-in-out 0s;
 }
-.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container {
-  border: 1px solid #aaaaaa;
-  border-radius: 4px;
-  height: 28px;
+
+sd-input {
+  display: inline-flex;
 }
-.sd-input.sd-input--inside-label .sd-input__label {
-  background: #f6f6f6;
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+sd-input .sd-input__content {
+  width: 100%;
   height: 100%;
-  border-radius: 4px 0 0 4px;
-}
-.sd-input.sd-input--disabled {
-  cursor: not-allowed !important;
-  box-shadow: none !important;
-  border: 1px solid #cccccc !important;
-  background: #eeeeee !important;
-  color: #888888 !important;
-}
-.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label) {
-  border: none !important;
-  background: transparent !important;
-}
-.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container {
-  border: 1px solid #cccccc !important;
-  background: #eeeeee !important;
-  color: #888888 !important;
-}
-.sd-input.sd-input--disabled .sd-input__container {
-  color: #737373 !important;
-}
-.sd-input.sd-input--disabled .sd-input__container .sd-input__native_element {
-  color: #888888 !important;
-  cursor: not-allowed !important;
-}
-.sd-input--hovered, .sd-input--focused {
-  border-color: #0075ff;
-  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
-}
-.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label), .sd-input--focused.sd-input--with-label:not(.sd-input--inside-label) {
-  border-color: transparent;
-  box-shadow: none;
-}
-.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container, .sd-input--focused.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container {
-  border-color: #0075ff;
-  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
-}
-.sd-input.sd-input--error {
-  border-color: #fb4444;
-}
-.sd-input.sd-input--pass {
-  border-color: #2bce6c;
-}
-.sd-input.sd-input--barcode:not(.sd-input--disabled) {
-  background-color: #fafaa1;
-}
-.sd-input .sd-input__container {
   display: flex;
+  flex-flow: row nowrap;
   align-items: center;
-  padding: 4px 8px;
-  width: 100%;
+  color: #333333;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0 8px;
 }
-.sd-input .sd-input__container .sd-input__native_element {
-  display: block;
+sd-input .sd-input__content .sd-input__native {
   width: 100%;
-  height: 20px;
-  line-height: 20px;
+  height: 100%;
   border: none;
   outline: none;
   background: transparent;
-  font-size: inherit;
-  color: #333333;
-  margin-left: 4px;
-  margin-right: 4px;
-  padding-block: 0;
-  padding-inline: 0;
 }
-.sd-input .sd-input__container .sd-input__native_element::placeholder {
-  font-size: 12px;
-  height: 20px;
-  line-height: 20px;
-  color: #aaaaaa;
+sd-input .sd-input__content .sd-input__native[disabled] {
+  cursor: not-allowed;
+  color: #888888;
 }
-.sd-input .sd-input__container .sd-input__clear-icon {
-  cursor: pointer;
-  margin-left: 8px;
+sd-input .sd-input__content .sd-input__native::placeholder {
+  color: #aaaaaa;
 }