form-inputs.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. .form-input {
  2. position: relative;
  3. margin: 0;
  4. background: var( --vamtam-accent-color-7 );
  5. .required {
  6. display: none;
  7. }
  8. }
  9. .main-container {
  10. input[type=text],
  11. input[type=tel],
  12. input[type=email],
  13. input[type=password],
  14. input[type=email],
  15. input[type=search],
  16. input[type=date],
  17. input[type=range],
  18. input[type=number],
  19. input[type=button],
  20. input[type=tel],
  21. textarea,
  22. select {
  23. box-sizing: border-box;
  24. padding: 15px 25px;
  25. height: auto;
  26. width: 100%;
  27. position: relative;
  28. outline: none;
  29. border: solid 1px var( --vamtam-accent-color-4 );
  30. margin: 0;
  31. color: var( --vamtam-accent-color-6 );
  32. background: var( --vamtam-main-background-background-color );
  33. margin-bottom: 10px;
  34. transition: all 0.4s;
  35. font-size: var( --vamtam-primary-font-font-size );
  36. line-height: 1.1em;
  37. border-radius: var( --vamtam-border-radius-oval );
  38. font-family: var( --vamtam-primary-font-font-family );
  39. -webkit-appearance: none;
  40. -moz-appearance: none;
  41. appearance: none;
  42. &:hover {
  43. border: 1px solid var( --vamtam-accent-color-1 );
  44. }
  45. &:focus {
  46. border: 1px solid var( --vamtam-accent-color-1 );
  47. }
  48. &.invalid {
  49. border-color: #D94729;
  50. }
  51. &:-moz-ui-invalid {
  52. border-color: #D94729;
  53. }
  54. .vamtam-main & {
  55. color: var( --vamtam-accent-color-2 );
  56. background: var( --vamtam-main-background-background-color );
  57. }
  58. }
  59. input[type=range] {
  60. padding: inherit;
  61. }
  62. textarea {
  63. border-radius: 16px;
  64. margin-bottom: 5px !important;
  65. }
  66. .vamtam-form-remove-border {
  67. input[type=text],
  68. input[type=tel],
  69. input[type=email],
  70. input[type=password],
  71. input[type=email],
  72. input[type=search],
  73. input[type=date],
  74. input[type=range],
  75. input[type=number],
  76. input[type=tel],
  77. textarea,
  78. select {
  79. border: transparent;
  80. }
  81. }
  82. input[type=button] {
  83. &:hover, &:focus {
  84. border: none;
  85. }
  86. }
  87. select {
  88. background: transparent url("data:image/svg+xml;utf8,<svg fill='black' height='25' viewBox='0 0 24 24' width='50' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right center !important;
  89. padding-right: 40px !important;
  90. margin-bottom: 10px !important;
  91. }
  92. }
  93. label {
  94. font-size: 12px;
  95. }
  96. textarea {
  97. min-height: 4em;
  98. width: 100%;
  99. position: relative;
  100. resize: none;
  101. }
  102. body .pika-single.is-bound {
  103. border-radius: var( --vamtam-border-radius );
  104. background: var( --vamtam-accent-color-5 );
  105. border: none;
  106. box-shadow: 0 1px 20px 0 rgba(0,0,0,0.08);
  107. color: var( --vamtam-accent-color-3 );
  108. table {
  109. margin: 0px;
  110. }
  111. .pika-day{
  112. display: block;
  113. transition: all 0.2s ease;
  114. border-radius: var( --vamtam-border-radius );
  115. padding: 4px 5px;
  116. font-size: 12px;
  117. border: solid 1px transparent;
  118. color: var( --vamtam-accent-color-3 );
  119. background: var( --vamtam-accent-color-5 );
  120. &:hover {
  121. color: var( --vamtam-accent-color-1-hc );
  122. background: var( --vamtam-accent-color-1 );
  123. }
  124. }
  125. .is-selected .pika-day {
  126. color: var( --vamtam-accent-color-1-hc );
  127. background: var( --vamtam-accent-color-1 );
  128. box-shadow: none;
  129. }
  130. th {
  131. color: var( --vamtam-accent-color-2 );
  132. font-size: 11px;
  133. font-weight: normal;
  134. }
  135. }
  136. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  137. background: transparent;
  138. border: 1px solid transparent;
  139. color: initial;
  140. text-align: center;
  141. }
  142. .ui-widget-content {
  143. background: transparent;
  144. }
  145. .ui-widget-header {
  146. background: transparent;
  147. border: none;
  148. font-weight: initial;
  149. .ui-icon {
  150. background: none;
  151. }
  152. }
  153. .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  154. background: none;
  155. border-color: transparent;
  156. border: none;
  157. }