Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Organize code mirror themes into separate sheets

pull/10616/head
Alex P 2018-05-21 16:12:29 -07:00
parent 7b26809521
commit f004fe78bd
4 changed files with 204 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/src/style/components/code-mirror/_hints.scss Normal file
View File

@ -0,0 +1,35 @@
/*
CodeMirror Hints Styles
------------------------------------------------------------------------------
*/
.CodeMirror-hints {
position: absolute;
z-index: 10;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8);
border-radius: $radius;
font-size: 12px;
font-family: $code-font;
font-weight: 600;
max-height: 20em;
overflow-y: auto;
@include gradient-h($c-star, $c-pool);
}
li.CodeMirror-hint {
margin: 0;
padding: 6px 7px;
line-height: 12px;
white-space: pre;
color: $c-neutrino;
cursor: pointer;
}
li.CodeMirror-hint-active {
@include gradient-h($c-comet, $c-laser);
color: $g20-white;
}

95
ui/src/style/components/code-mirror/_tickscript.scss Normal file
View File

@ -0,0 +1,95 @@
/*
CodeMirror "TICKscript" Theme
------------------------------------------------------------------------------
Intended for use with the TICKscript CodeMirror Mode
*/
.cm-s-tickscript {
.cm-keyword {
color: $c-comet;
}
.cm-operator {
color: $c-dreamsicle;
}
.cm-variable-2 {
color: #80CBC4;
}
.cm-variable-3,
.cm-type {
color: $c-laser;
}
.cm-builtin {
color: #DECB6B;
}
.cm-atom {
color: $c-viridian;
}
.cm-number {
color: $c-daisy;
}
.cm-def {
color: rgba(233, 237, 237, 1);
}
.cm-string {
color: $c-krypton;
}
.cm-string-2 {
color: #80CBC4;
}
.cm-comment {
color: $g10-wolf;
}
.cm-variable {
color: $c-laser;
}
.cm-tag {
color: #80CBC4;
}
.cm-meta {
color: #80CBC4;
}
.cm-attribute {
color: #FFCB6B;
}
.cm-property {
color: #80CBAE;
}
.cm-qualifier {
color: #DECB6B;
}
.cm-variable-3,
.cm-type {
color: #DECB6B;
}
.cm-tag {
color: rgba(255, 83, 112, 1);
}
.cm-error {
color: rgba(255, 255, 255, 1.0);
background-color: #EC5F67;
}
.CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
}

45
ui/src/style/components/code-mirror/_time-machine.scss Normal file
View File

@ -0,0 +1,45 @@
/*
CodeMirror "Time Machine" Theme
------------------------------------------------------------------------------
Intended for use with the IFQL CodeMirror Mode
*/
.cm-s-time-machine {
color: $g11-sidewalk;
.cm-variable {
color: $c-pool;
font-weight: 700;
}
.cm-function,
.cm-pipe-forward {
color: $c-comet;
font-weight: 700;
}
.cm-arrow-function,
.cm-function-arg {
color: #ff4d96;
}
.cm-operator {
color: $g15-platinum;
}
.cm-argument {
color: $g11-sidewalk;
}
.cm-string-single,
.cm-string-double {
color: $c-honeydew;
}
.cm-boolean {
color: $c-viridian;
}
.cm-null {
color: $c-dreamsicle;
}
.cm-number {
color: $c-hydrogen;
}
.cm-comment {
color: $g8-storm;
}
}

173
ui/src/style/components/code-mirror/theme.scss
View File

