inputs.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .cx-newsletter-container input {
  2. outline: none !important;
  3. border: none;
  4. box-shadow: none !important;
  5. font-size: 1em;
  6. text-align: center;
  7. }
  8. .cx-newsletter-container input[type="text"],
  9. .cx-newsletter-container input[type="number"],
  10. .cx-newsletter-container input[type="email"],
  11. .cx-newsletter-container input[type="password"] {
  12. border: none;
  13. border-bottom: 2px solid var(--primary-color);
  14. border-radius: 0px;
  15. background-color: var(--background-color);
  16. color: var(--secondary-color);
  17. width: 300px;
  18. max-width: 100%;
  19. transition:
  20. border-color 0.5s,
  21. transform 0.5s;
  22. }
  23. .cx-newsletter-container input[type="text"]:focus,
  24. .cx-newsletter-container input[type="number"]:focus,
  25. .cx-newsletter-container input[type="email"]:focus,
  26. .cx-newsletter-container input[type="password"]:focus {
  27. border-color: var(--secondary-color);
  28. transform: scaleX(1.1);
  29. }
  30. .cx-newsletter-container input[type="submit"],
  31. .cx-newsletter-container input[type="button"],
  32. .cx-newsletter-container a {
  33. text-decoration: none;
  34. display: block;
  35. background-color: var(--primary-color);
  36. color: var(--background-color);
  37. padding: 1em 2em;
  38. border-radius: 1em;
  39. border: none;
  40. transition:
  41. background-color 0.5s;
  42. }
  43. .cx-newsletter-container input[type="submit"]:hover,
  44. .cx-newsletter-container input[type="button"]:hover,
  45. .cx-newsletter-container a:hover {
  46. background-color: var(--secondary-color);
  47. }
  48. .cx-newsletter-container textarea {
  49. width: 90%;
  50. box-sizing: border-box;
  51. min-height: 500px;
  52. padding: 1rem;
  53. border: 3px solid var(--secondary-color);
  54. border-radius: 1rem;
  55. color: var(--font-color);
  56. background-color: inherit;
  57. transition:
  58. transform 0.5s;
  59. }
  60. .cx-newsletter-container textarea:focus {
  61. transform: scaleX(1.05);
  62. }
  63. .cx-newsletter-container input[type="checkbox"] {
  64. --margin-static: calc(300px / 2 - 20px / 2);
  65. --margin-float: calc(100% / 2 - 20px / 2);
  66. box-sizing: border-box;
  67. width: 20px;
  68. height: 20px;
  69. border: 2px solid var(--primary-color);
  70. padding: 2px;
  71. margin: 0px;
  72. margin-left: min(var(--margin-static), var(--margin-float));
  73. margin-right: min(var(--margin-static), var(--margin-float));
  74. }