160 lines
3.7 KiB
Plaintext
160 lines
3.7 KiB
Plaintext
/* 1. Buttons
|
|
---------------------------------------------------------- */
|
|
.vc_btn,
|
|
a.vc_btn,
|
|
button.vc_btn {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
text-decoration: none !important;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
border: 1px solid transparent;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
// @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius
|
|
.button-size(@vc_btn_padding_vertical; @vc_btn_padding_horizontal; 100%; 20px; 4px);
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
&-lg {
|
|
// line-height: ensure even-numbered height of button next to large input
|
|
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
|
}
|
|
&-sm {
|
|
// line-height: ensure proper height of button next to small input
|
|
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
|
}
|
|
&-xs {
|
|
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
|
}
|
|
//Button design variations
|
|
&_rounded {
|
|
//default style
|
|
}
|
|
&_square {
|
|
border-radius: 0;
|
|
}
|
|
&_square_outlined {
|
|
border-radius: 0;
|
|
background: none !important;
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
border: 2px solid;
|
|
}
|
|
}
|
|
&_round {
|
|
border-radius: 25px;
|
|
}
|
|
&_outlined {
|
|
background: none !important;
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
border: 2px solid;
|
|
}
|
|
}
|
|
/* Button colors variations */
|
|
&-blue {
|
|
.vc_btn_variants(@blue, #ffffff);
|
|
}
|
|
&-turquoise {
|
|
.vc_btn_variants(@turquoise, #ffffff);
|
|
}
|
|
&-pink {
|
|
.vc_btn_variants(@pink, #ffffff);
|
|
}
|
|
&-violet {
|
|
.vc_btn_variants(@violet, #ffffff);
|
|
}
|
|
&-peacoc {
|
|
.vc_btn_variants(@peacoc, #ffffff);
|
|
}
|
|
&-chino {
|
|
.vc_btn_variants(@chino, #ffffff);
|
|
}
|
|
&-mulled_wine {
|
|
.vc_btn_variants(@mulled_wine, #ffffff);
|
|
}
|
|
&-vista_blue {
|
|
.vc_btn_variants(@vista_blue, #ffffff);
|
|
}
|
|
&-black {
|
|
.vc_btn_variants(@black, #ffffff);
|
|
}
|
|
&-grey {
|
|
.vc_btn_variants(@grey, #666666);
|
|
}
|
|
&-orange {
|
|
.vc_btn_variants(@orange, #ffffff);
|
|
}
|
|
&-sky {
|
|
.vc_btn_variants(@sky, #ffffff);
|
|
}
|
|
&-green {
|
|
.vc_btn_variants(@green, #ffffff);
|
|
}
|
|
&-juicy_pink {
|
|
.vc_btn_variants(@juicy_pink, #ffffff);
|
|
}
|
|
&-sandy_brown {
|
|
.vc_btn_variants(@sandy_brown, #ffffff);
|
|
}
|
|
&-purple {
|
|
.vc_btn_variants(@purple, #ffffff);
|
|
}
|
|
&-white {
|
|
.vc_btn_variants(@white, #666666);
|
|
}
|
|
&-grace {
|
|
.vc_btn_variants(@grace, #ffffff);
|
|
}
|
|
&-default {
|
|
.button-variant(@vc_btn_default_color; @vc_btn_default_bg; @btn-default-border);
|
|
}
|
|
&-primary {
|
|
.button-variant(@vc_btn_primary_color; @vc_btn_primary_bg; @btn-primary-border);
|
|
}
|
|
// Success appears as green
|
|
&-success {
|
|
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
|
}
|
|
// Info appears as blue-green
|
|
&-info {
|
|
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
|
}
|
|
// Warning appears as orange
|
|
&-warning {
|
|
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
|
}
|
|
// Danger and error appear as red
|
|
&-danger {
|
|
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
|
}
|
|
}
|
|
|
|
.vc_button-2-wrapper {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
&.vc_button-2-align-left {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
&.vc_button-2-align-right {
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
&.vc_button-2-align-center {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@import "../lib/wpb_icon.less";
|