Bootstrap, from Twitter

Inputs should not extend past the light red background, set on their parent, a .span* column.

Fluid row with inputs

Inputs should not extend past the light red background, set on their parent, a .span* column.

-- cgit v1.2.3 From 59ec4c7154984bd2847ff434fae7874f0b8e5265 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Apr 2012 15:40:49 -0700 Subject: make responsive input fields not wrap for fluid input prepend/append by setting block back to inline-block (oversight of 2.0.3) --- less/responsive-767px-max.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 614c6905c..e35e45d89 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -120,7 +120,7 @@ [class*="span"], .row-fluid [class*="span"] { float: none; - display: block; + display: inline-block; width: auto; margin-left: 0; } -- cgit v1.2.3 From 5ffb6d670683a32ec2a31c8550ea2669bfac7559 Mon Sep 17 00:00:00 2001 From: Synchro Date: Tue, 1 May 2012 17:01:26 +0200 Subject: Add .hyphens mixin --- less/mixins.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index b107955f5..5f3343e4e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -312,6 +312,15 @@ column-gap: @columnGap; } +// Optional hyphenation +.hyphens(@mode: auto) { + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; + hyphens: @mode; + word-wrap:break-word; +} + // Opacity .opacity(@opacity) { opacity: @opacity / 100; -- cgit v1.2.3 From dcc89e7400ae9e7575ea2671d27b514db9beaf3f Mon Sep 17 00:00:00 2001 From: Synchro Date: Tue, 1 May 2012 17:06:19 +0200 Subject: Coding style --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 5f3343e4e..bd909123e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -318,7 +318,7 @@ -moz-hyphens: @mode; -ms-hyphens: @mode; hyphens: @mode; - word-wrap:break-word; + word-wrap: break-word; } // Opacity -- cgit v1.2.3 From ca369c4b2af2a94acea00cd228d87a30fe5d2886 Mon Sep 17 00:00:00 2001 From: Synchro Date: Tue, 1 May 2012 17:54:53 +0200 Subject: Add Opera prefix --- less/mixins.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index bd909123e..44e5698eb 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -317,6 +317,7 @@ -webkit-hyphens: @mode; -moz-hyphens: @mode; -ms-hyphens: @mode; + -o-hyphens: @mode; hyphens: @mode; word-wrap: break-word; } -- cgit v1.2.3 From 20eae67147da15a75250a09f0932c0f3f2198b2b Mon Sep 17 00:00:00 2001 From: Milos Gavrilovic Date: Thu, 10 May 2012 12:25:22 +0300 Subject: Update .placeholder() mixin call In less/mixins.less this mixin is being created with @placeholderText color as default, which is actually set as @placeholderText: @grayLight in less/variables.less so it's redundant to make call like this: .placeholder(@grayLight); --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 7d967c6b3..61e29b697 100644 --- a/less/forms.less +++ b/less/forms.less @@ -344,7 +344,7 @@ select:focus:required:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -.placeholder(@grayLight); +.placeholder(); -- cgit v1.2.3 From 3a21891824f3f0af06da750bb768902e171b2ca0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 May 2012 13:58:42 -0700 Subject: #3469: add variables for dropdown menu dividers --- less/dropdowns.less | 2 +- less/mixins.less | 6 +++--- less/variables.less | 3 ++- 3 files changed, 6 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 6c60385e5..2bcd55687 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -71,7 +71,7 @@ // Dividers (basically an hr) within the dropdown .divider { - .nav-divider(); + .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); } // Links within the dropdown menu diff --git a/less/mixins.less b/less/mixins.less index b107955f5..6989b1376 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -417,7 +417,7 @@ // Horizontal dividers // ------------------------- // Dividers (basically an hr) within dropdowns and nav lists -.nav-divider() { +.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 @@ -427,8 +427,8 @@ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px *margin: -5px 0 5px; overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid @white; + background-color: @top; + border-bottom: 1px solid @bottom; } // Button backgrounds diff --git a/less/variables.less b/less/variables.less index d8825fb07..b931d3d2a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -107,7 +107,8 @@ @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; @dropdownLinkBackgroundHover: @linkColor; - +@dropdownDividerTop: #e5e5e5; +@dropdownDividerBottom: @white; -- cgit v1.2.3 From 8f4424585094354589fbab80d5b0e6b1bb6d87cf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 May 2012 14:31:31 -0700 Subject: document .hyphens() mixin --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index b5c5352cf..8efe12b38 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -314,12 +314,12 @@ // Optional hyphenation .hyphens(@mode: auto) { + word-wrap: break-word; -webkit-hyphens: @mode; -moz-hyphens: @mode; -ms-hyphens: @mode; -o-hyphens: @mode; hyphens: @mode; - word-wrap: break-word; } // Opacity -- cgit v1.2.3 From a2fb9ed42f4fedbf2045601bedc8dace4d8bbd36 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 May 2012 17:43:04 -0700 Subject: #3449: make legend and form-actions the same border color --- less/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 61e29b697..9f95dd64f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -27,7 +27,7 @@ legend { line-height: @baseLineHeight * 2; color: @grayDark; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; // Small small { @@ -329,7 +329,7 @@ select:focus:required:invalid { margin-top: @baseLineHeight; margin-bottom: @baseLineHeight; background-color: @formActionsBackground; - border-top: 1px solid #ddd; + border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers } -- cgit v1.2.3 From ea156609736513a4ad5aa22ef574bccbc3d23330 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 May 2012 21:52:18 -0700 Subject: #3420: properly scope dropdown open state to immediate children only --- less/dropdowns.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 2bcd55687..96dfec223 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -103,7 +103,7 @@ // make the menu appear below buttons that appeared later on the page *z-index: @zindexDropdown; - .dropdown-menu { + & > .dropdown-menu { display: block; } } -- cgit v1.2.3 From 826a8714e266e488fc51bc9ca779556731b8afd3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 May 2012 22:11:35 -0700 Subject: #3257: share .navbar-fixed-top styles with .navbar-fixed-bottom --- less/responsive-navbar.less | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index d49b8ae12..8d31db531 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -9,11 +9,18 @@ padding-top: 0; } // Unfix the navbar - .navbar-fixed-top { + .navbar-fixed-top, + .navbar-fixed-bottom { position: static; + } + .navbar-fixed-top { margin-bottom: @baseLineHeight; } - .navbar-fixed-top .navbar-inner { + .navbar-fixed-bottom { + margin-top: @baseLineHeight; + } + .navbar-fixed-top .navbar-inner, + .navbar-fixed-bottom .navbar-inner { padding: 5px; } .navbar .container { -- cgit v1.2.3 From a0809ceebe5332a1c3e355a762d1bff3e477ce37 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 May 2012 23:40:06 -0700 Subject: add forms test page for all html5 input types and refactor selectors --- less/forms.less | 131 ++++++++++++++++++++++++++------------------------------ 1 file changed, 60 insertions(+), 71 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 9f95dd64f..f9a994a7b 100644 --- a/less/forms.less +++ b/less/forms.less @@ -58,69 +58,88 @@ label { color: @grayDark; } -// Inputs, Textareas, Selects -input, -textarea, +// Form controls +// ------------------------- + +// Shared resets select, -.uneditable-input { +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { display: inline-block; - width: 210px; height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; +} + +// Textual inputs and textareas +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { background-color: @inputBackground; border: 1px solid @inputBorder; .border-radius(@inputBorderRadius); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @transition: border linear .2s, box-shadow linear .2s; + .transition(@transition); } -.uneditable-textarea { - width: auto; - height: auto; + +input[type="radio"], +input[type="checkbox"] { + } -// Inputs within a label -label input, -label textarea, -label select { - display: block; +input[type="button"], +input[type="submit"], +input[type="reset"] { + } -// Mini reset for unique input types -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; /* IE7 */ - line-height: normal; - cursor: pointer; - background-color: transparent; - border: 0 \9; /* IE9 and down */ - .border-radius(0); +input[type="file"] { + +} + +input[type="hidden"] { + } + input[type="image"] { - border: 0; + } -// Reset the file input to browser defaults -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - background-color: @inputBackground; - background-color: initial; - border: initial; - .box-shadow(none); +input[type="range"] { + } -// Help out input buttons -input[type="button"], -input[type="reset"], -input[type="submit"] { +// Make uneditable textareas behave like a textarea +.uneditable-textarea { width: auto; height: auto; } @@ -133,37 +152,13 @@ input[type="file"] { line-height: 28px; } -// Reset line-height for IE -input[type="file"] { - line-height: 18px \9; -} - -// Chrome on Linux and Mobile Safari need background-color -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - background-color: @inputBackground; -} - // Make multiple select elements height not fixed select[multiple], select[size] { height: auto; } -// Remove shadow from image inputs -input[type="image"] { - .box-shadow(none); -} -// Make textarea height behave -textarea { - height: auto; -} - -// Hidden inputs -input[type="hidden"] { - display: none; -} @@ -207,12 +202,6 @@ input[type="hidden"] { // FOCUS STATE // ----------- -input, -textarea { - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @transition: border linear .2s, box-shadow linear .2s; - .transition(@transition); -} input:focus, textarea:focus { border-color: rgba(82,168,236,.8); -- cgit v1.2.3 From e28efd7da07d20d706421b3c868ccc08e0e3077d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 May 2012 23:42:32 -0700 Subject: consolidate and relabel new form selectors --- less/forms.less | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index f9a994a7b..4a218033a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -61,7 +61,7 @@ label { // Form controls // ------------------------- -// Shared resets +// Shared size and type resets select, textarea, input[type="text"], @@ -87,7 +87,7 @@ input[type="color"] { color: @gray; } -// Textual inputs and textareas +// Reset background, border, and box-shadow for textual inputs and textarea textarea, input[type="text"], input[type="password"], @@ -111,31 +111,21 @@ input[type="color"] { .transition(@transition); } +// Unused selectors input[type="radio"], input[type="checkbox"] { - } - input[type="button"], input[type="submit"], input[type="reset"] { - } - input[type="file"] { - } - input[type="hidden"] { - } - input[type="image"] { - } - input[type="range"] { - } // Make uneditable textareas behave like a textarea -- cgit v1.2.3 From c8cafa5d5a352d33e96b8580a4a68b943f71882e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 May 2012 23:45:25 -0700 Subject: move forms test to less/tests --- less/tests/forms.html | 175 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 less/tests/forms.html (limited to 'less') diff --git a/less/tests/forms.html b/less/tests/forms.html new file mode 100644 index 000000000..4b3328e2e --- /dev/null +++ b/less/tests/forms.html @@ -0,0 +1,175 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +

