@ -1,53 +1,38 @@
/* stylelint-disable */
@import ' codemirror/lib/codemirror ' ;
@import ' codemirror/theme/hopscotch ' ;
@import ' spectrum.scss ' ;
@import ' gjs_variables.scss ' ;
@function darken-color ( $color , $percentage ) {
@return color-mix ( in srgb , $color , black $percentage ) ;
}
@function lighten-color ( $color , $percentage ) {
@return color-mix ( in srgb , $color , white $percentage ) ;
}
@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 ' ;
@use ' sass:meta ' ;
@use ' codemirror/lib/codemirror ' ;
@use ' codemirror/theme/hopscotch ' ;
@use ' gjs_vars.scss ' ;
@use ' gjs_main_mixins ' ;
@use ' gjs_status ' ;
@use ' gjs_root ' ;
@use ' gjs_traits ' ;
@use ' gjs_canvas ' ;
@use ' gjs_commands ' ;
@use ' gjs_panels ' ;
@use ' gjs_inputs ' ;
@use ' gjs_devices ' ;
@use ' gjs_style_manager ' ;
@use ' gjs_category_general ' ;
@use ' gjs_blocks ' ;
@use ' gjs_layers ' ;
@use ' gjs_selectors ' ;
@use ' gjs_modal ' ;
@use ' gjs_assets ' ;
@use ' gjs_file_uploader ' ;
@use ' gjs_code_manager ' ;
@use ' gjs_rte ' ;
@use ' gjs_spectrum ' ;
/ / spectrum . scss is now called from _gjs_spectrum . scss
/ / @ use ' spectrum.scss ' ;
$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 } {
. #{ gjs_vars . $prefix } {
@each $cnum , $ccol in $colorsAll {
& #{ $cnum } {
& - bg {
@ -65,70 +50,14 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
}
}
. #{ $app-prefix } bg {
& - main {
background-color : var ( -- gjs-main-color ) ;
}
}
. #{ $app-prefix } color {
& - main {
color : var ( -- gjs-font-color ) ;
fill : var ( -- gjs-font-color ) ;
}
& - active {
color : var ( -- gjs-font-color-active ) ;
fill : var ( -- gjs-font-color-active ) ;
}
& - warn {
color : var ( -- gjs-color-warn ) ;
fill : var ( -- gjs-color-warn ) ;
}
& - hl {
color : var ( -- gjs-color-highlight ) ;
fill : var ( -- gjs-color-highlight ) ;
}
}
. #{ $app-prefix } invis-invis ,
. #{ $app-prefix } no-app {
background-color : transparent ;
border : none ;
color : inherit ;
}
. #{ $app-prefix } no-app {
height : 10 px ;
}
. opac50 {
@include opacity ( 0 .5 ) ;
}
. #{ $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 {
. #{ gjs_vars . $app-prefix } bdrag {
pointer-events : none !important ;
position : absolute !important ;
z-index : 10 !important ;
width : auto ;
}
. #{ $app-prefix } drag-helper {
. #{ gjs_vars . $app-prefix } drag-helper {
background-color : var ( -- gjs-color-blue ) !important ;
pointer-events : none !important ;
position : absolute !important ;
@ -141,21 +70,21 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
outline : none !important ;
}
. #{ $app-prefix } grabbing ,
. #{ $app-prefix } grabbing * {
@extend . #{ $app-prefix } no-user-select ;
. #{ gjs_vars . $app-prefix } grabbing ,
. #{ gjs_vars . $app-prefix } grabbing * {
@extend . #{ gjs_vars . $app-prefix } no-user-select ;
cursor : grabbing !important ;
cursor : - webkit-grabbing !important ;
}
. #{ $app-prefix } grabbing {
. #{ gjs_vars . $app-prefix } grabbing {
overflow : hidden ;
}
. #{ $app-prefix } off-prv {
@extend . #{ $app-prefix } color-main ;
@extend . #{ $app-prefix } bg-main ;
. #{ gjs_vars . $app-prefix } off-prv {
@extend . #{ gjs_vars . $app-prefix } color-main ;
@extend . #{ gjs_vars . $app-prefix } bg-main ;
position : relative ;
z-index : 10 ;
padding : 5 px ;
@ -163,15 +92,15 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
}
/ / Custom scrollbars for Chrome
. #{ $app-prefix } editor-cont : : -webkit-scrollbar-track {
. #{ gjs_vars . $app-prefix } editor-cont : : -webkit-scrollbar-track {
background : var ( -- gjs-secondary-dark-color ) ;
}
. #{ $app-prefix } editor-cont : : -webkit-scrollbar-thumb {
. #{ gjs_vars . $app-prefix } editor-cont : : -webkit-scrollbar-thumb {
background-color : rgba ( 255 , 255 , 255 , 0 .2 ) ;
}
. #{ $app-prefix } editor-cont : : -webkit-scrollbar {
. #{ gjs_vars . $app-prefix } editor-cont : : -webkit-scrollbar {
width : 8 px ;
}
@ -182,58 +111,14 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
/ / initial-value : #{ $inputPadding } ;
/ / }
: root {
--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-soft-light-color : #{ $softLhColor } ;
--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 } ;
--gjs-flex-item-gap : 5 px ;
}
. clear {
clear : both ;
}
. no-select {
@include user-select ( none ) ;
}
. #{ $app-prefix } {
. #{ gjs_vars . $app-prefix } {
& no-touch-actions {
touch-action : none ;
}
& disabled {
@include user-select ( none ) ;
@include opacity ( 0 .5 ) ;
@include gjs_main_mixins . user-select ( none ) ;
@include gjs_main_mixins . opacity ( 0 .5 ) ;
}
& editor {
@ -245,311 +130,17 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
}
}
. #{ $app-prefix } freezed ,
. #{ $nv-prefix } freezed {
@include opacity ( 0 .5 ) ;
. #{ gjs_vars . $app-prefix } freezed ,
. #{ gjs_vars . $nv-prefix } freezed {
@include gjs_main_mixins . opacity ( 0 .5 ) ;
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 : 1 px dashed #888 ;
outline-offset : - 2 px ;
box-sizing : border-box ;
}
. #{ $com-prefix } no-select ,
. #{ $com-prefix } no-select img {
@extend . no-select ;
}
. #{ $com-prefix } badge ,
. #{ $app-prefix } badge {
pointer-events : none ;
background-color : var ( -- gjs-color-blue ) ;
color : #fff ;
padding : 2 px 5 px ;
position : absolute ;
z-index : 1 ;
font-size : 12 px ;
outline : none ;
display : none ;
}
. #{ $app-prefix } badge-warning {
background-color : var ( -- gjs-color-yellow ) ;
}
. #{ $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 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 ( -- gjs-placeholder-background-color ) ;
border-width : 3 px 5 px ;
margin : - 3 px 0 0 ;
}
. #{ $app-prefix } placeholder . vertical ,
. #{ $com-prefix } placeholder . vertical ,
. #{ $nv-prefix } placeholder . vertical {
border-color : var ( -- gjs-placeholder-background-color ) transparent ;
border-width : 5 px 3 px ;
margin : 0 0 0 - 3 px ;
}
. #{ $app-prefix } placeholder-int ,
. #{ $com-prefix } placeholder-int ,
. #{ $nv-prefix } placeholder-int {
background-color : var ( -- gjs-placeholder-background-color ) ;
box-shadow : 0 0 3 px rgba ( 0 , 0 , 0 , 0 .2 ) ;
height : 100 % ;
width : 100 % ;
pointer-events : none ;
padding : 1 .5 px ;
outline : none ;
}
@import ' gjs_panels ' ;
/*********** Components *************/
@import ' gjs_inputs ' ;
@import ' gjs_devices ' ;
/********* General **********/
. #{ $app-prefix } category-open {
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0 .25 ) ;
}
. #{ $app-prefix } category-title {
@extend . no-select ;
font-weight : lighter ;
background-color : var ( -- gjs-secondary-dark-color ) ;
letter-spacing : 1 px ;
padding : 9 px 10 px 9 px 20 px ;
border-bottom : 1 px 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 : var ( -- gjs-secondary-dark-color ) ;
border : 2 px dashed ;
border-radius : 3 px ;
position : relative ;
text-align : center ;
margin-bottom : 15 px ;
& . #{ $am-prefix } hover {
border : 2 px solid var ( -- gjs-color-green ) ;
color : lighten-color ( var ( -- gjs-color-green ) , 5 % ) ;
}
& . #{ $am-prefix } disabled {
border-color : red ;
}
# #{ $am-prefix } uploadFile {
@include opacity ( 0 ) ;
padding : var ( -- gjs-upload-padding ) ;
width : 100 % ;
box-sizing : border-box ;
}
}
# #{ $am-prefix } title {
position : absolute ;
padding : var ( -- gjs-upload-padding ) ;
width : 100 % ;
}
}
/********* Code Manager **********/
. #{ $cm-prefix } editor-c {
float : left ;
box-sizing : border-box ;
width : 50 % ;
. CodeMirror {
height : 450 px ;
}
}
. #{ $cm-prefix } editor {
font-size : 12 px ;
& # #{ $cm-prefix } htmlmixed {
padding-right : 10 px ;
border-right : 1 px solid var ( -- gjs-main-dark-color ) ;
# #{ $cm-prefix } title {
color : #a97d44 ;
}
}
& # #{ $cm-prefix } css {
padding-left : 10 px ;
# #{ $cm-prefix } title {
color : #ddca7e ;
}
}
# #{ $cm-prefix } title {
background-color : var ( -- gjs-main-dark-color ) ;
font-size : 12 px ;
padding : 5 px 10 px 3 px ;
text-align : right ;
}
}
/*************RTE****************/
@import ' gjs_rte ' ;
/********* Spectrum **********/
. #{ $app-prefix } editor-sp {
border : 1 px solid var ( -- gjs-main-dark-color ) ;
box-shadow : 0 0 7 px var ( -- gjs-main-dark-color ) ;
border-radius : 3 px ;
}
. #{ $app-prefix } editor-sp {
. 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-picker-container {
border : none ;
}
. colpick_dark . colpick_color {
outline : 1 px solid var ( -- gjs-main-dark-color ) ;
}
. sp-cancel ,
. sp-cancel : hover {
bottom : - 8 px ;
color : #777 !important ;
font-size : 25 px ;
left : 0 ;
position : absolute ;
text-decoration : none ;
}
. sp-alpha-handle {
background-color : #ccc ;
border : 1 px solid #555 ;
width : 4 px ;
}
. sp-color ,
. sp-hue {
border : 1 px solid #333333 ;
}
. sp-slider {
background-color : #ccc ;
border : 1 px solid #555 ;
height : 3 px ;
left : - 4 px ;
width : 22 px ;
}
. sp-dragger {
background : transparent ;
box-shadow : 0 0 0 1 px #111 ;
}
. sp-button-container {
float : none ;
width : 100 % ;
position : relative ;
text-align : right ;
. sp-choose ,
. sp-choose : hover ,
. sp-choose : active {
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 : 3 px 5 px ;
}
}
. sp-palette-container {
border : none ;
float : none ;
margin : 0 ;
padding : 5 px 10 px 0 ;
}
. sp-palette . sp-thumb-el ,
. sp-palette . sp-thumb-el : hover {
border : 1 px 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 {
. #{ gjs_vars . $app-prefix } hidden {
display : none ;
}
@keyframes #{ $app-prefix } slide-down {
@keyframes #{ gjs_vars . $app-prefix } slide-down {
0 % {
transform : translate ( 0 , - 3 rem ) ;
opacity : 0 ;
@ -560,7 +151,7 @@ $colorsAll: (one, var(--gjs-primary-color)), (two, var(--gjs-secondary-color)),
}
}
@keyframes #{ $app-prefix } slide-up {
@keyframes #{ gjs_vars . $app-prefix } slide-up {
0 % {
transform : translate ( 0 , 0 ) ;
opacity : 1 ;
Chris Benjamin
11 months ago
GitHub