From 1983ca03ec4f84bf9076d9327bc966caffda4ea6 Mon Sep 17 00:00:00 2001 From: Mark Otto <otto@github.com> Date: Thu, 16 May 2013 20:17:42 -0700 Subject: [PATCH] Form validation and horizontal row update * changed .row-label to .control-label as used elsewhere already * changed .formFieldState mixin to .form-field-validation --- docs/assets/css/bootstrap.css | 4 ++-- docs/css.html | 8 ++++---- less/forms.less | 10 +++++----- less/mixins.less | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 9737e77713..4542376d8b 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1666,12 +1666,12 @@ select:focus:invalid:focus { margin-top: 15px; } -.form-horizontal .row-label { +.form-horizontal .control-label { padding-top: 6px; } @media (min-width: 768px) { - .form-horizontal .row-label { + .form-horizontal .control-label { text-align: right; } } diff --git a/docs/css.html b/docs/css.html index f599f799f9..be4e130985 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1077,13 +1077,13 @@ For example, <code><section></code> should be wrapped as inline. <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p> <form class="bs-example form-horizontal"> <div class="row"> - <label for="inputEmail" class="col col-lg-2 row-label">Email</label> + <label for="inputEmail" class="col col-lg-2 control-label">Email</label> <div class="col col-lg-10"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="row"> - <label for="" class="col col-lg-2 row-label">Password</label> + <label for="" class="col col-lg-2 control-label">Password</label> <div class="col col-lg-10"> <input type="password" id="inputPassword" placeholder="Password"> <div class="checkbox"> @@ -1100,13 +1100,13 @@ For example, <code><section></code> should be wrapped as inline. {% highlight html %} <form class="form-horizontal"> <div class="row"> - <label for="inputEmail" class="col col-lg-2 row-label">Email</label> + <label for="inputEmail" class="col col-lg-2 control-label">Email</label> <div class="col col-lg-10"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="row"> - <label for="" class="col col-lg-2 row-label">Password</label> + <label for="" class="col col-lg-2 control-label">Password</label> <div class="col col-lg-10"> <input type="password" id="inputPassword" placeholder="Password"> <div class="checkbox"> diff --git a/less/forms.less b/less/forms.less index 4e028bf495..303c3b6179 100644 --- a/less/forms.less +++ b/less/forms.less @@ -268,15 +268,15 @@ input[type="checkbox"] { // Warning .has-warning { - .formFieldState(@state-warning-text, @state-warning-text, @state-warning-bg); + .form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg); } // Error .has-error { - .formFieldState(@state-danger-text, @state-danger-text, @state-danger-bg); + .form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg); } // Success .has-success { - .formFieldState(@state-success-text, @state-success-text, @state-success-bg); + .form-field-validation(@state-success-text, @state-success-text, @state-success-bg); } // HTML5 invalid states @@ -443,14 +443,14 @@ select:focus:invalid { .row + .row { margin-top: 15px; } - .row-label { + .control-label { padding-top: 6px; } } // Only right aline form labels here when the columns stop stacking @media (min-width: 768px) { - .form-horizontal .row-label { + .form-horizontal .control-label { text-align: right; } } diff --git a/less/mixins.less b/less/mixins.less index dcba39f85e..a2338c1843 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -531,7 +531,7 @@ } // Generate form validation states -.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { +.form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { // Color the label text .control-label { color: @text-color; -- GitLab