+ + + +

+ + Select + + +

+ + textarea + + +

+ + text + + +

+ + password + + +

+ + checkbox + + +

+ + radio + + +

+ + button + + +

+ + submit + + +

+ + reset + + +

+ + file + + +

+ + hidden + + +

+ + image + + +

+ +

+ + datetime + + +

+ + datetime-local + + +

+ + date + + +

+ + month + + +

+ + time + + +

+ + week + + +

+ + number + + +

+ + range + + +

+ + email + + +

+ + url + + +

+ + search + + +

+ + tel + + +

+ + color + + +

+ +

+ + + -- cgit v1.2.3 From 87f6e426b33590bf8b14d933cd9cbb101a9bed23 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 May 2012 23:50:34 -0700 Subject: three columns --- less/tests/forms.html | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/tests/forms.html b/less/tests/forms.html index 4b3328e2e..a63d728a0 100644 --- a/less/tests/forms.html +++ b/less/tests/forms.html @@ -10,6 +10,12 @@ + +

file @@ -97,11 +104,7 @@ image -

- -

datetime @@ -131,7 +134,8 @@ week -

number @@ -166,7 +170,7 @@ color -

Fixed row with inputs

Fluid row with inputs

Form controls

Navbar example

Fluid prepended and appended inputs

Fixed row with inputs