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

Up CSS variables prefix

pull/5463/head
Artur Arseniev 2 years ago
parent
2197d6a5b9
commit
c1a6315850
14 changed files with 160 additions and 160 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. 8
      docs/getting-started.md
  3. 8
      src/styles/scss/_gjs_assets.scss
  4. 26
      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. 2
      src/styles/scss/_gjs_variables.scss
  14. 140
      src/styles/scss/main.scss

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

File diff suppressed because one or more lines are too long

8
docs/getting-started.md
View File

@ -708,10 +708,10 @@ There is also a bunch of [CSS custom properties (variables)](https://developer.m
For example, you could achieve the same result as above by doing this: For example, you could achieve the same result as above by doing this:
```css ```css
:root { :root {
--grapes-primary-color: #78366a; --gjs-primary-color: #78366a;
--grapes-secondary-color: rgba(255, 255, 255, 0.7); --gjs-secondary-color: rgba(255, 255, 255, 0.7);
--grapes-tertiary-color: #ec5896; --gjs-tertiary-color: #ec5896;
--grapes-quaternary-color: #ec5896; --gjs-quaternary-color: #ec5896;
} }
``` ```

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: var(--grapes-main-color); background-color: var(--gjs-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-color(var(--grapes-main-dark-color), 3%); border-bottom: 1px solid darken-color(var(--gjs-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: var(--grapes-main-light-color); background-color: var(--gjs-main-light-color);
} }
.#{$am-prefix}assets-cont { .#{$am-prefix}assets-cont {
background-color: var(--grapes-secondary-dark-color); background-color: var(--gjs-secondary-dark-color);
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;

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

@ -192,14 +192,14 @@ $guide_pad: 5px !default;
.#{$cv-prefix}canvas { .#{$cv-prefix}canvas {
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - var(--grapes-left-width)); width: calc(100% - var(--gjs-left-width));
height: calc(100% - var(--grapes-canvas-top)); height: calc(100% - var(--gjs-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: var(--grapes-canvas-top); top: var(--gjs-canvas-top);
&-bg { &-bg {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
@ -246,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 var(--grapes-color-blue); outline: 1px solid var(--gjs-color-blue);
outline-offset: -1px; outline-offset: -1px;
pointer-events: none; pointer-events: none;
width: 100%; width: 100%;
@ -254,11 +254,11 @@ $guide_pad: 5px !default;
} }
.#{$app-prefix}highlighter-warning { .#{$app-prefix}highlighter-warning {
outline: 3px solid var(--grapes-color-yellow); outline: 3px solid var(--gjs-color-yellow);
} }
.#{$app-prefix}highlighter-sel { .#{$app-prefix}highlighter-sel {
outline: 2px solid var(--grapes-color-blue); outline: 2px solid var(--gjs-color-blue);
outline-offset: -2px; outline-offset: -2px;
} }
@ -303,7 +303,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}toolbar { .#{$app-prefix}toolbar {
position: absolute; position: absolute;
background-color: var(--grapes-color-blue); background-color: var(--gjs-color-blue);
white-space: nowrap; white-space: nowrap;
color: white; color: white;
z-index: 10; z-index: 10;
@ -359,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 var(--grapes-color-blue); border: 3px solid var(--gjs-color-blue);
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: #fff; background-color: #fff;
margin: var(--grapes-handle-margin); margin: var(--gjs-handle-margin);
} }
.#{$app-prefix}resizer-h-tl { .#{$app-prefix}resizer-h-tl {
@ -380,7 +380,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h-tc { .#{$app-prefix}resizer-h-tc {
top: 0; top: 0;
margin: var(--grapes-handle-margin) auto; margin: var(--gjs-handle-margin) auto;
left: 0; left: 0;
right: 0; right: 0;
cursor: ns-resize; cursor: ns-resize;
@ -388,14 +388,14 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h-cl { .#{$app-prefix}resizer-h-cl {
left: 0; left: 0;
margin: auto var(--grapes-handle-margin); margin: auto var(--gjs-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 var(--grapes-handle-margin); margin: auto var(--gjs-handle-margin);
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -410,7 +410,7 @@ $guide_pad: 5px !default;
.#{$app-prefix}resizer-h-bc { .#{$app-prefix}resizer-h-bc {
bottom: 0; bottom: 0;
margin: var(--grapes-handle-margin) auto; margin: var(--gjs-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 var(--grapes-main-dark-color); border: 1px solid var(--gjs-main-dark-color);
border-radius: 100%; border-radius: 100%;
background-color: var(--grapes-font-color); background-color: var(--gjs-font-color);
cursor: pointer; cursor: pointer;
} }
@mixin rangeTrackStyle() { @mixin rangeTrackStyle() {
background-color: var(--grapes-main-dark-color); background-color: var(--gjs-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 var(--grapes-secondary-light-color); text-shadow: 0 0 0 var(--gjs-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: var(--grapes-input-padding); padding: var(--gjs-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: var(--grapes-main-color); background-color: var(--gjs-main-color);
color: var(--grapes-font-color); color: var(--gjs-font-color);
} }
.#{$app-prefix}field { .#{$app-prefix}field {
background-color: var(--grapes-main-dark-color); background-color: var(--gjs-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: var(--grapes-input-padding); right: var(--gjs-input-padding);
border-top: 4px solid var(--grapes-arrow-color); border-top: 4px solid var(--gjs-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: calc(var(--grapes-input-padding) - 2px); right: calc(var(--gjs-input-padding) - 2px);
top: 0; top: 0;
} }
@ -156,20 +156,20 @@
.#{$app-prefix}field-color { .#{$app-prefix}field-color {
input { input {
padding-right: var(--grapes-color-input-padding); padding-right: var(--gjs-color-input-padding);
box-sizing: border-box; box-sizing: border-box;
} }
} }
.#{$app-prefix}field-colorp { .#{$app-prefix}field-colorp {
border-left: 1px solid var(--grapes-main-dark-color); border-left: 1px solid var(--gjs-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: var(--grapes-color-input-padding); width: var(--gjs-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: var(--grapes-font-color); background-color: var(--gjs-font-color);
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
width: 100%; width: 100%;
box-shadow: 0 0 1px var(--grapes-main-dark-color); box-shadow: 0 0 1px var(--gjs-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 var(--grapes-dark-text-shadow); border-left: 1px solid var(--gjs-dark-text-shadow);
&:first-child { &:first-child {
border: none; border: none;
} }
&:hover { &:hover {
background: var(--grapes-main-dark-color); background: var(--gjs-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: var(--grapes-input-padding); padding: var(--gjs-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: var(--grapes-arrow-color); color: var(--gjs-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 var(--grapes-arrow-color); border-top: 4px solid var(--gjs-arrow-color);
bottom: 4px; bottom: 4px;
cursor: pointer; cursor: pointer;
} }
.#{$app-prefix}field-arrow-u { .#{$app-prefix}field-arrow-u {
border-bottom: 4px solid var(--grapes-arrow-color); border-bottom: 4px solid var(--gjs-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: var(--grapes-main-light-color); background-color: var(--gjs-main-light-color);
border-radius: 2px; border-radius: 2px;
padding: 3px 6px; padding: 3px 6px;
padding: var(--grapes-input-padding); padding: var(--gjs-input-padding);
cursor: pointer; cursor: pointer;
border: none; border: none;
&:active { &:active {
background-color: var(--grapes-main-light-color); background-color: var(--gjs-main-light-color);
} }
} }
@ -369,7 +369,7 @@
.#{$app-prefix}add-trasp { .#{$app-prefix}add-trasp {
background: none; background: none;
border: none; border: none;
color: var(--grapes-font-color); color: var(--gjs-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 var(--grapes-color-yellow); border: 1px solid var(--gjs-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: var(--grapes-font-size); font-size: var(--gjs-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: var(--grapes-color-green); background-color: var(--gjs-color-green);
} }
} }
} }

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

@ -1,6 +1,6 @@
.#{$mdl-prefix} { .#{$mdl-prefix} {
&container { &container {
font-family: var(--grapes-main-font); font-family: var(--gjs-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 var(--grapes-main-dark-color); border-bottom: 1px solid var(--gjs-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: calc(100% - var(--grapes-left-width)); width: calc(100% - var(--gjs-left-width));
left: 0; left: 0;
top: 0; top: 0;
box-shadow: 0 0 5px var(--grapes-main-dark-color); box-shadow: 0 0 5px var(--gjs-main-dark-color);
} }
&options { &options {
right: var(--grapes-left-width); right: var(--gjs-left-width);
top: 0; top: 0;
} }
&views { &views {
border-bottom: 2px solid var(--grapes-main-dark-color); border-bottom: 2px solid var(--gjs-main-dark-color);
right: 0; right: 0;
width: var(--grapes-left-width); width: var(--gjs-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: var(--grapes-left-width); width: var(--gjs-left-width);
overflow: auto; overflow: auto;
box-shadow: 0 0 5px var(--grapes-main-dark-color); box-shadow: 0 0 5px var(--gjs-main-dark-color);
} }
} }

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

@ -7,7 +7,7 @@
} }
&toolbar-ui { &toolbar-ui {
border: 1px solid var(--grapes-main-dark-color); border: 1px solid var(--gjs-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 var(--grapes-main-dark-color); border-right: 1px solid var(--gjs-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: var(--grapes-main-light-color); background-color: var(--gjs-main-light-color);
} }
} }
&active { &active {
background-color: var(--grapes-main-light-color); background-color: var(--gjs-main-light-color);
} }
&disabled { &disabled {
color: var(--grapes-main-light-color); color: var(--gjs-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: var(--grapes-font-size); font-size: var(--gjs-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: var(--grapes-font-color); color: var(--gjs-font-color);
padding: var(--grapes-padding-elem-classmanager); padding: var(--gjs-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: var(--grapes-font-size); font-size: var(--gjs-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 var(--grapes-secondary-light-color); text-shadow: 0 0 0 var(--gjs-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: var(--grapes-secondary-light-color); color: var(--gjs-secondary-light-color);
cursor: pointer; cursor: pointer;
} }
@ -154,14 +154,14 @@
} }
.#{$sm-prefix}u-arrow { .#{$sm-prefix}u-arrow {
border-bottom: 4px solid var(--grapes-secondary-light-color); border-bottom: 4px solid var(--gjs-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 var(--grapes-secondary-light-color); border-top: 4px solid var(--gjs-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: var(--grapes-main-dark-color); background-color: var(--gjs-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 var(--grapes-main-light-color); box-shadow: 1px 1px 0 var(--gjs-main-light-color);
color: var(--grapes-secondary-light-color); color: var(--gjs-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: var(--grapes-secondary-dark-color); background-color: var(--gjs-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 var(--grapes-main-dark-color); border-left: 1px solid var(--gjs-main-dark-color);
&:first-child { &:first-child {
border: none; border: none;
} }
&:hover { &:hover {
background: var(--grapes-main-dark-color); background: var(--gjs-main-dark-color);
} }
} }
@ -283,18 +283,18 @@
} }
.#{$sm-prefix}btn { .#{$sm-prefix}btn {
background-color: lighten-color(var(--grapes-main-dark-color), 13%); background-color: lighten-color(var(--gjs-main-dark-color), 13%);
border-radius: 2px; border-radius: 2px;
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; box-shadow: 1px 1px 0 lighten-color(var(--gjs-main-dark-color), 2%), 1px 1px 0 lighten-color(var(--gjs-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: var(--grapes-font-color); color: var(--gjs-font-color);
box-sizing: border-box; box-sizing: border-box;
text-shadow: -1px -1px 0 var(--grapes-main-dark-color); text-shadow: -1px -1px 0 var(--gjs-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: var(--grapes-light-border); background-color: var(--gjs-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-color(var(--grapes-light-border), 1%); border: 1px solid darken-color(var(--gjs-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: var(--grapes-font-color); background-color: var(--gjs-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 var(--grapes-main-dark-color); box-shadow: 0 0 1px var(--gjs-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 var(--grapes-main-dark-color); border-bottom: 1px solid var(--gjs-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: var(--grapes-font-size); font-size: var(--gjs-font-size);
} }
.#{$app-prefix}label { .#{$app-prefix}label {

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

@ -68,4 +68,4 @@ $mainFont: Helvetica, sans-serif !default;
$fontSize: 0.75rem !default; $fontSize: 0.75rem !default;
/* Tools */ /* Tools */
$placeholderColor: var(--grapes-color-green) !default; $placeholderColor: var(--gjs-color-green) !default;

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

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