_contact.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. .contact.page {
  2. #content_box {
  3. article {
  4. section.links {
  5. @include span(first 3);
  6. @include breakpoint(max-width $bp-middle) {
  7. @include span(6)
  8. }
  9. }
  10. section.form {
  11. @include span(last 3);
  12. @include breakpoint(max-width $bp-middle) {
  13. @include span(full)
  14. }
  15. p.contact_thanks {
  16. background: hsl(120, 50, 95);
  17. color: hsl(120, 80, 25);
  18. padding: 0.5em $base-line-height/2;
  19. @include border-radius($corner-radius);
  20. }
  21. p.meanwhile {
  22. padding: 0.5em $base-line-height/2;
  23. }
  24. .field {
  25. display: block;
  26. width: 100%;
  27. padding-bottom: $base-line-height;
  28. label {
  29. display: block;
  30. color: adjust-lightness($link-color, 25);
  31. }
  32. input, textarea {
  33. @include border-radius($corner-radius);
  34. padding: 0 0 0 0.25em;
  35. display: block;
  36. width: span(full);
  37. height: $base-line-height;
  38. font-size: em(16px);
  39. font-family: "Open Sans", sans-serif;
  40. border: 0;
  41. border-bottom: 2px solid hsl(210, 50, 50);
  42. background: hsl(210, 50, 98);
  43. @include breakpoint(max-width $bp-middle) {
  44. width: span(full split);
  45. }
  46. }
  47. textarea {
  48. min-height: 5*$base-line-height;
  49. max-width: span(full);
  50. }
  51. input:focus, textarea:focus {
  52. outline: none;
  53. }
  54. input.invalid, textarea.invalid {
  55. border-bottom: 2px solid hsl(210, 50, 50);
  56. background: hsl(210, 50, 98);
  57. }
  58. input.valid, textarea.valid {
  59. border-bottom: 2px solid hsl(210, 50, 50);
  60. background: white;
  61. }
  62. }
  63. .button {
  64. text-align: right;
  65. button {
  66. background: hsl(210, 50, 45);
  67. font-weight: bold;
  68. @include border-radius($corner-radius);
  69. color: white;
  70. border: 0;
  71. font-size: 1em;
  72. line-height: 2.5em;
  73. padding: 0 0.75em 0.1em 0.5em;
  74. .fa {
  75. padding-right: 0.25em;
  76. }
  77. &:disabled {
  78. background: adjust-lightness($link-color, 30);
  79. }
  80. }
  81. }
  82. }
  83. }
  84. }
  85. }