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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user