From 74a264fb98ced0228d385d601e9edd913bb1b173 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jun 2014 18:19:17 -0700 Subject: fixes #13021: add .form-group-sm/-lg --- less/forms.less | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 2f629b0a1..ab23e68a3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -507,4 +507,29 @@ input[type="checkbox"] { top: 0; right: (@grid-gutter-width / 2); } + + // Form group sizes + // + // Quick utility class for applying `.input-lg` and `.input-sm` styles to the + // inputs and labels within a `.form-group`. + .form-group-lg { + @media (min-width: @screen-sm-min) { + .control-label { + padding-top: ((@padding-large-vertical * @line-height-large) + 1); + } + } + .form-control { + &:extend(.input-lg); + } + } + .form-group-sm { + @media (min-width: @screen-sm-min) { + .control-label { + padding-top: (@padding-small-vertical + 1); + } + } + .form-control { + &:extend(.input-sm); + } + } } -- cgit v1.2.3 From 1e53dcd137e7d8c8abe26af610ebb14c26de1043 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jun 2014 18:33:41 -0700 Subject: Fixes #13872: Always apply padding to .form-control-static for that vertical alignment --- less/forms.less | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index ab23e68a3..202cdfcc4 100644 --- a/less/forms.less +++ b/less/forms.less @@ -355,7 +355,11 @@ input[type="checkbox"] { // a horizontal form layout. .form-control-static { - margin-bottom: 0; // Remove default margin from `p` + // Size it appropriately next to real form controls + padding-top: (@padding-base-vertical + 1); + padding-bottom: (@padding-base-vertical + 1); + // Remove default margin from `p` + margin-bottom: 0; } @@ -484,11 +488,6 @@ input[type="checkbox"] { .make-row(); } - .form-control-static { - padding-top: (@padding-base-vertical + 1); - padding-bottom: (@padding-base-vertical + 1); - } - // Reset spacing and right align labels, but scope to media queries so that // labels on narrow viewports stack the same as a default form example. @media (min-width: @screen-sm-min) { -- cgit v1.2.3 From e98fc373e3ef6e4a884a0142d50c765a9db5bd01 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Jun 2014 13:24:14 -0700 Subject: Fixes #13872 more: add overrides for lg and sm input modifiers --- less/forms.less | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 202cdfcc4..841762f4c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -281,6 +281,26 @@ input[type="checkbox"] { } +// Static form control text +// +// Apply class to a `p` element to make any string of text align with labels in +// a horizontal form layout. + +.form-control-static { + // Size it appropriately next to real form controls + padding-top: (@padding-base-vertical + 1); + padding-bottom: (@padding-base-vertical + 1); + // Remove default margin from `p` + margin-bottom: 0; + + &.input-lg, + &.input-sm { + padding-left: 0; + padding-right: 0; + } +} + + // Form control sizing // // Build on `.form-control` with modifier classes to decrease or increase the @@ -349,20 +369,6 @@ input[type="checkbox"] { } -// Static form control text -// -// Apply class to a `p` element to make any string of text align with labels in -// a horizontal form layout. - -.form-control-static { - // Size it appropriately next to real form controls - padding-top: (@padding-base-vertical + 1); - padding-bottom: (@padding-base-vertical + 1); - // Remove default margin from `p` - margin-bottom: 0; -} - - // Help text // // Apply to any element you wish to create light text for placement immediately -- cgit v1.2.3 From e40df7cfacef0b581810c8ec661923054541638c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jun 2014 16:56:36 -0700 Subject: fixes #13912: make radios/checkboxes work with inline forms again --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 841762f4c..2c5e9bfa9 100644 --- a/less/forms.less +++ b/less/forms.less @@ -449,7 +449,7 @@ input[type="checkbox"] { } .radio input[type="radio"], .checkbox input[type="checkbox"] { - float: none; + position: relative; margin-left: 0; } -- cgit v1.2.3 From 77c1a528ab48ba695f52f4f8f7b97bf7bbde05d1 Mon Sep 17 00:00:00 2001 From: Boris Serdyuk Date: Tue, 1 Jul 2014 19:15:00 +0400 Subject: place feedback icon lower, only if it really need --- less/forms.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 2c5e9bfa9..cb8add4b6 100644 --- a/less/forms.less +++ b/less/forms.less @@ -331,7 +331,7 @@ input[type="checkbox"] { // Feedback icon (requires .glyphicon classes) .form-control-feedback { position: absolute; - top: (@line-height-computed + 5); // Height of the `label` and its margin + top: 0; right: 0; z-index: 2; // Ensure icon is above input groups display: block; @@ -363,9 +363,14 @@ input[type="checkbox"] { } -// Reposition feedback icon if label is hidden with "screenreader only" state -.has-feedback label.sr-only ~ .form-control-feedback { - top: 0; +// Reposition feedback icon if input has visible label above +.has-feedback label { + & ~ .form-control-feedback { + top: (@line-height-computed + 5); // Height of the `label` and its margin + } + &.sr-only ~ .form-control-feedback { + top: 0; + } } -- cgit v1.2.3 From b4958aba69cd942271bba465d5cbc8ef4a1d0529 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 2 Jul 2014 22:54:56 -0700 Subject: merge in and resolve conflicts --- less/forms.less | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index cb8add4b6..ca9194cf2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -362,9 +362,9 @@ input[type="checkbox"] { .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); } - // Reposition feedback icon if input has visible label above .has-feedback label { + & ~ .form-control-feedback { top: (@line-height-computed + 5); // Height of the `label` and its margin } @@ -387,7 +387,6 @@ input[type="checkbox"] { } - // Inline forms // // Make forms appear inline(-block) by adding the `.form-inline` class. Inline @@ -458,10 +457,7 @@ input[type="checkbox"] { margin-left: 0; } - // Validation states - // - // Reposition the icon because it's now within a grid column and columns have - // `position: relative;` on them. Also accounts for the grid gutter padding. + // Re-override the feedback icon. .has-feedback .form-control-feedback { top: 0; } @@ -514,7 +510,6 @@ input[type="checkbox"] { // Reposition the icon because it's now within a grid column and columns have // `position: relative;` on them. Also accounts for the grid gutter padding. .has-feedback .form-control-feedback { - top: 0; right: (@grid-gutter-width / 2); } -- cgit v1.2.3 From 96b545c6b5ebf5f74b75a735359187bd9b80689d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 2 Jul 2014 23:14:23 -0700 Subject: Fixes #13989: Don't extend the input sizes; manually chain the selectors --- less/forms.less | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index ca9194cf2..dd113013f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -306,11 +306,13 @@ input[type="checkbox"] { // Build on `.form-control` with modifier classes to decrease or increase the // height and font-size of form controls. -.input-sm { +.input-sm, +.form-group-sm .form-control { .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); } -.input-lg { +.input-lg, +.form-group-l .form-control { .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); } @@ -523,9 +525,6 @@ input[type="checkbox"] { padding-top: ((@padding-large-vertical * @line-height-large) + 1); } } - .form-control { - &:extend(.input-lg); - } } .form-group-sm { @media (min-width: @screen-sm-min) { @@ -533,8 +532,5 @@ input[type="checkbox"] { padding-top: (@padding-small-vertical + 1); } } - .form-control { - &:extend(.input-sm); - } } } -- cgit v1.2.3 From fcf9470a20c18c36bd306d1a3a708ed09255a226 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 2 Jul 2014 23:35:37 -0700 Subject: typo --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index dd113013f..d3c726765 100644 --- a/less/forms.less +++ b/less/forms.less @@ -312,7 +312,7 @@ input[type="checkbox"] { } .input-lg, -.form-group-l .form-control { +.form-group-lg .form-control { .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); } -- cgit v1.2.3 From e2029e122c58d5bca7f439ea4c8220957acc8903 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 6 Jul 2014 15:09:20 -0700 Subject: Fixes #13997: Move min-height for radio/checkbox to their inner label --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index d3c726765..26589b3eb 100644 --- a/less/forms.less +++ b/less/forms.less @@ -208,11 +208,11 @@ input[type="month"] { .checkbox { position: relative; display: block; - min-height: @line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; label { + min-height: @line-height-computed; // Ensure the input doens't jump when no text padding-left: 20px; margin-bottom: 0; font-weight: normal; -- cgit v1.2.3 From dc22226b95adba748dfc82fddfe1d128d9d8e057 Mon Sep 17 00:00:00 2001 From: Heinrich Fenkart Date: Mon, 7 Jul 2014 09:23:12 +0200 Subject: Fix small typo introduced in e2029e1 --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 26589b3eb..baeea7ca6 100644 --- a/less/forms.less +++ b/less/forms.less @@ -212,7 +212,7 @@ input[type="month"] { margin-bottom: 10px; label { - min-height: @line-height-computed; // Ensure the input doens't jump when no text + min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text padding-left: 20px; margin-bottom: 0; font-weight: normal; -- cgit v1.2.3 From c298fb1a8839b722596253c30049bc971d47b87f Mon Sep 17 00:00:00 2001 From: Kyle Date: Wed, 9 Jul 2014 19:21:45 -0400 Subject: Add Pointer Events --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index baeea7ca6..98a40cb99 100644 --- a/less/forms.less +++ b/less/forms.less @@ -341,6 +341,7 @@ input[type="checkbox"] { height: @input-height-base; line-height: @input-height-base; text-align: center; + pointer-events: none; } .input-lg + .form-control-feedback { width: @input-height-large; -- cgit v1.2.3 From 5713bd74d617126796205d4ee29bfc6ff192ad39 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 23 Jul 2014 20:32:05 -0700 Subject: Fixes #12669 again: Redeclare the line-heights again for date inputs in IE8+ --- less/forms.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 98a40cb99..d3c375688 100644 --- a/less/forms.less +++ b/less/forms.less @@ -183,9 +183,11 @@ input[type="month"] { &.input-sm { line-height: @input-height-small; + line-height: @line-height-small ~"\0"; } &.input-lg { line-height: @input-height-large; + line-height: @line-height-large ~"\0"; } } -- cgit v1.2.3 From 078aafe7fd5d7f44725d4de76d0a0510ce43d344 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 23 Jul 2014 20:54:07 -0700 Subject: Fixes #14221: Make .form-control-static work in inline forms as well --- less/forms.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index d3c375688..7749479d2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -421,6 +421,11 @@ input[type="checkbox"] { vertical-align: middle; } + // Make static controls behave like regular ones + .form-control-static { + display: inline-block; + } + .input-group { display: inline-table; vertical-align: middle; -- cgit v1.2.3 From 6424acf69ae40a916db04b5c3235f1780f11b4be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 2 Aug 2014 21:16:32 -0700 Subject: Fixes #14234: Reset the hack IE8-10 with another hack just for IE11 for temporal inputs and line-height --- less/forms.less | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'less/forms.less') diff --git a/less/forms.less b/less/forms.less index 7749479d2..6077ae7a3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -191,6 +191,21 @@ input[type="month"] { } } +// IE 11 hack to reverse the iOS temporal input hack. +_:-ms-fullscreen, :root input[type="date"], +_:-ms-fullscreen, :root input[type="time"], +_:-ms-fullscreen, :root input[type="datetime-local"], +_:-ms-fullscreen, :root input[type="month"] { + line-height: @line-height-base; + + &.input-sm { + line-height: @line-height-small; + } + &.input-lg { + line-height: @line-height-large; + } +} + // Form groups // -- cgit v1.2.3