Skip to content
Browse files

Merge pull request #15 from andrewtobin/cleanup

Cleaned up the demo a tiny bit and added Progress Bars.
  • Loading branch information...
2 parents 85432ee + ec5ba95 commit a4eb9528f6a5303de12b49842f5132070389d76f Paul Jenkins committed Feb 11, 2012
View
25 demos/fonts/index.html
@@ -14,32 +14,22 @@ <h1 class="accent">LARGE heading text</h1>
<h2 class="lime">sub heading text</h2>
<h3>sub-sub heading text</h3>
<h4>is this even a heading? woaw</h4>
-
<div class="metro-pivot">
<div class="pivot-item">
- <h3>tab1</h3>
+ <h3>fonts</h3>
<p>
Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
</p>
<p><strong>Strong</strong></p>
<p><em>Emphasis</em></p>
<p><b>Bold</b></p>
<p><i>Italic</i></p>
- <p>
- Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
- </p>
- </div>
+ <p>If you want to use the accent colour, set <code>class="accent"</code></p>
+ </div>
<div class="pivot-item">
- <h3>tab3</h3>
+ <h3>pivots</h3>
<p>
- Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
- </p>
- </div>
- </div>
-
- If you want to use the accent colour, set <code>class="accent"</code>
-
- <pre>
+ <pre>
var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
@@ -57,7 +47,10 @@ <h2 class="lime">sub heading text</h2>
$(function () {
$("div.metro-pivot").metroPivot(defaults);
});
- </pre>
+ </pre>
+ </p>
+ </div>
+ </div>
<script>
var defaults = {
animationDuration: 350,
View
62 index.html
@@ -35,26 +35,50 @@ <h2 class="lime">stylesheets and then some</h2>
<li class="accent"><a href="/demos/slides/">Adding metro to impress.js (WIP)</a></li>
</ul>
</div>
- </div>
- <div class="row">
- <div class="span12">
- Level 1 of column
- <div class="row">
- <div class="span6">Level 2</div>
- <div class="span6">Level 2</div>
- </div>
- <div class="row">
- <div class="span4">Level 3</div>
- <div class="span4">Level 3</div>
- <div class="span4">Level 3</div>
- </div>
- <div class="row">
- <div class="span4">Level 3</div>
- <div class="span8">Level 3</div>
- </div>
- </div>
- </div>
+ <div class="pivot-item">
+ <h3>columns</h3>
+ <div class="row">
+ <div class="span12">
+ Level 1 of column
+ <div class="row">
+ <div class="span6">Level 2</div>
+ <div class="span6">Level 2</div>
+ </div>
+ <div class="row">
+ <div class="span4">Level 3</div>
+ <div class="span4">Level 3</div>
+ <div class="span4">Level 3</div>
+ </div>
+ <div class="row">
+ <div class="span4">Level 4</div>
+ <div class="span8">Level 4</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="pivot-item">
+ <h3>controls</h3>
+ <h4>progress bars</h4>
+ <div class="row">
+ <div class="span4">
+ <div class="progress">
+ <div class="bar" style="width: 60%;"></div>
+ </div>
+ </div>
+ </div>
+ <h4>active progress bars</h4>
+ <div class="row">
+ <div class="span4">
+ <div class="progress progress-striped active">
+ <div class="bar" style="width: 40%;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
<script>
var defaults = {
View
235 less/bootstrap-mixins.less
@@ -1,235 +0,0 @@
-/*Copyright 2012 Twitter, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.*/
-
- // Mixins.less
-// Snippets of reusable CSS to develop faster and keep code readable
-// -----------------------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-.clearfix() {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- }
- &:after {
- clear: both;
- }
-}
-
-
-
-// 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;
-
- &:last-child {
- *margin-left: 0;
- }
-}
-
-// Sizing shortcuts
-// -------------------------
-.size(@height: 5px, @width: 5px) {
- width: @width;
- height: @height;
-}
-.square(@size: 5px) {
- .size(@size, @size);
-}
-
-// Placeholder text
-// -------------------------
-.placeholder(@color: @placeholderText) {
- :-moz-placeholder {
- color: @color;
- }
- ::-webkit-input-placeholder {
- color: @color;
- }
-}
-
-
-
-// GRID SYSTEM
-// --------------------------------------------------
-
-// Site container
-// -------------------------
-.container-fixed() {
- width: @gridRowWidth;
- margin-left: auto;
- margin-right: auto;
- .clearfix();
-}
-
-// Le grid system
-// -------------------------
-#gridSystem {
- // Setup the mixins to be used
- .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
- .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
- }
- .gridColumn(@gridGutterWidth) {
- float: left;
- margin-left: @gridGutterWidth;
- }
- // Take these values and mixins, and make 'em do their thang
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
- // Row surrounds the columns
- .row {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
- }
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
- [class*="span"] {
- #gridSystem > .gridColumn(@gridGutterWidth);
- }
- // Default columns
- .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
- .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
- .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
- .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
- .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
- .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
- .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
- .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
- .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
- .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
- .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
- .span12,
- .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
- // Offset column options
- .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
- .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
- .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
- .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
- .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
- .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
- .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
- .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
- .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
- .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
- .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
- }
-}
-
-// Fluid grid system
-// -------------------------
-#fluidGridSystem {
- // Setup the mixins to be used
- .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
- width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
- }
- .gridColumn(@fluidGridGutterWidth) {
- float: left;
- margin-left: @fluidGridGutterWidth;
- }
- // Take these values and mixins, and make 'em do their thang
- .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
- // Row surrounds the columns
- .row-fluid {
- width: 100%;
- .clearfix();
-
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
- > [class*="span"] {
- #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
- }
- > [class*="span"]:first-child {
- margin-left: 0;
- }
- // Default columns
- .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
- .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
- .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
- .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
- .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
- .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
- .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
- .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
- .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
- .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
- .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
- .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
- }
- }
-}
-
-
-
-// Input grid system
-// -------------------------
-#inputGridSystem {
- .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
- }
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
- input,
- textarea,
- .uneditable-input {
- &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
- &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
- &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
- &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
- &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
- &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
- &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
- &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
- &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
- &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
- &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
- &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
- }
- }
-}
-
View
9 less/bootstrap.less
@@ -0,0 +1,9 @@
+@import "bootstrap/reset.less";
+
+@import "bootstrap/variables.less";
+@import "bootstrap/mixins.less";
+@import "bootstrap/layouts.less";
+
+@import "bootstrap/progress-bars.less";
+
+@import "bootstrap/utilities.less";
View
0 less/bootstrap-layouts.less → less/bootstrap/layouts.less
File renamed without changes.
View
450 less/bootstrap/mixins.less
@@ -0,0 +1,450 @@
+/*Copyright 2012 Twitter, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.*/
+
+ // Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
+
+
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+.clearfix() {
+ *zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Webkit-style focus
+// ------------------
+.tab-focus() {
+ // Default
+ outline: thin dotted;
+ // 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;
+
+ &:last-child {
+ *margin-left: 0;
+ }
+}
+
+// Sizing shortcuts
+// -------------------------
+.size(@height: 5px, @width: 5px) {
+ width: @width;
+ height: @height;
+}
+.square(@size: 5px) {
+ .size(@size, @size);
+}
+
+// Placeholder text
+// -------------------------
+.placeholder(@color: @placeholderText) {
+ :-moz-placeholder {
+ color: @color;
+ }
+ ::-webkit-input-placeholder {
+ color: @color;
+ }
+}
+
+
+
+// GRID SYSTEM
+// --------------------------------------------------
+
+// Site container
+// -------------------------
+.container-fixed() {
+ width: @gridRowWidth;
+ margin-left: auto;
+ margin-right: auto;
+ .clearfix();
+}
+
+// Le grid system
+// -------------------------
+#gridSystem {
+ // Setup the mixins to be used
+ .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ }
+ .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+ }
+ .gridColumn(@gridGutterWidth) {
+ float: left;
+ margin-left: @gridGutterWidth;
+ }
+ // Take these values and mixins, and make 'em do their thang
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+ // Row surrounds the columns
+ .row {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+ }
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+ [class*="span"] {
+ #gridSystem > .gridColumn(@gridGutterWidth);
+ }
+ // Default columns
+ .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+ .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+ .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+ .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+ .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+ .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+ .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+ .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+ .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+ .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+ .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+ .span12,
+ .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+ // Offset column options
+ .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
+ .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
+ .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
+ .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
+ .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
+ .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
+ .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
+ .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
+ .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
+ .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
+ .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
+ }
+}
+
+// Fluid grid system
+// -------------------------
+#fluidGridSystem {
+ // Setup the mixins to be used
+ .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
+ width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+ }
+ .gridColumn(@fluidGridGutterWidth) {
+ float: left;
+ margin-left: @fluidGridGutterWidth;
+ }
+ // Take these values and mixins, and make 'em do their thang
+ .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
+ // Row surrounds the columns
+ .row-fluid {
+ width: 100%;
+ .clearfix();
+
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+ > [class*="span"] {
+ #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
+ }
+ > [class*="span"]:first-child {
+ margin-left: 0;
+ }
+ // Default columns
+ .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+ .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+ .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+ .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+ .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+ .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+ .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+ .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+ .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+ .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+ .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+ .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+ }
+ }
+}
+
+
+
+// Input grid system
+// -------------------------
+#inputGridSystem {
+ .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+ }
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+ input,
+ textarea,
+ .uneditable-input {
+ &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+ &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+ &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+ &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+ &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+ &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+ &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+ &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+ &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+ &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+ &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+ &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+ }
+ }
+}
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
+// Border Radius
+.border-radius(@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -moz-border-radius: @radius;
+ border-radius: @radius;
+}
+
+// Drop shadows
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+ -webkit-box-shadow: @shadow;
+ -moz-box-shadow: @shadow;
+ box-shadow: @shadow;
+}
+
+// Transitions
+.transition(@transition) {
+ -webkit-transition: @transition;
+ -moz-transition: @transition;
+ -ms-transition: @transition;
+ -o-transition: @transition;
+ transition: @transition;
+}
+
+// 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: 0, @y: 0) {
+ -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: 0, @y: 0) {
+ -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: 0, @y: 0) {
+ -webkit-transform: skew(@x, @y);
+ -moz-transform: skew(@x, @y);
+ -ms-transform: skew(@x, @y);
+ -o-transform: skew(@x, @y);
+ transform: skew(@x, @y);
+}
+
+// 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;
+ -o-user-select: @select;
+ user-select: @select;
+}
+
+// Resize anything
+.resizable(@direction: both) {
+ resize: @direction; // Options: horizontal, vertical, both
+ overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
+ -webkit-column-count: @columnCount;
+ -moz-column-count: @columnCount;
+ column-count: @columnCount;
+ -webkit-column-gap: @columnGap;
+ -moz-column-gap: @columnGap;
+ column-gap: @columnGap;
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+ opacity: @opacity / 100;
+ filter: e(%("alpha(opacity=%d)", @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) {
+ #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: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+ 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(left, @startColor, @endColor); // Le standard
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@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: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+ 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(top, @startColor, @endColor); // The standard
+ background-repeat: repeat-x;
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@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: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
+ 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); // The standard
+ }
+ .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: -ms-linear-gradient(@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)",@startColor,@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: -ms-radial-gradient(circle, @innerColor, @outerColor);
+ background-repeat: no-repeat;
+ // Opera cannot do radial gradients yet
+ }
+ .striped(@color, @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: -ms-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)"));
+}
View
97 less/bootstrap/progress-bars.less
@@ -0,0 +1,97 @@
+// PROGRESS BARS
+// -------------
+
+
+// ANIMATIONS
+// ----------
+
+// Webkit
+@-webkit-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Firefox
+@-moz-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Spec
+@keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+
+
+// THE BARS
+// --------
+
+// Outer container
+.progress {
+ overflow: hidden;
+ height: 18px;
+ margin-bottom: 18px;
+ #gradient > .vertical(#f5f5f5, #f9f9f9);
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+ .border-radius(4px);
+}
+
+// Bar of progress
+.progress .bar {
+ width: 0%;
+ height: 18px;
+ color: @white;
+ font-size: 12px;
+ text-align: center;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+
+ #gradient > .vertical(lighten(@accent, 25%), @accent);
+
+ .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+ .box-sizing(border-box);
+ .transition(width .6s ease);
+}
+
+// Striped bars
+.progress-striped .bar {
+ #gradient > .striped(@accent);
+ .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;
+ animation: progress-bar-stripes 2s linear infinite;
+}
+
+
+
+// COLORS
+// ------
+
+// Danger (red)
+.progress-danger .bar {
+ #gradient > .vertical(#ee5f5b, #c43c35);
+}
+.progress-danger.progress-striped .bar {
+ #gradient > .striped(#ee5f5b);
+}
+
+// Success (green)
+.progress-success .bar {
+ #gradient > .vertical(#62c462, #57a957);
+}
+.progress-success.progress-striped .bar {
+ #gradient > .striped(#62c462);
+}
+
+// Info (teal)
+.progress-info .bar {
+ #gradient > .vertical(#5bc0de, #339bb9);
+}
+.progress-info.progress-striped .bar {
+ #gradient > .striped(#5bc0de);
+}
View
126 less/bootstrap/reset.less
@@ -0,0 +1,126 @@
+// Reset.less
+// Adapted from Normalize.css 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 {
+ max-width: 100%;
+ height: auto;
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+}
+
+// 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,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer; // Cursors on all buttons applied consistently
+ -webkit-appearance: button; // Style clicable inputs in iOS
+}
+input[type="search"] { // Appearance in Safari/Chrome
+ -webkit-appearance: textfield;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+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
+}
View
0 less/bootstrap-utilities.less → less/bootstrap/utilities.less
File renamed without changes.
View
0 less/bootstrap-variables.less → less/bootstrap/variables.less
File renamed without changes.
View
2 less/colours.less
@@ -1,5 +1,7 @@
.accent { color: @accent; }
+.white { color: @white; }
+.black { color: @black; }
.blue { color: @blue; }
.brown { color: @brown; }
.green { color: @green; }
View
10 less/metro.less
@@ -1,7 +1,5 @@
-@import "bootstrap-variables.less";
-@import "bootstrap-mixins.less";
-@import "bootstrap-layouts.less";
-@import "bootstrap-utilities.less";
+@import "bootstrap.less";
+
@import "variables.less";
@import "colours.less";
@import "type.less";
@@ -52,5 +50,5 @@ code {
padding-left: 5px;
padding-right: 5px;
}
-.clear { clear:both; }
-margin-bottom: 20px;}
+
+.clear { clear:both; }
View
2 less/variables.less
@@ -7,6 +7,8 @@
@h3fontSize: @baseFontSize * 2;
/* Colors */
+@black: #000;
+@white: #FFF;
@blue: #1BA1E2;
@brown: #A05000;
@green: #339933;

0 comments on commit a4eb952

Please sign in to comment.
Something went wrong with that request. Please try again.