main.scss

/* stylelint-disable */
@import "../../../node_modules/spectrum-colorpicker/spectrum";
@import "../../../node_modules/codemirror/lib/codemirror";
@import "../../../node_modules/codemirror/theme/hopscotch";


@import "gjs_variables.scss";


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

$prefix: $app-prefix;

@import "gjs_status";

$colorsAll: (one, $primaryColor),
  (two, $secondaryColor),
  (three, $tertiaryColor),
  (four, $quaternaryColor),
  (danger, $colorRed);

.#{$prefix} {
  @each $cnum, $ccol in $colorsAll {
    &#{$cnum} {
      &-bg {
        background-color: $ccol;
      }

      &-color {
        color: $ccol;

        &-h:hover {
          color: $ccol;
        }
      }
    }
  }
}


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

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

  &-active {
    color: $fontColorActive;
    fill: $fontColorActive;
  }

  &-warn {
    color: $colorWarn;
    fill: $colorWarn;
  }

  &-hl {
    color: $colorHighlight;
    fill: $colorHighlight;
  }
}

.#{$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}no-user-select{
	@include user-select(none);
}

.#{$app-prefix}no-pointer-events{
  pointer-events: none;
}

.#{$app-prefix}bdrag {
  pointer-events: none !important;
  position: absolute !important;
  z-index: 10 !important;
  width: auto;
}

.#{$app-prefix}drag-helper {
  background-color: $colorBlue !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 10 !important;
  transform: scale(0.3) !important;
  transform-origin: top left !important;
  -webkit-transform-origin: top left !important;
  margin: 15px !important;
  transition: none !important;
  outline: none !important;
}

.#{$app-prefix}grabbing,
.#{$app-prefix}grabbing * {
  @extend .#{$app-prefix}no-user-select;

  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

.#{$app-prefix}grabbing {
  overflow: hidden;
}

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

// Custom scrollbars for Chrome
.#{$app-prefix}editor-cont ::-webkit-scrollbar-track {
  background: $mainDklColor;
}

.#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

.#{$app-prefix}editor-cont ::-webkit-scrollbar {
  width: 8px;
}

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

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

.#{$app-prefix} {
  &no-touch-actions {
    touch-action: none;
  }

  &disabled {
    @include user-select(none);
    @include opacity(0.50);
  }

  &editor {
    font-family: $mainFont;
    font-size: $fontSizeS;
    position: relative;
    box-sizing: border-box;
    height: 100%;
  }
}

.#{$app-prefix}freezed,
.#{$nv-prefix}freezed {
  @include opacity(0.50);
  pointer-events: none;
}

@import "gjs_traits";
@import "gjs_canvas";

/********* COMMANDS **********/

.no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; }

.#{$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,
.#{$nv-prefix}placeholder {
	position: absolute;
	z-index: 10;
  pointer-events: none;
  display: none;
}

.#{$app-prefix}placeholder,
.#{$nv-prefix}placeholder {
  border-style: solid !important;
  outline: none;
  box-sizing: border-box;
  transition: top $animSpeed, left $animSpeed,
    width $animSpeed, height $animSpeed;
}

.#{$app-prefix}placeholder.horizontal,
.#{$com-prefix}placeholder.horizontal,
.#{$nv-prefix}placeholder.horizontal {
  border-color: transparent $placeholderColor;
  border-width: 3px 5px;
  margin: -3px 0 0;
}

.#{$app-prefix}placeholder.vertical,
.#{$com-prefix}placeholder.vertical,
.#{$nv-prefix}placeholder.vertical {
  border-color: $placeholderColor transparent;
  border-width: 5px 3px;
  margin: 0 0 0 -3px;
}

.#{$app-prefix}placeholder-int,
.#{$com-prefix}placeholder-int,
.#{$nv-prefix}placeholder-int {
	background-color: $placeholderColor;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	height: 100%; width: 100%;
	pointer-events: none;
	padding: 1.5px;
  outline: none;
}

@import 'gjs_panels';

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


@import "gjs_inputs";

@import "gjs_devices";


/********* General **********/

.#{$app-prefix}category-open {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.#{$app-prefix}category-title {
  @extend .no-select;

  font-weight: lighter;
  background-color: $mainDklColor;
  letter-spacing: 1px;
  padding: 9px 10px 9px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  text-align: left;
  position: relative;
  cursor: pointer;
}

@import "gjs_style_manager";
@import "gjs_blocks";
@import "gjs_layers";
@import "gjs_selectors";
@import "gjs_modal";
@import "gjs_assets";

/********* File uploader **********/

.#{$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;
		##{$cm-prefix}title { color: #ddca7e;}
	}
	##{$cm-prefix}title {
	  background-color: $mainDkColor;
	  font-size: 12px;
	  padding: 5px 10px 3px;
	  text-align: right;
	}
}

/*************RTE****************/

@import 'gjs_rte';

/********* Spectrum **********/

.#{$app-prefix}editor-cont {
  .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 {
    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;
  }
}

.cm-s-hopscotch span.cm-error {
    color: #ffffff;
}