[Docs] Refactored stylesheets, improved sidebar navigation styles
This commit is contained in:
B Mathis
Chris Eppstein
parent
6bbbb94bfa
commit
568fb47d0b
@ -21,8 +21,6 @@
|
||||
position: relative
|
||||
+columns(6,12)
|
||||
+slideshow
|
||||
&#markup
|
||||
+alpha(12)
|
||||
&#styles
|
||||
+omega(12)
|
||||
.code
|
||||
|
||||
3
doc-src/content/stylesheets/_shared.sass
Normal file
3
doc-src/content/stylesheets/_shared.sass
Normal file
@ -0,0 +1,3 @@
|
||||
=gradient-bg(!color, !up=5, !down=!up)
|
||||
background-color: #{!color}
|
||||
+linear-gradient(color_stops(lighten(!color, !up), darken(!color,!down)))
|
||||
77
doc-src/content/stylesheets/_sidebar.sass
Normal file
77
doc-src/content/stylesheets/_sidebar.sass
Normal file
@ -0,0 +1,77 @@
|
||||
aside[role="sidebar"]
|
||||
padding-bottom: 1em
|
||||
+columns(3)
|
||||
+alpha
|
||||
+adjust-font-size-to(14px)
|
||||
color: #999999
|
||||
section, p
|
||||
+leader(1,14px)
|
||||
+trailer(1,14px)
|
||||
|
||||
#local-nav ul
|
||||
margin-top: 0em
|
||||
border: 0
|
||||
padding: 0
|
||||
margin: 0
|
||||
list-style: none
|
||||
li
|
||||
a
|
||||
display: block
|
||||
h2
|
||||
margin: 0
|
||||
text-align: left
|
||||
a
|
||||
+border-top-radius(3px)
|
||||
+text-shadow(#fff)
|
||||
padding: 5px 0
|
||||
font-size: 1.3em
|
||||
display: inline-block
|
||||
border-bottom: 0
|
||||
text-decoration: underline
|
||||
&.selected
|
||||
color: #222
|
||||
ul
|
||||
list-style: none
|
||||
margin: 0 0 1em 0
|
||||
padding: 0
|
||||
li
|
||||
list-style-image: none
|
||||
list-style-type: none
|
||||
margin-left: 0px
|
||||
$c: #eaeaea
|
||||
//mix(#e6e6e6, #005498, 50%)
|
||||
&:last-child a
|
||||
+border-bottom-radius(3px)
|
||||
&:first-child a
|
||||
+border-top-radius(3px)
|
||||
border-top-color: #eaeaea
|
||||
&:hover, &:focus, &.selected
|
||||
border-top-color: #{$c} !important
|
||||
a
|
||||
//color: #444
|
||||
border: 1px solid
|
||||
border-color: #fff transparent #e7e7e7
|
||||
padding: 3px 8px
|
||||
background: #f5f5f5
|
||||
&.selected
|
||||
font-weight: bold
|
||||
&:hover, &:focus, &.selected
|
||||
+border-radius
|
||||
+text-shadow(#{lighten($c, 15)}, 0, 1px)
|
||||
background: #{$c}
|
||||
+linear-gradient(color_stops(lighten($c, 1), $c))
|
||||
position: relative
|
||||
z-index: 2
|
||||
padding: 3px 12px 3px 10px
|
||||
margin: 0 -4px 0 -2px
|
||||
color: #{desaturate(darken(#005498, 14), 20)}
|
||||
border-color: #{lighten($c, 5)} #{$c} #{darken($c, 7)} #{$c}
|
||||
&:after
|
||||
color: #{darken($c, 22)} !important
|
||||
//+text-shadow(darken($c, 22), 0, -1px)
|
||||
&:after
|
||||
content: "\25B8"
|
||||
font-style: normal
|
||||
float: right
|
||||
color: #ddd
|
||||
font-weight: normal
|
||||
@ -1,25 +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 #333333;
|
||||
background-color: #cccccc; }
|
||||
td.code {
|
||||
padding: 6px 3px;
|
||||
max-width: 400px;
|
||||
pre {
|
||||
margin: 0;
|
||||
overflow: auto; } } }
|
||||
|
||||
@import "partials/syntax";
|
||||
@ -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 {
|
||||
@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";
|
||||
@ -1,2 +0,0 @@
|
||||
@import "syntax/coderay";
|
||||
@import "syntax/pygments";
|
||||
@ -1,211 +0,0 @@
|
||||
.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; } }
|
||||
@ -1,151 +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: 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; } }
|
||||
@ -1,675 +0,0 @@
|
||||
// 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%); } }
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
@import defaults
|
||||
@import slideshow
|
||||
@import shared
|
||||
@import compass/layout
|
||||
@import compass/utilities
|
||||
|
||||
@ -124,15 +125,6 @@ header[role="banner"]
|
||||
+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-height: 4em + $base-rhythm-unit
|
||||
+sticky-footer($footer-height, "#wrap", "#wrap-footer", "footer")
|
||||
@ -226,24 +218,6 @@ aside[role="sidebar"] + article
|
||||
+active-module(".core.utilities", "/docs/reference/compass/utilities/")
|
||||
+active-module(".core.helpers", "/docs/reference/compass/helpers/")
|
||||
|
||||
#local-nav
|
||||
+leader(1,14px)
|
||||
ul
|
||||
+no-style-list
|
||||
text-align: left
|
||||
h2
|
||||
+leader(1,14px)
|
||||
border-bottom: 1px solid #ccc
|
||||
margin-bottom: ($base_rhythm_unit*.5 - $px2em*1px) * (14/16)
|
||||
a:hover
|
||||
+text-shadow
|
||||
a.selected
|
||||
font-weight: bold
|
||||
a.selected:before
|
||||
content: "»"
|
||||
a.selected:after
|
||||
content: "«"
|
||||
|
||||
#code
|
||||
+full(12)
|
||||
+pie-clearfix
|
||||
@ -261,8 +235,6 @@ aside[role="sidebar"] + article
|
||||
position: relative
|
||||
+columns(6,12)
|
||||
+slideshow
|
||||
&#markup
|
||||
+alpha(12)
|
||||
&#styles
|
||||
+omega(12)
|
||||
.slides
|
||||
@ -289,8 +261,9 @@ aside[role="sidebar"] + article
|
||||
|
||||
/* @end
|
||||
|
||||
@import "reference"
|
||||
@import "examples"
|
||||
@import reference
|
||||
@import examples
|
||||
@import sidebar
|
||||
|
||||
/* @group OVERRIDES by page
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
%nav#local-nav
|
||||
%ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1})
|
||||
= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user