improved docs styling

This commit is contained in:
B Mathis 2010-11-23 00:09:18 -06:00
parent 78bcd4451a
commit 17ab1d3820
25 changed files with 517 additions and 96 deletions

View File

@ -8,7 +8,7 @@ GIT
PATH
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
specs:
compass (0.11.alpha.0.df908d3)
compass (0.11.alpha.0.78bcd44)
haml (~> 3.0.23)
GEM

Binary file not shown.

File diff suppressed because one or more lines are too long

After

(image error) Size: 40 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

(image error) Size: 2.3 KiB

View File

@ -6,5 +6,5 @@ $(function(){
$('span.arg[data-default-value]').each(function(i,e){
e = $(e);
e.attr("title", "Defaults to: " + e.attr("data-default-value"))
})
});
});
});

View File

@ -0,0 +1,96 @@
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};

View File

@ -0,0 +1,75 @@
function changeTheme(theme) {
el = $('html');
if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
else if (el.hasClass(theme)) return;
el.removeClass('light');
el.removeClass('dark');
el.addClass(theme);
setThemePreference(theme);
}
function changeSyntax(syntax) {
el = $('body');
if (!syntax) {
syntax = el.hasClass('scss') ? 'sass': 'scss';
} else if (el.hasClass(syntax)) {
return;
}
el.removeClass('scss');
el.removeClass('sass');
el.addClass(syntax);
setSyntaxPreference(syntax);
}
function setThemePreference(theme) {
$.cookie("compass-theme", null);
$.cookie("compass-theme", theme, {
expires: 60 * 60 * 24 * 365 * 10,
path: '/'
});
}
function getThemePreference(defaultTheme) {
theme = $.cookie("compass-theme");
if (theme) {
changeTheme(theme);
} else {
changeTheme(defaultTheme);
}
}
function setSyntaxPreference(syntax) {
$.cookie("compass-syntax", null);
$.cookie("compass-syntax", syntax, {
expires: 60 * 60 * 24 * 365 * 10,
path: '/'
});
}
function getSyntaxPreference(defaultSyntax) {
syntax = $.cookie("compass-syntax");
if (syntax){
changeSyntax(syntax);
} else {
changeSyntax(defaultSyntax);
}
}
$('document').ready(function(){
$('#page').click(function(event){
var target = $(event.target);
if (target.parent().is('#syntax_pref')) {
changeSyntax(target.attr("rel"));
event.preventDefault();
} else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
changeTheme();
event.preventDefault();
} else if (target.attr("rel") == "view source") {
$(target.attr("href")).toggle();
event.preventDefault();
}
});
getThemePreference('dark');
getSyntaxPreference('scss');
})

View File

@ -11,17 +11,13 @@ classnames:
meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
layout: core
---
%h1 Compass CSS3 Module
%p
The CSS3 module provides cross-browser mixins for CSS properties
introduced in CSS3, for example
<a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
%p
What rendering engines you support for the experimental css properties is governed by
the configurable variables defined in <a href="/reference/compass/support/">the browser
support module</a>.
%h3 Importing the Entire CSS3 Library
%p
To import the CSS3 Module add the following to your stylesheets:<br>
<code>@import "compass/css3"</code><br>
- render 'reference' do
%p
The CSS3 module provides cross-browser mixins for CSS properties
introduced in CSS3, for example
<a href="/reference/compass/css3/border_radius/"><code>border-radius</code></a>
and <a href="/reference/compass/css3/text-shadow/"><code>text-shadow</code></a>.
%p
What rendering engines you support for the experimental css properties is governed by
the configurable variables defined in <a href="/reference/compass/support/">the browser
support module</a>.

View File

@ -8,4 +8,7 @@
+border-bottom-right-radius(0)
.hide
display: none
display: none
#theme_pref
@extend .hide

View File

