bourbon 2.0.0.rc1 → 2.1.0

data/app/assets/stylesheets/css3/_prefixer.scss

@@ -0,0 +1,12 @@
+@mixin prefixer ($property, $value,
+                 $webkit: true,
+                    $moz: true,
+                     $ms: false,
+                      $o: false,
+                   $spec: true) {
+  @if $webkit { -webkit-#{$property}: $value; }
+  @if $moz    {    -moz-#{$property}: $value; }
+  @if $ms     {     -ms-#{$property}: $value; }
+  @if $o      {      -o-#{$property}: $value; }
+  @if $spec   {         #{$property}: $value; }
+}

data/app/assets/stylesheets/css3/_transform.scss

@@ -1,19 +1,11 @@
 @mixin transform($property: none) {
 //  none | <transform-function>
-  -webkit-transform: $property;
-     -moz-transform: $property;
-      -ms-transform: $property;
-       -o-transform: $property;
-          transform: $property;
+  @include prefixer(transform, $property, webkit, moz, ms, o);
 }
 
 @mixin transform-origin($axes: 50%) {
 // x-axis - left | center | right  | length | %
 // y-axis - top  | center | bottom | length | %
 // z-axis -                          length
-  -webkit-transform-origin: $axes;
-     -moz-transform-origin: $axes;
-      -ms-transform-origin: $axes;
-       -o-transform-origin: $axes;
-          transform-origin: $axes;
+  @include prefixer(transform-origin, $axes, webkit, moz, ms, o);
 }

data/app/assets/stylesheets/css3/_transition.scss

@@ -12,11 +12,7 @@
     $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
                    $prop-6, $prop-7, $prop-8, $prop-9);
 
-  -webkit-transition: $full;
-     -moz-transition: $full;
-      -ms-transition: $full;
-       -o-transition: $full;
-          transition: $full;
+  @include prefixer(transition, $full, webkit, moz, ms, o);
 }
 
 
@@ -30,11 +26,11 @@
     $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
                    $prop-6, $prop-7, $prop-8, $prop-9);
 
-  -webkit-transition-property: $full;
-     -moz-transition-property: $full;
-      -ms-transition-property: $full;
-       -o-transition-property: $full;
-          transition-property: $full;
+   -webkit-transition-property: transition-property-names($full, 'webkit');
+      -moz-transition-property: transition-property-names($full, 'moz');
+       -ms-transition-property: transition-property-names($full, 'ms');
+        -o-transition-property: transition-property-names($full, 'o');
+           transition-property: transition-property-names($full, false);
 }
 
 @mixin transition-duration ($time-1: 0,
@@ -46,11 +42,7 @@
     $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
                    $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-transition-duration: $full;
-     -moz-transition-duration: $full;
-      -ms-transition-duration: $full;
-       -o-transition-duration: $full;
-          transition-duration: $full;
+  @include prefixer(transition-duration, $full, webkit, moz, ms, o);
 }
 
 @mixin transition-timing-function ($motion-1: ease,
@@ -63,11 +55,7 @@
                    $motion-6, $motion-7, $motion-8, $motion-9);
 
 // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-  -webkit-transition-timing-function: $full;
-     -moz-transition-timing-function: $full;
-      -ms-transition-timing-function: $full;
-       -o-transition-timing-function: $full;
-          transition-timing-function: $full;
+  @include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
 }
 
 @mixin transition-delay ($time-1: 0,
@@ -79,10 +67,6 @@
     $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
                    $time-6, $time-7, $time-8, $time-9);
 
-  -webkit-transition-delay: $full;
-     -moz-transition-delay: $full;
-      -ms-transition-delay: $full;
-       -o-transition-delay: $full;
-          transition-delay: $full;
+  @include prefixer(transition-transition-delay, $full, webkit, moz, ms, o);
 }
 

data/app/assets/stylesheets/css3/_user-select.scss

@@ -1,6 +1,3 @@
 @mixin user-select($arg: none) {
-  -webkit-user-select: $arg;
-     -moz-user-select: $arg;
-      -ms-user-select: $arg;
-          user-select: $arg;
+  @include prefixer(user-select, $arg, webkit, moz, ms);
 }

