Project

General

Profile

Statistics
| Revision:

root / trunk / scripts / codemirror / mode / less / index.html @ 229

History | View | Annotate | Download (14.5 KB)

1
<!doctype html>
2
<html>
3
  <head>
4
    <title>CodeMirror: LESS mode</title>
5
    <link rel="stylesheet" href="../../lib/codemirror.css">
6
    <script src="../../lib/codemirror.js"></script>
7
    <script src="less.js"></script>
8
    <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;} .CodeMirror-scroll {height: 400px}</style>
9
    <link rel="stylesheet" href="../../doc/docs.css">
10
    <link rel="stylesheet" href="../../theme/lesser-dark.css">
11
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
12
  </head>
13
  <body>
14
    <h1>CodeMirror: LESS mode</h1>
15
    <form><textarea id="code" name="code">/* Some LESS code */
16

    
17
button {
18
    width:  32px;
19
    height: 32px;
20
    border: 0;
21
    margin: 4px;
22
    cursor: pointer;
23
}
24
button.icon-plus { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus) no-repeat; }
25
button.icon-chart { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart) no-repeat; }
26

    
27
button:hover { background-color: #999; }
28
button:active { background-color: #666; }
29

    
30
@test_a: #eeeQQQ;//this is not a valid hex value and thus parsed as an element id
31
@test_b: #eeeFFF //this is a valid hex value but the declaration doesn't end with a semicolon and thus parsed as an element id
32

    
33
#eee aaa .box
34
{
35
  #test bbb {
36
    width: 500px;
37
    height: 250px;
38
    background-image: url(dir/output/sheep.png), url( betweengrassandsky.png );
39
    background-position: center bottom, left top;
40
    background-repeat: no-repeat;
41
  }
42
}
43

    
44
@base: #f938ab;
45

    
46
.box-shadow(@style, @c) when (iscolor(@c)) {
47
  box-shadow:         @style @c;
48
  -webkit-box-shadow: @style @c;
49
  -moz-box-shadow:    @style @c;
50
}
51
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
52
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
53
}
54

    
55
@color: #4D926F;
56

    
57
#header {
58
  color: @color;
59
  color: #000000;
60
}
61
h2 {
62
  color: @color;
63
}
64

    
65
.rounded-corners (@radius: 5px) {
66
  border-radius: @radius;
67
  -webkit-border-radius: @radius;
68
  -moz-border-radius: @radius;
69
}
70

    
71
#header {
72
  .rounded-corners;
73
}
74
#footer {
75
  .rounded-corners(10px);
76
}
77

    
78
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
79
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
80

    
81
  box-shadow:         @val;
82
  -webkit-box-shadow: @val;
83
  -moz-box-shadow:    @val;
