tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add CSS variables (#5437) 

* Add CSS variables + remove unused SCSS variables

* Prefixing css variables

* Updating the doc

* Replace darken() and lighten() sass functions by using CSS color-mix() runtime function so it can be used with css variables
pull/5463/head
Quentin 2 years ago
committed by GitHub
parent
ff68c888cd
commit
2197d6a5b9
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 189 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/css/grapes.min.css
  2. 13
      docs/getting-started.md
  3. 8
      src/styles/scss/_gjs_assets.scss
  4. 31
      src/styles/scss/_gjs_canvas.scss
  5. 52
      src/styles/scss/_gjs_inputs.scss
  6. 6
      src/styles/scss/_gjs_layers.scss
  7. 4
      src/styles/scss/_gjs_modal.scss
  8. 14
      src/styles/scss/_gjs_panels.scss
  9. 10
      src/styles/scss/_gjs_rte.scss
  10. 6
      src/styles/scss/_gjs_selectors.scss
  11. 38
      src/styles/scss/_gjs_style_manager.scss
  12. 4
      src/styles/scss/_gjs_traits.scss
  13. 15
      src/styles/scss/_gjs_variables.scss
  14. 126
      src/styles/scss/main.scss

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

13
docs/getting-started.md
View File

@ -703,6 +703,19 @@ To complete our builder let's customize its color palette and to make it more vi
} }
``` ```
There is also a bunch of [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that you can use to customize the styles of the editor.
For example, you could achieve the same result as above by doing this:
```css
:root {
--grapes-primary-color: #78366a;
--grapes-secondary-color: rgba(255, 255, 255, 0.7);
--grapes-tertiary-color: #ec5896;
--grapes-quaternary-color: #ec5896;
}
```
And here is our final result: And here is our final result:
<Demo id="final-result"> <Demo id="final-result">

8
src/styles/scss/_gjs_assets.scss
View File

@ -48,7 +48,7 @@
position: relative; position: relative;
height: 70px; height: 70px;
width: 30%; width: 30%;
background-color: $mainColor; background-color: var(--grapes-main-color);
border-radius: 2px; border-radius: 2px;
float: left; float: left;
overflow: hidden; overflow: hidden;
@ -102,7 +102,7 @@
} }
.#{$am-prefix}asset { .#{$am-prefix}asset {
border-bottom: 1px solid darken($mainDkColor, 3%); border-bottom: 1px solid darken-color(var(--grapes-main-dark-color), 3%);
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -115,11 +115,11 @@
} }
.#{$am-prefix}highlight { .#{$am-prefix}highlight {
background-color: $mainLhColor; background-color: var(--grapes-main-light-color);
} }
.#{$am-prefix}assets-cont { .#{$am-prefix}assets-cont {
background-color: $mainDklColor; background-color: var(--grapes-secondary-dark-color);
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;

31
src/styles/scss/_gjs_canvas.scss
View File