data/app/assets/stylesheets/functions/_transition-property-name.scss

@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}

data/doc/README.md

@@ -0,0 +1,36 @@
+------------------------------------------------------------------------------------------
+Bourbon README for getting the gh-pages server up and running
+------------------------------------------------------------------------------------------
+
+Run the server locally:
+    jekyll --server
+
+Watch the sass folder from root directory:
+    sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
+
+------------------------------------------------------------------------------------------
+
+To pull in the latest changes on gh-pages branch:
+    git pull --rebase origin gh-pages
+
+To pull in the latest Bourbon changes, you must fetch and merge master into gh-pages:
+    git fetch origin master && git merge master
+
+To update the bourbon files with the latest version; from the root directory:
+    bourbon update
+
+------------------------------------------------------------------------------------------
+
+For Code Highlighting within Jekyll:
+    gem install pygmentize
+
+    {% highlight scss %}
+      <code here>
+    {% endhighlight %}
+
+
+Jekyll Wiki:
+https://github.com/mojombo/jekyll/wiki
+
+Pygmentize:
+http://pygments.org/

data/index.html

@@ -0,0 +1,80 @@
+---
+title: Bourbon Sass Mixins Library
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>{{ page.title }}</title>
+    <link rel="stylesheet" href="stylesheets/style.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+  </head>
+  <body>
+    <div class="main-content">
+      {% include navigation.html %}
+
+      <div class="main-inner">
+        <section class="intro-wrapper">
+          <h1 class="logo">Bourbon &ndash; Sass Mixin Library</h1>
+          <h2 class="tagline">A simple and lightweight mixin library for Sass.</h2>
+
+          {% include intro.html %}
+        </section>
+
+        <section class="mixins">
+          <h1 id="mixins">Mixins</h1>
+          {% include animation.html %}
+          {% include appearance.html %}
+          {% include background-image.html %}
+          {% include background-size.html %}
+          {% include border-image.html %}
+          {% include border-radius.html %}
+          {% include box-shadow.html %}
+          {% include box-sizing.html %}
+          {% include columns.html %}
+          {% include flex-box.html %}
+          {% include inline-block.html %}
+          {% include linear-gradient.html %}
+          {% include radial-gradient.html %}
+          {% include transform.html %}
+          {% include transitions.html %}
+          {% include user-select.html %}
+        </section>
+
+        <section ckass="functions">
+          <h1 id="functions">Functions</h1>
+          {% include compact.html %}
+          {% include flex-grid.html %}
+          {% include golden-ratio.html %}
+          {% include grid-width.html %}
+          {% include linear-gradient-function.html %}
+          {% include modular-scale.html %}
+          {% include radial-gradient-function.html %}
+          {% include tint-shade.html %}
+        </section>
+
+        <section class="addons">
+          <h1 id="add-ons">Add-ons</h1>
+          {% include buttons.html %}
+          {% include clearfix.html %}
+          {% include font-family.html %}
+          {% include hide-text.html %}
+          {% include html5-input-types.html %}
+          {% include timing-functions.html %}
+        </section>
+
+        <section class="complete-list">
+          <h1 id="complete-list">Complete List</h1>
+          {% include complete-list.html %}
+        </section>
+
+        <section class="footer">
+          <h1 id="footer"></h1>
+          {% include footer.html %}
+        </section>
+
+      </div>
+    </div>
+  </body>
+</html>

data/lib/bourbon/sass_extensions/functions/compact.rb

@@ -4,8 +4,9 @@ module Bourbon::SassExtensions::Functions::Compact
   def compact(*args)
     sep = :comma
     if args.size == 1 && args.first.is_a?(Sass::Script::List)
-      args = args.first.value
-      sep = args.first.separator
+      list = args.first
+      args = list.value
+      sep = list.separator
     end
     Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
   end

data/lib/bourbon/version.rb

@@ -1,3 +1,3 @@
 module Bourbon
-  VERSION = "2.0.0.rc1"
+  VERSION = "2.1.0"
 end

data/readme.md

@@ -117,14 +117,14 @@ Bourbon aims to provide support for CSS3 properties that are not yet fully suppo
 
       border-radius
         @ border-radius(*args)
