mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
986 lines
21 KiB
986 lines
21 KiB
|
|
$app-prefix: 'wte-';
|
|
$nv-prefix: $app-prefix + 'nv-';
|
|
$rte-prefix: $app-prefix + 'rte-';
|
|
$comp-prefix: $app-prefix + 'comp-';
|
|
$mdl-prefix: $app-prefix + 'mdl-';
|
|
$am-prefix: $app-prefix + 'am-';
|
|
$cm-prefix: $app-prefix + 'cm-';
|
|
$pn-prefix: $app-prefix + 'pn-';
|
|
$com-prefix: $app-prefix + 'com-';
|
|
$sm-prefix: $app-prefix + 'sm-';
|
|
$cv-prefix: $app-prefix + 'cv-';
|
|
$mainColor: #444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
|
|
$mainDkColor: darken($mainColor, 4%);/*#383838*/
|
|
$mainLhColor: lighten($mainColor, 5%);/*#515151*/
|
|
$fontColor: #eee; /*l: #d8d7db*/
|
|
$fontColorDk: #777;
|
|
$mainFont: Helvetica, sans-serif;
|
|
$colorBlue: #3b97e3;
|
|
$colorRed: #DD3636;
|
|
$colorYell: #ffca6f;
|
|
$colorGreen: #62c462;
|
|
|
|
$imageCompDim: 50px;
|
|
|
|
@mixin user-select($v) {
|
|
-moz-user-select: $v;
|
|
-khtml-user-select: $v;
|
|
-webkit-user-select:$v;
|
|
-ms-user-select: $v;
|
|
-o-user-select: $v;
|
|
user-select: $v;
|
|
}
|
|
|
|
@mixin opacity($v) {
|
|
opacity: $v;
|
|
$opacity-ie: $v * 100;
|
|
filter: alpha(opacity=$opacity-ie);
|
|
}
|
|
|
|
@mixin appearance($v){
|
|
-webkit-appearance: $v;
|
|
-moz-appearance: $v;
|
|
appearance: $v;
|
|
}
|
|
|
|
.#{$app-prefix}test {
|
|
|
|
&::btn { color: '#fff';}
|
|
|
|
&input {}
|
|
|
|
&header {}
|
|
}
|
|
.opac50{
|
|
@include opacity(0.50);
|
|
}
|
|
.checker-bg{
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
|
|
}
|
|
|
|
/********************* MAIN ************************/
|
|
body{
|
|
background-color: $fontColor;
|
|
font-family: $mainFont;
|
|
margin: 0;
|
|
}
|
|
html,body,#wte-app, .#{$app-prefix}editor{ height: 100%; }
|
|
.clear{ clear:both }
|
|
.no-select{
|
|
@include user-select(none);
|
|
}
|
|
#wte-app{
|
|
height: 100%;
|
|
min-width: 1250px;
|
|
}
|
|
.#{$app-prefix}editor{
|
|
position:relative;
|
|
border: 3px solid $mainColor;
|
|
border-left:none;
|
|
border-right:none;
|
|
box-sizing: border-box;
|
|
}
|
|
/************* CANVAS ****************/
|
|
.#{$cv-prefix}canvas {
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 100%;
|
|
top: 0; left: 3.5%;
|
|
overflow: auto;
|
|
z-index:1;
|
|
|
|
> div {
|
|
height: 100%;
|
|
overflow: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.#{$cv-prefix}canvas *{box-sizing: border-box;}
|
|
|
|
.btn-cl {
|
|
font-size: 25px;
|
|
@include opacity(0.3);
|
|
cursor: pointer;
|
|
&:hover{
|
|
@include opacity(0.7);
|
|
}
|
|
}
|
|
/************* RTE ****************/
|
|
#commands.panel {
|
|
min-width: 35px;
|
|
height: 100%;
|
|
z-index:3;
|
|
}
|
|
#options.panel{ z-index:4; bottom: 0;}
|
|
#views.panel {
|
|
width: 16.5%;
|
|
font-weight: lighter;
|
|
color: $fontColor;
|
|
right:0; top:0;
|
|
z-index: 3;
|
|
height: 100%;
|
|
padding:0;
|
|
}
|
|
#views.panel .c{height:100%}
|
|
#commands.panel, #options.panel {width: 3.5%; left:0;}
|
|
#options .c { display: table; margin: 0 auto; }
|
|
|
|
/*********TEST**********/
|
|
body.dragging, body.dragging * { cursor: move !important;}
|
|
.dragged {
|
|
position: absolute;
|
|
@include opacity(0.50);
|
|
z-index: 2000;}
|
|
ol.example li.placeholder {position: relative;}
|
|
ol.example li.placeholder:before {position: absolute;}
|
|
/*********END-TEST**********/
|
|
|
|
.no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; }
|
|
|
|
|
|
/********* COMMANDS **********/
|
|
|
|
.#{$com-prefix}dashed div {
|
|
outline: 1px dashed #888;
|
|
outline-offset: -2px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body .#{$cv-prefix}canvas .selected-component{//TODO
|
|
outline: 3px solid $colorBlue;
|
|
}
|
|
|
|
div.#{$com-prefix}hover { outline: 1px solid $colorBlue; }
|
|
|
|
div.#{$com-prefix}hover-delete{
|
|
outline: 2px solid $colorRed;
|
|
@include opacity(0.50);
|
|
}
|
|
div.#{$com-prefix}hover-move{
|
|
outline: 3px solid $colorYell;
|
|
}
|
|
.#{$com-prefix}badge{
|
|
pointer-events: none;
|
|
background-color: $colorBlue;
|
|
color: #fff;
|
|
padding: 2px 5px;
|
|
position: absolute; z-index: 1;
|
|
font-size: 12px;
|
|
}
|
|
.#{$com-prefix}badge-red{
|
|
@extend .#{$com-prefix}badge;
|
|
background-color: $colorRed;
|
|
}
|
|
.#{$com-prefix}badge-yellow{
|
|
@extend .#{$com-prefix}badge;
|
|
background-color: $colorYell;
|
|
}
|
|
.#{$com-prefix}placeholder{
|
|
position: absolute;
|
|
}
|
|
.#{$com-prefix}placeholder-int{
|
|
background-color: $colorGreen;
|
|
height: 100%; width: 100%;
|
|
pointer-events: 'none';
|
|
padding: 2px;
|
|
}
|
|
|
|
/********* PANELS **********/
|
|
|
|
$leftWidth: 16.5%;
|
|
|
|
.#{$pn-prefix}panel {
|
|
background-color: $mainColor;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
z-index:3;
|
|
|
|
&##{$pn-prefix}commands{
|
|
min-width: 35px;
|
|
height: 100%;
|
|
width: 3.5%; left:0;
|
|
}
|
|
|
|
&##{$pn-prefix}options{
|
|
@extend ##{$pn-prefix}commands;
|
|
bottom: 0;
|
|
height: auto;
|
|
}
|
|
|
|
&##{$pn-prefix}views{
|
|
border-bottom: 2px solid darken($mainColor, 3%);
|
|
right: 0;
|
|
width: $leftWidth;
|
|
z-index: 4;
|
|
}
|
|
|
|
&##{$pn-prefix}views-container{
|
|
height: 100%;
|
|
padding: 50px 0 0;
|
|
right: 0;
|
|
width: $leftWidth;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.#{$pn-prefix}btn{
|
|
box-sizing: border-box;
|
|
height: 35px; width: 35px;
|
|
line-height: 35px;
|
|
background-color: transparent;
|
|
border:none;
|
|
color: $fontColor;
|
|
font-size: 25px;
|
|
margin-bottom: 5px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
padding: 0 5px;
|
|
position: relative;
|
|
|
|
&.#{$pn-prefix}active{
|
|
background-color: $mainDkColor;
|
|
box-shadow: 0 0 3px darken($mainDkColor,5%) inset;
|
|
}
|
|
|
|
> .#{$pn-prefix}arrow-rd {
|
|
border-bottom: 5px solid $fontColor;
|
|
border-left: 5px solid transparent;
|
|
bottom: 2px; right: 2px;
|
|
position: absolute;
|
|
}
|
|
|
|
> .#{$pn-prefix}buttons{
|
|
background-color: $mainColor;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
display: none;
|
|
left: 50px;
|
|
top: 0;
|
|
padding: 5px;
|
|
|
|
&.#{$pn-prefix}visible{ display: block; }
|
|
|
|
> .#{$pn-prefix}arrow-l {
|
|
border-bottom: 5px solid transparent;
|
|
border-right: 5px solid $mainColor;
|
|
border-top: 5px solid transparent;
|
|
left: -5px; top: 15px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************* Navigator *************/
|
|
|
|
.#{$nv-prefix}opac50{
|
|
@include opacity(0.50);
|
|
}
|
|
.#{$nv-prefix}navigator{
|
|
position:relative;
|
|
height: 100%;
|
|
##{$nv-prefix}placeholder{
|
|
width: 100%;
|
|
position: absolute;
|
|
##{$nv-prefix}plh-int{
|
|
height: 100%;
|
|
padding: 1px;
|
|
&.#{$nv-prefix}insert{
|
|
background-color: $colorGreen;
|
|
}
|
|
}
|
|
}
|
|
.#{$nv-prefix}item {
|
|
color: $fontColor;
|
|
font-weight: lighter;
|
|
text-align: left;
|
|
position: relative;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.#{$nv-prefix}item.#{$nv-prefix}hide {
|
|
@include opacity(0.55);
|
|
}
|
|
.#{$nv-prefix}item ##{$nv-prefix}counter {
|
|
font-size: 10px;
|
|
position: absolute;
|
|
right: 27px;
|
|
top: 9px;
|
|
}
|
|
.#{$nv-prefix}item ##{$nv-prefix}btn-eye{
|
|
@extend .btn;
|
|
height: auto !important; width: auto !important;
|
|
font-size: 13px;
|
|
left: 0; top: 0;
|
|
padding: 7px 5px 7px 10px;
|
|
position: absolute;
|
|
color: darken($fontColor,25%);
|
|
cursor:pointer;
|
|
z-index: 1;
|
|
}
|
|
.#{$nv-prefix}item .#{$nv-prefix}title {
|
|
font-size: 11px;
|
|
padding: 7px 10px 7px 30px;
|
|
}
|
|
.#{$nv-prefix}item ##{$nv-prefix}caret {
|
|
font-size: 7px;
|
|
width: 8px;
|
|
}
|
|
}
|
|
.#{$nv-prefix}item .#{$nv-prefix}title {
|
|
background-color: $mainDkColor;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
padding: 7px 10px 7px 25px;
|
|
text-shadow: 0 1px 0 darken($mainDkColor,8%);/*#252525*/
|
|
border-bottom: 1px solid darken($mainDkColor,4%);/*#303030*/
|
|
border-top: 1px solid lighten($mainDkColor,3%);/*#414141*/
|
|
cursor:pointer;
|
|
}
|
|
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
|
|
border-left: 1px solid lighten($mainDkColor,2%);
|
|
}
|
|
.#{$nv-prefix}item > .#{$nv-prefix}children {
|
|
margin-left: 15px;
|
|
display: none;
|
|
}
|
|
.#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; }
|
|
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
|
|
.#{$nv-prefix}item > ##{$nv-prefix}move {
|
|
color: darken($fontColor,50%);
|
|
position: absolute;
|
|
cursor: move;
|
|
font-size: 12px;
|
|
right: 0; top: 0;
|
|
padding: 7px 10px 7px 5px;
|
|
}
|
|
.#{$nv-prefix}item{
|
|
&.#{$nv-prefix}selected{
|
|
border: 2px solid $colorBlue;
|
|
}
|
|
}
|
|
|
|
/************* END Navigator *************/
|
|
|
|
/* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
|
|
.btn.expand{ background-image: none;}
|
|
.tempComp{
|
|
background-color: #5b5b5b;
|
|
border: 2px dashed #ccc;
|
|
outline:none !important;
|
|
position: absolute; z-index: 55;
|
|
opacity:0.55;
|
|
filter: alpha(opacity=55);
|
|
}
|
|
|
|
/*********** Components *************/
|
|
|
|
.#{$comp-prefix}image-placeholder {
|
|
display: block;
|
|
background-color: #f5f5f5;
|
|
color: $fontColorDk;
|
|
height: $imageCompDim; width: $imageCompDim;
|
|
line-height: $imageCompDim;
|
|
outline: 3px solid $colorYell;
|
|
outline-offset: -3px;
|
|
text-align: center;
|
|
font-size: $imageCompDim/3;
|
|
cursor: pointer;
|
|
|
|
&.fa-picture-o::after{
|
|
content: "\f03e";
|
|
}
|
|
}
|
|
/*********** END Components *************/
|
|
|
|
|
|
/********* Style Manager **********/
|
|
|
|
$darkBorder: darken($mainDkColor,4%); /*303030*/
|
|
$lightBorder: lighten($mainDkColor,3%); /*414141*/
|
|
$darkTextShadow: darken($mainDkColor,8%); /*#252525*/
|
|
$inputFontColor: darken($fontColor,10%); /*#d5d5d5*/
|
|
$arrowColor: darken($fontColor,24%); /*b1b1b1*/
|
|
|
|
.#{$sm-prefix}close-btn{
|
|
display:block;
|
|
font-size: 23px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 5px;
|
|
top: 0;
|
|
@include opacity(0.2);
|
|
|
|
&:hover{ @include opacity(0.7); }
|
|
}
|
|
.#{$sm-prefix}sector {
|
|
clear:both;
|
|
border-bottom: 1px solid $darkBorder;
|
|
color: $fontColor;
|
|
font-weight: lighter;
|
|
text-align:left;
|
|
|
|
.#{$sm-prefix}title{
|
|
background-color: $mainDkColor;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
padding: 12px 10px 12px 25px;
|
|
text-shadow: 0 1px 0 $darkTextShadow;
|
|
border-bottom: 1px solid $darkBorder;
|
|
border-top: 1px solid $lightBorder;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.#{$sm-prefix}label {
|
|
margin: 5px 5px 2px 0;
|
|
}
|
|
/*------------------Field--------------------*/
|
|
.#{$sm-prefix}field {
|
|
width: 100%;
|
|
position:relative;
|
|
|
|
input {
|
|
box-sizing: border-box;
|
|
color: $inputFontColor;
|
|
background:none; border:none;
|
|
padding: 3px 21px 3px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
select {
|
|
background: none; border: none;
|
|
color: $inputFontColor;
|
|
color: transparent;
|
|
width: 100%; padding: 2px 0;
|
|
text-shadow: 0 0 0 $inputFontColor;
|
|
position: relative;
|
|
z-index:1;
|
|
@include appearance(none);
|
|
|
|
&::-ms-expand { display: none;}
|
|
}
|
|
|
|
.#{$sm-prefix}unit {
|
|
position: absolute;
|
|
right: 10px; top: 3px;
|
|
font-size: 10px;
|
|
color: $arrowColor;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow{
|
|
height: 100%; width: 9px;
|
|
position: absolute;
|
|
right: 0; top: 0;
|
|
cursor: ns-resize;
|
|
}
|
|
.#{$sm-prefix}sel-arrow{ cursor:pointer }
|
|
|
|
.#{$sm-prefix}u-arrow, .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
|
|
position: absolute;
|
|
height: 0; width: 0;
|
|
border-left: 3px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.#{$sm-prefix}u-arrow {
|
|
border-bottom: 4px solid $arrowColor;
|
|
top: 4px;
|
|
}
|
|
.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
|
|
border-top: 4px solid $arrowColor;
|
|
bottom: 4px;
|
|
}
|
|
.#{$sm-prefix}d-s-arrow{ bottom: 7px; }
|
|
|
|
&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite {
|
|
background-color: darken($mainDkColor, 2.5%);/*353535*/
|
|
border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
|
|
box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/
|
|
color: $inputFontColor;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
padding: 0 5px;
|
|
}
|
|
&.#{$sm-prefix}select{ padding:0; }
|
|
&.#{$sm-prefix}select select{ height: 20px; }
|
|
&.#{$sm-prefix}select option { margin: 5px 0;}
|
|
&.#{$sm-prefix}composite{
|
|
background-color: transparent;
|
|
border: 1px solid darken($mainDkColor, 2.5%);
|
|
}
|
|
&.#{$sm-prefix}list{
|
|
width:auto;
|
|
padding:0;
|
|
overflow: hidden;
|
|
float:left;
|
|
|
|
input{ display:none; }
|
|
label{ cursor:pointer; padding: 5px; display:block;}
|
|
.#{$sm-prefix}radio:checked + label{
|
|
background-color: lighten($mainDkColor, 13%);/*5b5b5b*/
|
|
}
|
|
.#{$sm-prefix}icon{
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
text-shadow: none;
|
|
line-height: normal;
|
|
//padding: 5px 19px;
|
|
}
|
|
}
|
|
|
|
&.#{$sm-prefix}integer select{ width:auto; padding: 0; color: transparent;}
|
|
|
|
}
|
|
/*------------------END Field--------------------*/
|
|
|
|
.#{$sm-prefix}list .#{$sm-prefix}el{
|
|
float:left;
|
|
border-left: 1px solid $darkTextShadow;
|
|
text-shadow: 0 1px 0 darken($mainDkColor, 9%);/*232323*/
|
|
|
|
&:first-child{border:none}
|
|
&:hover{background: $mainDkColor; }
|
|
}
|
|
|
|
.#{$sm-prefix}properties {
|
|
font-size: 11px;
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
/*------------------Property--------------------*/
|
|
.#{$sm-prefix}property{
|
|
box-sizing: border-box;
|
|
float:left; width:50%;
|
|
margin-bottom: 5px;
|
|
padding: 0 5px;
|
|
|
|
&.#{$sm-prefix}file, &.#{$sm-prefix}composite, &.#{$sm-prefix}stack, &.#{$sm-prefix}list{
|
|
width:100%;
|
|
}
|
|
.#{$sm-prefix}btn{
|
|
background-color: lighten($mainDkColor, 13%);/*#5d5d5d*/
|
|
border-radius: 2px;
|
|
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset;
|
|
padding: 5px;
|
|
position: relative;
|
|
text-align: center;
|
|
height: auto; width: 100%;
|
|
cursor: pointer;
|
|
color: $fontColor;
|
|
box-sizing: border-box;
|
|
text-shadow: -1px -1px 0 $mainDkColor;
|
|
border: none;
|
|
@include opacity(0.85);
|
|
}
|
|
.#{$sm-prefix}btn-c {
|
|
box-sizing: border-box;
|
|
float: left;
|
|
width: 100%;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
&.#{$sm-prefix}file ##{$sm-prefix}preview-box {
|
|
background-color: $lightBorder;
|
|
border-radius: 2px;
|
|
margin-top: 5px;
|
|
position:relative;
|
|
overflow: hidden;
|
|
|
|
&.#{$sm-prefix}show{
|
|
border: 1px solid darken($lightBorder,1%);
|
|
padding: 3px 5px;
|
|
}
|
|
##{$sm-prefix}close{
|
|
@extend .#{$sm-prefix}close-btn;
|
|
display:block;
|
|
}
|
|
}
|
|
&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file{ height: 50px;}
|
|
&.#{$sm-prefix}file ##{$sm-prefix}preview-file {
|
|
background-size: auto 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
.#{$sm-prefix}layers {
|
|
background-color: $mainDkColor;
|
|
border: 1px solid darken($mainDkColor, 2.5%);
|
|
box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);
|
|
border-radius: 2px;
|
|
margin-top: 5px;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.#{$sm-prefix}layer {
|
|
background-color: lighten($mainDkColor, 4.5%);
|
|
border-radius: 2px;
|
|
box-shadow: 1px 1px 0 darken($mainDkColor, 2.5%), 1px 1px 0 lighten($mainDkColor, 9%) inset;
|
|
margin: 2px;
|
|
padding: 7px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
> ##{$sm-prefix}preview-box {
|
|
@extend .checker-bg;
|
|
height: 15px;
|
|
position: absolute;
|
|
right: 27px;
|
|
top: 6px;
|
|
width: 15px;
|
|
}
|
|
##{$sm-prefix}preview-box, ##{$sm-prefix}preview{
|
|
border-radius:2px;
|
|
}
|
|
##{$sm-prefix}close-layer{
|
|
display:block;
|
|
font-size: 23px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 5px;
|
|
top: 0;
|
|
@include opacity(0.2);
|
|
}
|
|
> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
|
|
background-color: white;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
&.#{$sm-prefix}active {
|
|
background-color: lighten($mainDkColor, 7%);
|
|
}
|
|
&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box{
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
/*------------------END Property--------------------*/
|
|
|
|
.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}
|
|
|
|
.#{$sm-prefix}stack ##{$sm-prefix}add {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
line-height: 10px;
|
|
position: absolute;
|
|
right: 0; top: -20px;
|
|
opacity: 0.75;
|
|
|
|
&:hover{ @include opacity(1); }
|
|
}
|
|
|
|
.#{$sm-prefix}color-picker {
|
|
background-color: $fontColor;
|
|
border: 2px solid lighten($mainDkColor, 11.5%);
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
height: 100%; width: 20px;
|
|
position: absolute;
|
|
right: 0; top: 0;
|
|
}
|
|
|
|
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
|
|
left: 0; top: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { padding: 2px 0;}
|
|
|
|
}
|
|
/********* END Style Manager **********/
|
|
|
|
|
|
/********* Modal dialog **********/
|
|
|
|
.#{$mdl-prefix}backlayer {
|
|
background-color: #000;
|
|
position: absolute;
|
|
top: 0; z-index: 1;
|
|
width:100%; height:100%;
|
|
@include opacity(0.5);
|
|
}
|
|
|
|
.#{$mdl-prefix}container {
|
|
position: absolute;
|
|
top: 0; z-index: 10;
|
|
width:100%; height:100%;
|
|
}
|
|
|
|
.#{$mdl-prefix}dialog {
|
|
background-color: lighten($mainColor, 2%);
|
|
border-bottom: 2px solid #353535;
|
|
text-shadow: -1px -1px 0 #353535;
|
|
margin: 30px auto 0;
|
|
max-width: 850px;
|
|
width: 90%;
|
|
color: $fontColor;
|
|
border-radius: 3px;
|
|
font-weight: lighter;
|
|
position:relative;
|
|
z-index: 2;
|
|
|
|
.#{$mdl-prefix}btn-close {
|
|
@extend .btn-cl;
|
|
position: absolute;
|
|
right: 15px; top: 5px;
|
|
}
|
|
}
|
|
|
|
.#{$mdl-prefix}header, .#{$mdl-prefix}content{
|
|
padding:10px 15px;
|
|
clear: both;
|
|
}
|
|
.#{$mdl-prefix}header{
|
|
position: relative;
|
|
border-bottom: 1px solid $mainDkColor;
|
|
padding: 15px 15px 7px;
|
|
}
|
|
.#{$mdl-prefix}content{
|
|
border-top: 1px solid $mainLhColor;
|
|
}
|
|
|
|
/********* Assets Manager **********/
|
|
|
|
.#{$am-prefix}assets {
|
|
background-color: $mainDkColor;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
width: 45%;
|
|
float:right;
|
|
height: 325px;
|
|
overflow: auto;
|
|
|
|
.#{$am-prefix}highlight { background-color: $mainColor; }
|
|
|
|
.#{$am-prefix}asset {
|
|
border-bottom: 1px solid darken($mainDkColor, 3%);
|
|
padding: 5px;
|
|
cursor:pointer;
|
|
position: relative;
|
|
&:hover ##{$am-prefix}close { display: block;}
|
|
|
|
##{$am-prefix}preview{
|
|
height: 70px; width: 30%;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-color: $mainColor;
|
|
border-radius: 2px;
|
|
float: left;
|
|
}
|
|
}
|
|
##{$am-prefix}close {
|
|
@extend .btn-cl;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 0;
|
|
display: none;
|
|
}
|
|
|
|
##{$am-prefix}meta {
|
|
width: 70%;
|
|
float: left;
|
|
font-size: 12px;
|
|
padding: 5px 0 0 5px;
|
|
box-sizing: border-box;
|
|
|
|
> div { margin-bottom: 5px;}
|
|
##{$am-prefix}dimensions {
|
|
font-size: 10px;
|
|
@include opacity(0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
/********* File uploader **********/
|
|
|
|
$uploadPadding: 150px 10px;
|
|
|
|
.#{$am-prefix}file-uploader {
|
|
width: 55%;
|
|
float:left;
|
|
|
|
> form {
|
|
background-color: $mainDkColor;
|
|
border: 2px dashed #999999;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
|
|
&.#{$am-prefix}hover {
|
|
border: 2px solid $colorGreen;
|
|
color: lighten($colorGreen, 5%); /*#7ee07e*/
|
|
}
|
|
|
|
&.#{$am-prefix}disabled{
|
|
border-color: red;
|
|
}
|
|
|
|
##{$am-prefix}uploadFile{
|
|
@include opacity(0);
|
|
padding: $uploadPadding;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
##{$am-prefix}title {
|
|
position: absolute;
|
|
padding: $uploadPadding;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/********* Code Manager **********/
|
|
|
|
.#{$cm-prefix}editor-c{
|
|
float:left;
|
|
box-sizing: border-box;
|
|
width:50%;
|
|
}
|
|
.#{$cm-prefix}editor{
|
|
font-size: 12px;
|
|
|
|
&##{$cm-prefix}htmlmixed {
|
|
padding-right: 10px;
|
|
border-right: 1px solid $mainDkColor;
|
|
##{$cm-prefix}title { color: #a97d44;}
|
|
}
|
|
&##{$cm-prefix}css {
|
|
padding-left: 10px;
|
|
border-left: 1px solid $mainLhColor;
|
|
##{$cm-prefix}title { color: #ddca7e;}
|
|
}
|
|
##{$cm-prefix}title {
|
|
background-color: $mainDkColor;
|
|
font-size: 12px;
|
|
padding: 5px 10px 3px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/*************RTE****************/
|
|
|
|
##{$rte-prefix}toolbar {
|
|
background-color: $mainColor;
|
|
border: 1px solid $mainDkColor;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
z-index: 5;
|
|
|
|
.#{$rte-prefix}btn {
|
|
color: $fontColor;
|
|
padding: 5px;
|
|
width: 25px;
|
|
border-right: 1px solid #353535;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&:last-child{ border-right:none; }
|
|
&.btn-info{ background-color: darken($mainDkColor,3%); }
|
|
&:hover { background-color: $mainLhColor;}
|
|
}
|
|
}
|
|
|
|
/********* Spectrum **********/
|
|
|
|
.sp-hue, .sp-slider{ cursor: row-resize;}
|
|
.sp-color, .sp-dragger{ cursor: crosshair;}
|
|
.sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
|
|
.sp-hue{ left: 90%; }
|
|
.sp-color{right: 15%;}
|
|
.sp-container {
|
|
background-color: #454545;
|
|
border: 1px solid #333333;
|
|
box-shadow: 0 0 7px #111;
|
|
border-radius: 3px;
|
|
}
|
|
.sp-picker-container{border:none;}
|
|
.colpick_dark .colpick_color { outline: 1px solid #333;}
|
|
.sp-cancel, .sp-cancel:hover {
|
|
bottom: -8px;
|
|
color: #777 !important;
|
|
font-size: 25px;
|
|
left: 0;
|
|
position: absolute;
|
|
text-decoration:none;
|
|
}
|
|
.sp-alpha-handle {
|
|
background-color: #ccc;
|
|
border: 1px solid #555;
|
|
width: 4px;
|
|
}
|
|
.sp-color, .sp-hue { border: 1px solid #333333;}
|
|
.sp-slider {
|
|
background-color: #ccc;
|
|
border: 1px solid #555;
|
|
height: 3px;
|
|
left: -4px;
|
|
width: 22px;
|
|
}
|
|
.sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
|
|
.sp-button-container{
|
|
float: none;
|
|
width: 100%;
|
|
position: relative;
|
|
text-align: right;
|
|
}
|
|
.sp-container button, .sp-container button:hover, .sp-container button:active{
|
|
background: #333;
|
|
border-color: #292929;
|
|
color: #757575;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding: 3px 5px;
|
|
}
|
|
|
|
/*********JQuery-UI**********/
|
|
.ui-sortable-helper{
|
|
opacity: 0.7; filter: alpha(opacity=70);
|
|
}
|
|
.ui-sort-highlight{/*ui-sortable-placeholder*/
|
|
background:#123;
|
|
height:20px;
|
|
}
|
|
.ui-resizable{ position:relative;}
|
|
.ui-resizable-se, .ui-resizable-s,.ui-resizable-e{
|
|
position:absolute;
|
|
right: 0;
|
|
bottom:0;
|
|
cursor: nwse-resize;
|
|
height:15px;
|
|
width:15px;
|
|
outline: none !important;
|
|
}
|
|
.ui-resizable-se{
|
|
opacity: 0; filter: alpha(opacity=0);
|
|
font-size: 10px;
|
|
font-family: FontAwesome;
|
|
}
|
|
.ui-resizable-se::before{
|
|
content: "\f065";
|
|
}
|
|
.ui-resizable:hover > .ui-resizable-se{ opacity: 0.3; filter: alpha(opacity=30); }
|
|
.ui-resizable-s{
|
|
height:10px;
|
|
width:100%;
|
|
cursor: ns-resize;
|
|
}
|
|
.ui-resizable-e{
|
|
width:10px;
|
|
height:100%;
|
|
cursor: ew-resize;
|
|
}
|