@ -0,0 +1,45 @@
body.sass .mixin-source .scss, body.scss .mixin-source .sass { @extend .hide;}
.mixin-source { display: none; }
.syntaxhighlighter { padding: 5px 0; @include border-radius;
.toolbar { position: absolute; right: 0; }
.code-block { background: none; @include box-shadow(none)}
}
pre {
margin: 1.5em 0;
.code-block { padding: .6em; }
}
.code-block { @extend .round-corners-4; @extend .fixed-font;
display: inline-block;
font-size: .95em;
padding: 0 .4em;
line-height: 1.5em;
}
.source-documentation {
@extend .round-corners-4;
padding: 10px 15px;
background: rgba(#000, .1);
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
@include round-bottom-corners
}
h3 { @include round-corners;
padding: 10px 15px;
margin: 20px 0 2px;
position: relative;
a { text-decoration: none;}
}
h3.mixin { @include round-top-corners;}
.arg {
display: inline-block;
padding: 0 2px;
&[data-default-value] {
font-style: italic;
&:before{ content: "[" ; }
&:after{ content: "]" ; } }
}
a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
h2 + a[rel="view source"]{ margin-top: 12px;}

View File

@ -9,7 +9,9 @@ body {
@extend .sans-font;
line-height: 1.45em;
}
#wrap { @extend .group; padding: 0 20px 20px;}
#wrap { @extend .group; padding: 0 20px 20px; }
#page { @extend .group; padding-bottom: 30px;}
footer { @extend .group; clear: both; padding-top: 20px;}
header { padding: 22px 0 0; position: relative; }
#page > article { padding-left: $side-nav-width + 40px; }
#page > article { padding-left: $side-nav-width + 45px; }
aside { float: left; width: $side-nav-width; }

View File

@ -1,10 +1,42 @@
#page {
position: relative;
padding-top: 25px;
& > article { padding-top: 14px; font-size: 15px;
h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}}
padding-top: 40px;
& > article { padding-top: 10px; font-size: 15px; } }
#version { @include round-bottom-corners;
font-size: .7em;
#docs_panel {
position: absolute; top: 0; right: 0;
padding: 2px 8px 4px; }
width: 100%;
& > div { float: right; margin-left: 10px; }
#theme_pref { padding: 3px 12px 6px; }
#version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0;}
#syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
}
#theme_pref {
a { display: block; text-indent: -9999px; font-size: 18px; width: .9em; position: relative; text-decoration: none; }
a:before { text-indent: 0; position: absolute; left: 0; top: 2px; content: 'Q'; @extend .pictos; } }
footer {
.legalese { font-size: .75em; float: left;
span { display: block; } }
.links { float: left; font-size: .9em;
ul { @include horizontal-list(10px);
li:last-child {border: 0; } } }
}
h2 a.help {
text-indent: -9999px;
display: inline-block;
position: relative;
text-decoration: none;
&:before {
@extend .pictos;
content: "?";
text-indent: 0;
position: absolute;
top: 2px;
left: 0;
color: #202020;
font-size: .9em;
text-shadow: #444 0 1px 0;
}
}

View File

@ -3,7 +3,7 @@ nav a { @include hover-link; }
header { @extend .group;
font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;}
#main-nav {
width: 76%;
width: 79%;
display: inline-block;
padding-bottom: 10px;
ul {
@ -24,13 +24,12 @@ header { @extend .group;
padding: 2px 10px;
display: inline-block; }}
#docs-nav { padding-right: 15px; }
#docs-nav { padding-right: 20px; }
#module-nav {
display: inline-block;
padding-left: 8px;
ul {
@include horizontal-list(10px);}}
padding-left: 10px;
ul { @include horizontal-list(10px); } }
#search-docs {
width: 20%; position: absolute; top: 29px; right: 0;

View File

