This commit is contained in:
KhaiNguyen
2020-02-13 10:39:37 +07:00
commit 59401cb805
12867 changed files with 4646216 additions and 0 deletions

View File

@@ -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;
}
}
}
}

View File

@@ -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;
}
}
}

View File

@@ -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);
}
}

View File

@@ -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;
}

View File

@@ -0,0 +1,7 @@
// Gaps
.vc_ui-grid-gap {
> [class],
> * {
margin-bottom: @vcui-panel-header-gap;
}
}

View File

@@ -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%);
}
}
}

View File

@@ -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;
}
}

View File

@@ -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 {
}

View File

@@ -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);
}
}

View File

@@ -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;
}
}
}
}

View File

@@ -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;
}
}

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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;
}
}

View File

@@ -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;
}
}
}

View File

@@ -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;
}
}
}

View File

@@ -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;
}
}
}

View File

@@ -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;
}
}

View File

@@ -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;
}

View File

@@ -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;
}
}
}