refactored docs to use latest nanoc and extracted styles to compass-theme gem
This commit is contained in:
Scott Davis
parent
374aed6783
commit
c7c007672f
@ -1,7 +1,7 @@
|
||||
# Require any additional compass plugins here.
|
||||
require 'susy'
|
||||
require 'css-slideshow'
|
||||
|
||||
require 'compass-theme'
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
source :gemcutter
|
||||
|
||||
gem 'nanoc3', :git => "git://github.com/chriseppstein/nanoc.git"
|
||||
#gem 'cri', '~> 1.0.1'
|
||||
gem 'adsf'
|
||||
gem 'nanoc3' #, :git => "git://github.com/chriseppstein/nanoc.git"
|
||||
gem 'rdiscount'
|
||||
gem 'thor'
|
||||
gem 'rack'
|
||||
@ -8,12 +10,12 @@ gem 'mime-types'
|
||||
gem 'serve', "1.0.0"
|
||||
gem 'nokogiri'
|
||||
gem 'coderay'
|
||||
gem 'sass', ">= 3.1"
|
||||
gem 'haml', ">= 3.1"
|
||||
gem 'haml'
|
||||
gem 'rake'
|
||||
gem 'compass', :path => ".."
|
||||
gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
gem 'css-slideshow', "0.2.0"
|
||||
gem 'compass-theme', '~> 0.0.1'
|
||||
# gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
# gem 'css-slideshow', "0.2.0"
|
||||
gem 'json'
|
||||
gem 'css_parser', "1.0.1"
|
||||
gem 'ruby-prof'
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
GIT
|
||||
remote: git://github.com/chriseppstein/nanoc.git
|
||||
revision: 4eee0e60c5121b90498caa88605d416521553378
|
||||
specs:
|
||||
nanoc3 (3.2.0a3)
|
||||
cri (>= 1.0.0)
|
||||
|
||||
PATH
|
||||
remote: ..
|
||||
specs:
|
||||
compass (0.11.1.93b89a2)
|
||||
chunky_png (~> 1.1)
|
||||
compass (0.12.alpha.0.374aed6)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
activesupport (3.0.7)
|
||||
builder (2.1.2)
|
||||
chunky_png (1.2.0)
|
||||
coderay (0.9.7)
|
||||
compass-susy-plugin (0.9.beta.3)
|
||||
compass (>= 0.11.beta.3)
|
||||
cri (1.0.1)
|
||||
activesupport (3.0.10)
|
||||
adsf (1.0.1)
|
||||
rack (>= 1.0.0)
|
||||
builder (3.0.0)
|
||||
chunky_png (1.2.1)
|
||||
coderay (0.9.8)
|
||||
compass-susy-plugin (0.9)
|
||||
compass (>= 0.11.1)
|
||||
compass-theme (0.0.1)
|
||||
compass (~> 0.11)
|
||||
compass-susy-plugin (>= 0.7.0.pre8)
|
||||
css-slideshow (= 0.2.0)
|
||||
cri (2.0.2)
|
||||
css-slideshow (0.2.0)
|
||||
compass (>= 0.10.0.rc3)
|
||||
css_parser (1.0.1)
|
||||
fssm (0.2.7)
|
||||
haml (3.1.0)
|
||||
haml (3.1.2)
|
||||
i18n (0.4.2)
|
||||
json (1.5.1)
|
||||
json (1.5.4)
|
||||
mime-types (1.16)
|
||||
nokogiri (1.4.4)
|
||||
rack (1.2.2)
|
||||
rake (0.8.7)
|
||||
rb-fsevent (0.4.0)
|
||||
nanoc3 (3.2.1)
|
||||
cri (~> 2.0)
|
||||
nokogiri (1.5.0)
|
||||
rack (1.2.3)
|
||||
rake (0.9.2)
|
||||
rb-fsevent (0.4.3.1)
|
||||
rdiscount (1.6.8)
|
||||
ruby-prof (0.9.2)
|
||||
sass (3.1.0)
|
||||
ruby-prof (0.10.8)
|
||||
sass (3.1.7)
|
||||
serve (1.0.0)
|
||||
activesupport (~> 3.0.1)
|
||||
i18n (~> 0.4.1)
|
||||
rack (~> 1.2.1)
|
||||
tzinfo (~> 0.3.23)
|
||||
thor (0.14.6)
|
||||
tzinfo (0.3.26)
|
||||
tzinfo (0.3.29)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
adsf
|
||||
builder
|
||||
coderay
|
||||
compass!
|
||||
compass-susy-plugin (>= 0.7.0.pre8)
|
||||
css-slideshow (= 0.2.0)
|
||||
compass-theme (~> 0.0.1)
|
||||
css_parser (= 1.0.1)
|
||||
haml (>= 3.1)
|
||||
haml
|
||||
json
|
||||
mime-types
|
||||
nanoc3!
|
||||
nanoc3
|
||||
nokogiri
|
||||
rack
|
||||
rake
|
||||
rb-fsevent
|
||||
rdiscount
|
||||
ruby-prof
|
||||
sass (>= 3.1)
|
||||
serve (= 1.0.0)
|
||||
thor
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
$default-rounded-corner: 4
|
||||
|
||||
.group
|
||||
+pie-clearfix
|
||||
|
||||
.truncate
|
||||
+ellipsis
|
||||
|
||||
.border-box
|
||||
+box-sizing(border-box)
|
||||
|
||||
.round-corners-4
|
||||
+border-radius(4px)
|
||||
|
||||
.round-corners-em
|
||||
+border-radius(1em)
|
||||
|
||||
=round-corners($num: $default-rounded-corner)
|
||||
@extend .round-corners-#{$num}
|
||||
|
||||
=round-top-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-left-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
=round-right-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=round-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=square-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
=square-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
=square-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-left-corner
|
||||
=square-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
@ -1,17 +0,0 @@
|
||||
.clear-top-left-corner
|
||||
+border-top-left-radius(0)
|
||||
.clear-top-right-corner
|
||||
+border-top-right-radius(0)
|
||||
.clear-bottom-left-corner
|
||||
+border-bottom-left-radius(0)
|
||||
.clear-bottom-right-corner
|
||||
+border-bottom-right-radius(0)
|
||||
|
||||
.hide
|
||||
display: none
|
||||
.clear-box-shadow
|
||||
+box-shadow(none)
|
||||
.clear-border-radius
|
||||
@extend .clear-rounded-corners
|
||||
.clear-rounded-corners
|
||||
+border-radius(0)
|
||||
@ -1,10 +0,0 @@
|
||||
@mixin reset($reset-type: false){
|
||||
@if($reset-type){
|
||||
@if($reset-type == global){
|
||||
@include global-reset;
|
||||
}
|
||||
@if($reset-type == html5){
|
||||
@include reset-html5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
body#blog-archive {
|
||||
.timestamp {
|
||||
margin-right: 1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
|
||||
.mixin-source, .example-source, .function-source {
|
||||
position: relative; @extend .fixed-font;
|
||||
.syntaxhighlighter, pre {
|
||||
&.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
|
||||
|
||||
html.sass { .mixin-source, .example-source, .function-source { .syntaxhighlighter.sass { display: block; } } }
|
||||
html.scss { .mixin-source, .example-source, .function-source { .syntaxhighlighter.scss { display: block; } } }
|
||||
html.css .example-source .syntaxhighlighter.css { display: block; }
|
||||
html.html .example-source .syntaxhighlighter.html { display: block; }
|
||||
html.haml .example-source .syntaxhighlighter.haml { display: block; }
|
||||
|
||||
|
||||
|
||||
.mixin-source, .function-source { display: none; }
|
||||
|
||||
html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
|
||||
margin: 0 0 2px;
|
||||
code { padding: 0; }
|
||||
//font-size: 1.1em;
|
||||
text-shadow: none;
|
||||
.code-block { background: none; @extend .clear-box-shadow; }
|
||||
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
|
||||
.toolbar { display: none; }
|
||||
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
|
||||
}
|
||||
|
||||
a[rel="github-source"] {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 1.1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1.5em 0;
|
||||
overflow: auto;
|
||||
.code-block:first-child { padding: .6em; display: block; }
|
||||
.code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
|
||||
}
|
||||
|
||||
.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;
|
||||
@include round-bottom-corners
|
||||
}
|
||||
|
||||
h3 { @include round-corners;
|
||||
padding: 10px 15px;
|
||||
margin: 20px 0 20px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
a { text-decoration: none;}
|
||||
code, .arg { font-weight: normal; }
|
||||
}
|
||||
h3.mixin, h3.function { @include round-top-corners; margin-bottom: 2px;}
|
||||
.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: 6px;}
|
||||
|
||||
.syntaxhighlighter {
|
||||
a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
|
||||
background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
|
||||
padding: 0; margin: 0; outline: 0;
|
||||
overflow: visible; position: static; right: auto;
|
||||
text-align: left; top: auto; vertical-align: baseline;
|
||||
width: auto;
|
||||
font: { weight: normal; style: normal;
|
||||
size: 1em;
|
||||
}
|
||||
min: { height: inherit; }
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
|
||||
|
||||
// set up bold and italic
|
||||
.bold { font-weight: bold; }
|
||||
.italic { font-style: italic; }
|
||||
.line { white-space: pre; }
|
||||
|
||||
// main table and columns
|
||||
table { width: 100%;
|
||||
td.code { width: 100%;
|
||||
.line { padding: 0 .6em; } }
|
||||
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
|
||||
|
||||
// Styles for the toolbar
|
||||
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
|
||||
span.title { display: inline; }
|
||||
a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
|
||||
.container { position: relative; }
|
||||
textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
|
||||
}
|
||||
.syntaxhighlighter, pre .code-block:first-child, pre {
|
||||
&::-webkit-scrollbar { height: 12px; }
|
||||
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
|
||||
&::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
html.light #demo, html.dark #demo {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#demo {
|
||||
@include round-corners;
|
||||
@extend .group;
|
||||
background: #fff;
|
||||
margin-bottom: 1.2em;
|
||||
padding: 40px;
|
||||
code {
|
||||
@include box-shadow(rgba(#000, .3) 0 1px 3px, rgba(#000, .15) 0 1px 0 0 inset);
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#how {
|
||||
section { width: 49%; float: left; }
|
||||
section + section { float: right; }
|
||||
|
||||
.example-source { clear: both; }
|
||||
}
|
||||
|
||||
#reference {
|
||||
float: right;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
body#home {
|
||||
width: 810px;
|
||||
#page { padding-top: 31px;}
|
||||
h1#logo {
|
||||
$logo: 'compass-logo.png';
|
||||
background: image-url($logo) no-repeat;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
width: image-width($logo);
|
||||
height: image-height($logo)/2;
|
||||
padding: 0;
|
||||
margin: 0 auto 18px;
|
||||
}
|
||||
#{headings()}{ @extend .heading-font; }
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
h4 { font-size: 1.5em; }
|
||||
.overview {
|
||||
@extend .group;
|
||||
.compass { width: 406px; float: left;
|
||||
h4:before { content: "k"; } }
|
||||
.sass { width: 275px; float: right;
|
||||
h4:before { content: "2"; } }
|
||||
div {
|
||||
padding: 20px;
|
||||
h4 {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
color: #fb292d;
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; }
|
||||
p { margin-bottom: 0; }
|
||||
ol, p { line-height: 1.8em; font-size: .95em;}
|
||||
}
|
||||
}
|
||||
ul#featured_sites {
|
||||
@extend .group;
|
||||
overflow: visible;
|
||||
margin-top: 30px;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
li {
|
||||
float: left;
|
||||
text-shadow: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
&:nth-child(3n+2){ margin: 0 7px; }
|
||||
&:nth-child(1n+4){ margin-top: 7px; }
|
||||
&:nth-child(3n+4){ clear: left; }
|
||||
padding: 6px;
|
||||
a { text-decoration: none; }
|
||||
img { float: left; width: 240px; }
|
||||
span { display: none;}
|
||||
&:hover { z-index: 100;
|
||||
padding: 3px 2px;
|
||||
img { width: 248px; }
|
||||
span { display: block; position: absolute; text-shadow: none;}
|
||||
}
|
||||
.url {
|
||||
bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px;
|
||||
font-size: .8em; border-top: 1px solid rgba(#fff, .2); }
|
||||
.title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; }
|
||||
}
|
||||
}
|
||||
section.book, section.gui {
|
||||
width: 48%;
|
||||
float: left;
|
||||
@extend .group;
|
||||
h3 { margin-bottom: 1em; height: 2em; text-align: left; }
|
||||
}
|
||||
section.book {
|
||||
margin-right: 2%;
|
||||
img { float: left; margin-right: 1em; margin-bottom: 1em; }
|
||||
}
|
||||
section.gui {
|
||||
text-align: center;
|
||||
.note {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
html.light body#home { h1#logo { background-position: bottom;} }
|
||||
@ -1,10 +0,0 @@
|
||||
body#install {
|
||||
#steps, p.madlib, p.note, h4 { margin-top: 1em; }
|
||||
p.note { font-size: smaller; font-style: italic; }
|
||||
p.warning { color: #c00; }
|
||||
.customization { display: none; }
|
||||
.customizable .customization { display: inline; }
|
||||
blockquote { border-left: 2px solid #ccc;
|
||||
text-indent: 0; padding-left: 0.5em; }
|
||||
.customization input { width: 8em; }
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
$min-width: 700px;
|
||||
$side-nav-width: 160px;
|
||||
$main-min-width: $min-width - $side-nav-width;
|
||||
|
||||
body {
|
||||
max-width: 1500px;
|
||||
min-width: $min-width;
|
||||
margin: 0 auto;
|
||||
@extend .sans-font;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
|
||||
#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 aside + article { margin-left: $side-nav-width + 22px; padding-left: 23px; }
|
||||
aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
|
||||
|
||||
body#home #page article { padding-left: 0;}
|
||||
body.site, body#changelog, body.default { max-width: 1024px; }
|
||||
@ -1,63 +0,0 @@
|
||||
body.get-involved h1 + p { font-size: 1.2em; line-height: 1.45em; }
|
||||
|
||||
#page {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
& > article { padding-top: 10px; font-size: 15px;
|
||||
img { max-width: 100%; } } }
|
||||
|
||||
#theme_pref {
|
||||
a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } }
|
||||
|
||||
#docs_panel {
|
||||
position: absolute; top: 0; right: 0;
|
||||
width: 100%;
|
||||
& > div { float: right; margin-left: 10px; @include round-bottom-corners; border: 1px solid; border-top: 0;}
|
||||
a { text-decoration: none; }
|
||||
#theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} }
|
||||
#version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } }
|
||||
|
||||
}
|
||||
|
||||
#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
|
||||
|
||||
.syntax_pref {
|
||||
float: left; @include round-top-corners; border: 1px solid; border-bottom: 0;
|
||||
a { text-decoration: none; }
|
||||
}
|
||||
|
||||
footer {
|
||||
.links { float: left; font-size: .9em;
|
||||
img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
|
||||
span { position: relative; top: -1px; }
|
||||
ul { @include horizontal-list(15px); overflow: visible;
|
||||
li { padding-top: 3px; }
|
||||
li:last-child {border: 0; @include box-shadow(none); } } }
|
||||
}
|
||||
#page article h2 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
h2 a.help {
|
||||
text-indent: -9999px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
@include opacity(.3);
|
||||
&:hover { @include opacity(.7); }
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
content: "?";
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
height: 0px;
|
||||
border: 0;
|
||||
border-bottom-width: 4px;
|
||||
margin: 3em 0;
|
||||
background: transparent;
|
||||
}
|
||||
@ -1,96 +0,0 @@
|
||||
.triangle-marker {
|
||||
border-color: transparent transparent;
|
||||
content: "\00a0";
|
||||
height: 0; width: 0;
|
||||
position: absolute;
|
||||
border-style: solid; }
|
||||
|
||||
nav a { @include hover-link; }
|
||||
nav .selected a:hover { text-decoration: none;}
|
||||
|
||||
header { @extend .group;
|
||||
font-size: 1.3em; @extend .heading-font; border-width: 4px;}
|
||||
#main-nav {
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
ul {
|
||||
@include horizontal-list(10px);
|
||||
line-height: 2em; }}
|
||||
|
||||
#sub-nav {
|
||||
@extend .group;
|
||||
padding: 8px 0; }
|
||||
|
||||
#docs-nav, #module-nav {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
a {
|
||||
padding: 2px 10px;
|
||||
display: inline-block; }}
|
||||
|
||||
#docs-nav { padding-right: 30px;
|
||||
& + #module-nav {
|
||||
padding-left: 20px;
|
||||
}}
|
||||
|
||||
#module-nav {
|
||||
display: inline-block;
|
||||
ul { @include horizontal-list(false); }}
|
||||
|
||||
body.getting-started #module-nav li.getting-started,
|
||||
body.tutorial #module-nav li.tutorials,
|
||||
body.support #module-nav li.support,
|
||||
#module-nav li.selected {
|
||||
position: relative;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:before{ @extend .triangle-marker;
|
||||
border-width: 0 8px 8px;
|
||||
z-index: 2;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-bottom-color: #121212;
|
||||
}
|
||||
&:before { @extend .triangle-marker;
|
||||
border-bottom-color: #414141;
|
||||
border-width: 0 6px 6px;
|
||||
z-index: 3;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
&:after { @extend .triangle-marker;
|
||||
border-bottom-color: #343434;
|
||||
border-width: 0 5px 5px;
|
||||
z-index: 3;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-docs {
|
||||
width: 170px;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: .3em;
|
||||
//position: absolute; top: 29px; right: 0;
|
||||
&:before {
|
||||
content: "s";
|
||||
display: block;
|
||||
@extend .pictos;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 4px;
|
||||
font-size: .8em;
|
||||
z-index: 20;
|
||||
@include opacity(.8)
|
||||
}
|
||||
input { @extend .sans-font; @include round-corners;
|
||||
@include box-sizing(border-box);
|
||||
width: 170px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
|
||||
font-size: .8em;
|
||||
float: right;
|
||||
position: relative; } }
|
||||
@ -1,31 +0,0 @@
|
||||
aside {
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
padding-right: 22px;
|
||||
h2, h3 {
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45em;
|
||||
padding-bottom: .2em;
|
||||
margin-bottom: .4em;
|
||||
@extend .clear-border-radius;
|
||||
}
|
||||
h3 {
|
||||
padding: 0 0 .5em; line-height: 1.1em;
|
||||
}
|
||||
a {
|
||||
font-size: .85em;
|
||||
}
|
||||
ul ul a {
|
||||
&.selected, &.selected:hover {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.deprecated {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.beta span:after {
|
||||
content: " (\3B2)";
|
||||
}
|
||||
}
|
||||
@ -1,275 +0,0 @@
|
||||
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
|
||||
background: $page-bg;
|
||||
body { background: $page-bg; color: $text;
|
||||
a { color: $link; } }
|
||||
|
||||
#page { @extend .horizontal-rule-#{$theme}; }
|
||||
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
||||
|
||||
nav a { color: $nav-link; }
|
||||
#main-nav a { color: $main-nav;}
|
||||
|
||||
body#home #main-nav a[rel=home],
|
||||
body#help #main-nav a[rel=help],
|
||||
body.tutorial #main-nav a[rel=help],
|
||||
body.reference #main-nav a[rel=documentation],
|
||||
body#changelog #main-nav a[rel=documentation],
|
||||
body.demo #main-nav a[rel=documentation],
|
||||
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
||||
|
||||
#search-docs input {
|
||||
@extend .inset-panel-#{$theme}; color: $search;
|
||||
&::-webkit-input-placeholder { color: $search; } }
|
||||
#{headings()}{ color: $heading;
|
||||
strong { color: $main-nav-selected; }
|
||||
em { color: $code; } }
|
||||
|
||||
#page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
|
||||
hr { @extend .horizontal-rule-#{$theme};
|
||||
border-bottom-width: 8px}
|
||||
body#home h2 { @extend .horizontal-rule-#{$theme}; }
|
||||
|
||||
#page aside + article { @extend .vertical-rule-left-#{$theme}; }
|
||||
|
||||
aside {
|
||||
h2 a { color: $strong-text; }
|
||||
h2, h3 { @extend .horizontal-rule-#{$theme}; }}
|
||||
|
||||
footer .links li { @extend .vertical-rule-#{$theme}; }
|
||||
code { @extend .code-block-#{$theme}; color: $code; }
|
||||
|
||||
#theme_pref { @extend .theme-switch-#{$theme}; }
|
||||
#docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; }
|
||||
|
||||
body#home .overview div { @extend .inset-panel-#{$theme};
|
||||
h4 { @extend .horizontal-rule-#{$theme}; } }
|
||||
#featured_sites li { @extend .inset-panel-#{$theme}; }
|
||||
|
||||
}
|
||||
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
|
||||
|
||||
#page > article {
|
||||
h1 { @extend .horizontal-rule-#{$theme}; }
|
||||
h2 { @extend .horizontal-rule-top-#{$theme}; }
|
||||
h3 { @extend .heading-panel-#{$theme}; }
|
||||
h1 + h2, hr + h2 {
|
||||
@extend .clear-box-shadow; border-top: 0;
|
||||
margin-top: 0;}
|
||||
}
|
||||
|
||||
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
||||
#docs-nav { @extend .vertical-rule-#{$theme}; }
|
||||
body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
|
||||
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
|
||||
|
||||
#module-nav {
|
||||
ul { overflow: visible; }}
|
||||
body.getting-started #module-nav li.getting-started,
|
||||
body.tutorial #module-nav li.tutorials,
|
||||
body.support #module-nav li.support,
|
||||
#module-nav li.selected { @extend .selected-marker-#{$theme};
|
||||
a { color: $module-nav-selected; } }
|
||||
|
||||
a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
|
||||
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
|
||||
|
||||
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
|
||||
.mixin-source, .example-source, .function-source { @extend .mixin-panel-#{$theme};
|
||||
.container textarea { color: $code; }
|
||||
}
|
||||
h2 a.help { color: $heading;}
|
||||
|
||||
.source-documentation { @extend .doc-panel-#{$theme}; }
|
||||
|
||||
#demo { @extend .demo-#{$theme}; }
|
||||
|
||||
.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 box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
|
||||
background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }
|
||||
|
||||
.horizontal-rule-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
||||
border-bottom: 1px solid #121212; }
|
||||
|
||||
.horizontal-rule-top-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
|
||||
border-top: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
||||
border-right: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-left-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
|
||||
border-left: 1px solid #121212; }
|
||||
|
||||
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
||||
|
||||
.demo-dark {
|
||||
@include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }
|
||||
|
||||
.heading-panel-dark {
|
||||
background: darken(#2f2f2f, 6);
|
||||
background: rgba(#000, .2);
|
||||
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
||||
a:hover { color: #fff;
|
||||
.arg { color: rgba(#fff, .6);}
|
||||
}
|
||||
}
|
||||
.doc-panel-dark {
|
||||
background: darken(#2f2f2f, 4);
|
||||
background: rgba(#000, .1);
|
||||
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
||||
}
|
||||
|
||||
.syntax-switch-dark {
|
||||
color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
|
||||
&:hover { color: #fff; text-shadow: #000 0 1px 0; } }
|
||||
|
||||
.theme-switch-dark {
|
||||
cursor: pointer;
|
||||
a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
|
||||
&:hover a { color: #eee; text-shadow: #000 0 1px 0; } }
|
||||
|
||||
.selected-marker-dark {
|
||||
a:before{ border-bottom-color: #121212; }
|
||||
&:before { border-bottom-color: #414141; }
|
||||
&:after { border-bottom-color: #323232; }
|
||||
}
|
||||
.mixin-panel-dark {
|
||||
@extend .inset-panel-dark;
|
||||
td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
|
||||
.container textarea { background: darken(#2f2f2f, 6); }
|
||||
}
|
||||
|
||||
@mixin dark-theme($docs: false) {
|
||||
$page-bg: #2f2f2f;
|
||||
|
||||
$text: #c6c6c6;
|
||||
$heading: white;
|
||||
$strong-text: #dbdbdb;
|
||||
|
||||
$search: #6e6e6e;
|
||||
|
||||
$code: #dadbb1;
|
||||
$nav-link: #bfbfbf;
|
||||
$link: saturate(lighten(#85AFC9, 4), 19);
|
||||
|
||||
$main-nav: white;
|
||||
$main-nav-selected: #fb292d;
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$option-panel-border: rgba(#000, .5);
|
||||
$option-panel-bg: rgba(#fff, .06);
|
||||
|
||||
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
|
||||
|
||||
@if($docs){
|
||||
@include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
||||
.syntaxhighlighter, pre, pre .code-block:first-child {
|
||||
&::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
|
||||
}
|
||||
.syntaxhighlighter, pre, pre .code-block:first-child {
|
||||
&::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
.inset-panel-light {
|
||||
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
background: darken(#fff, .04); background-color: rgba(#000, .04); }
|
||||
|
||||
.horizontal-rule-light {
|
||||
@include box-shadow(#fff 0 1px 0);
|
||||
border-bottom: 1px solid #bbb; }
|
||||
|
||||
.horizontal-rule-top-light {
|
||||
@include box-shadow(#fff 0 1px 0 inset);
|
||||
border-top: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
||||
border-right: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-left-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
|
||||
border-left: 1px solid #bbb; }
|
||||
|
||||
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
|
||||
|
||||
.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); }
|
||||
|
||||
.syntax-switch-light {
|
||||
color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
|
||||
&:hover { color: #000; text-shadow: #fff 0 1px 0; }}
|
||||
|
||||
.theme-switch-light {
|
||||
cursor: pointer;
|
||||
a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
|
||||
&:hover a { color: #000; } }
|
||||
|
||||
.heading-panel-light {
|
||||
background: rgba(#fff, .5);
|
||||
@include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
|
||||
a:hover { color: #000;
|
||||
.arg { color: rgba(#000, .6); } }
|
||||
}
|
||||
|
||||
.selected-marker-light {
|
||||
a:before{ border-bottom-color: #bbbbbb; }
|
||||
&:before { border-bottom-color: #fff; }
|
||||
&:after { border-bottom-color: #e5e5e5; }
|
||||
}
|
||||
|
||||
.doc-panel-light {
|
||||
background: rgba(#000, .03);
|
||||
text-shadow: rgba(#fff, .9) 0 1px 1px;
|
||||
@include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
|
||||
}
|
||||
|
||||
.mixin-panel-light {
|
||||
@extend .inset-panel-light;
|
||||
background: rgba(#fff, .8);
|
||||
td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
|
||||
.container textarea { background: darken(#fff, .04); }
|
||||
}
|
||||
|
||||
@mixin light-theme($docs: false) {
|
||||
$page-bg: #ececec; // image-url('bg-light.jpg');
|
||||
|
||||
$text: #111;
|
||||
$heading: #222;
|
||||
$strong-text: #000;
|
||||
|
||||
$search: #666;
|
||||
|
||||
$link: #307eb6;
|
||||
$nav-link: #444;
|
||||
$code: #222;
|
||||
|
||||
$main-nav: #000;
|
||||
$main-nav-selected: darken(#fb292d, 15);
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$option-panel-border: rgba(#000, .2);
|
||||
$option-panel-bg: #fff;
|
||||
|
||||
@include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
|
||||
|
||||
@if($docs){
|
||||
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
||||
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
|
||||
.syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "pictos-web";
|
||||
src: url('/otherfonts/pictos-web.eot');
|
||||
src: local("?"), url('/otherfonts/pictos-web.woff') format('woff'), url('/otherfonts/pictos-web.ttf') format('truetype'), url('/otherfonts/pictos-web.svg#webfontIyfZbseF') format('svg');}
|
||||
|
||||
@include font-face("museosans-web", font-files("museosans-web.woff", woff, "museosans-web.ttf", truetype, "museosans-web.svg#webfontJHBEijmD", svg), 'museosans-web.eot');
|
||||
|
||||
|
||||
.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
|
||||
.heading-font { font-family: 'Museo Sans', "museosans-web", 'serif'; }
|
||||
.pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
|
||||
.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
|
||||
|
||||
#page {
|
||||
line-height: 1.45em;
|
||||
ol { list-style: outside decimal; padding-left: 2.5em; }
|
||||
ol ol { list-style: outside lower-alpha; padding-left: 2.5em; }
|
||||
ul, ol, dl { margin-bottom: 1.5em;}
|
||||
p { margin-bottom: 1.2em;}
|
||||
#{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
|
||||
h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
|
||||
h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
|
||||
h3 { font-size: 18px; }
|
||||
h4 { font-size: 18px; margin: .4em 0; }
|
||||
ul { list-style: inside disc; }
|
||||
dt { font-weight: bold; }
|
||||
}
|
||||
#page aside {
|
||||
ul { list-style: none; margin-bottom: 1em;}
|
||||
h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;}
|
||||
}
|
||||
em { font-style: italic; }
|
||||
strong { font-weight: bold; }
|
||||
|
||||
#page > article {
|
||||
ul ul { padding-left: 1em; }
|
||||
position: relative;
|
||||
h2 { font-size: 26px; margin: .5em 0 .6em;
|
||||
padding: 1em 0 6px;}
|
||||
hr + h2 { padding-top: 0; }
|
||||
hr + h3, h4, h5 { margin-top: 0; }
|
||||
}
|
||||
|
||||
dl.table dt, dl.table dd { display: inline-block; }
|
||||
dg { display: block; margin-bottom: 1.5em; }
|
||||
|
||||
.warning { color: #c00; }
|
||||
@ -1,216 +0,0 @@
|
||||
@mixin round_corners_custom($top, $right, $bottom, $left) {
|
||||
-moz-border-radius: $top $right $bottom $left !important;
|
||||
-webkit-border-radius: $top $right $bottom $left !important;
|
||||
}
|
||||
|
||||
@mixin round_corners($radius) {
|
||||
@include round_corners_custom($radius, $radius, $radius, $radius);
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
a,
|
||||
div,
|
||||
code,
|
||||
table,
|
||||
table td,
|
||||
table tr,
|
||||
table tbody,
|
||||
table thead,
|
||||
table caption,
|
||||
textarea {
|
||||
@include round_corners(0);
|
||||
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
left: auto !important;
|
||||
line-height: 1.1em !important;
|
||||
margin: 0 !important;
|
||||
outline: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding: 0 !important;
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
text-align: left !important;
|
||||
top: auto !important;
|
||||
vertical-align: baseline !important;
|
||||
width: auto !important;
|
||||
box-sizing: content-box !important;
|
||||
font: {
|
||||
family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
|
||||
weight: normal !important;
|
||||
style: normal !important;
|
||||
size: 1em !important;
|
||||
}
|
||||
min: {
|
||||
// For IE8, FF & WebKit
|
||||
height: inherit !important;
|
||||
// For IE7
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
width: 100% !important;
|
||||
margin: 1em 0 1em 0 !important;
|
||||
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
font-size: 1em !important;
|
||||
|
||||
&.source { overflow: hidden !important; }
|
||||
|
||||
// set up bold and italic
|
||||
.bold { font-weight: bold !important; }
|
||||
.italic { font-style: italic !important; }
|
||||
|
||||
.line { white-space: pre !important; }
|
||||
|
||||
// main table and columns
|
||||
table {
|
||||
width: 100% !important;
|
||||
caption {
|
||||
text-align: left !important;
|
||||
padding: .5em 0 0.5em 1em !important;
|
||||
}
|
||||
|
||||
td.code {
|
||||
width: 100% !important;
|
||||
|
||||
.container {
|
||||
position: relative !important;
|
||||
|
||||
textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !important;
|
||||
white-space: pre !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// middle spacing between line numbers and lines
|
||||
td.gutter .line {
|
||||
text-align: right !important;
|
||||
padding: 0 0.5em 0 1em !important;
|
||||
}
|
||||
|
||||
td.code .line {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.nogutter {
|
||||
td.code {
|
||||
.container textarea, .line { padding-left: 0em !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&.show { display: block !important; }
|
||||
|
||||
// Adjust some properties when collapsed
|
||||
&.collapsed {
|
||||
table { display: none !important; }
|
||||
|
||||
.toolbar {
|
||||
padding: 0.1em 0.8em 0em 0.8em !important;
|
||||
font-size: 1em !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
span {
|
||||
display: inline !important;
|
||||
margin-right: 1em !important;
|
||||
|
||||
a {
|
||||
padding: 0 !important;
|
||||
display: none !important;
|
||||
&.expandSource { display: inline !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for the toolbar
|
||||
.toolbar {
|
||||
position: absolute !important;
|
||||
right: 1px !important;
|
||||
top: 1px !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
font-size: 10px !important;
|
||||
z-index: 10 !important;
|
||||
|
||||
span.title { display: inline !important; }
|
||||
|
||||
a {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important;
|
||||
padding-top: 1px !important;
|
||||
|
||||
&.expandSource { display: none !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&.ie {
|
||||
font-size: .9em !important;
|
||||
padding: 1px 0 1px 0 !important;
|
||||
|
||||
.toolbar {
|
||||
line-height: 8px !important;
|
||||
a {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Print view.
|
||||
// Colors are based on the default theme without background.
|
||||
&.printing {
|
||||
.line.alt1 .content,
|
||||
.line.alt2 .content,
|
||||
.line.highlighted .number,
|
||||
.line.highlighted.alt1 .content,
|
||||
.line.highlighted.alt2 .content { background: none !important; }
|
||||
|
||||
// Gutter line numbers
|
||||
.line {
|
||||
.number { color: #bbbbbb !important; }
|
||||
// Add border to the lines
|
||||
.content { color: black !important; }
|
||||
}
|
||||
|
||||
// Toolbar when visible
|
||||
.toolbar { display: none !important; }
|
||||
a { text-decoration: none !important; }
|
||||
.plain, .plain a { color: black !important; }
|
||||
.comments, .comments a { color: #008200 !important; }
|
||||
.string, .string a { color: blue !important; }
|
||||
.keyword {
|
||||
color: #006699 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.preprocessor { color: gray !important; }
|
||||
.variable { color: #aa7700 !important; }
|
||||
.value { color: #009900 !important; }
|
||||
.functions { color: #ff1493 !important; }
|
||||
.constants { color: #0066cc !important; }
|
||||
.script { font-weight: bold !important; }
|
||||
.color1, .color1 a { color: gray !important; }
|
||||
.color2, .color2 a { color: #ff1493 !important; }
|
||||
.color3, .color3 a { color: red !important; }
|
||||
.break, .break a { color: black !important; }
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
|
||||
// Dark Theme
|
||||
|
||||
$background: none;
|
||||
|
||||
$line_highlighted_background: #323E41;
|
||||
$line_highlighted_number: #b9bdb6;
|
||||
|
||||
$gutter_text: #afafaf;
|
||||
$gutter_border_color: rgba(#fff, .15);
|
||||
|
||||
$toolbar_collapsed_a: #5ba1cf;
|
||||
$toolbar_collapsed_a_hover: #5ce638;
|
||||
$toolbar_collapsed_background: #000;
|
||||
|
||||
$toolbar_a: #fff;
|
||||
$toolbar_a_hover: #e0e8ff;
|
||||
|
||||
$code_plain: #dadbb1;
|
||||
$code_comments: #878a85;
|
||||
$code_string: #64b041;
|
||||
$code_keyword: #6cc7eb;
|
||||
$code_preprocessor: #cd5c57;
|
||||
$code_variable: $code_keyword;
|
||||
$code_value: #ffa0a0;
|
||||
$code_functions: #3d95e6;
|
||||
$code_constants: #e0e8ff;
|
||||
$code_script: $code_keyword;
|
||||
$code_script_background: none;
|
||||
$code_color1: #b0b76b;
|
||||
$code_color2: #98f77a;
|
||||
$code_color3: #ffaa3e;
|
||||
$code_color4: $code_plain;
|
||||
|
||||
//@import "theme_template.scss";
|
||||
|
||||
// Interface elements.
|
||||
html.dark .syntaxhighlighter {
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain; }
|
||||
.comments, .comments a { color: $code_comments; }
|
||||
.string, .string a { color: $code_string; }
|
||||
.keyword { color: $code_keyword; }
|
||||
.preprocessor { color: $code_preprocessor; }
|
||||
.variable { color: $code_variable; }
|
||||
.value { color: $code_value; }
|
||||
.functions { color: $code_functions; }
|
||||
.constants { color: $code_constants; }
|
||||
.script {
|
||||
font-weight: bold;
|
||||
color: $code_script;
|
||||
background-color: $code_script_background;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1; }
|
||||
.color2, .color2 a { color: $code_color2; }
|
||||
.color3, .color3 a { color: $code_color3; }
|
||||
.color4, .color4 a { color: $code_color4; }
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
|
||||
$background: none;
|
||||
|
||||
$line_highlighted_background: #c3defe;
|
||||
$line_highlighted_number: #fff;
|
||||
|
||||
$gutter_text: #787878;
|
||||
$gutter_border_color: #d4d0c8;
|
||||
|
||||
$toolbar_collapsed_a: #3f5fbf;
|
||||
$toolbar_collapsed_a_hover: #aa7700;
|
||||
$toolbar_collapsed_background: #fff;
|
||||
|
||||
$toolbar_a: #a0a0a0;
|
||||
$toolbar_a_hover: red;
|
||||
|
||||
$code_plain: black;
|
||||
$code_comments: #3f5fbf;
|
||||
$code_string: #4fa33f;
|
||||
$code_keyword: #7f0055;
|
||||
$code_preprocessor: #006699;
|
||||
$code_variable: #aa7700;
|
||||
$code_value: #4fa33f;
|
||||
$code_functions: #b553ba;
|
||||
$code_constants: #0066cc;
|
||||
$code_color1: gray;
|
||||
$code_color2: #ca6436;
|
||||
$code_color3: red;
|
||||
$code_color4: $code_plain;
|
||||
|
||||
// Interface elements.
|
||||
html.light .syntaxhighlighter {
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain; }
|
||||
.comments, .comments a { color: $code_comments; }
|
||||
.string, .string a { color: $code_string; }
|
||||
.keyword { color: $code_keyword; }
|
||||
.preprocessor { color: $code_preprocessor; }
|
||||
.variable { color: $code_variable; }
|
||||
.value { color: $code_value; }
|
||||
.functions { color: $code_functions; }
|
||||
.constants { color: $code_constants; }
|
||||
.script {
|
||||
font-weight: bold;
|
||||
color: $code_script;
|
||||
background-color: $code_script_background;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1; }
|
||||
.color2, .color2 a { color: $code_color2; }
|
||||
.color3, .color3 a { color: $code_color3; }
|
||||
.color4, .color4 a { color: $code_color4; }
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
// Default Syntax Highlighter theme.
|
||||
//@import "shCore.scss";
|
||||
|
||||
@import "shThemeRDark.scss";
|
||||
|
||||
/*.syntaxhighlighter {
|
||||
.keyword { font-weight: bold !important; }
|
||||
}*/
|
||||
@ -1,120 +0,0 @@
|
||||
$background: white !default;
|
||||
|
||||
$line_alt1_background: $background !default;
|
||||
$line_alt2_background: $background !default;
|
||||
|
||||
$line_highlighted_background: #e0e0e0 !default;
|
||||
$line_highlighted_number: black !default;
|
||||
|
||||
$gutter_text: #afafaf !default;
|
||||
$gutter_border_color: #6ce26c !default;
|
||||
$gutter_border: 3px solid $gutter_border_color !default;
|
||||
|
||||
$toolbar_collapsed_a: #00f !default;
|
||||
$toolbar_collapsed_a_hover: #f00 !default;
|
||||
$toolbar_collapsed_background: #fff !default;
|
||||
$toolbar_collapsed_border: 1px solid $gutter_border_color !default;
|
||||
|
||||
$toolbar_a: #fff !default;
|
||||
$toolbar_a_hover: #000 !default;
|
||||
$toolbar_background: $gutter_border_color !default;
|
||||
$toolbar_border: none !default;
|
||||
|
||||
$code_plain: black !default;
|
||||
$code_comments: #008200 !default;
|
||||
$code_string: blue !default;
|
||||
$code_keyword: #006699 !default;
|
||||
$code_preprocessor: gray !default;
|
||||
$code_variable: #aa7700 !default;
|
||||
$code_value: #009900 !default;
|
||||
$code_functions: #ff1493 !default;
|
||||
$code_constants: #0066cc !default;
|
||||
$code_script: $code_keyword !default;
|
||||
$code_script_background: none !default;
|
||||
$code_color1: gray !default;
|
||||
$code_color2: #ff1493 !default;
|
||||
$code_color3: red !default;
|
||||
|
||||
$caption_color: $code_plain !default;
|
||||
|
||||
// Interface elements.
|
||||
.syntaxhighlighter {
|
||||
background-color: $background !important;
|
||||
|
||||
// Highlighed line number
|
||||
.line {
|
||||
&.alt1 { background-color: $line_alt1_background !important; }
|
||||
&.alt2 { background-color: $line_alt2_background !important; }
|
||||
|
||||
// Highlighed line
|
||||
&.highlighted {
|
||||
&.alt1, &.alt2 { background-color: $line_highlighted_background !important; }
|
||||
&.number { color: $line_highlighted_number !important; }
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
caption {
|
||||
color: $caption_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Add border to the lines
|
||||
.gutter {
|
||||
color: $gutter_text !important;
|
||||
.line {
|
||||
border-right: $gutter_border !important;
|
||||
|
||||
&.highlighted {
|
||||
background-color: $gutter_border_color !important;
|
||||
color: $background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.printing .line .content { border: none !important; }
|
||||
|
||||
&.collapsed {
|
||||
overflow: visible !important;
|
||||
|
||||
.toolbar {
|
||||
color: $toolbar_collapsed_a !important;
|
||||
background: $toolbar_collapsed_background !important;
|
||||
border: $toolbar_collapsed_border !important;
|
||||
|
||||
a {
|
||||
color: $toolbar_collapsed_a !important;
|
||||
&:hover { color: $toolbar_collapsed_a_hover !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
color: $toolbar_a !important;
|
||||
background: $toolbar_background !important;
|
||||
border: $toolbar_border !important;
|
||||
a {
|
||||
color: $toolbar_a !important;
|
||||
&:hover { color: $toolbar_a_hover !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain !important; }
|
||||
.comments, .comments a { color: $code_comments !important; }
|
||||
.string, .string a { color: $code_string !important; }
|
||||
.keyword { color: $code_keyword !important; }
|
||||
.preprocessor { color: $code_preprocessor !important; }
|
||||
.variable { color: $code_variable !important; }
|
||||
.value { color: $code_value !important; }
|
||||
.functions { color: $code_functions !important; }
|
||||
.constants { color: $code_constants !important; }
|
||||
.script {
|
||||
font-weight: bold !important;
|
||||
color: $code_script !important;
|
||||
background-color: $code_script_background !important;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1 !important; }
|
||||
.color2, .color2 a { color: $code_color2 !important; }
|
||||
.color3, .color3 a { color: $code_color3 !important; }
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
%h1 Demo: #{@item[:title]}
|
||||
#demo= example_html
|
||||
|
||||
= yield
|
||||
= yield if block_given?
|
||||
|
||||
#how
|
||||
%section#markup
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
%p.beta
|
||||
This module is fairly new and is currently in BETA (β).
|
||||
|
||||
= yield
|
||||
= yield if block_given?
|
||||
|
||||
%p
|
||||
This file can be imported using:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user