Search input and input css changes

css/structure/input.css

@@ -6,8 +6,8 @@
   --input-color: var(--grey-color);
   --input-border-radius: 6px;
   /* Size modifiers */
-  --input-padding-vertical: 20px;
+  --input-padding-vertical: 12px;
-  --input-padding-horizontal: 20px;
+  --input-padding-horizontal: 25px;
   --input-font-size: 16px;
   /* Styling */
   --input-background: transparent;
@@ -24,6 +24,7 @@
   /* Disabled */
   --input-color-disabled: var(--disable-color);
   --input-background-disabled: var(--muted-color);
+  /* Danger */
   --input-danger-color: var(--danger-color);
   /* Select arrow transform */
   --input-arrow-transform: rotate(0);
@@ -62,11 +63,15 @@
   background: var(--input-background);
   border-radius: var(--input-border-radius);
   position: relative;
-  padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
+  padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal);
   cursor: text;
   color: var(--input-color);
 }
 
+.input-box.static {
+  padding-top: var(--input-padding-vertical);
+}
+
 .input-wrapper:hover > .input-box {
   box-shadow: var(--input-shadow-hover);
   background: var(--input-background-hover);
@@ -99,7 +104,6 @@
   overflow: hidden;
   pointer-events: none;
   color: var(--input-placeholder-color);
-  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
   font-weight: var(--input-placeholder-weight);
 }
 
@@ -126,7 +130,7 @@
   position: absolute;
   font-size: var(--input-font-size);
   line-height: 24px;
-  top: calc(var(--input-padding-vertical) + 15px);
+  top: calc(var(--input-padding-vertical) + 24px);
   left: var(--input-padding-horizontal);
   transform: translateY(-50%);
   transition: all 0.5s ease 0s;
@@ -135,10 +139,9 @@
 .input-wrapper.active > .input-box > .placeholder > label,
 .input-wrapper.focused > .input-box > .placeholder > label,
 .input-wrapper.hint > .input-box > .placeholder > label {
-  top: calc(0.8 * var(--input-padding-vertical));
+  top: calc(var(--input-padding-vertical) + 13px);
   font-size: 12px;
   line-height: 18px;
-  transform: translateY(-35%);
 }
 
 /* Icon */
@@ -166,7 +169,7 @@
   background: transparent !important;
   color: inherit;
   width: 100%;
-  min-height: 32px;
+  min-height: 24px;
   line-height: inherit;
   resize: none;
   cursor: inherit;
@@ -175,6 +178,10 @@
   justify-content: center;
 }
 
+.input-wrapper:not(.focused) .input-box .input {
+  text-overflow: ellipsis;
+}
+
 .input-box textarea.input {
   margin-top: 5px;
 }
@@ -217,23 +224,17 @@
 }
 
 /** Modifiers */
-.x-small {
+.input-wrapper.inner {
-  --input-padding-horizontal: 15px;
-  --input-padding-vertical: 10px;
-  --input-font-size: 14px;
-}
-
-.inner {
   --input-shadow: var(--shadow-inset);
   --input-background: var(--light-color);
 }
 
-.flat {
+.input-wrapper.flat {
   --input-background: var(--light-color);
   --input-border: 1px solid var(--muted-color);
 }
 
-.filter {
+.input-wrapper.filter {
   --input-placeholder-color: var(--primary-color);
   --input-font-size: 14px;
   --input-padding-horizontal: 20px;
@@ -246,15 +247,37 @@
   --input-arrow-transform-active: rotate(-180deg);
 }
 
-.advanced {
+.input-wrapper.search {
+  --input-font-size: 14px;
+  --input-padding-horizontal: 30px;
+  --input-padding-vertical: 20px;
+}
+
+.input-wrapper.advanced-search {
   --input-placeholder-weight: 700;
   --input-placeholder-color: var(--grey-color);
   --input-border-radius: 54px;
   --input-padding-horizontal: 30px;
-  --input-padding-vertical: 15px;
+  --input-padding-vertical: 10px;
   --input-font-size: 14px;
   --input-background-hover: var(--muted-color);
   --input-shadow-hover: var(--shadow-main);
   --input-background-focus: var(--default-color);
   --input-shadow-focus: var(--shadow-main);
 }
+
+.input-wrapper.x-small {
+  --input-padding-horizontal: 15px;
+  --input-padding-vertical: 8px;
+  --input-font-size: 14px;
+}
+
+.input-wrapper.small {
+  --input-padding-horizontal: 20px;
+  --input-padding-vertical: 10px;
+  --input-font-size: 14px;
+}
+
+.input-wrapper.small-vertical {
+  --input-padding-vertical: 10px;
+}

css/structure/search-input.css

@@ -1,13 +1,23 @@
 .search-input {
   --search-input-shadow: none;
   --search-input-background: none;
+  --search-input-border: none;
   --search-input-border-radius: 54px;
   --search-input-icon-color: var(--secondary-color);
+  --search-input-icon-color-collapsed: var(--primary-color);
   --search-input-icon-color-disabled: var(--disable-color);
   --search-input-divider: 1px solid var(--muted-color);
+  --search-input-icon-padding: 20px;
   border-radius: var(--search-input-border-radius);
+  border: var(--search-input-border);
   box-shadow: var(--search-input-shadow);
   background: var(--search-input-background);
+  width: 100%;
+  transition: width 0.5s ease-out;
+}
+
+.search-input.collapsed {
+  width: calc(2*var(--search-input-icon-padding) + 26px);
 }
 
 .search-input .inputs > :not(:last-child) {
@@ -24,13 +34,18 @@
   border-left: var(--search-input-divider);
 }
 
-.search-input .search {
+.search-input .search-icon {
+  padding: var(--search-input-icon-padding);
   color: var(--search-input-icon-color);
   cursor: pointer;
   user-select: none;
 }
 
-.search-input .search.disabled {
+.search-input.collapsed .search-icon {
+  color: var(--search-input-icon-color-collapsed);
+}
+
+.search-input .search-icon.disabled {
   color: var(--search-input-icon-color-disabled);
   cursor: default;
   pointer-events: none;
@@ -41,3 +56,13 @@
   --search-input-background: var(--light-color);
   --search-input-shadow: var(--shadow-inset);
 }
+
+.flat {
+  --search-input-background: var(--light-color);
+  --search-input-border: 1px solid var(--muted-color);
+}
+
+.outer {
+  --search-input-background: var(--default-color);
+  --search-input-shadow: var(--shadow-button);
+}