84
}
85
.box { @base: #f938ab;
86
  color:        saturate(@base, 5%);
87
  border-color: lighten(@base, 30%);
88
  div { .box-shadow(0, 0, 5px, 0.4) }
89
}
90

    
91
@import url("something.css");
92

    
93
@light-blue:   hsl(190, 50%, 65%);
94
@light-yellow: desaturate(#fefec8, 10%);
95
@dark-yellow:  desaturate(darken(@light-yellow, 10%), 40%);
96
@darkest:      hsl(20, 0%, 15%);
97
@dark:         hsl(190, 20%, 30%);
98
@medium:       hsl(10, 60%, 30%);
99
@light:        hsl(90, 40%, 20%);
100
@lightest:     hsl(90, 20%, 90%);
101
@highlight:    hsl(80, 50%, 90%);
102
@blue:         hsl(210, 60%, 20%);
103
@alpha-blue:   hsla(210, 60%, 40%, 0.5);
104

    
105
.box-shadow (@x, @y, @blur, @alpha) {
106
  @value: @x @y @blur rgba(0, 0, 0, @alpha);
107
  box-shadow:         @value;
108
  -moz-box-shadow:    @value;
109
  -webkit-box-shadow: @value;
110
}
111
.border-radius (@radius) {
112
  border-radius: @radius;
113
  -moz-border-radius: @radius;
114
  -webkit-border-radius: @radius;
115
}
116

    
117
.border-radius (@radius, bottom) {
118
  border-top-right-radius: 0;
119
  border-top-left-radius: 0;
120
  -moz-border-top-right-radius: 0;
121
  -moz-border-top-left-radius: 0;
122
  -webkit-border-top-left-radius: 0;
123
  -webkit-border-top-right-radius: 0;
124
}
125
.border-radius (@radius, right) {
126
  border-bottom-left-radius: 0;
127
  border-top-left-radius: 0;
128
  -moz-border-bottom-left-radius: 0;
129
  -moz-border-top-left-radius: 0;
130
  -webkit-border-bottom-left-radius: 0;
131
  -webkit-border-top-left-radius: 0;
132
}
133
.box-shadow-inset (@x, @y, @blur, @color) {
134
  box-shadow: @x @y @blur @color inset;
135
  -moz-box-shadow: @x @y @blur @color inset;
136
  -webkit-box-shadow: @x @y @blur @color inset;
137
}
138
.code () {
139
  font-family: 'Bitstream Vera Sans Mono',
140
               'DejaVu Sans Mono',
141
               'Monaco',
142
               Courier,
143
               monospace !important;
144
}
145
.wrap () {
146
  text-wrap: wrap;
147
  white-space: pre-wrap;       /* css-3 */
148
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
149
  white-space: -pre-wrap;      /* Opera 4-6 */
150
  white-space: -o-pre-wrap;    /* Opera 7 */
151
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
152
}
153

    
154
html { margin: 0 }
155
body {
156
  background-color: @darkest;
157
  margin: 0 auto;
158
  font-family: Arial, sans-serif;
159
  font-size: 100%;
160
  overflow-x: hidden;
161
}
162
nav, header, footer, section, article {
163
  display: block;
164
}
165
a {
166
  color: #b83000;
167
}
168
h1 a {
169
  color: black;
170
  text-decoration: none;
171
}
172
a:hover {
173
  text-decoration: underline;
174
}
175
h1, h2, h3, h4 {
176
  margin: 0;
177
  font-weight: normal;
178
}
179
ul, li {
180
  list-style-type: none;
181
}
182
code { .code; }
183
code {
184
  .string, .regexp { color: @dark }
185
  .keyword { font-weight: bold }
186
  .comment { color: rgba(0, 0, 0, 0.5) }
187
  .number { color: @blue }
188
  .class, .special { color: rgba(0, 50, 100, 0.8) }
189
}
190
pre {
191
  padding: 0 30px;
192
  .wrap;
193
}
194
blockquote {
195
  font-style: italic;
196
}
197
body > footer {
198
  text-align: left;
199
  margin-left: 10px;
200
  font-style: italic;
201
  font-size: 18px;
202
  color: #888;
203
}
204

    
205
#logo {
206
  margin-top: 30px;
207
  margin-bottom: 30px;
208
  display: block;
209
  width: 199px;
210
  height: 81px;
211
  background: url(/images/logo.png) no-repeat;
212
}
213
nav {
214
  margin-left: 15px;
215
}
216
nav a, #dropdown li {
217
  display: inline-block;
218
  color: white;
219
  line-height: 42px;
220
  margin: 0;
221
  padding: 0px 15px;
222
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
223
  text-decoration: none;
224
  border: 2px solid transparent;
225
  border-width: 0 2px;
226
  &:hover {
227
    .dark-red; 
228
    text-decoration: none;
229
  }
230
}
231
.dark-red {
232
    @red: @medium;
233
    border: 2px solid darken(@red, 25%);
234
    border-left-color: darken(@red, 15%);
235
    border-right-color: darken(@red, 15%);
236
    border-bottom: 0;
237
    border-top: 0;
238
    background-color: darken(@red, 10%);
239
}
240

    
241
.content {
242
  margin: 0 auto;
243
  width: 980px;
244
}
245

    
246
#menu {
247
  position: absolute;
248
  width: 100%;
249
  z-index: 3;
250
  clear: both;
251
  display: block;
252
  background-color: @blue;
