vc_buttons.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /* 1. Buttons
  2. ---------------------------------------------------------- */
  3. .vc_btn,
  4. a.vc_btn,
  5. button.vc_btn {
  6. cursor: pointer;
  7. display: inline-block;
  8. text-decoration: none !important;
  9. -webkit-box-shadow: none;
  10. -moz-box-shadow: none;
  11. box-shadow: none;
  12. &,
  13. &:hover,
  14. &:focus {
  15. border: 1px solid transparent;
  16. -webkit-box-shadow: none;
  17. -moz-box-shadow: none;
  18. box-shadow: none;
  19. }
  20. // @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius
  21. .button-size(@vc_btn_padding_vertical; @vc_btn_padding_horizontal; 100%; 20px; 4px);
  22. // Button Sizes
  23. // --------------------------------------------------
  24. &-lg {
  25. // line-height: ensure even-numbered height of button next to large input
  26. .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
  27. }
  28. &-sm {
  29. // line-height: ensure proper height of button next to small input
  30. .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
  31. }
  32. &-xs {
  33. .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
  34. }
  35. //Button design variations
  36. &_rounded {
  37. //default style
  38. }
  39. &_square {
  40. border-radius: 0;
  41. }
  42. &_square_outlined {
  43. border-radius: 0;
  44. background: none !important;
  45. &,
  46. &:hover,
  47. &:focus {
  48. border: 2px solid;
  49. }
  50. }
  51. &_round {
  52. border-radius: 25px;
  53. }
  54. &_outlined {
  55. background: none !important;
  56. &,
  57. &:hover,
  58. &:focus {
  59. border: 2px solid;
  60. }
  61. }
  62. /* Button colors variations */
  63. &-blue {
  64. .vc_btn_variants(@blue, #ffffff);
  65. }
  66. &-turquoise {
  67. .vc_btn_variants(@turquoise, #ffffff);
  68. }
  69. &-pink {
  70. .vc_btn_variants(@pink, #ffffff);
  71. }
  72. &-violet {
  73. .vc_btn_variants(@violet, #ffffff);
  74. }
  75. &-peacoc {
  76. .vc_btn_variants(@peacoc, #ffffff);
  77. }
  78. &-chino {
  79. .vc_btn_variants(@chino, #ffffff);
  80. }
  81. &-mulled_wine {
  82. .vc_btn_variants(@mulled_wine, #ffffff);
  83. }
  84. &-vista_blue {
  85. .vc_btn_variants(@vista_blue, #ffffff);
  86. }
  87. &-black {
  88. .vc_btn_variants(@black, #ffffff);
  89. }
  90. &-grey {
  91. .vc_btn_variants(@grey, #666666);
  92. }
  93. &-orange {
  94. .vc_btn_variants(@orange, #ffffff);
  95. }
  96. &-sky {
  97. .vc_btn_variants(@sky, #ffffff);
  98. }
  99. &-green {
  100. .vc_btn_variants(@green, #ffffff);
  101. }
  102. &-juicy_pink {
  103. .vc_btn_variants(@juicy_pink, #ffffff);
  104. }
  105. &-sandy_brown {
  106. .vc_btn_variants(@sandy_brown, #ffffff);
  107. }
  108. &-purple {
  109. .vc_btn_variants(@purple, #ffffff);
  110. }
  111. &-white {
  112. .vc_btn_variants(@white, #666666);
  113. }
  114. &-grace {
  115. .vc_btn_variants(@grace, #ffffff);
  116. }
  117. &-default {
  118. .button-variant(@vc_btn_default_color; @vc_btn_default_bg; @btn-default-border);
  119. }
  120. &-primary {
  121. .button-variant(@vc_btn_primary_color; @vc_btn_primary_bg; @btn-primary-border);
  122. }
  123. // Success appears as green
  124. &-success {
  125. .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
  126. }
  127. // Info appears as blue-green
  128. &-info {
  129. .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
  130. }
  131. // Warning appears as orange
  132. &-warning {
  133. .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
  134. }
  135. // Danger and error appear as red
  136. &-danger {
  137. .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
  138. }
  139. }
  140. .vc_button-2-wrapper {
  141. display: inline-block;
  142. vertical-align: middle;
  143. &.vc_button-2-align-left {
  144. display: block;
  145. text-align: left;
  146. }
  147. &.vc_button-2-align-right {
  148. display: block;
  149. text-align: right;
  150. }
  151. &.vc_button-2-align-center {
  152. display: block;
  153. text-align: center;
  154. }
  155. }
  156. @import "../lib/wpb_icon.less";