themummy/view/app/lib/codemirror.styl

UNSTABLE. codecoverage married with integration testing. currently a work in progress

.CodeMirror
    font-family monospace
    height 300px
    color black
    direction ltr
    position relative
    overflow hidden
    background white
    pre
        padding 0 4px
        -moz-border-radius 0
        -webkit-border-radius 0
        border-radius 0
        border-width 0
        background transparent
        font-family inherit
        font-size inherit
        margin 0
        white-space pre
        word-wrap normal
        line-height inherit
        color inherit
        z-index 2
        position relative
        overflow visible
        -webkit-tap-highlight-color transparent
        -webkit-font-variant-ligatures contextual
        font-variant-ligatures contextual
    div
        &.CodeMirror-secondarycursor
            border-left 1px solid silver

.CodeMirror-lines
    padding 4px 0
    cursor text
    min-height 1px

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler
    background-color white

.CodeMirror-gutters
    border-right 1px solid #ddd
    background-color #f7f7f7
    white-space nowrap
    position absolute
    left 0
    top 0
    min-height 100%
    z-index 3

.CodeMirror-linenumber
    padding 0 3px 0 5px
    min-width 20px
    text-align right
    color #999
    white-space nowrap

.CodeMirror-guttermarker
    color black

.CodeMirror-guttermarker-subtle
    color #999

.CodeMirror-cursor
    border-left 1px solid black
    border-right none
    width 0
    position absolute
    pointer-events none

.cm-fat-cursor
    .CodeMirror-cursor
        width auto
        border 0 !important
        background #7e7
    div
        &.CodeMirror-cursors
            z-index 1

.cm-fat-cursor-mark
    background-color rgba(20, 255, 20, 0.5)
    -webkit-animation blink 1.06s steps(1) infinite
    -moz-animation blink 1.06s steps(1) infinite
    animation blink 1.06s steps(1) infinite

.cm-animate-fat-cursor
    width auto
    border 0
    -webkit-animation blink 1.06s steps(1) infinite
    -moz-animation blink 1.06s steps(1) infinite
    animation blink 1.06s steps(1) infinite
    background-color #7e7

@-moz-keyframes
    blink

50%
    background-color transparent
    background-color transparent
    background-color transparent

@-webkit-keyframes
    blink

@keyframes
    blink

.cm-tab
    display inline-block
    text-decoration inherit

.CodeMirror-rulers
    position absolute
    left 0
    right 0
    top -50px
    bottom -20px
    overflow hidden

.CodeMirror-ruler
    border-left 1px solid #ccc
    top 0
    bottom 0
    position absolute

.cm-s-default
    .cm-header
        color blue
    .cm-quote
        color #090
    .cm-keyword
        color #708
    .cm-atom
        color #219
    .cm-number
        color #164
    .cm-def
        color #00f
    .cm-comment
        color #a50
    .cm-string
        color #a11
    .cm-string-2
        color #f50
    .cm-meta
        color #555
    .cm-qualifier
        color #555
    .cm-builtin
        color #30a
    .cm-bracket
        color #997
    .cm-tag
        color #170
    .cm-attribute
        color #00c
    .cm-hr
        color #999
    .cm-link
        color #00c
    .cm-error
        color #f00

.cm-negative
    color #d44

.cm-positive
    color #292

.cm-header, .cm-strong
    font-weight bold

.cm-em
    font-style italic

.cm-link
    text-decoration underline

.cm-strikethrough
    text-decoration line-through

.cm-s-default
    .cm-variable-2
        color #05a

.cm-s-default .cm-variable-3, .cm-s-default .cm-type
    color #085

.cm-invalidchar
    color #f00

.CodeMirror-composing
    border-bottom 2px solid

div
    &.CodeMirror
        span
            &.CodeMirror-matchingbracket
                color #0f0
            &.CodeMirror-nonmatchingbracket
                color #f22
    &.CodeMirror-cursors
        visibility hidden
        position relative
        z-index 3
    &.CodeMirror-dragcursors
        visibility visible

.CodeMirror-matchingtag
    background rgba(255, 150, 0, .3)

.CodeMirror-activeline-background
    background #e8f2ff

.CodeMirror-scroll
    overflow scroll !important
    margin-bottom -30px
    margin-right -30px
    padding-bottom 30px
    height 100%
    outline none
    position relative

.CodeMirror-sizer
    position relative
    border-right 30px solid transparent

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler
    position absolute
    z-index 6
    display none

.CodeMirror-vscrollbar
    right 0
    top 0
    overflow-x hidden
    overflow-y scroll

.CodeMirror-hscrollbar
    bottom 0
    left 0
    overflow-y hidden
    overflow-x scroll

.CodeMirror-scrollbar-filler
    right 0
    bottom 0

.CodeMirror-gutter-filler
    left 0
    bottom 0

.CodeMirror-gutter
    white-space normal
    height 100%
    display inline-block
    vertical-align top
    margin-bottom -30px

.CodeMirror-gutter-wrapper
    position absolute
    z-index 4
    background none !important
    border none !important
    ::selection
        background-color transparent
    ::-moz-selection
        background-color transparent

.CodeMirror-gutter-background
    position absolute
    top 0
    bottom 0
    z-index 4

.CodeMirror-gutter-elt
    position absolute
    cursor default
    z-index 4

.CodeMirror-wrap
    pre
        word-wrap break-word
        white-space pre-wrap
        word-break normal

.CodeMirror-linebackground
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    z-index 0

.CodeMirror-linewidget
    position relative
    z-index 2
    overflow auto

.CodeMirror-rtl
    pre
        direction rtl

.CodeMirror-code
    outline none

.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber
    -moz-box-sizing content-box
    box-sizing content-box

.CodeMirror-measure
    position absolute
    width 100%
    height 0
    overflow hidden
    visibility hidden
    pre
        position static

.CodeMirror-focused
    div
        &.CodeMirror-cursors
            visibility visible
    .CodeMirror-selected
        background #d7d4f0

.CodeMirror-selected
    background #d9d9d9

.CodeMirror-crosshair
    cursor crosshair

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection
    background #d7d4f0

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection
    background #d7d4f0

.cm-searching
    background-color #ffa
    background-color rgba(255, 255, 0, .4)

.cm-force-border
    padding-right .1px

@media print
    .CodeMirror
        div
            &.CodeMirror-cursors
                visibility hidden

.cm-tab-wrap-hack
    &:after
        content ''

span
    &.CodeMirror-selectedtext
        background none