kalei 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +20 -0
- data/README.md +34 -0
- data/Rakefile +39 -0
- data/lib/kalei.rb +3 -0
- data/lib/kalei/app.rb +9 -0
- data/lib/kalei/engine.rb +7 -0
- data/lib/kalei/public/css/buttons.css +251 -0
- data/lib/kalei/public/css/demo-styleDoccos.css +360 -0
- data/lib/kalei/public/css/fixie-demo.css +39 -0
- data/lib/kalei/public/css/highlight/LICENSE +24 -0
- data/lib/kalei/public/css/highlight/README.md +120 -0
- data/lib/kalei/public/css/highlight/README.ru.md +125 -0
- data/lib/kalei/public/css/highlight/classref.txt +544 -0
- data/lib/kalei/public/css/highlight/default.min.css +1 -0
- data/lib/kalei/public/css/highlight/highlight.pack.js +1 -0
- data/lib/kalei/public/css/highlight/styles/arta.css +153 -0
- data/lib/kalei/public/css/highlight/styles/ascetic.css +49 -0
- data/lib/kalei/public/css/highlight/styles/brown_paper.css +104 -0
- data/lib/kalei/public/css/highlight/styles/brown_papersq.png +0 -0
- data/lib/kalei/public/css/highlight/styles/dark.css +103 -0
- data/lib/kalei/public/css/highlight/styles/default.css +133 -0
- data/lib/kalei/public/css/highlight/styles/far.css +110 -0
- data/lib/kalei/public/css/highlight/styles/github.css +133 -0
- data/lib/kalei/public/css/highlight/styles/googlecode.css +143 -0
- data/lib/kalei/public/css/highlight/styles/idea.css +122 -0
- data/lib/kalei/public/css/highlight/styles/ir_black.css +99 -0
- data/lib/kalei/public/css/highlight/styles/magula.css +120 -0
- data/lib/kalei/public/css/highlight/styles/monokai.css +116 -0
- data/lib/kalei/public/css/highlight/styles/pojoaque.css +106 -0
- data/lib/kalei/public/css/highlight/styles/pojoaque.jpg +0 -0
- data/lib/kalei/public/css/highlight/styles/school_book.css +111 -0
- data/lib/kalei/public/css/highlight/styles/school_book.png +0 -0
- data/lib/kalei/public/css/highlight/styles/solarized_dark.css +90 -0
- data/lib/kalei/public/css/highlight/styles/solarized_light.css +90 -0
- data/lib/kalei/public/css/highlight/styles/sunburst.css +149 -0
- data/lib/kalei/public/css/highlight/styles/vs.css +85 -0
- data/lib/kalei/public/css/highlight/styles/xcode.css +153 -0
- data/lib/kalei/public/css/highlight/styles/zenburn.css +115 -0
- data/lib/kalei/public/css/styles.css +95 -0
- data/lib/kalei/public/css/theme.css +259 -0
- data/lib/kalei/public/css/theme2.css +51 -0
- data/lib/kalei/public/js/boilerplate.js +9 -0
- data/lib/kalei/public/js/config.js +8 -0
- data/lib/kalei/public/js/events.js +8 -0
- data/lib/kalei/public/js/libs/backbone/backbone-min.js +37 -0
- data/lib/kalei/public/js/libs/backbone/backbone-optamd3-min.js +37 -0
- data/lib/kalei/public/js/libs/cssbeautify/cssbeautify.js +198 -0
- data/lib/kalei/public/js/libs/fixie/fixie.js +1 -0
- data/lib/kalei/public/js/libs/highlight/highlight.js +1 -0
- data/lib/kalei/public/js/libs/highlight/highlight.pack.js +1 -0
- data/lib/kalei/public/js/libs/highlighter/shBrushCss.js +90 -0
- data/lib/kalei/public/js/libs/highlighter/shCore.js +2371 -0
- data/lib/kalei/public/js/libs/jquery/jquery-min.js +4 -0
- data/lib/kalei/public/js/libs/jscssp/jscssp.js +5431 -0
- data/lib/kalei/public/js/libs/marked/marked.js +793 -0
- data/lib/kalei/public/js/libs/pagedown/converter.js +1335 -0
- data/lib/kalei/public/js/libs/pagedown/pagedown +1332 -0
- data/lib/kalei/public/js/libs/pagedown/sanitizer.js +108 -0
- data/lib/kalei/public/js/libs/parseuri/parseuri.js +32 -0
- data/lib/kalei/public/js/libs/require/order.js +1 -0
- data/lib/kalei/public/js/libs/require/require.js +31 -0
- data/lib/kalei/public/js/libs/require/text.js +11 -0
- data/lib/kalei/public/js/libs/showdown/showdown.js +1344 -0
- data/lib/kalei/public/js/libs/underscore/underscore-min.js +31 -0
- data/lib/kalei/public/js/main.js +39 -0
- data/lib/kalei/public/js/router.js +39 -0
- data/lib/kalei/public/js/views/app.js +24 -0
- data/lib/kalei/public/js/views/style/menu.js +77 -0
- data/lib/kalei/public/js/views/style/page.js +100 -0
- data/lib/kalei/public/js/vm.js +33 -0
- data/lib/kalei/public/templates/layout.html +4 -0
- data/lib/kalei/public/templates/style/menu.html +22 -0
- data/lib/kalei/public/templates/style/page.html +15 -0
- data/lib/kalei/views/index.erb +18 -0
- data/test/dummy/README.rdoc +261 -0
- data/test/dummy/Rakefile +7 -0
- data/test/dummy/app/assets/javascripts/application.js +15 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/assets/stylesheets/example.css +251 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +65 -0
- data/test/dummy/config/boot.rb +10 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +31 -0
- data/test/dummy/config/environments/production.rb +64 -0
- data/test/dummy/config/environments/test.rb +35 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/inflections.rb +15 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +7 -0
- data/test/dummy/config/initializers/session_store.rb +8 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +10 -0
- data/test/dummy/config/locales/en.yml +5 -0
- data/test/dummy/config/routes.rb +4 -0
- data/test/dummy/log/development (MacBook Air's conflicted copy 2012-11-07).log +12900 -0
- data/test/dummy/log/development (Work iMac's conflicted copy 2012-11-06).log +12539 -0
- data/test/dummy/log/development.log +16426 -0
- data/test/dummy/public/404.html +26 -0
- data/test/dummy/public/422.html +26 -0
- data/test/dummy/public/500.html +25 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/script/rails +6 -0
- data/test/dummy/tmp/cache/assets/BBF/D60/sprockets%2Fc81500801e644b9c5335793957200428 +0 -0
- data/test/dummy/tmp/cache/assets/BE2/9B0/sprockets%2F4097e8869406a33602004190d03272ad +0 -0
- data/test/dummy/tmp/cache/assets/C59/B10/sprockets%2Fc6a54e0f5352e41a92c1451976584894 +0 -0
- data/test/dummy/tmp/cache/assets/C5F/F60/sprockets%2F661d2795e99d0034ce6873925e0256c4 +0 -0
- data/test/dummy/tmp/cache/assets/C64/8C0/sprockets%2F8996c378630075350fb258019546feef +0 -0
- data/test/dummy/tmp/cache/assets/C94/F80/sprockets%2F5169b582f529b8d582a59c77c247405f +0 -0
- data/test/dummy/tmp/cache/assets/CA2/420/sprockets%2Fd6a388375c983c17d367a676398f8c19 +0 -0
- data/test/dummy/tmp/cache/assets/CB0/0B0/sprockets%2F79332476368821ab45ad05e0ae798ad1 +0 -0
- data/test/dummy/tmp/cache/assets/CB1/C70/sprockets%2F7022bb23d88717cc1625b47988f0af61 +0 -0
- data/test/dummy/tmp/cache/assets/CB5/DB0/sprockets%2F3c20130f1945e66bbc9726cb8925f647 +0 -0
- data/test/dummy/tmp/cache/assets/CB6/DF0/sprockets%2F3d4ce8bf5883f171628c030851a5a669 +0 -0
- data/test/dummy/tmp/cache/assets/CC1/B70/sprockets%2F2451c355722fdc5979cd365f9f9705a3 +0 -0
- data/test/dummy/tmp/cache/assets/CC2/550/sprockets%2F07be9de6d83634f4e056ba2982578725 +0 -0
- data/test/dummy/tmp/cache/assets/CC5/8D0/sprockets%2F31f92d93c1650884a626e941c949bff8 +0 -0
- data/test/dummy/tmp/cache/assets/CC5/D90/sprockets%2F1b9f99d72878209259dce90e419a04d5 +0 -0
- data/test/dummy/tmp/cache/assets/CC8/780/sprockets%2F8578d679f76df60299b502a4c762a62f +0 -0
- data/test/dummy/tmp/cache/assets/CC8/C10/sprockets%2F69e29270f13a4c8cd925ac79608878d6 +0 -0
- data/test/dummy/tmp/cache/assets/CD1/700/sprockets%2F4a8e02ffcb8924669105305f0b107c1b +0 -0
- data/test/dummy/tmp/cache/assets/CD5/DC0/sprockets%2F92fa0519b445f0f1027d42bd9a4165e4 +0 -0
- data/test/dummy/tmp/cache/assets/CD8/370/sprockets%2F357970feca3ac29060c1e3861e2c0953 +0 -0
- data/test/dummy/tmp/cache/assets/CDB/DC0/sprockets%2F58518572a25128ada56ed9156aac53c4 +0 -0
- data/test/dummy/tmp/cache/assets/CDE/C90/sprockets%2F2b20d9775c811fdb6a466e86711d15c3 +0 -0
- data/test/dummy/tmp/cache/assets/CE3/2A0/sprockets%2F334b4fc16f7e765755c1be56c9010e28 +0 -0
- data/test/dummy/tmp/cache/assets/CE5/FF0/sprockets%2F6113d3e443309efb13b899b3a94b578e +0 -0
- data/test/dummy/tmp/cache/assets/CF2/7D0/sprockets%2F7c50d8877e9a4ee1553dc6626c373d38 +0 -0
- data/test/dummy/tmp/cache/assets/CF3/C60/sprockets%2Fdfc0395a5019a0a24b34c170a36424de +0 -0
- data/test/dummy/tmp/cache/assets/CFC/480/sprockets%2F9d5ab28532957b83f7f9fcbd78021699 +0 -0
- data/test/dummy/tmp/cache/assets/CFF/C60/sprockets%2F4ed7a36bde489e10f97698475493ae57 +0 -0
- data/test/dummy/tmp/cache/assets/D00/B00/sprockets%2Fd670c548ea2643bd95a65504c11cc13b +0 -0
- data/test/dummy/tmp/cache/assets/D0A/CB0/sprockets%2Fed8ba102e7d5015265f1e51a89b8d355 +0 -0
- data/test/dummy/tmp/cache/assets/D10/2B0/sprockets%2F1941a534f48d6fa7b22e23b4ca397b69 +0 -0
- data/test/dummy/tmp/cache/assets/D17/2A0/sprockets%2Fc094a0ad0b3abb1b92850a86f2000b61 +0 -0
- data/test/dummy/tmp/cache/assets/D17/920/sprockets%2Fa6ea2beb942f969acce6231944871652 +0 -0
- data/test/dummy/tmp/cache/assets/D19/7C0/sprockets%2F6bd121745f94b781ed36dd0ffa473856 +0 -0
- data/test/dummy/tmp/cache/assets/D1A/6F0/sprockets%2F41dd836dc3f691e237833bc1b6f76d93 +0 -0
- data/test/dummy/tmp/cache/assets/D1A/770/sprockets%2Fcfad959e3f5eb529a1310d85483b9419 +0 -0
- data/test/dummy/tmp/cache/assets/D1F/000/sprockets%2Fdecbf7d6343c0d9638d301c9982298c6 +0 -0
- data/test/dummy/tmp/cache/assets/D1F/4D0/sprockets%2F860075c377f26472f83ef56a7bb89aad +0 -0
- data/test/dummy/tmp/cache/assets/D20/7D0/sprockets%2F1f7e984b4c793c57d666af84ab414d53 +0 -0
- data/test/dummy/tmp/cache/assets/D23/D20/sprockets%2F746c5fb7c744dd87e61f34c8644183fb +0 -0
- data/test/dummy/tmp/cache/assets/D29/080/sprockets%2F6b81d746679c6151bc66da896aa97de9 +0 -0
- data/test/dummy/tmp/cache/assets/D29/890/sprockets%2Fb5d9c167884139e0f6b8d53816de6e9d +0 -0
- data/test/dummy/tmp/cache/assets/D2B/2D0/sprockets%2Fbaf7beb2c3603cfa100b276923a86543 +0 -0
- data/test/dummy/tmp/cache/assets/D2B/3F0/sprockets%2Fd6c1fabe78df17a601309081130ca90d +0 -0
- data/test/dummy/tmp/cache/assets/D2E/700/sprockets%2F9d6beb99735c03f375e19c5857ccf955 +0 -0
- data/test/dummy/tmp/cache/assets/D31/DF0/sprockets%2Fb9ca3ac15e18a4d032f61278565b7bd0 +0 -0
- data/test/dummy/tmp/cache/assets/D32/980/sprockets%2F65a361c15a5ff036ce119cb1d2296e4c +0 -0
- data/test/dummy/tmp/cache/assets/D32/A10/sprockets%2F13fe41fee1fe35b49d145bcc06610705 +0 -0
- data/test/dummy/tmp/cache/assets/D32/CA0/sprockets%2F05becf082d0b555622d944ac6e7202cf +0 -0
- data/test/dummy/tmp/cache/assets/D36/570/sprockets%2Fadfccb7c2436e006496eae16d6901523 +0 -0
- data/test/dummy/tmp/cache/assets/D3F/080/sprockets%2Fb5d1e36ac49d4c9e11728239ecf104e6 +0 -0
- data/test/dummy/tmp/cache/assets/D3F/630/sprockets%2F9093e471e526d13234feda4a9cc80fc5 +0 -0
- data/test/dummy/tmp/cache/assets/D41/3D0/sprockets%2Fd570b46455f776a30cbb729b442fbbf8 +0 -0
- data/test/dummy/tmp/cache/assets/D43/500/sprockets%2F91261e8d0df721df2c19e7c8cc6872b0 +0 -0
- data/test/dummy/tmp/cache/assets/D44/2F0/sprockets%2F8abebce08d92187dd84464b40264fc73 +0 -0
- data/test/dummy/tmp/cache/assets/D46/350/sprockets%2Fd8bcb0686002ee32c4bf49887f09be36 +0 -0
- data/test/dummy/tmp/cache/assets/D4A/F50/sprockets%2F99df6af7ff98150e1255d6d9110b80ea +0 -0
- data/test/dummy/tmp/cache/assets/D50/480/sprockets%2F6e151e3dec739c7a338a877ef65fc174 +0 -0
- data/test/dummy/tmp/cache/assets/D56/AE0/sprockets%2F68f98777bb22b8e8a78097ba0c86be0f +0 -0
- data/test/dummy/tmp/cache/assets/D5A/EA0/sprockets%2Fd771ace226fc8215a3572e0aa35bb0d6 +0 -0
- data/test/dummy/tmp/cache/assets/D5B/E00/sprockets%2Ffea8965ad9d35e43675fc5b948e0e934 +0 -0
- data/test/dummy/tmp/cache/assets/D68/860/sprockets%2Fafacb887390255dae680441eaf00ff52 +0 -0
- data/test/dummy/tmp/cache/assets/D6A/BD0/sprockets%2Fada1b7fa3ff025849aec28559a500c76 +0 -0
- data/test/dummy/tmp/cache/assets/D6D/F20/sprockets%2F3c1e635c4ba90a4512849be74fcfee07 +0 -0
- data/test/dummy/tmp/cache/assets/D6E/540/sprockets%2F4ea3314d23fc25fc9beec6262272f7f5 +0 -0
- data/test/dummy/tmp/cache/assets/D73/690/sprockets%2F356bd79cadb47fd8d6836c17d21318ab +0 -0
- data/test/dummy/tmp/cache/assets/D73/7D0/sprockets%2Ff89249a45e22e86c35f227bd340adedd +0 -0
- data/test/dummy/tmp/cache/assets/D75/000/sprockets%2Fdfae73207596c9fcc854a2aa1e4f7661 +0 -0
- data/test/dummy/tmp/cache/assets/D7A/340/sprockets%2Fc880ec2dd9f7c964cf13a12b9674c63d +0 -0
- data/test/dummy/tmp/cache/assets/D7B/6F0/sprockets%2Fc16bfd961e80bb761c67cd760179df8c +0 -0
- data/test/dummy/tmp/cache/assets/D7F/D20/sprockets%2Fe4293aa867945ef5c6eb5b26e69c6aa5 +0 -0
- data/test/dummy/tmp/cache/assets/D81/180/sprockets%2Fd666d9ef622f0e8cb708f5d8a6b2077f +0 -0
- data/test/dummy/tmp/cache/assets/D81/240/sprockets%2F1d0f3cd232c07902529b25abd0bd4ccd +0 -0
- data/test/dummy/tmp/cache/assets/D83/560/sprockets%2F9d807a49bc60df8ffb65e99292f3c0a6 +0 -0
- data/test/dummy/tmp/cache/assets/D85/D50/sprockets%2Feb82054976bcf4d46c573eafed819f58 +0 -0
- data/test/dummy/tmp/cache/assets/D8F/870/sprockets%2F696f6648b2fcbceb8e2686875e6cd6b6 +0 -0
- data/test/dummy/tmp/cache/assets/D94/9D0/sprockets%2Ff1c6747b2a961ab3ef92a5a1abe635c4 +0 -0
- data/test/dummy/tmp/cache/assets/D96/E00/sprockets%2F7f345bc6ada58cac0203458fc076f1ed +0 -0
- data/test/dummy/tmp/cache/assets/D98/DE0/sprockets%2Fbeac47000d16b66f5757aa626f5e8bda +0 -0
- data/test/dummy/tmp/cache/assets/D9D/BD0/sprockets%2F1f338b9df8d5a3ffe0b85591db253ab0 +0 -0
- data/test/dummy/tmp/cache/assets/DA0/0A0/sprockets%2F61e5c9d0b209a8ce5c8a9aa719ad564d +0 -0
- data/test/dummy/tmp/cache/assets/DB1/A10/sprockets%2Fde67190aff966baf9a57f6641fda292e +0 -0
- data/test/dummy/tmp/cache/assets/DBE/950/sprockets%2Fa3fbb592cacd368796899f89b95cde1d +0 -0
- data/test/dummy/tmp/cache/assets/DC3/950/sprockets%2F12be1e5b8e749be4b42e4ccbb24e1a84 +0 -0
- data/test/dummy/tmp/cache/assets/DC5/E10/sprockets%2Fd10332dee1b2ee73913f7f01e6bffc2f +0 -0
- data/test/dummy/tmp/cache/assets/DC7/FF0/sprockets%2F4d3d0db28baaafb745e1b4c5f564d891 +0 -0
- data/test/dummy/tmp/cache/assets/DCC/810/sprockets%2F8d18398a60db7e9e61ae42bea18b2aeb +0 -0
- data/test/dummy/tmp/cache/assets/DE5/A10/sprockets%2F1aa8db45a4cf7ab09d460c22ed063adb +0 -0
- data/test/dummy/tmp/cache/assets/DEB/9E0/sprockets%2F1afb4b1d001bc3c1b7cf8cc548bd73e7 +0 -0
- data/test/dummy/tmp/cache/assets/DF3/AB0/sprockets%2Fa2fbea7b8e275e2e4b610cd1d8fed006 +0 -0
- data/test/dummy/tmp/cache/assets/DF4/A90/sprockets%2Fc6d9482adadab4569aacdf12a224af49 +0 -0
- data/test/dummy/tmp/cache/assets/DF5/520/sprockets%2F0cb7052285cefb59b10efc3ed1c6f5cd +0 -0
- data/test/dummy/tmp/cache/assets/DF8/000/sprockets%2Fb2bc6fbabfb2c270896a8a44da66fa47 +0 -0
- data/test/dummy/tmp/cache/assets/DFB/2D0/sprockets%2F0e88b08c47faeae40d7682dc28b1fbad +0 -0
- data/test/dummy/tmp/cache/assets/DFB/9A0/sprockets%2Fb9a29f57d1ebf045452ed6cbd62eae1d +0 -0
- data/test/dummy/tmp/cache/assets/E02/D20/sprockets%2Fbd7f5fd245b9c9fc534cad60ef038d4a +0 -0
- data/test/dummy/tmp/cache/assets/E35/0A0/sprockets%2F9e0f5c61a97a72fc952a7dbbcefb7cb6 +0 -0
- data/test/dummy/tmp/cache/assets/E38/BA0/sprockets%2Fbee7ee5afe77332bcc53bc4e29c77a7f +0 -0
- data/test/dummy/tmp/cache/assets/E55/740/sprockets%2Fd51ee7ad0adc4b323ce1a9b88ed4a9af +0 -0
- data/test/dummy/tmp/cache/assets/E5C/410/sprockets%2F1bec976eb7fc54612519dcaccae6ccbe +0 -0
- data/test/dummy/tmp/cache/assets/EC5/D20/sprockets%2Fc1cf4676f1d3ab9dc9fcbaae59fbe9da +0 -0
- data/test/functional/kalei/index_controller_test.rb +11 -0
- data/test/integration/navigation_test.rb +9 -0
- data/test/kalei_test.rb +7 -0
- data/test/test_helper.rb +15 -0
- metadata +414 -0
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2012 YOURNAME
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
# Kalei - a living styleguide for your Ruby project
|
2
|
+
|
3
|
+
This gem provides an easy way to add the Kalei Styleguide to your existing Ruby application.
|
4
|
+
|
5
|
+
## Rails Installation
|
6
|
+
|
7
|
+
**Step 1:** Add kalei to your `Gemfile`:
|
8
|
+
|
9
|
+
gem 'kalei', :require => 'kalei/engine'
|
10
|
+
|
11
|
+
**Step 2:** Add kalei to your `config/routes.rb`:
|
12
|
+
|
13
|
+
Rails.application.routes.draw do
|
14
|
+
mount Kalei::Engine => "/style-guide"
|
15
|
+
end
|
16
|
+
|
17
|
+
Kalei will now be available in the browser at `/style-guide`. By default, it will parse your stylesheet at `/assets/application.css`. More configuration options coming soon.
|
18
|
+
|
19
|
+
|
20
|
+
## Non-Rails Installation
|
21
|
+
|
22
|
+
**Step 1:** Add kalei to your `Gemfile`:
|
23
|
+
|
24
|
+
gem 'kalei'
|
25
|
+
|
26
|
+
**Step 2:** Add kalei to your `config.ru`:
|
27
|
+
|
28
|
+
require 'kalei/app'
|
29
|
+
|
30
|
+
map '/style-guide' do
|
31
|
+
run Kalei::App
|
32
|
+
end
|
33
|
+
|
34
|
+
Kalei will now be available in the browser at `/style-guide`. By default, it will parse your stylesheet at `/assets/application.css`, which may not be correct for your application. More configuration options coming soon.
|
data/Rakefile
ADDED
@@ -0,0 +1,39 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
begin
|
3
|
+
require 'bundler/setup'
|
4
|
+
rescue LoadError
|
5
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
6
|
+
end
|
7
|
+
|
8
|
+
# begin
|
9
|
+
# require 'rdoc/task'
|
10
|
+
# rescue LoadError
|
11
|
+
# require 'rdoc/rdoc'
|
12
|
+
# require 'rake/rdoctask'
|
13
|
+
# RDoc::Task = Rake::RDocTask
|
14
|
+
# end
|
15
|
+
|
16
|
+
# RDoc::Task.new(:rdoc) do |rdoc|
|
17
|
+
# rdoc.rdoc_dir = 'rdoc'
|
18
|
+
# rdoc.title = 'Kalei'
|
19
|
+
# rdoc.options << '--line-numbers'
|
20
|
+
# rdoc.rdoc_files.include('README.rdoc')
|
21
|
+
# rdoc.rdoc_files.include('lib/**/*.rb')
|
22
|
+
# end
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
Bundler::GemHelper.install_tasks
|
28
|
+
|
29
|
+
# require 'rake/testtask'
|
30
|
+
|
31
|
+
# Rake::TestTask.new(:test) do |t|
|
32
|
+
# t.libs << 'lib'
|
33
|
+
# t.libs << 'test'
|
34
|
+
# t.pattern = 'test/**/*_test.rb'
|
35
|
+
# t.verbose = false
|
36
|
+
# end
|
37
|
+
|
38
|
+
|
39
|
+
# task :default => :test
|
data/lib/kalei.rb
ADDED
data/lib/kalei/app.rb
ADDED
data/lib/kalei/engine.rb
ADDED
@@ -0,0 +1,251 @@
|
|
1
|
+
/*
|
2
|
+
# Example Button Stylesheet
|
3
|
+
|
4
|
+
This is an example button set taken from [Red Team Design](http://www.red-team-design.com/just-another-awesome-css3-buttons).
|
5
|
+
|
6
|
+
|
7
|
+
```
|
8
|
+
<h2>Actions</h2>
|
9
|
+
<a href="" class="button">Button</a>
|
10
|
+
<a href="" class="button add">Add</a>
|
11
|
+
<a href="" class="button edit">Edit</a>
|
12
|
+
<a href="" class="button delete">Delete</a>
|
13
|
+
<a href="" class="button save">Save</a>
|
14
|
+
<a href="" class="button email">Send email</a>
|
15
|
+
|
16
|
+
<br><br>
|
17
|
+
|
18
|
+
<h2>Miscellaneous</h2>
|
19
|
+
<a href="" class="button like">Like</a>
|
20
|
+
<a href="" class="button next">Next</a>
|
21
|
+
<a href="" class="button star">Favourite</a>
|
22
|
+
<a href="" class="button spark">Spark</a>
|
23
|
+
<a href="" class="button play">Play</a>
|
24
|
+
|
25
|
+
<br><br>
|
26
|
+
|
27
|
+
<h2>Social media buttons</h2>
|
28
|
+
|
29
|
+
<a href="http://twitter.com/catalinred" class="button tw">Follow me</a>
|
30
|
+
<a href="http://www.facebook.com/RedTeamDesign" class="button fb">Become a fan</a>
|
31
|
+
|
32
|
+
|
33
|
+
<h2>Buttons and inputs</h2>
|
34
|
+
|
35
|
+
<button class="button">Clean button</button>
|
36
|
+
<button class="button save">Button with icon</button>
|
37
|
+
<button class="button" disabled>Disabled button</button>
|
38
|
+
<button class="button save" disabled>Another disabled button</button>
|
39
|
+
|
40
|
+
<br>
|
41
|
+
<input class="button" type="submit" value="Input submit">
|
42
|
+
<input class="button" type="button" value="Input button">
|
43
|
+
<input class="button" type="submit" value="Input submit disabled" disabled>
|
44
|
+
<input class="button" type="button" value="Input button disabled" disabled>
|
45
|
+
```
|
46
|
+
*/
|
47
|
+
.button
|
48
|
+
{
|
49
|
+
display: inline-block;
|
50
|
+
white-space: nowrap;
|
51
|
+
background-color: #ddd;
|
52
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
|
53
|
+
background-image: -webkit-linear-gradient(top, #eee, #ccc);
|
54
|
+
background-image: -moz-linear-gradient(top, #eee, #ccc);
|
55
|
+
background-image: -ms-linear-gradient(top, #eee, #ccc);
|
56
|
+
background-image: -o-linear-gradient(top, #eee, #ccc);
|
57
|
+
background-image: linear-gradient(top, #eee, #ccc);
|
58
|
+
border: 1px solid #777;
|
59
|
+
padding: 0 1.5em;
|
60
|
+
margin: 0.5em;
|
61
|
+
font: bold 1em/2em Arial, Helvetica;
|
62
|
+
text-decoration: none;
|
63
|
+
color: #333;
|
64
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.8);
|
65
|
+
-moz-border-radius: .2em;
|
66
|
+
-webkit-border-radius: .2em;
|
67
|
+
border-radius: .2em;
|
68
|
+
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
|
69
|
+
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
|
70
|
+
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
|
71
|
+
}
|
72
|
+
|
73
|
+
.button:hover
|
74
|
+
{
|
75
|
+
background-color: #eee;
|
76
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
|
77
|
+
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
|
78
|
+
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
|
79
|
+
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
|
80
|
+
background-image: -o-linear-gradient(top, #fafafa, #ddd);
|
81
|
+
background-image: linear-gradient(top, #fafafa, #ddd);
|
82
|
+
}
|
83
|
+
|
84
|
+
.button:active
|
85
|
+
{
|
86
|
+
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
|
87
|
+
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
|
88
|
+
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
|
89
|
+
position: relative;
|
90
|
+
top: 1px;
|
91
|
+
}
|
92
|
+
|
93
|
+
.button:focus
|
94
|
+
{
|
95
|
+
outline: 0;
|
96
|
+
background: #fafafa;
|
97
|
+
}
|
98
|
+
|
99
|
+
.button:before
|
100
|
+
{
|
101
|
+
background: #ccc;
|
102
|
+
background: rgba(0,0,0,.1);
|
103
|
+
float: left;
|
104
|
+
width: 1em;
|
105
|
+
text-align: center;
|
106
|
+
font-size: 1.5em;
|
107
|
+
margin: 0 1em 0 -1em;
|
108
|
+
padding: 0 .2em;
|
109
|
+
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
|
110
|
+
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
|
111
|
+
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
|
112
|
+
-moz-border-radius: .15em 0 0 .15em;
|
113
|
+
-webkit-border-radius: .15em 0 0 .15em;
|
114
|
+
border-radius: .15em 0 0 .15em;
|
115
|
+
pointer-events: none;
|
116
|
+
}
|
117
|
+
|
118
|
+
|
119
|
+
button.button, input.button
|
120
|
+
{
|
121
|
+
cursor: pointer;
|
122
|
+
overflow: visible;
|
123
|
+
}
|
124
|
+
|
125
|
+
button::-moz-focus-inner
|
126
|
+
{
|
127
|
+
border: 0;
|
128
|
+
padding: 0;
|
129
|
+
}
|
130
|
+
|
131
|
+
input::-moz-focus-inner
|
132
|
+
{
|
133
|
+
padding: .4em;
|
134
|
+
}
|
135
|
+
|
136
|
+
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
|
137
|
+
{
|
138
|
+
background: #eee;
|
139
|
+
color: #aaa;
|
140
|
+
border-color: #aaa;
|
141
|
+
cursor: default;
|
142
|
+
text-shadow: none;
|
143
|
+
position: static;
|
144
|
+
-moz-box-shadow: none;
|
145
|
+
-webkit-box-shadow: none;
|
146
|
+
box-shadow: none;
|
147
|
+
}
|
148
|
+
|
149
|
+
|
150
|
+
.add:before
|
151
|
+
{
|
152
|
+
content: "\271A";
|
153
|
+
}
|
154
|
+
|
155
|
+
.edit:before
|
156
|
+
{
|
157
|
+
content: "\270E";
|
158
|
+
}
|
159
|
+
|
160
|
+
.delete:before
|
161
|
+
{
|
162
|
+
content: "\2718";
|
163
|
+
}
|
164
|
+
|
165
|
+
.save:before
|
166
|
+
{
|
167
|
+
content: "\2714";
|
168
|
+
}
|
169
|
+
|
170
|
+
.email:before
|
171
|
+
{
|
172
|
+
content: "\2709";
|
173
|
+
}
|
174
|
+
|
175
|
+
.like:before
|
176
|
+
{
|
177
|
+
content: "\2764";
|
178
|
+
}
|
179
|
+
|
180
|
+
.next:before
|
181
|
+
{
|
182
|
+
content: "\279C";
|
183
|
+
}
|
184
|
+
|
185
|
+
.star:before
|
186
|
+
{
|
187
|
+
content: "\2605";
|
188
|
+
}
|
189
|
+
|
190
|
+
.spark:before
|
191
|
+
{
|
192
|
+
content: "\2737";
|
193
|
+
}
|
194
|
+
|
195
|
+
.play:before
|
196
|
+
{
|
197
|
+
content: "\25B6";
|
198
|
+
}
|
199
|
+
|
200
|
+
|
201
|
+
.tw, .fb,
|
202
|
+
.tw:hover, .fb:hover
|
203
|
+
{
|
204
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
|
205
|
+
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
|
206
|
+
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
|
207
|
+
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
|
208
|
+
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
|
209
|
+
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
|
210
|
+
}
|
211
|
+
|
212
|
+
.tw, .tw:focus
|
213
|
+
{
|
214
|
+
background-color: #88E1E6;
|
215
|
+
}
|
216
|
+
|
217
|
+
.fb, .fb:focus
|
218
|
+
{
|
219
|
+
background-color: #3C5A98;
|
220
|
+
color: #fff;
|
221
|
+
text-shadow: 0 1px 0 rgba(0,0,0,.4);
|
222
|
+
}
|
223
|
+
|
224
|
+
.tw:hover
|
225
|
+
{
|
226
|
+
background-color: #b1f0f3;
|
227
|
+
}
|
228
|
+
|
229
|
+
.fb:hover
|
230
|
+
{
|
231
|
+
background-color: #879bc3;
|
232
|
+
}
|
233
|
+
|
234
|
+
.tw:before
|
235
|
+
{
|
236
|
+
content: "t";
|
237
|
+
background: #91cfd3;
|
238
|
+
background: rgba(0,0,0,.1);
|
239
|
+
color: #fff;
|
240
|
+
font-family: verdana;
|
241
|
+
text-shadow: 0 1px 0 rgba(0,0,0,.4);
|
242
|
+
}
|
243
|
+
|
244
|
+
.fb:before
|
245
|
+
{
|
246
|
+
content: "f";
|
247
|
+
background: #4467ac;
|
248
|
+
background: rgba(0,0,0,.1);
|
249
|
+
color: #fff;
|
250
|
+
text-shadow: 0 1px 0 rgba(0,0,0,.4);
|
251
|
+
}
|
@@ -0,0 +1,360 @@
|
|
1
|
+
/*
|
2
|
+
StyleDocco default styles
|
3
|
+
=========================
|
4
|
+
This is the default stylesheet for StyleDocco. It also serves as an example of the documentation syntax. */
|
5
|
+
|
6
|
+
/*
|
7
|
+
General styles
|
8
|
+
--------------
|
9
|
+
We don't define any global styles except background color and resetting margins and paddings. */
|
10
|
+
body {
|
11
|
+
margin: 0;
|
12
|
+
padding: 0;
|
13
|
+
background-color: #f6f7f9;
|
14
|
+
}
|
15
|
+
/* We use the generic `sans-serif` font family to get Arial on Windows and Helvetica on Mac, but elements in the example boxes will not get any of StyleDocco styles.
|
16
|
+
|
17
|
+
<a href="#">Unstyled link example</a> */
|
18
|
+
.styledocco-sidebar,
|
19
|
+
.styledocco-docs > :not(.styledocco-example) {
|
20
|
+
margin: 15px 20px;
|
21
|
+
color: #334;
|
22
|
+
line-height: 1.618;
|
23
|
+
font-family: sans-serif;
|
24
|
+
-webkit-font-smoothing: subpixel-antialiased;
|
25
|
+
}
|
26
|
+
.styledocco-sidebar,
|
27
|
+
.styledocco-docs > p, .styledocco-docs > ul, .styledocco-docs > ol, .styledocco-docs > a {
|
28
|
+
font-size: 12px;
|
29
|
+
}
|
30
|
+
.styledocco-docs > h1, .styledocco-docs > h2, .styledocco-docs > h3,
|
31
|
+
.styledocco-docs > h4, .styledocco-docs > h5, .styledocco-docs > h6 {
|
32
|
+
/* `!important` needed due to `*:not()` above. */
|
33
|
+
margin: 25px 20px 0 !important;
|
34
|
+
line-height: 1.2 !important;
|
35
|
+
color: #555f6a !important;
|
36
|
+
}
|
37
|
+
.styledocco-docs > :not(.styledocco-example) a {
|
38
|
+
color: #27a;
|
39
|
+
text-decoration: none;
|
40
|
+
}
|
41
|
+
.styledocco-docs > :not(.styledocco-example) a:hover {
|
42
|
+
color: #157;
|
43
|
+
text-decoration: underline;
|
44
|
+
}
|
45
|
+
.styledocco-docs > :not(.styledocco-example) a:visited {
|
46
|
+
color: #146;
|
47
|
+
}
|
48
|
+
/* Manually adding the documentation container makes examples possible in the StyleDocco documentation. You won't need that in your stylesheet documentation, of course.
|
49
|
+
|
50
|
+
<div class="styledocco-docs">
|
51
|
+
<p>A <a href="#">regular link</a> (now styled), a <a href="./docs.html">visited link</a> and some <code>inline code</code>.</p>
|
52
|
+
</div>
|
53
|
+
|
54
|
+
To show pseudo selectors styles in examples, just add the pseudo selector (including the `:`) as a class name.
|
55
|
+
|
56
|
+
<div class="styledocco-docs"><p>
|
57
|
+
<a href="#">Link</a>
|
58
|
+
<a href="#" class=":hover">Link</a>
|
59
|
+
<a href="#" class=":visited">Link</a>
|
60
|
+
</div> */
|
61
|
+
.styledocco-docs > :not(.styledocco-example):not(pre) var,
|
62
|
+
.styledocco-docs > :not(.styledocco-example):not(pre) code {
|
63
|
+
padding: .1em 3px;
|
64
|
+
background: rgba(0, 0, 0, .025);
|
65
|
+
border: 1px solid rgba(0, 0, 0, .05);
|
66
|
+
border-radius: 3px;
|
67
|
+
font-style: normal;
|
68
|
+
font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
|
69
|
+
}
|
70
|
+
/* For displaying code, we prefer [Ubuntu Mono](http://font.ubuntu.com.com), falling back on some fonts that should look better at smaller sizes than the default monospace fonts.
|
71
|
+
|
72
|
+
Code blocks also get a nice selection color to better highlight what you should select when copy/pasting.
|
73
|
+
|
74
|
+
```
|
75
|
+
<div class="styledocco-docs">
|
76
|
+
<pre>
|
77
|
+
<code>The font in <pre> code blocks is small but legible.</code>
|
78
|
+
</pre>
|
79
|
+
</div>
|
80
|
+
``` */
|
81
|
+
.styledocco-code pre code,
|
82
|
+
.styledocco-docs > pre samp,
|
83
|
+
.styledocco-docs > pre code {
|
84
|
+
padding: 0;
|
85
|
+
background: transparent;
|
86
|
+
border: 0;
|
87
|
+
font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
|
88
|
+
font-size: 12px;
|
89
|
+
}
|
90
|
+
.styledocco-code code::selection,
|
91
|
+
.styledocco-docs > pre code::selection {
|
92
|
+
background: #248;
|
93
|
+
color: #fff;
|
94
|
+
}
|
95
|
+
|
96
|
+
/* ## Site Layout ##
|
97
|
+
A centered container with sections of documentation and code side by side, and a menu (not displayed here). The code pane is slightly faded out until hovered.
|
98
|
+
|
99
|
+
<div class="styledocco-container">
|
100
|
+
<div class="styledocco-section">
|
101
|
+
<div class="styledocco-docs"><p>Documentation</p></div>
|
102
|
+
<div class="styledocco-code"><pre>Code</pre></div>
|
103
|
+
</div>
|
104
|
+
</div> */
|
105
|
+
.styledocco-container {
|
106
|
+
width: 95%;
|
107
|
+
max-width: 1500px;
|
108
|
+
margin: 0 auto;
|
109
|
+
}
|
110
|
+
.styledocco-main {
|
111
|
+
float: right;
|
112
|
+
width: 83%;
|
113
|
+
}
|
114
|
+
.styledocco-sidebar {
|
115
|
+
position: fixed;
|
116
|
+
width: 9%;
|
117
|
+
padding: 1%;
|
118
|
+
}
|
119
|
+
.styledocco-section {
|
120
|
+
position: relative;
|
121
|
+
min-height: 200px;
|
122
|
+
}
|
123
|
+
|
124
|
+
/* ## Menu ##
|
125
|
+
Sidebar menu, fixed top/left. Slightly faded out when not hovered.
|
126
|
+
|
127
|
+
<div class="styledocco-sidebar :hover" style="position:static;width:40%">
|
128
|
+
<a href="#" class="styledocco-brand">Hovered sidebar</a>
|
129
|
+
<strong class="styledocco-nav-heading">Folder</strong>
|
130
|
+
<ul class="styledocco-nav">
|
131
|
+
<li><a href="#">Item</a>
|
132
|
+
<li class=":hover"><a href="#">Hovered item</a>
|
133
|
+
</ul>
|
134
|
+
</div>
|
135
|
+
<div class="styledocco-sidebar" style="position:static;width:40%">
|
136
|
+
<a href="#" class="styledocco-brand">Inactive menu</a>
|
137
|
+
<ul class="styledocco-nav">
|
138
|
+
<li><a href="#">Item</a>
|
139
|
+
</ul>
|
140
|
+
</div>
|
141
|
+
|
142
|
+
Sometimes you need to specify some inline styles in the HTML examples to override properties such as `position: fixed`. */
|
143
|
+
.styledocco-sidebar {
|
144
|
+
max-height: 90%;
|
145
|
+
overflow-y: auto;
|
146
|
+
margin-top: 20px;
|
147
|
+
word-wrap: break-word;
|
148
|
+
background-color: #777f88;
|
149
|
+
border-radius: 5px;
|
150
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
|
151
|
+
opacity: .75;
|
152
|
+
-webkit-transition: opacity 2.5s;
|
153
|
+
-moz-transition: opacity 2.5s;
|
154
|
+
-o-transition: opacity 2.5s;
|
155
|
+
}
|
156
|
+
.styledocco-sidebar:hover {
|
157
|
+
opacity: 1;
|
158
|
+
-webkit-transition: opacity .5s;
|
159
|
+
-moz-transition: opacity .5s;
|
160
|
+
-o-transition: opacity .5s;
|
161
|
+
}
|
162
|
+
.styledocco-sidebar a {
|
163
|
+
text-decoration: none;
|
164
|
+
}
|
165
|
+
.styledocco-brand {
|
166
|
+
display: block;
|
167
|
+
margin: 0 0 10px;
|
168
|
+
text-align: center;
|
169
|
+
color: #eee;
|
170
|
+
font-size: 16px;
|
171
|
+
font-weight: bold;
|
172
|
+
text-shadow: rgba(0, 0, 0, .5) 0 0 1px;
|
173
|
+
}
|
174
|
+
.styledocco-brand:hover {
|
175
|
+
color: #fff;
|
176
|
+
text-decoration: none;
|
177
|
+
}
|
178
|
+
.styledocco-nav {
|
179
|
+
margin: 0;
|
180
|
+
padding: 0;
|
181
|
+
}
|
182
|
+
.styledocco-nav-heading {
|
183
|
+
display: block;
|
184
|
+
padding: .3em 0;
|
185
|
+
margin: .5em 0 0;
|
186
|
+
color: #ddd;
|
187
|
+
font-size: 13px;
|
188
|
+
text-shadow: rgba(0, 0, 0, .25) 0 0 1px;
|
189
|
+
}
|
190
|
+
.styledocco-nav li {
|
191
|
+
margin: 0;
|
192
|
+
padding: 0;
|
193
|
+
list-style: none;
|
194
|
+
border-top: 1px solid rgba(255, 255, 255, .1);
|
195
|
+
}
|
196
|
+
.styledocco-nav li:active,
|
197
|
+
.styledocco-nav li:focus,
|
198
|
+
.styledocco-nav li:hover {
|
199
|
+
background: rgba(255, 255, 255, .2);
|
200
|
+
border-color: transparent;
|
201
|
+
border-radius: 3px;
|
202
|
+
text-decoration: none;
|
203
|
+
}
|
204
|
+
.styledocco-nav li:active + li,
|
205
|
+
.styledocco-nav li:focus + li,
|
206
|
+
.styledocco-nav li:hover + li {
|
207
|
+
border-color: transparent;
|
208
|
+
}
|
209
|
+
.styledocco-nav a {
|
210
|
+
display: block;
|
211
|
+
padding: .2em 5%;
|
212
|
+
color: #f7f7f7;
|
213
|
+
}
|
214
|
+
|
215
|
+
/* ## Documentation & code ## */
|
216
|
+
.styledocco-docs {
|
217
|
+
position: relative;
|
218
|
+
width: 58%;
|
219
|
+
min-height: 200px;
|
220
|
+
margin: 20px 0 40px;
|
221
|
+
background: #fff;
|
222
|
+
background-clip: padding-box;
|
223
|
+
border: 1px solid rgba(0, 0, 0, .1);
|
224
|
+
border-radius: 5px;
|
225
|
+
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
|
226
|
+
}
|
227
|
+
.styledocco-code {
|
228
|
+
position: absolute;
|
229
|
+
top: 5px; bottom: 5px;
|
230
|
+
right: 0;
|
231
|
+
width: 42%;
|
232
|
+
overflow: auto;
|
233
|
+
padding: 10px;
|
234
|
+
-moz-box-sizing: border-box;
|
235
|
+
box-sizing: border-box;
|
236
|
+
border-radius: 0 5px 5px 0;
|
237
|
+
border: 1px solid rgba(0, 0, 0, .1);
|
238
|
+
background: rgba(255, 255, 255, .75);
|
239
|
+
opacity: .75;
|
240
|
+
-webkit-transition: opacity .25s;
|
241
|
+
-moz-transition: opacity .25s;
|
242
|
+
-o-transition: opacity .25s;
|
243
|
+
}
|
244
|
+
.styledocco-code:hover {
|
245
|
+
opacity: 1;
|
246
|
+
}
|
247
|
+
/* Showing examples of documentation examples would be a bit recursive, but it's a checkerboard background to be able to see edges of elements regardless of their color. */
|
248
|
+
.styledocco-example {
|
249
|
+
margin-top: 10px;
|
250
|
+
padding: 15px;
|
251
|
+
overflow: auto;
|
252
|
+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAAZQTFRF+vr6////+o8bnQAAABBJREFUCB1jYPjPgBXhEAYAfr8P8bm+jEoAAAAASUVORK5CYII=);
|
253
|
+
border-top: 1px dotted rgb(220, 220, 225);
|
254
|
+
}
|
255
|
+
pre + .styledocco-example {
|
256
|
+
margin-top: 0;
|
257
|
+
border-top: 0;
|
258
|
+
}
|
259
|
+
.styledocco-example:before, .styledocco-example:after { display: table; content: ""; }
|
260
|
+
.styledocco-example:after { clear: both; }
|
261
|
+
|
262
|
+
.styledocco-docs > pre,
|
263
|
+
.styledocco-code pre {
|
264
|
+
white-space: pre-wrap;
|
265
|
+
word-wrap: break-word;
|
266
|
+
color: #445;
|
267
|
+
margin: 0 !important;
|
268
|
+
line-height: 1.1 !important;
|
269
|
+
}
|
270
|
+
.styledocco-docs > .pilcrow {
|
271
|
+
position: absolute;
|
272
|
+
right: 0; top: 0;
|
273
|
+
text-decoration: none;
|
274
|
+
font-weight: bold;
|
275
|
+
opacity: .5;
|
276
|
+
}
|
277
|
+
.styledocco-docs > .pilcrow:hover {
|
278
|
+
opacity: 1;
|
279
|
+
}
|
280
|
+
.styledocco-docs > pre {
|
281
|
+
max-height: 200px;
|
282
|
+
overflow-y: auto;
|
283
|
+
padding: 10px 20px;
|
284
|
+
background: rgb(248, 249, 251);
|
285
|
+
border: 1px solid rgba(220, 220, 225, .8);
|
286
|
+
border-left: 0; border-right: 0;
|
287
|
+
}
|
288
|
+
.styledocco-example + pre {
|
289
|
+
border-top: 1px dotted rgb(220, 220, 225);
|
290
|
+
}
|
291
|
+
.styledocco-docs > pre:first-child {
|
292
|
+
border-top: 0;
|
293
|
+
}
|
294
|
+
.styledocco-docs > pre:last-child {
|
295
|
+
border-bottom: 0;
|
296
|
+
}
|
297
|
+
.styledocco-code pre {
|
298
|
+
padding: 0;
|
299
|
+
background: transparent;
|
300
|
+
border: 0;
|
301
|
+
}
|
302
|
+
|
303
|
+
/* ### Code highlighting
|
304
|
+
The code highlighting color scheme is based on GitHub's code colors, but slightly muted and modified to support more CSS features. */
|
305
|
+
/* ```
|
306
|
+
<div class="styledocco-docs"><pre><code><span class="comment">// A comment</span>
|
307
|
+
<span class="tag">body</span>, <span class="id">#foo</span>, <span class="class">.bar</span> <span class="rules">{
|
308
|
+
<span class="rule"><span class="attribute">property</span>:<span class="value"> <span class="function">foo(<span class="number">99</span>px</span>)</span> <span class="important">!important</span>;</span>
|
309
|
+
<span class="rule"><span class="attribute">content</span>:<span class="value"> <span class="string">'hi'</span></span>;</span>
|
310
|
+
}</span>
|
311
|
+
<span class="tag"><tag <span class="attribute">attribute</span>=<span class="value">"value"</span>></span>string<span class="tag"></tag></span>
|
312
|
+
</code></pre></div>
|
313
|
+
``` */
|
314
|
+
.styledocco-code .comment, .styledocco-docs > pre .comment {
|
315
|
+
color: #887;
|
316
|
+
}
|
317
|
+
.styledocco-code .number, .styledocco-docs > pre .number,
|
318
|
+
.styledocco-code .hexcolor, .styledocco-docs > pre .hexcolor {
|
319
|
+
color: #497;
|
320
|
+
}
|
321
|
+
.styledocco-code .important, .styledocco-docs > pre .important,
|
322
|
+
.styledocco-code .string, .styledocco-docs > pre .string,
|
323
|
+
.styledocco-code .tag .value, .styledocco-docs > pre .tag .value {
|
324
|
+
color: #b35;
|
325
|
+
}
|
326
|
+
.styledocco-code .tag, .styledocco-docs > pre .tag,
|
327
|
+
.styledocco-code .tag .title, .styledocco-docs > pre .tag .title {
|
328
|
+
color: #348;
|
329
|
+
}
|
330
|
+
.styledocco-code .attribute, .styledocco-docs > pre .attribute,
|
331
|
+
.styledocco-code .variable, .styledocco-docs > pre .variable,
|
332
|
+
.styledocco-docs > :not(.styledocco-example):not(pre) var {
|
333
|
+
color: #188;
|
334
|
+
}
|
335
|
+
.styledocco-code .pseudo, .styledocco-docs > pre .pseudo,
|
336
|
+
.styledocco-code .keyword, .styledocco-docs > pre .keyword,
|
337
|
+
.styledocco-code .rule .attribute, .styledocco-docs > pre .rule .attribute {
|
338
|
+
color: #001;
|
339
|
+
}
|
340
|
+
.styledocco-code .at_rule, .styledocco-docs > pre .at_rule,
|
341
|
+
.styledocco-code .at_rule .keyword, .styledocco-docs > pre .at_rule .keyword,
|
342
|
+
.styledocco-code .id, .styledocco-docs > pre .id {
|
343
|
+
color: #724;
|
344
|
+
}
|
345
|
+
.styledocco-code .function, .styledocco-docs > pre .function,
|
346
|
+
.styledocco-code .class, .styledocco-docs > pre .class {
|
347
|
+
color: #328;
|
348
|
+
}
|
349
|
+
|
350
|
+
.styledocco-example .styledocco-section,
|
351
|
+
.styledocco-example .styledocco-docs {
|
352
|
+
min-height: 0;
|
353
|
+
margin: 0;
|
354
|
+
}
|
355
|
+
|
356
|
+
.styledocco-example .styledocco-section,
|
357
|
+
.styledocco-example .styledocco-docs {
|
358
|
+
min-height: 0;
|
359
|
+
margin: 0;
|
360
|
+
}}
|