Skip to content

Instantly share code, notes, and snippets.

@smlombardi
Created January 19, 2015 19:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smlombardi/a3069a3c27031322c3a2 to your computer and use it in GitHub Desktop.
Save smlombardi/a3069a3c27031322c3a2 to your computer and use it in GitHub Desktop.
atom-text-editor {
background-color: @syntax-background-color;
color: @syntax-text-color;
}
atom-text-editor, :host {
.wrap-guide {
background-color: @syntax-wrap-guide-color;
}
.indent-guide {
color: @syntax-indent-guide-color;
}
.invisible-character {
color: @syntax-invisible-character-color;
}
&.is-focused {
.cursor {
border-color: @syntax-cursor-color;
}
&.vim-mode.command-mode .cursor {
background-color: @syntax-cursor-color;
}
.cursor,
&.vim-mode.command-mode .cursor {
transition: opacity 0.3s ease-in-out;
&.blink-off {
visibility: visible;
opacity: 0;
}
}
}
.gutter {
background-color: @syntax-gutter-background-color;
color: @syntax-gutter-text-color;
.line-number {
&.cursor-line {
background-color: @syntax-gutter-background-color-selected;
color: @syntax-gutter-text-color-selected;
}
&.cursor-line-no-selection {
color: @syntax-gutter-text-color-selected;
}
}
}
.gutter .line-number.folded,
.gutter .line-number:after,
.fold-marker:after {
color: @syntax-gutter-text-color;
}
.invisible {
color: @syntax-invisible-character-color;
}
.selection .region {
background-color: @syntax-selection-color;
}
}
@simurai
Copy link

simurai commented Jan 20, 2015

@smlombardi I think it's safer to just move everything inside the atom-text-editor, :host. Currenlty it works, but AFAIK, it will break once the Shadow DOM toggle in the setting will go away.

So instead of:

atom-text-editor {
  background-color: @syntax-background-color;
  color: @syntax-text-color;
}

atom-text-editor, :host {
  .wrap-guide {
    background-color: @syntax-wrap-guide-color;
  }
  .indent-guide {
    color: @syntax-indent-guide-color;
  }

use this:

atom-text-editor, :host {
  background-color: @syntax-background-color;
  color: @syntax-text-color;

  .wrap-guide {
    background-color: @syntax-wrap-guide-color;
  }
  .indent-guide {
    color: @syntax-indent-guide-color;
  }

@smlombardi
Copy link
Author

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment