|
<!doctype html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> |
|
<meta content="The LivingStyleGuide Gem – http://livingstyleguide.org" name="generator"> |
|
<title>Living Style Guide</title> |
|
<script> |
|
// see: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html |
|
for(var e,l='article aside footer header nav section time picture'.split(' ');e=l.pop();document.createElement(e)); |
|
</script> |
|
<style> |
|
@import url(//fonts.googleapis.com/css?family=Asap:400,700); |
|
@font-face { |
|
font-family: "RideMyBikeBold"; |
|
src: url('/assets/ride_my_bike_pro_bold.eot'); |
|
src: url(font-path("ride_my_bike_pro_bold.eot?#iefix")) format("embedded-opentype"), url('/assets/ride_my_bike_pro_bold.woff') format("woff"), url('/assets/ride_my_bike_pro_bold.ttf') format("truetype"); |
|
font-weight: bold; |
|
font-style: normal; |
|
} |
|
|
|
@font-face { |
|
font-family: "RideMyBike"; |
|
src: url('/assets/ride_my_bike_pro_regular.eot'); |
|
src: url(font-path("ride_my_bike_pro_regular.eot?#iefix")) format("embedded-opentype"), url('/assets/ride_my_bike_pro_regular.woff') format("woff"), url('/assets/ride_my_bike_pro_regular.ttf') format("truetype"); |
|
font-weight: normal; |
|
font-style: normal; |
|
} |
|
|
|
/* line 25, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button, .m-action-button_large { |
|
outline: none; |
|
cursor: pointer; |
|
-webkit-border-radius: 40px 100%; |
|
-moz-border-radius: 40px / 100%; |
|
border-radius: 40px / 100%; |
|
*zoom: 1; |
|
display: block; |
|
border: 2px solid #fffdf8; |
|
background-color: rgba(80, 80, 80, 0.6); |
|
-webkit-transition: background-color 0.2s ease-in-out; |
|
-moz-transition: background-color 0.2s ease-in-out; |
|
-o-transition: background-color 0.2s ease-in-out; |
|
transition: background-color 0.2s ease-in-out; |
|
max-width: 280px; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
/* line 9, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button .m-action-button--icon, .m-action-button_large .m-action-button--icon { |
|
width: 40px; |
|
height: 40px; |
|
line-height: 36px; |
|
} |
|
/* line 13, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button .m-action-button--text, .m-action-button_large .m-action-button--text { |
|
height: 36px; |
|
padding-left: 28px; |
|
margin-left: 18px; |
|
line-height: 36px; |
|
} |
|
/* line 20, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button.as-2-line .m-action-button--text, .as-2-line.m-action-button_large .m-action-button--text { |
|
padding-top: 6px; |
|
padding-bottom: 6px; |
|
line-height: 12px; |
|
} |
|
/* line 38, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ |
|
.m-action-button:after, .m-action-button_large:after { |
|
content: ""; |
|
display: table; |
|
clear: both; |
|
} |
|
/* line 38, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button .m-action-button--icon, .m-action-button_large .m-action-button--icon { |
|
color: white; |
|
background-color: #ff9200; |
|
float: left; |
|
font-size: emCalc(20px); |
|
margin-top: -2px; |
|
margin-left: -2px; |
|
text-align: center; |
|
-webkit-border-radius: 100%; |
|
-moz-border-radius: 100%; |
|
-ms-border-radius: 100%; |
|
-o-border-radius: 100%; |
|
border-radius: 100%; |
|
position: absolute; |
|
border: 2px solid #fffdf8; |
|
padding-left: 2px; |
|
} |
|
/* line 52, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button .m-action-button--text, .m-action-button_large .m-action-button--text { |
|
float: left; |
|
color: #fffdf8; |
|
padding-right: 10px; |
|
text-transform: uppercase; |
|
letter-spacing: emCalc(1px); |
|
display: inline-block; |
|
} |
|
/* line 60, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button:hover, .m-action-button_large:hover { |
|
background-color: #ff9200; |
|
} |
|
/* line 62, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button:focus, .m-action-button_large:focus { |
|
outline: none; |
|
} |
|
/* line 67, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button.as-no-border, .as-no-border.m-action-button_large { |
|
border: none; |
|
} |
|
|
|
/* line 70, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large { |
|
max-width: none; |
|
-webkit-border-radius: 64px 100%; |
|
-moz-border-radius: 64px / 100%; |
|
border-radius: 64px / 100%; |
|
} |
|
/* line 9, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large .m-action-button--icon { |
|
width: 64px; |
|
height: 64px; |
|
line-height: 60px; |
|
} |
|
/* line 13, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large .m-action-button--text { |
|
height: 60px; |
|
padding-left: 40px; |
|
margin-left: 30px; |
|
line-height: 60px; |
|
} |
|
/* line 20, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large.as-2-line .m-action-button--text { |
|
padding-top: 10px; |
|
padding-bottom: 10px; |
|
line-height: 20px; |
|
} |
|
/* line 74, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large .m-action-button--icon { |
|
font-size: emCalc(26px); |
|
padding-left: 10px; |
|
} |
|
/* line 77, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large .m-action-button--icon.with-big-icon { |
|
padding-left: 0; |
|
} |
|
/* line 80, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large .m-action-button--text { |
|
font-size: emCalc(16px); |
|
} |
|
/* line 84, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
.m-action-button_large.as-2-line .m-action-button--text { |
|
font-size: emCalc(14px); |
|
} |
|
|
|
/* line 88, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
button.m-action-button, button.m-action-button_large, button.m-action-button_large { |
|
font-size: emCalc(14px); |
|
} |
|
/* line 90, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */ |
|
button.m-action-button .m-action-button--icon, button.m-action-button_large .m-action-button--icon, button.m-action-button_large .m-action-button--icon { |
|
margin-left: -4px; |
|
} |
|
|
|
/* line 1, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_layout.scss */ |
|
.livingstyleguide { |
|
background: #f7f7f7; |
|
color: #505050; |
|
display: block; |
|
} |
|
|
|
/* line 4, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--paragraph, |
|
.livingstyleguide--code-block, |
|
.livingstyleguide--unordered-list, |
|
.livingstyleguide--ordered-list { |
|
display: block; |
|
font-family: "Georgia", "Times New Roman", serif; |
|
font-size: 14px; |
|
font-weight: normal; |
|
line-height: 1.4; |
|
margin: 10px auto; |
|
width: 640px; |
|
-webkit-font-smoothing: antialiased; |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
|
|
/* line 17, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--unordered-list-item, |
|
.livingstyleguide--ordered-list-item { |
|
display: block; |
|
list-style: disc; |
|
margin: 5px 0 5px 20px; |
|
} |
|
|
|
/* line 26, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--page-title, |
|
.livingstyleguide--headline, |
|
.livingstyleguide--sub-headline, |
|
.livingstyleguide--sub-sub-headline { |
|
display: block; |
|
font-family: "Georgia", "Times New Roman", serif; |
|
font-size: 22px; |
|
font-weight: bold; |
|
line-height: 1.1; |
|
margin: 30px auto 10px; |
|
width: 640px; |
|
-webkit-font-smoothing: antialiased; |
|
} |
|
|
|
/* line 37, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--page-title { |
|
display: block; |
|
font-size: 30px; |
|
} |
|
|
|
/* line 42, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--sub-headline { |
|
display: block; |
|
font-size: 16px; |
|
} |
|
|
|
/* line 47, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--sub-sub-headline { |
|
display: block; |
|
font-size: 14px; |
|
} |
|
|
|
/* line 52, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--example, .livingstyleguide--font-example { |
|
background: white; |
|
display: block; |
|
margin: 10px auto 0; |
|
overflow: hidden; |
|
padding: 10px; |
|
position: relative; |
|
width: 640px; |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
-moz-border-radius-topleft: 0; |
|
-webkit-border-top-left-radius: 0; |
|
border-top-left-radius: 0; |
|
-moz-border-radius-topright: 0; |
|
-webkit-border-top-right-radius: 0; |
|
border-top-right-radius: 0; |
|
} |
|
/* line 63, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--layout-example .livingstyleguide--example, .livingstyleguide--layout-example .livingstyleguide--font-example { |
|
margin: 0 auto; |
|
width: 100%; |
|
-webkit-border-radius: 0; |
|
-moz-border-radius: 0; |
|
-ms-border-radius: 0; |
|
-o-border-radius: 0; |
|
border-radius: 0; |
|
} |
|
|
|
/* line 70, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */ |
|
.livingstyleguide--layout-example { |
|
display: block; |
|
height: auto; |
|
min-height: auto; |
|
padding: 10px; |
|
} |
|
|
|
/* line 2, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span, |
|
.livingstyleguide--code-block { |
|
background: #505050; |
|
color: white; |
|
display: inline; |
|
font-family: Courier, "Courier New", monospace; |
|
font-size: 12px; |
|
font-weight: normal; |
|
overflow: scroll; |
|
padding: 0 3px; |
|
-webkit-font-smoothing: subpixel-antialiased; |
|
-webkit-border-radius: 0; |
|
-moz-border-radius: 0; |
|
-ms-border-radius: 0; |
|
-o-border-radius: 0; |
|
border-radius: 0; |
|
} |
|
/* line 14, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span kbd, |
|
.livingstyleguide--code-block kbd { |
|
display: block; |
|
font-weight: bold; |
|
} |
|
/* line 18, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span kbd:before, |
|
.livingstyleguide--code-block kbd:before { |
|
content: "> "; |
|
} |
|
/* line 23, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span em, |
|
.livingstyleguide--code-block em { |
|
color: white; |
|
display: inline; |
|
font-style: normal; |
|
font-weight: bold; |
|
text-decoration: underline; |
|
vertical-align: baseline; |
|
} |
|
/* line 32, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span b, |
|
.livingstyleguide--code-block b { |
|
color: white; |
|
display: inline; |
|
font-weight: bold; |
|
vertical-align: baseline; |
|
} |
|
/* line 39, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span i, |
|
.livingstyleguide--code-block i { |
|
color: white; |
|
display: inline; |
|
vertical-align: baseline; |
|
} |
|
/* line 45, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span q, |
|
.livingstyleguide--code-block q { |
|
color: white; |
|
display: inline; |
|
vertical-align: baseline; |
|
} |
|
/* line 51, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span q:before, .livingstyleguide--code-span q:after, |
|
.livingstyleguide--code-block q:before, |
|
.livingstyleguide--code-block q:after { |
|
content: ""; |
|
} |
|
/* line 56, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-span var, |
|
.livingstyleguide--code-block var { |
|
display: inline; |
|
text-decoration: underline; |
|
vertical-align: baseline; |
|
} |
|
|
|
/* line 63, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-block { |
|
display: none; |
|
line-height: 1.5; |
|
padding: 3px 6px; |
|
width: 640px; |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
/* line 70, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.show-code .livingstyleguide--code-block { |
|
display: block; |
|
} |
|
|
|
/* line 75, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--example + .livingstyleguide--code-block, .livingstyleguide--font-example + .livingstyleguide--code-block { |
|
margin-top: 0; |
|
-moz-border-radius-topleft: 0; |
|
-webkit-border-top-left-radius: 0; |
|
border-top-left-radius: 0; |
|
-moz-border-radius-topright: 0; |
|
-webkit-border-top-right-radius: 0; |
|
border-top-right-radius: 0; |
|
} |
|
|
|
/* line 80, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--layout-example + .livingstyleguide--code-block { |
|
background: #505050; |
|
margin: 0 0 10px; |
|
padding: 10px 0; |
|
width: 100%; |
|
-webkit-border-radius: 0; |
|
-moz-border-radius: 0; |
|
-ms-border-radius: 0; |
|
-o-border-radius: 0; |
|
border-radius: 0; |
|
} |
|
/* line 87, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--layout-example + .livingstyleguide--code-block .livingstyleguide--code { |
|
display: block; |
|
margin: auto; |
|
width: 640px; |
|
} |
|
|
|
/* line 98, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-highlight, .livingstyleguide--code-highlight-block { |
|
background-color: #f6ffa3; |
|
display: inline; |
|
vertical-align: baseline; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
-ms-border-radius: 2px; |
|
-o-border-radius: 2px; |
|
border-radius: 2px; |
|
} |
|
|
|
/* line 105, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */ |
|
.livingstyleguide--code-highlight-block { |
|
display: block; |
|
} |
|
|
|
/* line 44, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_color-swatches.scss */ |
|
.livingstyleguide--color-swatches { |
|
display: block; |
|
margin: 10px auto -10px auto; |
|
padding-left: 10px; |
|
width: 660px; |
|
overflow: hidden; |
|
*zoom: 1; |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
|
|
</style> |
|
<script type="text/javascript"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
</script></head> |
|
|
|
<body class="livingstyleguide"> |
|
<h2 class="livingstyleguide--headline" id="colors">Colors</h2> |
|
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p> |
|
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p> |
|
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p> |
|
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p> |
|
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Action Button</p> |
|
<p class="livingstyleguide--paragraph">Button style usually used for call to actions::</p> |
|
<div class="livingstyleguide--example"> |
|
<button type="button" class="m-action_button">Action button</button> |
|
<a class="m-action_button">Action button</a> |
|
~~~# Action Button |
|
|
|
Button style usually used for call to actions:: |
|
|
|
~~~ example |
|
<button type="button" class="m-action_button">Action button</button> |
|
<a class="m-action_button">Action button</a> |
|
~~~# Action Button |
|
|
|
Button style usually used for call to actions:: |
|
|
|
~~~ example |
|
<button type="button" class="m-action_button">Action button</button> |
|
<a class="m-action_button">Action button</a> |
|
|
|
</div> |
|
<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><b><<em>button</em></b> <b>type</b>="button" <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>></b>Action button<b></<em>button</em>></b> |
|
<b><<em>a</em></b> <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>></b>Action button<b></<em>a</em>></b> |
|
~~~# Action Button |
|
|
|
Button style usually used for call to actions:: |
|
|
|
~~~ example |
|
<b><<em>button</em></b> <b>type</b>="button" <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>></b>Action button<b></<em>button</em>></b> |
|
<b><<em>a</em></b> <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>></b>Action button<b></<em>a</em>></b> |
|
~~~# Action Button |
|
|
|
Button style usually used for call to actions:: |
|
|
|
~~~ example |
|
<b><<em>button</em></b> <b>type</b>="button" <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>></b>Action button<b></<em>button</em>></b> |
|
<b><<em>a</em></b> <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>></b>Action button<b></<em>a</em>></b></code></pre> |
|
</body> |
|
|
|
</html> |
When I open
http://myproject.dev/assets/styleguide.html
in my browser I get the error above.