-        @ border-radius-top(*args)
-        @ border-radius-top-left(*args)
-        @ border-radius-top-right(*args)
-        @ border-radius-bottom(*args)
-        @ border-radius-bottom-left(*args)
-        @ border-radius-bottom-right(*args)
-        @ border-radius-left(*args)
-        @ border-radius-right(*args)
+        @ border-top-radius(*args)
+        @ border-top-left-radius(*args)
+        @ border-top-right-radius(*args)
+        @ border-bottom-radius(*args)
+        @ border-bottom-left-radius(*args)
+        @ border-bottom-right-radius(*args)
+        @ border-left-radius(*args)
+        @ border-right-radius(*args)
 
       @ box-shadow(*args)
       @ box-sizing(*args)

data/stylesheets/sass/_animation-keyframes.scss

@@ -0,0 +1,31 @@
+
+// scale animation
+@mixin scale {
+  0% {
+    @include transform(scale(1.0));
+  }
+  50% {
+    @include transform(scale(2.0));
+  }
+  100% {
+    @include transform(scale(1.0));
+  }
+}
+@-webkit-keyframes scale { @include scale; }
+   @-moz-keyframes scale { @include scale; }
+        @keyframes scale { @include scale; }
+
+@mixin slide {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 100px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@-webkit-keyframes slide { @include slide; }
+   @-moz-keyframes slide { @include slide; }
+        @keyframes slide { @include slide; }

data/stylesheets/sass/_base.scss

@@ -0,0 +1,304 @@
+html, body {
+  background-color: $background-color;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  width: 100%;
+}
+
+html {
+  padding: 0;
+}
+
+h1 {
+  font-weight: 300;
+  margin-top: 0;
+}
+
+h1, h2 {
+  font-size: golden-ratio(14px, 1) + 4px;
+}
+
+h2 {
+  font-weight: 300;
+  margin-bottom: 0.5em;
+  margin-top: 0;
+}
+
+p, div.highlight {
+  & + h2 {
+    margin-top: 2em;
+  }
+}
+
+h3 {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 0.5em;
+  margin-top: 2em;
+}
+
+h4, h5, h6 {
+  font-size: golden-ratio(13px, 0);
+  margin-top: 0;
+}
+
+p {
+  // margin-top: 0;
+  line-height: 1.5em;
+}
+
+a, a:link, a:active, a:visited {
+  color: hsl(212, 89%, 55%);
+  text-decoration: none;
+}
+
+a:hover {
+  color: hsl(212, 94%, 36%);
+}
+
+//************************************************************************//
+// Navigation
+//************************************************************************//
+nav.fixed-nav {
+  @extend .clearfix;
+  clear: left;
+  float: left;
+  min-height: 300px;
+  width: grid-width(2);
+
+  ul {
+    // border: 1px solid darken($base-border-color, 10%);
+    border-bottom: 0;
+    border-left: 0;
+    border-top: 0;
+    height: 100%;
+    margin: 0;
+    overflow-y: scroll;
+    padding: 0;
+    position: fixed;
+    width: inherit;
+
+    input[type="search"] {
+      margin-left: 20px;
+    }
+
+    li {
+      line-height: 180%;
+      list-style-type: none;
+      text-transform: capitalize;
+
+      &:first-child {
+        margin-top: 15px;
+      }
+
+      &.title:not(:first-child) {
+        margin-bottom: 5px;
+        margin-top: 15px;
+      }
+
+      &.title.complete-list h3 {
+        border-bottom: 0;
+        @include box-shadow(none);
+      }
+
+      a {
+        display: block;
+        padding: 0 20px;
+        @include transition;
+
+        h3 {
+          border-bottom: 1px solid darken($base-border-color, 10%);
+          @include box-shadow(0 1px 0 white);
+          color: hsl(0, 0%, 30%);
+          font-size: 12px;
+          font-weight: bold;
+          margin: 0;
+          text-shadow: 0 1px 0 white;
+          text-transform: uppercase;
+
+          &:hover {
+            color: hsl(0, 0%, 40%);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//************************************************************************//
+// Global styles
+//************************************************************************//
+div.main-content {
+  @extend .clearfix;
+  margin: 0 auto;
+  padding: 0px $gw-gutter;
+  width: grid-width(9);
+}
+
+div.main-inner {
+  background: white;
+  border: 1px solid darken($base-border-color, 10%);
+  border-bottom: 0;
+  border-top: 0;
+  @include box-sizing(border-box);
+  clear: right;
+  float: left;
+  padding: 35px 0px;
+  width: grid-width(7) + $gw-gutter;
+
+
+  h2.tagline {
+    padding: 0 28px;
+    margin: 20px 0 0;
+  }
+
+  // Top Level Section
+  //************************************************************************//
+  > section {
+    h1 {
+      background-color: hsl(43, 23%, 94%);
+      border: 1px solid hsl(0, 0%, 88%);
+      border-left: 0;
+      border-right: 0;
+      @include box-shadow(1px 0 0 $background-color, -1px 0 0 $background-color);
+      font-size: 27px;
+      font-weight: 500;
+      line-height: 100%;
+      margin: 30px 0 0;
+      margin-top: 40px;
+      padding: 15px 28px;
+      text-shadow: 0 1px 0 white;
+
+      &.logo {
+        background-color: transparent;
+        background-image: url(../images/bourbon-logo.png);
+        background-repeat: no-repeat;
+        border: 0;
+        @include box-shadow(none);
+        height: 58px;
+        margin-left: 24px;
+        margin-top: 0;
+        padding: 0;
+        text-indent: -9999px;
+      }
+    }
+  }
+
+  > section > section {
+    border-bottom: 1px solid $base-border-color;
+    padding: 30px 28px;
+    @include transition;
+
+    // View Source Link
+    //************************************************************************//
+    a.view-source {
+      color: hsl(43, 13%, 75%);
+      float: right;
+      font-size: $base-font-size;
+      margin-top: 5px;
+      padding: 2px 20px;
+      text-shadow: 0 1px 0 white;
+      text-transform: capitalize;
+      @include transition;
+      opacity: 0;
+
+      &:hover {
+        background-color: $background-color;
+        @include border-radius(20px);
+        color: hsl(43, 13%, 60%);
+      }
+    }
+
+    // Show link on hover
+    &:hover {
+      a.view-source {
+        opacity: 1;
+      }
+    }
+
+    // Intro Text
+    //************************************************************************//
+    &#intro {
+      border-bottom: none;
+      padding-bottom: 0px;
+      padding-top: 0;
+
+      & + h1 {
+        margin-top: 40px;
+      }
+
+      p a + a {
+        margin-left: 20px;
+      }
+
+      p:last-child {
+        margin: 20px 0 50px;
+      }
+    }
+
+    &:last-child {
+      border: 0;
+    }
+  }
+
+
+  // Target Styles
+  //************************************************************************//
+  > section > section {
+    &:target {
+      @include box-shadow(inset 4px 0 0px 0 hsl(14, 97%, 55%));
+      @include transition(all 0.3s);
+
+      h2 {
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+// Wrapper for any occasion
+div.wrapper {
+  margin-bottom: 20px;
+}
+
+// Code highlighting styling
+div.highlight {
+  background-color: transparent;
+  width: 100%;
+}
+
+pre {
+  background-color: $highlight-color;
+  @include border-radius(3px);
+  @include box-shadow(0 0 0 1px darken($highlight-color, 8%));
+  margin: 1em 0;
+  overflow: auto;
+  padding: 7px;
+  @include transition;
+  white-space: pre;
+  word-wrap: normal;
+
+  // render a nice scrollbar in overflowed pre area's
+  &::-webkit-scrollbar {
+    height: 7px;
+    -webkit-appearance: none;
+    width: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+      background-color: desaturate(darken($highlight-color, 10%), 5%);
+      border-radius: 4px;
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  }
+  &::-webkit-scrollbar-corner {
+  }
+}
+
+p code, ul code, ol code {
+  background-color: $background-color;
+  border: 1px solid $base-border-color;
+  color: hsl(0, 0%, 27%);
+  padding: 0 .2em;
+}