_forms.css.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. form {
  2. input[type=text], input[type=password], textarea, input[type=email] {
  3. margin: 5px;
  4. font-size: 1em;
  5. /* padding: 25px 15px; */
  6. height: 34px;
  7. color: #404040;
  8. background: white;
  9. border: 1px solid;
  10. border-color: #c4c4c4 #d1d1d1 #d4d4d4;
  11. border-radius: 2px;
  12. outline: 5px solid #eff4f7;
  13. -moz-outline-radius: 3px;
  14. -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  15. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  16. margin-bottom: 25px;
  17. width: 99%; /* all browsers */
  18. width: -moz-calc(100% - 10px); /* Firefox 4+ */
  19. width: calc(100% - 10px); /* IE9+ and future browsers */
  20. /*
  21. Crashing Safari
  22. width: -webkit-calc(100% - 10px);
  23. @include experimental-value(width, calc(100% - 10px));
  24. */
  25. }
  26. :-moz-placeholder {
  27. color: #c9c9c9 !important;
  28. font-size: 15px;
  29. }
  30. ::-webkit-input-placeholder {
  31. color: #ccc;
  32. font-size: 15px;
  33. }
  34. .input.select {
  35. select {
  36. -moz-appearance: none;
  37. text-indent: 0.01px;
  38. text-overflow: '';
  39. background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>");
  40. background-color:#EFF4F7;
  41. background-repeat:no-repeat;
  42. background-position: right 10px top 15px;
  43. background-size: 16px 16px;
  44. color: #333 !important;
  45. padding:6px;
  46. padding-right: 40px;
  47. width:auto;
  48. font-size:16px;
  49. font-weight:bold;
  50. color:#fff;
  51. text-align:center;
  52. border-radius:3px;
  53. -webkit-border-radius:3px;
  54. -webkit-appearance: none;
  55. -ms-appearance: none;
  56. -o-appearance: none;
  57. appearance: none;
  58. border: 1px solid #D4D4D4;
  59. outline:0;
  60. -webkit-transition:0.3s ease all;
  61. -moz-transition:0.3s ease all;
  62. -ms-transition:0.3s ease all;
  63. -o-transition:0.3s ease all;
  64. transition:all0.3s ease all;
  65. &:hover {
  66. cursor: pointer;
  67. }
  68. }
  69. }
  70. }