grapesjs/styles/scss/main.scss

/* stylelint-disable */
@import "spectrum";
@import "font-awesome";

$app-prefix: 	'gjs-';
$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-';
$clm-prefix: 	$app-prefix + 'clm-';
$trt-prefix: 	$app-prefix + 'trt-';

/* Dark theme */
$mainColor:		#444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
$fontColor:   #ddd; /* l: #d8d7db */
$fontColorActive: #f8f8f8;

/* Light theme
$mainColor: #fff;
$fontColor: #9299a3;
$fontColorActive: #4f8ef7;
*/

$mainDkColor:	rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838 */
$mainDklColor: rgba(0, 0, 0, 0.1);
$mainLhColor:	rgba(255, 255, 255, 0.1); /* #515151 */
$mainLhlColor: rgba(255, 255, 255, 0.7);
$fontColorDk:	#777;
$mainFont:		Helvetica, sans-serif;
$colorBlue:		#3b97e3;
$colorRed: 		#dd3636;
$colorYell:		#ffca6f;
$colorGreen:	#62c462;
$tagBg: #804f7b;
$secColor: $tagBg;
$imageCompDim:	50px;
$leftWidth: 15%;

$fontPath: '../fonts';
$fontName: 'main-fonts';
$fontV: 20;//random(1000)

@font-face {
  font-family: 'font3336';
  src: url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}');
  src:
    url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'),
    //url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'),
    url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'),
    url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'),
    url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@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;
  filter: alpha(opacity=$v * 100);
}

@mixin appearance($v) {
  -webkit-appearance: $v;
  -moz-appearance: $v;
  appearance: $v;
}

@mixin transform($v) {
  -ms-transform: $v;
  -webkit-transform: $v;
  -moz-transform: $v;
  transform: $v;
}

//.#{$app-prefix}fonts {}

.#{$app-prefix}fonts::before {
  display: block;
  font: normal normal normal 14px font3336; // shortening font declaration
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 5em;
}
.#{$app-prefix}f-b1::before { content: 'Q'; }
.#{$app-prefix}f-b2::before { content: 'W'; }
.#{$app-prefix}f-b3::before { content: 'E'; }
.#{$app-prefix}f-b37::before { content: 'R'; }
.#{$app-prefix}f-hero::before { content: 'T'; }
.#{$app-prefix}f-h1p::before { content: 'y'; }
.#{$app-prefix}f-3ba::before { content: 'u'; }
.#{$app-prefix}f-image::before { content: 'I'; }
.#{$app-prefix}f-text::before { content: 'o'; }
.#{$app-prefix}f-quo::before { content: 'p'; }
.#{$app-prefix}f-button::before { content: 'B'; }
.#{$app-prefix}f-divider::before { content: 'D'; }


.#{$app-prefix}invis-invis,
.#{$app-prefix}no-app {
	background-color: transparent;
	border: none;
	color:inherit;
}
.#{$app-prefix}no-app{
	height: 10px;
}

.#{$app-prefix}test {

  &::btn { color: '#fff';}

  &input {}

  &header {}
}
.opac50{
	@include opacity(0.50);
}
.#{$app-prefix}checker-bg, .checker-bg{
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
}

.#{$app-prefix}bg-main{
  background-color: $mainColor;
}

.#{$app-prefix}color-main{
  color: $fontColor;
}

.#{$app-prefix}color-active{
  color: $fontColorActive;
}

.#{$app-prefix}bdrag{
  position: absolute;
  z-index: 10;
  width: auto;
}

.#{$app-prefix}off-prv{
  @extend .#{$app-prefix}color-main;
  @extend .#{$app-prefix}bg-main;
  position: relative;
  z-index: 10;
  padding: 5px;
  cursor: pointer;
}

/********************* MAIN ************************/
.clear{ clear:both }

.no-select{
 	@include user-select(none);
}

