+
+
Form field sizes
+
Customize any form input, select, or textarea width by adding just a few classes to your markup.
+
As of v1.3.0, we have added the grid-based sizing classes for form elements. Please use the these over the existing .mini, .small, etc classes.
+
+
+
Buttons
As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.
-
All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class. Plus, rolling your own styles is easy peasy.
+
All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.
Example buttons
diff --git a/lib/forms.less b/lib/forms.less
index 90b8720f03..c867511936 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -184,6 +184,7 @@ form div.error {
}
// Form element sizes
+// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini,
input.mini,
textarea.mini,
@@ -224,6 +225,34 @@ textarea.xxlarge {
overflow-y: auto;
}
+// Grid style input sizes
+// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
+.formColumns(@columnSpan: 1) {
+ width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
+ margin-left: 0;
+}
+input,
+textarea,
+select {
+ // Default columns
+ &.span1 { .formColumns(1); }
+ &.span2 { .formColumns(2); }
+ &.span3 { .formColumns(3); }
+ &.span4 { .formColumns(4); }
+ &.span5 { .formColumns(5); }
+ &.span6 { .formColumns(6); }
+ &.span7 { .formColumns(7); }
+ &.span8 { .formColumns(8); }
+ &.span9 { .formColumns(9); }
+ &.span10 { .formColumns(10); }
+ &.span11 { .formColumns(11); }
+ &.span12 { .formColumns(12); }
+ &.span13 { .formColumns(13); }
+ &.span14 { .formColumns(14); }
+ &.span15 { .formColumns(15); }
+ &.span16 { .formColumns(16); }
+}
+
// Disabled and read-only inputs
input[disabled],
select[disabled],
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 263087b066..2dc67c6532 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -79,58 +79,58 @@ a {
.row {
.clearfix();
margin-left: -1 * @gridGutterWidth;
+}
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
- // Credit to @dhg for the idea
- [class*="span"] {
- .gridColumn();
- }
+// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
+// Credit to @dhg for the idea
+[class*="span"] {
+ .gridColumn();
+}
- // Default columns
- .span1 { .columns(1); }
- .span2 { .columns(2); }
- .span3 { .columns(3); }
- .span4 { .columns(4); }
- .span5 { .columns(5); }
- .span6 { .columns(6); }
- .span7 { .columns(7); }
- .span8 { .columns(8); }
- .span9 { .columns(9); }
- .span10 { .columns(10); }
- .span11 { .columns(11); }
- .span12 { .columns(12); }
- .span13 { .columns(13); }
- .span14 { .columns(14); }
- .span15 { .columns(15); }
- .span16 { .columns(16); }
+// Default columns
+.span1 { .columns(1); }
+.span2 { .columns(2); }
+.span3 { .columns(3); }
+.span4 { .columns(4); }
+.span5 { .columns(5); }
+.span6 { .columns(6); }
+.span7 { .columns(7); }
+.span8 { .columns(8); }
+.span9 { .columns(9); }
+.span10 { .columns(10); }
+.span11 { .columns(11); }
+.span12 { .columns(12); }
+.span13 { .columns(13); }
+.span14 { .columns(14); }
+.span15 { .columns(15); }
+.span16 { .columns(16); }
- // For optional 24-column grid
- .span17 { .columns(17); }
- .span18 { .columns(18); }
- .span19 { .columns(19); }
- .span20 { .columns(20); }
- .span21 { .columns(21); }
- .span22 { .columns(22); }
- .span23 { .columns(23); }
- .span24 { .columns(24); }
+// For optional 24-column grid
+.span17 { .columns(17); }
+.span18 { .columns(18); }
+.span19 { .columns(19); }
+.span20 { .columns(20); }
+.span21 { .columns(21); }
+.span22 { .columns(22); }
+.span23 { .columns(23); }
+.span24 { .columns(24); }
- // Offset column options
- .offset1 { .offset(1); }
- .offset2 { .offset(2); }
- .offset3 { .offset(3); }
- .offset4 { .offset(4); }
- .offset5 { .offset(5); }
- .offset6 { .offset(6); }
- .offset7 { .offset(7); }
- .offset8 { .offset(8); }
- .offset9 { .offset(9); }
- .offset10 { .offset(10); }
- .offset11 { .offset(11); }
- .offset12 { .offset(12); }
+// Offset column options
+.offset1 { .offset(1); }
+.offset2 { .offset(2); }
+.offset3 { .offset(3); }
+.offset4 { .offset(4); }
+.offset5 { .offset(5); }
+.offset6 { .offset(6); }
+.offset7 { .offset(7); }
+.offset8 { .offset(8); }
+.offset9 { .offset(9); }
+.offset10 { .offset(10); }
+.offset11 { .offset(11); }
+.offset12 { .offset(12); }
- // Unique column sizes for 16-column grid
- .span-one-third { width: 300px; }
- .span-two-thirds { width: 620px; }
- .offset-one-third { margin-left: 340px; }
- .offset-two-thirds { margin-left: 660px; }
-}
\ No newline at end of file
+// Unique column sizes for 16-column grid
+.span-one-third { width: 300px; }
+.span-two-thirds { width: 620px; }
+.offset-one-third { margin-left: 340px; }
+.offset-two-thirds { margin-left: 660px; }
\ No newline at end of file