openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

gss.html (2780B)

      1 <!doctype html>
      2 
      3 <title>CodeMirror: Closure Stylesheets (GSS) mode</title>
      4 <meta charset="utf-8"/>
      5 <link rel=stylesheet href="../../doc/docs.css">
      6 
      7 <link rel="stylesheet" href="../../lib/codemirror.css">
      8 <link rel="stylesheet" href="../../addon/hint/show-hint.css">
      9 <script src="../../lib/codemirror.js"></script>
     10 <script src="css.js"></script>
     11 <script src="../../addon/hint/show-hint.js"></script>
     12 <script src="../../addon/hint/css-hint.js"></script>
     13 <style>.CodeMirror {background: #f8f8f8;}</style>
     14 <div id=nav>
     15   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>
     16 
     17   <ul>
     18     <li><a href="../../index.html">Home</a>
     19     <li><a href="../../doc/manual.html">Manual</a>
     20     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     21   </ul>
     22   <ul>
     23     <li><a href="../index.html">Language modes</a>
     24     <li><a class=active href="#">Closure Stylesheets (GSS)</a>
     25   </ul>
     26 </div>
     27 
     28 <article>
     29 <h2>Closure Stylesheets (GSS) mode</h2>
     30 <form><textarea id="code" name="code">
     31 /* Some example Closure Stylesheets */
     32 
     33 @provide 'some.styles';
     34 
     35 @require 'other.styles';
     36 
     37 @component {
     38 
     39 @def FONT_FAMILY           "Times New Roman", Georgia, Serif;
     40 @def FONT_SIZE_NORMAL      15px;
     41 @def FONT_NORMAL           normal FONT_SIZE_NORMAL FONT_FAMILY;
     42 
     43 @def BG_COLOR              rgb(235, 239, 249);
     44 
     45 @def DIALOG_BORDER_COLOR   rgb(107, 144, 218);
     46 @def DIALOG_BG_COLOR       BG_COLOR;
     47 
     48 @def LEFT_HAND_NAV_WIDTH    180px;
     49 @def LEFT_HAND_NAV_PADDING  3px;
     50 
     51 @defmixin size(WIDTH, HEIGHT) {
     52   width: WIDTH;
     53   height: HEIGHT;
     54 }
     55 
     56 body {
     57   background-color: BG_COLOR;
     58   margin: 0;
     59   padding: 3em 6em;
     60   font: FONT_NORMAL;
     61   color: #000;
     62 }
     63 
     64 #navigation a {
     65   font-weight: bold;
     66   text-decoration: none !important;
     67 }
     68 
     69 .dialog {
     70   background-color: DIALOG_BG_COLOR;
     71   border: 1px solid DIALOG_BORDER_COLOR;
     72 }
     73 
     74 .content {
     75   position: absolute;
     76   margin-left: add(LEFT_HAND_NAV_PADDING,  /* padding left */
     77                    LEFT_HAND_NAV_WIDTH,
     78                    LEFT_HAND_NAV_PADDING); /* padding right */
     79 
     80 }
     81 
     82 .logo {
     83   @mixin size(150px, 55px);
     84   background-image: url('http://www.google.com/images/logo_sm.gif');
     85 }
     86 
     87 }
     88 </textarea></form>
     89     <script>
     90       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
     91         extraKeys: {"Ctrl-Space": "autocomplete"},
     92         lineNumbers: true,
     93         matchBrackets: "text/x-less",
     94         mode: "text/x-gss"
     95       });
     96     </script>
     97 
     98     <p>A mode for <a href="https://github.com/google/closure-stylesheets">Closure Stylesheets</a> (GSS).</p>
     99     <p><strong>MIME type defined:</strong> <code>text/x-gss</code>.</p>
    100 
    101     <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#gss_*">normal</a>,  <a href="../../test/index.html#verbose,gss_*">verbose</a>.</p>
    102 
    103   </article>