form.less 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. @import "../modules/ui/vc_ui-tabs-line.less";
  2. @vc_wp-form-gap: 30px;
  3. @vc_wp-form-help-color: #757272;
  4. @vc_wp-form-heading-background: #ffffff;
  5. @vc_wp-form-content-background: #f9f9f9;
  6. @vc_wp-form-border: #e5e5e5;
  7. @vc_wp-form-links-separator-color: #176898;
  8. @vc_wp-form-padding: .8em .8em;
  9. @vc_wp-form-media-xs: (@vc_wp-form-media-sm/2);
  10. @vc_wp-form-media-sm: 783px;
  11. @vc_wp-form-media-md: 1121px;
  12. /* WP Form */
  13. .vc_wp-form-help-block {
  14. font-style: italic;
  15. color: @vc_wp-form-help-color;
  16. font-weight: 400;
  17. font-size: 1em;
  18. }
  19. .vc_wp-form-dropdown {
  20. }
  21. .vc_wp-form-fieldset {
  22. margin-bottom: @vc_wp-form-gap;
  23. .vc_wp-form-legend {
  24. font-weight: 600;
  25. margin-top: 1em;
  26. margin-bottom: 1em;
  27. + .vc_wp-form-help-block {
  28. margin-top: -1em;
  29. margin-bottom: 1em;
  30. }
  31. }
  32. }
  33. .vc_wp-form-checkbox,
  34. .vc_wp-form-radio {
  35. display: block;
  36. //padding-bottom: .3em;
  37. }
  38. .vc_general.vc_wp-form-table {
  39. width: 100%;
  40. border-collapse: collapse;
  41. border: 1px solid @vc_wp-form-border;
  42. th {
  43. font-weight: 600;
  44. vertical-align: middle;
  45. }
  46. th,
  47. td {
  48. border-bottom: 1px solid @vc_wp-form-border;
  49. text-align: left;
  50. padding: @vc_wp-form-padding;
  51. display: table-cell;
  52. &:first-child {
  53. width: 50%;
  54. }
  55. select {
  56. width: 100%;
  57. }
  58. }
  59. thead,
  60. tfoot {
  61. th {
  62. background-color: @vc_wp-form-heading-background;
  63. label {
  64. white-space: nowrap;
  65. font-weight: 400;
  66. }
  67. }
  68. }
  69. tbody {
  70. th,
  71. td {
  72. background-color: @vc_wp-form-content-background;
  73. label {
  74. visibility: hidden;
  75. input {
  76. visibility: visible;
  77. }
  78. }
  79. }
  80. tr:hover {
  81. th,
  82. td {
  83. background-color: darken(@vc_wp-form-content-background, 2%);
  84. label {
  85. visibility: visible;
  86. }
  87. }
  88. }
  89. }
  90. // checkbox behaviour
  91. .vc_wp-form-checkbox,
  92. .vc_wp-form-radio {
  93. &,
  94. input {
  95. margin: 0;
  96. padding: 0;
  97. }
  98. }
  99. // link block behaviour
  100. + .vc_wp-form-link-block {
  101. text-align: right;
  102. }
  103. }
  104. .vc_wp-form-row {
  105. @vc_wp-form-gap: 30px;
  106. margin-left: -@vc_wp-form-gap / 2;
  107. margin-right: -@vc_wp-form-gap / 2;
  108. &::after{
  109. content: ' ';
  110. display: table;
  111. clear: both;
  112. }
  113. .vc_wp-form-col {
  114. box-sizing: border-box;
  115. display: block;
  116. padding-left: @vc_wp-form-gap / 2;
  117. padding-right: @vc_wp-form-gap / 2;
  118. }
  119. // media
  120. @media (min-width: @vc_wp-form-media-xs) {
  121. .vc_wp-form-col {
  122. width: 50%;
  123. float: left;
  124. }
  125. }
  126. @media (min-width: @vc_wp-form-media-sm) {
  127. .vc_wp-form-col {
  128. width: 33.333%;
  129. }
  130. }
  131. @media (min-width: @vc_wp-form-media-md) {
  132. .vc_wp-form-col {
  133. width: 25%;
  134. }
  135. }
  136. }
  137. .vc_wp-form-link-block {
  138. a {
  139. display: inline-block;
  140. text-decoration: none;
  141. padding: .3em .5em;
  142. position: relative;
  143. &:first-child {
  144. padding-left: 0;
  145. }
  146. &:last-child {
  147. padding-right: 0;
  148. }
  149. &:not(:first-child) {
  150. &::before {
  151. content: '';
  152. display: block;
  153. position: absolute;
  154. left: -1px;
  155. top: 50%;
  156. height: 1.2em;
  157. margin-top: -.6em;
  158. border-left: 1px solid @vc_wp-form-links-separator-color;
  159. }
  160. }
  161. }
  162. }
  163. /* Tabs line */
  164. .vc_wp-settings {
  165. .vc_ui-tabs-line {
  166. margin-left: 0;
  167. margin-right: 0;
  168. position: relative;
  169. top: 1px;
  170. > .vc_active {
  171. > .vc_ui-tabs-line-trigger {
  172. border-top-color: @vc_wp-form-border;
  173. border-left-color: @vc_wp-form-border;
  174. border-right-color: @vc_wp-form-border;
  175. }
  176. }
  177. }
  178. }