@ -1,7 +1,7 @@
aside {
padding-top: 20px;
padding-top: 16px;
text-align: right;
padding-right: 17px;
padding-right: 22px;
h2 {
text-align: left;
font-size: 1.3em;

View File

@ -1,7 +1,7 @@
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
body { background: $page-bg; color: $text;
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
body {background: $page-bg; color: $text;
a { color: $link; } }
#wrap { @extend .horizontal-rule-#{$theme}; }
#page { @extend .horizontal-rule-#{$theme}; }
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
nav a { color: $nav-link; }
@ -18,51 +18,63 @@
#search-docs {
input::-webkit-input-placeholder { color: $search; }
input { @extend .inset-panel-#{$theme}; background-color: rgba($search-bg, .2); color: $search;}}
input { @extend .inset-panel-#{$theme}; color: $search;}}
aside { @extend .vertical-rule-#{$theme};
h2 { @extend .horizontal-rule-#{$theme};
a { color: $text; } } }
a { color: $strong-text; } } }
#version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0;
a { @include hover-link; color: rgba($version-text, .7); } }
#docs_panel > div { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0; @include round-bottom-corners;
a { text-decoration: none; color: rgba($version-text, .7); }
a[rel=theme] { color: rgba($version-border, .8); text-shadow: rgba($version-text, .08) 0 1px 0; &:hover { text-decoration: none; color: $strong-text; text-shadow: $version-border 0 1px 0; } }
a[rel=sass], a[rel=scss] { color: rgba($version-border, .6); text-shadow: rgba($version-text, .08) 0 1px 0;} }
body.sass #docs_panel a[rel=sass], body.scss #docs_panel a[rel=scss] { color: rgba($version-text, .5); @include border-radius(1em); @extend .inset-panel-#{$theme};}
#page > article {
#{headings()}{ color: $heading; } }
h1, h2 { @extend .horizontal-rule-#{$theme}; }
h3 {
background: rgba(#000, .2);
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
a:hover { color: $heading;
.arg { color: rgba($heading, .6);}
}
}
footer .links li { @extend .vertical-rule-#{$theme}; }
code { @extend .code-block-#{$theme}; color: $code;}
.arg { color: $code;}
.arg[data-default-value] { color: rgba($code, .7);}
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);};}
}
// Dark theme
.inset-panel-dark {
@include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
@include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
background-color: rgba(#000, .2); }
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
background-color: rgba(#000, .3); }
.horizontal-rule-dark {
@include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
@include box-shadow(rgba(#fff, .07) 0 1px 0);
border-bottom: 1px solid #121212; }
.vertical-rule-dark {
@include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
@include box-shadow(rgba(#fff, .07) 1px 0 0);
border-right: 1px solid #121212; }
.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark;
display: inline-block;
padding-left: 2px;
padding-right: 2px; }
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
@mixin dark-theme {
$page-bg: #343434;
$text: #b6b6b6;
$text: #c6c6c6;
$heading: white;
$strong-text: #dbdbdb;
$search: #6e6e6e;
$search-bg: black;
$link: #dadbb1;
$nav-link: #bfbfbf;
$code: #85AFC9;
$main-nav: $strong-text;
$main-nav-selected: #fb292d;
@ -72,7 +84,52 @@
$version-text: white;
$version-border: black;
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
}
html.dark { @include dark-theme; }
// Light Theme
.inset-panel-light {
@include background-image(linear-gradient(rgba(#000, .15), rgba(#000, 0)));
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .25) 0 -1px 0);
background-color: rgba(#fff, .2); }
.horizontal-rule-light {
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
border-bottom: 1px solid #bbb; }
.vertical-rule-light {
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
border-right: 1px solid #bbb; }
.code-block-light { @extend .code-block;
//@include background-image(linear-gradient(rgba(#000, .1), rgba(#000, 0)));
@include box-shadow(rgba(#000, .2) 0 0 1px 1px inset);
background-color: rgba(#fff, 1);}
@mixin light-theme {
$page-bg: #eaeaea;
$text: #222 ;
$heading: black;
$strong-text: #000;
$search: #666;
$search-bg: white;
$link: darken(adjust-hue(#dadbb1, 160), 40);
$nav-link: #444;
$main-nav: $strong-text;
$main-nav-selected: darken(#fb292d, 10);
$docs-nav-selected: $strong-text;
$module-nav-selected: $link;
$version-text: black;
$version-border: white;
$code: #222;
@include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
}
html.dark { @include dark-theme; }
html.light { @include light-theme; }

View File

@ -1,14 +1,21 @@
@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local(''), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
//@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local(''), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;}
@include font-face("pictos-web", font-files("pictos-web.woff", woff, "pictos-web.ttf", truetype, "pictos-web.svg#webfontIyfZbseF", svg), 'pictos-web.eot');
.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
.heading-font { font-family: 'Museo Sans', 'serif'; }
.pictos { font-family: pictos-web; }
.pictos { font-family: pictos-web; font-weight: normal; font-style: normal;}
.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
#page > article {
line-height: 1.45em;
ol { list-style: outside decimal; padding-left: 2.5em;}
ul, ol { margin-bottom: 1.5em;}
ul, ol, dl { margin-bottom: 1.5em;}
p { margin-bottom: 1.2em;}
#{headings()}{ @extend .heading-font; line-height: 1.2em; }
h1 { font-size: 30px; }
h2 { font-size: 20px; }
h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;}
h3 { font-size: 18px; }
h1 { padding-bottom: 6px; margin-bottom: 9px; }
ul { list-style: inside disc; }
dt { font-weight: bold; }
}

View File

@ -11,5 +11,6 @@
@import partials/nav
@import partials/sidebar
@import partials/main
@import partials/code
@import core/clearing-classes

View File

@ -1,6 +1,6 @@
!!!5
- # This template is just the stuff until the body tag.
%html.dark.no-js{:dir => "ltr", :lang => "en"}
%html.no-js{:dir => "ltr", :lang => "en"}
%head
%meta{:charset => "utf-8"}/
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
@ -8,6 +8,10 @@
%title
#{@item[:title]} | Compass Documentation
<!--[if !IE 6]><!-->
%script(src="/javascripts/jquery-1.3.2.min.js")
%script(src="/javascripts/jquery.cookie.js")
%script(src="/javascripts/site.js")
%script(src="/javascripts/fixups.js" deferred)
%link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
%link{:href => "/stylesheets/syntax/shCore.css", :rel => "stylesheet", :type => "text/css"}
%link{:href => "/stylesheets/syntax/shThemeDefault.css", :rel => "stylesheet", :type => "text/css"}

View File

@ -1,5 +1,4 @@
- render 'main' do
%aside(role="sidebar")
%nav#local-nav
%ul=item_tree(reference_item(:stylesheet => "blueprint.scss"), :depth => 2, :omit_self => false, :heading_level => 2)
%article= yield
%aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss"
%article= yield

View File

@ -19,16 +19,20 @@
%a{:href => "/reference/blueprint/", :rel => "blueprint"} Blueprint
%a{:href => "/reference/compass/", :rel => "core"} Core
- if @item[:content_for_module_nav]
%nav#module-nav= @item[:content_for_module_nav]
%nav#module-nav= @item[:content_for_module_nav]
#page
#version
Version:
%a.number(href="/CHANGELOG/")= compass_version
#docs_panel
#theme_pref
%a{:href => "#", :rel => "theme", :title => "switch theme" } switch theme
#syntax_pref
%a{:href => "#", :rel => "scss" } scss
%a{:href => "#", :rel => "sass" } sass
#version
Version:
%a.number(href="/CHANGELOG/")= compass_version
= yield
-#comments= render "partials/disqus_comments"
%footer(role="contentinfo")= render "partials/footer"
%script(src="/javascripts/jquery-1.3.2.min.js")
%script(src="/javascripts/fixups.js" deferred)
%footer(role="contentinfo")= render "partials/footer"
%script{:src => "/javascripts/shCore.js", :type => "text/javascript"}
%script{:src => "/javascripts/shBrushCss.js", :type => "text/javascript"}
%script{:src => "/javascripts/shBrushSass.js", :type => "text/javascript"}

View File

@ -1,14 +1,8 @@
.legalese
%p
:plain
<a rel="license" href="/copyright/"
id="cc-logo"><img alt="Creative Commons License" style="border-width:0"
src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" /></a>
%br
by Christopher M. Eppstein.
- if @item[:content_for_footer]
%hr
= @item[:content_for_footer]
<a rel="license" href="/copyright/" id="cc-logo"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/88x31.png" /></a>
%span by Christopher M. Eppstein.
.links
%ul
%li
@ -19,4 +13,7 @@
%li
Compass is Open Source -
%a(href="http://github.com/chriseppstein/compass") Contribute
- if @item[:content_for_footer]
%hr
= @item[:content_for_footer]

View File

@ -2,10 +2,6 @@
- const_id = constant_def.name.gsub(/_/,'-')
%h3.constant{:id=>"const-#{const_id}"}
%a.permalink{:href => "#const-#{const_id}"}= "$"+constant_def.name
%dl.constant-details.source-documentation
%dt Value
%dd
%code= constant_def.expr.to_sass(:format => :html)
- if constant_def.comment && constant_def.comment.strip.size > 0
%dt Description
%dd= format_doc constant_def.comment
%code= constant_def.expr.to_sass(:format => :html)
- if constant_def.comment && constant_def.comment.strip.size > 0
%p= format_doc constant_def.comment

View File

@ -2,18 +2,12 @@
%h2 Mixins
- mixin_defs.each do |mixin|
%span.view-source
View Source:
%a.view-source{:href=>"#mixin-#{mixin.name}-sass"} Sass
\|
%a.view-source{:href=>"#mixin-#{mixin.name}-scss"} SCSS
%a{:href=>"#mixin-#{mixin.name}-source", :rel => "view source"} view source
%h3.mixin{:id=>"mixin-#{mixin.name}"}
%a.permalink{:href => "#mixin-#{mixin.name}"}= mixin_signature(mixin)
.mixin-source{:id=>"mixin-#{mixin.name}-source"}
.elided-code{:id=>"mixin-#{mixin.name}-sass"}
%pre.source-code.sass= mixin.to_sass
.elided-code{:id=>"mixin-#{mixin.name}-scss"}
%pre.source-code.scss= mixin.to_scss
%pre.source-code.sass= mixin.to_sass
%pre.source-code.scss= mixin.to_scss
.source-documentation
= format_doc(mixin.comment)