.#{$app-prefix}editor{
	font-family: $mainFont;
	background-color: $mainColor;
	position:relative;
	box-sizing: border-box;
	height: 100%;
}
.#{$app-prefix}freezed{
  @include opacity(0.50);
  pointer-events: none;
}
.#{$app-prefix}btn-prim{
  @extend .#{$app-prefix}color-main;
  background-color: $mainLhColor;
  border-radius: 2px;
  padding: 3px 6px;
  cursor: pointer;
  padding: 0.5em;
  border: none;
}
.#{$app-prefix}btn-prim:active{
  background-color: $mainLhColor;
}
.#{$app-prefix}input{
  background-color: $mainDkColor;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  box-shadow: 1px 1px 0 $mainLhColor;
  box-sizing: border-box;
  color: $fontColor;
  padding: 0.5em 1em;
}
.#{$app-prefix}select {
  @extend .#{$app-prefix}input;
}

div.#{$app-prefix}select {
  padding: 0;
}

.#{$app-prefix}select select {
  padding-right: 10px;
}

.#{$app-prefix}select:-moz-focusring,
.#{$app-prefix}select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 $mainLhlColor;
}

.#{$app-prefix}input:focus,
.#{$app-prefix}button:focus,
.#{$app-prefix}btn-prim:focus,
.#{$app-prefix}select:focus,
.#{$app-prefix}select select:focus {
  outline: none;
}

.#{$app-prefix}select option,
.#{$clm-prefix}select option,
.#{$sm-prefix}select option,
.#{$sm-prefix}unit option {
  @extend .#{$app-prefix}bg-main;
  //background-color: $mainDkColor;
}

/*************  TRAITS  ****************/
.#{$app-prefix}traits-label {
  border-bottom: 1px solid $mainDkColor;
  font-size: 13px;
  font-weight: lighter;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
}
.#{$trt-prefix}trait {
  display: flex;
  justify-content: start;
  padding: 5px 10px;
  font-size: 0.75em;
  font-weight: lighter;

  .#{$app-prefix}label {
    width: 30%;
    text-align: left;
  }

  .#{$app-prefix}field {
    width: 70%;
  }
}

/*************  CANVAS  ****************/
.#{$cv-prefix}canvas {
  background-color: rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  position: absolute;
  width: (100% - $leftWidth);
  height: 100%;
  bottom: 0; left: 0;
  overflow: hidden;
  padding-top: 40px;
  z-index:1;

  > iframe {
    background-color: #fff;
    height: 100%;
    outline: medium none;
    width: 100%;
    border: none;
    margin: 0 auto;
    display: block;
  }

  .#{$app-prefix}ghost{
    display: none;
    pointer-events: none;
    background-color: #5b5b5b;
    border: 2px dashed #ccc;
    position: absolute;
    z-index: 10;
    @include opacity(0.55);
  }

  .#{$app-prefix}highlighter, .#{$app-prefix}highlighter-sel{
    position: absolute;
    outline: 1px solid $colorBlue;
    pointer-events: none;
  }

  .#{$app-prefix}highlighter-warning{
    outline: 3px solid $colorYell;
  }

  .#{$app-prefix}highlighter-sel{
    outline: 3px solid $colorBlue;
  }

  ##{$app-prefix}tools{
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    outline: none;
  }

  	/* This simulate body behaviour */
  	> div:first-child {
  		background-color: #fff;
  		position: relative;
	    height: 100%;
	    overflow: auto;
	    width: 100%;
	}
}

.#{$cv-prefix}canvas *{box-sizing: border-box;}

.#{$app-prefix}frame{
  transition: width 0.35s ease;
}

.#{$app-prefix}toolbar {
  position: absolute;
  background-color: $colorBlue;
  color: white;
}

.#{$app-prefix}toolbar-item {
  padding: 5px 7px;
  font-size: 0.8rem;
  cursor: pointer;
}

.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 *{
	outline: 1px dashed #888;
	outline-offset: -2px;
  	box-sizing: border-box;
}

.#{$com-prefix}no-select, .#{$com-prefix}no-select img{
 	@extend .no-select;
}

.#{$cv-prefix}canvas .#{$comp-prefix}selected{//TODO
	outline: 3px solid $colorBlue !important;
}

*.#{$com-prefix}hover, div.#{$com-prefix}hover { outline: 1px solid $colorBlue; }

