| Current File : /home/c/i/d/cideo/www/wp-includesVIp/js/crop/images/vc_message_box.tar |
vc_message_box_variables.less 0000666 00000013541 15126353307 0012465 0 ustar 00 //====== VARIABLES
@message-box-border-radius-rounded: 5px;
@message-box-border-radius-round: 4em;
@message-box-shadow-width-3d: 5px;
@message-box-font-size-base: 1em;
@message-box-icon-size: 1.7em;
@message-box-horizontal-padding: 1em;
@message-box-vertical-padding: 1em;
@message-box-icon-indent: 4em;
@message-box-icon-indent-reduced: 3.25em;
//====== COLORS
// alert types
//-----------------------------
// alert-info
@alert-info: #56b0ee;
@alert-info-bg: #dff2fe;
@alert-info-border: #cfebfe;
@alert-info-text: #5e7f96;
@alert-info-contrast: #fff;
// alert-success
@alert-success: #1bbc9b;
@alert-success-bg: #e6fdf8;
@alert-success-border: #cfebfe;
@alert-success-text: #5e7f96;
@alert-success-contrast: #fff;
// alert-warning
@alert-warning: #fcb53f;
@alert-warning-bg: #fff4e2;
@alert-warning-border: #ffeccc;
@alert-warning-text: #9d8967;
@alert-warning-contrast: #fff;
// alert-danger
@alert-danger: #ff7877;
@alert-danger-bg: #fdeaea;
@alert-danger-border: #fedede;
@alert-danger-text: #a85959;
@alert-danger-contrast: #fff;
// classic alerts
// ---------------------------
// alert-info-classic
@alert-info-classic: #67CCE0;
@alert-info-classic-bg: @state-info-bg;
@alert-info-classic-border: @state-info-border;
@alert-info-classic-text: @state-info-text;
@alert-info-classic-contrast: #fff;
// alert-success-classic
@alert-success-classic: #9AD36A;
@alert-success-classic-bg: @state-success-bg;
@alert-success-classic-border: @state-success-border;
@alert-success-classic-text: @state-success-text;
@alert-success-classic-contrast: #fff;
// alert-warning-classic
@alert-warning-classic: #F9CF79;
@alert-warning-classic-bg: @state-warning-bg;
@alert-warning-classic-border: @state-warning-border;
@alert-warning-classic-text: @state-warning-text;
@alert-warning-classic-contrast: #fff;
// alert-danger-classic
@alert-danger-classic: #EF8495;
@alert-danger-classic-bg: @state-danger-bg;
@alert-danger-classic-border: @state-danger-border;
@alert-danger-classic-text: @state-danger-text;
@alert-danger-classic-contrast: #fff;
// color set
// ---------------------------
// blue
@color-blue: @blue;
@color-blue-bg: lighten(@color-blue, 38%);
@color-blue-border: darken(@color-blue-bg, 10%);
@color-blue-text: darken(desaturate(@color-blue, 15%), 20%);
@color-blue-contrast: #fff;
// turquoise
@color-turquoise: @turquoise;
@color-turquoise-bg: lighten(desaturate(@color-turquoise, 20%), 55%);
@color-turquoise-border: darken(desaturate(@color-turquoise-bg, 25%), 10%);
@color-turquoise-text: darken(desaturate(@color-turquoise, 15%), 20%);
@color-turquoise-contrast: #fff;
// pink
@color-pink: @pink;
@color-pink-bg: lighten(@color-pink, 28%);
@color-pink-border: darken(@color-pink-bg, 5%);
@color-pink-text: darken(desaturate(@color-pink, 25%), 20%);
@color-pink-contrast: #fff;
// violet
@color-violet: @violet;
@color-violet-bg: lighten(@color-violet, 35%);
@color-violet-border: darken(@color-violet-bg, 10%);
@color-violet-text: darken(desaturate(@color-violet, 15%), 20%);
@color-violet-contrast: #fff;
// peacoc
@color-peacoc: @peacoc;
@color-peacoc-bg: lighten(@color-peacoc, 40%);
@color-peacoc-border: darken(@color-peacoc-bg, 10%);
@color-peacoc-text: darken(desaturate(@color-peacoc, 15%), 20%);
@color-peacoc-contrast: #fff;
// chino
@color-chino: @chino;
@color-chino-bg: lighten(@color-chino, 22%);
@color-chino-border: darken(@color-chino-bg, 10%);
@color-chino-text: darken(@color-chino, 27%);
@color-chino-contrast: #fff;
// mulled_wine
@color-mulled-wine: @mulled_wine;
@color-mulled-wine-bg: lighten(@color-mulled-wine, 60%);
@color-mulled-wine-border: darken(@color-mulled-wine-bg, 10%);
@color-mulled-wine-text: darken(@color-mulled-wine, 20%);
@color-mulled-wine-contrast: #fff;
// vista_blue
@color-vista-blue: @vista_blue;
@color-vista-blue-bg: lighten(@color-vista-blue, 28%);
@color-vista-blue-border: darken(@color-vista-blue-bg, 10%);
@color-vista-blue-text: darken(desaturate(@color-vista-blue, 15%), 25%);
@color-vista-blue-contrast: #fff;
// orange
@color-orange: @orange;
@color-orange-bg: lighten(@color-orange, 27%);
@color-orange-border: darken(@color-orange-bg, 10%);
@color-orange-text: darken(desaturate(@color-orange, 15%), 25%);
@color-orange-contrast: #fff;
// sky
@color-sky: @sky;
@color-sky-bg: lighten(@color-sky, 33%);
@color-sky-border: darken(@color-sky-bg, 10%);
@color-sky-text: darken(desaturate(@color-sky, 15%), 25%);
@color-sky-contrast: #fff;
// green
@color-green: @green;
@color-green-bg: lighten(@color-green, 47%);
@color-green-border: darken(@color-green-bg, 15%);
@color-green-text: darken(desaturate(@color-green, 15%), 20%);
@color-green-contrast: #fff;
// juicy_pink
@color-juicy-pink: @juicy_pink;
@color-juicy-pink-bg: lighten(@color-juicy-pink, 35%);
@color-juicy-pink-border: darken(@color-juicy-pink-bg, 10%);
@color-juicy-pink-text: darken(desaturate(@color-juicy-pink, 20%), 25%);
@color-juicy-pink-contrast: #fff;
// sandy_brown
@color-sandy-brown: @sandy_brown;
@color-sandy-brown-bg: lighten(@color-sandy-brown, 27%);
@color-sandy-brown-border: darken(@color-sandy-brown-bg, 10%);
@color-sandy-brown-text: darken(desaturate(@color-sandy-brown, 15%), 25%);
@color-sandy-brown-contrast: #fff;
// purple
@color-purple: @purple;
@color-purple-bg: lighten(@color-purple, 33%);
@color-purple-border: darken(@color-purple-bg, 10%);
@color-purple-text: darken(desaturate(@color-purple, 15%), 15%);
@color-purple-contrast: #fff;
// black
@color-black: @black;
@color-black-bg: lighten(@color-black, 7%);
@color-black-border: @color-black;
@color-black-text: @color-black-contrast;
@color-black-contrast: #fff;
// grey
@color-grey: @grey;
@color-grey-bg: @color-grey;
@color-grey-border: darken(@color-grey-bg, 10%);
@color-grey-text: darken(@color-grey, 40%);
@color-grey-contrast: @color-grey-text;
// white
@color-white: @white;
@color-white-bg: @color-white;
@color-white-border: darken(@color-white-bg, 10%);
@color-white-text: @color-white-contrast;
@color-white-contrast: darken(@color-white, 30%); vc_message_box_2.less 0000666 00000015707 15126353307 0010664 0 ustar 00 //====== STYLES
/* ================================
* Message box
* ================================ */
.vc_message_box {
border: 1px solid transparent;
display: block;
overflow: hidden;
margin: 0 0 @vc_margin_bottom_gold 0;
padding: @message-box-vertical-padding @message-box-horizontal-padding @message-box-vertical-padding @message-box-icon-indent;
position: relative;
font-size: @message-box-font-size-base;
.box-sizing(border-box);
> p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.vc_message_box-icon {
bottom: 0;
font-size: 1em;
font-style: normal;
font-weight: normal;
left: 0;
position: absolute;
top: 0;
width: @message-box-icon-indent;
> * {
font-size: @message-box-icon-size;
line-height: 1;
font-weight: normal;
font-style: normal;
left: 50%;
position: absolute;
top: 50%;
.translate(-50%; -50%);
}
// FontAwesome default icon size fix
> .fa {
font-size: @message-box-icon-size;
line-height: 1;
}
}
// Generating color sets
//------------------
// blue
.vc-message-make-colors-set(~'vc_color-blue'; @color-blue-text; @color-blue; @color-blue-border; @color-blue-bg; @color-blue-contrast);
// turquoise
.vc-message-make-colors-set(~'vc_color-turquoise'; @color-turquoise-text; @color-turquoise; @color-turquoise-border; @color-turquoise-bg; @color-turquoise-contrast);
// pink
.vc-message-make-colors-set(~'vc_color-pink'; @color-pink-text; @color-pink; @color-pink-border; @color-pink-bg; @color-pink-contrast);
// violet
.vc-message-make-colors-set(~'vc_color-violet'; @color-violet-text; @color-violet; @color-violet-border; @color-violet-bg; @color-violet-contrast);
// peacoc
.vc-message-make-colors-set(~'vc_color-peacoc'; @color-peacoc-text; @color-peacoc; @color-peacoc-border; @color-peacoc-bg; @color-peacoc-contrast);
// chino
.vc-message-make-colors-set(~'vc_color-chino'; @color-chino-text; @color-chino; @color-chino-border; @color-chino-bg; @color-chino-contrast);
// mulled_wine
.vc-message-make-colors-set(~'vc_color-mulled_wine'; @color-mulled-wine-text; @color-mulled-wine; @color-mulled-wine-border; @color-mulled-wine-bg; @color-mulled-wine-contrast);
// vista_blue
.vc-message-make-colors-set(~'vc_color-vista_blue'; @color-vista-blue-text; @color-vista-blue; @color-vista-blue-border; @color-vista-blue-bg; @color-vista-blue-contrast);
// orange
.vc-message-make-colors-set(~'vc_color-orange'; @color-orange-text; @color-orange; @color-orange-border; @color-orange-bg; @color-orange-contrast);
// sky
.vc-message-make-colors-set(~'vc_color-sky'; @color-sky-text; @color-sky; @color-sky-border; @color-sky-bg; @color-sky-contrast);
// green
.vc-message-make-colors-set(~'vc_color-green'; @color-green-text; @color-green; @color-green-border; @color-green-bg; @color-green-contrast);
// juicy_pink
.vc-message-make-colors-set(~'vc_color-juicy_pink'; @color-juicy-pink-text; @color-juicy-pink; @color-juicy-pink-border; @color-juicy-pink-bg; @color-juicy-pink-contrast);
// sandy_brown
.vc-message-make-colors-set(~'vc_color-sandy_brown'; @color-sandy-brown-text; @color-sandy-brown; @color-sandy-brown-border; @color-sandy-brown-bg; @color-sandy-brown-contrast);
// purple
.vc-message-make-colors-set(~'vc_color-purple'; @color-purple-text; @color-purple; @color-purple-border; @color-purple-bg; @color-purple-contrast);
// black
.vc-message-make-colors-set(~'vc_color-black'; @color-black-text; @color-black; @color-black-border; @color-black-bg; @color-black-contrast);
// grey
.vc-message-make-colors-set(~'vc_color-grey'; @color-grey-text; @color-grey; @color-grey-border; @color-grey-bg; @color-grey-contrast);
// white
.vc-message-make-colors-set(~'vc_color-white'; @color-white-text; @color-white; @color-white-border; @color-white-bg; @color-white-contrast);
// Generating message types
//------------------
// info
.vc-message-make-colors-set(~'vc_color-info'; @alert-info-text; @alert-info; @alert-info-border; @alert-info-bg; @alert-info-contrast);
// success
.vc-message-make-colors-set(~'vc_color-success'; @alert-success-text; @alert-success; @alert-success-border; @alert-success-bg; @alert-success-contrast);
// warning
.vc-message-make-colors-set(~'vc_color-warning'; @alert-warning-text; @alert-warning; @alert-warning-border; @alert-warning-bg; @alert-warning-contrast);
// danger
.vc-message-make-colors-set(~'vc_color-danger'; @alert-danger-text; @alert-danger; @alert-danger-border; @alert-danger-bg; @alert-danger-contrast);
// Generating classic message types
//------------------
// info-classic
.vc-message-make-colors-set(~'vc_color-alert-info'; @alert-info-classic-text; @alert-info-classic; @alert-info-classic-border; @alert-info-classic-bg; @alert-info-classic-contrast);
// success-classic
.vc-message-make-colors-set(~'vc_color-alert-success'; @alert-success-classic-text; @alert-success-classic; @alert-success-classic-border; @alert-success-classic-bg; @alert-success-classic-contrast);
// warning-classic
.vc-message-make-colors-set(~'vc_color-alert-warning'; @alert-warning-classic-text; @alert-warning-classic; @alert-warning-classic-border; @alert-warning-classic-bg; @alert-warning-classic-contrast);
// danger-classic
.vc-message-make-colors-set(~'vc_color-alert-danger'; @alert-danger-classic-text; @alert-danger-classic; @alert-danger-classic-border; @alert-danger-classic-bg; @alert-danger-classic-contrast);
// Color Fixes
//------------------
// black
.vc_color-black {
// Standard, Classic (Old style), 3d
&.vc_message_box {
.vc_message_box-icon {
color: @color-black-text;
}
}
// Outline (transparent background), Solid icon
&.vc_message_box-outline {
&,
.vc_message_box-icon {
color: @color-black;
}
}
// Solid icon
&.vc_message_box-solid-icon {
color: @color-black;
}
}
// grey
.vc_color-grey {
// Standard, Classic (Old style), 3d
&.vc_message_box {
.vc_message_box-icon {
color: @color-grey-text;
}
}
}
// white
.vc_color-white {
// Standard, Classic (Old style), 3d
&.vc_message_box {
.vc_message_box-icon {
color: @color-white-text;
}
}
// Outline (transparent background), Solid icon
&.vc_message_box-outline {
&,
.vc_message_box-icon {
color: @color-white;
}
}
// Solid icon
&.vc_message_box-solid-icon {
color: @color-white;
}
}
// Creating Designs
//------------------
// Standard
.vc_message_box-standard {
}
// Solid
.vc_message_box-solid {
}
// Outline (transparent background)
.vc_message_box-outline {
border-width: 2px;
}
// Classic (Old style)
.vc_message_box-classic {
}
// Solid icon
.vc_message_box-solid-icon {
&:extend(.vc_message_box-outline);
.vc_message_box-icon {
width: @message-box-icon-indent-reduced;
}
}
// 3d
.vc_message_box-3d {
}
// Creating Shapes
//------------------
// Square
.vc_message_box-square {
}
// Rounded
.vc_message_box-rounded {
border-radius: @message-box-border-radius-rounded;
}
// Round
.vc_message_box-round {
border-radius: @message-box-border-radius-round;
}
vc_message_box_front.less 0000666 00000000157 15126353307 0011644 0 ustar 00 @import "vc_message_box_variables.less";
@import "vc_message_box_mixins.less";
@import "vc_message_box_2.less"; vc_message_box_mixins.less 0000666 00000002327 15126353307 0012024 0 ustar 00 //====== MIXINS
// Creating Colors
.vc-make-message-color(@text; @icon: @text; @border: false; @background: false) {
color: @text;
& when not (@border = false) {
border-color: @border;
}
& when not (@background = false) {
background-color: @background;
}
.vc_message_box-icon {
color: @icon;
}
}
// make colors set
.vc-message-make-colors-set(@selector; @text; @icon; @border; @background; @contrast-color) {
&.@{selector} {
// Standard, Classic (Old style), 3d
&.vc_message_box {
.vc-make-message-color(@text; @icon; @border: @border; @background: @background);
}
// Solid
&.vc_message_box-solid {
.vc-make-message-color(@contrast-color; @border: transparent; @background: @icon);
}
// Outline (transparent background), Solid icon
&.vc_message_box-outline,
&.vc_message_box-solid-icon {
.vc-make-message-color(@text; @icon; @border: @icon; @background: transparent);
}
// Solid icon
&.vc_message_box-solid-icon {
.vc_message_box-icon {
color: @contrast-color;
background-color: @icon;
}
}
// 3d
&.vc_message_box-3d {
box-shadow: 0 @message-box-shadow-width-3d 0 darken(@border, 10%);
}
}
}