diff --git a/.gitignore b/.gitignore
index efd5dba54..faf4bee65 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,8 @@
target
.classpath
-
.settings
-
.project
-
.idea
-
*.iml
+.sass-cache
+
diff --git a/wro4j-extensions/pom.xml b/wro4j-extensions/pom.xml
index b29b75373..fd53ea30f 100644
--- a/wro4j-extensions/pom.xml
+++ b/wro4j-extensions/pom.xml
@@ -58,16 +58,22 @@
dojo-shrinksafe
1.7.2
-
- org.jruby
- jruby-complete
- 1.6.7
-
-
- me.n4u.sass
- sass-gems
- 3.1.15
-
+
+ org.jruby
+ jruby-complete
+ 1.6.7
+
+
+ me.n4u.sass
+ sass-gems
+ 3.1.16
+
+
+
+ me.n4u.bourbon
+ bourbon-gems
+ 2.1.0
+
diff --git a/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/BourbonCssProcessor.java b/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/BourbonCssProcessor.java
new file mode 100644
index 000000000..4444a368b
--- /dev/null
+++ b/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/BourbonCssProcessor.java
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2012.
+ * All rights reserved.
+ */
+package ro.isdc.wro.extensions.processor.css;
+
+import ro.isdc.wro.extensions.processor.support.sass.RubySassEngine;
+import ro.isdc.wro.model.resource.ResourceType;
+import ro.isdc.wro.model.resource.SupportedResourceType;
+import ro.isdc.wro.model.resource.processor.ResourcePostProcessor;
+import ro.isdc.wro.model.resource.processor.ResourcePreProcessor;
+
+/**
+ * A processor to support the bourbon (http://thoughtbot.com/bourbon/) mixins library for sass.
+ * Using this processor automatically provides sass support, so there is no need to use both this one and
+ * the {@link RubySassCssProcessor}.
+ *
+ * @author Simon van der Sluis
+ * @created 16/05/12
+ */
+@SupportedResourceType(ResourceType.CSS)
+public class BourbonCssProcessor extends RubySassCssProcessor implements ResourcePreProcessor, ResourcePostProcessor {
+
+ public static final String ALIAS = "bourbonCss";
+
+ private static final String BOURBON_GEM_REQUIRE = "bourbon";
+
+ /**
+ * A getter used for lazy loading, overrides RubySassEngine#getEngine() and ensure the
+ * bourbon gem is imported (required).
+ */
+ @Override
+ protected RubySassEngine getEngine() {
+ RubySassEngine engine = super.getEngine();
+ engine.addRequire(BOURBON_GEM_REQUIRE);
+ return engine;
+ }
+
+}
diff --git a/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/RubySassCssProcessor.java b/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/RubySassCssProcessor.java
index c1e0a4ada..b73b42df7 100644
--- a/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/RubySassCssProcessor.java
+++ b/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/css/RubySassCssProcessor.java
@@ -68,7 +68,7 @@ protected void onException(final WroRuntimeException e) {
/**
* A getter used for lazy loading.
*/
- private RubySassEngine getEngine() {
+ protected RubySassEngine getEngine() {
if (engine == null) {
engine = new RubySassEngine();
}
diff --git a/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/support/sass/RubySassEngine.java b/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/support/sass/RubySassEngine.java
index d08716b80..3c9a0611b 100644
--- a/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/support/sass/RubySassEngine.java
+++ b/wro4j-extensions/src/main/java/ro/isdc/wro/extensions/processor/support/sass/RubySassEngine.java
@@ -2,6 +2,9 @@
import java.io.PrintWriter;
import java.io.StringWriter;
+import java.util.LinkedHashSet;
+import java.util.Set;
+import java.util.TreeSet;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
@@ -18,19 +21,45 @@
/**
* A Sass processor using ruby gems.
- *
+ *
* @author Dmitry Erman
* @created 12 Feb 2012
* @since 1.4.4
*/
public class RubySassEngine {
+
private static final Logger LOG = LoggerFactory.getLogger(RubySassEngine.class);
-
+
+ private static final String RUBY_GEM_REQUIRE = "rubygems";
+ private static final String SASS_PLUGIN_REQUIRE = "sass/plugin";
+ private static final String SASS_ENGINE_REQUIRE = "sass/engine";
+
+
+ private LinkedHashSet requires;
+
+ public RubySassEngine() {
+ super();
+ requires = new LinkedHashSet();
+ requires.add(RUBY_GEM_REQUIRE);
+ requires.add(SASS_PLUGIN_REQUIRE);
+ requires.add(SASS_ENGINE_REQUIRE);
+ }
+
+ /**
+ * Adds a ruby require to the ruby script to be run by this RubySassEngine. It's safe to add
+ * the same require twice.
+ * @param require The name of the require, e.g. bourbon
+ */
+ public void addRequire(String require) {
+ if (require != null && require.trim().length() > 0) {
+ requires.add(require.trim());
+ }
+ }
+
/**
* Transforms a sass content into css using Sass ruby engine.
- *
- * @param content
- * the Sass content to process.
+ *
+ * @param content the Sass content to process.
*/
public String process(final String content) {
if (StringUtils.isEmpty(content)) {
@@ -48,21 +77,35 @@ public String process(final String content) {
throw new WroRuntimeException(e.getMessage(), e);
}
}
-
+
private String buildUpdateScript(final String content) {
Validate.notNull(content);
final StringWriter raw = new StringWriter();
final PrintWriter script = new PrintWriter(raw);
final StringBuilder sb = new StringBuilder();
sb.append(":syntax => :scss");
-
- script.println(" require 'rubygems' ");
- script.println(" require 'sass/plugin' ");
- script.println(" require 'sass/engine' ");
- script.println(" source = '" + content.replace("'", "\"") + "' ");
+
+ for (String require : requires) {
+ script.println(" require '" + require + "' ");
+ }
+// if (LOG.isDebugEnabled()) {
+// debugRubyEnvironment(script);
+// }
+ script.println(" source = '" + content.replace("'", "\"") + "' ");
script.println(" engine = Sass::Engine.new(source, {" + sb.toString() + "}) ");
script.println(" result = engine.render ");
script.flush();
return raw.toString();
}
+
+ private void debugRubyEnvironment(PrintWriter script) {
+ script.println(" dir_contents = Dir.entries(Dir.pwd) ");
+ script.println(" puts dir_contents ");
+ script.println(" puts '--classpath--' ");
+ script.println(" puts $: ");
+ script.println(" puts '--classpath--' ");
+ script.println(" puts '--working dir--' ");
+ script.println(" puts Dir.pwd ");
+ script.println(" puts '--working dir--' ");
+ }
}
diff --git a/wro4j-extensions/src/test/java/ro/isdc/wro/extensions/processor/TestBourbonCssProcessor.java b/wro4j-extensions/src/test/java/ro/isdc/wro/extensions/processor/TestBourbonCssProcessor.java
new file mode 100644
index 000000000..b88168caa
--- /dev/null
+++ b/wro4j-extensions/src/test/java/ro/isdc/wro/extensions/processor/TestBourbonCssProcessor.java
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2010. All rights reserved.
+ */
+package ro.isdc.wro.extensions.processor;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import ro.isdc.wro.WroRuntimeException;
+import ro.isdc.wro.extensions.processor.css.BourbonCssProcessor;
+import ro.isdc.wro.extensions.processor.css.RubySassCssProcessor;
+import ro.isdc.wro.util.WroTestUtils;
+
+import java.io.*;
+import java.net.URL;
+
+
+/**
+ * Test ruby sass css processor.
+ *
+ * @author Simon van der Sluis
+ * @created Created on Apr 21, 2010
+ */
+public class TestBourbonCssProcessor
+{
+
+ private static final Logger LOG = LoggerFactory.getLogger(TestBourbonCssProcessor.class);
+
+ /** Location (base) of bourbon sass css with bourbon test resources. */
+ private final URL url = getClass().getResource("bourboncss");
+
+ /** A RubySassEngine to test */
+ private BourbonCssProcessor bourbonCss;
+
+ @Before
+ public void initEngine() {
+ bourbonCss = new BourbonCssProcessor() {
+ @Override
+ protected void onException(final WroRuntimeException e) {
+ LOG.debug("[FAIL] Exception message is: {}", e.getMessage());
+ throw e;
+ }
+ };
+ }
+
+ @Test
+ public void testFromFolder() throws Exception {
+ final File testFolder = new File(url.getFile(), "test");
+ final File expectedFolder = new File(url.getFile(), "expected");
+ WroTestUtils.compareFromDifferentFoldersByName(testFolder, expectedFolder, "scss", "css", bourbonCss);
+ }
+
+
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-buttons.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-buttons.css
new file mode 100644
index 000000000..522d9a7e6
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-buttons.css
@@ -0,0 +1,138 @@
+button.normal {
+ border: 1px solid #076fe4;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-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;
+ color: white;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: bold;
+ background-color: #4294f0;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4294f0), color-stop(100%, #0776f3));
+ background-image: -webkit-linear-gradient(top, #4294f0, #0776f3);
+ background-image: -moz-linear-gradient(top, #4294f0, #0776f3);
+ background-image: -ms-linear-gradient(top, #4294f0, #0776f3);
+ background-image: -o-linear-gradient(top, #4294f0, #0776f3);
+ background-image: linear-gradient(top, #4294f0, #0776f3);
+ padding: 7px 18px;
+ text-decoration: none;
+ text-shadow: 0 1px 0 #0065d6;
+ -webkit-background-clip: padding-box; }
+ button.normal:hover:not(:disabled) {
+ -webkit-box-shadow: inset 0 1px 0 0 #60a2ec;
+ -moz-box-shadow: inset 0 1px 0 0 #60a2ec;
+ box-shadow: inset 0 1px 0 0 #60a2ec;
+ cursor: pointer;
+ background-color: #2f87ea;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2f87ea), color-stop(100%, #086fe3));
+ background-image: -webkit-linear-gradient(top, #2f87ea, #086fe3);
+ background-image: -moz-linear-gradient(top, #2f87ea, #086fe3);
+ background-image: -ms-linear-gradient(top, #2f87ea, #086fe3);
+ background-image: -o-linear-gradient(top, #2f87ea, #086fe3);
+ background-image: linear-gradient(top, #2f87ea, #086fe3); }
+ button.normal:active:not(:disabled) {
+ border: 1px solid #076fe4;
+ -webkit-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
+ box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee; }
+ button.normal:disabled {
+ opacity: 0.5;
+ cursor: not-allowed; }
+
+button.pill {
+ border: 1px solid #3371b2;
+ border-color: #3371b2 #2457a3 #164297;
+ -webkit-border-radius: 16px;
+ -moz-border-radius: 16px;
+ border-radius: 16px;
+ -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;
+ box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
+ color: white;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ background-color: #4294f0;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4294f0), color-stop(100%, #0156fe));
+ background-image: -webkit-linear-gradient(top, #4294f0, #0156fe);
+ background-image: -moz-linear-gradient(top, #4294f0, #0156fe);
+ background-image: -ms-linear-gradient(top, #4294f0, #0156fe);
+ background-image: -o-linear-gradient(top, #4294f0, #0156fe);
+ background-image: linear-gradient(top, #4294f0, #0156fe);
+ padding: 5px 16px;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px #2762bf;
+ -webkit-background-clip: padding-box; }
+ button.pill:hover:not(:disabled) {
+ border: 1px solid #2062a7;
+ border-color: #2062a7 #0e479a #01318e;
+ -webkit-box-shadow: inset 0 1px 0 0 #519cf0;
+ -moz-box-shadow: inset 0 1px 0 0 #519cf0;
+ box-shadow: inset 0 1px 0 0 #519cf0;
+ cursor: pointer;
+ background-color: #2d88ee;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d88ee), color-stop(100%, #1554ce));
+ background-image: -webkit-linear-gradient(top, #2d88ee, #1554ce);
+ background-image: -moz-linear-gradient(top, #2d88ee, #1554ce);
+ background-image: -ms-linear-gradient(top, #2d88ee, #1554ce);
+ background-image: -o-linear-gradient(top, #2d88ee, #1554ce);
+ background-image: linear-gradient(top, #2d88ee, #1554ce);
+ text-shadow: 0 -1px 1px #134faf;
+ -webkit-background-clip: padding-box; }
+ button.pill:active:not(:disabled) {
+ background: #226edd;
+ border: 1px solid #0d3c8c;
+ border-bottom: 1px solid #062d8d;
+ -webkit-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
+ -moz-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
+ box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
+ text-shadow: 0 -1px 1px #1a52aa; }
+ button.pill:disabled {
+ opacity: 0.5;
+ cursor: not-allowed; }
+
+button.shiny {
+ border: 1px solid #8a0000;
+ border-bottom: 1px solid #810000;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-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;
+ color: white;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+ background-color: red;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(50%, #c70000), color-stop(50%, #a90000), color-stop(100%, #b00000));
+ background-image: -webkit-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
+ background-image: -moz-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
+ background-image: -ms-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
+ background-image: -o-linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
+ background-image: linear-gradient(top, red 0%, #c70000 50%, #a90000 50%, #b00000 100%);
+ padding: 8px 20px;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px #730000; }
+ button.shiny:hover:not(:disabled) {
+ cursor: pointer;
+ background-color: #f20000;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f20000), color-stop(50%, #bd0000), color-stop(50%, #a20000), color-stop(100%, #a90000));
+ background-image: -webkit-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
+ background-image: -moz-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
+ background-image: -ms-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
+ background-image: -o-linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%);
+ background-image: linear-gradient(top, #f20000 0%, #bd0000 50%, #a20000 50%, #a90000 100%); }
+ button.shiny:active:not(:disabled) {
+ -webkit-box-shadow: inset 0 0 20px 0 #900000, 0 1px 0 white;
+ -moz-box-shadow: inset 0 0 20px 0 #900000, 0 1px 0 white;
+ box-shadow: inset 0 0 20px 0 #900000, 0 1px 0 white; }
+ button.shiny:disabled {
+ opacity: 0.5;
+ cursor: not-allowed; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-clearfix.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-clearfix.css
new file mode 100644
index 000000000..bee610921
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-clearfix.css
@@ -0,0 +1,7 @@
+div.clear {
+ zoom: 1; }
+ div.clear:before, div.clear:after {
+ content: "";
+ display: table; }
+ div.clear:after {
+ clear: both; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-fontfamily.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-fontfamily.css
new file mode 100644
index 000000000..c9e9c1212
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-fontfamily.css
@@ -0,0 +1,14 @@
+div.hel {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
+div.georg {
+ font-family: Georgia, Cambria, "Times New Roman", Times, serif; }
+
+div.lucid {
+ font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; }
+
+div.mono {
+ font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; }
+
+div.verd {
+ font-family: Verdana, Geneva, sans-serif; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-hidetext.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-hidetext.css
new file mode 100644
index 000000000..c426b13a1
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-hidetext.css
@@ -0,0 +1,7 @@
+div.hide {
+ background-color: transparent;
+ border: 0;
+ color: transparent;
+ font: 0/0 a;
+ text-shadow: none;
+ background-image: url(logo.png); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-html5input.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-html5input.css
new file mode 100644
index 000000000..0d0098173
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-html5input.css
@@ -0,0 +1,2 @@
+input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] {
+ border: 1px solid green; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-position.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-position.css
new file mode 100644
index 000000000..43bc1f71b
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-position.css
@@ -0,0 +1,4 @@
+div.placeMe {
+ position: relative;
+ top: 0px;
+ left: 100px; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-timing.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-timing.css
new file mode 100644
index 000000000..9f5772bb9
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/addon-timing.css
@@ -0,0 +1,6 @@
+div.timing {
+ -webkit-transition: all, 5s, cubic-bezier(0.6, 0.04, 0.98, 0.335);
+ -moz-transition: all, 5s, cubic-bezier(0.6, 0.04, 0.98, 0.335);
+ -ms-transition: all, 5s, cubic-bezier(0.6, 0.04, 0.98, 0.335);
+ -o-transition: all, 5s, cubic-bezier(0.6, 0.04, 0.98, 0.335);
+ transition: all, 5s, cubic-bezier(0.6, 0.04, 0.98, 0.335); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-compact.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-compact.css
new file mode 100644
index 000000000..6acd5e081
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-compact.css
@@ -0,0 +1,2 @@
+div.compacted {
+ border: 1px; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-flexgrid.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-flexgrid.css
new file mode 100644
index 000000000..75be128a7
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-flexgrid.css
@@ -0,0 +1,10 @@
+div {
+ width: 31.658%;
+ margin-left: 2.513%; }
+ div p {
+ width: 46.032%;
+ float: left;
+ margin: 7.937%; }
+ div blockquote {
+ float: left;
+ width: 46.032%; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-goldenratio.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-goldenratio.css
new file mode 100644
index 000000000..e99644fa2
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-goldenratio.css
@@ -0,0 +1,5 @@
+div.header {
+ font-size: 22.652px; }
+
+div.footer {
+ font-size: 8px; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-gridwidth.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-gridwidth.css
new file mode 100644
index 000000000..8e7783b64
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-gridwidth.css
@@ -0,0 +1,3 @@
+div {
+ width: 520px;
+ margin-left: 40px; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-linearGradient.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-linearGradient.css
new file mode 100644
index 000000000..1e1090a2e
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-linearGradient.css
@@ -0,0 +1,6 @@
+div.linearGrad {
+ background-image: -webkit-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: -moz-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: -ms-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: -o-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: linear-gradient(top, white 0, yellow 50%, transparent 50%); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-modularscale.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-modularscale.css
new file mode 100644
index 000000000..58ce0927b
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-modularscale.css
@@ -0,0 +1,11 @@
+div.scaleUp {
+ font-size: 22.652px; }
+
+div.scaleDown {
+ font-size: 8.653px; }
+
+div.scaleFloor {
+ font-size: 22px; }
+
+div.scaleCeil {
+ font-size: 23px; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-radialgradient.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-radialgradient.css
new file mode 100644
index 000000000..7bbe910c8
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-radialgradient.css
@@ -0,0 +1,20 @@
+div.one {
+ background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: -moz-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: -ms-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: -o-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1); }
+
+div.two {
+ background-image: -webkit-radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1);
+ background-image: -moz-radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1);
+ background-image: -ms-radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1);
+ background-image: -o-radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1);
+ background-image: radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1); }
+
+div.three {
+ background-image: -webkit-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -moz-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -ms-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -o-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-tintshade.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-tintshade.css
new file mode 100644
index 000000000..ce6395cdb
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/function-tintshade.css
@@ -0,0 +1,5 @@
+div.tint {
+ background: #ff6666; }
+
+div.shade {
+ background: #990000; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-animation.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-animation.css
new file mode 100644
index 000000000..0f5722332
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-animation.css
@@ -0,0 +1,16 @@
+box:hover {
+ -webkit-animation-name: scale, slide;
+ -moz-animation-name: scale, slide;
+ animation-name: scale, slide;
+ -webkit-animation-duration: 2s;
+ -moz-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-timing-function: ease;
+ -moz-animation-timing-function: ease;
+ animation-timing-function: ease;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation: scale 1s ease-in, slide 2s ease;
+ -moz-animation: scale 1s ease-in, slide 2s ease;
+ animation: scale 1s ease-in, slide 2s ease; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-appearance.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-appearance.css
new file mode 100644
index 000000000..dc1f1cdfa
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-appearance.css
@@ -0,0 +1,6 @@
+div.test {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-bgimage.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-bgimage.css
new file mode 100644
index 000000000..3e6981630
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-bgimage.css
@@ -0,0 +1,27 @@
+div.multiImage {
+ background-image: url("/images/a.png"), url("images/b.png");
+ background-image: url("/images/a.png"), url("images/b.png");
+ background-image: url("/images/a.png"), url("images/b.png");
+ background-image: url("/images/a.png"), url("images/b.png");
+ background-image: url("/images/a.png"), url("images/b.png"); }
+
+div.ImageAndGradient {
+ background-image: url("/images/a.png"), -webkit-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: url("/images/a.png"), -moz-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: url("/images/a.png"), -ms-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: url("/images/a.png"), -o-linear-gradient(top, white 0, yellow 50%, transparent 50%);
+ background-image: url("/images/a.png"), linear-gradient(top, white 0, yellow 50%, transparent 50%); }
+
+div.multiGradient {
+ background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), -webkit-linear-gradient(top, #4e7ba3, #3e6181);
+ background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), -moz-linear-gradient(top, #4e7ba3, #3e6181);
+ background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), -ms-linear-gradient(top, #4e7ba3, #3e6181);
+ background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), -o-linear-gradient(top, #4e7ba3, #3e6181);
+ background-image: linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), linear-gradient(top, #4e7ba3, #3e6181); }
+
+div.shorthand {
+ background-image: -webkit-url("/images/a.png")-gradient(center), -webkit-url("images/b.png")-gradient(left);
+ background-image: -moz-url("/images/a.png")-gradient(center), -moz-url("images/b.png")-gradient(left);
+ background-image: -ms-url("/images/a.png")-gradient(center), -ms-url("images/b.png")-gradient(left);
+ background-image: -o-url("/images/a.png")-gradient(center), -o-url("images/b.png")-gradient(left);
+ background-image: url("/images/a.png")-gradient(center), url("images/b.png")-gradient(left); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-bgsize.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-bgsize.css
new file mode 100644
index 000000000..d29352806
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-bgsize.css
@@ -0,0 +1,13 @@
+div.single {
+ -webkit-background-size: 50% 100%;
+ -moz-background-size: 50% 100%;
+ -ms-background-size: 50% 100%;
+ -o-background-size: 50% 100%;
+ background-size: 50% 100%; }
+
+div.double {
+ -webkit-background-size: 50% 100%, 75% 100%;
+ -moz-background-size: 50% 100%, 75% 100%;
+ -ms-background-size: 50% 100%, 75% 100%;
+ -o-background-size: 50% 100%, 75% 100%;
+ background-size: 50% 100%, 75% 100%; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-borderimage.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-borderimage.css
new file mode 100644
index 000000000..9883fc5d9
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-borderimage.css
@@ -0,0 +1,5 @@
+div.test {
+ -webkit-border-image: url(/images/border.png) 27 repeat;
+ -moz-border-image: url(/images/border.png) 27 repeat;
+ -o-border-image: url(/images/border.png) 27 repeat;
+ border-image: url(/images/border.png) 27 repeat; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-borderradius.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-borderradius.css
new file mode 100644
index 000000000..966650d2d
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-borderradius.css
@@ -0,0 +1,58 @@
+div.one {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px; }
+
+div.all {
+ -webkit-border-radius: 5px 5px 2px 2px;
+ -moz-border-radius: 5px 5px 2px 2px;
+ border-radius: 5px 5px 2px 2px; }
+
+div.individual {
+ -moz-border-radius-topleft: 5px;
+ -webkit-border-top-left-radius: 5px;
+ -moz-border-top-left-radius: 5px;
+ border-top-left-radius: 5px;
+ -moz-border-radius-topright: 5px;
+ -webkit-border-top-right-radius: 5px;
+ -moz-border-top-right-radius: 5px;
+ border-top-right-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ -moz-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ -moz-border-radius-bottomleft: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -moz-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px; }
+
+div.sides {
+ -moz-border-radius-topleft: 5px;
+ -webkit-border-top-left-radius: 5px;
+ -moz-border-top-left-radius: 5px;
+ border-top-left-radius: 5px;
+ -moz-border-radius-topright: 5px;
+ -webkit-border-top-right-radius: 5px;
+ -moz-border-top-right-radius: 5px;
+ border-top-right-radius: 5px;
+ -moz-border-radius-bottomleft: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -moz-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ -moz-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ -moz-border-radius-topleft: 5px;
+ -webkit-border-top-left-radius: 5px;
+ -moz-border-top-left-radius: 5px;
+ border-top-left-radius: 5px;
+ -moz-border-radius-bottomleft: 5px;
+ -webkit-border-bottom-left-radius: 5px;
+ -moz-border-bottom-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ -moz-border-radius-topright: 5px;
+ -webkit-border-top-right-radius: 5px;
+ -moz-border-top-right-radius: 5px;
+ border-top-right-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+ -moz-border-bottom-right-radius: 5px;
+ border-bottom-right-radius: 5px; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-boxshadow.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-boxshadow.css
new file mode 100644
index 000000000..ca3c761fb
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-boxshadow.css
@@ -0,0 +1,9 @@
+div.single {
+ -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.65);
+ -moz-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.65);
+ box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.65); }
+
+div.double {
+ -webkit-box-shadow: 1px 1px 5px 1px green, -1px -1px 5px 1px blue;
+ -moz-box-shadow: 1px 1px 5px 1px green, -1px -1px 5px 1px blue;
+ box-shadow: 1px 1px 5px 1px green, -1px -1px 5px 1px blue; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-boxsizing.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-boxsizing.css
new file mode 100644
index 000000000..cd6fdca05
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-boxsizing.css
@@ -0,0 +1,4 @@
+div.bbox {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-columns.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-columns.css
new file mode 100644
index 000000000..0505d46ac
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-columns.css
@@ -0,0 +1,9 @@
+div.cols {
+ -webkit-columns: 12 8em;
+ -moz-columns: 12 8em;
+ columns: 12 8em; }
+
+div.colrules {
+ -webkit-column-rule: 1px solid green;
+ -moz-column-rule: 1px solid green;
+ column-rule: 1px solid green; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-flexbox.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-flexbox.css
new file mode 100644
index 000000000..cebaf572c
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-flexbox.css
@@ -0,0 +1,44 @@
+div.parent {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ -webkit-box-align: start;
+ -moz-box-align: start;
+ box-align: start;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ box-orient: horizontal;
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ box-pack: start; }
+
+div.parent > div.child {
+ -webkit-box-flex: 2;
+ -moz-box-flex: 2;
+ box-flex: 2; }
+
+div.parent {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ box-orient: horizontal;
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ box-pack: center;
+ -webkit-box-align: stretch;
+ -moz-box-align: stretch;
+ box-align: stretch;
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ box-orient: vertical;
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ box-pack: start;
+ -webkit-box-align: stretch;
+ -moz-box-align: stretch;
+ box-align: stretch; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-fontface.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-fontface.css
new file mode 100644
index 000000000..688a7ab06
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-fontface.css
@@ -0,0 +1,26 @@
+div.normal {
+ @font-face {
+ font-family: nobile;
+ src: url("/fonts/nobile.eot");
+ src: url("/fonts/nobile.eot?#iefix") format("embedded-opentype"), url("/fonts/nobile.woff") format("woff"), url("/fonts/nobile.ttf") format("truetype"), url("/fonts/nobile.svg#nobile") format("svg");
+ font-weight: normal;
+ font-style: normal; }
+ }
+
+div.bold {
+ @font-face {
+ font-family: nobile;
+ src: url("/fonts/nobile_bold.eot");
+ src: url("/fonts/nobile_bold.eot?#iefix") format("embedded-opentype"), url("/fonts/nobile_bold.woff") format("woff"), url("/fonts/nobile_bold.ttf") format("truetype"), url("/fonts/nobile_bold.svg#nobile") format("svg");
+ font-weight: bold;
+ font-style: normal; }
+ }
+
+div.italic {
+ @font-face {
+ font-family: nobile;
+ src: url("/fonts/nobile_italic.eot");
+ src: url("/fonts/nobile_italic.eot?#iefix") format("embedded-opentype"), url("/fonts/nobile_italic.woff") format("woff"), url("/fonts/nobile_italic.ttf") format("truetype"), url("/fonts/nobile_italic.svg#nobile") format("svg");
+ font-weight: normal;
+ font-style: italic; }
+ }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-inlineblock.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-inlineblock.css
new file mode 100644
index 000000000..4a35af064
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-inlineblock.css
@@ -0,0 +1,6 @@
+div.inlinemyblock {
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-lineargradient.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-lineargradient.css
new file mode 100644
index 000000000..13ab3af5d
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-lineargradient.css
@@ -0,0 +1,35 @@
+div.linearone {
+ background-color: #1e5799;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #2989d8));
+ background-image: -webkit-linear-gradient(top, #1e5799, #2989d8);
+ background-image: -moz-linear-gradient(top, #1e5799, #2989d8);
+ background-image: -ms-linear-gradient(top, #1e5799, #2989d8);
+ background-image: -o-linear-gradient(top, #1e5799, #2989d8);
+ background-image: linear-gradient(top, #1e5799, #2989d8); }
+
+div.lineartwo {
+ background-color: #8fdce5;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8fdce5), color-stop(100%, #3dc3d1));
+ background-image: -webkit-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: -moz-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: -ms-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: -o-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: linear-gradient(top, #8fdce5, #3dc3d1); }
+
+div.linearthree {
+ background-color: red;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8fdce5), color-stop(100%, #3dc3d1));
+ background-image: -webkit-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: -moz-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: -ms-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: -o-linear-gradient(top, #8fdce5, #3dc3d1);
+ background-image: linear-gradient(top, #8fdce5, #3dc3d1); }
+
+div.linearfour {
+ background-color: #1e5799;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
+ background-image: -webkit-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+ background-image: -moz-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+ background-image: -ms-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+ background-image: -o-linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+ background-image: linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-radialgradient.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-radialgradient.css
new file mode 100644
index 000000000..9b61c3bd0
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-radialgradient.css
@@ -0,0 +1,26 @@
+div.radialone {
+ background-color: #1e5799;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, #1e5799), color-stop(100%, #3dc3d1));
+ background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: -moz-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: -ms-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: -o-radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1);
+ background-image: radial-gradient(50% 50%, ellipse cover, #1e5799, #3dc3d1); }
+
+div.radialtwo {
+ background-color: false;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(10%, #eeeeee), color-stop(30%, #1e5799), color-stop(100%, #efefef));
+ background-image: -webkit-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -moz-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -ms-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -o-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef); }
+
+div.radialthree {
+ background-color: red;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(10%, #eeeeee), color-stop(30%, #1e5799), color-stop(100%, #efefef));
+ background-image: -webkit-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -moz-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -ms-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: -o-radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef);
+ background-image: radial-gradient(50% 50%, circle cover, #eeeeee 10%, #1e5799 30%, #efefef); }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-transform.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-transform.css
new file mode 100644
index 000000000..46b749fe0
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-transform.css
@@ -0,0 +1,13 @@
+div.yTransform {
+ -webkit-transform: translateY(50px);
+ -moz-transform: translateY(50px);
+ -ms-transform: translateY(50px);
+ -o-transform: translateY(50px);
+ transform: translateY(50px); }
+
+div.topTranform {
+ -webkit-transform-origin: center top;
+ -moz-transform-origin: center top;
+ -ms-transform-origin: center top;
+ -o-transform-origin: center top;
+ transform-origin: center top; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-transitions.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-transitions.css
new file mode 100644
index 000000000..85e2821de
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-transitions.css
@@ -0,0 +1,20 @@
+div.transitionAll {
+ -webkit-transition: all 2s ease-in-out;
+ -moz-transition: all 2s ease-in-out;
+ -ms-transition: all 2s ease-in-out;
+ -o-transition: all 2s ease-in-out;
+ transition: all 2s ease-in-out; }
+
+div.transitionOpacity {
+ -webkit-transition: opacity 1s ease-in 0s, width 2s ease-in 2s;
+ -moz-transition: opacity 1s ease-in 0s, width 2s ease-in 2s;
+ -ms-transition: opacity 1s ease-in 0s, width 2s ease-in 2s;
+ -o-transition: opacity 1s ease-in 0s, width 2s ease-in 2s;
+ transition: opacity 1s ease-in 0s, width 2s ease-in 2s; }
+
+div.transitionVendor {
+ -webkit-transition: -moz-transform, color, background 1s ease-in 0s;
+ -moz-transition: -moz-transform, color, background 1s ease-in 0s;
+ -ms-transition: -moz-transform, color, background 1s ease-in 0s;
+ -o-transition: -moz-transform, color, background 1s ease-in 0s;
+ transition: -moz-transform, color, background 1s ease-in 0s; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-userselect.css b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-userselect.css
new file mode 100644
index 000000000..936f9c827
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/expected/mixin-userselect.css
@@ -0,0 +1,5 @@
+div.sel {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-buttons.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-buttons.scss
new file mode 100644
index 000000000..38a30a3d6
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-buttons.scss
@@ -0,0 +1,13 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+button.normal {
+ @include button();
+}
+
+button.pill {
+ @include button(pill);
+}
+
+button.shiny {
+ @include button(shiny, #ff0000);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-clearfix.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-clearfix.scss
new file mode 100644
index 000000000..0aa0df711
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-clearfix.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.clear {
+ @include clearfix;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-fontfamily.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-fontfamily.scss
new file mode 100644
index 000000000..c8d6bcb86
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-fontfamily.scss
@@ -0,0 +1,21 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.hel {
+ font-family: $helvetica;
+}
+
+div.georg {
+ font-family: $georgia;
+}
+
+div.lucid {
+ font-family: $lucida-grande;
+}
+
+div.mono {
+ font-family: $monospace;
+}
+
+div.verd {
+ font-family: $verdana;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-hidetext.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-hidetext.scss
new file mode 100644
index 000000000..cd087349a
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-hidetext.scss
@@ -0,0 +1,6 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.hide {
+ @include hide-text;
+ background-image: url(logo.png);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-html5input.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-html5input.scss
new file mode 100644
index 000000000..3af8dc88e
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-html5input.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+#{$all-text-inputs} {
+ border: 1px solid green;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-position.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-position.scss
new file mode 100644
index 000000000..dcfddddb3
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-position.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.placeMe {
+ @include position(relative, 0px 0 0 100px);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-timing.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-timing.scss
new file mode 100644
index 000000000..5aaa63403
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/addon-timing.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.timing {
+ @include transition(all, 5s, $ease-in-circ);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/_bourbon.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/_bourbon.scss
new file mode 100644
index 000000000..bd18738bd
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/_bourbon.scss
@@ -0,0 +1,39 @@
+// Custom Functions
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/deprecated-webkit-gradient";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/flex-grid";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/grid-width";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/linear-gradient";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/modular-scale";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/radial-gradient";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/render-gradients";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/tint-shade";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/transition-property-name";
+
+// CSS3 Mixins
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/animation";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/appearance";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/background-image";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/background-size";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/border-image";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/border-radius";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/box-shadow";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/box-sizing";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/columns";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/flex-box";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/inline-block";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/linear-gradient";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/prefixer";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/radial-gradient";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/transform";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/transition";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/user-select";
+
+// Addons & other mixins
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/button";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/clearfix";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/font-face";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/font-family";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/hide-text";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/html5-input-types";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/position";
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/timing-functions";
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_button.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_button.scss
new file mode 100644
index 000000000..e2a589c07
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_button.scss
@@ -0,0 +1,273 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+ @if type-of($style) == color {
+ $base-color: $style;
+ $style: simple;
+ }
+
+ // Grayscale button
+ @if $base-color == grayscale($base-color) {
+ @if $style == simple {
+ @include simple($base-color, $grayscale: true);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color, $grayscale: true);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color, $grayscale: true);
+ }
+ }
+
+ // Colored button
+ @else {
+ @if $style == simple {
+ @include simple($base-color);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color);
+ }
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: bold;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 7px 18px;
+ text-decoration: none;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover:not(:disabled) {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ }
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active:not(:disabled) {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ @if $grayscale == true {
+ $border-active: grayscale($border-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $border-bottom: grayscale($border-bottom);
+ $fourth-stop: grayscale($fourth-stop);
+ $inset-shadow: grayscale($inset-shadow);
+ $second-stop: grayscale($second-stop);
+ $text-shadow: grayscale($text-shadow);
+ $third-stop: grayscale($third-stop);
+ }
+
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ @include border-radius(5px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ padding: 8px 20px;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px $text-shadow;
+
+ &:hover:not(:disabled) {
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+ @if $grayscale == true {
+ $first-stop-hover: grayscale($first-stop-hover);
+ $second-stop-hover: grayscale($second-stop-hover);
+ $third-stop-hover: grayscale($third-stop-hover);
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
+ }
+
+ cursor: pointer;
+ @include linear-gradient(top, $first-stop-hover 0%,
+ $second-stop-hover 50%,
+ $third-stop-hover 50%,
+ $fourth-stop-hover 100%);
+ }
+
+ &:active:not(:disabled) {
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @if $grayscale == true {
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+ }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border-bottom: grayscale($border-bottom);
+ $border-sides: grayscale($border-sides);
+ $border-top: grayscale($border-top);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include border-radius(16px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+ color: $color;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 5px 16px;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover:not(:disabled) {
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $border-bottom: grayscale($border-bottom);
+ $border-sides: grayscale($border-sides);
+ $border-top: grayscale($border-top);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ $text-shadow-hover: grayscale($text-shadow-hover);
+ }
+
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ text-shadow: 0 -1px 1px $text-shadow-hover;
+ -webkit-background-clip: padding-box;
+ }
+
+ &:active:not(:disabled) {
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+ @if $grayscale == true {
+ $active-color: grayscale($active-color);
+ $border-active: grayscale($border-active);
+ $border-bottom-active: grayscale($border-bottom-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ $text-shadow-active: grayscale($text-shadow-active);
+ }
+
+ background: $active-color;
+ border: 1px solid $border-active;
+ border-bottom: 1px solid $border-bottom-active;
+ @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+ text-shadow: 0 -1px 1px $text-shadow-active;
+ }
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_clearfix.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_clearfix.scss
new file mode 100644
index 000000000..a9f6a795c
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_clearfix.scss
@@ -0,0 +1,29 @@
+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+// // Contain all floats within .wrapper
+// .wrapper {
+// @include clearfix;
+// .content,
+// .sidebar {
+// float : left;
+// }
+// }
+
+@mixin clearfix {
+ zoom: 1;
+
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_font-face.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_font-face.scss
new file mode 100644
index 000000000..de34a3704
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_font-face.scss
@@ -0,0 +1,12 @@
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
+ @font-face {
+ font-family: $font-family;
+ src: url('#{$file-path}.eot');
+ src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+ url('#{$file-path}.woff') format('woff'),
+ url('#{$file-path}.ttf') format('truetype'),
+ url('#{$file-path}.svg##{$font-family}') format('svg');
+ font-weight: $weight;
+ font-style: $style;
+ }
+}
\ No newline at end of file
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_font-family.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_font-family.scss
new file mode 100644
index 000000000..df8a80ddf
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_font-family.scss
@@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_hide-text.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_hide-text.scss
new file mode 100644
index 000000000..e379c19f8
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_hide-text.scss
@@ -0,0 +1,15 @@
+@mixin hide-text {
+ background-color: transparent;
+ border: 0;
+ color: transparent;
+ font: 0/0 a;
+ text-shadow: none;
+}
+
+// A CSS image replacement method that does not require the use of text-indent.
+//
+// Examples
+//
+// .ir {
+// @include hide-text;
+// }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_html5-input-types.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_html5-input-types.scss
new file mode 100644
index 000000000..9d86fbb4d
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_html5-input-types.scss
@@ -0,0 +1,36 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+ 'input[type="number"]',
+ 'input[type="password"]',
+ 'input[type="search"]',
+ 'input[type="tel"]',
+ 'input[type="text"]',
+ 'input[type="url"]',
+
+ // Webkit & Gecko may change the display of these in the future
+ 'input[type="color"]',
+ 'input[type="date"]',
+ 'input[type="datetime"]',
+ 'input[type="datetime-local"]',
+ 'input[type="month"]',
+ 'input[type="time"]',
+ 'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+// #{$all-text-inputs}, textarea {
+// border: 1px solid red;
+// }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_position.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_position.scss
new file mode 100644
index 000000000..faad1cae5
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_position.scss
@@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+ @if type-of($position) == list {
+ $coordinates: $position;
+ $position: relative;
+ }
+
+ $top: nth($coordinates, 1);
+ $right: nth($coordinates, 2);
+ $bottom: nth($coordinates, 3);
+ $left: nth($coordinates, 4);
+
+ position: $position;
+
+ @if $top == auto {
+ top: $top;
+ }
+ @else if not(unitless($top)) {
+ top: $top;
+ }
+
+ @if $right == auto {
+ right: $right;
+ }
+ @else if not(unitless($right)) {
+ right: $right;
+ }
+
+ @if $bottom == auto {
+ bottom: $bottom;
+ }
+ @else if not(unitless($bottom)) {
+ bottom: $bottom;
+ }
+
+ @if $left == auto {
+ left: $left;
+ }
+ @else if not(unitless($left)) {
+ left: $left;
+ }
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_timing-functions.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_timing-functions.scss
new file mode 100644
index 000000000..51b241091
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/addons/_timing-functions.scss
@@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_animation.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_animation.scss
new file mode 100644
index 000000000..6309b9da1
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_animation.scss
@@ -0,0 +1,125 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animation-1,
+ $animation-2: false, $animation-3: false,
+ $animation-4: false, $animation-5: false,
+ $animation-6: false, $animation-7: false,
+ $animation-8: false, $animation-9: false)
+ {
+ $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
+ $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
+
+ @include prefixer(animation, $full);
+}
+
+// Individual Animation Properties
+@mixin animation-name ($name-1,
+ $name-2: false, $name-3: false,
+ $name-4: false, $name-5: false,
+ $name-6: false, $name-7: false,
+ $name-8: false, $name-9: false)
+ {
+ $full: compact($name-1, $name-2, $name-3, $name-4,
+ $name-5, $name-6, $name-7, $name-8, $name-9);
+
+ @include prefixer(animation-name, $full);
+}
+
+
+@mixin animation-duration ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(animation-duration, $full);
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+// ease | linear | ease-in | ease-out | ease-in-out
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
+ $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+ @include prefixer(animation-timing-function, $full);
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+// infinite |
+ $value-2: false, $value-3: false,
+ $value-4: false, $value-5: false,
+ $value-6: false, $value-7: false,
+ $value-8: false, $value-9: false)
+ {
+ $full: compact($value-1, $value-2, $value-3, $value-4,
+ $value-5, $value-6, $value-7, $value-8, $value-9);
+
+ @include prefixer(animation-iteration-count, $full);
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+// normal | alternate
+ $direction-2: false, $direction-3: false,
+ $direction-4: false, $direction-5: false,
+ $direction-6: false, $direction-7: false,
+ $direction-8: false, $direction-9: false)
+ {
+ $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
+ $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+ @include prefixer(animation-direction, $full);
+}
+
+
+@mixin animation-play-state ($state-1: running,
+// running | paused
+ $state-2: false, $state-3: false,
+ $state-4: false, $state-5: false,
+ $state-6: false, $state-7: false,
+ $state-8: false, $state-9: false)
+ {
+ $full: compact($state-1, $state-2, $state-3, $state-4,
+ $state-5, $state-6, $state-7, $state-8, $state-9);
+
+ @include prefixer(animation-play-state, $full);
+}
+
+
+@mixin animation-delay ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(animation-delay, $full);
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+// http://goo.gl/l6ckm
+// none | forwards | backwards | both
+ $mode-2: false, $mode-3: false,
+ $mode-4: false, $mode-5: false,
+ $mode-6: false, $mode-7: false,
+ $mode-8: false, $mode-9: false)
+ {
+ $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
+ $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+ @include prefixer(animation-fill-mode, $full);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_appearance.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_appearance.scss
new file mode 100644
index 000000000..87c89adfc
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_appearance.scss
@@ -0,0 +1,3 @@
+@mixin appearance ($value) {
+ @include prefixer(appearance, $value, webkit, moz, ms, o);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_background-image.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_background-image.scss
new file mode 100644
index 000000000..c23cef7c3
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_background-image.scss
@@ -0,0 +1,57 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image(
+ $image-1 , $image-2: false,
+ $image-3: false, $image-4: false,
+ $image-5: false, $image-6: false,
+ $image-7: false, $image-8: false,
+ $image-9: false, $image-10: false
+) {
+ $images: compact($image-1, $image-2,
+ $image-3, $image-4,
+ $image-5, $image-6,
+ $image-7, $image-8,
+ $image-9, $image-10);
+
+ background-image: add-prefix($images, webkit);
+ background-image: add-prefix($images, moz);
+ background-image: add-prefix($images, ms);
+ background-image: add-prefix($images, o);
+ background-image: add-prefix($images);
+}
+
+
+@function add-prefix($images, $vendor: false) {
+ $images-prefixed: ();
+
+ @for $i from 1 through length($images) {
+ $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+ // If variable is a list - Gradient
+ @if $type == list {
+ $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+ $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+ $images-prefixed: append($images-prefixed, $gradient, comma);
+ }
+
+ // If variable is a string - Image
+ @else if $type == string {
+ $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+ }
+ }
+ @return $images-prefixed;
+}
+
+
+
+//Examples:
+ //@include background-image(linear-gradient(top, orange, red));
+ //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+ //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+ //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+ //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_background-size.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_background-size.scss
new file mode 100644
index 000000000..079460f86
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_background-size.scss
@@ -0,0 +1,11 @@
+@mixin background-size ($length-1,
+ $length-2: false, $length-3: false,
+ $length-4: false, $length-5: false,
+ $length-6: false, $length-7: false,
+ $length-8: false, $length-9: false)
+ {
+ $full: compact($length-1, $length-2, $length-3, $length-4,
+ $length-5, $length-6, $length-7, $length-8, $length-9);
+
+@include prefixer(background-size, $full, webkit, moz, ms, o);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_border-image.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_border-image.scss
new file mode 100644
index 000000000..da4f20ba4
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_border-image.scss
@@ -0,0 +1,56 @@
+@mixin border-image($images) {
+ -webkit-border-image: border-add-prefix($images, webkit);
+ -moz-border-image: border-add-prefix($images, moz);
+ -o-border-image: border-add-prefix($images, o);
+ border-image: border-add-prefix($images);
+}
+
+@function border-add-prefix($images, $vendor: false) {
+ $border-image: ();
+ $images-type: type-of(nth($images, 1));
+ $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
+
+ // If input is a gradient
+ @if $images-type == string {
+ @if ($first-var == "linear") or ($first-var == "radial") {
+ @for $i from 2 through length($images) {
+ $gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth($images, $i); // Get actual gradient (red, blue)
+ $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
+ }
+ }
+
+ // If input is a URL
+ @else {
+ $border-image: $images;
+ }
+ }
+
+ // If input is gradient or url + additional args
+ @else if $images-type == list {
+ @for $i from 1 through length($images) {
+ $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+ // If variable is a list - Gradient
+ @if $type == list {
+ $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+ $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
+ }
+
+ // If variable is a string - Image or number
+ @else if ($type == string) or ($type == number) {
+ $border-image: append($border-image, nth($images, $i));
+ }
+ }
+ }
+ @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_border-radius.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_border-radius.scss
new file mode 100644
index 000000000..8d026537b
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_border-radius.scss
@@ -0,0 +1,42 @@
+@mixin border-radius ($radii) {
+ @include prefixer(border-radius, $radii);
+}
+
+@mixin border-top-left-radius($radii) {
+ -moz-border-radius-topleft: $radii;
+ @include prefixer(border-top-left-radius, $radii);
+}
+
+@mixin border-top-right-radius($radii) {
+ -moz-border-radius-topright: $radii;
+ @include prefixer(border-top-right-radius, $radii);
+}
+
+@mixin border-bottom-left-radius($radii) {
+ -moz-border-radius-bottomleft: $radii;
+ @include prefixer(border-bottom-left-radius, $radii);
+}
+
+@mixin border-bottom-right-radius($radii) {
+ @include prefixer(border-bottom-right-radius, $radii);
+}
+
+@mixin border-top-radius($radii) {
+ @include border-top-left-radius($radii);
+ @include border-top-right-radius($radii);
+}
+
+@mixin border-right-radius($radii) {
+ @include border-top-right-radius($radii);
+ @include border-bottom-right-radius($radii);
+}
+
+@mixin border-bottom-radius($radii) {
+ @include border-bottom-left-radius($radii);
+ @include border-bottom-right-radius($radii);
+}
+
+@mixin border-left-radius($radii) {
+ @include border-top-left-radius($radii);
+ @include border-bottom-left-radius($radii);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_box-shadow.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_box-shadow.scss
new file mode 100644
index 000000000..40bffb4f8
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_box-shadow.scss
@@ -0,0 +1,12 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+ $shadow-2: false, $shadow-3: false,
+ $shadow-4: false, $shadow-5: false,
+ $shadow-6: false, $shadow-7: false,
+ $shadow-8: false, $shadow-9: false)
+ {
+ $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+ $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+
+ @include prefixer(box-shadow, $full);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_box-sizing.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_box-sizing.scss
new file mode 100644
index 000000000..8b629f9b8
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_box-sizing.scss
@@ -0,0 +1,4 @@
+@mixin box-sizing ($box) {
+// content-box | border-box | inherit
+ @include prefixer(box-sizing, $box);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_columns.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_columns.scss
new file mode 100644
index 000000000..8e06cb5bf
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_columns.scss
@@ -0,0 +1,47 @@
+@mixin columns($arg: auto) {
+// ||
+ @include prefixer(columns, $arg);
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+ @include prefixer(column-count, $int);
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+ @include prefixer(column-gap, $length);
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+ @include prefixer(columns-fill, $arg);
+}
+
+@mixin column-rule($arg) {
+// || ||
+ @include prefixer(column-rule, $arg);
+}
+
+@mixin column-rule-color($color) {
+ @include prefixer(column-rule-color, $color);
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+ @include prefixer(column-rule-style, $style);
+}
+
+@mixin column-rule-width ($width: none) {
+ @include prefixer(column-rule-width, $width);
+}
+
+@mixin column-span($arg: none) {
+// none || all
+ @include prefixer(column-span, $arg);
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+ @include prefixer(column-width, $length);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_flex-box.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_flex-box.scss
new file mode 100644
index 000000000..72c7dab46
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_flex-box.scss
@@ -0,0 +1,52 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+ @include display-box;
+ @include box-orient($orient);
+ @include box-pack($pack);
+ @include box-align($align);
+}
+
+@mixin display-box {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+ @include prefixer(box-orient, $orient);
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+ @include prefixer(box-pack, $pack);
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+ @include prefixer(box-align, $align);
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+ @include prefixer(box-direction, $direction);
+}
+
+@mixin box-lines($lines: single) {
+// single|multiple
+ @include prefixer(box-lines, $lines);
+}
+
+@mixin box-ordinal-group($int: 1) {
+ @include prefixer(box-ordinal-group, $int);
+}
+
+@mixin box-flex($value: 0.0) {
+ @include prefixer(box-flex, $value);
+}
+
+@mixin box-flex-group($int: 1) {
+ @include prefixer(box-flex-group, $int);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_inline-block.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_inline-block.scss
new file mode 100644
index 000000000..3272a0010
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_inline-block.scss
@@ -0,0 +1,8 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_linear-gradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_linear-gradient.scss
new file mode 100644
index 000000000..4d880d772
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_linear-gradient.scss
@@ -0,0 +1,43 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false,
+ $deprecated-pos1: left top,
+ $deprecated-pos2: left bottom,
+ $fallback: false) {
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+ // Set $G1 as the default fallback color
+ $fallback-color: nth($G1, 1);
+
+ // If $fallback is a color use that color as the fallback color
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
+ $fallback-color: $fallback;
+ }
+
+ background-color: $fallback-color;
+ background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+ background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+ background-image: -moz-linear-gradient($pos, $full);
+ background-image: -ms-linear-gradient($pos, $full);
+ background-image: -o-linear-gradient($pos, $full);
+ background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+// @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
+// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_prefixer.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_prefixer.scss
new file mode 100644
index 000000000..16b3ad6f2
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/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; }
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_radial-gradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_radial-gradient.scss
new file mode 100644
index 000000000..5e32c1e59
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_radial-gradient.scss
@@ -0,0 +1,76 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false,
+ $pos: 50% 50%,
+ $shape-size: ellipse cover,
+ $deprecated-pos1: center center,
+ $deprecated-pos2: center center,
+ $deprecated-radius1: 0,
+ $deprecated-radius2: 460,
+ $fallback: false) {
+
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+
+ @if ($pos-type != color) or ($first-val != "transparent") {
+ @if ($pos-type == number)
+ or ($first-val == "center")
+ or ($first-val == "top")
+ or ($first-val == "right")
+ or ($first-val == "bottom")
+ or ($first-val == "left") {
+
+ $pos: $value;
+
+ @if $pos == $G1 {
+ $G1: false;
+ }
+ }
+
+ @else if
+ ($first-val == "ellipse")
+ or ($first-val == "circle")
+ or ($first-val == "closest-side")
+ or ($first-val == "closest-corner")
+ or ($first-val == "farthest-side")
+ or ($first-val == "farthest-corner")
+ or ($first-val == "contain")
+ or ($first-val == "cover") {
+
+ $shape-size: $value;
+
+ @if $value == $G1 {
+ $G1: false;
+ }
+
+ @else if $value == $G2 {
+ $G2: false;
+ }
+ }
+ }
+ }
+
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+ $fallback-color: nth($G1, 1);
+
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
+ $fallback-color: $fallback;
+ }
+
+ background-color: $fallback-color;
+ background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
+ background-image: -webkit-radial-gradient($pos, $shape-size, $full);
+ background-image: -moz-radial-gradient($pos, $shape-size, $full);
+ background-image: -ms-radial-gradient($pos, $shape-size, $full);
+ background-image: -o-radial-gradient($pos, $shape-size, $full);
+ background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+}
+
+// Usage: Gradient position and shape-size are required. Color stops are optional.
+// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_transform.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_transform.scss
new file mode 100644
index 000000000..35737ad9c
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_transform.scss
@@ -0,0 +1,11 @@
+@mixin transform($property: none) {
+// none |
+ @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
+ @include prefixer(transform-origin, $axes, webkit, moz, ms, o);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_transition.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_transition.scss
new file mode 100644
index 000000000..4ec070eaa
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_transition.scss
@@ -0,0 +1,72 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($prop-1: all 0.15s ease-out 0,
+ $prop-2: false, $prop-3: false,
+ $prop-4: false, $prop-5: false,
+ $prop-6: false, $prop-7: false,
+ $prop-8: false, $prop-9: false)
+ {
+ $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+ $prop-6, $prop-7, $prop-8, $prop-9);
+
+ @include prefixer(transition, $full, webkit, moz, ms, o);
+}
+
+
+
+@mixin transition-property ($prop-1: all,
+ $prop-2: false, $prop-3: false,
+ $prop-4: false, $prop-5: false,
+ $prop-6: false, $prop-7: false,
+ $prop-8: false, $prop-9: false)
+ {
+ $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+ $prop-6, $prop-7, $prop-8, $prop-9);
+
+ -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,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(transition-duration, $full, webkit, moz, ms, o);
+}
+
+@mixin transition-timing-function ($motion-1: ease,
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
+ $motion-6, $motion-7, $motion-8, $motion-9);
+
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+ @include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
+}
+
+@mixin transition-delay ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(transition-transition-delay, $full, webkit, moz, ms, o);
+}
+
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_user-select.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_user-select.scss
new file mode 100644
index 000000000..66cd0e320
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/css3/_user-select.scss
@@ -0,0 +1,3 @@
+@mixin user-select($arg: none) {
+ @include prefixer(user-select, $arg, webkit, moz, ms);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_deprecated-webkit-gradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_deprecated-webkit-gradient.scss
new file mode 100644
index 000000000..16747d673
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_deprecated-webkit-gradient.scss
@@ -0,0 +1,44 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type,
+ $deprecated-pos1, $deprecated-pos2,
+ $full,
+ $deprecated-radius1: false, $deprecated-radius2: false) {
+ $gradient-list: ();
+ $gradient: false;
+ $full-length: length($full);
+ $percentage: false;
+ $gradient-type: $type;
+
+ @for $i from 1 through $full-length {
+ $gradient: nth($full, $i);
+
+ @if length($gradient) == 2 {
+ $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+ $gradient-list: join($gradient-list, $color-stop, comma);
+ }
+
+ @else {
+ @if $i == $full-length {
+ $percentage: 100%;
+ }
+
+ @else {
+ $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+ }
+
+ $color-stop: color-stop(unquote($percentage), $gradient);
+ $gradient-list: join($gradient-list, $color-stop, comma);
+ }
+ }
+
+ @if $type == radial {
+ $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+ }
+
+ @else if $type == linear {
+ $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+ }
+
+ @return $gradient;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_flex-grid.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_flex-grid.scss
new file mode 100644
index 000000000..707f994e1
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_flex-grid.scss
@@ -0,0 +1,35 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+// $fg-column: 60px; // Column Width
+// $fg-gutter: 25px; // Gutter Width
+// $fg-max-columns: 12; // Total Columns For Main Container
+//
+// div {
+// width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
+// margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//
+// p {
+// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+// float: left;
+// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
+// }
+//
+// blockquote {
+// float: left;
+// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+// }
+// }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_grid-width.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_grid-width.scss
new file mode 100644
index 000000000..8e63d83d6
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_grid-width.scss
@@ -0,0 +1,13 @@
+@function grid-width($n) {
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+// $gw-column: 100px; // Column Width
+// $gw-gutter: 40px; // Gutter Width
+//
+// div {
+// width: grid-width(4); // returns 520px;
+// margin-left: $gw-gutter; // returns 40px;
+// }
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_linear-gradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_linear-gradient.scss
new file mode 100644
index 000000000..3b10ca82a
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_linear-gradient.scss
@@ -0,0 +1,23 @@
+@function linear-gradient($pos: top, $G1: false, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false) {
+
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $type: linear;
+ $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: append($type, $gradient, comma);
+
+ @return $type-gradient;
+}
+
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_modular-scale.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_modular-scale.scss
new file mode 100644
index 000000000..dddccb522
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_modular-scale.scss
@@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ $value: ($value * $ratio);
+ }
+ }
+
+ @if $increment < 0 {
+ $increment: abs($increment);
+ @for $i from 1 through $increment {
+ $value: ($value / $ratio);
+ }
+ }
+
+ @return $value;
+}
+
+// div {
+// Increment Up GR with positive value
+// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
+//
+// Increment Down GR with negative value
+// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
+//
+// Can be used with ceil(round up) or floor(round down)
+// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+// }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+ @return modular-scale($value, $increment, 1.618)
+}
+
+// div {
+// font-size: golden-ratio(14px, 1); // returns: 22.652px
+// }
+//
+// goldenratiocalculator.com
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_radial-gradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_radial-gradient.scss
new file mode 100644
index 000000000..1f454412d
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_radial-gradient.scss
@@ -0,0 +1,62 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false,
+ $pos: 50% 50%,
+ $shape-size: ellipse cover,
+ $deprecated-pos1: center center,
+ $deprecated-pos2: center center,
+ $deprecated-radius1: 0,
+ $deprecated-radius2: 50,
+ $fallback: false) {
+
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+
+ @if ($pos-type != color) or ($first-val != "transparent") {
+ @if ($pos-type == number)
+ or ($first-val == "center")
+ or ($first-val == "top")
+ or ($first-val == "right")
+ or ($first-val == "bottom")
+ or ($first-val == "left") {
+
+ $pos: $value;
+
+ @if $pos == $G1 {
+ $G1: false;
+ }
+ }
+
+ @else if
+ ($first-val == "ellipse")
+ or ($first-val == "circle")
+ or ($first-val == "closest-side")
+ or ($first-val == "closest-corner")
+ or ($first-val == "farthest-side")
+ or ($first-val == "farthest-corner")
+ or ($first-val == "contain")
+ or ($first-val == "cover") {
+
+ $shape-size: $value;
+
+ @if $value == $G1 {
+ $G1: false;
+ }
+
+ @else if $value == $G2 {
+ $G2: false;
+ }
+ }
+ }
+ }
+
+ $type: radial;
+ $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: append($type, $gradient, comma);
+
+ @return $type-gradient;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_render-gradients.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_render-gradients.scss
new file mode 100644
index 000000000..fe7c799eb
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_render-gradients.scss
@@ -0,0 +1,14 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+ $vendor-gradients: false;
+ @if $vendor {
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+ }
+
+ @else if $vendor == false {
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+ $vendor-gradients: unquote($vendor-gradients);
+ }
+ @return $vendor-gradients;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_tint-shade.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_tint-shade.scss
new file mode 100644
index 000000000..f7172004a
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_tint-shade.scss
@@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+ @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+ @return mix(black, $color, $percent);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_transition-property-name.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/functions/_transition-property-name.scss
new file mode 100644
index 000000000..54cd42281
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/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;
+ }
+}
\ No newline at end of file
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-compact.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-compact.scss
new file mode 100644
index 000000000..f7d4ee8c8
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-compact.scss
@@ -0,0 +1,12 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+$name-1: 1px;
+$name-2: false;
+$name-3: false;
+$name-4: false;
+
+$full: compact($name-1, $name-2, $name-3, $name-4);
+
+div.compacted {
+ border: $full;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-flexgrid.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-flexgrid.scss
new file mode 100644
index 000000000..974fb8d35
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-flexgrid.scss
@@ -0,0 +1,21 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+$fg-column: 60px; // Column Width
+$fg-gutter: 25px; // Gutter Width
+$fg-max-columns: 12; // Total Columns For Main Container
+
+div {
+ width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
+ margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+
+ p {
+ width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+ float: left;
+ margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
+ }
+
+ blockquote {
+ float: left;
+ width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+ }
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-goldenratio.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-goldenratio.scss
new file mode 100644
index 000000000..51d6e0dc7
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-goldenratio.scss
@@ -0,0 +1,13 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+// Positive number will increment up the golden-ratio
+div.header {
+ font-size: golden-ratio(14px, 1);
+ // returns: 22.652px
+}
+
+div.footer {
+ // Negative number will increment down the golden-ratio
+ font-size: floor(golden-ratio(14px, -1));
+ // returns: 8px
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-gridwidth.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-gridwidth.scss
new file mode 100644
index 000000000..2978a294c
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-gridwidth.scss
@@ -0,0 +1,9 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+$gw-column: 100px; // Column Width
+$gw-gutter: 40px; // Gutter Width
+
+div {
+ width: grid-width(4); // returns 520px;
+ margin-left: $gw-gutter; // returns 40px;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-linearGradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-linearGradient.scss
new file mode 100644
index 000000000..faedd6997
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-linearGradient.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.linearGrad {
+ @include background-image(linear-gradient(white 0, yellow 50%, transparent 50%));
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-modularscale.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-modularscale.scss
new file mode 100644
index 000000000..31d2e577d
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-modularscale.scss
@@ -0,0 +1,24 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.scaleUp {
+ // Increment Up GR with positive value
+ font-size: modular-scale(14px, 1, 1.618);
+ // returns: 22.652px
+}
+
+div.scaleDown {
+ // Increment Down GR with negative value
+ font-size: modular-scale(14px, -1, 1.618);
+ // returns: 8.653px
+}
+
+// Can be used with ceil(round up) or floor(round down)
+div.scaleFloor {
+ font-size: floor(modular-scale(14px, 1, 1.618));
+ // returns: 22px
+}
+
+div.scaleCeil {
+ font-size: ceil(modular-scale(14px, 1, 1.618));
+ // returns: 23px
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-radialgradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-radialgradient.scss
new file mode 100644
index 000000000..30f1f3ff0
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-radialgradient.scss
@@ -0,0 +1,13 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.one {
+ @include background-image(radial-gradient(#1e5799, #3dc3d1));
+}
+
+div.two {
+ @include background-image(radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1));
+}
+
+div.three {
+ @include background-image(radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef));
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-tintshade.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-tintshade.scss
new file mode 100644
index 000000000..7ec7e710b
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/function-tintshade.scss
@@ -0,0 +1,9 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.tint {
+ background: tint(red, 40%);
+}
+
+div.shade {
+ background: shade(red, 40%);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-animation.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-animation.scss
new file mode 100644
index 000000000..94290b02e
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-animation.scss
@@ -0,0 +1,11 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+box:hover {
+ @include animation-name(scale, slide);
+ @include animation-duration(2s);
+ @include animation-timing-function(ease);
+ @include animation-iteration-count(infinite);
+
+ // Animation shorthand works the same as the CSS3 animation shorthand
+ @include animation(scale 1.0s ease-in, slide 2.0s ease);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-appearance.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-appearance.scss
new file mode 100644
index 000000000..1b5a28f83
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-appearance.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.test {
+ @include appearance(none);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-bgimage.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-bgimage.scss
new file mode 100644
index 000000000..ac3c0cea0
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-bgimage.scss
@@ -0,0 +1,22 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+// Multiple image assets
+div.multiImage {
+ @include background-image(url("/images/a.png"), url("images/b.png"));
+}
+
+// Image asset with a linear-gradient
+div.ImageAndGradient {
+ @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
+}
+
+// Multiple linear-gradients - Demo
+div.multiGradient {
+ @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%)));
+}
+
+// NOT SUPPORTED - Multiple image assets with shorthand notation
+div.shorthand {
+ @include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-bgsize.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-bgsize.scss
new file mode 100644
index 000000000..1e39e68f6
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-bgsize.scss
@@ -0,0 +1,9 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.single {
+ @include background-size(50% 100%); // Single
+}
+
+div.double {
+ @include background-size(50% 100%, 75% 100%); // Multiple
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-borderimage.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-borderimage.scss
new file mode 100644
index 000000000..14cf6de19
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-borderimage.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.test {
+ @include border-image(url(/images/border.png) 27 repeat);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-borderradius.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-borderradius.scss
new file mode 100644
index 000000000..eb507f2ff
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-borderradius.scss
@@ -0,0 +1,25 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.one {
+ @include border-radius(10px);
+}
+
+div.all {
+ @include border-radius(5px 5px 2px 2px);
+}
+
+//You can also specify individual corners.
+div.individual {
+ @include border-top-left-radius(5px);
+ @include border-top-right-radius(5px);
+ @include border-bottom-right-radius(5px);
+ @include border-bottom-left-radius(5px);
+}
+
+//Individual sides are supported as well.
+div.sides {
+ @include border-top-radius(5px);
+ @include border-bottom-radius(5px);
+ @include border-left-radius(5px);
+ @include border-right-radius(5px);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-boxshadow.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-boxshadow.scss
new file mode 100644
index 000000000..22f0c2404
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-boxshadow.scss
@@ -0,0 +1,8 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.single {
+ @include box-shadow(0 0 5px 3px hsla(0, 0%, 0%, 0.65));
+}
+div.double {
+ @include box-shadow(1px 1px 5px 1px green, -1px -1px 5px 1px blue);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-boxsizing.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-boxsizing.scss
new file mode 100644
index 000000000..21f4980b2
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-boxsizing.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.bbox {
+ @include box-sizing(border-box);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-columns.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-columns.scss
new file mode 100644
index 000000000..e9b9c278b
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-columns.scss
@@ -0,0 +1,9 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.cols {
+ @include columns(12 8em);
+}
+
+div.colrules {
+ @include column-rule(1px solid green);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-flexbox.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-flexbox.scss
new file mode 100644
index 000000000..09e95aef3
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-flexbox.scss
@@ -0,0 +1,18 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.parent {
+ @include display-box;
+ @include box-align(start);
+ @include box-orient(horizontal);
+ @include box-pack(start);
+}
+
+div.parent > div.child {
+ @include box-flex(2);
+}
+
+// Alternative custom shorthand mixin.
+div.parent {
+ @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
+ @include box(vertical, start, stretch);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-fontface.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-fontface.scss
new file mode 100644
index 000000000..b49f3cd0f
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-fontface.scss
@@ -0,0 +1,13 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.normal {
+ @include font-face(nobile, '/fonts/nobile');
+}
+
+div.bold {
+ @include font-face(nobile, '/fonts/nobile_bold', bold);
+}
+
+div.italic {
+ @include font-face(nobile, '/fonts/nobile_italic', normal, italic);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-inlineblock.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-inlineblock.scss
new file mode 100644
index 000000000..f1d0a3292
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-inlineblock.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.inlinemyblock {
+ @include inline-block;
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-lineargradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-lineargradient.scss
new file mode 100644
index 000000000..1ff1faf5d
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-lineargradient.scss
@@ -0,0 +1,17 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.linearone {
+ @include linear-gradient(#1e5799, #2989d8);
+}
+
+div.lineartwo {
+ @include linear-gradient(top, #8fdce5, #3dc3d1);
+}
+
+div.linearthree {
+ @include linear-gradient(top, #8fdce5, #3dc3d1, $fallback: red);
+}
+
+div.linearfour {
+ @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-radialgradient.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-radialgradient.scss
new file mode 100644
index 000000000..07736daf6
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-radialgradient.scss
@@ -0,0 +1,13 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.radialone {
+ @include radial-gradient(#1e5799, #3dc3d1);
+}
+
+div.radialtwo {
+ @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
+}
+
+div.radialthree {
+ @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef, $fallback: red);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-transform.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-transform.scss
new file mode 100644
index 000000000..76ba071b0
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-transform.scss
@@ -0,0 +1,9 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.yTransform {
+ @include transform(translateY(50px));
+}
+
+div.topTranform {
+ @include transform-origin(center top);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-transitions.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-transitions.scss
new file mode 100644
index 000000000..9fea03a70
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-transitions.scss
@@ -0,0 +1,14 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.transitionAll {
+ @include transition (all 2.0s ease-in-out);
+}
+
+div.transitionOpacity {
+ @include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
+}
+
+// Transition a vendor-prefixed property (transform)
+div.transitionVendor {
+ @include transition (transition-property-names((transform, color, background), moz) 1.0s ease-in 0s);
+}
diff --git a/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-userselect.scss b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-userselect.scss
new file mode 100644
index 000000000..7acd23e74
--- /dev/null
+++ b/wro4j-extensions/src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/mixin-userselect.scss
@@ -0,0 +1,5 @@
+@import "src/test/resources/ro/isdc/wro/extensions/processor/bourboncss/test/bourbon210/bourbon";
+
+div.sel {
+ @include user-select(none);
+}