253
  height: 42px;
254
  border-top: 2px solid lighten(@alpha-blue, 20%);
255
  border-bottom: 2px solid darken(@alpha-blue, 25%);
256
  .box-shadow(0, 1px, 8px, 0.6);
257
  -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
258

    
259
  &.docked {
260
    background-color: hsla(210, 60%, 40%, 0.4);
261
  }
262
  &:hover {
263
    background-color: @blue;
264
  }
265

    
266
  #dropdown {
267
    margin: 0 0 0 117px;
268
    padding: 0;
269
    padding-top: 5px;
270
    display: none;
271
    width: 190px;
272
    border-top: 2px solid @medium;
273
    color: @highlight;
274
    border: 2px solid darken(@medium, 25%);
275
    border-left-color: darken(@medium, 15%);
276
    border-right-color: darken(@medium, 15%);
277
    border-top-width: 0;
278
    background-color: darken(@medium, 10%);
279
    ul {
280
      padding: 0px;  
281
    }
282
    li {
283
      font-size: 14px;
284
      display: block;
285
      text-align: left;
286
      padding: 0;
287
      border: 0;
288
      a {
289
        display: block;
290
        padding: 0px 15px;  
291
        text-decoration: none;
292
        color: white;  
293
        &:hover {
294
          background-color: darken(@medium, 15%);
295
          text-decoration: none;
296
        }
297
      }
298
    }
299
    .border-radius(5px, bottom);
300
    .box-shadow(0, 6px, 8px, 0.5);
301
  }
302
}
303

    
304
#main {
305
  margin: 0 auto;
306
  width: 100%;
307
  background-color: @light-blue;
308
  border-top: 8px solid darken(@light-blue, 5%);
309

    
310
  #intro {
311
    background-color: lighten(@light-blue, 25%);
312
    float: left;
313
    margin-top: -8px;
314
    margin-right: 5px;
315

    
316
    height: 380px;
317
    position: relative;
318
    z-index: 2;
319
    font-family: 'Droid Serif', 'Georgia';
320
    width: 395px;
321
    padding: 45px 20px 23px 30px;
322
    border: 2px dashed darken(@light-blue, 10%);
323
    .box-shadow(1px, 0px, 6px, 0.5);
324
    border-bottom: 0;
325
    border-top: 0;
326
    #download { color: transparent; border: 0; float: left; display: inline-block; margin: 15px 0 15px -5px; }
327
    #download img { display: inline-block}
328
    #download-info {
329
      code {
330
        font-size: 13px;  
331
      }
332
      color: @blue + #333; display: inline; float: left; margin: 36px 0 0 15px }
333
  }
334
  h2 {
335
    span {
336
      color: @medium;  
337
    }
338
    color: @blue;
339
    margin: 20px 0;
340
    font-size: 24px;
341
    line-height: 1.2em;
342
  }
343
  h3 {
344
    color: @blue;
345
    line-height: 1.4em;
346
    margin: 30px 0 15px 0;
347
    font-size: 1em;
348
    text-shadow: 0px 0px 0px @lightest;
349
    span { color: @medium }
350
  }
351
  #example {
352
    p {
353
      font-size: 18px;
354
      color: @blue;
355
      font-weight: bold;
356
      text-shadow: 0px 1px 1px @lightest;
357
    }
358
    pre {
359
      margin: 0;
360
      text-shadow: 0 -1px 1px @darkest;
361
      margin-top: 20px;
362
      background-color: desaturate(@darkest, 8%);
363
      border: 0;
364
      width: 450px;
365
      color: lighten(@lightest, 2%);
366
      background-repeat: repeat;
367
      padding: 15px;
368
      border: 1px dashed @lightest;
369
      line-height: 15px;
370
      .box-shadow(0, 0px, 15px, 0.5);
371
      .code;
372
      .border-radius(2px);
373
      code .attribute { color: hsl(40, 50%, 70%) }
374
      code .variable  { color: hsl(120, 10%, 50%) }
375
      code .element   { color: hsl(170, 20%, 50%) }
376

    
377
      code .string, .regexp { color: hsl(75, 50%, 65%) }
378
      code .class { color: hsl(40, 40%, 60%); font-weight: normal }
379
      code .id { color: hsl(50, 40%, 60%); font-weight: normal }
380
      code .comment { color: rgba(255, 255, 255, 0.2) }
381
      code .number, .color { color: hsl(10, 40%, 50%) }
382
      code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
383
      #time { color: #aaa }
384
    }