*.#{$com-prefix}hover-delete, div.#{$com-prefix}hover-delete{
	outline: 2px solid $colorRed;
  	@include opacity(0.50);
}
*.#{$com-prefix}hover-move, div.#{$com-prefix}hover-move{
	outline: 3px solid $colorYell;
}
.#{$com-prefix}badge, .#{$app-prefix}badge{
	pointer-events: none;
	background-color: $colorBlue;
	color: #fff;
	padding: 2px 5px;
	position: absolute; z-index: 1;
	font-size: 12px;
  outline: none;
  display: none;
}
.#{$com-prefix}badge-red{
	@extend .#{$com-prefix}badge;
	background-color: $colorRed;
}
.#{$app-prefix}badge-warning{
	background-color: $colorYell;
}
.#{$app-prefix}placeholder, .#{$com-prefix}placeholder{
	position: absolute;
	z-index: 10;
  pointer-events: none;
  display: none;
}
.#{$app-prefix}placeholder{
  /*border-width: 3px !important;*/
  border-style: solid !important;
  border-color: $colorGreen;
  outline: none;
}
.#{$app-prefix}placeholder-int, .#{$com-prefix}placeholder-int{
	background-color: $colorGreen;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	height: 100%; width: 100%;
	pointer-events: 'none';
	padding: 1.5px;
  outline: none;
}

/********* PANELS **********/

.#{$pn-prefix}panel {
  @extend .#{$app-prefix}bg-main;
  @extend .#{$app-prefix}color-main;
  display: inline-block;
  padding: 5px;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  z-index:3;

  &##{$pn-prefix}commands{
    width: (100% - $leftWidth);
    left:0; top: 0;
    box-shadow: 0 0 5px $mainDkColor;
  }

  &##{$pn-prefix}options{
  	right: $leftWidth;
    top: 0;
  }

  &##{$pn-prefix}options2{
  	@extend ##{$pn-prefix}commands;
  	bottom: 150px;
  	height: auto;
  }

  .icon-undo, .icon-redo{
  	font-size: 20px;
    height: 30px;
    width: 25px;
  }

  &##{$pn-prefix}views{
  	border-bottom: 2px solid $mainDkColor;
  	right: 0;
  	width: $leftWidth;
  	z-index: 4;
  }

  &##{$pn-prefix}views-container{
  	height: 100%;
    padding: 42px 0 0;
    right: 0;
    width: $leftWidth;
    overflow: auto;
    box-shadow: 0 0 5px $mainDkColor;
  }
}

.#{$pn-prefix}buttons{
  align-items: center;
  display: flex;
  justify-content: center;
}

.#{$pn-prefix}btn, .#{$app-prefix}btnt{
  @extend .#{$app-prefix}color-main;
	box-sizing: border-box;
	height: 30px; width: 30px;
	line-height: 21px;
	background-color: transparent;
	border:none;
	font-size: 18px;
	margin-right: 5px;
	border-radius: 2px;
	cursor: pointer;
	padding: 5px;
	position: relative;

	&.#{$pn-prefix}active{
    @extend .#{$app-prefix}color-active;
		background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
	}

	> .#{$pn-prefix}arrow-rd {
	  	border-bottom: 5px solid $mainLhlColor;
	  	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 {
		font-weight: lighter;
		text-align: left;
		position: relative;
		background-color: rgba(0, 0, 0, 0.1);
	}
	.#{$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;
    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-c {
  @extend .#{$app-prefix}bg-main;
}
.#{$nv-prefix}item .#{$nv-prefix}title {
  background-color: $mainDklColor;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 7px 10px 7px 25px;
  border-bottom: 1px solid $mainDkColor;
  border-top: 1px solid $mainLhColor;
  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: 7px;
  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}no-chld > ##{$nv-prefix}caret{ display:none; }
.#{$nv-prefix}item > ##{$nv-prefix}move {
	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;}

/***********  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";
	}
}

$lightBorder: rgba(255, 255, 255, 0.05);

@import "gjs_inputs";

/********* Device Manager **********/

.#{$app-prefix}devices-c{
  display: flex;
  align-items: center;
  padding: 4px;
  /*
  padding: 10px 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  */

  .#{$app-prefix}device-label {
    flex-grow: 2;
    font-size: 0.7em;
    text-align: left;
    margin-right: 10px;
  }

  .#{$app-prefix}select{
    flex-grow: 20;
  }

  .#{$app-prefix}add-trasp{
    flex-grow: 1;
    margin-left: 5px;
  }
}