@ -1,5 +1,4 @@
$frameAnimation: 0.35s ease !default; $frameAnimation: 0.35s ease !default;
$canvasTop: 40px !default;
$guide_pad: 5px !default; $guide_pad: 5px !default;
.#{$prefix} { .#{$prefix} {
@ -193,14 +192,14 @@ $guide_pad: 5px !default;
.#{$cv-prefix}canvas { .#{$cv-prefix}canvas {
box-sizing: border-box; box-sizing: border-box;
width: (100% - $leftWidth); width: calc(100% - var(--grapes-left-width));
height: calc(100% - #{$canvasTop}); height: calc(100% - var(--grapes-canvas-top));
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
left: 0; left: 0;
top: $canvasTop; top: var(--grapes-canvas-top);
&-bg { &-bg {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
@ -247,7 +246,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}highlighter, .#{$app-prefix}highlighter,
.#{$app-prefix}highlighter-sel { .#{$app-prefix}highlighter-sel {
position: absolute; position: absolute;
outline: 1px solid $colorBlue; outline: 1px solid var(--grapes-color-blue);
outline-offset: -1px; outline-offset: -1px;
pointer-events: none; pointer-events: none;
width: 100%; width: 100%;
@ -255,11 +254,11 @@ $guide_pad: 5px !default;
} }
.#{$app-prefix}highlighter-warning { .#{$app-prefix}highlighter-warning {
outline: 3px solid $colorYell; outline: 3px solid var(--grapes-color-yellow);
} }
.#{$app-prefix}highlighter-sel { .#{$app-prefix}highlighter-sel {
outline: 2px solid $colorBlue; outline: 2px solid var(--grapes-color-blue);
outline-offset: -2px; outline-offset: -2px;
} }
@ -304,7 +303,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}toolbar { .#{$app-prefix}toolbar {
position: absolute; position: absolute;
background-color: $colorBlue; background-color: var(--grapes-color-blue);
white-space: nowrap; white-space: nowrap;
color: white; color: white;
z-index: 10; z-index: 10;
@ -335,10 +334,6 @@ $guide_pad: 5px !default;
z-index: 9; z-index: 9;
} }
.#{$app-prefix}margin-v {
}
.#{$app-prefix}margin-v-el, .#{$app-prefix}margin-v-el,
.#{$app-prefix}padding-v-el, .#{$app-prefix}padding-v-el,
.#{$app-prefix}fixedmargin-v-el, .#{$app-prefix}fixedmargin-v-el,
@ -364,11 +359,11 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h { .#{$app-prefix}resizer-h {
pointer-events: all; pointer-events: all;
position: absolute; position: absolute;
border: 3px solid $colorBlue; border: 3px solid var(--grapes-color-blue);
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: #fff; background-color: #fff;
margin: $hndlMargin; margin: var(--grapes-handle-margin);
} }
.#{$app-prefix}resizer-h-tl { .#{$app-prefix}resizer-h-tl {
@ -385,7 +380,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h-tc { .#{$app-prefix}resizer-h-tc {
top: 0; top: 0;
margin: $hndlMargin auto; margin: var(--grapes-handle-margin) auto;
left: 0; left: 0;
right: 0; right: 0;
cursor: ns-resize; cursor: ns-resize;
@ -393,14 +388,14 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h-cl { .#{$app-prefix}resizer-h-cl {
left: 0; left: 0;
margin: auto $hndlMargin; margin: auto var(--grapes-handle-margin);
top: 0; top: 0;
bottom: 0; bottom: 0;
cursor: ew-resize; cursor: ew-resize;
} }
.#{$app-prefix}resizer-h-cr { .#{$app-prefix}resizer-h-cr {
margin: auto $hndlMargin; margin: auto var(--grapes-handle-margin);
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -415,7 +410,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h-bc { .#{$app-prefix}resizer-h-bc {
bottom: 0; bottom: 0;
margin: $hndlMargin auto; margin: var(--grapes-handle-margin) auto;
left: 0; left: 0;
right: 0; right: 0;
cursor: ns-resize; cursor: ns-resize;

52
src/styles/scss/_gjs_inputs.scss
View File

@ -3,14 +3,14 @@
@mixin rangeThumbStyle() { @mixin rangeThumbStyle() {
height: 10px; height: 10px;
width: 10px; width: 10px;
border: 1px solid $mainDkColor; border: 1px solid var(--grapes-main-dark-color);
border-radius: 100%; border-radius: 100%;
background-color: $fontColor; background-color: var(--grapes-font-color);
cursor: pointer; cursor: pointer;
} }
@mixin rangeTrackStyle() { @mixin rangeTrackStyle() {
background-color: $mainDkColor; background-color: var(--grapes-main-dark-color);
border-radius: 1px; border-radius: 1px;
margin-top: 3px; margin-top: 3px;
height: 3px; height: 3px;
@ -37,7 +37,7 @@
&select:-moz-focusring, &select:-moz-focusring,
&select select:-moz-focusring { &select select:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 $mainLhlColor; text-shadow: 0 0 0 var(--grapes-secondary-light-color);
} }
&input:focus, &input:focus,
@ -60,7 +60,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
position: relative; position: relative;
padding: $inputPadding; padding: var(--grapes-input-padding);
z-index: 1; z-index: 1;
&:focus { &:focus {
@ -96,12 +96,12 @@
.#{$sm-prefix}select option, .#{$sm-prefix}select option,
.#{$app-prefix}fields option, .#{$app-prefix}fields option,
.#{$sm-prefix}unit option { .#{$sm-prefix}unit option {
background-color: $mainColor; background-color: var(--grapes-main-color);
color: $fontColor; color: var(--grapes-font-color);
} }
.#{$app-prefix}field { .#{$app-prefix}field {
background-color: $mainDkColor; background-color: var(--grapes-main-dark-color);
border: none; border: none;
box-shadow: none; box-shadow: none;
border-radius: 2px; border-radius: 2px;
@ -126,8 +126,8 @@
bottom: 0; bottom: 0;
top: 0; top: 0;
margin: auto; margin: auto;
right: $inputPadding; right: var(--grapes-input-padding);
border-top: 4px solid $arrowColor; border-top: 4px solid var(--grapes-arrow-color);
position: absolute; position: absolute;
height: 0; height: 0;
width: 0; width: 0;
@ -144,7 +144,7 @@
width: 9px; width: 9px;
z-index: 10; z-index: 10;
bottom: 0; bottom: 0;
right: $inputPadding - 2px; right: calc(var(--grapes-input-padding) - 2px);
top: 0; top: 0;
} }
@ -156,20 +156,20 @@
.#{$app-prefix}field-color { .#{$app-prefix}field-color {
input { input {
padding-right: $colorpSize; padding-right: var(--grapes-color-input-padding);
box-sizing: border-box; box-sizing: border-box;
} }
} }
.#{$app-prefix}field-colorp { .#{$app-prefix}field-colorp {
border-left: 1px solid $mainDkColor; border-left: 1px solid var(--grapes-main-dark-color);
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding: 2px; padding: 2px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: $colorpSize; width: var(--grapes-color-input-padding);
z-index: 10; z-index: 10;
.#{$app-prefix}checker-bg { .#{$app-prefix}checker-bg {
@ -188,11 +188,11 @@
} }
.#{$app-prefix}field-color-picker { .#{$app-prefix}field-color-picker {
background-color: $fontColor; background-color: var(--grapes-font-color);
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
width: 100%; width: 100%;
box-shadow: 0 0 1px $mainDkColor; box-shadow: 0 0 1px var(--grapes-main-dark-color);
border-radius: 1px; border-radius: 1px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -220,14 +220,14 @@
.#{$app-prefix}radio-item { .#{$app-prefix}radio-item {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
border-left: 1px solid $darkTextShadow; border-left: 1px solid var(--grapes-dark-text-shadow);
&:first-child { &:first-child {
border: none; border: none;
} }
&:hover { &:hover {
background: $mainDkColor; background: var(--grapes-main-dark-color);
} }
input { input {
@ -246,7 +246,7 @@
.#{$app-prefix}radio-item-label { .#{$app-prefix}radio-item-label {
cursor: pointer; cursor: pointer;
display: block; display: block;
padding: $inputPadding; padding: var(--grapes-input-padding);
} }
.#{$app-prefix}field-units { .#{$app-prefix}field-units {
@ -262,7 +262,7 @@
right: 10px; right: 10px;
top: 3px; top: 3px;
font-size: 10px; font-size: 10px;
color: $arrowColor; color: var(--grapes-arrow-color);
cursor: pointer; cursor: pointer;
} }
@ -277,13 +277,13 @@
width: 0; width: 0;
border-left: 3px solid transparent; border-left: 3px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid $arrowColor; border-top: 4px solid var(--grapes-arrow-color);
bottom: 4px; bottom: 4px;
cursor: pointer; cursor: pointer;
} }
.#{$app-prefix}field-arrow-u { .#{$app-prefix}field-arrow-u {
border-bottom: 4px solid $arrowColor; border-bottom: 4px solid var(--grapes-arrow-color);
border-top: none; border-top: none;
top: 4px; top: 4px;
} }
@ -339,15 +339,15 @@
.#{$app-prefix}btn { .#{$app-prefix}btn {
&-prim { &-prim {
color: inherit; color: inherit;
background-color: $mainLhColor; background-color: var(--grapes-main-light-color);
border-radius: 2px; border-radius: 2px;
padding: 3px 6px; padding: 3px 6px;
padding: $inputPadding; padding: var(--grapes-input-padding);
cursor: pointer; cursor: pointer;
border: none; border: none;
&:active { &:active {
background-color: $mainLhColor; background-color: var(--grapes-main-light-color);
} }
} }
@ -369,7 +369,7 @@
.#{$app-prefix}add-trasp { .#{$app-prefix}add-trasp {
background: none; background: none;
border: none; border: none;
color: $fontColor; color: var(--grapes-font-color);
cursor: pointer; cursor: pointer;
font-size: 1em; font-size: 1em;
border-radius: 2px; border-radius: 2px;

