mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
custom forms: checkbox and radio stacked option
This commit is contained in:
Mark Otto
parent
e500a9a354
commit
cd60cf3386
138
dist/css/bootstrap.css
vendored
138
dist/css/bootstrap.css
vendored
@ -3017,7 +3017,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
|
||||
.c-input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
padding-left: 1.5rem;
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
@ -3029,10 +3029,25 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
opacity: 0;
|
||||
/* Put the input behind the label so it doesn't overlay text */
|
||||
}
|
||||
.c-input > input:focus ~ .c-indicator {
|
||||
-webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
.c-input > input:checked ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
}
|
||||
.c-input > input:active ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #84c6ff;
|
||||
}
|
||||
.c-input + .c-input {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.c-indicator {
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
@ -3052,45 +3067,16 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
background-size: 50% 50%;
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
/* Uncomment if you need it, but be aware of the sticky iOS states.
|
||||
.control:hover .control-indicator {
|
||||
color: #fff;
|
||||
background-color: #ccc;
|
||||
}
|
||||
*/
|
||||
/* Focus */
|
||||
.c-input input:focus ~ .c-indicator {
|
||||
-webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
|
||||
/* Checked state */
|
||||
.c-input input:checked ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.c-input input:active ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #84c6ff;
|
||||
}
|
||||
|
||||
/* Checkbox modifiers */
|
||||
.c-checkbox .c-indicator {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.c-checkbox input:checked ~ .c-indicator {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
|
||||
}
|
||||
|
||||
/* Radio modifiers */
|
||||
.c-radio .c-indicator {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c-radio input:checked ~ .c-indicator {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
|
||||
}
|
||||
@ -3104,6 +3090,18 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
|
||||
}
|
||||
|
||||
.c-inputs-stacked .c-input {
|
||||
display: inline;
|
||||
}
|
||||
.c-inputs-stacked .c-input:after {
|
||||
display: block;
|
||||
margin-bottom: .25rem;
|
||||
content: "";
|
||||
}
|
||||
.c-inputs-stacked .c-input + .c-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Select
|
||||
*/
|
||||
@ -3286,84 +3284,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
|
||||
/*
|
||||
* Progress
|
||||
*/
|
||||
.progress {
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.progress[value] {
|
||||
/* Reset the default appearance */
|
||||
-webkit-appearance: none;
|
||||
/* IE10 uses `color` to set the bar background-color */
|
||||
color: #0074d9;
|
||||
/* Remove Firefox and Opera border */
|
||||
border: 0;
|
||||
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
|
||||
/* Firefox styles must be entirely separate or it busts Webkit styles. */
|
||||
@-moz-document url-prefix() {
|
||||
.progress[value] {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. */
|
||||
@media screen and (min-width: 0\0) {
|
||||
.progress {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
text-indent: -999rem;
|
||||
/* Simulate hiding of value as in native `<progress>` */
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[width="100%"] {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Control layouts
|
||||
*/
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -3,6 +3,12 @@ layout: page
|
||||
title: Custom forms
|
||||
---
|
||||
|
||||
In the interest of customization and cross browser consistency, Bootstrap include a handful of customized form elements. They're solid replacements for default form controls as they're built on top of semantic and accessible markup.
|
||||
|
||||
## Checkboxes and radios
|
||||
|
||||
### Checkboxes
|
||||
|
||||
{% example html %}
|
||||
<label class="c-input c-checkbox">
|
||||
<input type="checkbox">
|
||||
@ -11,6 +17,8 @@ title: Custom forms
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
### Radios
|
||||
|
||||
{% example html %}
|
||||
<label class="c-input c-radio">
|
||||
<input id="radio1" name="radio" type="radio">
|
||||
@ -23,3 +31,22 @@ title: Custom forms
|
||||
Or toggle this other custom radio
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
### Stacked
|
||||
|
||||
Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
|
||||
|
||||
{% example html %}
|
||||
<div class="c-inputs-stacked">
|
||||
<label class="c-input c-radio">
|
||||
<input id="radioStacked1" name="radio-stacked" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Toggle this custom radio
|
||||
</label>
|
||||
<label class="c-input c-radio">
|
||||
<input id="radioStacked2" name="radio-stacked" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Or toggle this other custom radio
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
138
docs/dist/css/bootstrap.css
vendored
138
docs/dist/css/bootstrap.css
vendored
@ -3017,7 +3017,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
|
||||
.c-input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
padding-left: 1.5rem;
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
@ -3029,10 +3029,25 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
opacity: 0;
|
||||
/* Put the input behind the label so it doesn't overlay text */
|
||||
}
|
||||
.c-input > input:focus ~ .c-indicator {
|
||||
-webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
.c-input > input:checked ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
}
|
||||
.c-input > input:active ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #84c6ff;
|
||||
}
|
||||
.c-input + .c-input {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.c-indicator {
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
@ -3052,45 +3067,16 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
background-size: 50% 50%;
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
/* Uncomment if you need it, but be aware of the sticky iOS states.
|
||||
.control:hover .control-indicator {
|
||||
color: #fff;
|
||||
background-color: #ccc;
|
||||
}
|
||||
*/
|
||||
/* Focus */
|
||||
.c-input input:focus ~ .c-indicator {
|
||||
-webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
|
||||
/* Checked state */
|
||||
.c-input input:checked ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.c-input input:active ~ .c-indicator {
|
||||
color: #fff;
|
||||
background-color: #84c6ff;
|
||||
}
|
||||
|
||||
/* Checkbox modifiers */
|
||||
.c-checkbox .c-indicator {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.c-checkbox input:checked ~ .c-indicator {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
|
||||
}
|
||||
|
||||
/* Radio modifiers */
|
||||
.c-radio .c-indicator {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c-radio input:checked ~ .c-indicator {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
|
||||
}
|
||||
@ -3104,6 +3090,18 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
|
||||
}
|
||||
|
||||
.c-inputs-stacked .c-input {
|
||||
display: inline;
|
||||
}
|
||||
.c-inputs-stacked .c-input:after {
|
||||
display: block;
|
||||
margin-bottom: .25rem;
|
||||
content: "";
|
||||
}
|
||||
.c-inputs-stacked .c-input + .c-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Select
|
||||
*/
|
||||
@ -3286,84 +3284,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
|
||||
/*
|
||||
* Progress
|
||||
*/
|
||||
.progress {
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.progress[value] {
|
||||
/* Reset the default appearance */
|
||||
-webkit-appearance: none;
|
||||
/* IE10 uses `color` to set the bar background-color */
|
||||
color: #0074d9;
|
||||
/* Remove Firefox and Opera border */
|
||||
border: 0;
|
||||
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value="100"]::-webkit-progress-value {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
|
||||
/* Firefox styles must be entirely separate or it busts Webkit styles. */
|
||||
@-moz-document url-prefix() {
|
||||
.progress[value] {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[value="100"]::-moz-progress-bar {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. */
|
||||
@media screen and (min-width: 0\0) {
|
||||
.progress {
|
||||
background-color: #eee;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
text-indent: -999rem;
|
||||
/* Simulate hiding of value as in native `<progress>` */
|
||||
background-color: #0074d9;
|
||||
border-top-left-radius: .2rem;
|
||||
border-bottom-left-radius: .2rem;
|
||||
}
|
||||
|
||||
.progress[width="100%"] {
|
||||
border-top-right-radius: .2rem;
|
||||
border-bottom-right-radius: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Control layouts
|
||||
*/
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@
|
||||
|
||||
.c-input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
padding-left: 1.5rem;
|
||||
color: #555;
|
||||
font-weight: normal;
|
||||
@ -33,6 +33,10 @@
|
||||
background-color: #84c6ff;
|
||||
}
|
||||
}
|
||||
|
||||
+ .c-input {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom indicator
|
||||
@ -41,7 +45,7 @@
|
||||
|
||||
.c-indicator {
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
@ -93,6 +97,27 @@
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K)
|
||||
}
|
||||
|
||||
// Layout options
|
||||
//
|
||||
// By default radios and checkboxes are `inline-block` with no additional spacing
|
||||
// set. Use these optional classes to tweak the layout.
|
||||
|
||||
.c-inputs-stacked {
|
||||
.c-input {
|
||||
display: inline;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
+ .c-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user