/********* END Device Manager **********/


/********* Style Manager **********/

.#{$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}header {
	font-size: 11px;
  font-weight: lighter;
  padding: 10px;
}
.#{$sm-prefix}sector {
	clear:both;
	border-bottom: 1px solid $mainDkColor;
	font-weight: lighter;
	text-align:left;

	##{$sm-prefix}caret{
		padding-right: 5px;
		font-size: 11px;
	}

	.#{$sm-prefix}title{
	  background-color: $mainDklColor;
	  font-size: 13px;
	  letter-spacing: 1px;
	  padding: 12px 10px 12px 20px;
	  border-top: 1px solid $mainLhColor;
	  cursor:pointer;
	}

	.#{$sm-prefix}label {
		margin: 5px 5px 2px 0;
	}
	/*------------------Field--------------------*/
	.#{$sm-prefix}field {
	  width: 100%;
	  position:relative;

    input, select {
      background-color: transparent;
      color: $mainLhlColor;
      border:none;
      width: 100%;
    }
	  input {
		  box-sizing: border-box;
		}
		select {
		  position: relative;
		  z-index:1;
		  @include appearance(none);
		  &::-ms-expand { display: none;}
		}

    select:-moz-focusring{
      color: transparent;
      text-shadow: 0 0 0 $mainLhlColor;
    }

    select:focus, input:focus{
      outline: none;
    }

		.#{$sm-prefix}unit {
		  position: absolute;
		  right: 10px; top: 3px;
		  font-size: 10px;
		  color: $mainLhlColor;
		  cursor:pointer;
		}

		.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow, .#{$clm-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, .#{$clm-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 $mainLhlColor;
		  top: 4px;
		}
		.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{
		  border-top: 4px solid $mainLhlColor;
		  bottom: 4px;
		}
		.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }

	 	&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}input {
		  background-color: $mainDkColor;/*353535*/
		  border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
		  box-shadow: 1px 1px 0 $mainLhColor;/*575757*/
		  color: $mainLhlColor;
		  border-radius: 2px;
		  box-sizing: border-box;
		  padding: 0 5px;
		}
    &.#{$sm-prefix}composite{
      @extend .#{$app-prefix}color-main;
      border-radius: 2px;
    }
		&.#{$sm-prefix}select{ padding:0; }
		&.#{$sm-prefix}select select{ height: 20px; }
		&.#{$sm-prefix}select option { padding: 3px 0;}
		&.#{$sm-prefix}composite{
			background-color: rgba(0,0,0,0.1);
			border: 1px solid rgba(0, 0, 0, 0.25);
		}
		&.#{$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: rgba(255, 255, 255, 0.2);/*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;}

	}
	/*------------------END Field--------------------*/

	.#{$sm-prefix}list .#{$sm-prefix}el{
		float:left;
		border-left: 1px solid $mainDkColor;

		&: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 {
		  margin-top: 5px;
		  min-height: 30px;
		}

		.#{$sm-prefix}layer {
		  background-color: rgba(255, 255, 255, 0.055);
		  border-radius: 2px;
		  box-shadow: 1px 1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) 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.5);

				&:hover{
					@include opacity(0.8);
				}
			}
		  	> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
			  background-color: white;
			  height: 100%;
			  width: 100%;
			  background-size: cover !important;
			}
			&.#{$sm-prefix}active {
			  background-color: rgba(255, 255, 255, 0.12);
			}
			&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box{
				display:none;
			}
		}
	}
	##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after {
	  color: #000;
	  content: "T";
	  font-weight: 900;
	  line-height: 17px;
	  padding: 0 4px;
	}
	/*------------------END Property--------------------*/

	.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}

	.#{$sm-prefix}stack ##{$sm-prefix}add {
      @extend .#{$app-prefix}color-main;
		  background: none;
		  border: none;
		  cursor: pointer;
		  font-size: 22px;
		  line-height: 10px;
		  position: absolute;
		  right: 0; top: -20px;
		  opacity: 0.75;

		  &:hover{  @include opacity(1); }
	}

  .#{$sm-prefix}colorp-c {
    @extend .#{$app-prefix}bg-main;
    height: 100%; width: 20px;
    position: absolute;
    right: 0; top: 0;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 2px;

    .#{$app-prefix}checker-bg{
      height: 100%; width: 100%;
      border-radius: 1px;
    }
  }

  .#{$sm-prefix}color-picker {
    background-color: $fontColor;
    cursor: pointer;
    height: 16px;
    width: 100%;
    margin-top: -16px;
    box-shadow: 0 0 1px $mainDkColor;
    border-radius: 1px;
  }

	.#{$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;}

}
.#{$sm-prefix}layer > ##{$sm-prefix}move {
	@include opacity(0.7);
	cursor: move;
  font-size: 12px;
  float: left;
  margin: 0 5px 0 0;

  &:hover{
  	@include opacity(0.9);
  }
}
/********* END Style Manager **********/