385
    float: right;
386
    font-size: 12px;
387
    margin: 0;
388
    margin-top: 15px;
389
    padding: 0;
390
    width: 500px;
391
  }
392
}
393

    
394

    
395
.page {
396
  .content {
397
    width: 870px;
398
    padding: 45px;
399
  }
400
  margin: 0 auto;
401
  font-family: 'Georgia', serif;
402
  font-size: 18px;
403
  line-height: 26px;
404
  padding: 0 60px;
405
  code {
406
    font-size: 16px;  
407
  }
408
  pre {
409
    border-width: 1px;
410
    border-style: dashed;
411
    padding: 15px;
412
    margin: 15px 0;
413
  }
414
  h1 {
415
    text-align: left;
416
    font-size: 40px;
417
    margin-top: 15px;
418
    margin-bottom: 35px;
419
  }
420
  p + h1 { margin-top: 60px }
421
  h2, h3 {
422
    margin: 30px 0 15px 0;
423
  }
424
  p + h2, pre + h2, code + h2 {
425
    border-top: 6px solid rgba(255, 255, 255, 0.1);
426
    padding-top: 30px;
427
  }
428
  h3 {
429
    margin: 15px 0;
430
  }
431
}
432

    
433

    
434
#docs {
435
  @bg: lighten(@light-blue, 5%);
436
  border-top: 2px solid lighten(@bg, 5%);
437
  color: @blue;
438
  background-color: @light-blue;
439
  .box-shadow(0, -2px, 5px, 0.2);
440

    
441
  h1 {
442
    font-family: 'Droid Serif', 'Georgia', serif;
443
    padding-top: 30px;
444
    padding-left: 45px;
445
    font-size: 44px;
446
    text-align: left;
447
    margin: 30px 0 !important;
448
    text-shadow: 0px 1px 1px @lightest;
449
    font-weight: bold;
450
  }
451
  .content {
452
    clear: both;
453
    border-color: transparent;
454
    background-color: lighten(@light-blue, 25%);
455
    .box-shadow(0, 5px, 5px, 0.4);
456
  }
457
  pre {
458
    @background: lighten(@bg, 30%);
459
    color: lighten(@blue, 10%);
460
    background-color: @background;
461
    border-color: lighten(@light-blue, 25%);
462
    border-width: 2px;
463
    code .attribute { color: hsl(40, 50%, 30%) }
464
    code .variable  { color: hsl(120, 10%, 30%) }
465
    code .element   { color: hsl(170, 20%, 30%) }
466

    
467
    code .string, .regexp { color: hsl(75, 50%, 35%) }
468
    code .class { color: hsl(40, 40%, 30%); font-weight: normal }
469
    code .id { color: hsl(50, 40%, 30%); font-weight: normal }
470
    code .comment { color: rgba(0, 0, 0, 0.4) }
471
    code .number, .color { color: hsl(10, 40%, 30%) }
472
    code .class, code .mixin, .special { color: hsl(190, 20%, 30%) }
473
  }
474
  pre code                    { font-size: 15px  }
475
  p + h2, pre + h2, code + h2 { border-top-color: rgba(0, 0, 0, 0.1) }
476
}
477

    
478
td {
479
  padding-right: 30px;  
480
}
481
#synopsis {
482
  .box-shadow(0, 5px, 5px, 0.2);
483
}
484
#synopsis, #about {
485
  h2 {
486
    font-size: 30px;  
487
    padding: 10px 0;
488
  }
489
  h1 + h2 {
490
      margin-top: 15px;  
491
  }
492
  h3 { font-size: 22px }
