assets/css/romo/forms.scss in romo-0.17.0 vs assets/css/romo/forms.scss in romo-0.17.1

@@ -24,11 +24,12 @@
   @include border1-bottom;
 }
 
 .romo-form input,
 .romo-form select,
-.romo-form textarea {
+.romo-form textarea,
+input.romo-select-dropdown-option-filter {
   font-size: 100%;
   @include rm-push;
   @include align-middle;
 }
 
@@ -40,13 +41,20 @@
     line-height: 1;
     @include align-middle;
   }
 }
 
-.romo-form input    { *overflow: visible; line-height: normal; }
-.romo-form textarea {  overflow: auto; @include align-top; }
+.romo-form input,
+input.romo-select-dropdown-option-filter {
+  *overflow: visible;
+  line-height: normal;
+}
 
+.romo-form textarea {
+  overflow: auto; @include align-top;
+}
+
 .romo-form label,
 .romo-form select,
 .romo-form input[type="button"],
 .romo-form input[type="reset"],
 .romo-form input[type="submit"],
@@ -56,11 +64,13 @@
 .romo-form input[disabled],
 .romo-form select[disabled],
 .romo-form textarea[disabled],
 .romo-form input[readonly],
 .romo-form select[readonly],
-.romo-form textarea[readonly] { cursor: $notAllowedCursor; }
+.romo-form textarea[readonly],
+input.romo-select-dropdown-option-filter[disabled],
+input.romo-select-dropdown-option-filter[readonly] { cursor: $notAllowedCursor; }
 
 .romo-form select {
   font-weight: normal;
   background-color: $inputBgColor;
   @include border1;
@@ -80,11 +90,12 @@
 .romo-form input[type="number"],
 .romo-form input[type="email"],
 .romo-form input[type="url"],
 .romo-form input[type="search"],
 .romo-form input[type="tel"],
-.romo-form input[type="color"] {
+.romo-form input[type="color"],
+input.romo-select-dropdown-option-filter {
   font-weight: normal;
   background-color: $inputBgColor;
   @include border1;
   @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
 }
@@ -102,20 +113,23 @@
 .romo-form input[type="number"]:focus,
 .romo-form input[type="email"]:focus,
 .romo-form input[type="url"]:focus,
 .romo-form input[type="search"]:focus,
 .romo-form input[type="tel"]:focus,
-.romo-form input[type="color"]:focus {
+.romo-form input[type="color"]:focus,
+input.romo-select-dropdown-option-filter:focus {
   @include input-focus;
 }
 
 .romo-form input[disabled],
 .romo-form select[disabled],
 .romo-form textarea[disabled],
 .romo-form input[readonly],
 .romo-form select[readonly],
-.romo-form textarea[readonly] { background-color: $inputDisabledColor; }
+.romo-form textarea[readonly],
+input.romo-select-dropdown-option-filter[disabled],
+input.romo-select-dropdown-option-filter[readonly] { background-color: $inputDisabledColor; }
 
 .romo-form input[type="radio"][disabled],
 .romo-form input[type="checkbox"][disabled],
 .romo-form input[type="radio"][readonly],
 .romo-form input[type="checkbox"][readonly] { background-color: transparent };
@@ -132,16 +146,21 @@
 .romo-form input[type="number"],
 .romo-form input[type="email"],
 .romo-form input[type="url"],
 .romo-form input[type="search"],
 .romo-form input[type="tel"],
-.romo-form input[type="color"] {
+.romo-form input[type="color"],
+input.romo-select-dropdown-option-filter {
   height: $inputHeight;
   line-height: $baseLineHeight;
   @include align-middle;
 }
 
+input.romo-select-dropdown-option-filter {
+  height: $inputFilterHeight;
+}
+
 .romo-form textarea,
 .romo-form input[type="text"],
 .romo-form input[type="password"],
 .romo-form input[type="datetime"],
 .romo-form input[type="datetime-local"],
@@ -152,13 +171,19 @@
 .romo-form input[type="number"],
 .romo-form input[type="email"],
 .romo-form input[type="url"],
 .romo-form input[type="search"],
 .romo-form input[type="tel"],
-.romo-form input[type="color"] {
+.romo-form input[type="color"],
+input.romo-select-dropdown-option-filter {
   display: inline-block;
   padding: 4px 6px;
   color: $inputColor;
+}
+
+input.romo-select-dropdown-option-filter {
+  display: block;
+  width: 100%;
 }
 
 .romo-form textarea,
 .romo-form select[multiple],
 .romo-form select[size] { height: auto; }