mirror of https://github.com/twbs/bootstrap.git
rewrite some forms docs, use new validation styles and icons
This commit is contained in:
Mark Otto
parent
14d8c29596
commit
7c3f5b6d59
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,19 @@
|
|||
/*!
|
||||
* Bootstrap v4.0.0-alpha (http://getbootstrap.com)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under ()
|
||||
*/
|
||||
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0; }
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
|
|
@ -20,294 +28,367 @@ menu,
|
|||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline; }
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0; }
|
||||
height: 0;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent; }
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:active {
|
||||
outline: 0; }
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
outline: 0; }
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted; }
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: .67em 0;
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0; }
|
||||
}
|
||||
|
||||
mark {
|
||||
color: #000;
|
||||
background: #ff0;
|
||||
color: #000; }
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%; }
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline; }
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em; }
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em; }
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0; }
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; }
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px; }
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0; }
|
||||
height: 0;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto; }
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em; }
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
margin: 0; }
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible; }
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; }
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type="button"], input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer; }
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default; }
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: normal; }
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0; }
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-webkit-appearance: textfield;
|
||||
box-sizing: content-box; }
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
padding: .35em .625em .75em;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em; }
|
||||
border: 1px solid #c0c0c0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; }
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0; }
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box; }
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit; }
|
||||
-webkit-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
@-moz-viewport {
|
||||
width: device-width; }
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width; }
|
||||
|
||||
@-o-viewport {
|
||||
width: device-width; }
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@-webkit-viewport {
|
||||
width: device-width; }
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@viewport {
|
||||
width: device-width; }
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #373a3c;
|
||||
background-color: #fff; }
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem; }
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #818a91; }
|
||||
border-bottom: 1px dotted #818a91;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit; }
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0; }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; }
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem; }
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0275d8;
|
||||
text-decoration: none; }
|
||||
a:focus,
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #014c8c;
|
||||
text-decoration: underline; }
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
color: #014c8c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem; }
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle; }
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer; }
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: transparent; }
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
color: #818a91;
|
||||
text-align: left;
|
||||
caption-side: bottom; }
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left; }
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem; }
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
line-height: inherit; }
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical; }
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0; }
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
|
|
@ -315,12 +396,14 @@ legend {
|
|||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit; }
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none; }
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block; }
|
||||
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
display: inline-block;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -15,7 +15,7 @@ Bootstrap provides several form control styles, layout options, and custom compo
|
|||
|
||||
Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
|
||||
|
||||
Remember, since Bootstrap utilizies the HTML5 doctype, **all inputs must have a `type` attribute** for proper rendering.
|
||||
Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**.
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
|
|
@ -425,16 +425,6 @@ When you need to place plain text next to a form label within a form, use the `.
|
|||
</form>
|
||||
{% endexample %}
|
||||
|
||||
## Focus state
|
||||
|
||||
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`. Shown below is a custom input that only **demonstrates** the `:focus` state on an `<input>` with `.form-control`.
|
||||
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
## Disabled states
|
||||
|
||||
Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
|
||||
|
|
@ -534,6 +524,7 @@ Block level help text for form controls.
|
|||
|
||||
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
|
||||
|
||||
{% comment %}
|
||||
{% callout warning %}
|
||||
#### Conveying validation state to assistive technologies and colorblind users
|
||||
|
||||
|
|
@ -541,20 +532,22 @@ Using these validation styles to denote the state of a form control only provide
|
|||
|
||||
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
|
||||
{% endcallout %}
|
||||
{% endcomment %}
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
<input type="text" class="form-control form-control-error" id="inputError1">
|
||||
</div>
|
||||
|
||||
<div class="has-success">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
|
|
@ -581,100 +574,6 @@ Ensure that an alternative indication of state is also provided. For instance, y
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
|
||||
|
||||
{% callout warning %}
|
||||
#### Icons, labels, and input groups
|
||||
|
||||
Manual positioning of feedback icons is required for inputs without a label and for [input groups](../components#input-groups) with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
|
||||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputSuccess2Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
<div class="form-group has-warning has-feedback">
|
||||
<label class="control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputWarning2Status" class="sr-only">(warning)</span>
|
||||
</div>
|
||||
<div class="form-group has-error has-feedback">
|
||||
<label class="control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputError2Status" class="sr-only">(error)</span>
|
||||
</div>
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
|
||||
</div>
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="inputSuccess3">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
|
||||
</div>
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess4">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess4">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
|
||||
</div>
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
|
||||
<input type="text" class="form-control" id="inputSuccess5">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Custom forms
|
||||
|
||||
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.
|
||||
|
|
@ -703,7 +602,7 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
|
|||
</label>
|
||||
{% endexample %}
|
||||
|
||||
Custom checkboxes can also utilize the `:indeterminate` pseudo class.
|
||||
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
|
||||
|
||||
<div class="bd-example bd-example-indeterminate">
|
||||
<label class="c-input c-checkbox">
|
||||
|
|
@ -713,7 +612,7 @@ Custom checkboxes can also utilize the `:indeterminate` pseudo class.
|
|||
</label>
|
||||
</div>
|
||||
|
||||
**Heads up!** You'll need to set this state manually via JavaScript as there is no available HTML attribute for specifying it. If you're using jQuery, something like this should suffice:
|
||||
If you're using jQuery, something like this should suffice:
|
||||
|
||||
{% highlight js %}
|
||||
$('.your-checkbox').prop('indeterminate', true)
|
||||
|
|
|
|||
|
|
@ -2259,7 +2259,7 @@ pre code {
|
|||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #55595c;
|
||||
|
|
@ -2267,9 +2267,6 @@ pre code {
|
|||
background-image: none;
|
||||
border: .0625rem solid #ccc;
|
||||
border-radius: .25rem;
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
.form-control::-ms-expand {
|
||||
background-color: transparent;
|
||||
|
|
@ -2312,7 +2309,7 @@ pre code {
|
|||
}
|
||||
|
||||
.form-control-label {
|
||||
padding: .5625rem .75rem;
|
||||
padding: .5625rem 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -2458,38 +2455,14 @@ fieldset[disabled] .checkbox label {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
.has-feedback .form-control {
|
||||
padding-right: 3.28125rem;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 2.625rem;
|
||||
height: 2.625rem;
|
||||
line-height: 2.625rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-lg + .form-control-feedback,
|
||||
.input-group-lg + .form-control-feedback {
|
||||
width: 3.291667rem;
|
||||
height: 3.291667rem;
|
||||
line-height: 3.291667rem;
|
||||
}
|
||||
|
||||
.input-sm + .form-control-feedback,
|
||||
.input-group-sm + .form-control-feedback {
|
||||
width: 1.95rem;
|
||||
height: 1.95rem;
|
||||
line-height: 1.95rem;
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-error {
|
||||
padding-right: 3rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right .65625rem;
|
||||
-webkit-background-size: 1.70625rem 1.70625rem;
|
||||
background-size: 1.70625rem 1.70625rem;
|
||||
}
|
||||
|
||||
.has-success .help-block,
|
||||
|
|
@ -2502,24 +2475,25 @@ fieldset[disabled] .checkbox label {
|
|||
.has-success.checkbox label,
|
||||
.has-success.radio-inline label,
|
||||
.has-success.checkbox-inline label {
|
||||
color: #3c763d;
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .form-control {
|
||||
border-color: #3c763d;
|
||||
}
|
||||
.has-success .form-control:focus {
|
||||
border-color: #2b542c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .input-group-addon {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #3c763d;
|
||||
color: #5cb85c;
|
||||
background-color: #eaf6ea;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .form-control-feedback {
|
||||
color: #3c763d;
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .form-control-success {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.has-warning .help-block,
|
||||
|
|
@ -2532,24 +2506,25 @@ fieldset[disabled] .checkbox label {
|
|||
.has-warning.checkbox label,
|
||||
.has-warning.radio-inline label,
|
||||
.has-warning.checkbox-inline label {
|
||||
color: #8a6d3b;
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .form-control {
|
||||
border-color: #8a6d3b;
|
||||
}
|
||||
.has-warning .form-control:focus {
|
||||
border-color: #66512c;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .input-group-addon {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #8a6d3b;
|
||||
color: #f0ad4e;
|
||||
background-color: white;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .form-control-feedback {
|
||||
color: #8a6d3b;
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .form-control-warning {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.has-error .help-block,
|
||||
|
|
@ -2562,32 +2537,25 @@ fieldset[disabled] .checkbox label {
|
|||
.has-error.checkbox label,
|
||||
.has-error.radio-inline label,
|
||||
.has-error.checkbox-inline label {
|
||||
color: #a94442;
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.has-error .form-control {
|
||||
border-color: #a94442;
|
||||
}
|
||||
.has-error .form-control:focus {
|
||||
border-color: #843534;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.has-error .input-group-addon {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #a94442;
|
||||
color: #d9534f;
|
||||
background-color: #fdf7f7;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.has-error .form-control-feedback {
|
||||
color: #a94442;
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.has-feedback label ~ .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.has-feedback label.sr-only ~ .form-control-feedback {
|
||||
top: 0;
|
||||
.has-error .form-control-error {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
.help-block {
|
||||
|
|
@ -2650,7 +2618,7 @@ fieldset[disabled] .checkbox label {
|
|||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
|
|
@ -3431,7 +3399,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
|
|
@ -4362,7 +4330,7 @@ input[type="button"].btn-block {
|
|||
.pagination > li > span {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
margin-left: -1px;
|
||||
line-height: 1.5;
|
||||
color: #0275d8;
|
||||
|
|
@ -4532,6 +4500,12 @@ a.label:hover {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.label-default {
|
||||
background-color: #818a91;
|
||||
}
|
||||
|
|
@ -4580,51 +4554,6 @@ a.label:hover {
|
|||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: relative;
|
||||
top: -.1em;
|
||||
display: inline-block;
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
font-size: .75em;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background-color: #818a91;
|
||||
border-radius: 2em;
|
||||
}
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
.badge.pull-left,
|
||||
.badge.pull-right {
|
||||
top: .2em;
|
||||
}
|
||||
.list-group-item.active > .badge,
|
||||
.nav-pills > .active > a > .badge {
|
||||
color: #0275d8;
|
||||
background-color: #fff;
|
||||
}
|
||||
.list-group-item > .badge {
|
||||
float: right;
|
||||
}
|
||||
.list-group-item > .badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav-pills > li > a > .badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
a.badge:focus,
|
||||
a.badge:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding: 2rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -4990,7 +4919,9 @@ a.badge:hover {
|
|||
|
||||
a.list-group-item,
|
||||
button.list-group-item {
|
||||
color: #555;
|
||||
width: 100%;
|
||||
color: #555;
|
||||
text-align: inherit;
|
||||
}
|
||||
a.list-group-item .list-group-item-heading,
|
||||
button.list-group-item .list-group-item-heading {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/mixins/_tab-focus.scss"],"names":[],"mappings":"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","file":"bootstrap-reboot.css"}
|
||||
{"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/mixins/_tab-focus.scss"],"names":[],"mappings":"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","file":"bootstrap-reboot.css"}
|
||||
|
|
@ -1826,7 +1826,7 @@ pre code {
|
|||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #55595c;
|
||||
|
|
@ -1834,9 +1834,6 @@ pre code {
|
|||
background-image: none;
|
||||
border: .0625rem solid #ccc;
|
||||
border-radius: .25rem;
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
.form-control::-ms-expand {
|
||||
background-color: transparent;
|
||||
|
|
@ -1879,7 +1876,7 @@ pre code {
|
|||
}
|
||||
|
||||
.form-control-label {
|
||||
padding: .5625rem .75rem;
|
||||
padding: .5625rem 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -2025,38 +2022,14 @@ fieldset[disabled] .checkbox label {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
.has-feedback .form-control {
|
||||
padding-right: 3.28125rem;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 2.625rem;
|
||||
height: 2.625rem;
|
||||
line-height: 2.625rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-lg + .form-control-feedback,
|
||||
.input-group-lg + .form-control-feedback {
|
||||
width: 3.291667rem;
|
||||
height: 3.291667rem;
|
||||
line-height: 3.291667rem;
|
||||
}
|
||||
|
||||
.input-sm + .form-control-feedback,
|
||||
.input-group-sm + .form-control-feedback {
|
||||
width: 1.95rem;
|
||||
height: 1.95rem;
|
||||
line-height: 1.95rem;
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-error {
|
||||
padding-right: 3rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right .65625rem;
|
||||
-webkit-background-size: 1.70625rem 1.70625rem;
|
||||
background-size: 1.70625rem 1.70625rem;
|
||||
}
|
||||
|
||||
.has-success .help-block,
|
||||
|
|
@ -2069,24 +2042,25 @@ fieldset[disabled] .checkbox label {
|
|||
.has-success.checkbox label,
|
||||
.has-success.radio-inline label,
|
||||
.has-success.checkbox-inline label {
|
||||
color: #3c763d;
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .form-control {
|
||||
border-color: #3c763d;
|
||||
}
|
||||
.has-success .form-control:focus {
|
||||
border-color: #2b542c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .input-group-addon {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #3c763d;
|
||||
color: #5cb85c;
|
||||
background-color: #eaf6ea;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .form-control-feedback {
|
||||
color: #3c763d;
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.has-success .form-control-success {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.has-warning .help-block,
|
||||
|
|
@ -2099,24 +2073,25 @@ fieldset[disabled] .checkbox label {
|
|||
.has-warning.checkbox label,
|
||||
.has-warning.radio-inline label,
|
||||
.has-warning.checkbox-inline label {
|
||||
color: #8a6d3b;
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .form-control {
|
||||
border-color: #8a6d3b;
|
||||
}
|
||||
.has-warning .form-control:focus {
|
||||
border-color: #66512c;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .input-group-addon {
|
||||
color: #8a6d3b;
|
||||
background-color: #fcf8e3;
|
||||
border-color: #8a6d3b;
|
||||
color: #f0ad4e;
|
||||
background-color: white;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .form-control-feedback {
|
||||
color: #8a6d3b;
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.has-warning .form-control-warning {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.has-error .help-block,
|
||||
|
|
@ -2129,32 +2104,25 @@ fieldset[disabled] .checkbox label {
|
|||
.has-error.checkbox label,
|
||||
.has-error.radio-inline label,
|
||||
.has-error.checkbox-inline label {
|
||||
color: #a94442;
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.has-error .form-control {
|
||||
border-color: #a94442;
|
||||
}
|
||||
.has-error .form-control:focus {
|
||||
border-color: #843534;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.has-error .input-group-addon {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #a94442;
|
||||
color: #d9534f;
|
||||
background-color: #fdf7f7;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.has-error .form-control-feedback {
|
||||
color: #a94442;
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.has-feedback label ~ .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.has-feedback label.sr-only ~ .form-control-feedback {
|
||||
top: 0;
|
||||
.has-error .form-control-error {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
.help-block {
|
||||
|
|
@ -2217,7 +2185,7 @@ fieldset[disabled] .checkbox label {
|
|||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
|
|
@ -2999,7 +2967,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
|
|
@ -3917,7 +3885,7 @@ input[type="button"].btn-block {
|
|||
.pagination > li > span {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: .5rem .75rem;
|
||||
padding: .5rem 1rem;
|
||||
margin-left: -1px;
|
||||
line-height: 1.5;
|
||||
color: #0275d8;
|
||||
|
|
@ -4087,6 +4055,12 @@ a.label:hover {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.label-default {
|
||||
background-color: #818a91;
|
||||
}
|
||||
|
|
@ -4135,51 +4109,6 @@ a.label:hover {
|
|||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: relative;
|
||||
top: -.1em;
|
||||
display: inline-block;
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
font-size: .75em;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background-color: #818a91;
|
||||
border-radius: 2em;
|
||||
}
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
.badge.pull-left,
|
||||
.badge.pull-right {
|
||||
top: .2em;
|
||||
}
|
||||
.list-group-item.active > .badge,
|
||||
.nav-pills > .active > a > .badge {
|
||||
color: #0275d8;
|
||||
background-color: #fff;
|
||||
}
|
||||
.list-group-item > .badge {
|
||||
float: right;
|
||||
}
|
||||
.list-group-item > .badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav-pills > li > a > .badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
a.badge:focus,
|
||||
a.badge:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding: 2rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -4562,7 +4491,9 @@ a.badge:hover {
|
|||
|
||||
a.list-group-item,
|
||||
button.list-group-item {
|
||||
color: #555;
|
||||
width: 100%;
|
||||
color: #555;
|
||||
text-align: inherit;
|
||||
}
|
||||
a.list-group-item .list-group-item-heading,
|
||||
button.list-group-item .list-group-item-heading {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
150
scss/_forms.scss
150
scss/_forms.scss
|
|
@ -267,66 +267,124 @@ input[type="checkbox"] {
|
|||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
.has-feedback {
|
||||
// Enable absolute positioning
|
||||
position: relative;
|
||||
$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg==";
|
||||
$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg==";
|
||||
$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4=";
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: ($input-height * 1.25);
|
||||
}
|
||||
}
|
||||
// Feedback icon
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2; // Ensure icon is above input groups
|
||||
display: block;
|
||||
width: $input-height;
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-lg + .form-control-feedback,
|
||||
.input-group-lg + .form-control-feedback {
|
||||
width: $input-height-lg;
|
||||
height: $input-height-lg;
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
.input-sm + .form-control-feedback,
|
||||
.input-group-sm + .form-control-feedback {
|
||||
width: $input-height-sm;
|
||||
height: $input-height-sm;
|
||||
line-height: $input-height-sm;
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-error {
|
||||
padding-right: ($padding-x * 3);
|
||||
background-position: center right ($input-height * .25);
|
||||
background-size: ($input-height * .65) ($input-height * .65);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.has-success {
|
||||
@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
|
||||
@include form-control-validation(success, $brand-success);
|
||||
|
||||
.form-control-success {
|
||||
background-image: url($form-icon-success);
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
|
||||
@include form-control-validation(warning, $brand-warning);
|
||||
|
||||
.form-control-warning {
|
||||
background-image: url($form-icon-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
|
||||
}
|
||||
@include form-control-validation(error, $brand-danger);
|
||||
|
||||
// Reposition feedback icon if input has visible label above
|
||||
.has-feedback label {
|
||||
|
||||
~ .form-control-feedback {
|
||||
// TODO: redo this since we nuked the `$line-height-computed`
|
||||
top: 0; // Height of the `label` and its margin
|
||||
}
|
||||
|
||||
&.sr-only ~ .form-control-feedback {
|
||||
top: 0;
|
||||
.form-control-error {
|
||||
background-image: url($form-icon-error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// .form-control-success {
|
||||
// background-image: url("#{$form-icon-success}");
|
||||
// border-color: $brand-success;
|
||||
// }
|
||||
//
|
||||
// .form-control-warning {
|
||||
// background-image: url("#{$form-icon-warning}");
|
||||
// border-color: $brand-warning;
|
||||
// }
|
||||
//
|
||||
// .form-control-error {
|
||||
// background-image: url("#{$form-icon-danger}");
|
||||
// border-color: $brand-danger;
|
||||
// }
|
||||
|
||||
|
||||
// .has-feedback {
|
||||
// // Enable absolute positioning
|
||||
// position: relative;
|
||||
//
|
||||
// // Ensure icons don't overlap text
|
||||
// .form-control {
|
||||
// padding-right: ($input-height * 1.25);
|
||||
// }
|
||||
// }
|
||||
// // Feedback icon
|
||||
// .form-control-feedback {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// z-index: 2; // Ensure icon is above input groups
|
||||
// display: block;
|
||||
// width: $input-height;
|
||||
// height: $input-height;
|
||||
// line-height: $input-height;
|
||||
// text-align: center;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .input-lg + .form-control-feedback,
|
||||
// .input-group-lg + .form-control-feedback {
|
||||
// width: $input-height-lg;
|
||||
// height: $input-height-lg;
|
||||
// line-height: $input-height-lg;
|
||||
// }
|
||||
// .input-sm + .form-control-feedback,
|
||||
// .input-group-sm + .form-control-feedback {
|
||||
// width: $input-height-sm;
|
||||
// height: $input-height-sm;
|
||||
// line-height: $input-height-sm;
|
||||
// }
|
||||
//
|
||||
// // Form validation states
|
||||
// .has-success {
|
||||
// @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
|
||||
// }
|
||||
// .has-warning {
|
||||
// @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
|
||||
// }
|
||||
// .has-error {
|
||||
// @include 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 {
|
||||
// // TODO: redo this since we nuked the `$line-height-computed`
|
||||
// top: 0; // Height of the `label` and its margin
|
||||
// }
|
||||
//
|
||||
// &.sr-only ~ .form-control-feedback {
|
||||
// top: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Help text
|
||||
//
|
||||
// Apply to any element you wish to create light text for placement immediately
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ $enable-flex: false !default;
|
|||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-transitions: false !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
|
||||
// and successes.
|
||||
|
||||
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
|
||||
@mixin form-control-validation($state, $color) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.control-label,
|
||||
|
|
@ -15,28 +15,29 @@
|
|||
&.checkbox label,
|
||||
&.radio-inline label,
|
||||
&.checkbox-inline label {
|
||||
color: $text-color;
|
||||
color: $color;
|
||||
}
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: $border-color;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
border-color: $color;
|
||||
// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
|
||||
&:focus {
|
||||
border-color: darken($border-color, 10%);
|
||||
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
|
||||
@include box-shadow($shadow);
|
||||
// border-color: darken($border-color, 10%);
|
||||
// $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
|
||||
// @include box-shadow($shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: $text-color;
|
||||
border-color: $border-color;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background-color: lighten($color, 40%);
|
||||
}
|
||||
// Optional feedback icon
|
||||
.form-control-feedback {
|
||||
color: $text-color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue