Commit 18e08e77 authored by Mark Otto's avatar Mark Otto

add custom forms, stub out examples for radios and checkboxes

parent e1bb9070
...@@ -3015,6 +3015,383 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto ...@@ -3015,6 +3015,383 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
margin-left: -1px; margin-left: -1px;
} }
.c-input {
position: relative;
display: inline-block;
padding-left: 1.5rem;
font-weight: normal;
color: #555;
cursor: pointer;
}
.c-input > input {
position: absolute;
z-index: -1;
opacity: 0;
/* Put the input behind the label so it doesn't overlay text */
}
.c-indicator {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
font-size: 65%;
line-height: 1rem;
color: #eee;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #eee;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: 50% 50%;
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==);
}
/* Alternately, use another character */
.control-x input:checked ~ .control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==);
}
.control-dash input:checked ~ .control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
}
/*
* Select
*/
.select {
position: relative;
display: inline-block;
color: #555;
}
.select select {
display: inline-block;
width: 100%;
-webkit-appearance: none;
padding: .5rem 2.25rem .5rem 1rem;
margin: 0;
line-height: 1.5;
color: #555;
cursor: pointer;
background-color: #eee;
border: 0;
border-radius: .25rem;
outline: 0;
-moz-appearance: none;
appearance: none;
}
/* Undo the Firefox inner focus ring */
.select select:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* Dropdown arrow */
.select:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
content: "";
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.select select:hover {
background-color: #ddd;
}
*/
/* Focus */
.select select:focus {
-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;
}
/* Active/open */
.select select:active {
color: #fff;
background-color: #0074d9;
}
/* Hide the arrow in IE10 and up */
.select select::-ms-expand {
display: none;
}
/* Media query to target Firefox only */
@-moz-document url-prefix() {
/* Firefox hack to hide the arrow */
/* <option> elements inherit styles from <select>, so reset them. */
.select select {
padding-right: 1rem;
text-indent: .01px;
text-overflow: '';
}
.select option {
background-color: #fff;
}
}
/* IE9 hack to hide the arrow */
@media screen and (min-width: 0\0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: 1.5rem;
content: "";
background-color: #eee;
}
.select select:hover, .select select:focus, .select select:active {
color: #555;
background-color: #eee;
}
}
/*
* File
*/
.file {
position: relative;
display: inline-block;
height: 2.5rem;
cursor: pointer;
}
.file input {
min-width: 14rem;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
}
.file-custom {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
border: .075rem solid #ddd;
border-radius: .25rem;
-webkit-box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
}
.file-custom:after {
content: "Choose file...";
}
.file-custom:before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
content: "Browse";
background-color: #eee;
border: .075rem solid #ddd;
border-radius: 0 .25rem .25rem 0;
}
/* Focus */
.file input:focus ~ .file-custom {
-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;
}
/*
* 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
*/
.controls-stacked {
margin: 1rem 0;
}
.controls-stacked .control, .controls-stacked .progress {
display: block;
}
.controls-stacked .control + .control, .controls-stacked .progress + .progress {
margin-top: .5rem;
}
.controls-inline {
margin: 1rem 0;
}
.controls-inline .control {
display: inline-block;
height: 1rem;
}
.controls-inline .control + .control {
margin-left: 1rem;
}
.nav { .nav {
margin-bottom: 0; margin-bottom: 0;
} }
......
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -75,6 +75,7 @@ ...@@ -75,6 +75,7 @@
pages: pages:
- title: Jumbotron - title: Jumbotron
- title: Page header - title: Page header
- title: Custom forms
- title: Button group - title: Button group
- title: Button dropdown - title: Button dropdown
- title: Input group - title: Input group
......
...@@ -50,6 +50,15 @@ ...@@ -50,6 +50,15 @@
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script> <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
<script>
SimpleJekyllSearch.init({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
dataSource: '/search.json'
})
</script>
{% comment %} {% comment %}
Inject Twitter widgets asynchronously. Snippet snipped from Twitter's Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
JS interface site: https://dev.twitter.com/docs/tfw-javascript JS interface site: https://dev.twitter.com/docs/tfw-javascript
......
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
* Copyright 2011-2014 Twitter, Inc. * Copyright 2011-2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}body{position:relative}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;font-weight:500;line-height:8.8rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon.inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#cdbfe3}.bs-docs-nav .navbar-brand{color:#fff}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#fff;background-color:#563d7c}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#322f38}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#29262f;border-color:#29262f}.bs-docs-footer{margin-top:6rem;font-size:85%;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}.bs-docs .bs-docs-footer{text-align:left}}.bs-docs-social{margin-bottom:1.5rem;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}@media (min-width:768px){.bs-docs .bs-docs-social{margin-left:-.5rem;text-align:left}}.bs-docs-masthead{position:relative;padding:2rem 1rem;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF563D7C', endColorstr='#FF6F5499', GradientType=0)}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 2rem}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 2rem;font-size:1.25rem;color:#fff}.bs-docs-masthead .version{margin-top:-1rem;margin-bottom:2rem;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:5rem 0}.bs-docs-masthead h1{font-size:4rem}.bs-docs-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:2rem}}.bs-docs-header{padding-top:2rem;padding-bottom:2rem;margin-bottom:2rem;text-align:center;background-color:#563d7c}.bs-docs-header .container{position:relative}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;color:rgba(255,255,255,.65)}@media (min-width:768px){.bs-docs-header{text-align:left}.bs-docs-header h1{font-size:4rem;line-height:1}}@media (min-width:992px){.bs-docs-header{padding-top:4rem;padding-bottom:4rem}.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:1.25rem!important;margin:2rem -2rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bs-docs-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:2rem;right:4rem;width:330px!important;padding:1rem!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.bs-docs-featurette h3{margin-bottom:.5rem;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bs-docs-featurette-img:hover{color:#0275d8;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bs-docs-featurette{padding-top:6rem;padding-bottom:6rem}.bs-docs-featurette-title{font-size:2.5rem}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.bs-examples .img-thumbnail{margin-bottom:.75rem}.bs-examples h4{margin-bottom:.25rem}.bs-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bs-examples{margin-right:-.75rem;margin-left:-.75rem}.bs-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bs-docs-container{position:relative;max-width:62rem;padding:1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-docs-container{padding:2rem}}@media (min-width:992px){.bs-docs-container{padding:2rem 4rem}}.bs-docs-container>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bs-docs-container>table>thead>tr>th,.bs-docs-container>table>thead>tr>td,.bs-docs-container>table>tbody>tr>th,.bs-docs-container>table>tbody>tr>td,.bs-docs-container>table>tfoot>tr>th,.bs-docs-container>table>tfoot>tr>td{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bs-docs-sidebar{padding:0;margin-bottom:0;background-color:#322f38}.bs-docs-sidebar .navbar-toggle{position:absolute;top:5px;right:0;z-index:5}.bs-docs-sidebar .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-sidebar .navbar-header{float:none;margin-right:-15px}.bs-docs-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bs-docs{padding-left:240px}.bs-docs-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:240px;overflow-x:hidden;overflow-y:auto;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:linear-gradient(to bottom,#29262f 0,#322f38 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29262F', endColorstr='#FF322F38', GradientType=0)}}.bs-docs-sidebar .navbar-brand{display:block;float:none;height:auto;padding:2rem 1.25rem;font-size:20px;font-weight:500;line-height:1;color:#fff}.bs-docs-sidebar-brand:hover,.bs-docs-sidebar-brand:focus{color:#fff;text-decoration:none}.bs-docs-search{position:relative;margin-left:1.25rem;margin-right:1.25rem;margin-bottom:1.5rem}.bs-docs-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;color:rgba(255,255,255,.5);background-color:#423d4b;border-color:#4e4859}.bs-docs-search .form-control:focus{border-color:rgba(255,255,255,.25);-webkit-box-shadow:0 0 .5rem rgba(255,255,255,.25);box-shadow:0 0 .5rem rgba(255,255,255,.25)}.bs-docs-search-results{top:108%;right:0;display:block;padding:0;font-size:.9rem;overflow:hidden;border:0}.bs-docs-search-results>li>a{padding-left:.75rem;padding-right:.75rem}.bs-docs-search-results>li:first-child{padding-top:.25rem}.bs-docs-search-results>li:last-child{padding-bottom:.25rem}.bs-docs-sidenav{display:none}.bs-docs-toc-link{display:block;padding:4px 20px;font-size:16px;color:#fff}.bs-docs-toc-link:hover,.bs-docs-toc-link:focus{color:#ffe484;text-decoration:none}.active>.bs-docs-toc-link{font-weight:500;color:#ffe484}.active>.bs-docs-sidenav{display:block}.bs-docs-toc-item.active{margin-top:15px;margin-bottom:15px}.bs-docs-toc-item:first-child{margin-top:0}.bs-docs-toc-item:last-child{margin-bottom:30px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:14px;color:#99979c}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{color:#ffe484;text-decoration:none;background-color:transparent}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{font-weight:500;color:#ffe484;background-color:transparent}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{font-weight:500}.bs-docs-sidebar .nav>.active>.nav{display:block}.bs-docs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:13px}.bs-docs-content>h1{padding-top:2rem;margin-top:3rem}.bs-docs-content>h1:first-child{margin-top:0}.bs-docs-content>h1+p{font-size:1.25rem;font-weight:300}.bs-docs-content>h2{margin-top:3rem}.bs-docs-content>h3{margin-top:1.5rem}.bs-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:.25rem}.bs-callout+.bs-callout{margin-top:-.25rem}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem;border-radius:.25rem}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#cdbfe3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:2rem;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bs-team img{float:left;width:2rem;margin-right:.5rem;border-radius:.25rem}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.bs-example>.row{margin-bottom:1rem}.bs-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:1.5rem;margin-top:1rem;margin-bottom:-1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bs-example:before,.bs-example:after{content:" ";display:table}.bs-example:after{clear:both}@media (min-width:480px){.bs-example{border-width:.2rem}}.bs-example .container{width:auto}.bs-example>.card{float:left;max-width:15rem;margin:.25rem}.bs-example>.nav+.nav{margin-top:1rem}.bs-example>:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0!important}.bs-example>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:1rem 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:1rem}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:.25rem}.bs-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:.5rem}.bs-example-form .input-group{margin-bottom:.5rem}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:1rem}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bs-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.highlight{padding:1.5rem;margin-top:1rem;margin-bottom:1rem;background-color:#f7f7f9}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bs-brand-item{padding:4rem 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:9rem;height:9rem}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:4rem}}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem 0 .2rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.zero-clipboard{display:block}}#focusedInput{border-color:#66afe9;outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)} */.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}body{position:relative}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;font-weight:500;line-height:8.8rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon.inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#cdbfe3}.bs-docs-nav .navbar-brand{color:#fff}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#fff;background-color:#563d7c}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#322f38}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#29262f;border-color:#29262f}.bs-docs-footer{margin-top:6rem;font-size:85%;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}.bs-docs .bs-docs-footer{text-align:left}}.bs-docs-social{margin-bottom:1.5rem;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}@media (min-width:768px){.bs-docs .bs-docs-social{margin-left:-.5rem;text-align:left}}.bs-docs-masthead{position:relative;padding:2rem 1rem;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF563D7C', endColorstr='#FF6F5499', GradientType=0)}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 2rem}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 2rem;font-size:1.25rem;color:#fff}.bs-docs-masthead .version{margin-top:-1rem;margin-bottom:2rem;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:5rem 0}.bs-docs-masthead h1{font-size:4rem}.bs-docs-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:2rem}}.bs-docs-header{padding-top:2rem;padding-bottom:2rem;margin-bottom:2rem;text-align:center;background-color:#563d7c}.bs-docs-header .container{position:relative}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;color:rgba(255,255,255,.65)}@media (min-width:768px){.bs-docs-header{text-align:left}.bs-docs-header h1{font-size:4rem;line-height:1}}@media (min-width:992px){.bs-docs-header{padding-top:4rem;padding-bottom:4rem}.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:1.25rem!important;margin:2rem -2rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bs-docs-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:2rem;right:4rem;width:330px!important;padding:1rem!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.bs-docs-featurette h3{margin-bottom:.5rem;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bs-docs-featurette-img:hover{color:#0275d8;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bs-docs-featurette{padding-top:6rem;padding-bottom:6rem}.bs-docs-featurette-title{font-size:2.5rem}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.bs-examples .img-thumbnail{margin-bottom:.75rem}.bs-examples h4{margin-bottom:.25rem}.bs-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bs-examples{margin-right:-.75rem;margin-left:-.75rem}.bs-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bs-docs-container{position:relative;max-width:62rem;padding:1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-docs-container{padding:2rem}}@media (min-width:992px){.bs-docs-container{padding:2rem 4rem}}.bs-docs-container>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bs-docs-container>table>thead>tr>th,.bs-docs-container>table>thead>tr>td,.bs-docs-container>table>tbody>tr>th,.bs-docs-container>table>tbody>tr>td,.bs-docs-container>table>tfoot>tr>th,.bs-docs-container>table>tfoot>tr>td{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bs-docs-sidebar{padding:0;margin-bottom:0;background-color:#322f38}.bs-docs-sidebar .navbar-toggle{position:absolute;top:5px;right:0;z-index:5}.bs-docs-sidebar .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-sidebar .navbar-header{float:none;margin-right:-15px}.bs-docs-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bs-docs{padding-left:240px}.bs-docs-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:240px;overflow-x:hidden;overflow-y:auto;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:linear-gradient(to bottom,#29262f 0,#322f38 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29262F', endColorstr='#FF322F38', GradientType=0)}}.bs-docs-sidebar .navbar-brand{display:block;float:none;height:auto;padding:2rem 1.25rem;font-size:20px;font-weight:500;line-height:1;color:#fff}.bs-docs-sidebar-brand:hover,.bs-docs-sidebar-brand:focus{color:#fff;text-decoration:none}.bs-docs-search{position:relative;margin-left:1.25rem;margin-right:1.25rem;margin-bottom:1.5rem}.bs-docs-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;color:rgba(255,255,255,.5);background-color:#423d4b;border-color:#4e4859}.bs-docs-search .form-control:focus{border-color:rgba(255,255,255,.25);-webkit-box-shadow:0 0 .5rem rgba(255,255,255,.25);box-shadow:0 0 .5rem rgba(255,255,255,.25)}.bs-docs-search-results{top:108%;right:0;display:block;padding:0;font-size:.9rem;overflow:hidden;border:0}.bs-docs-search-results>li>a{padding-left:.75rem;padding-right:.75rem}.bs-docs-search-results>li:first-child{padding-top:.25rem}.bs-docs-search-results>li:last-child{padding-bottom:.25rem}.bs-docs-sidenav{display:none}.bs-docs-toc-link{display:block;padding:4px 20px;font-size:16px;color:#fff}.bs-docs-toc-link:hover,.bs-docs-toc-link:focus{color:#ffe484;text-decoration:none}.active>.bs-docs-toc-link{font-weight:500;color:#ffe484}.active>.bs-docs-sidenav{display:block}.bs-docs-toc-item.active{margin-top:15px;margin-bottom:15px}.bs-docs-toc-item:first-child{margin-top:0}.bs-docs-toc-item:last-child{margin-bottom:30px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:14px;color:#99979c}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{color:#ffe484;text-decoration:none;background-color:transparent}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{font-weight:500;color:#ffe484;background-color:transparent}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{font-weight:500}.bs-docs-sidebar .nav>.active>.nav{display:block}.bs-docs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:13px}.bs-docs-content>h1{padding-top:2rem;margin-top:3rem}.bs-docs-content>h1:first-child{margin-top:0}.bs-docs-content>h1+p{font-size:1.25rem;font-weight:300}.bs-docs-content>h2{margin-top:3rem;font-weight:400}.bs-docs-content>h3{margin-top:1.5rem}.bs-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:.25rem}.bs-callout+.bs-callout{margin-top:-.25rem}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem;border-radius:.25rem}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#cdbfe3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:2rem;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bs-team img{float:left;width:2rem;margin-right:.5rem;border-radius:.25rem}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.bs-example>.row{margin-bottom:1rem}.bs-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:1.5rem;margin-top:1rem;margin-bottom:-1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bs-example:before,.bs-example:after{content:" ";display:table}.bs-example:after{clear:both}@media (min-width:480px){.bs-example{border-width:.2rem}}.bs-example .container{width:auto}.bs-example>.card{float:left;max-width:15rem;margin:.25rem}.bs-example>.nav+.nav{margin-top:1rem}.bs-example>:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0!important}.bs-example>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:1rem 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:1rem}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:.25rem}.bs-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:.5rem}.bs-example-form .input-group{margin-bottom:.5rem}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:1rem}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bs-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.highlight{padding:1.5rem;margin-top:1rem;margin-bottom:1rem;background-color:#f7f7f9}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bs-brand-item{padding:4rem 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:9rem;height:9rem}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:4rem}}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem 0 .2rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.zero-clipboard{display:block}}#focusedInput{border-color:#66afe9;outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)}
\ No newline at end of file \ No newline at end of file
This diff was suppressed by a .gitattributes entry.
...@@ -147,13 +147,6 @@ ...@@ -147,13 +147,6 @@
.tooltip('show') .tooltip('show')
}) })
SimpleJekyllSearch.init({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
dataSource: '/search.json'
})
}) })
}(jQuery) }(jQuery)
---
layout: page
title: Custom forms
---
{% example html %}
<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Check this custom checkbox
</label>
{% endexample %}
{% example html %}
<label class="c-input c-radio">
<input id="radio1" name="radio" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>
<label class="c-input c-radio">
<input id="radio2" name="radio" type="radio">
<span class="c-indicator"></span>
Or toggle this other custom radio
</label>
{% endexample %}
...@@ -1953,15 +1953,19 @@ output { ...@@ -1953,15 +1953,19 @@ output {
} }
.form-control::-webkit-input-placeholder { .form-control::-webkit-input-placeholder {
color: #999; color: #999;
opacity: 1;
} }
.form-control::-moz-placeholder { .form-control::-moz-placeholder {
color: #999; color: #999;
opacity: 1;
} }
.form-control:-ms-input-placeholder { .form-control:-ms-input-placeholder {
color: #999; color: #999;
opacity: 1;
} }
.form-control::placeholder { .form-control::placeholder {
color: #999; color: #999;
opacity: 1;
} }
.form-control:disabled, .form-control[readonly], fieldset[disabled] .form-control { .form-control:disabled, .form-control[readonly], fieldset[disabled] .form-control {
cursor: not-allowed; cursor: not-allowed;
...@@ -3011,6 +3015,383 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto ...@@ -3011,6 +3015,383 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
margin-left: -1px; margin-left: -1px;
} }
.c-input {
position: relative;
display: inline-block;
padding-left: 1.5rem;
font-weight: normal;
color: #555;
cursor: pointer;
}
.c-input > input {
position: absolute;
z-index: -1;
opacity: 0;
/* Put the input behind the label so it doesn't overlay text */
}
.c-indicator {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
font-size: 65%;
line-height: 1rem;
color: #eee;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #eee;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: 50% 50%;
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==);
}
/* Alternately, use another character */
.control-x input:checked ~ .control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==);
}
.control-dash input:checked ~ .control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
}
/*
* Select
*/
.select {
position: relative;
display: inline-block;
color: #555;
}
.select select {
display: inline-block;
width: 100%;
-webkit-appearance: none;
padding: .5rem 2.25rem .5rem 1rem;
margin: 0;
line-height: 1.5;
color: #555;
cursor: pointer;
background-color: #eee;
border: 0;
border-radius: .25rem;
outline: 0;
-moz-appearance: none;
appearance: none;
}
/* Undo the Firefox inner focus ring */
.select select:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* Dropdown arrow */
.select:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
content: "";
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.select select:hover {
background-color: #ddd;
}
*/
/* Focus */
.select select:focus {
-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;
}
/* Active/open */
.select select:active {
color: #fff;
background-color: #0074d9;
}
/* Hide the arrow in IE10 and up */
.select select::-ms-expand {
display: none;
}
/* Media query to target Firefox only */
@-moz-document url-prefix() {
/* Firefox hack to hide the arrow */
/* <option> elements inherit styles from <select>, so reset them. */
.select select {
padding-right: 1rem;
text-indent: .01px;
text-overflow: '';
}
.select option {
background-color: #fff;
}
}
/* IE9 hack to hide the arrow */
@media screen and (min-width: 0\0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: 1.5rem;
content: "";
background-color: #eee;
}
.select select:hover, .select select:focus, .select select:active {
color: #555;
background-color: #eee;
}
}
/*
* File
*/
.file {
position: relative;
display: inline-block;
height: 2.5rem;
cursor: pointer;
}
.file input {
min-width: 14rem;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
}
.file-custom {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
border: .075rem solid #ddd;
border-radius: .25rem;
-webkit-box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
box-shadow: inset 0 .2rem .4rem rgba(0, 0, 0, .05);
}
.file-custom:after {
content: "Choose file...";
}
.file-custom:before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
content: "Browse";
background-color: #eee;
border: .075rem solid #ddd;
border-radius: 0 .25rem .25rem 0;
}
/* Focus */
.file input:focus ~ .file-custom {
-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;
}
/*
* 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
*/
.controls-stacked {
margin: 1rem 0;
}
.controls-stacked .control, .controls-stacked .progress {
display: block;
}
.controls-stacked .control + .control, .controls-stacked .progress + .progress {
margin-top: .5rem;
}
.controls-inline {
margin: 1rem 0;
}
.controls-inline .control {
display: inline-block;
height: 1rem;
}
.controls-inline .control + .control {
margin-left: 1rem;
}
.nav { .nav {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -4932,10 +5313,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4932,10 +5313,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
z-index: 1030; z-index: 1030;
} }
.show {
display: block !important;
}
[hidden] { [hidden] {
display: none !important; display: none !important;
} }
...@@ -4952,11 +5329,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4952,11 +5329,6 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
border: 0; border: 0;
} }
.hidden {
display: none !important;
visibility: hidden !important;
}
.affix { .affix {
position: fixed; position: fixed;
} }
......
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// http://useiconic.com/open
// Checkboxes and radios
.c-input {
position: relative;
display: inline-block;
padding-left: 1.5rem;
color: #555;
font-weight: normal;
cursor: pointer;
> input {
position: absolute;
opacity: 0;
z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}
}
.c-indicator {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-size: 65%;
color: #eee;
text-align: center;
background-color: #eee;
background-size: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
user-select: none;
}
/* 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 {
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==);
}
/* Alternately, use another character */
.control-x input:checked ~ .control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==);
}
.control-dash input:checked ~ .control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K)
}
/*
* Select
*/
.select {
position: relative;
display: inline-block;
color: #555;
}
.select select {
display: inline-block;
width: 100%;
margin: 0;
padding: .5rem 2.25rem .5rem 1rem;
line-height: 1.5;
color: #555;
background-color: #eee;
border: 0;
border-radius: .25rem;
cursor: pointer;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Undo the Firefox inner focus ring */
.select select:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* Dropdown arrow */
.select:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
content: "";
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.select select:hover {
background-color: #ddd;
}
*/
/* Focus */
.select select:focus {
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}
/* Active/open */
.select select:active {
color: #fff;
background-color: #0074d9;
}
/* Hide the arrow in IE10 and up */
.select select::-ms-expand {
display: none;
}
/* Media query to target Firefox only */
@-moz-document url-prefix() {
/* Firefox hack to hide the arrow */
.select select {
text-indent: 0.01px;
text-overflow: '';
padding-right: 1rem;
}
/* <option> elements inherit styles from <select>, so reset them. */
.select option {
background-color: #fff;
}
}
/* IE9 hack to hide the arrow */
@media screen and (min-width:0\0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
content: "";
display: block;
width: 1.5rem;
background-color: #eee;
}
.select select:hover,
.select select:focus,
.select select:active {
color: #555;
background-color: #eee;
}
}
/*
* File
*/
.file {
position: relative;
display: inline-block;
cursor: pointer;
height: 2.5rem;
}
.file input {
min-width: 14rem;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
}
.file-custom {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
background-color: #fff;
border: .075rem solid #ddd;
border-radius: .25rem;
box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.file-custom:after {
content: "Choose file...";
}
.file-custom:before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
content: "Browse";
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
background-color: #eee;
border: .075rem solid #ddd;
border-radius: 0 .25rem .25rem 0;
}
/* Focus */
.file input:focus ~ .file-custom {
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}
/*
* Control layouts
*/
.controls-stacked {
margin: 1rem 0;
}
.controls-stacked .control,
.controls-stacked .progress {
display: block;
}
.controls-stacked .control + .control,
.controls-stacked .progress + .progress {
margin-top: .5rem;
}
.controls-inline {
margin: 1rem 0;
}
.controls-inline .control {
display: inline-block;
height: 1rem;
}
.controls-inline .control + .control {
margin-left: 1rem;
}
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
@import "dropdown"; @import "dropdown";
@import "button-group"; @import "button-group";
@import "input-group"; @import "input-group";
@import "custom-forms";
@import "nav"; @import "nav";
@import "navbar"; @import "navbar";
@import "card"; @import "card";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment