hyde_admin 0.0.1 → 0.0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/.gitattributes +3 -0
  3. data/.idea/hyde_admin.iml +2 -0
  4. data/.idea/vcs.xml +6 -0
  5. data/CHANGELOG.md +35 -0
  6. data/README.md +23 -0
  7. data/TODO.md +3 -0
  8. data/bin/admin_views/admin_layout.html.erb +204 -108
  9. data/bin/admin_views/configuration.erb +13 -0
  10. data/bin/admin_views/dashboard.erb +1 -1
  11. data/bin/admin_views/editor_html.erb +24 -0
  12. data/bin/admin_views/editor_js.erb +120 -0
  13. data/bin/admin_views/files/edit.erb +30 -0
  14. data/bin/admin_views/files/listing.erb +111 -0
  15. data/bin/admin_views/partials/image_element.html.erb +4 -0
  16. data/bin/admin_views/partials/images_page.html.erb +8 -0
  17. data/bin/admin_views/posts/edit.erb +158 -0
  18. data/bin/admin_views/posts/listing.erb +37 -0
  19. data/bin/admin_views/upload_image_form.erb +45 -0
  20. data/bin/fslightbox/fslightbox.js +1 -0
  21. data/bin/hyde_admin +3 -0
  22. data/bin/hyde_admin.ru +306 -56
  23. data/bin/hyde_admin.yml +12 -5
  24. data/bin/hyde_assets/hyde_admin.css +37 -0
  25. data/bin/hyde_assets/hyde_admin.js +24 -0
  26. data/bin/i18n/en.yml +77 -1
  27. data/bin/i18n/fr.yml +77 -1
  28. data/bin/lib/codemirror.css +349 -0
  29. data/bin/lib/codemirror.js +9833 -0
  30. data/bin/mode/css/css.js +864 -0
  31. data/bin/mode/css/gss.html +104 -0
  32. data/bin/mode/css/gss_test.js +17 -0
  33. data/bin/mode/css/index.html +81 -0
  34. data/bin/mode/css/less.html +152 -0
  35. data/bin/mode/css/less_test.js +54 -0
  36. data/bin/mode/css/scss.html +158 -0
  37. data/bin/mode/css/scss_test.js +110 -0
  38. data/bin/mode/css/test.js +217 -0
  39. data/bin/mode/htmlembedded/htmlembedded.js +37 -0
  40. data/bin/mode/htmlembedded/index.html +60 -0
  41. data/bin/mode/htmlmixed/htmlmixed.js +153 -0
  42. data/bin/mode/htmlmixed/index.html +100 -0
  43. data/bin/mode/javascript/index.html +118 -0
  44. data/bin/mode/javascript/javascript.js +959 -0
  45. data/bin/mode/javascript/json-ld.html +72 -0
  46. data/bin/mode/javascript/test.js +521 -0
  47. data/bin/mode/javascript/typescript.html +62 -0
  48. data/bin/mode/markdown/index.html +418 -0
  49. data/bin/mode/markdown/markdown.js +886 -0
  50. data/bin/mode/markdown/test.js +1319 -0
  51. data/bin/mode/ruby/index.html +183 -0
  52. data/bin/mode/ruby/ruby.js +303 -0
  53. data/bin/mode/ruby/test.js +23 -0
  54. data/bin/mode/sass/index.html +68 -0
  55. data/bin/mode/sass/sass.js +459 -0
  56. data/bin/mode/sass/test.js +122 -0
  57. data/bin/mode/spreadsheet/index.html +42 -0
  58. data/bin/mode/spreadsheet/spreadsheet.js +112 -0
  59. data/bin/mode/xml/index.html +61 -0
  60. data/bin/mode/xml/test.js +51 -0
  61. data/bin/mode/xml/xml.js +417 -0
  62. data/bin/mode/yaml/index.html +80 -0
  63. data/bin/mode/yaml/yaml.js +120 -0
  64. data/bin/mode/yaml-frontmatter/index.html +121 -0
  65. data/bin/mode/yaml-frontmatter/yaml-frontmatter.js +72 -0
  66. data/hyde_admin.gemspec +7 -1
  67. data/lib/hyde_admin/version.rb +1 -1
  68. metadata +131 -7
  69. data/bin/admin_views/edit.erb +0 -57
  70. data/bin/admin_views/listing.erb +0 -32
  71. data/bin/hyde_admin.sh +0 -3