6
src/styles/scss/_gjs_layers.scss
View File

@ -3,7 +3,7 @@ $layerNameSpacing: 5px !default;
.#{$nv-prefix} { .#{$nv-prefix} {
&selected-parent { &selected-parent {
border: 1px solid $colorYell; border: 1px solid var(--grapes-color-yellow);
} }
&opac50 { &opac50 {
@ -15,7 +15,7 @@ $layerNameSpacing: 5px !default;
text-align: left; text-align: left;
position: relative; position: relative;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
font-size: $fontSizeS; font-size: var(--grapes-font-size);
display: grid; display: grid;
&-hidden { &-hidden {
@ -160,7 +160,7 @@ $layerNameSpacing: 5px !default;
padding: 1px; padding: 1px;
&.#{$nv-prefix}insert { &.#{$nv-prefix}insert {
background-color: $colorGreen; background-color: var(--grapes-color-green);
} }
} }
} }

4
src/styles/scss/_gjs_modal.scss
View File

@ -1,6 +1,6 @@
.#{$mdl-prefix} { .#{$mdl-prefix} {
&container { &container {
font-family: $mainFont; font-family: var(--grapes-main-font);
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
@ -48,7 +48,7 @@
&header { &header {
position: relative; position: relative;
border-bottom: 1px solid $mainDkColor; border-bottom: 1px solid var(--grapes-main-dark-color);
padding: 15px 15px 7px; padding: 15px 15px 7px;
} }
} }

