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); +}