You are here

background_fade.css in Better Search Block 7

Same filename and directory in other branches
  1. 8 css/background_fade.css
i.better_search {
  background: url("images/search-icon.svg") center center no-repeat;
  height: 1em;
  width: 1em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

#search-block-form {
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.form-item-search-block-form input {
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: right;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

#search-block-form .icon {
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

.form-item-search-block-form input:-webkit-input-placeholder {
  color: #65737e;
}
  
.form-item-search-block-form input:-moz-placeholder {
  color: #65737e;
}
 
.form-item-search-block-form input:-ms-input-placeholder {
  color: #65737e;
}

File

css/background_fade.css
View source
  1. i.better_search {
  2. background: url("images/search-icon.svg") center center no-repeat;
  3. height: 1em;
  4. width: 1em;
  5. font-style: normal;
  6. font-weight: normal;
  7. line-height: 1;
  8. -webkit-font-smoothing: antialiased;
  9. display: inline-block;
  10. }
  11. #search-block-form {
  12. width: 300px;
  13. vertical-align: middle;
  14. white-space: nowrap;
  15. position: relative;
  16. }
  17. .form-item-search-block-form input {
  18. width: 300px;
  19. height: 50px;
  20. background: #2b303b;
  21. border: none;
  22. font-size: 10pt;
  23. float: right;
  24. color: #63717f;
  25. padding-left: 45px;
  26. -webkit-border-radius: 5px;
  27. -moz-border-radius: 5px;
  28. border-radius: 5px;
  29. border: 1px solid #ccc;
  30. -webkit-transition: background .55s ease;
  31. -moz-transition: background .55s ease;
  32. -ms-transition: background .55s ease;
  33. -o-transition: background .55s ease;
  34. transition: background .55s ease;
  35. }
  36. #search-block-form .icon {
  37. position: absolute;
  38. top: 50%;
  39. margin-left: 17px;
  40. margin-top: 17px;
  41. z-index: 1;
  42. color: #4f5b66;
  43. }
  44. .form-item-search-block-form input:-webkit-input-placeholder {
  45. color: #65737e;
  46. }
  47. .form-item-search-block-form input:-moz-placeholder {
  48. color: #65737e;
  49. }
  50. .form-item-search-block-form input:-ms-input-placeholder {
  51. color: #65737e;
  52. }