14
src/styles/scss/_gjs_panels.scss
View File

@ -16,30 +16,30 @@
} }
&commands { &commands {
width: (100% - $leftWidth); width: calc(100% - var(--grapes-left-width));
left: 0; left: 0;
top: 0; top: 0;
box-shadow: 0 0 5px $mainDkColor; box-shadow: 0 0 5px var(--grapes-main-dark-color);
} }
&options { &options {
right: $leftWidth; right: var(--grapes-left-width);
top: 0; top: 0;
} }
&views { &views {
border-bottom: 2px solid $mainDkColor; border-bottom: 2px solid var(--grapes-main-dark-color);
right: 0; right: 0;
width: $leftWidth; width: var(--grapes-left-width);
z-index: 4; z-index: 4;
&-container { &-container {
height: 100%; height: 100%;
padding: 42px 0 0; padding: 42px 0 0;
right: 0; right: 0;
width: $leftWidth; width: var(--grapes-left-width);
overflow: auto; overflow: auto;
box-shadow: 0 0 5px $mainDkColor; box-shadow: 0 0 5px var(--grapes-main-dark-color);
} }
} }

10
src/styles/scss/_gjs_rte.scss
View File

@ -7,7 +7,7 @@
} }
&toolbar-ui { &toolbar-ui {
border: 1px solid $mainDkColor; border: 1px solid var(--grapes-main-dark-color);
border-radius: 3px; border-radius: 3px;
} }
@ -21,7 +21,7 @@
justify-content: center; justify-content: center;
padding: 5px; padding: 5px;
width: 25px; width: 25px;
border-right: 1px solid $mainDkColor; border-right: 1px solid var(--grapes-main-dark-color);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@ -31,15 +31,15 @@
} }
&:hover { &:hover {
background-color: $mainLhColor; background-color: var(--grapes-main-light-color);
} }
} }
&active { &active {
background-color: $mainLhColor; background-color: var(--grapes-main-light-color);
} }
&disabled { &disabled {
color: $mainLhColor; color: var(--grapes-main-light-color);
cursor: not-allowed; cursor: not-allowed;
&:hover { &:hover {
background-color: unset; background-color: unset;

6
src/styles/scss/_gjs_selectors.scss
View File

@ -75,7 +75,7 @@
} }
.#{$clm-prefix}tags { .#{$clm-prefix}tags {
font-size: $fontSizeS; font-size: var(--grapes-font-size);
padding: 10px 5px; padding: 10px 5px;
##{$clm-prefix}sel { ##{$clm-prefix}sel {
@ -106,8 +106,8 @@
##{$clm-prefix}new { ##{$clm-prefix}new {
@extend .#{$app-prefix}invis-invis; @extend .#{$app-prefix}invis-invis;
color: $fontColor; color: var(--grapes-font-color);
padding: $paddElClm; padding: var(--grapes-padding-elem-classmanager);
display: none; display: none;
} }

38
src/styles/scss/_gjs_style_manager.scss
View File