@ -1,10 +1,6 @@
/*
Name: CHRONOGRAF YO
Author: Michael Kaminsky (http://github.com/mkaminsky11)
Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
CodeMirror Styles
------------------------------------------------------------------------------
*/
.react-codemirror2 {
@ -12,12 +8,13 @@
width: 100%;
height: 100%;
}
.cm-s-material.CodeMirror {
.CodeMirror {
border-radius: 0 0 $radius $radius;
font-family: $code-font;
background-color: transparent;
color: $g13-mist;
font-weight: 600;
font-weight: 500;
font-size: 13px;
height: 100%;
}
@ -29,12 +26,12 @@
@include custom-scrollbar-round($g0-obsidian, $g6-smoke);
}
.cm-s-material .CodeMirror-gutters {
.CodeMirror-gutters {
@include gradient-v($g2-kevlar, $g0-obsidian);
border: none;
}
.cm-s-material .CodeMirror-gutters .CodeMirror-gutter {
.CodeMirror-gutters .CodeMirror-gutter {
background-color: fade-out($g4-onyx, 0.75);
height: calc(100% + 30px);
}
@ -43,166 +40,54 @@
width: 60px;
}
.cm-s-material.CodeMirror .CodeMirror-sizer {
.CodeMirror .CodeMirror-sizer {
margin-left: 60px;
}
.cm-s-material.CodeMirror .CodeMirror-linenumber.CodeMirror-gutter-elt {
.CodeMirror .CodeMirror-linenumber.CodeMirror-gutter-elt {
padding-right: 9px;
width: 46px;
color: $g8-storm;
}
.cm-s-material .CodeMirror-guttermarker,
.cm-s-material .CodeMirror-guttermarker-subtle,
.cm-s-material .CodeMirror-linenumber {
.CodeMirror-guttermarker,
.CodeMirror-guttermarker-subtle,
.CodeMirror-linenumber {
color: rgb(83, 127, 126);
}
.cm-s-material .CodeMirror-cursor {
.CodeMirror-cursor {
width: 2px;
border: 0;
background-color: $g20-white;
box-shadow: 0 0 3px $c-laser, 0 0 6px $c-ocean, 0 0 11px $c-amethyst;
}
.cm-s-material div.CodeMirror-selected,
.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
div.CodeMirror-selected,
.CodeMirror-focused div.CodeMirror-selected {
background-color: fade-out($g8-storm, 0.7);
}
.cm-s-material .CodeMirror-line::selection,
.cm-s-material .CodeMirror-line>span::selection,
.cm-s-material .CodeMirror-line>span>span::selection {
.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
background: rgba(255, 255, 255, 0.10);
}
.cm-s-material .CodeMirror-line::-moz-selection,
.cm-s-material .CodeMirror-line>span::-moz-selection,
.cm-s-material .CodeMirror-line>span>span::-moz-selection {
.CodeMirror-line::-moz-selection,
.CodeMirror-line>span::-moz-selection,
.CodeMirror-line>span>span::-moz-selection {
background: rgba(255, 255, 255, 0.10);
}
.cm-s-material .CodeMirror-activeline-background {
.CodeMirror-activeline-background {
background: rgba(0, 0, 0, 0);
}
.cm-s-material .cm-keyword {
color: $c-comet;
}
.cm-s-material .cm-operator {
color: $c-dreamsicle;
}
.cm-s-material .cm-variable-2 {
color: #80CBC4;
}
.cm-s-material .cm-variable-3,
.cm-s-material .cm-type {
color: $c-laser;
}
.cm-s-material .cm-builtin {
color: #DECB6B;
}
.cm-s-material .cm-atom {
color: $c-viridian;
}
.cm-s-material .cm-number {
color: $c-daisy;
}
.cm-s-material .cm-def {
color: rgba(233, 237, 237, 1);
}
.cm-s-material .cm-string {
color: $c-krypton;
}
.cm-s-material .cm-string-2 {
color: #80CBC4;
}
.cm-s-material .cm-comment {
color: $g10-wolf;
}
.cm-s-material .cm-variable {
color: $c-laser;
}
.cm-s-material .cm-tag {
color: #80CBC4;
}
.cm-s-material .cm-meta {
color: #80CBC4;
}
.cm-s-material .cm-attribute {
color: #FFCB6B;
}
.cm-s-material .cm-property {
color: #80CBAE;
}
.cm-s-material .cm-qualifier {
color: #DECB6B;
}
.cm-s-material .cm-variable-3,
.cm-s-material .cm-type {
color: #DECB6B;
}
.cm-s-material .cm-tag {
color: rgba(255, 83, 112, 1);
}
.cm-s-material .cm-error {
color: rgba(255, 255, 255, 1.0);
background-color: #EC5F67;
}
.cm-s-material .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
// CodeMirror hints
.CodeMirror-hints {
position: absolute;
z-index: 10;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8);
border-radius: $radius;
font-size: 12px;
font-family: $code-font;
font-weight: 600;
max-height: 20em;
overflow-y: auto;
@include gradient-h($c-star, $c-pool);
}
li.CodeMirror-hint {
margin: 0;
padding: 6px 7px;
line-height: 12px;
white-space: pre;
color: $c-neutrino;
cursor: pointer;
}
li.CodeMirror-hint-active {
@include gradient-h($c-comet, $c-laser);
color: $g20-white;
}
/*
Themes & Sub-Components
------------------------------------------------------------------------------
*/
@import 'time-machine';
@import 'tickscript';
@import 'hints';