Adds base project structure

[rbdr/api-notation-atom] / styles / base.less

@import "syntax-variables";

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;
  }

  .invisible-character {
    color: @syntax-invisible-character-color;
  }

  .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: @light-gray;
  }

  .invisible {
    color: @syntax-text-color;
  }

  .cursor {
    color: @syntax-cursor-color;
  }

  .selection .region {
    background-color: @syntax-selection-color;
  }
}

atom-text-editor .search-results .marker .region,
:host .search-results .marker .region {
  background-color: transparent;
  border: 1px solid @syntax-result-marker-color;
}

atom-text-editor .search-results .marker.current-result .region,
:host .search-results .marker.current-result .region {
  border: 1px solid @syntax-result-marker-color-selected;
}

.comment {
  color: @light-gray;
}

.entity {
  &.name.type {
    color: @light-orange;
    text-decoration: underline;
  }

  &.other.inherited-class {
    color: @green;
  }
}

.keyword {
  color: @purple;

  &.control {
    color: @purple;
  }

  &.operator {
    color: @syntax-text-color;
  }

  &.other.special-method {
    color: @blue;
  }

  &.other.unit {
    color: @orange;
  }
}

.storage {
  color: @purple;
}

.constant {
  color: @orange;

  &.character.escape {
    color: @cyan;
  }

  &.numeric {
    color: @orange;
  }

  &.other.color {
    color: @cyan;
  }

  &.other.symbol {
    color: @green;
  }
}

.variable {
  color: @red;

  &.interpolation {
    color: darken(@red, 10%);
  }

  &.parameter.function {
    color: @syntax-text-color;
  }
}

.invalid.illegal {
  background-color: @red;
  color: @syntax-background-color;
}

.string {
  color: @green;


  &.regexp {
    color: @cyan;

    .source.ruby.embedded {
      color: @orange;
    }
  }

  &.other.link {
    color: @red;
  }
}

.punctuation {
  &.definition {
    &.comment {
      color: @light-gray;
    }

    &.string,
    &.variable,
    &.parameters,
    &.array {
      color: @syntax-text-color;
    }

    &.heading,
    &.identity {
      color: @blue;
    }

    &.bold {
      color: @light-orange;
      font-weight: bold;
    }

    &.italic {
      color: @purple;
      font-style: italic;
    }
  }

  &.section.embedded {
    color: darken(@red, 10%);
  }

}

.support {
  &.class {
    color: @light-orange;
  }

  &.function  {
    color: @cyan;

    &.any-method {
      color: @blue;
    }
  }
}

.entity {
  &.name.function {
    color: @blue;
  }

  &.name.class, &.name.type.class {
    color: @light-orange;
  }

  &.name.section {
    color: @blue;
  }

  &.name.tag {
    color: @red;
    text-decoration: underline;
  }

  &.other.attribute-name {
    color: @orange;

    &.id {
      color: @blue;
    }
  }
}

.meta {
  &.class {
    color: @light-orange;
  }

  &.link {
    color: @orange;
  }

  &.require {
    color: @blue;
  }

  &.selector {
    color: @purple;
  }

  &.separator {
    background-color: @gray;
    color: @syntax-text-color;
  }
}

.none {
  color: @syntax-text-color;
}

.markup {
  &.bold {
    color: @orange;
    font-weight: bold;
  }

  &.changed {
    color: @purple;
  }

  &.deleted {
    color: @red;
  }

  &.italic {
    color: @purple;
    font-style: italic;
  }

  &.heading .punctuation.definition.heading {
    color: @blue;
  }

  &.inserted {
    color: @green;
  }

  &.list {
    color: @red;
  }

  &.quote {
    color: @orange;
  }

  &.raw.inline {
    color: @green;
  }
}

.source.gfm .markup {
  -webkit-font-smoothing: auto;
  &.heading {
    color: @green;
  }
}

atom-text-editor[mini] .scroll-view,
:host([mini]) .scroll-view {
  padding-left: 1px;
}