@ -46,7 +46,7 @@
} }
&properties { &properties {
font-size: $fontSizeS; font-size: var(--grapes-font-size);
padding: 10px 5px; padding: 10px 5px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -109,7 +109,7 @@
select:-moz-focusring { select:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 $mainLhlColor; text-shadow: 0 0 0 var(--grapes-secondary-light-color);
} }
input:focus, input:focus,
@ -122,7 +122,7 @@
right: 10px; right: 10px;
top: 3px; top: 3px;
font-size: 10px; font-size: 10px;
color: $mainLhlColor; color: var(--grapes-secondary-light-color);
cursor: pointer; cursor: pointer;
} }
@ -154,14 +154,14 @@
} }
.#{$sm-prefix}u-arrow { .#{$sm-prefix}u-arrow {
border-bottom: 4px solid $mainLhlColor; border-bottom: 4px solid var(--grapes-secondary-light-color);
top: 4px; top: 4px;
} }
.#{$clm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow,
.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-arrow,
.#{$sm-prefix}d-s-arrow { .#{$sm-prefix}d-s-arrow {
border-top: 4px solid $mainLhlColor; border-top: 4px solid var(--grapes-secondary-light-color);
bottom: 4px; bottom: 4px;
} }
@ -175,10 +175,10 @@
&.#{$sm-prefix}integer, &.#{$sm-prefix}integer,
&.#{$sm-prefix}list, &.#{$sm-prefix}list,
&.#{$sm-prefix}select { &.#{$sm-prefix}select {
background-color: $mainDkColor; background-color: var(--grapes-main-dark-color);
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 0 $mainLhColor; box-shadow: 1px 1px 0 var(--grapes-main-light-color);
color: $mainLhlColor; color: var(--grapes-secondary-light-color);
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 5px; padding: 0 5px;
@ -201,7 +201,7 @@
} }
&.#{$sm-prefix}composite { &.#{$sm-prefix}composite {
background-color: $mainDklColor; background-color: var(--grapes-secondary-dark-color);
border: 1px solid rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.25);
} }
@ -244,14 +244,14 @@
.#{$sm-prefix}list .#{$sm-prefix}el { .#{$sm-prefix}list .#{$sm-prefix}el {
float: left; float: left;
border-left: 1px solid $mainDkColor; border-left: 1px solid var(--grapes-main-dark-color);
&:first-child { &:first-child {
border: none; border: none;
} }
&:hover { &:hover {
background: $mainDkColor; background: var(--grapes-main-dark-color);
} }
} }
@ -283,18 +283,18 @@
} }
.#{$sm-prefix}btn { .#{$sm-prefix}btn {
background-color: lighten($mainDkColor, 13%); background-color: lighten-color(var(--grapes-main-dark-color), 13%);
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset; box-shadow: 1px 1px 0 lighten-color(var(--grapes-main-dark-color), 2%), 1px 1px 0 lighten-color(var(--grapes-main-dark-color), 17%) inset;
padding: 5px; padding: 5px;
position: relative; position: relative;
text-align: center; text-align: center;
height: auto; height: auto;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
color: $fontColor; color: var(--grapes-font-color);
box-sizing: border-box; box-sizing: border-box;
text-shadow: -1px -1px 0 $mainDkColor; text-shadow: -1px -1px 0 var(--grapes-main-dark-color);
border: none; border: none;
@include opacity(0.85); @include opacity(0.85);
@ -316,12 +316,12 @@
} }
.#{$sm-prefix}preview-file { .#{$sm-prefix}preview-file {
background-color: $lightBorder; background-color: var(--grapes-light-border);
border-radius: 2px; border-radius: 2px;
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 1px solid darken($lightBorder, 1%); border: 1px solid darken-color(var(--grapes-light-border), 1%);
padding: 3px 20px; padding: 3px 20px;
&-cnt { &-cnt {
@ -458,12 +458,12 @@
} }
.#{$sm-prefix}color-picker { .#{$sm-prefix}color-picker {
background-color: $fontColor; background-color: var(--grapes-font-color);
cursor: pointer; cursor: pointer;
height: 16px; height: 16px;
width: 100%; width: 100%;
margin-top: -16px; margin-top: -16px;
box-shadow: 0 0 1px $mainDkColor; box-shadow: 0 0 1px var(--grapes-main-dark-color);
border-radius: 1px; border-radius: 1px;
} }

4
src/styles/scss/_gjs_traits.scss
View File

