Changing sass variables #881 (#882)

* Added !default to SASS color variables

* Added variable for icon path

* Small styling change in the icon variable

* Added default to the jse-icons variable
This commit is contained in:
petermanders89 2020-01-16 19:38:18 +01:00 committed by Jos de Jong
parent 0f031dc6cd
commit dab47eef75
6 changed files with 44 additions and 42 deletions

View File

@ -82,7 +82,7 @@
height: 24px; height: 24px;
padding: 0; padding: 0;
margin: 0 4px 0 0; margin: 0 4px 0 0;
background: url("./img/jsoneditor-icons.svg") 0 -72px; background: url($jse-icons) 0 -72px;
} }
} }
} }
@ -96,7 +96,7 @@
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-image: url("./img/jsoneditor-icons.svg"); background-image: url($jse-icons);
} }
.jsoneditor-text { .jsoneditor-text {
padding: 4px 0 4px 24px; padding: 4px 0 4px 24px;

View File

@ -130,7 +130,7 @@ div {
margin: 0; margin: 0;
border: none; border: none;
cursor: pointer; cursor: pointer;
background: transparent url("./img/jsoneditor-icons.svg"); background: transparent url($jse-icons);
&:focus { &:focus {
background-color: $jse-preview; background-color: $jse-preview;
outline: #e5e5e5 solid 1px; outline: #e5e5e5 solid 1px;
@ -150,7 +150,7 @@ div {
background: none; background: none;
} }
&.jsoneditor-dragarea { &.jsoneditor-dragarea {
background: url("./img/jsoneditor-icons.svg") -72px -72px; background: url($jse-icons) -72px -72px;
cursor: move; cursor: move;
} }
} }
@ -203,7 +203,7 @@ div {
height: 24px; height: 24px;
padding: 0; padding: 0;
margin: 0 4px 0 0; margin: 0 4px 0 0;
background: url("./img/jsoneditor-icons.svg") -168px -48px; background: url($jse-icons) -168px -48px;
} }
} }
} }
@ -530,11 +530,11 @@ pre.jsoneditor-preview,
} }
tr { tr {
.jsoneditor-schema-error { .jsoneditor-schema-error {
background: url("./img/jsoneditor-icons.svg") -168px -48px; background: url($jse-icons) -168px -48px;
} }
&.parse-error { &.parse-error {
.jsoneditor-schema-error { .jsoneditor-schema-error {
background: url("./img/jsoneditor-icons.svg") -25px 0px; background: url($jse-icons) -25px 0px;
} }
} }
} }

View File

@ -22,7 +22,7 @@
padding: 0; padding: 0;
border-radius: 2px; border-radius: 2px;
border: 1px solid transparent; border: 1px solid transparent;
background: transparent url('./img/jsoneditor-icons.svg'); background: transparent url($jse-icons);
color: $jse-white; color: $jse-white;
opacity: 0.8; opacity: 0.8;

View File

@ -25,7 +25,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
background: url("./img/jsoneditor-icons.svg"); background: url($jse-icons);
vertical-align: top; vertical-align: top;
&:hover { &:hover {

View File

@ -22,7 +22,7 @@
height: 24px; height: 24px;
padding: 0; padding: 0;
margin-top: 1px; margin-top: 1px;
background: url("./img/jsoneditor-icons.svg") -168px -48px; background: url($jse-icons) -168px -48px;
cursor: pointer; cursor: pointer;
} }
& > .jsoneditor-validation-error-count { & > .jsoneditor-validation-error-count {
@ -36,7 +36,7 @@
height: 24px; height: 24px;
padding: 0; padding: 0;
margin: 1px; margin: 1px;
background: url("./img/jsoneditor-icons.svg") -25px 0px; background: url($jse-icons) -25px 0px;
} }
.jsoneditor-array-info { .jsoneditor-array-info {
a { a {

View File

@ -1,39 +1,41 @@
$jse-white: #ffffff; $jse-white: #ffffff !default;
$jse-grey:#999999; $jse-grey:#999999 !default;
$jse-light-bg: #ebebeb; $jse-light-bg: #ebebeb !default;
$jse-blue: #3883fa; $jse-blue: #3883fa !default;
$jse-content-color: #1a1a1a; $jse-content-color: #1a1a1a !default;
$jse-string: #006000; $jse-string: #006000 !default;
$jse-number: #ee422e; $jse-number: #ee422e !default;
$jse-boolean: #ff8c00; $jse-boolean: #ff8c00 !default;
$jse-null: #004ed0; $jse-null: #004ed0 !default;
$jse-invalid: #000000; $jse-invalid: #000000 !default;
$jse-readonly: #808080; $jse-readonly: #808080 !default;
$jse-empty: #d3d3d3; $jse-empty: #d3d3d3 !default;
$jse-preview: #f5f5f5; $jse-preview: #f5f5f5 !default;
$jse-busy: #ffffab; $jse-busy: #ffffab !default;
$jse-busy-border-color: #ffee00; $jse-busy-border-color: #ffee00 !default;
$jse-error: #ee2e2e70; $jse-error: #ee2e2e70 !default;
$jse-separator: #e5e5e5; $jse-separator: #e5e5e5 !default;
$jse-highlight-bg: #ffee00; $jse-highlight-bg: #ffee00 !default;
$jse-highlight-border-color: #ffc700; $jse-highlight-border-color: #ffc700 !default;
$jse-popover-bg: #4c4c4c; $jse-popover-bg: #4c4c4c !default;
$jse-bar-bg: $jse-light-bg; $jse-bar-bg: $jse-light-bg !default;
$jse-bar-border: $jse-empty; $jse-bar-border: $jse-empty !default;
$jse-menu-color: $jse-empty; $jse-menu-color: $jse-empty !default;
$jse-contextmenu-color: #4d4d4d; $jse-contextmenu-color: #4d4d4d !default;
$jse-box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); $jse-box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3) !default;
$jse-box-shadow-sm: 0 0 5px rgba(0, 0, 0, 0.4); $jse-box-shadow-sm: 0 0 5px rgba(0, 0, 0, 0.4) !default;
$jse-box-shadow-inner: inset 0 0 10px rgba(128, 128, 128, 0.5); $jse-box-shadow-inner: inset 0 0 10px rgba(128, 128, 128, 0.5) !default;
$jse-date: #a1a1a1; $jse-date: #a1a1a1 !default;
$jse-font: arial, sans-serif; $jse-font: arial, sans-serif !default;
$jse-font-mono: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif; $jse-font-mono: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif !default;
$jse-font-size: 10pt; $jse-font-size: 10pt !default;;
$jse-icons: "./img/jsoneditor-icons.svg" !default;