|
|
|
@ -44,11 +44,11 @@ $prefix: $app-prefix; |
|
|
|
|
|
|
|
@import "gjs_status"; |
|
|
|
|
|
|
|
$colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
(two, var(--grapes-secondary-color)), |
|
|
|
(three, var(--grapes-tertiary-color)), |
|
|
|
(four, var(--grapes-quaternary-color)), |
|
|
|
(danger, var(--grapes-color-red)); |
|
|
|
$colorsAll: (one, var(--gjs-primary-color)), |
|
|
|
(two, var(--gjs-secondary-color)), |
|
|
|
(three, var(--gjs-tertiary-color)), |
|
|
|
(four, var(--gjs-quaternary-color)), |
|
|
|
(danger, var(--gjs-color-red)); |
|
|
|
|
|
|
|
.#{$prefix} { |
|
|
|
@each $cnum, $ccol in $colorsAll { |
|
|
|
@ -71,29 +71,29 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
|
|
|
|
.#{$app-prefix}bg { |
|
|
|
&-main { |
|
|
|
background-color: var(--grapes-main-color); |
|
|
|
background-color: var(--gjs-main-color); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.#{$app-prefix}color { |
|
|
|
&-main { |
|
|
|
color: var(--grapes-font-color); |
|
|
|
fill: var(--grapes-font-color); |
|
|
|
color: var(--gjs-font-color); |
|
|
|
fill: var(--gjs-font-color); |
|
|
|
} |
|
|
|
|
|
|
|
&-active { |
|
|
|
color: var(--grapes-font-color-active); |
|
|
|
fill: var(--grapes-font-color-active); |
|
|
|
color: var(--gjs-font-color-active); |
|
|
|
fill: var(--gjs-font-color-active); |
|
|
|
} |
|
|
|
|
|
|
|
&-warn { |
|
|
|
color: var(--grapes-color-warn); |
|
|
|
fill: var(--grapes-color-warn); |
|
|
|
color: var(--gjs-color-warn); |
|
|
|
fill: var(--gjs-color-warn); |
|
|
|
} |
|
|
|
|
|
|
|
&-hl { |
|
|
|
color: var(--grapes-color-highlight); |
|
|
|
fill: var(--grapes-color-highlight); |
|
|
|
color: var(--gjs-color-highlight); |
|
|
|
fill: var(--gjs-color-highlight); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -138,7 +138,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
} |
|
|
|
|
|
|
|
.#{$app-prefix}drag-helper { |
|
|
|
background-color: var(--grapes-color-blue) !important; |
|
|
|
background-color: var(--gjs-color-blue) !important; |
|
|
|
pointer-events: none !important; |
|
|
|
position: absolute !important; |
|
|
|
z-index: 10 !important; |
|
|
|
@ -173,7 +173,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
|
|
|
|
// Custom scrollbars for Chrome |
|
|
|
.#{$app-prefix}editor-cont ::-webkit-scrollbar-track { |
|
|
|
background: var(--grapes-secondary-dark-color); |
|
|
|
background: var(--gjs-secondary-dark-color); |
|
|
|
} |
|
|
|
|
|
|
|
.#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb { |
|
|
|
@ -192,37 +192,37 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
// } |
|
|
|
|
|
|
|
:root { |
|
|
|
--grapes-main-color: #{$mainColor}; |
|
|
|
--grapes-primary-color: #{$primaryColor}; |
|
|
|
--grapes-secondary-color: #{$secondaryColor}; |
|
|
|
--grapes-tertiary-color: #{$tertiaryColor}; |
|
|
|
--grapes-quaternary-color: #{$quaternaryColor}; |
|
|
|
--grapes-font-color: #{$fontColor}; |
|
|
|
--grapes-font-color-active: #{$fontColorActive}; |
|
|
|
--grapes-main-dark-color: #{$mainDkColor}; |
|
|
|
--grapes-secondary-dark-color: #{$mainDklColor}; |
|
|
|
--grapes-main-light-color: #{$mainLhColor}; |
|
|
|
--grapes-secondary-light-color: #{$mainLhlColor}; |
|
|
|
--grapes-color-blue: #{$colorBlue}; |
|
|
|
--grapes-color-red: #{$colorRed}; |
|
|
|
--grapes-color-yellow: #{$colorYell}; |
|
|
|
--grapes-color-green: #{$colorGreen}; |
|
|
|
--grapes-left-width: #{$leftWidth}; |
|
|
|
--grapes-color-highlight: #{$colorHighlight}; |
|
|
|
--grapes-color-warn: #{$colorWarn}; |
|
|
|
--grapes-handle-margin: #{$hndlMargin}; |
|
|
|
--grapes-light-border: #{$lightBorder}; |
|
|
|
--grapes-arrow-color: #{$arrowColor}; |
|
|
|
--grapes-dark-text-shadow: #{$darkTextShadow}; |
|
|
|
--grapes-color-input-padding: #{$colorpSize}; |
|
|
|
--grapes-input-padding: #{$inputPadding}; // Has to be a single value |
|
|
|
--grapes-padding-elem-classmanager: #{$paddElClm}; |
|
|
|
--grapes-upload-padding: #{$uploadPadding}; |
|
|
|
--grapes-animation-duration: #{$animSpeed}; |
|
|
|
--grapes-main-font: #{$mainFont}; |
|
|
|
--grapes-font-size: #{$fontSize}; |
|
|
|
--grapes-placeholder-background-color: #{$placeholderColor}; |
|
|
|
--grapes-canvas-top: #{$canvasTop}; |
|
|
|
--gjs-main-color: #{$mainColor}; |
|
|
|
--gjs-primary-color: #{$primaryColor}; |
|
|
|
--gjs-secondary-color: #{$secondaryColor}; |
|
|
|
--gjs-tertiary-color: #{$tertiaryColor}; |
|
|
|
--gjs-quaternary-color: #{$quaternaryColor}; |
|
|
|
--gjs-font-color: #{$fontColor}; |
|
|
|
--gjs-font-color-active: #{$fontColorActive}; |
|
|
|
--gjs-main-dark-color: #{$mainDkColor}; |
|
|
|
--gjs-secondary-dark-color: #{$mainDklColor}; |
|
|
|
--gjs-main-light-color: #{$mainLhColor}; |
|
|
|
--gjs-secondary-light-color: #{$mainLhlColor}; |
|
|
|
--gjs-color-blue: #{$colorBlue}; |
|
|
|
--gjs-color-red: #{$colorRed}; |
|
|
|
--gjs-color-yellow: #{$colorYell}; |
|
|
|
--gjs-color-green: #{$colorGreen}; |
|
|
|
--gjs-left-width: #{$leftWidth}; |
|
|
|
--gjs-color-highlight: #{$colorHighlight}; |
|
|
|
--gjs-color-warn: #{$colorWarn}; |
|
|
|
--gjs-handle-margin: #{$hndlMargin}; |
|
|
|
--gjs-light-border: #{$lightBorder}; |
|
|
|
--gjs-arrow-color: #{$arrowColor}; |
|
|
|
--gjs-dark-text-shadow: #{$darkTextShadow}; |
|
|
|
--gjs-color-input-padding: #{$colorpSize}; |
|
|
|
--gjs-input-padding: #{$inputPadding}; // Has to be a single value |
|
|
|
--gjs-padding-elem-classmanager: #{$paddElClm}; |
|
|
|
--gjs-upload-padding: #{$uploadPadding}; |
|
|
|
--gjs-animation-duration: #{$animSpeed}; |
|
|
|
--gjs-main-font: #{$mainFont}; |
|
|
|
--gjs-font-size: #{$fontSize}; |
|
|
|
--gjs-placeholder-background-color: #{$placeholderColor}; |
|
|
|
--gjs-canvas-top: #{$canvasTop}; |
|
|
|
} |
|
|
|
|
|
|
|
.clear{ clear:both } |
|
|
|
@ -242,8 +242,8 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
} |
|
|
|
|
|
|
|
&editor { |
|
|
|
font-family: var(--grapes-main-font); |
|
|
|
font-size: var(--grapes-font-size); |
|
|
|
font-family: var(--gjs-main-font); |
|
|
|
font-size: var(--gjs-font-size); |
|
|
|
position: relative; |
|
|
|
box-sizing: border-box; |
|
|
|
height: 100%; |
|
|
|
@ -275,7 +275,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
|
|
|
|
.#{$com-prefix}badge, .#{$app-prefix}badge{ |
|
|
|
pointer-events: none; |
|
|
|
background-color: var(--grapes-color-blue); |
|
|
|
background-color: var(--gjs-color-blue); |
|
|
|
color: #fff; |
|
|
|
padding: 2px 5px; |
|
|
|
position: absolute; z-index: 1; |
|
|
|
@ -284,7 +284,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.#{$app-prefix}badge-warning{ |
|
|
|
background-color: var(--grapes-color-yellow); |
|
|
|
background-color: var(--gjs-color-yellow); |
|
|
|
} |
|
|
|
.#{$app-prefix}placeholder, |
|
|
|
.#{$com-prefix}placeholder, |
|
|
|
@ -300,14 +300,14 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
border-style: solid !important; |
|
|
|
outline: none; |
|
|
|
box-sizing: border-box; |
|
|
|
transition: top var(--grapes-animation-duration), left var(--grapes-animation-duration), |
|
|
|
width var(--grapes-animation-duration), height var(--grapes-animation-duration); |
|
|
|
transition: top var(--gjs-animation-duration), left var(--gjs-animation-duration), |
|
|
|
width var(--gjs-animation-duration), height var(--gjs-animation-duration); |
|
|
|
} |
|
|
|
|
|
|
|
.#{$app-prefix}placeholder.horizontal, |
|
|
|
.#{$com-prefix}placeholder.horizontal, |
|
|
|
.#{$nv-prefix}placeholder.horizontal { |
|
|
|
border-color: transparent var(--grapes-placeholder-background-color); |
|
|
|
border-color: transparent var(--gjs-placeholder-background-color); |
|
|
|
border-width: 3px 5px; |
|
|
|
margin: -3px 0 0; |
|
|
|
} |
|
|
|
@ -315,7 +315,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
.#{$app-prefix}placeholder.vertical, |
|
|
|
.#{$com-prefix}placeholder.vertical, |
|
|
|
.#{$nv-prefix}placeholder.vertical { |
|
|
|
border-color: var(--grapes-placeholder-background-color) transparent; |
|
|
|
border-color: var(--gjs-placeholder-background-color) transparent; |
|
|
|
border-width: 5px 3px; |
|
|
|
margin: 0 0 0 -3px; |
|
|
|
} |
|
|
|
@ -323,7 +323,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
.#{$app-prefix}placeholder-int, |
|
|
|
.#{$com-prefix}placeholder-int, |
|
|
|
.#{$nv-prefix}placeholder-int { |
|
|
|
background-color: var(--grapes-placeholder-background-color); |
|
|
|
background-color: var(--gjs-placeholder-background-color); |
|
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); |
|
|
|
height: 100%; width: 100%; |
|
|
|
pointer-events: none; |
|
|
|
@ -350,7 +350,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
@extend .no-select; |
|
|
|
|
|
|
|
font-weight: lighter; |
|
|
|
background-color: var(--grapes-secondary-dark-color); |
|
|
|
background-color: var(--gjs-secondary-dark-color); |
|
|
|
letter-spacing: 1px; |
|
|
|
padding: 9px 10px 9px 20px; |
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.25); |
|
|
|
@ -373,7 +373,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
float:left; |
|
|
|
|
|
|
|
> form { |
|
|
|
background-color: var(--grapes-secondary-dark-color); |
|
|
|
background-color: var(--gjs-secondary-dark-color); |
|
|
|
border: 2px dashed; |
|
|
|
border-radius: 3px; |
|
|
|
position: relative; |
|
|
|
@ -381,8 +381,8 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
margin-bottom: 15px; |
|
|
|
|
|
|
|
&.#{$am-prefix}hover { |
|
|
|
border: 2px solid var(--grapes-color-green); |
|
|
|
color: lighten-color(var(--grapes-color-green), 5%); |
|
|
|
border: 2px solid var(--gjs-color-green); |
|
|
|
color: lighten-color(var(--gjs-color-green), 5%); |
|
|
|
} |
|
|
|
|
|
|
|
&.#{$am-prefix}disabled{ |
|
|
|
@ -391,7 +391,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
|
|
|
|
##{$am-prefix}uploadFile{ |
|
|
|
@include opacity(0); |
|
|
|
padding: var(--grapes-upload-padding); |
|
|
|
padding: var(--gjs-upload-padding); |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
@ -399,7 +399,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
|
|
|
|
##{$am-prefix}title { |
|
|
|
position: absolute; |
|
|
|
padding: var(--grapes-upload-padding); |
|
|
|
padding: var(--gjs-upload-padding); |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -421,7 +421,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
|
|
|
|
&##{$cm-prefix}htmlmixed { |
|
|
|
padding-right: 10px; |
|
|
|
border-right: 1px solid var(--grapes-main-dark-color); |
|
|
|
border-right: 1px solid var(--gjs-main-dark-color); |
|
|
|
##{$cm-prefix}title { color: #a97d44;} |
|
|
|
} |
|
|
|
&##{$cm-prefix}css { |
|
|
|
@ -429,7 +429,7 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
##{$cm-prefix}title { color: #ddca7e;} |
|
|
|
} |
|
|
|
##{$cm-prefix}title { |
|
|
|
background-color: var(--grapes-main-dark-color); |
|
|
|
background-color: var(--gjs-main-dark-color); |
|
|
|
font-size: 12px; |
|
|
|
padding: 5px 10px 3px; |
|
|
|
text-align: right; |
|
|
|
@ -449,12 +449,12 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
.sp-hue{ left: 90%; } |
|
|
|
.sp-color{right: 15%;} |
|
|
|
.sp-container { |
|
|
|
border: 1px solid var(--grapes-main-dark-color); |
|
|
|
box-shadow: 0 0 7px var(--grapes-main-dark-color); |
|
|
|
border: 1px solid var(--gjs-main-dark-color); |
|
|
|
box-shadow: 0 0 7px var(--gjs-main-dark-color); |
|
|
|
border-radius: 3px; |
|
|
|
} |
|
|
|
.sp-picker-container{border:none;} |
|
|
|
.colpick_dark .colpick_color { outline: 1px solid var(--grapes-main-dark-color);} |
|
|
|
.colpick_dark .colpick_color { outline: 1px solid var(--gjs-main-dark-color);} |
|
|
|
.sp-cancel, .sp-cancel:hover { |
|
|
|
bottom: -8px; |
|
|
|
color: #777 !important; |
|
|
|
@ -484,9 +484,9 @@ $colorsAll: (one, var(--grapes-primary-color)), |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
.sp-container button, .sp-container button:hover, .sp-container button:active{ |
|
|
|
background: var(--grapes-main-dark-color); |
|
|
|
border-color: var(--grapes-main-dark-color); |
|
|
|
color: var(--grapes-font-color); |
|
|
|
background: var(--gjs-main-dark-color); |
|
|
|
border-color: var(--gjs-main-dark-color); |
|
|
|
color: var(--gjs-font-color); |
|
|
|
text-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
padding: 3px 5px; |
|
|
|
|
Artur Arseniev
2 years ago