493

    
494
  .code-example {
495
    border-spacing: 0;
496
    border-width: 1px;
497
    border-style: dashed;
498
    padding: 0;
499
    pre { border: 0; margin: 0 }
500
    td {
501
      border: 0;
502
      margin: 0;
503
      background-color: desaturate(darken(@darkest, 5%), 20%);
504
      vertical-align: top;
505
      padding: 0;
506
    }
507
    tr { padding: 0 }
508
  }
509
  .css-output {
510
    td {
511
      border-left: 0;  
512
    }
513
  }
514
  .less-example {
515
    //border-right: 1px dotted rgba(255, 255, 255, 0.5) !important;
516
  }
517
  .css-output, .less-example {
518
    width: 390px;
519
  }
520
  pre {
521
    padding: 20px;
522
    line-height: 20px;
523
    font-size: 14px;
524
  }
525
}
526
#about, #synopsis, #guide {
527
  a {
528
    text-decoration: none;
529
    color: @light-yellow;
530
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
531
    &:hover {
532
      text-decoration: none;
533
      border-bottom: 1px dashed @light-yellow;
534
    }
535
  }
536
  @bg: desaturate(darken(@darkest, 5%), 20%);
537
  text-shadow: 0 -1px 1px lighten(@bg, 5%);
538
  color: @highlight;
539
  background-color: @bg;
540
  .content {
541
    background-color: desaturate(@darkest, 20%);
542
    clear: both;
543
    .box-shadow(0, 5px, 5px, 0.4);
544
  }
545
  h1, h2, h3 {
546
    color: @dark-yellow;
547
  }
548
  pre {
549
      code .attribute { color: hsl(40, 50%, 70%) }
550
      code .variable  { color: hsl(120, 10%, 50%) }
551
      code .element   { color: hsl(170, 20%, 50%) }
552

    
553
      code .string, .regexp { color: hsl(75, 50%, 65%) }
554
      code .class { color: hsl(40, 40%, 60%); font-weight: normal }
555
      code .id { color: hsl(50, 40%, 60%); font-weight: normal }
556
      code .comment { color: rgba(255, 255, 255, 0.2) }
557
      code .number, .color { color: hsl(10, 40%, 50%) }
558
      code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
559
    background-color: @bg;
560
    border-color: darken(@light-yellow, 5%);
561
  }
562
  code {
563
    color: darken(@dark-yellow, 5%);
564
    .string, .regexp { color: desaturate(@light-blue, 15%) }
565
    .keyword { color: hsl(40, 40%, 60%); font-weight: normal }
566
    .comment { color: rgba(255, 255, 255, 0.2) }
567
    .number { color: lighten(@blue, 10%) }
568
    .class, .special { color: hsl(190, 20%, 50%) }
569
  }
570
}
571
#guide {
572
  background-color: @darkest;
573
  .content {
574
    background-color: transparent;
575
  }
576

    
577
}
578

    
579
#about {
580
  background-color: @darkest !important;
581
  .content {
582
    background-color: desaturate(lighten(@darkest, 3%), 5%);
583
  }
584
}
585
#synopsis {
586
  background-color: desaturate(lighten(@darkest, 3%), 5%) !important;
587
  .content {
588
    background-color: desaturate(lighten(@darkest, 3%), 5%);
589
  }
590
  pre {}
591
}
592
#synopsis, #guide {
593
  .content {
594
    .box-shadow(0, 0px, 0px, 0.0);
595
  }
596
}
597
#about footer {
598
  margin-top: 30px;
599
  padding-top: 30px;
600
  border-top: 6px solid rgba(0, 0, 0, 0.1);
601
  text-align: center;
602
  font-size: 16px;
603
  color: rgba(255, 255, 255, 0.35);
604
  #copy { font-size: 12px }
605
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02);
606
}
607
</textarea></form>
608
    <script>
609
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
610
        theme: "lesser-dark",
611
        lineNumbers : true,
612
                    matchBrackets : true
613
      });
614
    </script>
615

    
616
    <p><strong>MIME types defined:</strong> <code>text/x-less</code>, <code>text/css</code> (if not previously defined).</p>
617
  </body>
618
</html>