khaihihi
This commit is contained in:
@@ -0,0 +1,274 @@
|
||||
@vcui-button-border: 1px;
|
||||
@vcui-button-transition-duration: .2s;
|
||||
@vcui-button-transition-properties: color, background, border, opacity, transform;
|
||||
@vcui-button-shape-rounded-radius: 3px;
|
||||
@vcui-control-button-opacity: .8;
|
||||
|
||||
// sizes
|
||||
// md size (default)
|
||||
@vcui-button-size-md-vertical: 14px;
|
||||
@vcui-button-size-md-horizontal: 21px;
|
||||
@vcui-button-size-md-font-size: 14px;
|
||||
@vcui-button-size-md-line-height: 1.4;
|
||||
@vcui-button-message-size-md-horizontal: 8px;
|
||||
|
||||
// sm size
|
||||
@vcui-button-size-sm-vertical: 8px;
|
||||
@vcui-button-size-sm-horizontal: 21px;
|
||||
@vcui-button-size-sm-font-size: 14px;
|
||||
@vcui-button-size-sm-line-height: 1.4;
|
||||
@vcui-button-message-size-md-horizontal: 8px;
|
||||
|
||||
// States
|
||||
// State default
|
||||
@vcui-button-default-color: #fff;
|
||||
@vcui-button-default-background: #bcbcbc;
|
||||
@vcui-button-message-default-color: darken(@vcui-button-default-background, 10%);
|
||||
// State success
|
||||
@vcui-button-success-color: #fff;
|
||||
@vcui-button-success-background: #7bcd2d;
|
||||
@vcui-button-message-success-color: darken(desaturate(@vcui-button-success-background, 20%), 10%);
|
||||
// State danger
|
||||
@vcui-button-danger-color: #fff;
|
||||
@vcui-button-danger-background: #ff7877;
|
||||
@vcui-button-message-danger-color: darken(desaturate(@vcui-button-danger-background, 20%), 10%);
|
||||
// State action
|
||||
@vcui-button-action-color: #fff;
|
||||
@vcui-button-action-background: #0473aa;
|
||||
@vcui-button-message-action-color: darken(desaturate(@vcui-button-action-background, 10%), 5%);
|
||||
// State info
|
||||
@vcui-button-info-color: #fff;
|
||||
@vcui-button-info-background: #00aeee;
|
||||
@vcui-button-message-info-color: darken(desaturate(@vcui-button-info-background, 20%), 10%);
|
||||
// State warning
|
||||
@vcui-button-warning-color: #fff;
|
||||
@vcui-button-warning-background: #feb710;
|
||||
@vcui-button-message-warning-color: darken(desaturate(@vcui-button-warning-background, 20%), 10%);
|
||||
|
||||
|
||||
// State disabled
|
||||
@vcui-button-disabled-color: #F3F3F3;
|
||||
@vcui-button-disabled-background: #D8D8D8;
|
||||
@vcui-button-message-disabled-color: darken(desaturate(@vcui-button-disabled-background, 10%), 5%);
|
||||
|
||||
// ui button
|
||||
.vc_general.vc_ui-button {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: @vcui-button-border solid transparent;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
transition-property: @vcui-button-transition-properties;
|
||||
transition-duration: @vcui-button-transition-duration;
|
||||
transition-timing-function: ease-in-out;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
#vc_ui-button > .make-size(
|
||||
@padding-vertical: @vcui-button-size-md-vertical;
|
||||
@padding-horizontal: @vcui-button-size-md-horizontal;
|
||||
@font-size: @vcui-button-size-md-font-size;
|
||||
);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: @vcui-button-border solid transparent;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-button {
|
||||
// shapes
|
||||
#vc_ui-button > .make-shape(~'vc_ui-button-shape-rounded'; @vcui-button-shape-rounded-radius);
|
||||
// states
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-default';
|
||||
@text: @vcui-button-default-color;
|
||||
@background: @vcui-button-default-background;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-success';
|
||||
@text: @vcui-button-success-color;
|
||||
@background: @vcui-button-success-background;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-danger';
|
||||
@text: @vcui-button-danger-color;
|
||||
@background: @vcui-button-danger-background;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-action';
|
||||
@text: @vcui-button-action-color;
|
||||
@background: @vcui-button-action-background;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-info';
|
||||
@text: @vcui-button-info-color;
|
||||
@background: @vcui-button-info-background;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-success';
|
||||
@text: @vcui-button-success-color;
|
||||
@background: @vcui-button-success-background;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-warning';
|
||||
@text: @vcui-button-warning-color;
|
||||
@background: @vcui-button-warning-background;
|
||||
);
|
||||
&[disabled]:not(.vc_ui-button-undisabled) {
|
||||
color: @vcui-button-disabled-color;
|
||||
background-color: @vcui-button-disabled-background;
|
||||
cursor: not-allowed;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @vcui-button-disabled-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//sizes
|
||||
.vc_general.vc_ui-button {
|
||||
&.vc_ui-button-size-sm {
|
||||
#vc_ui-button > .make-size(
|
||||
@padding-vertical: @vcui-button-size-sm-vertical;
|
||||
@padding-horizontal: @vcui-button-size-sm-horizontal;
|
||||
@font-size: @vcui-button-size-sm-font-size;
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ui button message
|
||||
.vc_ui-button-message {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: @vcui-button-size-md-font-size;
|
||||
// states
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-message-default';
|
||||
@text: @vcui-button-message-default-color;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-message-success';
|
||||
@text: @vcui-button-message-success-color;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-message-danger';
|
||||
@text: @vcui-button-message-danger-color;
|
||||
);
|
||||
#vc_ui-button > .make-state(
|
||||
~'vc_ui-button-message-action';
|
||||
@text: @vcui-button-message-action-color;
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// control button
|
||||
.vc_general.vc_ui-control-button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
transition-property: @vcui-button-transition-properties;
|
||||
transition-duration: @vcui-button-transition-duration;
|
||||
transition-timing-function: ease-in-out;
|
||||
opacity: @vcui-control-button-opacity;
|
||||
outline: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: @vcui-control-button-opacity;
|
||||
cursor: default;
|
||||
}
|
||||
// pixel icon behaviour
|
||||
.vc_ui-icon-pixel {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// MIXINS
|
||||
#vc_ui-button {
|
||||
// make size
|
||||
.make-size(@padding-vertical: false; @padding-horizontal: false; @font-size: false; @line-height: false) {
|
||||
& when not (@padding-vertical = false) {
|
||||
padding-top: @padding-vertical;
|
||||
padding-bottom: @padding-vertical;
|
||||
}
|
||||
& when not (@padding-horizontal = false) {
|
||||
padding-left: @padding-horizontal;
|
||||
padding-right: @padding-horizontal;
|
||||
}
|
||||
& when not (@font-size = false) {
|
||||
font-size: @font-size;
|
||||
}
|
||||
& when not (@line-height = false) {
|
||||
font-size: @line-height;
|
||||
}
|
||||
}
|
||||
|
||||
// make shape
|
||||
.make-shape(@selector; @border-radius) {
|
||||
&.@{selector} {
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// make state
|
||||
.make-state(@selector; @text: false; @background: false; @border: false) {
|
||||
&.@{selector} {
|
||||
& when not (@text = false) {
|
||||
color: @text;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (lightness(@background) > 70%) {
|
||||
background-color: darken(@background, 5%);
|
||||
}
|
||||
& when not (lightness(@background) > 70%) {
|
||||
background-color: darken(@background, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
@import 'vc_ui-list-bar.less';
|
||||
|
||||
@vcui-dropdown: 1px;
|
||||
@vcui-dropdown-font-size: 13px;
|
||||
@vc-ui-list-bar-o-bounded-rows-count: 7;
|
||||
@vc-ui-list-bar-item-trigger-width: 200px;
|
||||
|
||||
.vc_ui-dropdown {
|
||||
position: relative;
|
||||
|
||||
&.vc_active,
|
||||
&.vc_animating {
|
||||
.vc_ui-dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.vc_ui-dropdown-trigger {
|
||||
|
||||
}
|
||||
.vc_ui-dropdown-content {
|
||||
box-sizing: content-box;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
transition-property: height, padding;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 120;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
|
||||
}
|
||||
// list bar behaviour
|
||||
.vc_ui-list-bar-o-bounded {
|
||||
max-height: (@vc-ui-list-bar-item-padding-vertical * 2 + @vc-ui-list-bar-font-size) * @vc-ui-list-bar-o-bounded-rows-count;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.vc_ui-list-bar-item-trigger {
|
||||
width: @vc-ui-list-bar-item-trigger-width;
|
||||
flex: 1;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
background: #f5f5f5;
|
||||
color: #bbbaba;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-settings-button {
|
||||
.vc-c-icon-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.vc_done {
|
||||
.vc-c-icon-check {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vc-c-icon-cog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/* bootstrap reference bug */
|
||||
@import (reference)"../../config/variables.less";
|
||||
@import (reference)"../../lib/grid.less";
|
||||
|
||||
/* / bootstrap reference bug */
|
||||
|
||||
@vc_media-xs-width: 350px;
|
||||
@vc_media-sm-width: 700px;
|
||||
@vc_media-md-width: 1050px;
|
||||
@vc_media-lg-width: 1000px;
|
||||
|
||||
.vc_ui-flex-row {
|
||||
&.vc_row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&::before,
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
[class*=vc_col] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vc_make-media-grid(xs);
|
||||
.vc_make-media-grid(sm);
|
||||
.vc_make-media-grid(md);
|
||||
.vc_make-media-grid(lg);
|
||||
|
||||
.vc_float-media-grid-columns(@class) {
|
||||
// initial
|
||||
.vc_col(@index) when (@index = 1) {
|
||||
@item: ~".vc_media-@{class} .vc_col-@{class}-@{index}";
|
||||
.vc_col((@index + 1), @item);
|
||||
}
|
||||
|
||||
// general
|
||||
.vc_col(@index, @list) when (@index =< @grid-columns) {
|
||||
@item: ~".vc_media-@{class} .vc_col-@{class}-@{index}";
|
||||
.vc_col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
|
||||
// terminal
|
||||
.vc_col(@index, @list) when (@index > @grid-columns) {
|
||||
@{list} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.vc_col(1); // kickstart it
|
||||
}
|
||||
|
||||
.vc_float-media-grid-columns-rtl(@class) {
|
||||
// initial
|
||||
.vc_col-rtl(@index) when (@index = 1) {
|
||||
@item: ~"[dir=rtl] .vc_rtl-columns-reverse .vc_media-@{class} .vc_col-@{class}-@{index}";
|
||||
.vc_col-rtl((@index + 1), @item);
|
||||
}
|
||||
|
||||
// general
|
||||
.vc_col-rtl(@index, @list) when (@index =< @grid-columns) {
|
||||
@item: ~"[dir=rtl] .vc_rtl-columns-reverse .vc_media-@{class} .vc_col-@{class}-@{index}";
|
||||
.vc_col-rtl((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
|
||||
// terminal
|
||||
.vc_col-rtl(@index, @list) when (@index > @grid-columns) {
|
||||
@{list} {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.vc_col-rtl(1); // kickstart it
|
||||
}
|
||||
|
||||
.vc_make-media-grid(@class) {
|
||||
.vc_float-media-grid-columns(@class);
|
||||
.vc_float-media-grid-columns-rtl(@class);
|
||||
.vc_media-@{class} {
|
||||
.vc_loop-grid-columns(@grid-columns, @class, width);
|
||||
.vc_loop-grid-columns(@grid-columns, @class, pull);
|
||||
.vc_loop-grid-columns(@grid-columns, @class, push);
|
||||
.vc_loop-grid-columns(@grid-columns, @class, offset);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
//Fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=cyrillic,latin,greek);
|
||||
|
||||
.vc_ui-font-open-sans {
|
||||
font-family: "Open Sans", Helvetica, sans-serif!important;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// Gaps
|
||||
.vc_ui-grid-gap {
|
||||
> [class],
|
||||
> * {
|
||||
margin-bottom: @vcui-panel-header-gap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// Helpers
|
||||
@vcui-help-block-color: #929292;
|
||||
|
||||
.vc_ui-help-block {
|
||||
color: @vcui-help-block-color;
|
||||
font-style: italic;
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: darken(@vcui-help-block-color, 5%);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
&:hover {
|
||||
color: darken(@vcui-help-block-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
@vcui-icon-pixel-border: 1px;
|
||||
@vcui-icon-pixel-size-sm: 12px;
|
||||
@vcui-icon-pixel-size-md: 24px;
|
||||
|
||||
.vc_ui-icon-pixel {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-style: normal;
|
||||
font-size: 1em;
|
||||
height: 1em;
|
||||
padding-top: .5em;
|
||||
box-sizing: border-box;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
background: transparent url(../vc/editors/ui/vc_ui-icon-pixel/vc_ui-sprite.png) no-repeat;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-info {
|
||||
&::before {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background-position: -1px -1px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-close {
|
||||
&::before {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-position: -4px -28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-minimize {
|
||||
&::before {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-position: -4px -52px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-cog {
|
||||
&::before {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-position: -2px -74px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-lt-sm {
|
||||
&::before {
|
||||
height: 12px;
|
||||
width: 8px;
|
||||
background-position: -2px -96px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-gt-sm {
|
||||
&::before {
|
||||
height: 12px;
|
||||
width: 8px;
|
||||
background-position: -15px -96px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-times-sm {
|
||||
&::before {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: 0 -108px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-times-grey-sm {
|
||||
&::before {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: -1px -192px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-plus-sm {
|
||||
&::before {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-position: -12px -108px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-times {
|
||||
&::before {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background-position: -5px -125px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-check {
|
||||
&::before {
|
||||
height: 14px;
|
||||
width: 17px;
|
||||
background-position: -4px -150px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-search {
|
||||
&::before {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-position: -5px -173px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-control-plus {
|
||||
&::before {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-position: -3px -204px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.vc_ui-icon-pixel-control-edit {
|
||||
&::before {
|
||||
height: 26px;
|
||||
width: 24px;
|
||||
background-position: 0 -246px;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.vc_ui-icon-pixel-control-template {
|
||||
&::before {
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
background-position: 0 -222px;
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-control-trash-dark {
|
||||
&::before {
|
||||
height: 17px;
|
||||
width: 16px;
|
||||
background-image: url(../vc/editors/ui/vc_ui-icon-pixel/controls.png);
|
||||
background-position: -16px -64px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
.vc_ui-icon-pixel-control-search-dark {
|
||||
&::before {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background-image: url(../vc/editors/ui/vc_ui-icon-pixel/controls.png);
|
||||
background-position: -17px -97px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.vc_ui-icon-pixel-control-edit-dark {
|
||||
&::before {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-image: url(../vc/editors/ui/vc_ui-icon-pixel/controls.png);
|
||||
background-position: -16px -32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.vc_ui-icon-pixel-control-add-dark {
|
||||
&::before {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background-image: url(../vc/editors/ui/vc_ui-icon-pixel/controls.png);
|
||||
background-position: -17px -17px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.vc_ui-icon-pixel-control-triangle-desc-dark {
|
||||
&::before {
|
||||
height: 7px;
|
||||
width: 11px;
|
||||
background-image: url(../vc/editors/ui/vc_ui-icon-pixel/controls.png);
|
||||
background-position: -18px -165px;
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-icon-pixel-control-triangle-asc-dark {
|
||||
&::before {
|
||||
height: 7px;
|
||||
width: 11px;
|
||||
background-image: url(../vc/editors/ui/vc_ui-icon-pixel/controls.png);
|
||||
background-position: -18px -181px;
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@vc-ui-list-bar-border-size: 1px;
|
||||
@vc-ui-list-bar-border-color: #dbdbdb;
|
||||
@vc-ui-list-bar-background: #f5f5f5;
|
||||
@vc-ui-list-bar-background-hover: #eaeaea;
|
||||
@vc-ui-list-bar-trigger-color: #5e5e5e;
|
||||
@vc-ui-list-bar-item-padding-vertical: 10px;
|
||||
@vc-ui-list-bar-item-padding-horizontal: 10px;
|
||||
@vc-ui-list-bar-font-size: 13px;
|
||||
|
||||
|
||||
// list bar
|
||||
.vc_ui-list-bar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: @vc-ui-list-bar-border-size solid @vc-ui-list-bar-border-color;
|
||||
& + .vc_ui-list-bar {
|
||||
border-top-width: 0;
|
||||
}
|
||||
background: @vc-ui-list-bar-background;
|
||||
font-size: @vc-ui-list-bar-font-size;
|
||||
}
|
||||
.vc_ui-list-bar-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition-property: color, background;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:hover {
|
||||
background: @vc-ui-list-bar-background-hover;
|
||||
.vc_ui-list-bar-item-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_ui-list-bar-item-trigger {
|
||||
font-size: @vc-ui-list-bar-font-size;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
color: @vc-ui-list-bar-trigger-color;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
padding: @vc-ui-list-bar-item-padding-vertical @vc-ui-list-bar-item-padding-horizontal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.vc_ui-list-bar-item-actions {
|
||||
padding-left: @vc-ui-list-bar-item-padding-vertical;
|
||||
padding-right: @vc-ui-list-bar-item-padding-vertical;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
.vc_ui-list-bar-group {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// Loaders
|
||||
@vc_ui-wp-spinner-svg-src: '../vc/loaders/spinner.svg';
|
||||
@vc_ui-wp-spinner-light-svg-src: '../vc/loaders/spinner-light.svg';
|
||||
@vc_ui-wp-spinner-animation-duration: 1.08s;
|
||||
@vc_ui-wp-spinner-base-size: 16px;
|
||||
|
||||
.vc_ui-wp-spinner {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
opacity: .7;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: @vc_ui-wp-spinner-base-size;
|
||||
width: @vc_ui-wp-spinner-base-size;
|
||||
background: transparent url(@vc_ui-wp-spinner-light-svg-src) 50% 50% no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: vc_ui-wp-spinner-animation @vc_ui-wp-spinner-animation-duration linear infinite;
|
||||
}
|
||||
|
||||
&.vc_ui-wp-spinner-lg {
|
||||
&::before {
|
||||
height: @vc_ui-wp-spinner-base-size * 2;
|
||||
width: @vc_ui-wp-spinner-base-size * 2;
|
||||
}
|
||||
}
|
||||
&.vc_ui-wp-spinner-dark {
|
||||
&::before {
|
||||
background-image: url(@vc_ui-wp-spinner-svg-src);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes vc_ui-wp-spinner-animation {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
.vc_ui-panel {
|
||||
.vc_panel-tabs {
|
||||
> .vc_edit-form-tab {
|
||||
&.vc_row {
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
&::before,
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
@import "vc_ui-panel/vc_ui-panel-content.less";
|
||||
@import "vc_ui-list-bar.less";
|
||||
@import "vc_ui-icon-pixel.less";
|
||||
|
||||
@vcui-template-list-border: #e2e2e2;
|
||||
@vcui-template-list-background: #f9f9f9;
|
||||
@vcui-template-list-trigger-color: #5e5e5e;
|
||||
@vcui-template-list-trigger-color-hover: #23282d;
|
||||
|
||||
.vc_ui-template-list {
|
||||
//border: 1px solid red
|
||||
&.vc_ui-list-bar {
|
||||
border: none;
|
||||
margin-left: -@vcui-panel-content-padding-horizontal;
|
||||
margin-right: -@vcui-panel-content-padding-horizontal;
|
||||
margin-bottom: -@vcui-panel-content-padding-vertical;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item {
|
||||
border: 1px solid @vcui-template-list-border;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background-color: @vcui-template-list-background;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item-actions {
|
||||
padding-left: @vcui-panel-content-padding-horizontal;
|
||||
padding-right: @vcui-panel-content-padding-horizontal;
|
||||
}
|
||||
.vc_ui-control-button {
|
||||
padding-left: .2em;
|
||||
padding-right: .2em;
|
||||
.vc-composer-icon {
|
||||
font-size: 20px;
|
||||
margin: 0 3px;
|
||||
|
||||
&.vc-c-icon-add {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.vc-c-icon-delete_empty {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.vc_ui-wp-spinner {
|
||||
margin: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
&::before {
|
||||
&:extend(.vc_ui-wp-spinner::before);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_active, .vc_loading {
|
||||
.vc_ui-list-bar-item {
|
||||
background-color: @vcui-template-list-background;
|
||||
}
|
||||
.vc_ui-list-bar-item-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item-trigger {
|
||||
padding: @vcui-panel-content-padding-horizontal;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
transition-property: color;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
color: @vcui-template-list-trigger-color;
|
||||
&:hover {
|
||||
color: @vcui-template-list-trigger-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-preset {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:last-child:not(.vc_active) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-preset-content {
|
||||
box-sizing: content-box;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
transition-property: height, padding;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
padding: 0;
|
||||
}
|
||||
.vc_active,
|
||||
.vc_animating {
|
||||
.vc_ui-template-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#vc_ui-panel-preset {
|
||||
width: 80vw;
|
||||
max-height: 85vh;
|
||||
h3 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item-trigger {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.vc_properties-list [data-vc-panel-message] .vc_message_box {
|
||||
padding: 0em 1em 1em 4em;
|
||||
}
|
||||
|
||||
.vc_ui-panel-content-container {
|
||||
min-height: 140px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.vc_layout-panel-switcher() {
|
||||
.vc_layout-btn {
|
||||
display: inline-block;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
margin: 8px 4px 1px 0;
|
||||
color: #A0A0A0;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: #0473aa;
|
||||
}
|
||||
}
|
||||
.vc_custom-layout-btn {
|
||||
background-color: transparent;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 4px 0 3px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
[data-vc-ui-element="panel-row-layout"] {
|
||||
width: 420px;
|
||||
z-index: 100001;
|
||||
top: 90px;
|
||||
left: 50%;
|
||||
input.vc_row_layout[type="text"] {
|
||||
width: 288px;
|
||||
padding: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
.vc_layout-panel-switcher {
|
||||
.vc_layout-panel-switcher;
|
||||
}
|
||||
.vc_ui-panel-window-inner > .vc_ui-panel-content-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_general.vc_ui-button-update-layout {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
@import "vc_ui-panel/vc_ui-panel-content.less";
|
||||
@import "vc_ui-list-bar.less";
|
||||
@import "vc_ui-icon-pixel.less";
|
||||
|
||||
@vcui-template-list-border: #e2e2e2;
|
||||
@vcui-template-list-background: #f9f9f9;
|
||||
@vcui-template-list-trigger-color: #5e5e5e;
|
||||
@vcui-template-list-trigger-color-hover: #23282d;
|
||||
|
||||
.vc_ui-template-list {
|
||||
//border: 1px solid red
|
||||
&.vc_ui-list-bar {
|
||||
border: none;
|
||||
margin-left: -@vcui-panel-content-padding-horizontal;
|
||||
margin-right: -@vcui-panel-content-padding-horizontal;
|
||||
margin-bottom: -@vcui-panel-content-padding-vertical;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item {
|
||||
border: 1px solid @vcui-template-list-border;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background-color: @vcui-template-list-background;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item-actions {
|
||||
padding-left: @vcui-panel-content-padding-horizontal;
|
||||
padding-right: @vcui-panel-content-padding-horizontal;
|
||||
}
|
||||
.vc_ui-control-button {
|
||||
padding-left: .2em;
|
||||
padding-right: .2em;
|
||||
.vc-composer-icon {
|
||||
font-size: 20px;
|
||||
|
||||
&.vc-c-icon-add {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.vc_ui-wp-spinner {
|
||||
margin: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
&::before {
|
||||
&:extend(.vc_ui-wp-spinner::before);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_active, .vc_loading {
|
||||
.vc_ui-list-bar-item {
|
||||
background-color: @vcui-template-list-background;
|
||||
}
|
||||
.vc_ui-list-bar-item-actions {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-list-bar-item-trigger {
|
||||
padding: @vcui-panel-content-padding-horizontal;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
transition-property: color;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
color: @vcui-template-list-trigger-color;
|
||||
&:hover {
|
||||
color: @vcui-template-list-trigger-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-template {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:last-child:not(.vc_active) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_template-save-btn {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.vc_ui-template-content {
|
||||
box-sizing: content-box;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
transition-property: height, padding;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
padding: 0;
|
||||
}
|
||||
.vc_active,
|
||||
.vc_animating {
|
||||
.vc_ui-template-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-preview-icon {
|
||||
&:extend(.vc_ui-icon-pixel-control-triangle-desc-dark all);
|
||||
}
|
||||
.vc_active {
|
||||
.vc_ui-preview-icon {
|
||||
&:extend(.vc_ui-icon-pixel-control-triangle-asc-dark all);
|
||||
}
|
||||
.vc-c-icon-arrow_drop_down {
|
||||
&:extend(.vc-c-icon-arrow_drop_up all);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#vc_ui-panel-templates {
|
||||
width: 80vw;
|
||||
max-height: 85vh;
|
||||
// hide preview icon on mobile devices
|
||||
&:not(.vc_media-sm) {
|
||||
.vc_ui-control-button[data-vc-preview-handler] {
|
||||
display: none;
|
||||
}
|
||||
.vc_active,
|
||||
.vc_animating {
|
||||
.vc_ui-template-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
//BC:
|
||||
.vc_input-group .vc_form-control.vc_panel-templates-name {
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.vc_ui-panel {
|
||||
.vc_panel-tabs {
|
||||
[data-vc-panel-message] {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
.vc_message_box {
|
||||
padding: 0em 1em 1em 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// todo: remove this nasty important @todo 4.10
|
||||
[data-vc-template-search="true"] {
|
||||
.vc_edit-form-tab {
|
||||
display: flex !important;
|
||||
&.vc-search-result-empty {
|
||||
display: none !important;
|
||||
}
|
||||
[data-vc-hide-on-search="true"] {
|
||||
display: none;
|
||||
}
|
||||
.vc_ui-template-list.vc_ui-list-bar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.vc_ui-panel-content{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
@vcui-panel-content-padding-horizontal: 18px;
|
||||
@vcui-panel-content-padding-vertical: 18px;
|
||||
@vcui-panel-content-font-size: 14px;
|
||||
@vcui-panel-content-background: #fff;
|
||||
@vcui-panel-content-color: #5e5e5e;
|
||||
|
||||
.vc_ui-panel-content-container {
|
||||
background: @vcui-panel-content-background;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: @vcui-panel-content-font-size;
|
||||
color: @vcui-panel-content-color;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
min-height: 150px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vc_ui-panel-content {
|
||||
padding: @vcui-panel-content-padding-vertical @vcui-panel-content-padding-horizontal;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.vc_ui-content-hidden {
|
||||
.vc_ui-panel-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@import "../vc_ui-button.less";
|
||||
@import "../vc_ui-icon-pixel.less";
|
||||
|
||||
@vcui-panel-footer-padding-horizontal: 18px;
|
||||
@vcui-panel-footer-padding-vertical: 18px;
|
||||
@vcui-panel-footer-font-size: 14px;
|
||||
@vcui-panel-footer-background: #f6f6f6;
|
||||
@vcui-panel-footer-button-group-space: 6px;
|
||||
@vcui-panel-footer-button-fw: 140px;
|
||||
|
||||
.vc_ui-panel-footer-container {
|
||||
padding: @vcui-panel-footer-padding-vertical @vcui-panel-footer-padding-horizontal;
|
||||
background: @vcui-panel-footer-background;
|
||||
margin: 0;
|
||||
font-size: @vcui-panel-footer-font-size;
|
||||
}
|
||||
|
||||
.vc_ui-panel-footer {
|
||||
|
||||
// button behavior
|
||||
.vc_ui-button-group {
|
||||
margin: -@vcui-panel-footer-button-group-space/2;
|
||||
box-sizing: border-box;
|
||||
.vc_ui-button,
|
||||
.vc_ui-button-message {
|
||||
margin: @vcui-panel-footer-button-group-space/2;
|
||||
}
|
||||
}
|
||||
.vc_ui-button-fw {
|
||||
min-width: @vcui-panel-footer-button-fw;
|
||||
|
||||
.vc-c-icon-check {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
@import "../vc_ui-button.less";
|
||||
@import "../vc_ui-icon-pixel.less";
|
||||
@import "../vc_ui-dropdown.less";
|
||||
@import "../vc_ui-tabs-line.less";
|
||||
|
||||
@vcui-panel-header-font-size: 14px;
|
||||
@vcui-panel-header-padding-horizontal: 18px;
|
||||
@vcui-panel-header-padding-vertical: 14px;
|
||||
@vcui-panel-header-gap: 16px;
|
||||
@vcui-panel-header-background: #0473aa;
|
||||
@vcui-panel-header-color: #fff;
|
||||
@vcui-panel-header-heading-font-size: 20px;
|
||||
@vcui-panel-header-search-width: 200px;
|
||||
@vcui-panel-header-search-width-focus: 110%;
|
||||
@vcui-panel-header-search-color: #333;
|
||||
@vcui-panel-header-search-placeholder-color: #aaa;
|
||||
@vcui-panel-header-transition-duration: .2s;
|
||||
|
||||
.vc_ui-panel-header-container {
|
||||
padding: @vcui-panel-header-padding-vertical @vcui-panel-header-padding-horizontal;
|
||||
background: @vcui-panel-header-background;
|
||||
margin: 0;
|
||||
font-size: @vcui-panel-header-font-size;
|
||||
&.vc_ui-panel-header-o-stacked-bottom {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-panel-header {
|
||||
color: @vcui-panel-header-color;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.vc_ui-panel-header-controls {
|
||||
float: right;
|
||||
margin: 2px 0 0 12px;
|
||||
.vc_ui-dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
.vc_ui-dropdown-content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-panel-header-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vc_ui-panel-header-heading {
|
||||
flex-grow: 1;
|
||||
margin: 0 1em 0 0;
|
||||
font-size: @vcui-panel-header-heading-font-size;
|
||||
color: inherit;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
}
|
||||
.vc_ui-panel-header-actions {
|
||||
|
||||
}
|
||||
.vc_ui-panel-header-content {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.vc_ui-control-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// buttons with icons
|
||||
.vc-composer-icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
.vc-c-icon-cog {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// search box
|
||||
.vc_ui-search-box {
|
||||
width: @vcui-panel-header-search-width;
|
||||
input[type=search] {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 7px 12px 7px 32px;
|
||||
line-height: normal;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
vertical-align: middle;
|
||||
color: @vcui-panel-header-search-color;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
transition: all .2s ease-in-out;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
&:focus {
|
||||
color: @vcui-panel-header-search-color;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
.style-placeholder();
|
||||
opacity: 1;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
.style-placeholder();
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
.style-placeholder();
|
||||
}
|
||||
.style-placeholder() {
|
||||
text-overflow: ellipsis;
|
||||
line-height: inherit;
|
||||
color: @vcui-panel-header-search-placeholder-color;
|
||||
font-size: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.vc_ui-search-box-input {
|
||||
position: relative;
|
||||
label {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
transition-property: color;
|
||||
transition-duration: @vcui-panel-header-transition-duration;
|
||||
transition-timing-function: ease-in-out;
|
||||
cursor: pointer;
|
||||
color: #BFC2C8;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
input[type=search]:focus + label {
|
||||
cursor: default;
|
||||
color: #7F8591;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
@vcui-panel-window-font-size: 14px;
|
||||
@vcui-panel-window-frame-size: 7px;
|
||||
@vcui-panel-window-frame-color: transparent;
|
||||
@vcui-panel-window-main-background: #fff;
|
||||
@vcui-panel-window-main-color: #5e5e5e;
|
||||
|
||||
.vc_ui-panel-window {
|
||||
box-sizing: content-box;
|
||||
font-size: @vcui-panel-window-font-size;
|
||||
padding: @vcui-panel-window-frame-size;
|
||||
background: @vcui-panel-window-frame-color;
|
||||
}
|
||||
|
||||
.vc_ui-panel-window-inner {
|
||||
background: @vcui-panel-window-main-background;
|
||||
color: @vcui-panel-window-main-color;
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, .25);
|
||||
position: relative;
|
||||
max-height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
flex-basis: 100%;
|
||||
> .vc_ui-panel-header-container,
|
||||
> .vc_ui-panel-footer-container {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
> .vc_ui-panel-content-container {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// minimized window
|
||||
.vc_ui-panel-window {
|
||||
&.vc_minimized {
|
||||
&:not(.vc_animating) {
|
||||
.vc_ui-panel-header-content,
|
||||
.vc_ui-panel-content-container,
|
||||
.vc_ui-panel-footer-container {
|
||||
display: none;
|
||||
}
|
||||
.vc_ui-minimize-button {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_animating {
|
||||
.vc_ui-panel-window-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
&:not(.vc_minimized) {
|
||||
.vc_ui-minimize-button {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.vc_ui-panel-window {
|
||||
box-sizing: border-box !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
max-height: none !important;
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
padding: 5vh 5vw !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
&.vc_active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
// don't allow minimizing on mobile
|
||||
.vc_ui-minimize-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// always unminimized on mobile
|
||||
.vc_ui-panel-header-content,
|
||||
.vc_ui-panel-content-container,
|
||||
.vc_ui-panel-footer-container {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@import "../vc_ui-fonts.less";
|
||||
@import "../vc_ui-panel/vc_ui-panel-window.less";
|
||||
@import "../vc_ui-panel/vc_ui-panel-header.less";
|
||||
@import "../vc_ui-panel/vc_ui-panel-content.less";
|
||||
@import "../vc_ui-panel/vc_ui-panel-footer.less";
|
||||
@import "../vc_ui-panel/vc_ui-panel-footer.less";
|
||||
@import "../vc_ui-prompt.less";
|
||||
@import "../vc_ui-gaps.less";
|
||||
@import "../vc_ui-flex-bootstrap.less";
|
||||
|
||||
@vcui-panel-width: 650px;
|
||||
|
||||
.vc_ui-panel {
|
||||
display: none;
|
||||
&.vc_ui-panel-window {
|
||||
width: @vcui-panel-width;
|
||||
position: fixed;
|
||||
z-index: 50000;
|
||||
top: 74px;
|
||||
left: 50%;
|
||||
}
|
||||
&.vc_active {
|
||||
display: flex;
|
||||
}
|
||||
.panel-body {
|
||||
padding: 0;
|
||||
}
|
||||
.vc_panel-tabs {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.vc_layout-onion {
|
||||
width: 350px;
|
||||
flex-grow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Loaders behaviour
|
||||
.vc_ui-panel {
|
||||
.vc_ui-panel-content > .vc_ui-wp-spinner {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
@vcui-prompt-font-size: 14px;
|
||||
@vcui-prompt-background: #f5f5f5;
|
||||
@vcui-prompt-border: #dbdbdb;
|
||||
@vcui-prompt-color: #5e5e5e;
|
||||
@vcui-prompt-padding: 15px;
|
||||
@vcui-prompt-size: 16px;
|
||||
@vcui-prompt-gap: 18px;
|
||||
@vcui-prompt-xs-width: 258px;
|
||||
@vcui-prompt-sm-width: 395px;
|
||||
|
||||
.vc_ui-prompt {
|
||||
font-size: @vcui-prompt-font-size;
|
||||
box-sizing: content-box;
|
||||
overflow: hidden;
|
||||
transition-property: opacity;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
|
||||
background-color: @vcui-prompt-background;
|
||||
color: @vcui-prompt-color;
|
||||
padding: @vcui-prompt-padding;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.vc_visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_media-xs {
|
||||
.vc_ui-prompt {
|
||||
width: @vcui-prompt-xs-width;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_media-sm {
|
||||
.vc_ui-prompt {
|
||||
width: @vcui-prompt-sm-width;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-prompt-controls {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
.vc_ui-prompt-close {
|
||||
height: @vcui-prompt-size;
|
||||
width: @vcui-prompt-size;
|
||||
line-height: @vcui-prompt-size;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
right: -3px;
|
||||
}
|
||||
.vc_ui-icon-pixel {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-prompt-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -@vcui-prompt-gap/2;
|
||||
margin-right: -@vcui-prompt-gap/2;
|
||||
}
|
||||
|
||||
.vc_ui-prompt-column {
|
||||
padding-left: @vcui-prompt-gap/2;
|
||||
padding-right: @vcui-prompt-gap/2;
|
||||
&:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.vc_ui-button {
|
||||
.vc-composer-icon {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// behaviours
|
||||
.vc_ui-dropdown {
|
||||
.vc_ui-prompt {
|
||||
position: absolute;
|
||||
}
|
||||
.vc_ui-button {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Presets full width
|
||||
.vc_ui-prompt {
|
||||
&.vc_ui-prompt-presets, &.vc_ui-prompt-templates, &.vc_ui-prompt-view-presets {
|
||||
display: none;
|
||||
&.vc_visible {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc(~'100% - 30px');
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
background: #FFF;
|
||||
box-shadow: none;
|
||||
}
|
||||
.vc_ui-prompt-controls {
|
||||
float: none;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
.vc_ui-control-button {
|
||||
font-size: 30px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_ui-control-button {
|
||||
&.vc_hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-notice .vc_message_box.vc_message_box-standard p.messagebox_text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vc_ui-notice .vc_message_box.vc_message_box-standard {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
@vcui-tabs-line-border: 1px;
|
||||
@vcui-tabs-line-border-radius: 5px;
|
||||
@vcui-tabs-line-font-size: 14px;
|
||||
@vcui-tabs-line-padding-horizontal: 12px;
|
||||
@vcui-tabs-line-padding-vertical: 16px;
|
||||
@vcui-tabs-line-active-background: #fff;
|
||||
@vcui-tabs-line-hover-background: rgba(0, 0, 0, .1);
|
||||
@vcui-tabs-line-active-color: #5e5e5e;
|
||||
@vcui-tabs-line-transition-duration: .2s;
|
||||
@vcui-tabs-line-transition-properties: color, background, border;
|
||||
|
||||
@vcui-tabs-line-dropdown-z-index: 1010;
|
||||
@vcui-tabs-line-dropdown-max-width: 300px;
|
||||
@vcui-tabs-line-dropdown-border-size: 1px;
|
||||
@vcui-tabs-line-dropdown-border-color: #dbdbdb;
|
||||
@vcui-tabs-line-dropdown-background: #f5f5f5;
|
||||
@vcui-tabs-line-dropdown-background-hover: #eaeaea;
|
||||
@vcui-tabs-line-dropdown-trigger-color: #5e5e5e;
|
||||
@vcui-tabs-line-dropdown-trigger-padding-vertical: 10px;
|
||||
@vcui-tabs-line-dropdown-trigger-padding-horizontal: 10px;
|
||||
@vcui-tabs-line-dropdown-font-size: 12px;
|
||||
@vcui-tabs-line-dropdown-o-bounded-rows-count: 7;
|
||||
|
||||
.vc_general.vc_ui-tabs-line {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
> .vc_ui-tabs-line-dropdown-toggle {
|
||||
float: right;
|
||||
}
|
||||
.vc_ui-tabs-line-trigger {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-transform: none;
|
||||
border: @vcui-tabs-line-border solid transparent;
|
||||
font-size: @vcui-tabs-line-font-size;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-family: inherit;
|
||||
padding: @vcui-tabs-line-padding-vertical @vcui-tabs-line-padding-horizontal;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
transition-property: @vcui-tabs-line-transition-properties;
|
||||
transition-duration: @vcui-tabs-line-transition-duration;
|
||||
transition-timing-function: ease-in-out;
|
||||
border-radius: @vcui-tabs-line-border-radius @vcui-tabs-line-border-radius 0 0;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: @vcui-tabs-line-border solid transparent;
|
||||
background-color: @vcui-tabs-line-hover-background;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
> .vc_active {
|
||||
> .vc_ui-tabs-line-trigger {
|
||||
background-color: @vcui-tabs-line-active-background;
|
||||
color: @vcui-tabs-line-active-color;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-tabs-line .vc_ui-tabs-line-dropdown-toggle {
|
||||
position: absolute;
|
||||
float: right;
|
||||
visibility: hidden;
|
||||
&.vc_visible {
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
}
|
||||
> .vc_ui-tabs-line-trigger {
|
||||
&::after {
|
||||
content: '. . .';
|
||||
font-weight: 600;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
> .vc_ui-tabs-line-trigger {
|
||||
background-color: @vcui-tabs-line-hover-background;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ui-tabs-line .vc_ui-tabs-line-dropdown {
|
||||
position: absolute;
|
||||
z-index: @vcui-tabs-line-dropdown-z-index;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
transition-property: height, padding;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
max-width: @vcui-tabs-line-dropdown-max-width;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
|
||||
background: @vcui-tabs-line-dropdown-background;
|
||||
border: @vcui-tabs-line-dropdown-border-size solid @vcui-tabs-line-dropdown-border-color;
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&.vc_active,
|
||||
&.vc_animating {
|
||||
display: block;
|
||||
}
|
||||
.vc_ui-tabs-line-trigger {
|
||||
padding: @vcui-tabs-line-dropdown-trigger-padding-vertical @vcui-tabs-line-dropdown-trigger-padding-horizontal;
|
||||
border-radius: 0;
|
||||
font-size: @vcui-tabs-line-dropdown-font-size;
|
||||
color: @vcui-tabs-line-dropdown-trigger-color;
|
||||
&:hover {
|
||||
background-color: @vcui-tabs-line-dropdown-background-hover;
|
||||
}
|
||||
}
|
||||
.vc_active {
|
||||
.vc_ui-tabs-line-trigger {
|
||||
background-color: @vcui-tabs-line-dropdown-background-hover;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// initializing
|
||||
.vc_ui-tabs-line {
|
||||
opacity: 1;
|
||||
transition: opacity @vcui-tabs-line-transition-duration ease-in-out;
|
||||
&.vc_initializing {
|
||||
transition: opacity 0ms;
|
||||
opacity: 0;
|
||||
> li:not(:first-child):not(.vc_ui-tabs-line-dropdown-toggle) {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
/* 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";
|
||||
@@ -0,0 +1,69 @@
|
||||
.vc_fullscreen {
|
||||
.vc_fullscreen-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vc_windowed-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#post-body-content,
|
||||
#screen-meta-links,
|
||||
#postbox-container-1,
|
||||
.ui-sortable-handle:not(.vc_control),
|
||||
.handlediv,
|
||||
.wrap > h1,
|
||||
.wrap > .notice,
|
||||
.postbox,
|
||||
#wpfooter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#poststuff #post-body.columns-2 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#wpbody-content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#poststuff {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
margin-left: 16px;
|
||||
padding-top: @vc_navbar_height;
|
||||
}
|
||||
|
||||
.vc_save-backend {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vc_navbar {
|
||||
padding-left: 40px;
|
||||
position: fixed;
|
||||
z-index: 9980;
|
||||
width: 100%;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.vc_fullscreen {
|
||||
#wpcontent {
|
||||
margin-left: 0;
|
||||
padding-top: @vc_navbar_height;
|
||||
}
|
||||
|
||||
.vc_navbar {
|
||||
padding-left: 0;
|
||||
top: 46px; // #wpadminbar height
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.vc_helper {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
.box-sizing(border-box);
|
||||
z-index: 1006;
|
||||
position: absolute;
|
||||
padding: 4px 15px 4px 30px;
|
||||
border: 1px solid @vc_controls_border;
|
||||
background-color: @vc_controls_background;
|
||||
.border-top-radius(3px);
|
||||
.border-bottom-radius(3px);
|
||||
vertical-align: middle;
|
||||
color: #FFFFFF;
|
||||
font-size: 9px;
|
||||
@import '../lib/elements_icons.less';
|
||||
.vc_element-icon {
|
||||
display: inline-block;
|
||||
margin: 0 8px 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.vc_helper-vc_row {
|
||||
border: 1px solid #285A85;
|
||||
background-color: #285A85;
|
||||
}
|
||||
&.vc_helper-vc_column {
|
||||
border: 1px solid #F9B418;
|
||||
background-color: #F9B418;
|
||||
}
|
||||
&-tab {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.vc_message {
|
||||
display: none;
|
||||
position: fixed;
|
||||
.box-sizing(border-box);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
top: 56px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #CCCCCC;
|
||||
color: #000000;
|
||||
&.success, &.type-success {
|
||||
background: #d8edc7;
|
||||
border-bottom: 1px solid #cae1b7;
|
||||
color: #8A987E;
|
||||
}
|
||||
&.error, &.type-error {
|
||||
background: #EBE4C7;
|
||||
border-bottom: 1px solid #DDD2B3;
|
||||
color: #938D7C;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel-message {
|
||||
display: none;
|
||||
z-index: 100000;
|
||||
position: absolute;
|
||||
.box-sizing(border-box);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
top: 38px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #CCCCCC;
|
||||
color: #000000;
|
||||
&.type-success {
|
||||
background: #d8edc7;
|
||||
border-bottom: 1px solid #cae1b7;
|
||||
color: #8A987E;
|
||||
}
|
||||
&.type-error {
|
||||
background: #EBE4C7;
|
||||
border-bottom: 1px solid #DDD2B3;
|
||||
color: #938D7C;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/** VC Modal block popup */
|
||||
.add_element_size(@counter, @max_width: 1330px) when (@counter >= 0) {
|
||||
.add_element_size((@counter - 1), (@max_width - @vc_add_element_button_width));
|
||||
@media (min-width: @max_width) {
|
||||
.vc_modal-dialog {
|
||||
width: (10px + @vc_add_element_width + @counter * @vc_add_element_button_width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_modal {
|
||||
display: none;
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
background-color: transparent !important;
|
||||
z-index: @vc_zindex_modal !important;
|
||||
&.fade .vc_modal-dialog {
|
||||
.translate(0, -25%);
|
||||
.transition-transform(~"0.3s ease-out");
|
||||
}
|
||||
&.in .vc_modal-dialog {
|
||||
.translate(0, 0)
|
||||
}
|
||||
*, & {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
}
|
||||
|
||||
.add_element_size(4);
|
||||
|
||||
.vc_modal-content {
|
||||
position: relative;
|
||||
background-color: @modal-content-bg;
|
||||
.box-shadow(0 3px 9px rgba(0, 0, 0, .5));
|
||||
background-clip: padding-box;
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
-webkit-border-radius: @vc_modal_content_radius;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid @vc_modal_content_border_color;
|
||||
}
|
||||
|
||||
.vc_modal-header {
|
||||
.vc_box-heading;
|
||||
}
|
||||
|
||||
.vc_modal-title {
|
||||
.modal-title;
|
||||
.vc_heading(16px);
|
||||
cursor: default;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.vc_modal-body {
|
||||
.modal-body;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.vc_modal-footer {
|
||||
.modal-footer;
|
||||
}
|
||||
|
||||
// Default bootstrap classes for modal box
|
||||
.modal-open {
|
||||
.modal-open;
|
||||
}
|
||||
|
||||
.clousus {
|
||||
z-index: @zindex-modal-background;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
.modal-backdrop;
|
||||
}
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
.modal-scrollbar-measure;
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
@vcui-navbar-transition-duration: .2s;
|
||||
@vcui-navbar-transition-function: ease-in-out;
|
||||
|
||||
.vc_navbar {
|
||||
.box-sizing(border-box);
|
||||
min-height: @vc_navbar_height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
|
||||
margin: @vc_navbar_margin;
|
||||
border: 0;
|
||||
// Prevent floats from breaking the navbar
|
||||
&:extend(.clearfix all);
|
||||
* {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
.vc_navbar-collapse {
|
||||
padding: 0;
|
||||
}
|
||||
background-color: @vc_navbar_background_color;
|
||||
border-bottom: none;
|
||||
.vc_navbar-nav {
|
||||
display: block;
|
||||
margin: 0;
|
||||
> li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
a {
|
||||
}
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_navbar-brand {
|
||||
.navbar-brand();
|
||||
font-size: 0;
|
||||
background: transparent url(@vcui_navbar_logo) center center no-repeat;
|
||||
background-size: 36px;
|
||||
display: block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 27px 30px 27px 35px;
|
||||
&.vc_ui-wp-spinner {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
&.vc_navbar-frontend {
|
||||
.vc_navbar-brand {
|
||||
&.vc_ui-wp-spinner {
|
||||
&::before {
|
||||
background-image: url(@vc_ui-wp-spinner-light-svg-src);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_last {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.vc_right-space {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.vc_icon-btn {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: @vc_navbar_height;
|
||||
padding: 28px 30px;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
|
||||
position: relative;
|
||||
font-size: 22px;
|
||||
&[disabled] {
|
||||
.opacity(0.2);
|
||||
}
|
||||
&:not([disabled]):hover {
|
||||
background-color: @vc_navbar_icon_btn_color_hover;
|
||||
}
|
||||
&:not([disabled]):focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vc-composer-icon, .vc_navbar-icon {
|
||||
color: @vc_navbar_icon_color;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
.translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.vc_open {
|
||||
> a, > a:focus {
|
||||
background-color: @vc_navbar_background_color;
|
||||
}
|
||||
}
|
||||
.vc_btn-backend-editor {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.vc_btn-save {
|
||||
margin-left: 2px;
|
||||
&-draft {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
.vc_back-button {
|
||||
font-size: 26px;
|
||||
padding: 20px 23px;
|
||||
}
|
||||
.vc_post-settings {
|
||||
font-size: 20px;
|
||||
}
|
||||
.vc_windowed-button {
|
||||
display: none;
|
||||
}
|
||||
.vc_badge-custom-css {
|
||||
display: block;
|
||||
background-color: #fcb714;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 31px;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
border-radius: 4px;
|
||||
padding: 2px 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
.vc_save-backend {
|
||||
display: none;
|
||||
.vc_control-preview {
|
||||
margin-right: 0;
|
||||
}
|
||||
.vc_control-save {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.vc_dropdown {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
.vc_dropdown-toggle {
|
||||
transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
|
||||
cursor: default;
|
||||
display: block;
|
||||
width: 68px;
|
||||
height: 56px;
|
||||
line-height: 16px;
|
||||
padding: 19px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.vc_current-layout-icon {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.vc-c-icon-arrow_drop_down {
|
||||
color: #FFFFFF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.vc_dropdown-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 55px;
|
||||
// left: 0px;
|
||||
background: @vc_navbar_icon_btn_color_hover;
|
||||
// border: 1px solid #1e5072;
|
||||
// border-width: 0 1px 1px 1px;
|
||||
padding-top: 1px;
|
||||
.border-bottom-radius(3px);
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
|
||||
background-color: transparent;
|
||||
width: 68px;
|
||||
height: 37px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
.translate(-50%, -50%);
|
||||
}
|
||||
&:hover {
|
||||
background-color: #00aef0;
|
||||
}
|
||||
&.active {
|
||||
background-color: #00aef0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.vc_dropdown-toggle {
|
||||
background-color: @vc_navbar_icon_btn_color_hover;
|
||||
}
|
||||
.vc_dropdown-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.vc-c-icon-layout_landscape-smartphones {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons in navbars
|
||||
//
|
||||
// Vertically center a button within a navbar (when *not* in a form).
|
||||
|
||||
.vc_navbar-btn {
|
||||
transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
|
||||
.navbar-vertical-align(@input-height-base);
|
||||
margin-left: 21px;
|
||||
margin-right: 21px;
|
||||
&.vc_btn-sm {
|
||||
.navbar-vertical-align(@input-height-small);
|
||||
}
|
||||
&.vc_btn-xs {
|
||||
.navbar-vertical-align(22);
|
||||
}
|
||||
}
|
||||
|
||||
.vc_subnav-fixed {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
z-index: 9980;
|
||||
width: 100%;
|
||||
padding-left: @vc_navbar_fixed_right_padding;
|
||||
.vc_save-backend {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.folded {
|
||||
.vc_subnav-fixed {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.auto-fold {
|
||||
.vc_subnav-fixed {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.vc_navbar li, .navbar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vc_navbar li.vc_show-mobile {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vc_navbar-nav {
|
||||
float: left;
|
||||
margin: 0;
|
||||
&.navbar-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_navbar-header {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vc_navbar {
|
||||
padding-left: 0;
|
||||
position: fixed;
|
||||
z-index: 9980;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 46px; // #wpadminbar height
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
padding-top: @vc_navbar_height;
|
||||
}
|
||||
|
||||
.auto-fold {
|
||||
.vc_subnav-fixed {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_navbar-border-right {
|
||||
border-right: 1px solid @vc_navbar_border_color;
|
||||
}
|
||||
|
||||
.vc_dropdown-menu {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.vc_navbar-header {
|
||||
.navbar-header();
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vc_navbar-collapse {
|
||||
.navbar-collapse();
|
||||
}
|
||||
|
||||
.vc_select-navbar {
|
||||
margin: 12.5px 21px;
|
||||
}
|
||||
|
||||
#vc_navbar-redo, #vc_navbar-undo {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
@vc_panel-width: 700px;
|
||||
|
||||
.vc_input-group {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
|
||||
.vc_form-control {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.vc_input-group-btn {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel {
|
||||
.panel;
|
||||
width: @vc_panel-width;
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
top: 74px;
|
||||
left: 50%;
|
||||
// height: auto !important;
|
||||
min-height: 150px;
|
||||
.panel-body {
|
||||
padding: 0;
|
||||
}
|
||||
display: none;
|
||||
border-color: #DDDDDD;
|
||||
}
|
||||
|
||||
.vc_panel-body {
|
||||
.panel-body;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.vc_with-tabs {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel-heading {
|
||||
.vc_box-heading;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.vc_panel-footer {
|
||||
.panel-footer;
|
||||
box-sizing: border-box;
|
||||
.vc_btn-default {
|
||||
&:hover {
|
||||
border-color: #CCC;
|
||||
}
|
||||
&:focus {
|
||||
background-color: #FFF; // TODO: check
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel-title {
|
||||
.panel-title;
|
||||
.vc_heading(16px);
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.vc_properties-list {
|
||||
//padding: 10px 16px;
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px 6px;
|
||||
margin: 0;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
padding: 8px 24px 8px 6px;
|
||||
margin: 0;
|
||||
}
|
||||
select {
|
||||
height: auto;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-left: 5px;
|
||||
margin-right: 2px;
|
||||
display: inline-block;
|
||||
&:nth-child(2) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel-tabs {
|
||||
> .vc_edit-form-tabs-menu {
|
||||
margin: 38px 0 10px;
|
||||
// margin-top 38px comes from panel-heading.OuterHeight
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; // fixes firefox bug!
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #e6e6e6;
|
||||
.vc_edit-form-tab-control {
|
||||
display: list-item;
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 9px 2px 0 0; // see border-bottom-width: 0
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
.transition(background-color 0.5s ease-out);
|
||||
color: #949494;
|
||||
.vc_edit-form-link {
|
||||
color: #949494;
|
||||
float: left;
|
||||
padding: 11px 15px;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
background: #ffffff;
|
||||
font-weight: normal;
|
||||
color: #595959;
|
||||
a {
|
||||
color: #595959;
|
||||
}
|
||||
}
|
||||
&.vc_tab-color-animated {
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
}
|
||||
> :first-child {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
> .vc_edit-form-tab {
|
||||
display: none;
|
||||
&.vc_active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel-tabs {
|
||||
> .vc_panel-tabs-menu {
|
||||
margin: 38px 0 10px;
|
||||
// margin-top 38px comes from panel-heading.OuterHeight
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; // fixes firefox bug!
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #e6e6e6;
|
||||
.vc_panel-tabs-control {
|
||||
display: list-item;
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 9px 2px 0 0; // see border-bottom-width: 0
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
.transition(background-color 0.5s ease-out);
|
||||
color: #949494;
|
||||
.vc_panel-tabs-link {
|
||||
color: #949494;
|
||||
float: left;
|
||||
padding: 11px 15px;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
background: #ffffff;
|
||||
font-weight: normal;
|
||||
color: #595959;
|
||||
a {
|
||||
color: #595959;
|
||||
}
|
||||
}
|
||||
&.vc_panel-tabs-color-animated {
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
}
|
||||
> :first-child {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
> .vc_panel-tab {
|
||||
display: none;
|
||||
padding: 10px 15px;
|
||||
&.vc_active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_panel-opacity {
|
||||
height: 38px !important;
|
||||
overflow: hidden !important;
|
||||
min-height: 0; // fixes min-height problem in frontend
|
||||
&.vc_shortcode-edit-form {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.vc_panel-footer, .vc_panel-body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_description {
|
||||
color: #999999;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
line-height: 20px;
|
||||
margin-top: 8px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.vc_google_fonts_form_field-preview-wrapper {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.vc_google_fonts_form_field-preview-container {
|
||||
> span {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.vc_placeholder {
|
||||
width: 100% !important;
|
||||
background: transparent url(@vc_placeholder_pattern);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
&-row {
|
||||
padding: 0;
|
||||
margin: 0 0 35px 0;
|
||||
background: transparent url(@vc_placeholder_pattern);
|
||||
height: 50px;
|
||||
}
|
||||
&-column {
|
||||
background: transparent url(@vc_placeholder_pattern);
|
||||
float: left;
|
||||
}
|
||||
&-tab {
|
||||
background: transparent url(@vc_placeholder_pattern);
|
||||
}
|
||||
}
|
||||
|
||||
.vc_param_group-list {
|
||||
.vc_placeholder {
|
||||
height: 24px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
#vc_preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
//z-index: 1031;
|
||||
z-index: 50021; // gutenberg modal
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #FFF url(../vc/logo/wpb-logo.svg) center center no-repeat;
|
||||
background-size: 72px;
|
||||
.opacity(0.95);
|
||||
}
|
||||
#vc_overlay_spinner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 50021; // gutenberg modal
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #FFF;
|
||||
background-size: 72px;
|
||||
.opacity(0.95);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
.composer-switch {
|
||||
// WPBakery Page Builder/Classic Editor switch
|
||||
cursor: default;
|
||||
.box-sizing(border-box);
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 27px;
|
||||
border-radius: 4px;
|
||||
|
||||
a, a:visited {
|
||||
transition: background-color .2s ease-in-out;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
display: inline-block;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
padding: 8px 13px;
|
||||
background-color: #0073aa;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
||||
&.wpb_switch-to-composer {
|
||||
&:hover {
|
||||
background-color: #0d3d63;
|
||||
}
|
||||
}
|
||||
&.wpb_switch-to-front-composer {
|
||||
background-color: #0073aa;
|
||||
|
||||
&:hover {
|
||||
background-color: #0d3d63;
|
||||
}
|
||||
}
|
||||
|
||||
&.wpb_switch-to-gutenberg {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #bcbcbc;
|
||||
margin-top: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: #afafaf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
background: #0073aa url(../vc/logo/wpb-logo-white.svg) no-repeat center center;
|
||||
background-size: 16px;
|
||||
width: 16px;
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 8px 10px 8px 13px;
|
||||
}
|
||||
.vc_spacer {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
background-color: #1f5b8c;
|
||||
margin: 0;
|
||||
height: 28px;
|
||||
padding: 4px 0;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> :nth-last-child(2) {
|
||||
margin-right: 10px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.composer-inner-switch {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin: 10px 10px 0 0;
|
||||
vertical-align: top;
|
||||
|
||||
> :first-child {
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-post-header-toolbar {
|
||||
.composer-switch {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
|
||||
.wpb_switch-to-gutenberg {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.composer-inner-switch {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
padding: 1px 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.vc_table {
|
||||
.table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.vc_table-bordered {
|
||||
.table-bordered;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
#vc_teaser {
|
||||
.vc_teaser-constructor {
|
||||
display: none;
|
||||
.vc_toolbar {
|
||||
margin-top: 6px;
|
||||
text-align: center;
|
||||
.vc_teaser-checkbox {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
height: 26px;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
label {
|
||||
|
||||
float: left;
|
||||
width: auto;
|
||||
input {
|
||||
margin-right: 0px;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
}
|
||||
span {
|
||||
text-align: center;
|
||||
display: block;
|
||||
border: 1px solid #CCCCCC;
|
||||
padding: 2px 6px 1px;
|
||||
-webkit-border-radius: @vc_teaser_checkbox_radius;
|
||||
-moz-border-radius: @vc_teaser_checkbox_radius;
|
||||
border-radius: @vc_teaser_checkbox_radius;
|
||||
background: rgb(255, 255, 255); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 70%, rgba(241, 241, 241, 1) 100%, rgba(246, 246, 246, 1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(241, 241, 241, 1)), color-stop(100%, rgba(246, 246, 246, 1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 70%, rgba(241, 241, 241, 1) 100%, rgba(246, 246, 246, 1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 70%, rgba(241, 241, 241, 1) 100%, rgba(246, 246, 246, 1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 70%, rgba(241, 241, 241, 1) 100%, rgba(246, 246, 246, 1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 70%, rgba(241, 241, 241, 1) 100%, rgba(246, 246, 246, 1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); /* IE6-9 */
|
||||
}
|
||||
input:checked + span {
|
||||
background: #FFF;
|
||||
box-shadow: inset 1px 1px 1px 1px #DDDDDD;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
input:hover + span {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_teaser_loading_block {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
.vc_teaser-control {
|
||||
position: relative;
|
||||
min-height: 20px;
|
||||
padding: 4px;
|
||||
border: 1px dashed #CCC;
|
||||
margin-bottom: 4px;
|
||||
.vc_text {
|
||||
word-break: break-all;
|
||||
}
|
||||
.vc_image-featured {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
.vc_teaser_add_custom_image,
|
||||
.vc_image-featured {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.vc_buttons {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.vc_link-controls {
|
||||
margin-top: 4px;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
a.vc_active, a.vc_active-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
.vc_move {
|
||||
background: url("../vc/drag_handler.gif") no-repeat center center #FCF8E3;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
@import "ui/vc_ui-fonts.less";
|
||||
@import "ui/vc_ui-button.less";
|
||||
@import "ui/vc_ui-helper.less";
|
||||
@import "ui/vc_ui-icon-pixel.less";
|
||||
|
||||
@vc-welcome-border: rgba(125, 125, 125, 0.40);
|
||||
@vc-welcome-margin: 14px;
|
||||
@vc-welcome-base-font-size: 14px;
|
||||
@vc-welcome-gap: 20px;
|
||||
@vc-welcome-header-font-size: 36px;
|
||||
@vc-welcome-header-line-height: 1em;
|
||||
@vc-welcome-header-font-color: #656565;
|
||||
|
||||
|
||||
.vc_welcome {
|
||||
margin: @vc-welcome-margin;
|
||||
font-size: @vc-welcome-base-font-size;
|
||||
text-align: center;
|
||||
padding: @vc-welcome-gap;
|
||||
|
||||
// buttons behavior
|
||||
.vc_ui-btn-group {
|
||||
margin-top: @vc-welcome-gap;
|
||||
margin-bottom: @vc-welcome-gap;
|
||||
}
|
||||
.vc_ui-button {
|
||||
margin: @vc-welcome-gap / 2;
|
||||
margin-bottom: 0;
|
||||
min-width: 190px;
|
||||
text-transform: capitalize;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
text-decoration: none !important;
|
||||
align-items: center;
|
||||
|
||||
.vc-composer-icon {
|
||||
font-size: 21px;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
}
|
||||
// icon behaviour
|
||||
.vc_ui-icon-pixel {
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_welcome-brand {
|
||||
margin-top: @vc-welcome-gap;
|
||||
margin-bottom: @vc-welcome-gap * 1.5;
|
||||
text-align: center;
|
||||
img {
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_welcome-header {
|
||||
font-weight: 300;
|
||||
font-size: @vc-welcome-header-font-size;
|
||||
line-height: @vc-welcome-header-line-height;
|
||||
color: @vc-welcome-header-font-color;
|
||||
text-transform: uppercase;
|
||||
margin-top: @vc-welcome-gap;
|
||||
margin-bottom: @vc-welcome-gap * 2;
|
||||
}
|
||||
|
||||
.vc_add-element-not-empty-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
width: 39px;
|
||||
height: 38px;
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: #C9C9C9;
|
||||
cursor: pointer;
|
||||
border: none !important;
|
||||
.border-radius(5px);
|
||||
.transition(background-color 0.5s);
|
||||
&:hover {
|
||||
background-color: #E4E4E4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.vc-composer-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
.translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// not empty state
|
||||
.vc_welcome {
|
||||
&.vc_not-empty {
|
||||
border: 1px dashed @vc-welcome-border;
|
||||
.vc_welcome-visible-e {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:not(.vc_not-empty) {
|
||||
.vc_welcome-visible-ne {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// editors behaviour
|
||||
.vc_editor.compose-mode {
|
||||
.vc_welcome {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// media behaviour
|
||||
@media screen and (max-width: @screen-sm) {
|
||||
.vc_welcome {
|
||||
.vc_ui-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user