open-consul/ui/packages/consul-ui/app/styles/components/code-editor/skin.scss

185 lines
3.2 KiB
SCSS

$syntax-light-grey: #dde3e7;
$syntax-light-gray: #a4a4a4;
$syntax-light-grey-blue: #6c7b81;
$syntax-dark-grey: #788290;
$syntax-faded-gray: #eaeaea;
// Product colors
$syntax-atlas: #127eff;
$syntax-vagrant: #2f88f7;
$syntax-consul: #69499a;
$syntax-terraform: #822ff7;
$syntax-serf: #dd4e58;
$syntax-packer: #1ddba3;
// Our colors
$syntax-gray: lighten($black, 89%);
$syntax-red: #ff3d3d;
$syntax-green: #39b54a;
$syntax-dark-gray: #535f73;
$syntax-gutter-grey: #2a2f36;
$syntax-yellow: $yellow-500;
.CodeMirror {
max-width: 1150px;
min-height: 300px;
height: auto;
/* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */
padding-bottom: 20px;
}
.CodeMirror-scroll {
overflow-x: hidden !important;
}
.CodeMirror-lint-tooltip {
background-color: #f9f9fa;
border: 1px solid $syntax-light-gray;
border-radius: 0;
color: lighten($black, 13%);
font-family: $typo-family-mono;
font-size: 13px;
padding: 7px 8px 9px;
}
.cm-s-hashi {
&.CodeMirror {
width: 100%;
background-color: $black !important;
color: #cfd2d1 !important;
border: none;
font-family: $typo-family-mono;
-webkit-font-smoothing: auto;
line-height: 1.4;
}
.CodeMirror-gutters {
color: $syntax-dark-grey;
background-color: $syntax-gutter-grey;
border: none;
}
.CodeMirror-cursor {
border-left: solid thin #f8f8f0;
}
.CodeMirror-linenumber {
color: #6d8a88;
}
&.CodeMirror-focused div.CodeMirror-selected {
background: rgb(33, 66, 131);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: rgb(33, 66, 131);
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
background: rgba(255, 255, 255, 0.1);
}
span.cm-comment {
color: $syntax-light-grey;
}
span.cm-string,
span.cm-string-2 {
color: $syntax-packer;
}
span.cm-number {
color: $syntax-serf;
}
span.cm-variable {
color: lighten($syntax-consul, 20%);
}
span.cm-variable-2 {
color: lighten($syntax-consul, 20%);
}
span.cm-def {
color: $syntax-packer;
}
span.cm-operator {
color: $syntax-gray;
}
span.cm-keyword {
color: $syntax-yellow;
}
span.cm-atom {
color: $syntax-serf;
}
span.cm-meta {
color: $syntax-packer;
}
span.cm-tag {
color: $syntax-packer;
}
span.cm-attribute {
color: #9fca56;
}
span.cm-qualifier {
color: #9fca56;
}
span.cm-property {
color: lighten($syntax-consul, 20%);
}
span.cm-variable-3 {
color: #9fca56;
}
span.cm-builtin {
color: #9fca56;
}
.CodeMirror-activeline-background {
background: #101213;
}
.CodeMirror-matchingbracket {
text-decoration: underline;
color: $white !important;
}
}
.readonly-codemirror {
.CodeMirror-cursors {
display: none;
}
.cm-s-hashi {
span {
color: $syntax-light-grey;
}
span.cm-string,
span.cm-string-2 {
color: $syntax-faded-gray;
}
span.cm-number {
color: lighten($syntax-dark-gray, 30%);
}
span.cm-property {
color: $white;
}
span.cm-variable-2 {
color: $syntax-light-grey-blue;
}
}
}