/********* Block manager **********/

.#{$app-prefix}blocks-c{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.#{$app-prefix}block{
  @include user-select(none);
  width: 45%;
  padding: 1em;
  box-sizing: border-box;
  height: 90px;
  cursor:all-scroll;
  margin: 2.5%;
  font-size: 11px;
  font-weight: lighter;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.#{$app-prefix}block.fa {
  font-size: 2em;
  line-height: 2em;
  padding: 11px;
}

.#{$app-prefix}block-label {
  line-height: normal;
  font-size: 0.65rem;
  font-weight: normal;
  font-family: Helvetica, sans-serif;
}

.#{$app-prefix}block.#{$app-prefix}bdrag{
 width: auto;
 padding: 0;
}

/********* END Block manager **********/



/********* Class manager **********/
$addBtnBg: lighten($mainDkColor, 10%);
$paddElClm: 5px 6px;

.#{$clm-prefix}field{
		@extend .#{$sm-prefix}field
}
.#{$clm-prefix}select{
		@extend .#{$sm-prefix}field.#{$sm-prefix}select;
}

.#{$clm-prefix}tags{
	@extend .#{$sm-prefix}sector;
	font-size: 11px;
	padding: 10px 5px;

	##{$clm-prefix}label, ##{$clm-prefix}sel{
		padding: 7px 0;
		float:left;
	}
  ##{$clm-prefix}sel{
    font-style: italic;
    margin-left: 5px;
  }
	##{$clm-prefix}status-c{
		float:right;
	}

	##{$clm-prefix}tags-field{
		clear:both;
		padding: 5px;
		margin-bottom: 5px;
	}
	##{$clm-prefix}tags-c{
		display: inline-block;
		vertical-align: top;
	}

	##{$clm-prefix}add-tag{
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 2px;
    padding: $paddElClm;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
	}

	##{$clm-prefix}new {
		@extend  .#{$app-prefix}invis-invis;
		color: $fontColor;
		padding: $paddElClm;
		display:none;
	}

	.#{$clm-prefix}tag {
		background-color: $tagBg;
		border: 1px solid darken($tagBg, 12%);
		box-shadow: 1px 1px lighten($tagBg, 9%) inset;
		text-shadow: 1px 1px darken($tagBg, 7%);
		display: inline-block;
		border-radius:3px;
		margin: 0 3px 3px 0;
    padding: 4px;
    cursor: default;
	}
	##{$clm-prefix}close {
		@extend  .opac50;
		font-size: 20px;
    line-height: 0;
    cursor:pointer;
    color: rgba(255, 255, 255, 0.9);
    @extend  .no-select;
    &:hover{
    	@include opacity(0.7);
    }
	}
	##{$clm-prefix}checkbox {
    color: rgba(255, 255, 255, 0.9);
		vertical-align: middle;
		cursor: pointer;
		font-size: 9px;
	}

	##{$clm-prefix}tag-label {
		cursor: text;
		@extend  .no-select;

    input {
      width: auto;
      padding: 0 4px;
    }
	}
}
/********* END Class manager **********/

/********* Modal dialog **********/

.#{$mdl-prefix}backlayer {
	background-color: #000;
  	position: absolute;
  	top: 0; left: 0;
    z-index: 1;
  	width:100%; height:100%;
  	@include opacity(0.5);
}

