Skip to content
This repository has been archived by the owner on Sep 13, 2024. It is now read-only.

Commit

Permalink
Updated to the latest release of bourbon
Browse files Browse the repository at this point in the history
  • Loading branch information
Phil LaPier committed Mar 16, 2012
1 parent eade593 commit 1dcb182
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 244 deletions.
12 changes: 1 addition & 11 deletions _site/index.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -586,17 +586,7 @@ <h3>CSS Output</h3>


</section> </section>


<section id="hide-text"> Included file 'hide-text.html' not found in _includes directory
<h2>Hide Text<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_hide-text.scss">View Source</a></h2>
<p>Hide-text is an image replacement mixin. It is based off the <a href="https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7">HTML5-Boilerplate image-replacement</a>.</p>
<p>This image replacement technique is an alternative to the text-indent technique, which has <a href="http://nicolasgallagher.com/another-css-image-replacement-technique/">performance and other benefits</a>.</p>

<div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> hide-text</span><span class="p">;</span>
</code></pre>
</div>

</section>

<section id="html5-input-types"> <section id="html5-input-types">
<h2>HTML5 Input Types <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a></h2> <h2>HTML5 Input Types <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a></h2>
<p>This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p> <p>This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p>
Expand Down
147 changes: 31 additions & 116 deletions _site/stylesheets/style.css
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -457,26 +457,11 @@ nav.fixed-nav {
nav.fixed-nav ul li a { nav.fixed-nav ul li a {
display: block; display: block;
padding: 0 20px; padding: 0 20px;
-webkit-transition-property: all; -webkit-transition: all 0.15s ease-out 0;
-moz-transition-property: all; -moz-transition: all 0.15s ease-out 0;
-ms-transition-property: all; -ms-transition: all 0.15s ease-out 0;
-o-transition-property: all; -o-transition: all 0.15s ease-out 0;
transition-property: all; transition: all 0.15s ease-out 0; }
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
nav.fixed-nav ul li a h3 { nav.fixed-nav ul li a h3 {
border-bottom: 1px solid #d8d1c0; border-bottom: 1px solid #d8d1c0;
-webkit-box-shadow: 0 1px 0 white; -webkit-box-shadow: 0 1px 0 white;
Expand Down Expand Up @@ -542,26 +527,11 @@ div.main-inner {
div.main-inner > section > section { div.main-inner > section > section {
border-bottom: 1px solid #ebe8e0; border-bottom: 1px solid #ebe8e0;
padding: 30px 28px; padding: 30px 28px;
-webkit-transition-property: all; -webkit-transition: all 0.15s ease-out 0;
-moz-transition-property: all; -moz-transition: all 0.15s ease-out 0;
-ms-transition-property: all; -ms-transition: all 0.15s ease-out 0;
-o-transition-property: all; -o-transition: all 0.15s ease-out 0;
transition-property: all; transition: all 0.15s ease-out 0; }
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
div.main-inner > section > section a.view-source { div.main-inner > section > section a.view-source {
color: #c8c3b7; color: #c8c3b7;
float: right; float: right;
Expand All @@ -570,33 +540,16 @@ div.main-inner {
padding: 2px 20px; padding: 2px 20px;
text-shadow: 0 1px 0 white; text-shadow: 0 1px 0 white;
text-transform: capitalize; text-transform: capitalize;
-webkit-transition-property: all; -webkit-transition: all 0.15s ease-out 0;
-moz-transition-property: all; -moz-transition: all 0.15s ease-out 0;
-ms-transition-property: all; -ms-transition: all 0.15s ease-out 0;
-o-transition-property: all; -o-transition: all 0.15s ease-out 0;
transition-property: all; transition: all 0.15s ease-out 0;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
opacity: 0; } opacity: 0; }
div.main-inner > section > section a.view-source:hover { div.main-inner > section > section a.view-source:hover {
background-color: #f3f1ec; background-color: #f3f1ec;
-webkit-border-radius: 20px; -webkit-border-radius: 20px;
-moz-border-radius: 20px; -moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px; border-radius: 20px;
color: #a69f8c; } color: #a69f8c; }
div.main-inner > section > section:hover a.view-source { div.main-inner > section > section:hover a.view-source {
Expand All @@ -617,26 +570,11 @@ div.main-inner {
-webkit-box-shadow: inset 4px 0 0px 0 #fc511d; -webkit-box-shadow: inset 4px 0 0px 0 #fc511d;
-moz-box-shadow: inset 4px 0 0px 0 #fc511d; -moz-box-shadow: inset 4px 0 0px 0 #fc511d;
box-shadow: inset 4px 0 0px 0 #fc511d; box-shadow: inset 4px 0 0px 0 #fc511d;
-webkit-transition-property: all; -webkit-transition: all 0.3s;
-moz-transition-property: all; -moz-transition: all 0.3s;
-ms-transition-property: all; -ms-transition: all 0.3s;
-o-transition-property: all; -o-transition: all 0.3s;
transition-property: all; transition: all 0.3s; }
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
div.main-inner > section > section:target h2 { div.main-inner > section > section:target h2 {
font-weight: 500; } font-weight: 500; }


Expand All @@ -651,35 +589,18 @@ pre {
background-color: #fef9ec; background-color: #fef9ec;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 0 0 1px #fbedc6; -webkit-box-shadow: 0 0 0 1px #fbedc6;
-moz-box-shadow: 0 0 0 1px #fbedc6; -moz-box-shadow: 0 0 0 1px #fbedc6;
box-shadow: 0 0 0 1px #fbedc6; box-shadow: 0 0 0 1px #fbedc6;
margin: 1em 0; margin: 1em 0;
overflow: auto; overflow: auto;
padding: 7px; padding: 7px;
-webkit-transition-property: all; -webkit-transition: all 0.15s ease-out 0;
-moz-transition-property: all; -moz-transition: all 0.15s ease-out 0;
-ms-transition-property: all; -ms-transition: all 0.15s ease-out 0;
-o-transition-property: all; -o-transition: all 0.15s ease-out 0;
transition-property: all; transition: all 0.15s ease-out 0;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
white-space: pre; white-space: pre;
word-wrap: normal; } word-wrap: normal; }
pre::-webkit-scrollbar { pre::-webkit-scrollbar {
Expand Down Expand Up @@ -907,8 +828,6 @@ p code, ul code, ol code {
div.box { div.box {
-webkit-border-radius: 40px; -webkit-border-radius: 40px;
-moz-border-radius: 40px; -moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px; border-radius: 40px;
border: 1px solid #2aa4b2; border: 1px solid #2aa4b2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
Expand Down Expand Up @@ -993,7 +912,7 @@ section#linear-gradient-function section.demo {
height: 40px; } height: 40px; }


section#radial-gradient section.demo, section#radial-gradient-function section.demo { section#radial-gradient section.demo, section#radial-gradient-function section.demo {
background-color: #8fdce5; background-color: false;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, #8fdce5), color-stop(100%, #3dc3d1)); background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, #8fdce5), color-stop(100%, #3dc3d1));
background-image: -webkit-radial-gradient(50% 50%, circle cover, #8fdce5, #3dc3d1); background-image: -webkit-radial-gradient(50% 50%, circle cover, #8fdce5, #3dc3d1);
background-image: -moz-radial-gradient(50% 50%, circle cover, #8fdce5, #3dc3d1); background-image: -moz-radial-gradient(50% 50%, circle cover, #8fdce5, #3dc3d1);
Expand All @@ -1006,14 +925,12 @@ section#buttons section.demo button.example-1 {
border: 1px solid #076fe4; border: 1px solid #076fe4;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #8ebcf1; -webkit-box-shadow: inset 0 1px 0 0 #8ebcf1;
-moz-box-shadow: inset 0 1px 0 0 #8ebcf1; -moz-box-shadow: inset 0 1px 0 0 #8ebcf1;
box-shadow: inset 0 1px 0 0 #8ebcf1; box-shadow: inset 0 1px 0 0 #8ebcf1;
color: white; color: white;
display: inline; display: inline-block;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
background-color: #4294f0; background-color: #4294f0;
Expand All @@ -1024,6 +941,7 @@ section#buttons section.demo button.example-1 {
background-image: -o-linear-gradient(top, #4294f0, #0776f3); background-image: -o-linear-gradient(top, #4294f0, #0776f3);
background-image: linear-gradient(top, #4294f0, #0776f3); background-image: linear-gradient(top, #4294f0, #0776f3);
padding: 6px 18px 7px; padding: 6px 18px 7px;
text-decoration: none;
text-shadow: 0 1px 0 #0065d6; text-shadow: 0 1px 0 #0065d6;
-webkit-background-clip: padding-box; } -webkit-background-clip: padding-box; }
section#buttons section.demo button.example-1:hover { section#buttons section.demo button.example-1:hover {
Expand All @@ -1048,14 +966,12 @@ section#buttons section.demo button.example-2 {
border-color: #3371b2 #2457a3 #164297; border-color: #3371b2 #2457a3 #164297;
-webkit-border-radius: 16px; -webkit-border-radius: 16px;
-moz-border-radius: 16px; -moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
border-radius: 16px; border-radius: 16px;
-webkit-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3; -webkit-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
-moz-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3; -moz-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3; box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
color: white; color: white;
display: inline; display: inline-block;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
Expand All @@ -1068,6 +984,7 @@ section#buttons section.demo button.example-2 {
background-image: linear-gradient(top, #4294f0, #0156fe); background-image: linear-gradient(top, #4294f0, #0156fe);
padding: 3px 16px 5px; padding: 3px 16px 5px;
text-align: center; text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #2762bf; text-shadow: 0 -1px 1px #2762bf;
-webkit-background-clip: padding-box; } -webkit-background-clip: padding-box; }
section#buttons section.demo button.example-2:hover { section#buttons section.demo button.example-2:hover {
Expand Down Expand Up @@ -1099,14 +1016,12 @@ section#buttons section.demo button.example-3 {
border-bottom: 1px solid #810000; border-bottom: 1px solid #810000;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #ff1d0c; -webkit-box-shadow: inset 0 1px 0 0 #ff1d0c;
-moz-box-shadow: inset 0 1px 0 0 #ff1d0c; -moz-box-shadow: inset 0 1px 0 0 #ff1d0c;
box-shadow: inset 0 1px 0 0 #ff1d0c; box-shadow: inset 0 1px 0 0 #ff1d0c;
color: white; color: white;
display: inline; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
background-color: red; background-color: red;
Expand Down
2 changes: 1 addition & 1 deletion stylesheets/sass/_base.scss
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ div.main-inner {
> section > section { > section > section {
&:target { &:target {
@include box-shadow(inset 4px 0 0px 0 hsl(14, 97%, 55%)); @include box-shadow(inset 4px 0 0px 0 hsl(14, 97%, 55%));
@include transition(all, 0.3s); @include transition(all 0.3s);


h2 { h2 {
font-weight: 500; font-weight: 500;
Expand Down
Loading

0 comments on commit 1dcb182

Please sign in to comment.