app/assets/stylesheets/styleguide.sass
// # Templates: Styleguide CSS
// This is the CSS stylesheet for the styleguide pages.
$pad: 50px
$checkerboard: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII="
$dark-checkerboard: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg=="
$mono: 'Menlo', 'Monaco', 'Lucida Console', monospace
$sans: 'Helvetica Neue', sans-serif
$bluish: #f0f7fb
html, body
margin: 0
padding: 0
@mixin code
background: #eee
padding: 4px 4px
border-radius: 2px
margin: 0 2px
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
.sg-badge
position: absolute
z-index: 1
right: 0
bottom: 0
padding: 5px 10px
background: #eee
color: #888
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7)
border-top-left-radius: 3px
border-top-right-radius: 3px
border-left: solid 1px #ddd
border-right: solid 1px #ddd
border-top: solid 1px #ddd
font-size: 9pt
font-family: $sans
body
padding: $pad !important
html, body
overflow: inherit !important
// ### Layout
.sg-body
padding-bottom: 20px
body .sg-toc
font-family: $sans
font-size: 10pt
width: 180px
position: fixed
padding: ($pad - 10px) 20px $pad $pad
top: 10px
left: 0
bottom: 0
z-index: 10
overflow-y: auto
&::-webkit-scrollbar
width: 10px
height: 10px
&::-webkit-scrollbar-thumb
background: rgba(0, 0, 0, 0.0)
border-radius: 5px
&:hover::-webkit-scrollbar-thumb
background: rgba(0, 0, 0, 0.2)
// ----------------------------------------------------------------------------
// ### Full layout
body.sg-full
.sg-toc
display: none
.sg-body
margin-left: 0
margin-right: 0
// Sidebar toggle button
.sg-toggle-sidebar
margin: 0
padding: 0
border: 0
background: rgba(black, 0.0)
position: fixed
left: 0
top: 0
bottom: 0
z-index: 11
line-height: 100%
width: 20px
cursor: pointer
color: #aaa
text-shadow: 0 1px 0 rgba(white, 0.8)
font-size: 8pt
font-family: $sans
text-align: center
&:before
content: '\25c0'
display: none
&:hover
background: rgba(black, 0.1)
border-right: solid 1px rgba(black, 0.03)
&:before
display: block
// ----------------------------------------------------------------------------
// ### Contents
.sg-toc
h1
font-size: 18pt
color: #888
font-weight: 200
line-height: 1.2
margin-bottom: 0px
padding-bottom: 30px
small, strong
display: block
text-align: right
small
font-size: 1em
strong
font-weight: bold
color: #222
ul, li
list-style-type: none
margin: 0
padding: 0
li a
border-top: solid 1px #eee
a
display: block
padding: 7px 0
height: 24px
line-height: 24px
a:visited, a
font-weight: normal
color: #777
a:after
content: ''
display: table
clear: both
a:hover
color: #36c
a.active
font-weight: bold
color: #222
.sg-number
float: left
a .sg-number:after
content: '\2192'
margin-left: 10px
color: #ddd
.sg-name
float: right
text-align: right
// ----------------------------------------------------------------------------
// Layout
.sg-body .sg-example
margin-bottom: $pad
// ### An example block
.sg-example
margin-left: 60px
position: relative
// View code button
.sg-button
position: absolute
right: 10px
bottom: 10px
z-index: 10
// Filename badge
.sg-filename
@extend .sg-badge
display: none
&:hover .sg-filename
display: block
// Description
.sg-description
line-height: 1.5
font-family: $sans
position: relative
code
@include code
> h3 a, > h3 a:visited
background: #222
color: #ddd
text-align: center
font-weight: 200
font-size: 11pt
font-family: $sans
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05)
display: block
width: 50px
height: 50px
line-height: 50px
float: left
margin-left: -70px
border-radius: 25px
> h3 a:hover
background: #444
.sg-description
padding: 5px 0 25px 0
font-size: 10pt
color: #444
.sg-description
p, ul
margin-top: 5px
h1, h2, h3, h4, h5, h6
color: #222
margin: 0
padding: 0
font-weight: bold
font-size: 12pt
code
font-size: 0.9em
color: #8080b0
font-weight: normal
margin-left: 7px
padding: 0
background: transparent
box-shadow: none
font-family: $mono
&:before
content: '\203a'
margin-right: 10px
ul.sg-modifiers
&
margin: 20px 0 0 25px
padding: 0
list-style-type: none
li
margin: 5px 0
padding: 0
list-style-type: disc
li strong
@include code
padding: 1px 5px
font-weight: bold
.sg-html
&
display: none
&.sg-expanded
display: block
border: solid 1px #ccc
border-top: 0
position: relative
background: $bluish
pre
padding: 20px !important
line-height: 1.5
border: 0 !important
color: #30305a
text-shadow: 0 1px 0 rgba(white, 0.6)
font-size: 8pt
font-family: $mono
overflow-y: scroll
.sg-canvases
border: solid 4px #f0f0f0
border-radius: 2px
// ## Canvas
.sg-canvas
&
overflow: hidden
overflow-x: auto
border: solid 1px #ccc
position: relative
z-index: 0
// Collapse
& + .sg-canvas
margin-top: -1px
&::-webkit-scrollbar
width: 10px
height: 10px
&::-webkit-scrollbar-thumb
background: rgba(0, 0, 0, 0.05)
border-radius: 5px
border: solid 3px #f4f4f4
&:hover::-webkit-scrollbar-thumb
background: rgba(0, 0, 0, 0.3)
& > div
padding: 25px
zoom: 1
& > div:after
content: ''
clear: both
display: table
// Reset the inside elements of the canvas.
& > div > *
margin: 0 auto !important
float: none !important
position: relative !important
bottom: inherit
right: inherit
left: inherit
top: inherit
&.align-center > div
text-align: center
&.align-left > div
text-align: left
&.align-right > div
text-align: right
// Light
&.bg-clear
background: transparent
&.bg-light
background: url($checkerboard)
&.bg-white
background: #fff
border: solid 10px #ddd
&.bg-black
background: #000
&.bg-dark
background: url($dark-checkerboard)
// Canvas modifier
& > .sg-modifier-name
@extend .sg-badge
bottom: auto
top: 0
border-bottom: solid 1px #ddd
border-top: 0
border-right: 0
border-radius: 0
border-bottom-left-radius: 3px
font-weight: bold
color: #222
padding: 3px 15px
z-index: 999999
// ----------------------------------------------------------------------------
// Scroll
.sg-html pre
&::-webkit-scrollbar
width: 15px
height: 15px
&::-webkit-scrollbar-thumb
background: rgba(0, 0, 0, 0.1)
border-radius: 8px
border: solid 3px $bluish
// ### Type specimens
.sg-specimen
margin: 0 auto
width: 600px
padding: 40px
background: white
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1)
color: #333
.sg-drop
font-size: 4em
display: block
float: right
margin: -40px 0px 30px 30px
background: #f0f0f0
padding: 20px
h3
font-size: 1.8em
white-space: wrap
p
margin-top: 0.9em
p.sg-small
color: #aaa
text-transform: uppercase
padding-bottom: 0.5em
margin-bottom: 2.1em
border-bottom: solid 1px #eee
p strong
font-weight: bold
display: block
font-size: 1.2em
// ### Color swatches
.sg-canvas .sg-swatch
&
background: white
font-size: 8pt
line-height: 1.3
padding: 3px
box-shadow: 0 0 3px rgba(black, 0.2)
position: relative
display: inline-block
vertical-align: top
margin: 10px !important
text-align: left
strong
display: block
color: #333
font-size: 1.1em
font-weight: bold
small
display: block
border-top: solid 1px rgba(black, 0.05)
margin-top: 5px
padding-top: 5px
.sg-text
font-weight: bold
padding: 2px 5px
background: white
position: absolute
bottom: 0px
right: 0px
border-top-left-radius: 2px
.sg-background
width: 100px
height: 100px
padding: 10px
box-sizing: border-box
&
color: rgba(black, 0.5)
text-shadow: 0 1px 0 rgba(white, 0.2)
&.sg-dark
.sg-background
color: rgba(#fff, 0.5)
text-shadow: 0 1px 0 rgba(black, 0.2)
strong
color: #fff
small
border-top-color: rgba(white, 0.05)
&:hover
.sg-text
color: #222 !important
.sg-page-title
font-size: 28pt
line-height: 36pt
font-weight: bold
color: #999
margin: 0 0 50px -10px
padding: 13px 0 20px 0
border-bottom: solid 1px #eee
font-family: $sans
font-weight: 200
overflow: hidden
// Number
strong
color: #ccc
display: inline-block
width: 60px
margin-left: -60px
text-align: right
float: right
font-weight: 700
// ----------------------------------------------------------------------------
.sg-button
margin: 0
padding: 0
border: 0
display: inline-block
background: #f0fafa
border-radius: 4px
box-shadow: inset 0 0 0 1px rgba(black, 0.1), inset 0 2px 0 rgba(white, 0.2)
height: 24px
line-height: 24px
padding: 0 15px
font-size: 9pt
font-weight: bold
font-family: $sans
color: #555
text-shadow: 0 1px 0 rgba(white, 0.9)
cursor: pointer
&:hover
background: #f0fafa
color: #509090
// Glyph
&:after
content: '\25bc'
margin-left: 6px
font-size: 0.6em
color: #a0afaf
&.sg-expanded
background: #f0fafa * 0.95
&.sg-expanded:after
content: '\25b2'
// Clickity
&:active
background: #509090
color: #eee
text-shadow: 0 1px 0 rgba(black, 0.3)
box-shadow: inset 0 0 0 1px rgba(black, 0.1)
.sg-intro
margin-bottom: 40px
padding: 0 60px
ol
li
p
code
border-radius: 5px
background: #ccc
padding: 0 5px
.sg-intro-title
font-weight: bold
font-size: 20px
margin-bottom: 10px
.sg-figure
display: block
background: #fff
margin: 20px auto
text-align: center
border-radius: 3px
line-height: 0
padding: 10px
img
display: inline-block