.#{$mdl-prefix}container {
		font-family: $mainFont;
  	position: absolute;
  	top: 0; left: 0;
    z-index: 10;
  	width:100%; height:100%;
}

.#{$mdl-prefix}dialog {
  	@extend .#{$app-prefix}bg-main;
    @extend .#{$app-prefix}color-main;
  	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
    animation: #{$app-prefix}slide-down 0.215s;
  	margin: 30px auto 0;
  	max-width: 850px;
  	width: 90%;
   	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}active .#{$mdl-prefix}dialog {
  animation: #{$mdl-prefix}slide-down .216s;
}

.#{$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;
}
.#{$app-prefix}export-dl::after{
  content: "";
  clear: both;
  display:block;
  margin-bottom:10px;
}

/********* Assets Manager **********/
.#{$am-prefix}assets {
  height: 290px;
  overflow: auto;
  clear: both;
}

.#{$am-prefix}assets-header {
  padding: 5px;
}

.#{$am-prefix}add-asset {
  .#{$am-prefix}add-field {
    width: 70%;
    float: left;
  }
  button{
    width: 25%;
    float: right;
  }
}

.#{$am-prefix}add-field input {
  padding: 6px;
}

.#{$am-prefix}assets-cont {
  background-color: $mainDklColor;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 10px;
  width: 45%;
  float:right;
  height: 325px;
  overflow: hidden;

  ##{$am-prefix}preview-cont{
    position: relative;
    height: 70px; width: 30%;
    background-color: $mainColor;
    border-radius: 2px;
    float: left;
    overflow: hidden;
  }

  ##{$am-prefix}preview{
    position: absolute;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    z-index: 1;
  }

  ##{$am-prefix}preview-bg{
    position: absolute;
    height: 100%;
    width: 100%;
    @include opacity(0.5);
    z-index: 0;
  }

  .#{$am-prefix}highlight {
    background-color: $mainLhColor;
  }

  .#{$am-prefix}asset {
	  border-bottom: 1px solid darken($mainDkColor, 3%);
	  padding: 5px;
	  cursor:pointer;
	  position: relative;

    &:hover ##{$am-prefix}close { display: block;}

	}
	##{$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: $mainDklColor;
	  border: 2px dashed;
	  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%;

	.CodeMirror{
		 height: 450px;
	}
}
.#{$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 {
  @extend .#{$app-prefix}bg-main;
  display: none;
  border: 1px solid $mainDkColor;
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
  z-index: 5;

  .#{$rte-prefix}btn {
  	@extend .#{$app-prefix}color-main;
    display: inline-block;
		padding: 5px;
		min-width:	25px;
		border-right: 1px solid $mainDkColor;
		text-align: center;
		cursor: pointer;
		outline: none;

	  	&:last-child{ border-right:none; }
	  	&.btn-info{ background-color: $mainDkColor;}
	  	&:hover {  background-color: $mainLhColor;}
	}

  select{
    height: 16px;
  }
}

/********* 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 {
  @extend .#{$app-prefix}bg-main;
  border: 1px solid $mainDkColor;
  box-shadow: 0 0 7px $mainDkColor;
  border-radius: 3px;
}
.sp-picker-container{border:none;}
.colpick_dark .colpick_color {  outline: 1px solid $mainDkColor;}
.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: $mainDkColor;
  border-color: $mainDkColor;
  color: $fontColor;
  text-shadow: none;
  box-shadow: none;
  padding: 3px 5px;
}
.sp-palette-container{
  border: none;
  float:none;
  margin:0;
  padding:5px 10px 0;
}
.sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover{
  border: 1px solid rgba(0, 0, 0, 0.9);
}

.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
  border-color: rgba(0, 0, 0, 0.9);
}


.#{$app-prefix}hidden {
  display: none;
}

@keyframes #{$app-prefix}slide-down {
  0% {
      transform: translate(0, -3rem);
      opacity: 0;
  }
  100% {
      transform: translate(0, 0);
      opacity: 1;
  }
}

@keyframes #{$app-prefix}slide-up {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -3rem);
    opacity: 0;
  }
}