data/bin/mode/css/gss.html ADDED
@@ -0,0 +1,104 @@
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/edit/matchbrackets.js"></script>
12
+ <script src="../../addon/hint/show-hint.js"></script>
13
+ <script src="../../addon/hint/css-hint.js"></script>
14
+ <style>.CodeMirror {background: #f8f8f8;}</style>
15
+ <div id=nav>
16
+ <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
17
+
18
+ <ul>
19
+ <li><a href="../../index.html">Home</a>
20
+ <li><a href="../../doc/manual.html">Manual</a>
21
+ <li><a href="https://github.com/codemirror/codemirror">Code</a>
22
+ </ul>
23
+ <ul>
24
+ <li><a href="../index.html">Language modes</a>
25
+ <li><a class=active href="#">Closure Stylesheets (GSS)</a>
26
+ </ul>
27
+ </div>
28
+
29
+ <article>
30
+ <h2>Closure Stylesheets (GSS) mode</h2>
31
+ <form><textarea id="code" name="code">
32
+ /* Some example Closure Stylesheets */
33
+
34
+ @provide 'some.styles';
35
+
36
+ @require 'other.styles';
37
+
38
+ @component {
39
+
40
+ @def FONT_FAMILY "Times New Roman", Georgia, Serif;
41
+ @def FONT_SIZE_NORMAL 15px;
42
+ @def FONT_NORMAL normal FONT_SIZE_NORMAL FONT_FAMILY;
43
+
44
+ @def BG_COLOR rgb(235, 239, 249);
45
+
46
+ @def DIALOG_BORDER_COLOR rgb(107, 144, 218);
47
+ @def DIALOG_BG_COLOR BG_COLOR;
48
+
49
+ @def LEFT_HAND_NAV_WIDTH 180px;
50
+ @def LEFT_HAND_NAV_PADDING 3px;
51
+
52
+ @defmixin size(WIDTH, HEIGHT) {
53
+ width: WIDTH;
54
+ height: HEIGHT;
55
+ }
56
+
57
+ body {
58
+ background-color: BG_COLOR;
59
+ margin: 0;
60
+ padding: 3em 6em;
61
+ font: FONT_NORMAL;
62
+ color: #000;
63
+ }
64
+
65
+ #navigation a {
66
+ font-weight: bold;
67
+ text-decoration: none !important;
68
+ }
69
+
70
+ .dialog {
71
+ background-color: DIALOG_BG_COLOR;
72
+ border: 1px solid DIALOG_BORDER_COLOR;
73
+ }
74
+
75
+ .content {
76
+ position: absolute;
77
+ margin-left: add(LEFT_HAND_NAV_PADDING, /* padding left */
78
+ LEFT_HAND_NAV_WIDTH,
79
+ LEFT_HAND_NAV_PADDING); /* padding right */
80
+
81
+ }
82
+
83
+ .logo {
84
+ @mixin size(150px, 55px);
85
+ background-image: url('http://www.google.com/images/logo_sm.gif');
86
+ }
87
+
88
+ }
89
+ </textarea></form>
90
+ <script>
91
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
92
+ extraKeys: {"Ctrl-Space": "autocomplete"},
93
+ lineNumbers: true,
94
+ matchBrackets: true,
95
+ mode: "text/x-gss"
96
+ });
97
+ </script>
98
+
99
+ <p>A mode for <a href="https://github.com/google/closure-stylesheets">Closure Stylesheets</a> (GSS).</p>
100
+ <p><strong>MIME type defined:</strong> <code>text/x-gss</code>.</p>
101
+
102
+ <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#gss_*">normal</a>, <a href="../../test/index.html#verbose,gss_*">verbose</a>.</p>
103
+
104
+ </article>
data/bin/mode/css/gss_test.js ADDED
@@ -0,0 +1,17 @@
1
+ // CodeMirror, copyright (c) by Marijn Haverbeke and others
2
+ // Distributed under an MIT license: https://codemirror.net/LICENSE
3
+
4
+ (function() {
5
+ "use strict";
6
+
7
+ var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-gss");
8
+ function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "gss"); }
9
+
10
+ MT("atComponent",
11
+ "[def @component] {",
12
+ "[tag foo] {",
13
+ " [property color]: [keyword black];",
14
+ "}",
15
+ "}");
16
+
17
+ })();
data/bin/mode/css/index.html ADDED
@@ -0,0 +1,81 @@
1
+ <!doctype html>
2
+
3
+ <title>CodeMirror: CSS 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="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></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="#">CSS</a>
25
+ </ul>
26
+ </div>
27
+
28
+ <article>
29
+ <h2>CSS mode</h2>
30
+ <form><textarea id="code" name="code">
31
+ /* Some example CSS */
32
+
33
+ @import url("something.css");
34
+
35
+ body {
36
+ margin: 0;
37
+ padding: 3em 6em;
38
+ font-family: tahoma, arial, sans-serif;
39
+ color: #000;
40
+ }
41
+
42
+ #navigation a {
43
+ font-weight: bold;
44
+ text-decoration: none !important;
45
+ }
46
+
47
+ h1 {
48
+ font-size: 2.5em;
49
+ }
50
+
51
+ h2 {
52
+ font-size: 1.7em;
53
+ }
54
+
55
+ h1:before, h2:before {
56
+ content: "::";
57
+ }
58
+
59
+ code {
60
+ font-family: courier, monospace;
61
+ font-size: 80%;
62
+ color: #418A8A;
63
+ }
64
+ </textarea></form>
65
+ <script>
66
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
67
+ extraKeys: {"Ctrl-Space": "autocomplete"}
68
+ });
69
+ </script>
70
+
71
+ <p>CSS mode supports this option:</p>
72
+ <d1>
73
+ <dt><code><strong>highlightNonStandardPropertyKeywords</strong>: boolean</code></dt>
74
+ <dd>Whether to highlight non-standard CSS property keywords such as <code>margin-inline</code> or <code>zoom</code> (default: <code>true</code>).</dd>
75
+ </d1>
76
+
77
+ <p><strong>MIME types defined:</strong> <code>text/css</code>, <code>text/x-scss</code> (<a href="scss.html">demo</a>), <code>text/x-less</code> (<a href="less.html">demo</a>).</p>
78
+
79
+ <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#css_*">normal</a>, <a href="../../test/index.html#verbose,css_*">verbose</a>.</p>
80
+
81
+ </article>
data/bin/mode/css/less.html ADDED
@@ -0,0 +1,152 @@
1
+ <!doctype html>
2
+
3
+ <title>CodeMirror: LESS 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
+ <script src="../../lib/codemirror.js"></script>
9
+ <script src="../../addon/edit/matchbrackets.js"></script>
10
+ <script src="css.js"></script>
11
+ <style>.CodeMirror {border: 1px solid #ddd; line-height: 1.2;}</style>
12
+ <div id=nav>
13
+ <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
14
+
15
+ <ul>
16
+ <li><a href="../../index.html">Home</a>
17
+ <li><a href="../../doc/manual.html">Manual</a>
18
+ <li><a href="https://github.com/codemirror/codemirror">Code</a>
19
+ </ul>
20
+ <ul>
21
+ <li><a href="../index.html">Language modes</a>
22
+ <li><a class=active href="#">LESS</a>
23
+ </ul>
24
+ </div>
25
+
26
+ <article>
27
+ <h2>LESS mode</h2>
28
+ <form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
29
+ @media screen and (device-aspect-ratio: 1280/720) { … }
30
+ @media screen and (device-aspect-ratio: 2560/1440) { … }
31
+
32
+ html:lang(fr-be)
33
+
34
+ tr:nth-child(2n+1) /* represents every odd row of an HTML table */
35
+
36
+ img:nth-of-type(2n+1) { float: right; }
37
+ img:nth-of-type(2n) { float: left; }
38
+
39
+ body > h2:not(:first-of-type):not(:last-of-type)
40
+
41
+ html|*:not(:link):not(:visited)
42
+ *|*:not(:hover)
43
+ p::first-line { text-transform: uppercase }
44
+
45
+ @namespace foo url(http://www.example.com);
46
+ foo|h1 { color: blue } /* first rule */
47
+
48
+ span[hello="Ocean"][goodbye="Land"]
49
+
50
+ E[foo]{
51
+ padding:65px;
52
+ }
53
+
54
+ input[type="search"]::-webkit-search-decoration,
55
+ input[type="search"]::-webkit-search-cancel-button {
56
+ -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
57
+ }
58
+ button::-moz-focus-inner,
59
+ input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
60
+ padding: 0;
61
+ border: 0;
62
+ }
63
+ .btn {
64
+ // reset here as of 2.0.3 due to Recess property order
65
+ border-color: #ccc;
66
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
67
+ }
68
+ fieldset span button, fieldset span input[type="file"] {
69
+ font-size:12px;
70
+ font-family:Arial, Helvetica, sans-serif;
71
+ }
72
+
73
+ .rounded-corners (@radius: 5px) {
74
+ border-radius: @radius;
75
+ -webkit-border-radius: @radius;
76
+ -moz-border-radius: @radius;
77
+ }
78
+
79
+ @import url("something.css");
80
+
81
+ @light-blue: hsl(190, 50%, 65%);
82
+
83
+ #menu {
84
+ position: absolute;
85
+ width: 100%;
86
+ z-index: 3;
87
+ clear: both;
88
+ display: block;
89
+ background-color: @blue;
90
+ height: 42px;
91
+ border-top: 2px solid lighten(@alpha-blue, 20%);
92
+ border-bottom: 2px solid darken(@alpha-blue, 25%);
93
+ .box-shadow(0, 1px, 8px, 0.6);
94
+ -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
95
+
96
+ &.docked {
97
+ background-color: hsla(210, 60%, 40%, 0.4);
98
+ }
99
+ &:hover {
100
+ background-color: @blue;
101
+ }
102
+
103
+ #dropdown {
104
+ margin: 0 0 0 117px;
105
+ padding: 0;
106
+ padding-top: 5px;
107
+ display: none;
108
+ width: 190px;
109
+ border-top: 2px solid @medium;
110
+ color: @highlight;
111
+ border: 2px solid darken(@medium, 25%);
112
+ border-left-color: darken(@medium, 15%);
113
+ border-right-color: darken(@medium, 15%);
114
+ border-top-width: 0;
115
+ background-color: darken(@medium, 10%);
116
+ ul {
117
+ padding: 0px;
118
+ }
119
+ li {
120
+ font-size: 14px;
121
+ display: block;
122
+ text-align: left;
123
+ padding: 0;
124
+ border: 0;
125
+ a {
126
+ display: block;
127
+ padding: 0px 15px;
128
+ text-decoration: none;
129
+ color: white;
130
+ &:hover {
131
+ background-color: darken(@medium, 15%);
132
+ text-decoration: none;
133
+ }
134
+ }
135
+ }
136
+ .border-radius(5px, bottom);
137
+ .box-shadow(0, 6px, 8px, 0.5);
138
+ }
139
+ }
140
+ </textarea></form>
141
+ <script>
142
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
143
+ lineNumbers: true,
144
+ matchBrackets: true,
145
+ mode: "text/x-less"
146
+ });
147
+ </script>
148
+
149
+ <p>The LESS mode is a sub-mode of the <a href="index.html">CSS mode</a> (defined in <code>css.js</code>).</p>
150
+
151
+ <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#less_*">normal</a>, <a href="../../test/index.html#verbose,less_*">verbose</a>.</p>
152
+ </article>
data/bin/mode/css/less_test.js ADDED
@@ -0,0 +1,54 @@
1
+ // CodeMirror, copyright (c) by Marijn Haverbeke and others
2
+ // Distributed under an MIT license: https://codemirror.net/LICENSE
3
+
4
+ (function() {
5
+ "use strict";
6
+
7
+ var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-less");
8
+ function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "less"); }
9
+
10
+ MT("variable",
11
+ "[variable-2 @base]: [atom #f04615];",
12
+ "[qualifier .class] {",
13
+ " [property width]: [variable&callee percentage]([number 0.5]); [comment // returns `50%`]",
14
+ " [property color]: [variable&callee saturate]([variable-2 @base], [number 5%]);",
15
+ "}");
16
+
17
+ MT("amp",
18
+ "[qualifier .child], [qualifier .sibling] {",
19
+ " [qualifier .parent] [atom &] {",
20
+ " [property color]: [keyword black];",
21
+ " }",
22
+ " [atom &] + [atom &] {",
23
+ " [property color]: [keyword red];",
24
+ " }",
25
+ "}");
26
+
27
+ MT("mixin",
28
+ "[qualifier .mixin] ([variable dark]; [variable-2 @color]) {",
29
+ " [property color]: [variable&callee darken]([variable-2 @color], [number 10%]);",
30
+ "}",
31
+ "[qualifier .mixin] ([variable light]; [variable-2 @color]) {",
32
+ " [property color]: [variable&callee lighten]([variable-2 @color], [number 10%]);",
33
+ "}",
34
+ "[qualifier .mixin] ([variable-2 @_]; [variable-2 @color]) {",
35
+ " [property display]: [atom block];",
36
+ "}",
37
+ "[variable-2 @switch]: [variable light];",
38
+ "[qualifier .class] {",
39
+ " [qualifier .mixin]([variable-2 @switch]; [atom #888]);",
40
+ "}");
41
+
42
+ MT("nest",
43
+ "[qualifier .one] {",
44
+ " [def @media] ([property width]: [number 400px]) {",
45
+ " [property font-size]: [number 1.2em];",
46
+ " [def @media] [attribute print] [keyword and] [property color] {",
47
+ " [property color]: [keyword blue];",
48
+ " }",
49
+ " }",
50
+ "}");
51
+
52
+
53
+ MT("interpolation", ".@{[variable foo]} { [property font-weight]: [atom bold]; }");
54
+ })();
data/bin/mode/css/scss.html ADDED
@@ -0,0 +1,158 @@
1
+ <!doctype html>
2
+
3
+ <title>CodeMirror: SCSS 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
+ <script src="../../lib/codemirror.js"></script>
9
+ <script src="../../addon/edit/matchbrackets.js"></script>
10
+ <script src="css.js"></script>
11
+ <style>.CodeMirror {background: #f8f8f8;}</style>
12
+ <div id=nav>
13
+ <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
14
+
15
+ <ul>
16
+ <li><a href="../../index.html">Home</a>
17
+ <li><a href="../../doc/manual.html">Manual</a>
18
+ <li><a href="https://github.com/codemirror/codemirror">Code</a>
19
+ </ul>
20
+ <ul>
21
+ <li><a href="../index.html">Language modes</a>
22
+ <li><a class=active href="#">SCSS</a>
23
+ </ul>
24
+ </div>
25
+
26
+ <article>
27
+ <h2>SCSS mode</h2>
28
+ <form><textarea id="code" name="code">
29
+ /* Some example SCSS */
30
+
31
+ @import "compass/css3";
32
+ $variable: #333;
33
+
34
+ $blue: #3bbfce;
35
+ $margin: 16px;
36
+
37
+ .content-navigation {
38
+ #nested {
39
+ background-color: black;
40
+ }
41
+ border-color: $blue;
42
+ color:
43
+ darken($blue, 9%);
44
+ }
45
+
46
+ .border {
47
+ padding: $margin / 2;
48
+ margin: $margin / 2;
49
+ border-color: $blue;
50
+ }
51
+
52
+ @mixin table-base {
53
+ th {
54
+ text-align: center;
55
+ font-weight: bold;
56
+ }
57
+ td, th {padding: 2px}
58
+ }
59
+
60
+ table.hl {
61
+ margin: 2em 0;
62
+ td.ln {
63
+ text-align: right;
64
+ }
65
+ }
66
+
67
+ li {
68
+ font: {
69
+ family: serif;
70
+ weight: bold;
71
+ size: 1.2em;
72
+ }
73
+ }
74
+
75
+ @mixin left($dist) {
76
+ float: left;
77
+ margin-left: $dist;
78
+ }
79
+
80
+ #data {
81
+ @include left(10px);
82
+ @include table-base;
83
+ }
84
+
85
+ .source {
86
+ @include flow-into(target);
87
+ border: 10px solid green;
88
+ margin: 20px;
89
+ width: 200px; }
90
+
91
+ .new-container {
92
+ @include flow-from(target);
93
+ border: 10px solid red;
94
+ margin: 20px;
95
+ width: 200px; }
96
+
97
+ body {
98
+ margin: 0;
99
+ padding: 3em 6em;
100
+ font-family: tahoma, arial, sans-serif;
101
+ color: #000;
102
+ }
103
+
104
+ @mixin yellow() {
105
+ background: yellow;
106
+ }
107
+
108
+ .big {
109
+ font-size: 14px;
110
+ }
111
+
112
+ .nested {
113
+ @include border-radius(3px);
114
+ @extend .big;
115
+ p {
116
+ background: whitesmoke;
117
+ a {
118
+ color: red;
119
+ }
120
+ }
121
+ }
122
+
123
+ #navigation a {
124
+ font-weight: bold;
125
+ text-decoration: none !important;
126
+ }
127
+
128
+ h1 {
129
+ font-size: 2.5em;
130
+ }
131
+
132
+ h2 {
133
+ font-size: 1.7em;
134
+ }
135
+
136
+ h1:before, h2:before {
137
+ content: "::";
138
+ }
139
+
140
+ code {
141
+ font-family: courier, monospace;
142
+ font-size: 80%;
143
+ color: #418A8A;
144
+ }
145
+ </textarea></form>
146
+ <script>
147
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
148
+ lineNumbers: true,
149
+ matchBrackets: true,
150
+ mode: "text/x-scss"
151
+ });
152
+ </script>
153
+
154
+ <p>The SCSS mode is a sub-mode of the <a href="index.html">CSS mode</a> (defined in <code>css.js</code>).</p>
155
+
156
+ <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>, <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>
157
+
158
+ </article>
data/bin/mode/css/scss_test.js ADDED
@@ -0,0 +1,110 @@
1
+ // CodeMirror, copyright (c) by Marijn Haverbeke and others
2
+ // Distributed under an MIT license: https://codemirror.net/LICENSE
3
+
4
+ (function() {
5
+ var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-scss");
6
+ function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "scss"); }
7
+
8
+ MT('url_with_quotation',
9
+ "[tag foo] { [property background]:[variable&callee url]([string test.jpg]) }");
10
+
11
+ MT('url_with_double_quotes',
12
+ "[tag foo] { [property background]:[variable&callee url]([string \"test.jpg\"]) }");
13
+
14
+ MT('url_with_single_quotes',
15
+ "[tag foo] { [property background]:[variable&callee url]([string \'test.jpg\']) }");
16
+
17
+ MT('string',
18
+ "[def @import] [string \"compass/css3\"]");
19
+
20
+ MT('important_keyword',
21
+ "[tag foo] { [property background]:[variable&callee url]([string \'test.jpg\']) [keyword !important] }");
22
+
23
+ MT('variable',
24
+ "[variable-2 $blue]:[atom #333]");
25
+
26
+ MT('variable_as_attribute',
27
+ "[tag foo] { [property color]:[variable-2 $blue] }");
28
+
29
+ MT('numbers',
30
+ "[tag foo] { [property padding]:[number 10px] [number 10] [number 10em] [number 8in] }");
31
+
32
+ MT('number_percentage',
33
+ "[tag foo] { [property width]:[number 80%] }");
34
+
35
+ MT('selector',
36
+ "[builtin #hello][qualifier .world]{}");
37
+
38
+ MT('singleline_comment',
39
+ "[comment // this is a comment]");
40
+
41
+ MT('multiline_comment',
42
+ "[comment /*foobar*/]");
43
+
44
+ MT('attribute_with_hyphen',
45
+ "[tag foo] { [property font-size]:[number 10px] }");
46
+
47
+ MT('string_after_attribute',
48
+ "[tag foo] { [property content]:[string \"::\"] }");
49
+
50
+ MT('directives',
51
+ "[def @include] [qualifier .mixin]");
52
+
53
+ MT('basic_structure',
54
+ "[tag p] { [property background]:[keyword red]; }");
55
+
56
+ MT('nested_structure',
57
+ "[tag p] { [tag a] { [property color]:[keyword red]; } }");
58
+
59
+ MT('mixin',
60
+ "[def @mixin] [tag table-base] {}");
61
+
62
+ MT('number_without_semicolon',
63
+ "[tag p] {[property width]:[number 12]}",
64
+ "[tag a] {[property color]:[keyword red];}");
65
+
66
+ MT('atom_in_nested_block',
67
+ "[tag p] { [tag a] { [property color]:[atom #000]; } }");
68
+
69
+ MT('interpolation_in_property',
70
+ "[tag foo] { #{[variable-2 $hello]}:[number 2]; }");
71
+
72
+ MT('interpolation_in_selector',
73
+ "[tag foo]#{[variable-2 $hello]} { [property color]:[atom #000]; }");
74
+
75
+ MT('interpolation_error',
76
+ "[tag foo]#{[variable foo]} { [property color]:[atom #000]; }");
77
+
78
+ MT("divide_operator",
79
+ "[tag foo] { [property width]:[number 4] [operator /] [number 2] }");
80
+
81
+ MT('nested_structure_with_id_selector',
82
+ "[tag p] { [builtin #hello] { [property color]:[keyword red]; } }");
83
+
84
+ MT('indent_mixin',
85
+ "[def @mixin] [tag container] (",
86
+ " [variable-2 $a]: [number 10],",
87
+ " [variable-2 $b]: [number 10])",
88
+ "{}");
89
+
90
+ MT('indent_nested',
91
+ "[tag foo] {",
92
+ " [tag bar] {",
93
+ " }",
94
+ "}");
95
+
96
+ MT('indent_parentheses',
97
+ "[tag foo] {",
98
+ " [property color]: [variable&callee darken]([variable-2 $blue],",
99
+ " [number 9%]);",
100
+ "}");
101
+
102
+ MT('indent_vardef',
103
+ "[variable-2 $name]:",
104
+ " [string 'val'];",
105
+ "[tag tag] {",
106
+ " [tag inner] {",
107
+ " [property margin]: [number 3px];",
108
+ " }",
109
+ "}");
110
+ })();