@ -1,6 +1,6 @@
.#{$app-prefix} { .#{$app-prefix} {
&traits-label { &traits-label {
border-bottom: 1px solid $mainDkColor; border-bottom: 1px solid var(--grapes-main-dark-color);
font-weight: lighter; font-weight: lighter;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px; padding: 10px;
@ -37,7 +37,7 @@
text-align: left; text-align: left;
&s { &s {
font-size: $fontSizeS; font-size: var(--grapes-font-size);
} }
.#{$app-prefix}label { .#{$app-prefix}label {

15
src/styles/scss/_gjs_variables.scss
View File

@ -12,7 +12,7 @@ $sm-prefix: $app-prefix + 'sm-' !default;
$cv-prefix: $app-prefix + 'cv-' !default; $cv-prefix: $app-prefix + 'cv-' !default;
$clm-prefix: $app-prefix + 'clm-' !default; $clm-prefix: $app-prefix + 'clm-' !default;
$trt-prefix: $app-prefix + 'trt-' !default; $trt-prefix: $app-prefix + 'trt-' !default;
$cui-cls: $app-prefix + 'cui' !default; $cui-cls: $app-prefix + 'cui' !default;
/* /*
New Pattern Color System New Pattern Color System
@ -33,14 +33,10 @@ $mainDkColor: rgba(0, 0, 0, 0.2) !default;/* darken($mainColor, 4%) - #383
$mainDklColor: rgba(0, 0, 0, 0.1) !default; $mainDklColor: rgba(0, 0, 0, 0.1) !default;
$mainLhColor: rgba(255, 255, 255, 0.1) !default; /* #515151 */ $mainLhColor: rgba(255, 255, 255, 0.1) !default; /* #515151 */
$mainLhlColor: rgba(255, 255, 255, 0.7) !default; $mainLhlColor: rgba(255, 255, 255, 0.7) !default;
$fontColorDk: #777 !default;
$colorBlue: #3b97e3 !default; $colorBlue: #3b97e3 !default;
$colorRed: #dd3636 !default; $colorRed: #dd3636 !default;
$colorYell: #ffca6f !default; $colorYell: #ffca6f !default;
$colorGreen: #62c462 !default; $colorGreen: #62c462 !default;
$tagBg: #804f7b !default;
$secColor: $tagBg !default;
$imageCompDim: 50px !default;
$leftWidth: 15% !default; $leftWidth: 15% !default;
/* Color Helpers */ /* Color Helpers */
@ -49,18 +45,16 @@ $colorWarn: #ffca6f !default;
/* Canvas */ /* Canvas */
$hndlMargin: -5px !default; $hndlMargin: -5px !default;
$canvasTop: 40px !default;
/* Components / Inputs */ /* Components / Inputs */
$lightBorder: rgba(255, 255, 255, 0.05) !default; $lightBorder: rgba(255, 255, 255, 0.05) !default;
$inputFontColor: $mainLhlColor !default; /* #d5d5d5 */
$arrowColor: $mainLhlColor !default; /* b1b1b1 */ $arrowColor: $mainLhlColor !default; /* b1b1b1 */
$darkTextShadow: $mainDkColor !default; /* #252525 */ $darkTextShadow: $mainDkColor !default; /* #252525 */
$darkBorder: rgba(0, 0, 0, 0.15) !default; /* 303030 */
$colorpSize: 22px !default; $colorpSize: 22px !default;
$inputPadding: 5px !default; // Has to be a single value $inputPadding: 5px !default; // Has to be a single value
/* Class manager */ /* Class manager */
$addBtnBg: lighten($mainDkColor, 10%) !default;
$paddElClm: 5px 6px !default; $paddElClm: 5px 6px !default;
/* File uploader */ /* File uploader */
@ -71,8 +65,7 @@ $animSpeed: 0.2s !default;
/* Fonts */ /* Fonts */
$mainFont: Helvetica, sans-serif !default; $mainFont: Helvetica, sans-serif !default;
$fontSize: 0.7rem !default; $fontSize: 0.75rem !default;
$fontSizeS: 0.75rem !default;
/* Tools */ /* Tools */
$placeholderColor: $colorGreen !default; $placeholderColor: var(--grapes-color-green) !default;

126
src/styles/scss/main.scss
View File

@ -5,6 +5,14 @@
@import "spectrum.scss"; @import "spectrum.scss";
@import "gjs_variables.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) { @mixin user-select($v) {
-moz-user-select: $v; -moz-user-select: $v;
-khtml-user-select: $v; -khtml-user-select: $v;
@ -36,11 +44,11 @@ $prefix: $app-prefix;
@import "gjs_status"; @import "gjs_status";
$colorsAll: (one, $primaryColor), $colorsAll: (one, var(--grapes-primary-color)),
(two, $secondaryColor), (two, var(--grapes-secondary-color)),
(three, $tertiaryColor), (three, var(--grapes-tertiary-color)),
(four, $quaternaryColor), (four, var(--grapes-quaternary-color)),
(danger, $colorRed); (danger, var(--grapes-color-red));
.#{$prefix} { .#{$prefix} {
@each $cnum, $ccol in $colorsAll { @each $cnum, $ccol in $colorsAll {
@ -63,29 +71,29 @@ $colorsAll: (one, $primaryColor),
.#{$app-prefix}bg { .#{$app-prefix}bg {
&-main { &-main {
background-color: $mainColor; background-color: var(--grapes-main-color);
} }
} }
.#{$app-prefix}color { .#{$app-prefix}color {
&-main { &-main {
color: $fontColor; color: var(--grapes-font-color);
fill: $fontColor; fill: var(--grapes-font-color);
} }
&-active { &-active {
color: $fontColorActive; color: var(--grapes-font-color-active);
fill: $fontColorActive; fill: var(--grapes-font-color-active);
} }
&-warn { &-warn {
color: $colorWarn; color: var(--grapes-color-warn);
fill: $colorWarn; fill: var(--grapes-color-warn);
} }
&-hl { &-hl {
color: $colorHighlight; color: var(--grapes-color-highlight);
fill: $colorHighlight; fill: var(--grapes-color-highlight);
} }
} }
@ -130,7 +138,7 @@ $colorsAll: (one, $primaryColor),
} }
.#{$app-prefix}drag-helper { .#{$app-prefix}drag-helper {
background-color: $colorBlue !important; background-color: var(--grapes-color-blue) !important;
pointer-events: none !important; pointer-events: none !important;
position: absolute !important; position: absolute !important;
z-index: 10 !important; z-index: 10 !important;
@ -165,7 +173,7 @@ $colorsAll: (one, $primaryColor),
// Custom scrollbars for Chrome // Custom scrollbars for Chrome
.#{$app-prefix}editor-cont ::-webkit-scrollbar-track { .#{$app-prefix}editor-cont ::-webkit-scrollbar-track {
background: $mainDklColor; background: var(--grapes-secondary-dark-color);
} }
.#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb { .#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb {
@ -177,6 +185,46 @@ $colorsAll: (one, $primaryColor),
} }
/********************* MAIN ************************/ /********************* MAIN ************************/
// @property --input-padding {
// syntax: "<length>";
// inherits: false;
// initial-value: #{$inputPadding};
// }
: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};
}
.clear{ clear:both } .clear{ clear:both }
.no-select{ .no-select{
@ -194,8 +242,8 @@ $colorsAll: (one, $primaryColor),
} }
&editor { &editor {
font-family: $mainFont; font-family: var(--grapes-main-font);
font-size: $fontSizeS; font-size: var(--grapes-font-size);
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
@ -227,7 +275,7 @@ $colorsAll: (one, $primaryColor),
.#{$com-prefix}badge, .#{$app-prefix}badge{ .#{$com-prefix}badge, .#{$app-prefix}badge{
pointer-events: none; pointer-events: none;
background-color: $colorBlue; background-color: var(--grapes-color-blue);
color: #fff; color: #fff;
padding: 2px 5px; padding: 2px 5px;
position: absolute; z-index: 1; position: absolute; z-index: 1;
@ -236,7 +284,7 @@ $colorsAll: (one, $primaryColor),
display: none; display: none;
} }
.#{$app-prefix}badge-warning{ .#{$app-prefix}badge-warning{
background-color: $colorYell; background-color: var(--grapes-color-yellow);
} }
.#{$app-prefix}placeholder, .#{$app-prefix}placeholder,
.#{$com-prefix}placeholder, .#{$com-prefix}placeholder,
@ -252,14 +300,14 @@ $colorsAll: (one, $primaryColor),
border-style: solid !important; border-style: solid !important;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
transition: top $animSpeed, left $animSpeed, transition: top var(--grapes-animation-duration), left var(--grapes-animation-duration),
width $animSpeed, height $animSpeed; width var(--grapes-animation-duration), height var(--grapes-animation-duration);
} }
.#{$app-prefix}placeholder.horizontal, .#{$app-prefix}placeholder.horizontal,
.#{$com-prefix}placeholder.horizontal, .#{$com-prefix}placeholder.horizontal,
.#{$nv-prefix}placeholder.horizontal { .#{$nv-prefix}placeholder.horizontal {
border-color: transparent $placeholderColor; border-color: transparent var(--grapes-placeholder-background-color);
border-width: 3px 5px; border-width: 3px 5px;
margin: -3px 0 0; margin: -3px 0 0;
} }
@ -267,7 +315,7 @@ $colorsAll: (one, $primaryColor),
.#{$app-prefix}placeholder.vertical, .#{$app-prefix}placeholder.vertical,
.#{$com-prefix}placeholder.vertical, .#{$com-prefix}placeholder.vertical,
.#{$nv-prefix}placeholder.vertical { .#{$nv-prefix}placeholder.vertical {
border-color: $placeholderColor transparent; border-color: var(--grapes-placeholder-background-color) transparent;
border-width: 5px 3px; border-width: 5px 3px;
margin: 0 0 0 -3px; margin: 0 0 0 -3px;
} }
@ -275,7 +323,7 @@ $colorsAll: (one, $primaryColor),
.#{$app-prefix}placeholder-int, .#{$app-prefix}placeholder-int,
.#{$com-prefix}placeholder-int, .#{$com-prefix}placeholder-int,
.#{$nv-prefix}placeholder-int { .#{$nv-prefix}placeholder-int {
background-color: $placeholderColor; background-color: var(--grapes-placeholder-background-color);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
height: 100%; width: 100%; height: 100%; width: 100%;
pointer-events: none; pointer-events: none;
@ -302,7 +350,7 @@ $colorsAll: (one, $primaryColor),
@extend .no-select; @extend .no-select;
font-weight: lighter; font-weight: lighter;
background-color: $mainDklColor; background-color: var(--grapes-secondary-dark-color);
letter-spacing: 1px; letter-spacing: 1px;
padding: 9px 10px 9px 20px; padding: 9px 10px 9px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25);
@ -325,7 +373,7 @@ $colorsAll: (one, $primaryColor),
float:left; float:left;
> form { > form {
background-color: $mainDklColor; background-color: var(--grapes-secondary-dark-color);
border: 2px dashed; border: 2px dashed;
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
@ -333,8 +381,8 @@ $colorsAll: (one, $primaryColor),
margin-bottom: 15px; margin-bottom: 15px;
&.#{$am-prefix}hover { &.#{$am-prefix}hover {
border: 2px solid $colorGreen; border: 2px solid var(--grapes-color-green);
color: lighten($colorGreen, 5%); /*#7ee07e*/ color: lighten-color(var(--grapes-color-green), 5%);
} }
&.#{$am-prefix}disabled{ &.#{$am-prefix}disabled{
@ -343,7 +391,7 @@ $colorsAll: (one, $primaryColor),
##{$am-prefix}uploadFile{ ##{$am-prefix}uploadFile{
@include opacity(0); @include opacity(0);
padding: $uploadPadding; padding: var(--grapes-upload-padding);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@ -351,7 +399,7 @@ $colorsAll: (one, $primaryColor),
##{$am-prefix}title { ##{$am-prefix}title {
position: absolute; position: absolute;
padding: $uploadPadding; padding: var(--grapes-upload-padding);
width: 100%; width: 100%;
} }
} }
@ -373,7 +421,7 @@ $colorsAll: (one, $primaryColor),
&##{$cm-prefix}htmlmixed { &##{$cm-prefix}htmlmixed {
padding-right: 10px; padding-right: 10px;
border-right: 1px solid $mainDkColor; border-right: 1px solid var(--grapes-main-dark-color);
##{$cm-prefix}title { color: #a97d44;} ##{$cm-prefix}title { color: #a97d44;}
} }
&##{$cm-prefix}css { &##{$cm-prefix}css {
@ -381,7 +429,7 @@ $colorsAll: (one, $primaryColor),
##{$cm-prefix}title { color: #ddca7e;} ##{$cm-prefix}title { color: #ddca7e;}
} }
##{$cm-prefix}title { ##{$cm-prefix}title {
background-color: $mainDkColor; background-color: var(--grapes-main-dark-color);
font-size: 12px; font-size: 12px;
padding: 5px 10px 3px; padding: 5px 10px 3px;
text-align: right; text-align: right;
@ -401,12 +449,12 @@ $colorsAll: (one, $primaryColor),
.sp-hue{ left: 90%; } .sp-hue{ left: 90%; }
.sp-color{right: 15%;} .sp-color{right: 15%;}
.sp-container { .sp-container {
border: 1px solid $mainDkColor; border: 1px solid var(--grapes-main-dark-color);
box-shadow: 0 0 7px $mainDkColor; box-shadow: 0 0 7px var(--grapes-main-dark-color);
border-radius: 3px; border-radius: 3px;
} }
.sp-picker-container{border:none;} .sp-picker-container{border:none;}
.colpick_dark .colpick_color { outline: 1px solid $mainDkColor;} .colpick_dark .colpick_color { outline: 1px solid var(--grapes-main-dark-color);}
.sp-cancel, .sp-cancel:hover { .sp-cancel, .sp-cancel:hover {
bottom: -8px; bottom: -8px;
color: #777 !important; color: #777 !important;
@ -436,9 +484,9 @@ $colorsAll: (one, $primaryColor),
text-align: right; text-align: right;
} }
.sp-container button, .sp-container button:hover, .sp-container button:active{ .sp-container button, .sp-container button:hover, .sp-container button:active{
background: $mainDkColor; background: var(--grapes-main-dark-color);
border-color: $mainDkColor; border-color: var(--grapes-main-dark-color);
color: $fontColor; color: var(--grapes-font-color);
text-shadow: none; text-shadow: none;
box-shadow: none; box-shadow: none;
padding: 3px 5px; padding: 3px 5px;

Write Preview
Loading…
Cancel
Save