You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by hl...@apache.org on 2013/06/03 19:48:59 UTC
[3/6] Add smarter caching to the Less compiler
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/mixins.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/mixins.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/mixins.less
new file mode 100644
index 0000000..79d8892
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/mixins.less
@@ -0,0 +1,702 @@
+//
+// Mixins
+// --------------------------------------------------
+
+
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+.clearfix {
+ *zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ // Fixes Opera/contenteditable bug:
+ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+ line-height: 0;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Webkit-style focus
+// ------------------
+.tab-focus() {
+ // Default
+ outline: thin dotted #333;
+ // Webkit
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+
+// Center-align a block level element
+// ----------------------------------
+.center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+// IE7 inline-block
+// ----------------
+.ie7-inline-block() {
+ *display: inline; /* IE7 inline-block hack */
+ *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+.ie7-restore-left-whitespace() {
+ *margin-left: .3em;
+
+ &:first-child {
+ *margin-left: 0;
+ }
+}
+
+.ie7-restore-right-whitespace() {
+ *margin-right: .3em;
+}
+
+// Sizing shortcuts
+// -------------------------
+.size(@height, @width) {
+ width: @width;
+ height: @height;
+}
+.square(@size) {
+ .size(@size, @size);
+}
+
+// Placeholder text
+// -------------------------
+.placeholder(@color: @placeholderText) {
+ &:-moz-placeholder {
+ color: @color;
+ }
+ &:-ms-input-placeholder {
+ color: @color;
+ }
+ &::-webkit-input-placeholder {
+ color: @color;
+ }
+}
+
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+.text-overflow() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+// CSS image replacement
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+.hide-text {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+
+
+// FONTS
+// --------------------------------------------------
+
+#font {
+ #family {
+ .serif() {
+ font-family: @serifFontFamily;
+ }
+ .sans-serif() {
+ font-family: @sansFontFamily;
+ }
+ .monospace() {
+ font-family: @monoFontFamily;
+ }
+ }
+ .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .sans-serif;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+ .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+ #font > #family > .monospace;
+ #font > .shorthand(@size, @weight, @lineHeight);
+ }
+}
+
+
+// FORMS
+// --------------------------------------------------
+
+// Block level inputs
+.input-block-level {
+ display: block;
+ width: 100%;
+ min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ .box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
+
+
+
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+ // Set the text color
+ .control-label,
+ .help-block,
+ .help-inline {
+ color: @textColor;
+ }
+ // Style inputs accordingly
+ .checkbox,
+ .radio,
+ input,
+ select,
+ textarea {
+ color: @textColor;
+ }
+ input,
+ select,
+ textarea {
+ border-color: @borderColor;
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+ &:focus {
+ border-color: darken(@borderColor, 10%);
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
+ .box-shadow(@shadow);
+ }
+ }
+ // Give a small background color for input-prepend/-append
+ .input-prepend .add-on,
+ .input-append .add-on {
+ color: @textColor;
+ background-color: @backgroundColor;
+ border-color: @textColor;
+ }
+}
+
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Border Radius
+.border-radius(@radius) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+
+// Single Corner Border Radius
+.border-top-left-radius(@radius) {
+ -webkit-border-top-left-radius: @radius;
+ -moz-border-radius-topleft: @radius;
+ border-top-left-radius: @radius;
+}
+.border-top-right-radius(@radius) {
+ -webkit-border-top-right-radius: @radius;
+ -moz-border-radius-topright: @radius;
+ border-top-right-radius: @radius;
+}
+.border-bottom-right-radius(@radius) {
+ -webkit-border-bottom-right-radius: @radius;
+ -moz-border-radius-bottomright: @radius;
+ border-bottom-right-radius: @radius;
+}
+.border-bottom-left-radius(@radius) {
+ -webkit-border-bottom-left-radius: @radius;
+ -moz-border-radius-bottomleft: @radius;
+ border-bottom-left-radius: @radius;
+}
+
+// Single Side Border Radius
+.border-top-radius(@radius) {
+ .border-top-right-radius(@radius);
+ .border-top-left-radius(@radius);
+}
+.border-right-radius(@radius) {
+ .border-top-right-radius(@radius);
+ .border-bottom-right-radius(@radius);
+}
+.border-bottom-radius(@radius) {
+ .border-bottom-right-radius(@radius);
+ .border-bottom-left-radius(@radius);
+}
+.border-left-radius(@radius) {
+ .border-top-left-radius(@radius);
+ .border-bottom-left-radius(@radius);
+}
+
+// Drop shadows
+.box-shadow(@shadow) {
+ -webkit-box-shadow: @shadow;
+ -moz-box-shadow: @shadow;
+ box-shadow: @shadow;
+}
+
+// Transitions
+.transition(@transition) {
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -o-transition: @transition;
+ transition: @transition;
+}
+.transition-delay(@transition-delay) {
+ -webkit-transition-delay: @transition-delay;
+ -moz-transition-delay: @transition-delay;
+ -o-transition-delay: @transition-delay;
+ transition-delay: @transition-delay;
+}
+.transition-duration(@transition-duration) {
+ -webkit-transition-duration: @transition-duration;
+ -moz-transition-duration: @transition-duration;
+ -o-transition-duration: @transition-duration;
+ transition-duration: @transition-duration;
+}
+
+// Transformations
+.rotate(@degrees) {
+ -webkit-transform: rotate(@degrees);
+ -moz-transform: rotate(@degrees);
+ -ms-transform: rotate(@degrees);
+ -o-transform: rotate(@degrees);
+ transform: rotate(@degrees);
+}
+.scale(@ratio) {
+ -webkit-transform: scale(@ratio);
+ -moz-transform: scale(@ratio);
+ -ms-transform: scale(@ratio);
+ -o-transform: scale(@ratio);
+ transform: scale(@ratio);
+}
+.translate(@x, @y) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
+.skew(@x, @y) {
+ -webkit-transform: skew(@x, @y);
+ -moz-transform: skew(@x, @y);
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
+ -o-transform: skew(@x, @y);
+ transform: skew(@x, @y);
+ -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
+}
+.translate3d(@x, @y, @z) {
+ -webkit-transform: translate3d(@x, @y, @z);
+ -moz-transform: translate3d(@x, @y, @z);
+ -o-transform: translate3d(@x, @y, @z);
+ transform: translate3d(@x, @y, @z);
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+.backface-visibility(@visibility){
+ -webkit-backface-visibility: @visibility;
+ -moz-backface-visibility: @visibility;
+ backface-visibility: @visibility;
+}
+
+// Background clipping
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
+.background-clip(@clip) {
+ -webkit-background-clip: @clip;
+ -moz-background-clip: @clip;
+ background-clip: @clip;
+}
+
+// Background sizing
+.background-size(@size) {
+ -webkit-background-size: @size;
+ -moz-background-size: @size;
+ -o-background-size: @size;
+ background-size: @size;
+}
+
+
+// Box sizing
+.box-sizing(@boxmodel) {
+ -webkit-box-sizing: @boxmodel;
+ -moz-box-sizing: @boxmodel;
+ box-sizing: @boxmodel;
+}
+
+// User select
+// For selecting text on the page
+.user-select(@select) {
+ -webkit-user-select: @select;
+ -moz-user-select: @select;
+ -ms-user-select: @select;
+ -o-user-select: @select;
+ user-select: @select;
+}
+
+// Resize anything
+.resizable(@direction) {
+ resize: @direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
+ -webkit-column-count: @columnCount;
+ -moz-column-count: @columnCount;
+ column-count: @columnCount;
+ -webkit-column-gap: @columnGap;
+ -moz-column-gap: @columnGap;
+ column-gap: @columnGap;
+}
+
+// Optional hyphenation
+.hyphens(@mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: @mode;
+ -moz-hyphens: @mode;
+ -ms-hyphens: @mode;
+ -o-hyphens: @mode;
+ hyphens: @mode;
+}
+
+// Opacity
+.opacity(@opacity) {
+ opacity: @opacity / 100;
+ filter: ~"alpha(opacity=@{opacity})";
+}
+
+
+
+// BACKGROUNDS
+// --------------------------------------------------
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+#translucent {
+ .background(@color: @white, @alpha: 1) {
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ }
+ .border(@color: @white, @alpha: 1) {
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+ .background-clip(padding-box);
+ }
+}
+
+// Gradient Bar Colors for buttons and alerts
+.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+ color: @textColor;
+ text-shadow: @textShadow;
+ #gradient > .vertical(@primaryColor, @secondaryColor);
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+#gradient {
+ .horizontal(@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
+ }
+ .vertical(@startColor: #555, @endColor: #333) {
+ background-color: mix(@startColor, @endColor, 60%);
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
+ }
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
+ }
+ .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+ background-color: mix(@midColor, @endColor, 80%);
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+ background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
+ background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
+ background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
+ background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
+ background-repeat: no-repeat;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
+ }
+
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+ background-color: mix(@midColor, @endColor, 80%);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+ background-repeat: no-repeat;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
+ }
+ .radial(@innerColor: #555, @outerColor: #333) {
+ background-color: @outerColor;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
+ background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
+ background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
+ background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
+ background-repeat: no-repeat;
+ }
+ .striped(@color: #555, @angle: 45deg) {
+ background-color: @color;
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+ background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+ }
+}
+// Reset filters for IE
+.reset-filter() {
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
+
+
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Horizontal dividers
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+.nav-divider(@top: #e5e5e5, @bottom: @white) {
+ // IE7 needs a set width since we gave a height. Restricting just
+ // to IE7 to keep the 1px left/right space in other browsers.
+ // It is unclear where IE is getting the extra space that we need
+ // to negative-margin away, but so it goes.
+ *width: 100%;
+ height: 1px;
+ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
+ *margin: -5px 0 5px;
+ overflow: hidden;
+ background-color: @top;
+ border-bottom: 1px solid @bottom;
+}
+
+// Button backgrounds
+// ------------------
+.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+ .gradientBar(@startColor, @endColor, @textColor, @textShadow);
+ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+ .reset-filter();
+
+ // in these cases the gradient won't cover the background, so we override
+ &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
+ color: @textColor;
+ background-color: @endColor;
+ *background-color: darken(@endColor, 5%);
+ }
+
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
+ &:active,
+ &.active {
+ background-color: darken(@endColor, 10%) e("\9");
+ }
+}
+
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+.navbarVerticalAlign(@elementHeight) {
+ margin-top: (@navbarHeight - @elementHeight) / 2;
+}
+
+
+
+// Grid System
+// -----------
+
+// Centered container element
+.container-fixed() {
+ margin-right: auto;
+ margin-left: auto;
+ .clearfix();
+}
+
+// Table columns
+.tableColumns(@columnSpan: 1) {
+ float: none; // undo default grid column styles
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+ margin-left: 0; // undo default grid column styles
+}
+
+// Make a Grid
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+.makeRow() {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+}
+.makeColumn(@columns: 1, @offset: 0) {
+ float: left;
+ margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+}
+
+// The Grid
+#grid {
+
+ .core (@gridColumnWidth, @gridGutterWidth) {
+
+ .spanX (@index) when (@index > 0) {
+ .span@{index} { .span(@index); }
+ .spanX(@index - 1);
+ }
+ .spanX (0) {}
+
+ .offsetX (@index) when (@index > 0) {
+ .offset@{index} { .offset(@index); }
+ .offsetX(@index - 1);
+ }
+ .offsetX (0) {}
+
+ .offset (@columns) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
+ }
+
+ .span (@columns) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ }
+
+ .row {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+ }
+
+ [class*="span"] {
+ float: left;
+ min-height: 1px; // prevent collapsing columns
+ margin-left: @gridGutterWidth;
+ }
+
+ // Set the container width, and override it for fixed navbars in media queries
+ .container,
+ .navbar-static-top .container,
+ .navbar-fixed-top .container,
+ .navbar-fixed-bottom .container { .span(@gridColumns); }
+
+ // generate .spanX and .offsetX
+ .spanX (@gridColumns);
+ .offsetX (@gridColumns);
+
+ }
+
+ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
+
+ .spanX (@index) when (@index > 0) {
+ .span@{index} { .span(@index); }
+ .spanX(@index - 1);
+ }
+ .spanX (0) {}
+
+ .offsetX (@index) when (@index > 0) {
+ .offset@{index} { .offset(@index); }
+ .offset@{index}:first-child { .offsetFirstChild(@index); }
+ .offsetX(@index - 1);
+ }
+ .offsetX (0) {}
+
+ .offset (@columns) {
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
+ }
+
+ .offsetFirstChild (@columns) {
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
+ }
+
+ .span (@columns) {
+ width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+ *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
+ }
+
+ .row-fluid {
+ width: 100%;
+ .clearfix();
+ [class*="span"] {
+ .input-block-level();
+ float: left;
+ margin-left: @fluidGridGutterWidth;
+ *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
+ }
+ [class*="span"]:first-child {
+ margin-left: 0;
+ }
+
+ // Space grid-sized controls properly if multiple per line
+ .controls-row [class*="span"] + [class*="span"] {
+ margin-left: @fluidGridGutterWidth;
+ }
+
+ // generate .spanX and .offsetX
+ .spanX (@gridColumns);
+ .offsetX (@gridColumns);
+ }
+
+ }
+
+ .input(@gridColumnWidth, @gridGutterWidth) {
+
+ .spanX (@index) when (@index > 0) {
+ input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
+ .spanX(@index - 1);
+ }
+ .spanX (0) {}
+
+ .span(@columns) {
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
+ }
+
+ input,
+ textarea,
+ .uneditable-input {
+ margin-left: 0; // override margin-left from core grid system
+ }
+
+ // Space grid-sized controls properly if multiple per line
+ .controls-row [class*="span"] + [class*="span"] {
+ margin-left: @gridGutterWidth;
+ }
+
+ // generate .spanX
+ .spanX (@gridColumns);
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/modals.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/modals.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/modals.less
new file mode 100644
index 0000000..8e272d4
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/modals.less
@@ -0,0 +1,95 @@
+//
+// Modals
+// --------------------------------------------------
+
+// Background
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: @zindexModalBackdrop;
+ background-color: @black;
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+ .opacity(80);
+}
+
+// Base modal
+.modal {
+ position: fixed;
+ top: 10%;
+ left: 50%;
+ z-index: @zindexModal;
+ width: 560px;
+ margin-left: -280px;
+ background-color: @white;
+ border: 1px solid #999;
+ border: 1px solid rgba(0,0,0,.3);
+ *border: 1px solid #999; /* IE6-7 */
+ .border-radius(6px);
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+ .background-clip(padding-box);
+ // Remove focus outline from opened modal
+ outline: none;
+
+ &.fade {
+ .transition(e('opacity .3s linear, top .3s ease-out'));
+ top: -25%;
+ }
+ &.fade.in { top: 10%; }
+}
+.modal-header {
+ padding: 9px 15px;
+ border-bottom: 1px solid #eee;
+ // Close icon
+ .close { margin-top: 2px; }
+ // Heading
+ h3 {
+ margin: 0;
+ line-height: 30px;
+ }
+}
+
+// Body (where all modal content resides)
+.modal-body {
+ position: relative;
+ overflow-y: auto;
+ max-height: 400px;
+ padding: 15px;
+}
+// Remove bottom margin if need be
+.modal-form {
+ margin-bottom: 0;
+}
+
+// Footer (for actions)
+.modal-footer {
+ padding: 14px 15px 15px;
+ margin-bottom: 0;
+ text-align: right; // right align buttons
+ background-color: #f5f5f5;
+ border-top: 1px solid #ddd;
+ .border-radius(0 0 6px 6px);
+ .box-shadow(inset 0 1px 0 @white);
+ .clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+ // Properly space out buttons
+ .btn + .btn {
+ margin-left: 5px;
+ margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+ }
+ // but override that for button groups
+ .btn-group .btn + .btn {
+ margin-left: -1px;
+ }
+ // and override it for block buttons as well
+ .btn-block + .btn-block {
+ margin-left: 0;
+ }
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/navbar.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/navbar.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/navbar.less
new file mode 100644
index 0000000..93d09bc
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/navbar.less
@@ -0,0 +1,497 @@
+//
+// Navbars (Redux)
+// --------------------------------------------------
+
+
+// COMMON STYLES
+// -------------
+
+// Base class and wrapper
+.navbar {
+ overflow: visible;
+ margin-bottom: @baseLineHeight;
+
+ // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
+ *position: relative;
+ *z-index: 2;
+}
+
+// Inner for background effects
+// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
+.navbar-inner {
+ min-height: @navbarHeight;
+ padding-left: 20px;
+ padding-right: 20px;
+ #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+ border: 1px solid @navbarBorder;
+ .border-radius(@baseBorderRadius);
+ .box-shadow(0 1px 4px rgba(0,0,0,.065));
+
+ // Prevent floats from breaking the navbar
+ .clearfix();
+}
+
+// Set width to auto for default container
+// We then reset it for fixed navbars in the #gridSystem mixin
+.navbar .container {
+ width: auto;
+}
+
+// Override the default collapsed state
+.nav-collapse.collapse {
+ height: auto;
+ overflow: visible;
+}
+
+
+// Brand: website or project name
+// -------------------------
+.navbar .brand {
+ float: left;
+ display: block;
+ // Vertically center the text given @navbarHeight
+ padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
+ margin-left: -20px; // negative indent to left-align the text down the page
+ font-size: 20px;
+ font-weight: 200;
+ color: @navbarBrandColor;
+ text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+}
+
+// Plain text in topbar
+// -------------------------
+.navbar-text {
+ margin-bottom: 0;
+ line-height: @navbarHeight;
+ color: @navbarText;
+}
+
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link {
+ color: @navbarLinkColor;
+ &:hover,
+ &:focus {
+ color: @navbarLinkColorHover;
+ }
+}
+
+// Dividers in navbar
+// -------------------------
+.navbar .divider-vertical {
+ height: @navbarHeight;
+ margin: 0 9px;
+ border-left: 1px solid @navbarBackground;
+ border-right: 1px solid @navbarBackgroundHighlight;
+}
+
+// Buttons in navbar
+// -------------------------
+.navbar .btn,
+.navbar .btn-group {
+ .navbarVerticalAlign(30px); // Vertically center in navbar
+}
+.navbar .btn-group .btn,
+.navbar .input-prepend .btn,
+.navbar .input-append .btn,
+.navbar .input-prepend .btn-group,
+.navbar .input-append .btn-group {
+ margin-top: 0; // then undo the margin here so we don't accidentally double it
+}
+
+// Navbar forms
+// -------------------------
+.navbar-form {
+ margin-bottom: 0; // remove default bottom margin
+ .clearfix();
+ input,
+ select,
+ .radio,
+ .checkbox {
+ .navbarVerticalAlign(30px); // Vertically center in navbar
+ }
+ input,
+ select,
+ .btn {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+ input[type="image"],
+ input[type="checkbox"],
+ input[type="radio"] {
+ margin-top: 3px;
+ }
+ .input-append,
+ .input-prepend {
+ margin-top: 5px;
+ white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
+ input {
+ margin-top: 0; // remove the margin on top since it's on the parent
+ }
+ }
+}
+
+// Navbar search
+// -------------------------
+.navbar-search {
+ position: relative;
+ float: left;
+ .navbarVerticalAlign(30px); // Vertically center in navbar
+ margin-bottom: 0;
+ .search-query {
+ margin-bottom: 0;
+ padding: 4px 14px;
+ #font > .sans-serif(13px, normal, 1);
+ .border-radius(15px); // redeclare because of specificity of the type attribute
+ }
+}
+
+
+
+// Static navbar
+// -------------------------
+
+.navbar-static-top {
+ position: static;
+ margin-bottom: 0; // remove 18px margin for default navbar
+ .navbar-inner {
+ .border-radius(0);
+ }
+}
+
+
+
+// Fixed navbar
+// -------------------------
+
+// Shared (top/bottom) styles
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: @zindexFixedNavbar;
+ margin-bottom: 0; // remove 18px margin for default navbar
+}
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
+ border-width: 0 0 1px;
+}
+.navbar-fixed-bottom .navbar-inner {
+ border-width: 1px 0 0;
+}
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
+ padding-left: 0;
+ padding-right: 0;
+ .border-radius(0);
+}
+
+// Reset container width
+// Required here as we reset the width earlier on and the grid mixins don't override early enough
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+ #grid > .core > .span(@gridColumns);
+}
+
+// Fixed to top
+.navbar-fixed-top {
+ top: 0;
+}
+.navbar-fixed-top,
+.navbar-static-top {
+ .navbar-inner {
+ .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
+ }
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+ bottom: 0;
+ .navbar-inner {
+ .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
+ }
+}
+
+
+
+// NAVIGATION
+// ----------
+
+.navbar .nav {
+ position: relative;
+ left: 0;
+ display: block;
+ float: left;
+ margin: 0 10px 0 0;
+}
+.navbar .nav.pull-right {
+ float: right; // redeclare due to specificity
+ margin-right: 0; // remove margin on float right nav
+}
+.navbar .nav > li {
+ float: left;
+}
+
+// Links
+.navbar .nav > li > a {
+ float: none;
+ // Vertically center the text given @navbarHeight
+ padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
+ color: @navbarLinkColor;
+ text-decoration: none;
+ text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+}
+.navbar .nav .dropdown-toggle .caret {
+ margin-top: 8px;
+}
+
+// Hover/focus
+.navbar .nav > li > a:focus,
+.navbar .nav > li > a:hover {
+ background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
+ color: @navbarLinkColorHover;
+ text-decoration: none;
+}
+
+// Active nav items
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+ color: @navbarLinkColorActive;
+ text-decoration: none;
+ background-color: @navbarLinkBackgroundActive;
+ .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
+}
+
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+ display: none;
+ float: right;
+ padding: 7px 10px;
+ margin-left: 5px;
+ margin-right: 5px;
+ .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
+ .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
+}
+.navbar .btn-navbar .icon-bar {
+ display: block;
+ width: 18px;
+ height: 2px;
+ background-color: #f5f5f5;
+ .border-radius(1px);
+ .box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+ margin-top: 3px;
+}
+
+
+
+// Dropdown menus
+// --------------
+
+// Menu position and menu carets
+.navbar .nav > li > .dropdown-menu {
+ &:before {
+ content: '';
+ display: inline-block;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid #ccc;
+ border-bottom-color: @dropdownBorder;
+ position: absolute;
+ top: -7px;
+ left: 9px;
+ }
+ &:after {
+ content: '';
+ display: inline-block;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid @dropdownBackground;
+ position: absolute;
+ top: -6px;
+ left: 10px;
+ }
+}
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .nav > li > .dropdown-menu {
+ &:before {
+ border-top: 7px solid #ccc;
+ border-top-color: @dropdownBorder;
+ border-bottom: 0;
+ bottom: -7px;
+ top: auto;
+ }
+ &:after {
+ border-top: 6px solid @dropdownBackground;
+ border-bottom: 0;
+ bottom: -6px;
+ top: auto;
+ }
+}
+
+// Caret should match text color on hover/focus
+.navbar .nav li.dropdown > a:hover .caret,
+.navbar .nav li.dropdown > a:focus .caret {
+ border-top-color: @navbarLinkColorHover;
+ border-bottom-color: @navbarLinkColorHover;
+}
+
+// Remove background color from open dropdown
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+ background-color: @navbarLinkBackgroundActive;
+ color: @navbarLinkColorActive;
+}
+.navbar .nav li.dropdown > .dropdown-toggle .caret {
+ border-top-color: @navbarLinkColor;
+ border-bottom-color: @navbarLinkColor;
+}
+.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+ border-top-color: @navbarLinkColorActive;
+ border-bottom-color: @navbarLinkColorActive;
+}
+
+// Right aligned menus need alt position
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right {
+ left: auto;
+ right: 0;
+ &:before {
+ left: auto;
+ right: 12px;
+ }
+ &:after {
+ left: auto;
+ right: 13px;
+ }
+ .dropdown-menu {
+ left: auto;
+ right: 100%;
+ margin-left: 0;
+ margin-right: -1px;
+ .border-radius(6px 0 6px 6px);
+ }
+}
+
+
+// Inverted navbar
+// -------------------------
+
+.navbar-inverse {
+
+ .navbar-inner {
+ #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
+ border-color: @navbarInverseBorder;
+ }
+
+ .brand,
+ .nav > li > a {
+ color: @navbarInverseLinkColor;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ &:hover,
+ &:focus {
+ color: @navbarInverseLinkColorHover;
+ }
+ }
+
+ .brand {
+ color: @navbarInverseBrandColor;
+ }
+
+ .navbar-text {
+ color: @navbarInverseText;
+ }
+
+ .nav > li > a:focus,
+ .nav > li > a:hover {
+ background-color: @navbarInverseLinkBackgroundHover;
+ color: @navbarInverseLinkColorHover;
+ }
+
+ .nav .active > a,
+ .nav .active > a:hover,
+ .nav .active > a:focus {
+ color: @navbarInverseLinkColorActive;
+ background-color: @navbarInverseLinkBackgroundActive;
+ }
+
+ // Inline text links
+ .navbar-link {
+ color: @navbarInverseLinkColor;
+ &:hover,
+ &:focus {
+ color: @navbarInverseLinkColorHover;
+ }
+ }
+
+ // Dividers in navbar
+ .divider-vertical {
+ border-left-color: @navbarInverseBackground;
+ border-right-color: @navbarInverseBackgroundHighlight;
+ }
+
+ // Dropdowns
+ .nav li.dropdown.open > .dropdown-toggle,
+ .nav li.dropdown.active > .dropdown-toggle,
+ .nav li.dropdown.open.active > .dropdown-toggle {
+ background-color: @navbarInverseLinkBackgroundActive;
+ color: @navbarInverseLinkColorActive;
+ }
+ .nav li.dropdown > a:hover .caret,
+ .nav li.dropdown > a:focus .caret {
+ border-top-color: @navbarInverseLinkColorActive;
+ border-bottom-color: @navbarInverseLinkColorActive;
+ }
+ .nav li.dropdown > .dropdown-toggle .caret {
+ border-top-color: @navbarInverseLinkColor;
+ border-bottom-color: @navbarInverseLinkColor;
+ }
+ .nav li.dropdown.open > .dropdown-toggle .caret,
+ .nav li.dropdown.active > .dropdown-toggle .caret,
+ .nav li.dropdown.open.active > .dropdown-toggle .caret {
+ border-top-color: @navbarInverseLinkColorActive;
+ border-bottom-color: @navbarInverseLinkColorActive;
+ }
+
+ // Navbar search
+ .navbar-search {
+ .search-query {
+ color: @white;
+ background-color: @navbarInverseSearchBackground;
+ border-color: @navbarInverseSearchBorder;
+ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
+ .transition(none);
+ .placeholder(@navbarInverseSearchPlaceholderColor);
+
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
+ &:focus,
+ &.focused {
+ padding: 5px 15px;
+ color: @grayDark;
+ text-shadow: 0 1px 0 @white;
+ background-color: @navbarInverseSearchBackgroundFocus;
+ border: 0;
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
+ outline: 0;
+ }
+ }
+ }
+
+ // Navbar collapse button
+ .btn-navbar {
+ .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/navs.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/navs.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/navs.less
new file mode 100644
index 0000000..01cd805
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/navs.less
@@ -0,0 +1,409 @@
+//
+// Navs
+// --------------------------------------------------
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+ margin-left: 0;
+ margin-bottom: @baseLineHeight;
+ list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+ display: block;
+}
+.nav > li > a:hover,
+.nav > li > a:focus {
+ text-decoration: none;
+ background-color: @grayLighter;
+}
+
+// Prevent IE8 from misplacing imgs
+// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+.nav > li > a > img {
+ max-width: none;
+}
+
+// Redeclare pull classes because of specifity
+.nav > .pull-right {
+ float: right;
+}
+
+// Nav headers (for dropdowns and lists)
+.nav-header {
+ display: block;
+ padding: 3px 15px;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+ margin-top: 9px;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav-list {
+ padding-left: 15px;
+ padding-right: 15px;
+ margin-bottom: 0;
+}
+.nav-list > li > a,
+.nav-list .nav-header {
+ margin-left: -15px;
+ margin-right: -15px;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav-list > li > a {
+ padding: 3px 15px;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
+ color: @white;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+ background-color: @linkColor;
+}
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
+ margin-right: 2px;
+}
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider {
+ .nav-divider();
+}
+
+
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.nav-tabs,
+.nav-pills {
+ .clearfix();
+}
+.nav-tabs > li,
+.nav-pills > li {
+ float: left;
+}
+.nav-tabs > li > a,
+.nav-pills > li > a {
+ padding-right: 12px;
+ padding-left: 12px;
+ margin-right: 2px;
+ line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.nav-tabs {
+ border-bottom: 1px solid #ddd;
+}
+// Make the list-items overlay the bottom border
+.nav-tabs > li {
+ margin-bottom: -1px;
+}
+// Actual tabs (as links)
+.nav-tabs > li > a {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ line-height: @baseLineHeight;
+ border: 1px solid transparent;
+ .border-radius(4px 4px 0 0);
+ &:hover,
+ &:focus {
+ border-color: @grayLighter @grayLighter #ddd;
+ }
+}
+// Active state, and it's :hover/:focus to override normal :hover/:focus
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+ color: @gray;
+ background-color: @bodyBackground;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
+}
+
+
+// PILLS
+// -----
+
+// Links rendered as pills
+.nav-pills > li > a {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ .border-radius(5px);
+}
+
+// Active state
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover,
+.nav-pills > .active > a:focus {
+ color: @white;
+ background-color: @linkColor;
+}
+
+
+
+// STACKED NAV
+// -----------
+
+// Stacked tabs and pills
+.nav-stacked > li {
+ float: none;
+}
+.nav-stacked > li > a {
+ margin-right: 0; // no need for the gap between nav items
+}
+
+// Tabs
+.nav-tabs.nav-stacked {
+ border-bottom: 0;
+}
+.nav-tabs.nav-stacked > li > a {
+ border: 1px solid #ddd;
+ .border-radius(0);
+}
+.nav-tabs.nav-stacked > li:first-child > a {
+ .border-top-radius(4px);
+}
+.nav-tabs.nav-stacked > li:last-child > a {
+ .border-bottom-radius(4px);
+}
+.nav-tabs.nav-stacked > li > a:hover,
+.nav-tabs.nav-stacked > li > a:focus {
+ border-color: #ddd;
+ z-index: 2;
+}
+
+// Pills
+.nav-pills.nav-stacked > li > a {
+ margin-bottom: 3px;
+}
+.nav-pills.nav-stacked > li:last-child > a {
+ margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
+
+
+
+// DROPDOWNS
+// ---------
+
+.nav-tabs .dropdown-menu {
+ .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
+}
+.nav-pills .dropdown-menu {
+ .border-radius(6px); // make rounded corners match the pills
+}
+
+// Default dropdown links
+// -------------------------
+// Make carets use linkColor to start
+.nav .dropdown-toggle .caret {
+ border-top-color: @linkColor;
+ border-bottom-color: @linkColor;
+ margin-top: 6px;
+}
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
+ border-top-color: @linkColorHover;
+ border-bottom-color: @linkColorHover;
+}
+/* move down carets for tabs */
+.nav-tabs .dropdown-toggle .caret {
+ margin-top: 8px;
+}
+
+// Active dropdown links
+// -------------------------
+.nav .active .dropdown-toggle .caret {
+ border-top-color: #fff;
+ border-bottom-color: #fff;
+}
+.nav-tabs .active .dropdown-toggle .caret {
+ border-top-color: @gray;
+ border-bottom-color: @gray;
+}
+
+// Active:hover/:focus dropdown links
+// -------------------------
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
+ cursor: pointer;
+}
+
+// Open dropdowns
+// -------------------------
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
+ color: @white;
+ background-color: @grayLight;
+ border-color: @grayLight;
+}
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
+ border-top-color: @white;
+ border-bottom-color: @white;
+ .opacity(100);
+}
+
+// Dropdowns in stacked tabs
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
+ border-color: @grayLight;
+}
+
+
+
+// TABBABLE
+// --------
+
+
+// COMMON STYLES
+// -------------
+
+// Clear any floats
+.tabbable {
+ .clearfix();
+}
+.tab-content {
+ overflow: auto; // prevent content from running below tabs
+}
+
+// Remove border on bottom, left, right
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+ border-bottom: 0;
+}
+
+// Show/hide tabbable areas
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: none;
+}
+.tab-content > .active,
+.pill-content > .active {
+ display: block;
+}
+
+
+// BOTTOM
+// ------
+
+.tabs-below > .nav-tabs {
+ border-top: 1px solid #ddd;
+}
+.tabs-below > .nav-tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+}
+.tabs-below > .nav-tabs > li > a {
+ .border-radius(0 0 4px 4px);
+ &:hover,
+ &:focus {
+ border-bottom-color: transparent;
+ border-top-color: #ddd;
+ }
+}
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+ border-color: transparent #ddd #ddd #ddd;
+}
+
+// LEFT & RIGHT
+// ------------
+
+// Common styles
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
+ float: none;
+}
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+ min-width: 74px;
+ margin-right: 0;
+ margin-bottom: 3px;
+}
+
+// Tabs on the left
+.tabs-left > .nav-tabs {
+ float: left;
+ margin-right: 19px;
+ border-right: 1px solid #ddd;
+}
+.tabs-left > .nav-tabs > li > a {
+ margin-right: -1px;
+ .border-radius(4px 0 0 4px);
+}
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
+ border-color: @grayLighter #ddd @grayLighter @grayLighter;
+}
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
+ border-color: #ddd transparent #ddd #ddd;
+ *border-right-color: @white;
+}
+
+// Tabs on the right
+.tabs-right > .nav-tabs {
+ float: right;
+ margin-left: 19px;
+ border-left: 1px solid #ddd;
+}
+.tabs-right > .nav-tabs > li > a {
+ margin-left: -1px;
+ .border-radius(0 4px 4px 0);
+}
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
+ border-color: @grayLighter @grayLighter @grayLighter #ddd;
+}
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
+ border-color: #ddd #ddd #ddd transparent;
+ *border-left-color: @white;
+}
+
+
+
+// DISABLED STATES
+// ---------------
+
+// Gray out text
+.nav > .disabled > a {
+ color: @grayLight;
+}
+// Nuke hover/focus effects
+.nav > .disabled > a:hover,
+.nav > .disabled > a:focus {
+ text-decoration: none;
+ background-color: transparent;
+ cursor: default;
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/pager.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/pager.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/pager.less
new file mode 100644
index 0000000..1476188
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/pager.less
@@ -0,0 +1,43 @@
+//
+// Pager pagination
+// --------------------------------------------------
+
+
+.pager {
+ margin: @baseLineHeight 0;
+ list-style: none;
+ text-align: center;
+ .clearfix();
+}
+.pager li {
+ display: inline;
+}
+.pager li > a,
+.pager li > span {
+ display: inline-block;
+ padding: 5px 14px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ .border-radius(15px);
+}
+.pager li > a:hover,
+.pager li > a:focus {
+ text-decoration: none;
+ background-color: #f5f5f5;
+}
+.pager .next > a,
+.pager .next > span {
+ float: right;
+}
+.pager .previous > a,
+.pager .previous > span {
+ float: left;
+}
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > a:focus,
+.pager .disabled > span {
+ color: @grayLight;
+ background-color: #fff;
+ cursor: default;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/pagination.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/pagination.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/pagination.less
new file mode 100644
index 0000000..a789db2
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/pagination.less
@@ -0,0 +1,123 @@
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+
+// Space out pagination from surrounding content
+.pagination {
+ margin: @baseLineHeight 0;
+}
+
+.pagination ul {
+ // Allow for text-based alignment
+ display: inline-block;
+ .ie7-inline-block();
+ // Reset default ul styles
+ margin-left: 0;
+ margin-bottom: 0;
+ // Visuals
+ .border-radius(@baseBorderRadius);
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination ul > li {
+ display: inline; // Remove list-style and block-level defaults
+}
+.pagination ul > li > a,
+.pagination ul > li > span {
+ float: left; // Collapse white-space
+ padding: 4px 12px;
+ line-height: @baseLineHeight;
+ text-decoration: none;
+ background-color: @paginationBackground;
+ border: 1px solid @paginationBorder;
+ border-left-width: 0;
+}
+.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+ background-color: @paginationActiveBackground;
+}
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+ color: @grayLight;
+ cursor: default;
+}
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
+ color: @grayLight;
+ background-color: transparent;
+ cursor: default;
+}
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
+ border-left-width: 1px;
+ .border-left-radius(@baseBorderRadius);
+}
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+ .border-right-radius(@baseBorderRadius);
+}
+
+
+// Alignment
+// --------------------------------------------------
+
+.pagination-centered {
+ text-align: center;
+}
+.pagination-right {
+ text-align: right;
+}
+
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-large {
+ ul > li > a,
+ ul > li > span {
+ padding: @paddingLarge;
+ font-size: @fontSizeLarge;
+ }
+ ul > li:first-child > a,
+ ul > li:first-child > span {
+ .border-left-radius(@borderRadiusLarge);
+ }
+ ul > li:last-child > a,
+ ul > li:last-child > span {
+ .border-right-radius(@borderRadiusLarge);
+ }
+}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+ ul > li:first-child > a,
+ ul > li:first-child > span {
+ .border-left-radius(@borderRadiusSmall);
+ }
+ ul > li:last-child > a,
+ ul > li:last-child > span {
+ .border-right-radius(@borderRadiusSmall);
+ }
+}
+
+// Small
+.pagination-small {
+ ul > li > a,
+ ul > li > span {
+ padding: @paddingSmall;
+ font-size: @fontSizeSmall;
+ }
+}
+// Mini
+.pagination-mini {
+ ul > li > a,
+ ul > li > span {
+ padding: @paddingMini;
+ font-size: @fontSizeMini;
+ }
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/popovers.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/popovers.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/popovers.less
new file mode 100644
index 0000000..aae35c8
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/popovers.less
@@ -0,0 +1,133 @@
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: @zindexPopover;
+ display: none;
+ max-width: 276px;
+ padding: 1px;
+ text-align: left; // Reset given new insertion method
+ background-color: @popoverBackground;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0,0,0,.2);
+ .border-radius(6px);
+ .box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+ // Overrides for proper insertion
+ white-space: normal;
+
+ // Offset the popover to account for the popover arrow
+ &.top { margin-top: -10px; }
+ &.right { margin-left: 10px; }
+ &.bottom { margin-top: 10px; }
+ &.left { margin-left: -10px; }
+}
+
+.popover-title {
+ margin: 0; // reset heading margin
+ padding: 8px 14px;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 18px;
+ background-color: @popoverTitleBackground;
+ border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
+ .border-radius(5px 5px 0 0);
+
+ &:empty {
+ display: none;
+ }
+}
+
+.popover-content {
+ padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover .arrow,
+.popover .arrow:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.popover .arrow {
+ border-width: @popoverArrowOuterWidth;
+}
+.popover .arrow:after {
+ border-width: @popoverArrowWidth;
+ content: "";
+}
+
+.popover {
+ &.top .arrow {
+ left: 50%;
+ margin-left: -@popoverArrowOuterWidth;
+ border-bottom-width: 0;
+ border-top-color: #999; // IE8 fallback
+ border-top-color: @popoverArrowOuterColor;
+ bottom: -@popoverArrowOuterWidth;
+ &:after {
+ bottom: 1px;
+ margin-left: -@popoverArrowWidth;
+ border-bottom-width: 0;
+ border-top-color: @popoverArrowColor;
+ }
+ }
+ &.right .arrow {
+ top: 50%;
+ left: -@popoverArrowOuterWidth;
+ margin-top: -@popoverArrowOuterWidth;
+ border-left-width: 0;
+ border-right-color: #999; // IE8 fallback
+ border-right-color: @popoverArrowOuterColor;
+ &:after {
+ left: 1px;
+ bottom: -@popoverArrowWidth;
+ border-left-width: 0;
+ border-right-color: @popoverArrowColor;
+ }
+ }
+ &.bottom .arrow {
+ left: 50%;
+ margin-left: -@popoverArrowOuterWidth;
+ border-top-width: 0;
+ border-bottom-color: #999; // IE8 fallback
+ border-bottom-color: @popoverArrowOuterColor;
+ top: -@popoverArrowOuterWidth;
+ &:after {
+ top: 1px;
+ margin-left: -@popoverArrowWidth;
+ border-top-width: 0;
+ border-bottom-color: @popoverArrowColor;
+ }
+ }
+
+ &.left .arrow {
+ top: 50%;
+ right: -@popoverArrowOuterWidth;
+ margin-top: -@popoverArrowOuterWidth;
+ border-right-width: 0;
+ border-left-color: #999; // IE8 fallback
+ border-left-color: @popoverArrowOuterColor;
+ &:after {
+ right: 1px;
+ border-right-width: 0;
+ border-left-color: @popoverArrowColor;
+ bottom: -@popoverArrowWidth;
+ }
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/progress-bars.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/progress-bars.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/progress-bars.less
new file mode 100644
index 0000000..5e0c3dd
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/progress-bars.less
@@ -0,0 +1,122 @@
+//
+// Progress bars
+// --------------------------------------------------
+
+
+// ANIMATIONS
+// ----------
+
+// Webkit
+@-webkit-keyframes progress-bar-stripes {
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+// Firefox
+@-moz-keyframes progress-bar-stripes {
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+// IE9
+@-ms-keyframes progress-bar-stripes {
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+// Opera
+@-o-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Spec
+@keyframes progress-bar-stripes {
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+
+
+// THE BARS
+// --------
+
+// Outer container
+.progress {
+ overflow: hidden;
+ height: @baseLineHeight;
+ margin-bottom: @baseLineHeight;
+ #gradient > .vertical(#f5f5f5, #f9f9f9);
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+ .border-radius(@baseBorderRadius);
+}
+
+// Bar of progress
+.progress .bar {
+ width: 0%;
+ height: 100%;
+ color: @white;
+ float: left;
+ font-size: 12px;
+ text-align: center;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ #gradient > .vertical(#149bdf, #0480be);
+ .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+ .box-sizing(border-box);
+ .transition(width .6s ease);
+}
+.progress .bar + .bar {
+ .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
+}
+
+// Striped bars
+.progress-striped .bar {
+ #gradient > .striped(#149bdf);
+ .background-size(40px 40px);
+}
+
+// Call animation for the active one
+.progress.active .bar {
+ -webkit-animation: progress-bar-stripes 2s linear infinite;
+ -moz-animation: progress-bar-stripes 2s linear infinite;
+ -ms-animation: progress-bar-stripes 2s linear infinite;
+ -o-animation: progress-bar-stripes 2s linear infinite;
+ animation: progress-bar-stripes 2s linear infinite;
+}
+
+
+
+// COLORS
+// ------
+
+// Danger (red)
+.progress-danger .bar, .progress .bar-danger {
+ #gradient > .vertical(#ee5f5b, #c43c35);
+}
+.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
+ #gradient > .striped(#ee5f5b);
+}
+
+// Success (green)
+.progress-success .bar, .progress .bar-success {
+ #gradient > .vertical(#62c462, #57a957);
+}
+.progress-success.progress-striped .bar, .progress-striped .bar-success {
+ #gradient > .striped(#62c462);
+}
+
+// Info (teal)
+.progress-info .bar, .progress .bar-info {
+ #gradient > .vertical(#5bc0de, #339bb9);
+}
+.progress-info.progress-striped .bar, .progress-striped .bar-info {
+ #gradient > .striped(#5bc0de);
+}
+
+// Warning (orange)
+.progress-warning .bar, .progress .bar-warning {
+ #gradient > .vertical(lighten(@orange, 15%), @orange);
+}
+.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
+ #gradient > .striped(lighten(@orange, 15%));
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/reset.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/reset.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/reset.less
new file mode 100644
index 0000000..4806bd5
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/reset.less
@@ -0,0 +1,216 @@
+//
+// Reset CSS
+// Adapted from http://github.com/necolas/normalize.css
+// --------------------------------------------------
+
+
+// Display in IE6-9 and FF3
+// -------------------------
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+ display: block;
+}
+
+// Display block in IE6-9 and FF3
+// -------------------------
+
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+
+// Prevents modern browsers from displaying 'audio' without controls
+// -------------------------
+
+audio:not([controls]) {
+ display: none;
+}
+
+// Base settings
+// -------------------------
+
+html {
+ font-size: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+// Focus states
+a:focus {
+ .tab-focus();
+}
+// Hover & Active
+a:hover,
+a:active {
+ outline: 0;
+}
+
+// Prevents sub and sup affecting line-height in all browsers
+// -------------------------
+
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+
+// Img border in a's and image quality
+// -------------------------
+
+img {
+ /* Responsive images (ensure images don't scale beyond their parents) */
+ max-width: 100%; /* Part 1: Set a maxium relative to the parent */
+ width: auto\9; /* IE7-8 need help adjusting responsive images */
+ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
+
+ vertical-align: middle;
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+}
+
+// Prevent max-width from affecting Google Maps
+#map_canvas img,
+.google-maps img {
+ max-width: none;
+}
+
+// Forms
+// -------------------------
+
+// Font size in all browsers, margin changes, misc consistency
+button,
+input,
+select,
+textarea {
+ margin: 0;
+ font-size: 100%;
+ vertical-align: middle;
+}
+button,
+input {
+ *overflow: visible; // Inner spacing ie IE6/7
+ line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
+ padding: 0;
+ border: 0;
+}
+button,
+html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
+ cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
+}
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+ cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
+}
+input[type="search"] { // Appearance in Safari/Chrome
+ .box-sizing(content-box);
+ -webkit-appearance: textfield;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
+}
+textarea {
+ overflow: auto; // Remove vertical scrollbar in IE6-9
+ vertical-align: top; // Readability and alignment cross-browser
+}
+
+
+// Printing
+// -------------------------
+// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+
+@media print {
+
+ * {
+ text-shadow: none !important;
+ color: #000 !important; // Black prints faster: h5bp.com/s
+ background: transparent !important;
+ box-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ // Don't show links for images, or javascript/internal links
+ .ir a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: "";
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ thead {
+ display: table-header-group; // h5bp.com/t
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ @page {
+ margin: 0.5cm;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-1200px-min.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-1200px-min.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-1200px-min.less
new file mode 100644
index 0000000..4f35ba6
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-1200px-min.less
@@ -0,0 +1,28 @@
+//
+// Responsive: Large desktop and up
+// --------------------------------------------------
+
+
+@media (min-width: 1200px) {
+
+ // Fixed grid
+ #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
+
+ // Fluid grid
+ #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+
+ // Input grid
+ #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
+
+ // Thumbnails
+ .thumbnails {
+ margin-left: -@gridGutterWidth1200;
+ }
+ .thumbnails > li {
+ margin-left: @gridGutterWidth1200;
+ }
+ .row-fluid .thumbnails {
+ margin-left: 0;
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-767px-max.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-767px-max.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-767px-max.less
new file mode 100644
index 0000000..128f4ce
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-767px-max.less
@@ -0,0 +1,193 @@
+//
+// Responsive: Landscape phone to desktop/tablet
+// --------------------------------------------------
+
+
+@media (max-width: 767px) {
+
+ // Padding to set content in a bit
+ body {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ // Negative indent the now static "fixed" navbar
+ .navbar-fixed-top,
+ .navbar-fixed-bottom,
+ .navbar-static-top {
+ margin-left: -20px;
+ margin-right: -20px;
+ }
+ // Remove padding on container given explicit padding set on body
+ .container-fluid {
+ padding: 0;
+ }
+
+ // TYPOGRAPHY
+ // ----------
+ // Reset horizontal dl
+ .dl-horizontal {
+ dt {
+ float: none;
+ clear: none;
+ width: auto;
+ text-align: left;
+ }
+ dd {
+ margin-left: 0;
+ }
+ }
+
+ // GRID & CONTAINERS
+ // -----------------
+ // Remove width from containers
+ .container {
+ width: auto;
+ }
+ // Fluid rows
+ .row-fluid {
+ width: 100%;
+ }
+ // Undo negative margin on rows and thumbnails
+ .row,
+ .thumbnails {
+ margin-left: 0;
+ }
+ .thumbnails > li {
+ float: none;
+ margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
+ }
+ // Make all grid-sized elements block level again
+ [class*="span"],
+ .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
+ .row-fluid [class*="span"] {
+ float: none;
+ display: block;
+ width: 100%;
+ margin-left: 0;
+ .box-sizing(border-box);
+ }
+ .span12,
+ .row-fluid .span12 {
+ width: 100%;
+ .box-sizing(border-box);
+ }
+ .row-fluid [class*="offset"]:first-child {
+ margin-left: 0;
+ }
+
+ // FORM FIELDS
+ // -----------
+ // Make span* classes full width
+ .input-large,
+ .input-xlarge,
+ .input-xxlarge,
+ input[class*="span"],
+ select[class*="span"],
+ textarea[class*="span"],
+ .uneditable-input {
+ .input-block-level();
+ }
+ // But don't let it screw up prepend/append inputs
+ .input-prepend input,
+ .input-append input,
+ .input-prepend input[class*="span"],
+ .input-append input[class*="span"] {
+ display: inline-block; // redeclare so they don't wrap to new lines
+ width: auto;
+ }
+ .controls-row [class*="span"] + [class*="span"] {
+ margin-left: 0;
+ }
+
+ // Modals
+ .modal {
+ position: fixed;
+ top: 20px;
+ left: 20px;
+ right: 20px;
+ width: auto;
+ margin: 0;
+ &.fade { top: -100px; }
+ &.fade.in { top: 20px; }
+ }
+
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+ // Smooth out the collapsing/expanding nav
+ .nav-collapse {
+ -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+ }
+
+ // Block level the page header small tag for readability
+ .page-header h1 small {
+ display: block;
+ line-height: @baseLineHeight;
+ }
+
+ // Update checkboxes for iOS
+ input[type="checkbox"],
+ input[type="radio"] {
+ border: 1px solid #ccc;
+ }
+
+ // Remove the horizontal form styles
+ .form-horizontal {
+ .control-label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ // Move over all input controls and content
+ .controls {
+ margin-left: 0;
+ }
+ // Move the options list down to align with labels
+ .control-list {
+ padding-top: 0; // has to be padding because margin collaspes
+ }
+ // Move over buttons in .form-actions to align with .controls
+ .form-actions {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
+
+ // Medias
+ // Reset float and spacing to stack
+ .media .pull-left,
+ .media .pull-right {
+ float: none;
+ display: block;
+ margin-bottom: 10px;
+ }
+ // Remove side margins since we stack instead of indent
+ .media-object {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ // Modals
+ .modal {
+ top: 10px;
+ left: 10px;
+ right: 10px;
+ }
+ .modal-header .close {
+ padding: 10px;
+ margin: -10px;
+ }
+
+ // Carousel
+ .carousel-caption {
+ position: static;
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-768px-979px.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-768px-979px.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-768px-979px.less
new file mode 100644
index 0000000..8e8c486
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-768px-979px.less
@@ -0,0 +1,19 @@
+//
+// Responsive: Tablet to desktop
+// --------------------------------------------------
+
+
+@media (min-width: 768px) and (max-width: 979px) {
+
+ // Fixed grid
+ #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
+
+ // Fluid grid
+ #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
+
+ // Input grid
+ #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
+
+ // No need to reset .thumbnails here since it's the same @gridGutterWidth
+
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-navbar.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-navbar.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-navbar.less
new file mode 100644
index 0000000..21cd3ba
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-navbar.less
@@ -0,0 +1,189 @@
+//
+// Responsive: Navbar
+// --------------------------------------------------
+
+
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: @navbarCollapseWidth) {
+
+ // UNFIX THE TOPBAR
+ // ----------------
+ // Remove any padding from the body
+ body {
+ padding-top: 0;
+ }
+ // Unfix the navbars
+ .navbar-fixed-top,
+ .navbar-fixed-bottom {
+ position: static;
+ }
+ .navbar-fixed-top {
+ margin-bottom: @baseLineHeight;
+ }
+ .navbar-fixed-bottom {
+ margin-top: @baseLineHeight;
+ }
+ .navbar-fixed-top .navbar-inner,
+ .navbar-fixed-bottom .navbar-inner {
+ padding: 5px;
+ }
+ .navbar .container {
+ width: auto;
+ padding: 0;
+ }
+ // Account for brand name
+ .navbar .brand {
+ padding-left: 10px;
+ padding-right: 10px;
+ margin: 0 0 0 -5px;
+ }
+
+ // COLLAPSIBLE NAVBAR
+ // ------------------
+ // Nav collapse clears brand
+ .nav-collapse {
+ clear: both;
+ }
+ // Block-level the nav
+ .nav-collapse .nav {
+ float: none;
+ margin: 0 0 (@baseLineHeight / 2);
+ }
+ .nav-collapse .nav > li {
+ float: none;
+ }
+ .nav-collapse .nav > li > a {
+ margin-bottom: 2px;
+ }
+ .nav-collapse .nav > .divider-vertical {
+ display: none;
+ }
+ .nav-collapse .nav .nav-header {
+ color: @navbarText;
+ text-shadow: none;
+ }
+ // Nav and dropdown links in navbar
+ .nav-collapse .nav > li > a,
+ .nav-collapse .dropdown-menu a {
+ padding: 9px 15px;
+ font-weight: bold;
+ color: @navbarLinkColor;
+ .border-radius(3px);
+ }
+ // Buttons
+ .nav-collapse .btn {
+ padding: 4px 10px 4px;
+ font-weight: normal;
+ .border-radius(@baseBorderRadius);
+ }
+ .nav-collapse .dropdown-menu li + li a {
+ margin-bottom: 2px;
+ }
+ .nav-collapse .nav > li > a:hover,
+ .nav-collapse .nav > li > a:focus,
+ .nav-collapse .dropdown-menu a:hover,
+ .nav-collapse .dropdown-menu a:focus {
+ background-color: @navbarBackground;
+ }
+ .navbar-inverse .nav-collapse .nav > li > a,
+ .navbar-inverse .nav-collapse .dropdown-menu a {
+ color: @navbarInverseLinkColor;
+ }
+ .navbar-inverse .nav-collapse .nav > li > a:hover,
+ .navbar-inverse .nav-collapse .nav > li > a:focus,
+ .navbar-inverse .nav-collapse .dropdown-menu a:hover,
+ .navbar-inverse .nav-collapse .dropdown-menu a:focus {
+ background-color: @navbarInverseBackground;
+ }
+ // Buttons in the navbar
+ .nav-collapse.in .btn-group {
+ margin-top: 5px;
+ padding: 0;
+ }
+ // Dropdowns in the navbar
+ .nav-collapse .dropdown-menu {
+ position: static;
+ top: auto;
+ left: auto;
+ float: none;
+ display: none;
+ max-width: none;
+ margin: 0 15px;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ .border-radius(0);
+ .box-shadow(none);
+ }
+ .nav-collapse .open > .dropdown-menu {
+ display: block;
+ }
+
+ .nav-collapse .dropdown-menu:before,
+ .nav-collapse .dropdown-menu:after {
+ display: none;
+ }
+ .nav-collapse .dropdown-menu .divider {
+ display: none;
+ }
+ .nav-collapse .nav > li > .dropdown-menu {
+ &:before,
+ &:after {
+ display: none;
+ }
+ }
+ // Forms in navbar
+ .nav-collapse .navbar-form,
+ .nav-collapse .navbar-search {
+ float: none;
+ padding: (@baseLineHeight / 2) 15px;
+ margin: (@baseLineHeight / 2) 0;
+ border-top: 1px solid @navbarBackground;
+ border-bottom: 1px solid @navbarBackground;
+ .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
+ }
+ .navbar-inverse .nav-collapse .navbar-form,
+ .navbar-inverse .nav-collapse .navbar-search {
+ border-top-color: @navbarInverseBackground;
+ border-bottom-color: @navbarInverseBackground;
+ }
+ // Pull right (secondary) nav content
+ .navbar .nav-collapse .nav.pull-right {
+ float: none;
+ margin-left: 0;
+ }
+ // Hide everything in the navbar save .brand and toggle button */
+ .nav-collapse,
+ .nav-collapse.collapse {
+ overflow: hidden;
+ height: 0;
+ }
+ // Navbar button
+ .navbar .btn-navbar {
+ display: block;
+ }
+
+ // STATIC NAVBAR
+ // -------------
+ .navbar-static .navbar-inner {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+
+}
+
+
+// DEFAULT DESKTOP
+// ---------------
+
+@media (min-width: @navbarCollapseDesktopWidth) {
+
+ // Required to make the collapsing navbar work on regular desktops
+ .nav-collapse.collapse {
+ height: auto !important;
+ overflow: visible !important;
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-utilities.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-utilities.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-utilities.less
new file mode 100644
index 0000000..bf43e8e
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive-utilities.less
@@ -0,0 +1,59 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// IE10 Metro responsive
+// Required for Windows 8 Metro split-screen snapping with IE10
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+@-ms-viewport{
+ width: device-width;
+}
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone { display: none !important; }
+.visible-tablet { display: none !important; }
+.hidden-phone { }
+.hidden-tablet { }
+.hidden-desktop { display: none !important; }
+.visible-desktop { display: inherit !important; }
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+ // Hide everything else
+ .hidden-desktop { display: inherit !important; }
+ .visible-desktop { display: none !important ; }
+ // Show
+ .visible-tablet { display: inherit !important; }
+ // Hide
+ .hidden-tablet { display: none !important; }
+}
+
+// Phones only
+@media (max-width: 767px) {
+ // Hide everything else
+ .hidden-desktop { display: inherit !important; }
+ .visible-desktop { display: none !important; }
+ // Show
+ .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
+ // Hide
+ .hidden-phone { display: none !important; }
+}
+
+// Print utilities
+.visible-print { display: none !important; }
+.hidden-print { }
+
+@media print {
+ .visible-print { display: inherit !important; }
+ .hidden-print { display: none !important; }
+}
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive.less
new file mode 100644
index 0000000..9e5f9b1
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/responsive.less
@@ -0,0 +1,48 @@
+/*!
+ * Bootstrap Responsive v2.3.2
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+
+// Responsive.less
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+
+// RESPONSIVE CLASSES
+// ------------------
+
+@import "responsive-utilities.less";
+
+
+// MEDIA QUERIES
+// ------------------
+
+// Large desktops
+@import "responsive-1200px-min.less";
+
+// Tablets to regular desktops
+@import "responsive-768px-979px.less";
+
+// Phones to portrait tablets and narrow desktops
+@import "responsive-767px-max.less";
+
+
+// RESPONSIVE NAVBAR
+// ------------------
+
+// From 979px and below, show a button to toggle navbar contents
+@import "responsive-navbar.less";
http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/554ed703/tapestry-wro4j/src/test/webapp/bootstrap/css/scaffolding.less
----------------------------------------------------------------------
diff --git a/tapestry-wro4j/src/test/webapp/bootstrap/css/scaffolding.less b/tapestry-wro4j/src/test/webapp/bootstrap/css/scaffolding.less
new file mode 100644
index 0000000..f17e8ca
--- /dev/null
+++ b/tapestry-wro4j/src/test/webapp/bootstrap/css/scaffolding.less
@@ -0,0 +1,53 @@
+//
+// Scaffolding
+// --------------------------------------------------
+
+
+// Body reset
+// -------------------------
+
+body {
+ margin: 0;
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ color: @textColor;
+ background-color: @bodyBackground;
+}
+
+
+// Links
+// -------------------------
+
+a {
+ color: @linkColor;
+ text-decoration: none;
+}
+a:hover,
+a:focus {
+ color: @linkColorHover;
+ text-decoration: underline;
+}
+
+
+// Images
+// -------------------------
+
+// Rounded corners
+.img-rounded {
+ .border-radius(6px);
+}
+
+// Add polaroid-esque trim
+.img-polaroid {
+ padding: 4px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0,0,0,.2);
+ .box-shadow(0 1px 3px rgba(0,0,0,.1));
+}
+
+// Perfect circle
+.img-circle {
+ .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
+}