Getting started with the new layout:
* Added susy and css-slideshow * Converted legacy css to scss, moved it and updated reference. * extracted some javascript to a file so it can be shared.
This commit is contained in:
Chris Eppstein
parent
fe94d093cb
commit
bf83b2d5b3
@ -1,5 +1,6 @@
|
||||
# Require any additional compass plugins here.
|
||||
# require 'susy'
|
||||
require 'susy'
|
||||
require 'css-slideshow'
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/docs"
|
||||
|
||||
@ -6,26 +6,38 @@ puts "Compass running from: #{Compass.lib_directory}"
|
||||
|
||||
Compass.add_configuration "#{File.dirname(__FILE__)}/.compass/config.rb"
|
||||
|
||||
SITE_ROOT = "/docs"
|
||||
SITE_ROOT = "/docs"
|
||||
|
||||
compile '/assets/*/' do
|
||||
nil
|
||||
end
|
||||
|
||||
['/examples/*/markup/', '/examples/*/stylesheet/', '/examples/*/background/'].each do |ex_file|
|
||||
compile ex_file do
|
||||
['markup', 'stylesheet', 'background'].each do |ex_file|
|
||||
compile "/examples/*/#{ex_file}/" do
|
||||
nil
|
||||
end
|
||||
end
|
||||
|
||||
compile '/' do
|
||||
filter :haml, :ugly => true
|
||||
layout 'main'
|
||||
end
|
||||
|
||||
compile '/examples/*/' do
|
||||
filter :haml, :ugly => true
|
||||
filter :highlight if ENV['SYNTAX']
|
||||
layout 'example'
|
||||
end
|
||||
|
||||
compile '/stylesheets/*/' do
|
||||
filter :sass, Compass.sass_engine_options
|
||||
skip = Proc.new{nil}
|
||||
sass_options = Compass.sass_engine_options
|
||||
|
||||
(0..5).each do |i|
|
||||
compile("/stylesheets/#{'*/' * i}_*/") {nil}
|
||||
end
|
||||
|
||||
compile '/stylesheets/*' do
|
||||
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
|
||||
end
|
||||
|
||||
compile '/reference/*/' do
|
||||
@ -39,9 +51,8 @@ compile '*' do
|
||||
layout 'default'
|
||||
end
|
||||
|
||||
route '/stylesheets/*/_*/' do
|
||||
# don't output partials, so return nil
|
||||
nil
|
||||
(0..5).each do |i|
|
||||
route("/stylesheets/#{'*/' * i}_*/") {nil}
|
||||
end
|
||||
|
||||
route '/assets/css/*/' do
|
||||
|
||||
10
doc-src/assets/javascripts/fixups.js
Normal file
10
doc-src/assets/javascripts/fixups.js
Normal file
@ -0,0 +1,10 @@
|
||||
$(function(){
|
||||
$('span.color').each(function(i,e){
|
||||
e = $(e);
|
||||
e.after('<span class="swatch" style="background-color:'+e.text()+';"></span>');
|
||||
});
|
||||
$('span.arg[data-default-value]').each(function(i,e){
|
||||
e = $(e);
|
||||
e.attr("title", "Defaults to: " + e.attr("data-default-value"))
|
||||
})
|
||||
});
|
||||
@ -6,4 +6,5 @@ data_sources:
|
||||
- items_root: /assets
|
||||
layouts_root: /assets
|
||||
type: filesystem_assets
|
||||
text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt' ]
|
||||
output_dir: ..
|
||||
|
||||
@ -19,7 +19,7 @@ body_id: home
|
||||
This screencast will walk you through getting set up,
|
||||
learning Sass, and then how to use Compass to style a webpage.
|
||||
|
||||
<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371"></embed></object>
|
||||
<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371" /></object>
|
||||
|
||||
%h2 Bugs Reports, Discussions, Support
|
||||
|
||||
|
||||
64
doc-src/content/stylesheets/_base.sass
Normal file
64
doc-src/content/stylesheets/_base.sass
Normal file
@ -0,0 +1,64 @@
|
||||
//**
|
||||
// Susy: Fixed-Elastic-Fluid grids without all the math
|
||||
// By: Eric A. Meyer and OddBird Collective
|
||||
// Site: www.oddbird.net/susy/
|
||||
//**
|
||||
|
||||
// FONT-SIZE
|
||||
// Override these values as needed (defaults are 12/18)
|
||||
$base-font-size: 16px
|
||||
|
||||
$base-line-height: 24px
|
||||
|
||||
// GRID
|
||||
// Set these values as needed for your grid layout.
|
||||
// - defaults are shown.
|
||||
$total-cols: 12
|
||||
|
||||
$col-width: 3.5em
|
||||
|
||||
$gutter-width: 2em
|
||||
|
||||
$side-gutter-width: 1em
|
||||
|
||||
// OMEGA_FLOAT
|
||||
// By default, +omega elements are floated right.
|
||||
// You can override that globally here:
|
||||
// !omega_float = "right"
|
||||
|
||||
// HACKS
|
||||
// Are you using hacks or conditional comments? Susy makes both possible.
|
||||
// Leave this as 'true' to use hacks, set it as false for conditional comments.
|
||||
// Conditional comments will require overrides for +omega, +inline-block and
|
||||
// several other mixins.
|
||||
// !hacks = true
|
||||
|
||||
// SUSY
|
||||
// Don't move this @import above the GRID and FONT-SIZE overrides.
|
||||
@import susy/susy
|
||||
|
||||
// COLORS
|
||||
// Set any colors you will need later.
|
||||
$base: black
|
||||
|
||||
$alt: #005498
|
||||
|
||||
// FONTS
|
||||
// Give yourself some font stacks to work with.
|
||||
=sans-family
|
||||
font-family: Helvetica, Arial, sans-serif
|
||||
|
||||
=serif-family
|
||||
font-family: Baskerville, Palatino, serif
|
||||
|
||||
// OTHER MIXINS
|
||||
// Mixins set here will be available in defaults, screen, print and IE
|
||||
// Or anywhere you import either base.sass or defaults.sass
|
||||
=skip-links
|
||||
a
|
||||
+skip-link
|
||||
width: 100%
|
||||
|
||||
#skip-links
|
||||
position: relative
|
||||
+skip-links
|
||||
136
doc-src/content/stylesheets/_defaults.sass
Normal file
136
doc-src/content/stylesheets/_defaults.sass
Normal file
@ -0,0 +1,136 @@
|
||||
//** DEFAULT STYLES **//
|
||||
// Don't forget to set your default styles.
|
||||
|
||||
// Get all the details and mixins from base.sass
|
||||
@import base
|
||||
|
||||
// Reset browser defaults, and prepare block-level HTML5 elements
|
||||
@import susy/reset
|
||||
|
||||
/* @group defaults
|
||||
|
||||
body
|
||||
+sans-family
|
||||
color: $base
|
||||
|
||||
/* @group links
|
||||
|
||||
\:focus
|
||||
outline: 1px dotted $alt
|
||||
|
||||
a
|
||||
&:link, &:visited
|
||||
color: $alt
|
||||
text-decoration: none
|
||||
&:focus, &:hover, &:active
|
||||
color: $alt - #222222
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group inline tags
|
||||
|
||||
cite
|
||||
font-style: italic
|
||||
|
||||
em
|
||||
font-style: italic
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
ins
|
||||
text-decoration: underline
|
||||
|
||||
del
|
||||
text-decoration: line-through
|
||||
|
||||
q
|
||||
font-style: italic
|
||||
em
|
||||
font-style: normal
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group replaced tags
|
||||
|
||||
img
|
||||
vertical-align: bottom
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group headers
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-weight: bold
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group block tags
|
||||
|
||||
p
|
||||
+leader
|
||||
+trailer
|
||||
|
||||
=list-default($ol: false)
|
||||
+leader
|
||||
+trailer
|
||||
margin-left: 3em
|
||||
@if $ol
|
||||
list-style: decimal
|
||||
@else
|
||||
list-style: disc
|
||||
|
||||
=no-style-list
|
||||
+no-bullets
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
ol
|
||||
+list-default(ol)
|
||||
|
||||
ul
|
||||
+list-default
|
||||
|
||||
blockquote
|
||||
margin: $base-rhythm-unit
|
||||
+serif-family
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group tables
|
||||
|
||||
/* tables still need 'cellspacing="0"' in the markup
|
||||
|
||||
table
|
||||
width: 100%
|
||||
|
||||
th
|
||||
font-weight: bold
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group forms
|
||||
|
||||
fieldset
|
||||
+trailer
|
||||
|
||||
legend
|
||||
font-weight: bold
|
||||
font-variant: small-caps
|
||||
|
||||
label
|
||||
display: block
|
||||
|
||||
legend + label
|
||||
margin-top: 0
|
||||
|
||||
textarea, input:not([type="radio"])
|
||||
+box-sizing(border-box)
|
||||
width: 100%
|
||||
|
||||
button
|
||||
vertical-align: top
|
||||
|
||||
/* @end
|
||||
|
||||
/* @end
|
||||
14
doc-src/content/stylesheets/_slideshow.sass
Normal file
14
doc-src/content/stylesheets/_slideshow.sass
Normal file
@ -0,0 +1,14 @@
|
||||
// CSS-only Lightboxes
|
||||
// Plugin by Eric Meyer - http://www.oddbird.net/
|
||||
// Based on the work of Jenna Smith - http://growldesign.co.uk/
|
||||
|
||||
// Compatible with IE6+, Mozilla and Webkit browsers.
|
||||
// **Not compatible with Opera without Javascript help**
|
||||
|
||||
// Override with the proper class names for your slide/slide-nav containers
|
||||
$slide-container: ".slides"
|
||||
|
||||
$max-slides: 10
|
||||
|
||||
// import slideshow
|
||||
@import css-slideshow
|
||||
@ -1,26 +0,0 @@
|
||||
body
|
||||
font-family: "Lucida Grande", Arial, sans-serif
|
||||
|
||||
#example
|
||||
width: 100%
|
||||
> tbody > tr > td
|
||||
border: 2px solid black
|
||||
vertical-align: top
|
||||
width: 48%
|
||||
min-width: 400px
|
||||
pre
|
||||
margin: 0
|
||||
overflow: auto
|
||||
td.line_numbers, td.linenos
|
||||
padding: 6px 3px
|
||||
border-right: 1px solid #333
|
||||
background-color: #ccc
|
||||
td.code
|
||||
padding: 6px 3px
|
||||
max-width: 400px
|
||||
pre
|
||||
margin: 0
|
||||
overflow: auto
|
||||
|
||||
@import partials/syntax
|
||||
|
||||
7
doc-src/content/stylesheets/ie.sass
Normal file
7
doc-src/content/stylesheets/ie.sass
Normal file
@ -0,0 +1,7 @@
|
||||
/* Welcome to Susy. Use this file to write IE specific override styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <!--[if IE]>
|
||||
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
* <![endif]-->
|
||||
|
||||
@import base
|
||||
25
doc-src/content/stylesheets/legacy/example.scss
Normal file
25
doc-src/content/stylesheets/legacy/example.scss
Normal file
@ -0,0 +1,25 @@
|
||||
body {
|
||||
font-family: "Lucida Grande", Arial, sans-serif; }
|
||||
|
||||
#example {
|
||||
width: 100%;
|
||||
> tbody > tr > td {
|
||||
border: 2px solid black;
|
||||
vertical-align: top;
|
||||
width: 48%;
|
||||
min-width: 400px;
|
||||
pre {
|
||||
margin: 0;
|
||||
overflow: auto; } }
|
||||
td.line_numbers, td.linenos {
|
||||
padding: 6px 3px;
|
||||
border-right: 1px solid #333333;
|
||||
background-color: #cccccc; }
|
||||
td.code {
|
||||
padding: 6px 3px;
|
||||
max-width: 400px;
|
||||
pre {
|
||||
margin: 0;
|
||||
overflow: auto; } } }
|
||||
|
||||
@import "partials/syntax";
|
||||
157
doc-src/content/stylesheets/legacy/main.scss
Normal file
157
doc-src/content/stylesheets/legacy/main.scss
Normal file
@ -0,0 +1,157 @@
|
||||
@import "compass/utilities";
|
||||
@import "compass/css3";
|
||||
@import "blueprint";
|
||||
|
||||
body {
|
||||
font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-size: 13px; }
|
||||
|
||||
// Layout
|
||||
#container {
|
||||
@include pie-clearfix; }
|
||||
|
||||
#main {
|
||||
@include column(16, true);
|
||||
@include prepend(8); }
|
||||
|
||||
#sidebar {
|
||||
@include column(8);
|
||||
@include pull(24, true);
|
||||
background: #f5f5f5;
|
||||
h2 {
|
||||
font-size: 16px; }
|
||||
ul, ol {
|
||||
list-style-position: inside;
|
||||
padding-left: 10px; }
|
||||
.selected {
|
||||
font-weight: bold; }
|
||||
a {
|
||||
@include hover-link; } }
|
||||
|
||||
#footer {
|
||||
@include column(24);
|
||||
background: #f5f5f5;
|
||||
border-top: 2px solid #dddddd;
|
||||
margin: 1em 0;
|
||||
.legalese {
|
||||
@include column(12); }
|
||||
hr {
|
||||
@include colruler; }
|
||||
.links {
|
||||
@include column(12, true);
|
||||
ul {
|
||||
@include no-bullets;
|
||||
a {
|
||||
@include hover-link; } } } }
|
||||
|
||||
// Typography
|
||||
|
||||
blockquote {
|
||||
font-style: italic; }
|
||||
|
||||
hr {
|
||||
background: none;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: none;
|
||||
border-top: 2px solid #cccccc; }
|
||||
|
||||
// Regular data tables
|
||||
table.datagrid {
|
||||
border-collapse: collapse;
|
||||
th {
|
||||
background: #eeeeee; }
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
cell-spacing: 0; } }
|
||||
|
||||
// Reference
|
||||
|
||||
body.reference {
|
||||
h3 {
|
||||
&.mixin, &.constant {
|
||||
font-family: Monaco, courier;
|
||||
font-weight: 200;
|
||||
@include text-shadow;
|
||||
background-color: #eeeeee;
|
||||
border: 1px solid #aaaaaa;
|
||||
padding: 0.75em;
|
||||
margin-bottom: 0;
|
||||
a.permalink {
|
||||
@include hover-link;
|
||||
@include link-colors(inherit, inherit); } }
|
||||
.arg[data-default-value] {
|
||||
color: #666666;
|
||||
&:before {
|
||||
content: "["; }
|
||||
&:after {
|
||||
content: "]"; } } }
|
||||
.source-documentation {
|
||||
background-color: #eeeeee;
|
||||
border: 1px solid #aaaaaa;
|
||||
border-top-width: 0;
|
||||
padding: 0.75em; }
|
||||
dl.source-documentation {
|
||||
margin-top: 0;
|
||||
dt {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
margin-right: 15px; }
|
||||
dt:not(:first-child) {
|
||||
margin-top: 1em; } }
|
||||
a.view-source {
|
||||
float: right;
|
||||
margin: 1.25em; }
|
||||
span.color + span.swatch {
|
||||
margin: 0 3px 3px;
|
||||
border: 1px solid #333333;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@include inline-block; }
|
||||
.color-snippet {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
@include border-radius(3px); }
|
||||
a.help {
|
||||
font-size: 75%; } }
|
||||
|
||||
table.constants {
|
||||
width: 100%;
|
||||
@include alternating-rows-and-columns(#eeeeee, #bbbbbb, #191919);
|
||||
@include outer-table-borders(1px);
|
||||
@include inner-table-borders(1px);
|
||||
td, th {
|
||||
padding: 0.25em 0.5em; } }
|
||||
|
||||
ol#breadcrumbs {
|
||||
@include horizontal-list;
|
||||
@include no-bullets;
|
||||
li:after {
|
||||
content: " > "; }
|
||||
li.last:after {
|
||||
content: ""; }
|
||||
li.last {
|
||||
visibility: hidden; } }
|
||||
|
||||
body#home #logo {
|
||||
@include replace-text(unquote("compass.png"), 0px);
|
||||
height: 159px; }
|
||||
|
||||
p code {
|
||||
border: 1px solid #cccccc;
|
||||
background-color: #f2f2f2;
|
||||
padding: 2px; }
|
||||
|
||||
body#reference-compass-css3 {
|
||||
#border-radius {
|
||||
padding: 2px 8px;
|
||||
@include border-radius(0.75em); }
|
||||
#text-shadow {
|
||||
@include text-shadow(red); } }
|
||||
|
||||
@import "partials/syntax";
|
||||
2
doc-src/content/stylesheets/legacy/partials/_syntax.scss
Normal file
2
doc-src/content/stylesheets/legacy/partials/_syntax.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "syntax/coderay";
|
||||
@import "syntax/pygments";
|
||||
211
doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss
Normal file
211
doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss
Normal file
@ -0,0 +1,211 @@
|
||||
.CodeRay {
|
||||
.debug {
|
||||
color: white !important;
|
||||
background: blue !important; }
|
||||
.af {
|
||||
color: #0000cc; }
|
||||
.an {
|
||||
color: #000077; }
|
||||
.at {
|
||||
color: #ff0088; }
|
||||
.av {
|
||||
color: #770000; }
|
||||
.aw {
|
||||
color: #cc0000; }
|
||||
.bi {
|
||||
color: #550099;
|
||||
font-weight: bold; }
|
||||
.c {
|
||||
color: #888888; }
|
||||
.ch {
|
||||
color: #0044dd;
|
||||
.k {
|
||||
color: #0044dd; }
|
||||
.dl {
|
||||
color: #003399; } }
|
||||
.cl {
|
||||
color: #bb0066;
|
||||
font-weight: bold; }
|
||||
.cm {
|
||||
color: #aa0088;
|
||||
font-weight: bold; }
|
||||
.co {
|
||||
color: #003366;
|
||||
font-weight: bold; }
|
||||
.cr {
|
||||
color: #00aa00; }
|
||||
.cv {
|
||||
color: #336699; }
|
||||
.de {
|
||||
color: #bb00bb; }
|
||||
.df {
|
||||
color: #009999;
|
||||
font-weight: bold; }
|
||||
.di {
|
||||
color: #008888;
|
||||
font-weight: bold; }
|
||||
.dl {
|
||||
color: black; }
|
||||
.do {
|
||||
color: #997700; }
|
||||
.dt {
|
||||
color: #3344bb; }
|
||||
.ds {
|
||||
color: #dd4422;
|
||||
font-weight: bold; }
|
||||
.e {
|
||||
color: #666666;
|
||||
font-weight: bold; }
|
||||
.en {
|
||||
color: #880000;
|
||||
font-weight: bold; }
|
||||
.er {
|
||||
color: red;
|
||||
background-color: #ffaaaa; }
|
||||
.ex {
|
||||
color: #cc0000;
|
||||
font-weight: bold; }
|
||||
.fl {
|
||||
color: #6600ee;
|
||||
font-weight: bold; }
|
||||
.fu {
|
||||
color: #0066bb;
|
||||
font-weight: bold; }
|
||||
.gv {
|
||||
color: #dd7700;
|
||||
font-weight: bold; }
|
||||
.hx {
|
||||
color: #005588;
|
||||
font-weight: bold; }
|
||||
.i {
|
||||
color: #0000dd;
|
||||
font-weight: bold; }
|
||||
.ic {
|
||||
color: #bb4444;
|
||||
font-weight: bold; }
|
||||
.il {
|
||||
background: #dddddd;
|
||||
color: black;
|
||||
.il {
|
||||
background: #cccccc;
|
||||
.il {
|
||||
background: #bbbbbb; } }
|
||||
.idl {
|
||||
background: #dddddd;
|
||||
font-weight: bold;
|
||||
color: #666666; } }
|
||||
.idl {
|
||||
background-color: #bbbbbb;
|
||||
font-weight: bold;
|
||||
color: #666666; }
|
||||
.im {
|
||||
color: red; }
|
||||
.in {
|
||||
color: #bb22bb;
|
||||
font-weight: bold; }
|
||||
.iv {
|
||||
color: #3333bb; }
|
||||
.la {
|
||||
color: #997700;
|
||||
font-weight: bold; }
|
||||
.lv {
|
||||
color: #996633; }
|
||||
.oc {
|
||||
color: #4400ee;
|
||||
font-weight: bold; }
|
||||
.of {
|
||||
color: black;
|
||||
font-weight: bold; }
|
||||
.pc {
|
||||
color: #003388;
|
||||
font-weight: bold; }
|
||||
.pd {
|
||||
color: #336699;
|
||||
font-weight: bold; }
|
||||
.pp {
|
||||
color: #557799; }
|
||||
.ps {
|
||||
color: #0000cc;
|
||||
font-weight: bold; }
|
||||
.pt {
|
||||
color: #007744;
|
||||
font-weight: bold; }
|
||||
.r, .kw {
|
||||
color: #008800;
|
||||
font-weight: bold; }
|
||||
.ke {
|
||||
color: #880088;
|
||||
.dl {
|
||||
color: #660066; }
|
||||
.ch {
|
||||
color: #8800ff; } }
|
||||
.vl {
|
||||
color: #008888; }
|
||||
.rx {
|
||||
background-color: #fff0ff;
|
||||
.k {
|
||||
color: #880088; }
|
||||
.dl {
|
||||
color: #440044; }
|
||||
.mod {
|
||||
color: #cc22cc; }
|
||||
.fu {
|
||||
color: #440044;
|
||||
font-weight: bold; } }
|
||||
.s {
|
||||
background-color: #fff0f0;
|
||||
color: #dd2200;
|
||||
.s {
|
||||
background-color: #ffe0e0;
|
||||
.s {
|
||||
background-color: #ffd0d0; } }
|
||||
.ch {
|
||||
color: #bb00bb; }
|
||||
.dl {
|
||||
color: #771100; } }
|
||||
.sh {
|
||||
background-color: #f0fff0;
|
||||
color: #22bb22;
|
||||
.dl {
|
||||
color: #116611; } }
|
||||
.sy {
|
||||
color: #aa6600;
|
||||
.k {
|
||||
color: #aa6600; }
|
||||
.dl {
|
||||
color: #663300; } }
|
||||
.ta {
|
||||
color: #007700; }
|
||||
.tf {
|
||||
color: #007700;
|
||||
font-weight: bold; }
|
||||
.ts {
|
||||
color: #dd7700;
|
||||
font-weight: bold; }
|
||||
.ty {
|
||||
color: #333399;
|
||||
font-weight: bold; }
|
||||
.v {
|
||||
color: #003366; }
|
||||
.xt {
|
||||
color: #444444; }
|
||||
.ins {
|
||||
background: #aaffaa; }
|
||||
.del {
|
||||
background: #ffaaaa; }
|
||||
.chg {
|
||||
color: #aaaaff;
|
||||
background: #000077; }
|
||||
.head {
|
||||
color: #ff88ff;
|
||||
background: #550055; }
|
||||
.ins .ins {
|
||||
color: #008800;
|
||||
font-weight: bold; }
|
||||
.del .del {
|
||||
color: #880000;
|
||||
font-weight: bold; }
|
||||
.chg .chg {
|
||||
color: #6666ff; }
|
||||
.head .head {
|
||||
color: #ff44ff; } }
|
||||
@ -0,0 +1,151 @@
|
||||
.highlight {
|
||||
.hll {
|
||||
background-color: #ffffcc; }
|
||||
.c {
|
||||
color: #606060;
|
||||
font-style: italic; }
|
||||
.err {
|
||||
color: #f00000;
|
||||
background-color: #f0a0a0; }
|
||||
.k {
|
||||
color: #208090;
|
||||
font-weight: bold; }
|
||||
.o {
|
||||
color: #303030; }
|
||||
.cm {
|
||||
color: #606060;
|
||||
font-style: italic; }
|
||||
.cp {
|
||||
color: #507090; }
|
||||
.c1 {
|
||||
color: #606060;
|
||||
font-style: italic; }
|
||||
.cs {
|
||||
color: #c00000;
|
||||
font-weight: bold;
|
||||
font-style: italic; }
|
||||
.gd {
|
||||
color: #a00000; }
|
||||
.ge {
|
||||
font-style: italic; }
|
||||
.gr {
|
||||
color: red; }
|
||||
.gh {
|
||||
color: navy;
|
||||
font-weight: bold; }
|
||||
.gi {
|
||||
color: #00a000; }
|
||||
.go {
|
||||
color: gray; }
|
||||
.gp {
|
||||
color: #c65d09;
|
||||
font-weight: bold; }
|
||||
.gs {
|
||||
font-weight: bold; }
|
||||
.gu {
|
||||
color: purple;
|
||||
font-weight: bold; }
|
||||
.gt {
|
||||
color: #0040d0; }
|
||||
.kc, .kd, .kn {
|
||||
color: #208090;
|
||||
font-weight: bold; }
|
||||
.kp {
|
||||
color: #0080f0;
|
||||
font-weight: bold; }
|
||||
.kr {
|
||||
color: #208090;
|
||||
font-weight: bold; }
|
||||
.kt {
|
||||
color: #6060f0;
|
||||
font-weight: bold; }
|
||||
.m {
|
||||
color: #6000e0;
|
||||
font-weight: bold; }
|
||||
.s {
|
||||
background-color: #e0e0ff; }
|
||||
.na {
|
||||
color: #000070; }
|
||||
.nb {
|
||||
color: #007020; }
|
||||
.nc {
|
||||
color: #e090e0;
|
||||
font-weight: bold; }
|
||||
.no {
|
||||
color: #50e0d0;
|
||||
font-weight: bold; }
|
||||
.nd {
|
||||
color: #505050;
|
||||
font-weight: bold; }
|
||||
.ni {
|
||||
color: maroon; }
|
||||
.ne {
|
||||
color: #f00000;
|
||||
font-weight: bold; }
|
||||
.nf {
|
||||
color: #50e0d0;
|
||||
font-weight: bold; }
|
||||
.nl {
|
||||
color: #907000;
|
||||
font-weight: bold; }
|
||||
.nn {
|
||||
color: #0e84b5;
|
||||
font-weight: bold; }
|
||||
.nt {
|
||||
color: #007000; }
|
||||
.nv {
|
||||
color: #003060; }
|
||||
.ow {
|
||||
color: black;
|
||||
font-weight: bold; }
|
||||
.w {
|
||||
color: #bbbbbb; }
|
||||
.mf {
|
||||
color: #6000e0;
|
||||
font-weight: bold; }
|
||||
.mh {
|
||||
color: #005080;
|
||||
font-weight: bold; }
|
||||
.mi {
|
||||
color: #6060f0;
|
||||
font-weight: bold; }
|
||||
.mo {
|
||||
color: #4000e0;
|
||||
font-weight: bold; }
|
||||
.sb {
|
||||
background-color: #e0e0ff; }
|
||||
.sc {
|
||||
color: #8080f0; }
|
||||
.sd {
|
||||
color: #d04020; }
|
||||
.s2 {
|
||||
background-color: #e0e0ff; }
|
||||
.se {
|
||||
color: #606060;
|
||||
font-weight: bold;
|
||||
background-color: #e0e0ff; }
|
||||
.sh {
|
||||
background-color: #e0e0ff; }
|
||||
.si {
|
||||
background-color: #e0e0e0; }
|
||||
.sx {
|
||||
color: #f08080;
|
||||
background-color: #e0e0ff; }
|
||||
.sr {
|
||||
color: black;
|
||||
background-color: #e0e0ff; }
|
||||
.s1 {
|
||||
background-color: #e0e0ff; }
|
||||
.ss {
|
||||
color: #f0c080; }
|
||||
.bp {
|
||||
color: #007020; }
|
||||
.vc {
|
||||
color: #c0c0f0; }
|
||||
.vg {
|
||||
color: #f08040; }
|
||||
.vi {
|
||||
color: #a0a0f0; }
|
||||
.il {
|
||||
color: #6060f0;
|
||||
font-weight: bold; } }
|
||||
675
doc-src/content/stylesheets/legacy/screen.scss
Normal file
675
doc-src/content/stylesheets/legacy/screen.scss
Normal file
@ -0,0 +1,675 @@
|
||||
// XXX Placeholder
|
||||
#skip-links {
|
||||
position: relative;
|
||||
a {
|
||||
position: absolute;
|
||||
top: -9999em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
top: 0;
|
||||
z-index: 999; } } }
|
||||
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
*:focus {
|
||||
outline: 0; }
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
vertical-align: middle; }
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
q, blockquote {
|
||||
quotes: "" ""; }
|
||||
|
||||
q {
|
||||
&:before, &:after {
|
||||
content: ""; } }
|
||||
|
||||
blockquote {
|
||||
&:before, &:after {
|
||||
content: ""; } }
|
||||
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
section, article, aside, header, footer, nav, dialog, figure {
|
||||
display: block; }
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
color: black; }
|
||||
|
||||
:focus {
|
||||
outline: 1px dotted #005498; }
|
||||
|
||||
a {
|
||||
&:link, &:visited {
|
||||
color: #005498;
|
||||
text-decoration: none; }
|
||||
&:focus, &:hover, &:active {
|
||||
color: #003276; } }
|
||||
|
||||
cite, em {
|
||||
font-style: italic; }
|
||||
|
||||
strong {
|
||||
font-weight: bold; }
|
||||
|
||||
ins {
|
||||
text-decoration: underline; }
|
||||
|
||||
del {
|
||||
text-decoration: line-through; }
|
||||
|
||||
q {
|
||||
font-style: italic;
|
||||
em {
|
||||
font-style: normal; } }
|
||||
|
||||
img {
|
||||
vertical-align: bottom; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold; }
|
||||
|
||||
p {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em; }
|
||||
|
||||
ol {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
margin-left: 3em;
|
||||
list-style: decimal; }
|
||||
|
||||
ul {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
margin-left: 3em;
|
||||
list-style: disc; }
|
||||
|
||||
blockquote {
|
||||
margin: 1.5em;
|
||||
font-family: Baskerville, Palatino, serif; }
|
||||
|
||||
table {
|
||||
width: 100%; }
|
||||
|
||||
th {
|
||||
font-weight: bold; }
|
||||
|
||||
fieldset {
|
||||
margin-bottom: 1.5em; }
|
||||
|
||||
legend {
|
||||
font-weight: bold;
|
||||
font-variant: small-caps; }
|
||||
|
||||
label {
|
||||
display: block; }
|
||||
|
||||
legend + label {
|
||||
margin-top: 0; }
|
||||
|
||||
textarea, input:not([type="radio"]) {
|
||||
/* Mozilla (FireFox, Camino) */
|
||||
-moz-box-sizing: border-box;
|
||||
/* Webkit (Safari, Chrome) */
|
||||
-webkit-box-sizing: border-box;
|
||||
/* IE (8) */
|
||||
-ms-box-sizing: border-box;
|
||||
/* CSS3 */
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
|
||||
button {
|
||||
vertical-align: top; }
|
||||
|
||||
body {
|
||||
font-size: 100%;
|
||||
line-height: 1.5em; }
|
||||
|
||||
html > body {
|
||||
font-size: 16px; }
|
||||
|
||||
body {
|
||||
text-align: center; }
|
||||
|
||||
header[role="banner"] h1, #compass-nav {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 46.97%;
|
||||
margin-right: 3.03%; }
|
||||
|
||||
header[role="banner"] {
|
||||
background: #f9f9f9;
|
||||
div {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 66em;
|
||||
max-width: 100%;
|
||||
display: block; }
|
||||
h1 {
|
||||
margin-left: 1.515%;
|
||||
font-size: 1.125em;
|
||||
line-height: 1.333em;
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
display: block;
|
||||
padding-top: 2.667em;
|
||||
padding-bottom: 2em; } } }
|
||||
|
||||
#compass-nav {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-right: 1.515%;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#margin-left: -2em;
|
||||
/* end ugly hacks */
|
||||
text-align: right;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
padding-top: 3em;
|
||||
margin-bottom: 2.25em;
|
||||
display: block;
|
||||
li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0px;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#display: inline;
|
||||
#vertical-align: auto;
|
||||
/* end ugly hacks */
|
||||
white-space: no-wrap;
|
||||
padding-left: 0;
|
||||
padding-right: 0; } }
|
||||
a {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#display: inline;
|
||||
#vertical-align: auto;
|
||||
/* end ugly hacks */
|
||||
font-size: 0.875em;
|
||||
line-height: 1.714em;
|
||||
padding: 0 1em;
|
||||
border-top-left-radius: 0.5em;
|
||||
-moz-border-radius-topleft: 0.5em;
|
||||
-webkit-border-top-left-radius: 0.5em;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
-moz-border-radius-bottomright: 0.5em;
|
||||
-webkit-border-bottom-right-radius: 0.5em; } }
|
||||
|
||||
body[id="home"], body[id$="-docs"] {
|
||||
#compass-nav a[href="/docs/"] {
|
||||
background: #cccccc;
|
||||
cursor: default; } }
|
||||
|
||||
#docs-nav {
|
||||
display: inline-block;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.063em;
|
||||
padding-top: 0.313em;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
position: relative;
|
||||
height: 1.5em;
|
||||
border-color: #cccccc;
|
||||
background-color: #eeeeee;
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden; }
|
||||
display: block;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 66em;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0px;
|
||||
white-space: nowrap;
|
||||
display: inline;
|
||||
float: left;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
&:first-child, &.first {
|
||||
padding-left: 0px; }
|
||||
&:last-child, &.last {
|
||||
padding-right: 0px; }
|
||||
top: -0.75em;
|
||||
margin-bottom: -0.75em;
|
||||
position: relative; }
|
||||
display: block; }
|
||||
a {
|
||||
&:link, &:visited {
|
||||
display: block;
|
||||
padding: 0 1em;
|
||||
border: 1px solid #eeeeee;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.063em;
|
||||
padding-top: 0.688em;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: 0.5em;
|
||||
-moz-border-radius-topleft: 0.5em;
|
||||
-webkit-border-top-left-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
-moz-border-radius-topright: 0.5em;
|
||||
-webkit-border-top-right-radius: 0.5em;
|
||||
background: #dddddd; }
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: #eeeeee;
|
||||
border-color: #dddddd; } } }
|
||||
|
||||
.home #docs-nav a[href="index.php"] {
|
||||
&:link, &:visited {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
cursor: default;
|
||||
background: white;
|
||||
border-color: #cccccc;
|
||||
border-bottom-color: white; } }
|
||||
|
||||
.core #docs-nav a[href="core.php"] {
|
||||
&:link, &:visited {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
cursor: default;
|
||||
background: white;
|
||||
border-color: #cccccc;
|
||||
border-bottom-color: white; } }
|
||||
|
||||
/* line 83, ../src/screen.sass */
|
||||
|
||||
.css3 #docs-nav a[href="core.php"] {
|
||||
&:link, &:visited {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
cursor: default;
|
||||
background: white;
|
||||
border-color: #cccccc;
|
||||
border-bottom-color: white; } }
|
||||
|
||||
.utils #docs-nav a[href="core.php"] {
|
||||
&:link, &:visited {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
cursor: default;
|
||||
background: white;
|
||||
border-color: #cccccc;
|
||||
border-bottom-color: white; } }
|
||||
|
||||
.gradient #docs-nav a[href="core.php"] {
|
||||
&:link, &:visited {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
cursor: default;
|
||||
background: white;
|
||||
border-color: #cccccc;
|
||||
border-bottom-color: white; } }
|
||||
|
||||
.demo #docs-nav a[href="core.php"] {
|
||||
&:link, &:visited {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
cursor: default;
|
||||
background: white;
|
||||
border-color: #cccccc;
|
||||
border-bottom-color: white; } }
|
||||
|
||||
#search-docs {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #999999;
|
||||
form {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 66em;
|
||||
max-width: 100%;
|
||||
display: block; }
|
||||
p {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 21.97%;
|
||||
margin-right: 3.03%;
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-right: 1.515%;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#margin-left: -2em;
|
||||
/* end ugly hacks */
|
||||
margin-top: 0.375em;
|
||||
margin-bottom: 0em;
|
||||
label {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 31.034%;
|
||||
margin: 0;
|
||||
text-align: right; }
|
||||
input {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 62.069%;
|
||||
margin-right: 13.793%;
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-right: 1.515%;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#margin-left: -2em; } } }
|
||||
|
||||
#page {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 66em;
|
||||
max-width: 100%;
|
||||
margin-top: 4.5em;
|
||||
display: block; }
|
||||
|
||||
aside[role="sidebar"] {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 21.97%;
|
||||
margin-right: 3.03%;
|
||||
margin-left: 1.515%;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.714em;
|
||||
margin-top: 3.429em;
|
||||
color: #999999;
|
||||
section, p {
|
||||
margin-top: 1.714em;
|
||||
margin-bottom: 1.714em; } }
|
||||
|
||||
footer[role="contentinfo"] {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 66em;
|
||||
max-width: 100%;
|
||||
margin-top: 4.5em;
|
||||
color: #999999;
|
||||
display: block;
|
||||
.license {
|
||||
clear: both;
|
||||
margin-right: 1.515%;
|
||||
margin-left: 1.515%;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.714em; } }
|
||||
|
||||
article > nav {
|
||||
border-top: 0.063em solid #cccccc;
|
||||
margin-top: -0.063em;
|
||||
color: #cccccc;
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0px; } }
|
||||
li {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 48.438%;
|
||||
margin-right: 3.125%;
|
||||
&:last-child {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#margin-left: -2em;
|
||||
/* end ugly hacks */
|
||||
text-align: right; } } }
|
||||
|
||||
#content {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 71.97%;
|
||||
margin-right: 3.03%;
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-right: 1.515%;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#margin-left: -2em;
|
||||
/* end ugly hacks */
|
||||
h1 {
|
||||
font-size: 2.25em;
|
||||
line-height: 1.333em;
|
||||
margin-bottom: 0.667em; } }
|
||||
|
||||
.demo #content {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
clear: both;
|
||||
margin-right: 1.515%;
|
||||
margin-left: 1.515%;
|
||||
h1 {
|
||||
text-align: center; } }
|
||||
|
||||
#module-nav {
|
||||
margin-top: 0.375em;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 0.313em;
|
||||
margin-bottom: 0.75em;
|
||||
border-color: #cccccc;
|
||||
clear: both;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 66em;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
li {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
&:first-child {
|
||||
margin-left: 1.515%; } } }
|
||||
+ #page {
|
||||
margin-top: 2.25em; } }
|
||||
|
||||
#local-nav {
|
||||
margin-top: 1.714em;
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0px; } }
|
||||
h2 {
|
||||
margin-top: 1.714em;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
margin-bottom: 0.602em;
|
||||
text-align: left; } }
|
||||
|
||||
#code {
|
||||
clear: both;
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
line-height: 2em;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.083em;
|
||||
padding-top: 1.917em;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.083em;
|
||||
padding-bottom: 1.917em;
|
||||
border-color: #cccccc;
|
||||
font-family: monospace;
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden; }
|
||||
display: block;
|
||||
nav {
|
||||
background: #eeeeee;
|
||||
margin-bottom: 2em;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
display: block;
|
||||
li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0px;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#display: inline;
|
||||
#vertical-align: auto;
|
||||
/* end ugly hacks */
|
||||
white-space: no-wrap;
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0.4em; } } }
|
||||
section {
|
||||
position: relative;
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 48.438%;
|
||||
margin-right: 3.125%;
|
||||
.slides {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1030%;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0px; }
|
||||
display: block;
|
||||
> li {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 9.709%;
|
||||
margin-right: 0.049%; } } }
|
||||
&#styles {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
/* ugly hacks for IE6-7 */
|
||||
#margin-left: -2em; } }
|
||||
.slides li {
|
||||
overflow: auto; }
|
||||
table {
|
||||
.lino {
|
||||
color: #666666;
|
||||
background: #dddddd;
|
||||
padding: 0 0.4em; }
|
||||
.source {
|
||||
width: 100%;
|
||||
padding: 0 0.4em; } } }
|
||||
|
||||
#demo {
|
||||
clear: both;
|
||||
padding-top: 1.5em;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.063em;
|
||||
padding-bottom: 1.438em;
|
||||
border-color: #cccccc;
|
||||
.gradient {
|
||||
margin: 1.5em 0;
|
||||
height: 6em;
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, white), color-stop(100%, #dddddd));
|
||||
background-image: -moz-linear-gradient(left top, white 0%, #dddddd 100%); } }
|
||||
@ -1,157 +0,0 @@
|
||||
@import compass/utilities
|
||||
@import compass/css3
|
||||
@import blueprint
|
||||
|
||||
body
|
||||
font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif
|
||||
line-height: 1.5
|
||||
font-size: 13px
|
||||
|
||||
// Layout
|
||||
#container
|
||||
+pie-clearfix
|
||||
|
||||
#main
|
||||
+column(16, true)
|
||||
+prepend(8)
|
||||
|
||||
#sidebar
|
||||
+column(8)
|
||||
+pull(24, true)
|
||||
background: #F5F5F5
|
||||
h2
|
||||
font-size: 16px
|
||||
ul, ol
|
||||
list-style-position: inside
|
||||
padding-left: 10px
|
||||
.selected
|
||||
font-weight: bold
|
||||
a
|
||||
+hover-link
|
||||
|
||||
#footer
|
||||
+column(24)
|
||||
background: #F5F5F5
|
||||
border-top: 2px solid #ddd
|
||||
margin: 1em 0
|
||||
.legalese
|
||||
+column(12)
|
||||
hr
|
||||
+colruler
|
||||
.links
|
||||
+column(12, true)
|
||||
ul
|
||||
+no-bullets
|
||||
a
|
||||
+hover-link
|
||||
|
||||
// Typography
|
||||
|
||||
blockquote
|
||||
:font-style italic
|
||||
|
||||
hr
|
||||
:background none
|
||||
:height 0
|
||||
:font-size 0
|
||||
:line-height 0
|
||||
:border none
|
||||
:border-top 2px solid #CCC
|
||||
|
||||
// Regular data tables
|
||||
table.datagrid
|
||||
border-collapse: collapse
|
||||
th
|
||||
:background #EEE
|
||||
td,
|
||||
th
|
||||
border: 1px solid #CCC
|
||||
text-align: left
|
||||
padding: 5px
|
||||
cell-spacing: 0
|
||||
|
||||
// Reference
|
||||
|
||||
body.reference
|
||||
h3
|
||||
&.mixin, &.constant
|
||||
font-family: Monaco, courier
|
||||
font-weight: 200
|
||||
+text-shadow
|
||||
background-color: #eee
|
||||
border: 1px solid #aaa
|
||||
padding: 0.75em
|
||||
margin-bottom: 0
|
||||
a.permalink
|
||||
+hover-link
|
||||
+link-colors("inherit", "inherit")
|
||||
.arg[data-default-value]
|
||||
color: #666
|
||||
&:before
|
||||
content: "["
|
||||
&:after
|
||||
content: "]"
|
||||
.source-documentation
|
||||
background-color: #eee
|
||||
border: 1px solid #aaa
|
||||
border-top-width: 0
|
||||
padding: 0.75em
|
||||
dl.source-documentation
|
||||
margin-top: 0
|
||||
dt
|
||||
font-weight: bold
|
||||
float: left
|
||||
margin-right: 15px
|
||||
dt:not(:first-child)
|
||||
margin-top: 1em
|
||||
a.view-source
|
||||
float: right
|
||||
margin: 1.25em
|
||||
span.color + span.swatch
|
||||
margin: 0 3px 3px
|
||||
border: 1px solid #333
|
||||
width: 1em
|
||||
height: 1em
|
||||
+inline-block
|
||||
.color-snippet
|
||||
width: 100px
|
||||
height: 20px
|
||||
+border-radius(3px)
|
||||
a.help
|
||||
font-size: 75%
|
||||
|
||||
table.constants
|
||||
width: 100%
|
||||
+alternating-rows-and-columns(#EEE, #bbb, #191919)
|
||||
+outer-table-borders(1px)
|
||||
+inner-table-borders(1px)
|
||||
td, th
|
||||
padding: 0.25em 0.5em
|
||||
|
||||
ol#breadcrumbs
|
||||
+horizontal-list
|
||||
+no-bullets
|
||||
li:after
|
||||
content: " > "
|
||||
li.last:after
|
||||
content: ""
|
||||
li.last
|
||||
visibility: hidden
|
||||
|
||||
body#home #logo
|
||||
+replace-text("compass.png", 0px)
|
||||
height: 159px
|
||||
|
||||
p code
|
||||
border: 1px solid #ccc
|
||||
background-color: #f2f2f2
|
||||
padding: 2px
|
||||
|
||||
body#reference-compass-css3
|
||||
#border-radius
|
||||
padding: 2px 8px
|
||||
+border-radius(0.75em)
|
||||
#text-shadow
|
||||
+text-shadow(red)
|
||||
|
||||
@import partials/syntax
|
||||
@ -1,2 +0,0 @@
|
||||
@import partials/syntax/coderay
|
||||
@import partials/syntax/pygments
|
||||
@ -1,211 +0,0 @@
|
||||
.CodeRay
|
||||
.debug
|
||||
color: white !important
|
||||
background: blue !important
|
||||
.af
|
||||
color: #00C
|
||||
.an
|
||||
color: #007
|
||||
.at
|
||||
color: #f08
|
||||
.av
|
||||
color: #700
|
||||
.aw
|
||||
color: #C00
|
||||
.bi
|
||||
color: #509
|
||||
font-weight: bold
|
||||
.c
|
||||
color: #888
|
||||
.ch
|
||||
color: #04D
|
||||
.k
|
||||
color: #04D
|
||||
.dl
|
||||
color: #039
|
||||
.cl
|
||||
color: #B06
|
||||
font-weight: bold
|
||||
.cm
|
||||
color: #A08
|
||||
font-weight: bold
|
||||
.co
|
||||
color: #036
|
||||
font-weight: bold
|
||||
.cr
|
||||
color: #0A0
|
||||
.cv
|
||||
color: #369
|
||||
.de
|
||||
color: #B0B
|
||||
.df
|
||||
color: #099
|
||||
font-weight: bold
|
||||
.di
|
||||
color: #088
|
||||
font-weight: bold
|
||||
.dl
|
||||
color: black
|
||||
.do
|
||||
color: #970
|
||||
.dt
|
||||
color: #34b
|
||||
.ds
|
||||
color: #D42
|
||||
font-weight: bold
|
||||
.e
|
||||
color: #666
|
||||
font-weight: bold
|
||||
.en
|
||||
color: #800
|
||||
font-weight: bold
|
||||
.er
|
||||
color: #F00
|
||||
background-color: #FAA
|
||||
.ex
|
||||
color: #C00
|
||||
font-weight: bold
|
||||
.fl
|
||||
color: #60E
|
||||
font-weight: bold
|
||||
.fu
|
||||
color: #06B
|
||||
font-weight: bold
|
||||
.gv
|
||||
color: #d70
|
||||
font-weight: bold
|
||||
.hx
|
||||
color: #058
|
||||
font-weight: bold
|
||||
.i
|
||||
color: #00D
|
||||
font-weight: bold
|
||||
.ic
|
||||
color: #B44
|
||||
font-weight: bold
|
||||
.il
|
||||
background: #ddd
|
||||
color: black
|
||||
.il
|
||||
background: #ccc
|
||||
.il
|
||||
background: #bbb
|
||||
.idl
|
||||
background: #ddd
|
||||
font-weight: bold
|
||||
color: #666
|
||||
.idl
|
||||
background-color: #bbb
|
||||
font-weight: bold
|
||||
color: #666
|
||||
.im
|
||||
color: #f00
|
||||
.in
|
||||
color: #B2B
|
||||
font-weight: bold
|
||||
.iv
|
||||
color: #33B
|
||||
.la
|
||||
color: #970
|
||||
font-weight: bold
|
||||
.lv
|
||||
color: #963
|
||||
.oc
|
||||
color: #40E
|
||||
font-weight: bold
|
||||
.of
|
||||
color: #000
|
||||
font-weight: bold
|
||||
.pc
|
||||
color: #038
|
||||
font-weight: bold
|
||||
.pd
|
||||
color: #369
|
||||
font-weight: bold
|
||||
.pp
|
||||
color: #579
|
||||
.ps
|
||||
color: #00C
|
||||
font-weight: bold
|
||||
.pt
|
||||
color: #074
|
||||
font-weight: bold
|
||||
.r, .kw
|
||||
color: #080
|
||||
font-weight: bold
|
||||
.ke
|
||||
color: #808
|
||||
.dl
|
||||
color: #606
|
||||
.ch
|
||||
color: #80f
|
||||
.vl
|
||||
color: #088
|
||||
.rx
|
||||
background-color: #fff0ff
|
||||
.k
|
||||
color: #808
|
||||
.dl
|
||||
color: #404
|
||||
.mod
|
||||
color: #C2C
|
||||
.fu
|
||||
color: #404
|
||||
font-weight: bold
|
||||
.s
|
||||
background-color: #fff0f0
|
||||
color: #D20
|
||||
.s
|
||||
background-color: #ffe0e0
|
||||
.s
|
||||
background-color: #ffd0d0
|
||||
.ch
|
||||
color: #b0b
|
||||
.dl
|
||||
color: #710
|
||||
.sh
|
||||
background-color: #f0fff0
|
||||
color: #2B2
|
||||
.dl
|
||||
color: #161
|
||||
.sy
|
||||
color: #A60
|
||||
.k
|
||||
color: #A60
|
||||
.dl
|
||||
color: #630
|
||||
.ta
|
||||
color: #070
|
||||
.tf
|
||||
color: #070
|
||||
font-weight: bold
|
||||
.ts
|
||||
color: #D70
|
||||
font-weight: bold
|
||||
.ty
|
||||
color: #339
|
||||
font-weight: bold
|
||||
.v
|
||||
color: #036
|
||||
.xt
|
||||
color: #444
|
||||
.ins
|
||||
background: #afa
|
||||
.del
|
||||
background: #faa
|
||||
.chg
|
||||
color: #aaf
|
||||
background: #007
|
||||
.head
|
||||
color: #f8f
|
||||
background: #505
|
||||
.ins .ins
|
||||
color: #080
|
||||
font-weight: bold
|
||||
.del .del
|
||||
color: #800
|
||||
font-weight: bold
|
||||
.chg .chg
|
||||
color: #66f
|
||||
.head .head
|
||||
color: #f4f
|
||||
@ -1,209 +0,0 @@
|
||||
.highlight
|
||||
.hll
|
||||
background-color: #ffffcc
|
||||
|
||||
.c
|
||||
color: #606060
|
||||
font-style: italic
|
||||
|
||||
.err
|
||||
color: #F00000
|
||||
background-color: #F0A0A0
|
||||
|
||||
.k
|
||||
color: #208090
|
||||
font-weight: bold
|
||||
|
||||
.o
|
||||
color: #303030
|
||||
|
||||
.cm
|
||||
color: #606060
|
||||
font-style: italic
|
||||
|
||||
.cp
|
||||
color: #507090
|
||||
|
||||
.c1
|
||||
color: #606060
|
||||
font-style: italic
|
||||
|
||||
.cs
|
||||
color: #c00000
|
||||
font-weight: bold
|
||||
font-style: italic
|
||||
|
||||
.gd
|
||||
color: #A00000
|
||||
|
||||
.ge
|
||||
font-style: italic
|
||||
|
||||
.gr
|
||||
color: #FF0000
|
||||
|
||||
.gh
|
||||
color: #000080
|
||||
font-weight: bold
|
||||
|
||||
.gi
|
||||
color: #00A000
|
||||
|
||||
.go
|
||||
color: #808080
|
||||
|
||||
.gp
|
||||
color: #c65d09
|
||||
font-weight: bold
|
||||
|
||||
.gs
|
||||
font-weight: bold
|
||||
|
||||
.gu
|
||||
color: #800080
|
||||
font-weight: bold
|
||||
|
||||
.gt
|
||||
color: #0040D0
|
||||
|
||||
.kc, .kd, .kn
|
||||
color: #208090
|
||||
font-weight: bold
|
||||
|
||||
.kp
|
||||
color: #0080f0
|
||||
font-weight: bold
|
||||
|
||||
.kr
|
||||
color: #208090
|
||||
font-weight: bold
|
||||
|
||||
.kt
|
||||
color: #6060f0
|
||||
font-weight: bold
|
||||
|
||||
.m
|
||||
color: #6000E0
|
||||
font-weight: bold
|
||||
|
||||
.s
|
||||
background-color: #e0e0ff
|
||||
|
||||
.na
|
||||
color: #000070
|
||||
|
||||
.nb
|
||||
color: #007020
|
||||
|
||||
.nc
|
||||
color: #e090e0
|
||||
font-weight: bold
|
||||
|
||||
.no
|
||||
color: #50e0d0
|
||||
font-weight: bold
|
||||
|
||||
.nd
|
||||
color: #505050
|
||||
font-weight: bold
|
||||
|
||||
.ni
|
||||
color: #800000
|
||||
|
||||
.ne
|
||||
color: #F00000
|
||||
font-weight: bold
|
||||
|
||||
.nf
|
||||
color: #50e0d0
|
||||
font-weight: bold
|
||||
|
||||
.nl
|
||||
color: #907000
|
||||
font-weight: bold
|
||||
|
||||
.nn
|
||||
color: #0e84b5
|
||||
font-weight: bold
|
||||
|
||||
.nt
|
||||
color: #007000
|
||||
|
||||
.nv
|
||||
color: #003060
|
||||
|
||||
.ow
|
||||
color: #000000
|
||||
font-weight: bold
|
||||
|
||||
.w
|
||||
color: #bbbbbb
|
||||
|
||||
.mf
|
||||
color: #6000E0
|
||||
font-weight: bold
|
||||
|
||||
.mh
|
||||
color: #005080
|
||||
font-weight: bold
|
||||
|
||||
.mi
|
||||
color: #6060f0
|
||||
font-weight: bold
|
||||
|
||||
.mo
|
||||
color: #4000E0
|
||||
font-weight: bold
|
||||
|
||||
.sb
|
||||
background-color: #e0e0ff
|
||||
|
||||
.sc
|
||||
color: #8080F0
|
||||
|
||||
.sd
|
||||
color: #D04020
|
||||
|
||||
.s2
|
||||
background-color: #e0e0ff
|
||||
|
||||
.se
|
||||
color: #606060
|
||||
font-weight: bold
|
||||
background-color: #e0e0ff
|
||||
|
||||
.sh
|
||||
background-color: #e0e0ff
|
||||
|
||||
.si
|
||||
background-color: #e0e0e0
|
||||
|
||||
.sx
|
||||
color: #f08080
|
||||
background-color: #e0e0ff
|
||||
|
||||
.sr
|
||||
color: #000000
|
||||
background-color: #e0e0ff
|
||||
|
||||
.s1
|
||||
background-color: #e0e0ff
|
||||
|
||||
.ss
|
||||
color: #f0c080
|
||||
|
||||
.bp
|
||||
color: #007020
|
||||
|
||||
.vc
|
||||
color: #c0c0f0
|
||||
|
||||
.vg
|
||||
color: #f08040
|
||||
|
||||
.vi
|
||||
color: #a0a0f0
|
||||
|
||||
.il
|
||||
color: #6060f0
|
||||
font-weight: bold
|
||||
20
doc-src/content/stylesheets/print.sass
Normal file
20
doc-src/content/stylesheets/print.sass
Normal file
@ -0,0 +1,20 @@
|
||||
/* Welcome to Susy. Use this file to define print styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
|
||||
|
||||
@import defaults
|
||||
|
||||
=print
|
||||
nav
|
||||
display: none
|
||||
*
|
||||
float: none !important
|
||||
body
|
||||
+serif-family
|
||||
font-size: 12pt
|
||||
background: white
|
||||
color: black
|
||||
a:link:after, a:visited:after
|
||||
content: " (" attr(href) ") "
|
||||
|
||||
+print
|
||||
263
doc-src/content/stylesheets/screen.sass
Normal file
263
doc-src/content/stylesheets/screen.sass
Normal file
@ -0,0 +1,263 @@
|
||||
/* Welcome to Susy. Use this file to define screen styles.
|
||||
* Import this file using the following HTML or equivalent:
|
||||
* <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
|
||||
@import defaults
|
||||
@import slideshow
|
||||
|
||||
/* @group STRUCTURE
|
||||
|
||||
+susy
|
||||
|
||||
header[role="banner"] h1, #compass-nav
|
||||
+columns(6)
|
||||
|
||||
header[role="banner"]
|
||||
background: #f9f9f9
|
||||
div
|
||||
+container
|
||||
h1
|
||||
+alpha
|
||||
+adjust-font-size-to(18px)
|
||||
text-transform: uppercase
|
||||
a
|
||||
display: block
|
||||
+padding-leader(2, 18px)
|
||||
+padding-trailer(1.5, 18px)
|
||||
|
||||
#compass-nav
|
||||
+omega
|
||||
text-align: right
|
||||
ul
|
||||
+inline-block-list
|
||||
+padding-leader(2)
|
||||
+trailer(1.5)
|
||||
a
|
||||
+inline-block
|
||||
+adjust-font-size-to(14px)
|
||||
padding: 0 1em
|
||||
+border-top-left-radius(0.5em)
|
||||
+border-bottom-right-radius(0.5em)
|
||||
|
||||
=active-compass-nav($id, $url)
|
||||
body[id$="#{$id}"] #compass-nav a[href="#{$url}"]
|
||||
background: #cccccc
|
||||
cursor: default
|
||||
|
||||
+active-compass-nav(-docs, unquote("/docs/"))
|
||||
|
||||
#docs-nav
|
||||
+pie-clearfix
|
||||
+leading-border(1px, 0.25)
|
||||
+trailing-border(1px, 0.25)
|
||||
position: relative
|
||||
height: $base-rhythm-unit
|
||||
border-color: #cccccc
|
||||
background-color: #eeeeee
|
||||
ul
|
||||
+horizontal-list
|
||||
+container
|
||||
position: relative
|
||||
z-index: 2
|
||||
overflow: visible
|
||||
li
|
||||
top: -$base-rhythm-unit * 0.5
|
||||
margin-bottom: -$base-rhythm-unit * 0.5
|
||||
position: relative
|
||||
a
|
||||
&:link, &:visited
|
||||
display: block
|
||||
padding: 0 $side-gutter-width
|
||||
border: 1px solid #eeeeee
|
||||
+leading-border(1px, 0.5)
|
||||
+trailing-border(1px, 0.25)
|
||||
border-bottom: 0
|
||||
+border-top-radius(0.5em)
|
||||
background: #dddddd
|
||||
&:hover, &:focus, &:active
|
||||
background-color: #eeeeee
|
||||
border-color: #dddddd
|
||||
|
||||
=active-docs($class, $url)
|
||||
.#{$class} #docs-nav a[href="#{$url}"]
|
||||
&:link, &:visited
|
||||
+trailing-border(1px, 0.25)
|
||||
cursor: default
|
||||
background: white
|
||||
border-color: #cccccc
|
||||
border-bottom-color: white
|
||||
|
||||
+active-docs(home, "index.php")
|
||||
+active-docs(core, "core.php")
|
||||
+active-docs(css3, "core.php")
|
||||
+active-docs(utils, "core.php")
|
||||
+active-docs(gradient, "core.php")
|
||||
+active-docs(demo, "core.php")
|
||||
|
||||
#search-docs
|
||||
position: absolute
|
||||
z-index: 1
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
color: #999
|
||||
form
|
||||
+container
|
||||
p
|
||||
+columns(3)
|
||||
+omega
|
||||
+leader(.25)
|
||||
+trailer(0)
|
||||
label
|
||||
+float(left)
|
||||
width: columns(1,3) + gutter(3)*.5
|
||||
margin: 0
|
||||
text-align: right
|
||||
input
|
||||
+columns(2,3)
|
||||
+omega
|
||||
|
||||
#page
|
||||
+container
|
||||
+leader(3)
|
||||
|
||||
aside[role="sidebar"]
|
||||
+columns(3)
|
||||
+alpha
|
||||
+adjust-font-size-to(14px)
|
||||
+leader(2,14px)
|
||||
color: #999999
|
||||
section, p
|
||||
+leader(1,14px)
|
||||
+trailer(1,14px)
|
||||
|
||||
footer[role="contentinfo"]
|
||||
+container
|
||||
+leader(3)
|
||||
color: #999999
|
||||
.license
|
||||
+full
|
||||
+adjust-font-size-to(14px)
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group COMPONENTS by type
|
||||
|
||||
article
|
||||
> nav
|
||||
border-top: $px2em*1px solid #ccc
|
||||
margin-top: -$px2em*1px
|
||||
color: #ccc
|
||||
ul
|
||||
+no-style-list
|
||||
li
|
||||
+columns(6,12)
|
||||
&:last-child
|
||||
+omega(12)
|
||||
text-align: right
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group OVERRIDES by content
|
||||
|
||||
#content
|
||||
+columns(9)
|
||||
+omega
|
||||
h1
|
||||
+adjust-font-size-to(36px)
|
||||
+trailer(1,36px)
|
||||
.demo &
|
||||
float: none
|
||||
display: block
|
||||
margin: 0
|
||||
width: auto
|
||||
+full
|
||||
h1
|
||||
text-align: center
|
||||
|
||||
#module-nav
|
||||
+leader(.25)
|
||||
+trailing-border(1px,.25)
|
||||
+trailer(.5)
|
||||
border-color: #ccc
|
||||
clear: both
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
+container
|
||||
li
|
||||
+float(left)
|
||||
margin-right: 1.5em
|
||||
&:first-child
|
||||
+alpha
|
||||
+ #page
|
||||
+leader(1.5)
|
||||
|
||||
#local-nav
|
||||
+leader(1,14px)
|
||||
ul
|
||||
+no-style-list
|
||||
text-align: right
|
||||
h2
|
||||
+leader(1,14px)
|
||||
border-bottom: 1px solid #ccc
|
||||
margin-bottom: ($base_rhythm_unit*.5 - $px2em*1px) * (14/16)
|
||||
text-align: left
|
||||
|
||||
#code
|
||||
+full(12)
|
||||
+pie-clearfix
|
||||
+adjust-font-size-to(12px)
|
||||
+h-borders(1px,1,12px)
|
||||
border-color: #ccc
|
||||
font-family: monospace
|
||||
nav
|
||||
background: #eee
|
||||
+trailer(1,12px)
|
||||
ul
|
||||
+inline-block-list(.4em)
|
||||
text-align: right
|
||||
section
|
||||
position: relative
|
||||
+columns(6,12)
|
||||
+slideshow
|
||||
&#markup
|
||||
+alpha(12)
|
||||
&#styles
|
||||
+omega(12)
|
||||
.slides
|
||||
li
|
||||
overflow: auto
|
||||
table
|
||||
.lino
|
||||
color: #666
|
||||
background: #ddd
|
||||
padding: 0 .4em
|
||||
.source
|
||||
width: 100%
|
||||
padding: 0 .4em
|
||||
|
||||
#demo
|
||||
+full(12)
|
||||
+padding-leader
|
||||
+trailing-border(1px)
|
||||
border-color: #ccc
|
||||
.gradient
|
||||
margin: 1.5em 0
|
||||
height: 6em
|
||||
+linear-gradient(color_stops(#fff, #ddd), "left top")
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group OVERRIDES by page
|
||||
|
||||
|
||||
/* @end
|
||||
|
||||
/* @group DEBUG
|
||||
|
||||
// Uncomment, adjust and use for debugging
|
||||
// #page
|
||||
// +show-grid("grid.png")
|
||||
|
||||
/* @end
|
||||
@ -7,7 +7,7 @@
|
||||
- if @item[:meta_description]
|
||||
%meta{:name => "description", :content => @item[:meta_description]}
|
||||
%link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
|
||||
%link{ :href => "/docs/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%link{ :href => "/docs/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%script{:src => "/docs/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
|
||||
%script{:src => "/docs/javascripts/jquery-ui-1.7.2.custom.min.js", :type => "text/javascript"}
|
||||
@ -18,15 +18,5 @@
|
||||
#sidebar
|
||||
= render "partials/sidebar"
|
||||
#footer= render "partials/footer"
|
||||
:javascript
|
||||
$(function(){
|
||||
$('span.color').each(function(i,e){
|
||||
e = $(e);
|
||||
e.after('<span class="swatch" style="background-color:'+e.text()+';"></span>');
|
||||
});
|
||||
$('span.arg[data-default-value]').each(function(i,e){
|
||||
e = $(e);
|
||||
e.attr("title", "Defaults to: " + e.attr("data-default-value"))
|
||||
})
|
||||
});
|
||||
%script(src="/docs/javascripts/fixups.js" deferred)
|
||||
= render "partials/analytics"
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
- if @item[:meta_description]
|
||||
%meta{:name => "description", :content => @item[:meta_description]}
|
||||
%link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
|
||||
%link{ :href => "/docs/stylesheets/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%link{ :href => "/docs/stylesheets/legacy/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%style{:type => "text/css"}= example_css
|
||||
%body{body_attributes(@item)}
|
||||
#container
|
||||
|
||||
51
doc-src/layouts/main.haml
Normal file
51
doc-src/layouts/main.haml
Normal file
@ -0,0 +1,51 @@
|
||||
!!!5
|
||||
%html.no-js{:dir => "ltr", :lang => "en"}
|
||||
%head
|
||||
%meta{:charset => "utf-8"}/
|
||||
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
|
||||
%link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
|
||||
%title home | compass docs wireframe
|
||||
<!--[if !IE 6]><!-->
|
||||
%link{:charset => "utf-8", :href => "stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
|
||||
<!--<![endif]-->
|
||||
/[if gte IE 7]
|
||||
%link{:charset => "utf-8", :href => "stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
|
||||
/[if IE 6]
|
||||
%link{:charset => "utf-8", :href => "http://universal-ie6-css.googlecode.com/files/ie6.0.3.css", :rel => "stylesheet", :type => "text/css"}
|
||||
%link{ :href => "/docs/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||
%body{body_attributes(@item)}
|
||||
%nav#skip-links
|
||||
%a{:href => "#content"} skip to content
|
||||
%header#banner{:role => "banner"}
|
||||
%div
|
||||
%h1.vcard
|
||||
%a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
|
||||
%nav#compass-nav
|
||||
%ul
|
||||
%li
|
||||
%a{:href => "/", :rel => "home"} compass
|
||||
%li
|
||||
%a{:href => "/docs/"} docs
|
||||
%li
|
||||
%a{:href => "/docs/tutorials/"} tutorials
|
||||
%nav#docs-nav{:role => "navigation"}
|
||||
%ul
|
||||
%li
|
||||
%a{:href => "/docs/"} introduction
|
||||
%li
|
||||
%a{:href => "/docs/compass/"} core
|
||||
%li
|
||||
%a{:href => "/docs/blueprint/"} blueprint
|
||||
%li
|
||||
%a{:href => "/docs/plugins/"} plugins
|
||||
#search-docs
|
||||
%form
|
||||
%p
|
||||
%label{:for => "search"} search
|
||||
%input#search{:name => "search", :type => "text", :value => "", :placeholder => "Search"}
|
||||
%article= yield
|
||||
%script(src="/docs/javascripts/jquery-1.3.2.min.js")
|
||||
%script(src="/docs/javascripts/jquery-ui-1.7.2.custom.min.js")
|
||||
%script(src="/docs/javascripts/fixups.js" deferred)
|
||||
= render "partials/analytics"
|
||||
Loading…
Reference in New Issue
Block a user