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;
padding: 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;
padding: 0;
margin: 0;
background-image: url("./img/jsoneditor-icons.svg");
background-image: url($jse-icons);
}
.jsoneditor-text {
padding: 4px 0 4px 24px;

View File

@ -130,7 +130,7 @@ div {
margin: 0;
border: none;
cursor: pointer;
background: transparent url("./img/jsoneditor-icons.svg");
background: transparent url($jse-icons);
&:focus {
background-color: $jse-preview;
outline: #e5e5e5 solid 1px;
@ -150,7 +150,7 @@ div {
background: none;
}
&.jsoneditor-dragarea {
background: url("./img/jsoneditor-icons.svg") -72px -72px;
background: url($jse-icons) -72px -72px;
cursor: move;
}
}
@ -203,7 +203,7 @@ div {
height: 24px;
padding: 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 {
.jsoneditor-schema-error {
background: url("./img/jsoneditor-icons.svg") -168px -48px;
background: url($jse-icons) -168px -48px;
}
&.parse-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;
border-radius: 2px;
border: 1px solid transparent;
background: transparent url('./img/jsoneditor-icons.svg');
background: transparent url($jse-icons);
color: $jse-white;
opacity: 0.8;

View File

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

View File

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

View File

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