github.com/elliott5/community@v0.14.1-0.20160709191136-823126fb026a/app/public/codemirror/mode/stylus/index.html (about)

     1  <!doctype html>
     2  
     3  <title>CodeMirror: Stylus mode</title>
     4  <meta charset="utf-8"/>
     5  <link rel=stylesheet href="../../doc/docs.css">
     6  <link rel="stylesheet" href="../../lib/codemirror.css">
     7  <link rel="stylesheet" href="../../addon/hint/show-hint.css">
     8  <script src="../../lib/codemirror.js"></script>
     9  <script src="stylus.js"></script>
    10  <script src="../../addon/hint/show-hint.js"></script>
    11  <script src="../../addon/hint/css-hint.js"></script>
    12  <style>.CodeMirror {background: #f8f8f8;} form{margin-bottom: .7em;}</style>
    13  <div id=nav>
    14    <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
    15  
    16    <ul>
    17      <li><a href="../../index.html">Home</a>
    18      <li><a href="../../doc/manual.html">Manual</a>
    19      <li><a href="https://github.com/codemirror/codemirror">Code</a>
    20    </ul>
    21    <ul>
    22      <li><a href="../index.html">Language modes</a>
    23      <li><a class=active href="#">Stylus</a>
    24    </ul>
    25  </div>
    26  
    27  <article>
    28  <h2>Stylus mode</h2>
    29  <form><textarea id="code" name="code">
    30  /* Stylus mode */
    31  
    32  #id,
    33  .class,
    34  article
    35    font-family Arial, sans-serif
    36  
    37  #id,
    38  .class,
    39  article {
    40    font-family: Arial, sans-serif;
    41  }
    42  
    43  // Variables
    44  font-size-base = 16px
    45  line-height-base = 1.5
    46  font-family-base = "Helvetica Neue", Helvetica, Arial, sans-serif
    47  text-color = lighten(#000, 20%)
    48  
    49  body
    50    font font-size-base/line-height-base font-family-base
    51    color text-color
    52  
    53  body {
    54    font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    55    color: #333;
    56  }
    57  
    58  // Variables
    59  link-color = darken(#428bca, 6.5%)
    60  link-hover-color = darken(link-color, 15%)
    61  link-decoration = none
    62  link-hover-decoration = false
    63  
    64  // Mixin
    65  tab-focus()
    66    outline thin dotted
    67    outline 5px auto -webkit-focus-ring-color
    68    outline-offset -2px
    69  
    70  a
    71    color link-color
    72    if link-decoration
    73      text-decoration link-decoration
    74    &:hover
    75    &:focus
    76      color link-hover-color
    77      if link-hover-decoration
    78        text-decoration link-hover-decoration
    79    &:focus
    80      tab-focus()
    81  
    82  a {
    83    color: #3782c4;
    84    text-decoration: none;
    85  }
    86  a:hover,
    87  a:focus {
    88    color: #2f6ea7;
    89  }
    90  a:focus {
    91    outline: thin dotted;
    92    outline: 5px auto -webkit-focus-ring-color;
    93    outline-offset: -2px;
    94  }
    95  </textarea>
    96  </form>
    97  <script>
    98    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    99      extraKeys: {"Ctrl-Space": "autocomplete"},
   100      tabSize: 2
   101    });
   102  </script>
   103  
   104  <p><strong>MIME types defined:</strong> <code>text/x-styl</code>.</p>
   105  <p>Created by <a href="https://github.com/dmitrykiselyov">Dmitry Kiselyov</a></p>
   106  </article>