diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss index 1f5a5b917..0c7744d93 100644 --- a/app/assets/stylesheets/_bourbon.scss +++ b/app/assets/stylesheets/_bourbon.scss @@ -7,6 +7,7 @@ // CSS3 Mixins @import "css3/animation"; @import "css3/background-image"; +@import "css3/border-image"; @import "css3/border-radius"; @import "css3/box-shadow"; @import "css3/box-sizing"; diff --git a/app/assets/stylesheets/css3/_border-image.scss b/app/assets/stylesheets/css3/_border-image.scss new file mode 100644 index 000000000..037398042 --- /dev/null +++ b/app/assets/stylesheets/css3/_border-image.scss @@ -0,0 +1,7 @@ +@mixin border-image ($image) { + -webkit-border-image: $image; + -moz-border-image: $image; + -ms-border-image: $image; + -o-border-image: $image; + border-image: $image; +} diff --git a/lib/bourbon/version.rb b/lib/bourbon/version.rb index fa631c61c..571385e1e 100644 --- a/lib/bourbon/version.rb +++ b/lib/bourbon/version.rb @@ -1,3 +1,3 @@ module Bourbon - VERSION = "1.0.4" + VERSION = "1.1.0" end diff --git a/readme.md b/readme.md index 8af735602..91a1b4e84 100644 --- a/readme.md +++ b/readme.md @@ -113,6 +113,13 @@ The background-image mixin is helpful for chaining multiple comma delimited back @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)) ); +### Border-image + +border-image supports short-hand notation. + + @include border-image(url(border.png) 27 round); + + ### Border Radius border-radius will also take short-hand notation. @@ -367,6 +374,7 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3 @ animation-timing-function(*args) @ background-image(*args) + @ border-image(*args) @ border-radius(*args) @ box-shadow(*args) @ box-sizing(*args)