Dynamic Form
Created
October 5, 2016 06:21
-
-
Save ysyun/54c012abd7265ba226cde50f020c2e4a to your computer and use it in GitHub Desktop.
Angular2 Dynamic Form Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
*:before, | |
*:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html { | |
font-size: 10px; | |
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
} | |
body { | |
font-family: "Roboto", Helvetica, Sans-Serif; | |
font-size: 14px; | |
line-height: 1.42857143; | |
color: #212121; | |
background-color: #fff; | |
} | |
input, | |
button, | |
select, | |
textarea { | |
font-family: inherit; | |
font-size: inherit; | |
line-height: inherit; | |
} | |
a { | |
color: #337ab7; | |
text-decoration: none; | |
} | |
a:hover, | |
a:focus { | |
color: #23527c; | |
text-decoration: underline; | |
} | |
a:focus { | |
outline: thin dotted; | |
outline: 5px auto -webkit-focus-ring-color; | |
outline-offset: -2px; | |
} | |
figure { | |
margin: 0; | |
} | |
img { | |
vertical-align: middle; | |
} | |
.img-responsive { | |
display: block; | |
max-width: 100%; | |
height: auto; | |
} | |
.img-rounded { | |
border-radius: 6px; | |
} | |
.img-thumbnail { | |
padding: 4px; | |
line-height: 1.42857143; | |
background-color: #fff; | |
border: 1px solid #ddd; | |
border-radius: 4px; | |
-webkit-transition: all 0.2s ease-in-out; | |
-o-transition: all 0.2s ease-in-out; | |
transition: all 0.2s ease-in-out; | |
display: inline-block; | |
max-width: 100%; | |
height: auto; | |
} | |
.img-circle { | |
border-radius: 50%; | |
} | |
hr { | |
margin-top: 20px; | |
margin-bottom: 20px; | |
border: 0; | |
border-top: 1px solid #EEEEEE; | |
} | |
.sr-only { | |
position: absolute; | |
width: 1px; | |
height: 1px; | |
margin: -1px; | |
padding: 0; | |
overflow: hidden; | |
clip: rect(0, 0, 0, 0); | |
border: 0; | |
} | |
.sr-only-focusable:active, | |
.sr-only-focusable:focus { | |
position: static; | |
width: auto; | |
height: auto; | |
margin: 0; | |
overflow: visible; | |
clip: auto; | |
} | |
[role="button"] { | |
cursor: pointer; | |
} | |
.container { | |
margin-right: auto; | |
margin-left: auto; | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
@media (min-width: 768px) { | |
.container { | |
width: 750px; | |
} | |
} | |
@media (min-width: 992px) { | |
.container { | |
width: 970px; | |
} | |
} | |
@media (min-width: 1200px) { | |
.container { | |
width: 1170px; | |
} | |
} | |
.container-fluid { | |
margin-right: auto; | |
margin-left: auto; | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
.row { | |
margin-left: -15px; | |
margin-right: -15px; | |
} | |
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { | |
position: relative; | |
min-height: 1px; | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { | |
float: left; | |
} | |
.col-xs-12 { | |
width: 100%; | |
} | |
.col-xs-11 { | |
width: 91.66666667%; | |
} | |
.col-xs-10 { | |
width: 83.33333333%; | |
} | |
.col-xs-9 { | |
width: 75%; | |
} | |
.col-xs-8 { | |
width: 66.66666667%; | |
} | |
.col-xs-7 { | |
width: 58.33333333%; | |
} | |
.col-xs-6 { | |
width: 50%; | |
} | |
.col-xs-5 { | |
width: 41.66666667%; | |
} | |
.col-xs-4 { | |
width: 33.33333333%; | |
} | |
.col-xs-3 { | |
width: 25%; | |
} | |
.col-xs-2 { | |
width: 16.66666667%; | |
} | |
.col-xs-1 { | |
width: 8.33333333%; | |
} | |
.col-xs-pull-12 { | |
right: 100%; | |
} | |
.col-xs-pull-11 { | |
right: 91.66666667%; | |
} | |
.col-xs-pull-10 { | |
right: 83.33333333%; | |
} | |
.col-xs-pull-9 { | |
right: 75%; | |
} | |
.col-xs-pull-8 { | |
right: 66.66666667%; | |
} | |
.col-xs-pull-7 { | |
right: 58.33333333%; | |
} | |
.col-xs-pull-6 { | |
right: 50%; | |
} | |
.col-xs-pull-5 { | |
right: 41.66666667%; | |
} | |
.col-xs-pull-4 { | |
right: 33.33333333%; | |
} | |
.col-xs-pull-3 { | |
right: 25%; | |
} | |
.col-xs-pull-2 { | |
right: 16.66666667%; | |
} | |
.col-xs-pull-1 { | |
right: 8.33333333%; | |
} | |
.col-xs-pull-0 { | |
right: auto; | |
} | |
.col-xs-push-12 { | |
left: 100%; | |
} | |
.col-xs-push-11 { | |
left: 91.66666667%; | |
} | |
.col-xs-push-10 { | |
left: 83.33333333%; | |
} | |
.col-xs-push-9 { | |
left: 75%; | |
} | |
.col-xs-push-8 { | |
left: 66.66666667%; | |
} | |
.col-xs-push-7 { | |
left: 58.33333333%; | |
} | |
.col-xs-push-6 { | |
left: 50%; | |
} | |
.col-xs-push-5 { | |
left: 41.66666667%; | |
} | |
.col-xs-push-4 { | |
left: 33.33333333%; | |
} | |
.col-xs-push-3 { | |
left: 25%; | |
} | |
.col-xs-push-2 { | |
left: 16.66666667%; | |
} | |
.col-xs-push-1 { | |
left: 8.33333333%; | |
} | |
.col-xs-push-0 { | |
left: auto; | |
} | |
.col-xs-offset-12 { | |
margin-left: 100%; | |
} | |
.col-xs-offset-11 { | |
margin-left: 91.66666667%; | |
} | |
.col-xs-offset-10 { | |
margin-left: 83.33333333%; | |
} | |
.col-xs-offset-9 { | |
margin-left: 75%; | |
} | |
.col-xs-offset-8 { | |
margin-left: 66.66666667%; | |
} | |
.col-xs-offset-7 { | |
margin-left: 58.33333333%; | |
} | |
.col-xs-offset-6 { | |
margin-left: 50%; | |
} | |
.col-xs-offset-5 { | |
margin-left: 41.66666667%; | |
} | |
.col-xs-offset-4 { | |
margin-left: 33.33333333%; | |
} | |
.col-xs-offset-3 { | |
margin-left: 25%; | |
} | |
.col-xs-offset-2 { | |
margin-left: 16.66666667%; | |
} | |
.col-xs-offset-1 { | |
margin-left: 8.33333333%; | |
} | |
.col-xs-offset-0 { | |
margin-left: 0%; | |
} | |
@media (min-width: 768px) { | |
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { | |
float: left; | |
} | |
.col-sm-12 { | |
width: 100%; | |
} | |
.col-sm-11 { | |
width: 91.66666667%; | |
} | |
.col-sm-10 { | |
width: 83.33333333%; | |
} | |
.col-sm-9 { | |
width: 75%; | |
} | |
.col-sm-8 { | |
width: 66.66666667%; | |
} | |
.col-sm-7 { | |
width: 58.33333333%; | |
} | |
.col-sm-6 { | |
width: 50%; | |
} | |
.col-sm-5 { | |
width: 41.66666667%; | |
} | |
.col-sm-4 { | |
width: 33.33333333%; | |
} | |
.col-sm-3 { | |
width: 25%; | |
} | |
.col-sm-2 { | |
width: 16.66666667%; | |
} | |
.col-sm-1 { | |
width: 8.33333333%; | |
} | |
.col-sm-pull-12 { | |
right: 100%; | |
} | |
.col-sm-pull-11 { | |
right: 91.66666667%; | |
} | |
.col-sm-pull-10 { | |
right: 83.33333333%; | |
} | |
.col-sm-pull-9 { | |
right: 75%; | |
} | |
.col-sm-pull-8 { | |
right: 66.66666667%; | |
} | |
.col-sm-pull-7 { | |
right: 58.33333333%; | |
} | |
.col-sm-pull-6 { | |
right: 50%; | |
} | |
.col-sm-pull-5 { | |
right: 41.66666667%; | |
} | |
.col-sm-pull-4 { | |
right: 33.33333333%; | |
} | |
.col-sm-pull-3 { | |
right: 25%; | |
} | |
.col-sm-pull-2 { | |
right: 16.66666667%; | |
} | |
.col-sm-pull-1 { | |
right: 8.33333333%; | |
} | |
.col-sm-pull-0 { | |
right: auto; | |
} | |
.col-sm-push-12 { | |
left: 100%; | |
} | |
.col-sm-push-11 { | |
left: 91.66666667%; | |
} | |
.col-sm-push-10 { | |
left: 83.33333333%; | |
} | |
.col-sm-push-9 { | |
left: 75%; | |
} | |
.col-sm-push-8 { | |
left: 66.66666667%; | |
} | |
.col-sm-push-7 { | |
left: 58.33333333%; | |
} | |
.col-sm-push-6 { | |
left: 50%; | |
} | |
.col-sm-push-5 { | |
left: 41.66666667%; | |
} | |
.col-sm-push-4 { | |
left: 33.33333333%; | |
} | |
.col-sm-push-3 { | |
left: 25%; | |
} | |
.col-sm-push-2 { | |
left: 16.66666667%; | |
} | |
.col-sm-push-1 { | |
left: 8.33333333%; | |
} | |
.col-sm-push-0 { | |
left: auto; | |
} | |
.col-sm-offset-12 { | |
margin-left: 100%; | |
} | |
.col-sm-offset-11 { | |
margin-left: 91.66666667%; | |
} | |
.col-sm-offset-10 { | |
margin-left: 83.33333333%; | |
} | |
.col-sm-offset-9 { | |
margin-left: 75%; | |
} | |
.col-sm-offset-8 { | |
margin-left: 66.66666667%; | |
} | |
.col-sm-offset-7 { | |
margin-left: 58.33333333%; | |
} | |
.col-sm-offset-6 { | |
margin-left: 50%; | |
} | |
.col-sm-offset-5 { | |
margin-left: 41.66666667%; | |
} | |
.col-sm-offset-4 { | |
margin-left: 33.33333333%; | |
} | |
.col-sm-offset-3 { | |
margin-left: 25%; | |
} | |
.col-sm-offset-2 { | |
margin-left: 16.66666667%; | |
} | |
.col-sm-offset-1 { | |
margin-left: 8.33333333%; | |
} | |
.col-sm-offset-0 { | |
margin-left: 0%; | |
} | |
} | |
@media (min-width: 992px) { | |
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { | |
float: left; | |
} | |
.col-md-12 { | |
width: 100%; | |
} | |
.col-md-11 { | |
width: 91.66666667%; | |
} | |
.col-md-10 { | |
width: 83.33333333%; | |
} | |
.col-md-9 { | |
width: 75%; | |
} | |
.col-md-8 { | |
width: 66.66666667%; | |
} | |
.col-md-7 { | |
width: 58.33333333%; | |
} | |
.col-md-6 { | |
width: 50%; | |
} | |
.col-md-5 { | |
width: 41.66666667%; | |
} | |
.col-md-4 { | |
width: 33.33333333%; | |
} | |
.col-md-3 { | |
width: 25%; | |
} | |
.col-md-2 { | |
width: 16.66666667%; | |
} | |
.col-md-1 { | |
width: 8.33333333%; | |
} | |
.col-md-pull-12 { | |
right: 100%; | |
} | |
.col-md-pull-11 { | |
right: 91.66666667%; | |
} | |
.col-md-pull-10 { | |
right: 83.33333333%; | |
} | |
.col-md-pull-9 { | |
right: 75%; | |
} | |
.col-md-pull-8 { | |
right: 66.66666667%; | |
} | |
.col-md-pull-7 { | |
right: 58.33333333%; | |
} | |
.col-md-pull-6 { | |
right: 50%; | |
} | |
.col-md-pull-5 { | |
right: 41.66666667%; | |
} | |
.col-md-pull-4 { | |
right: 33.33333333%; | |
} | |
.col-md-pull-3 { | |
right: 25%; | |
} | |
.col-md-pull-2 { | |
right: 16.66666667%; | |
} | |
.col-md-pull-1 { | |
right: 8.33333333%; | |
} | |
.col-md-pull-0 { | |
right: auto; | |
} | |
.col-md-push-12 { | |
left: 100%; | |
} | |
.col-md-push-11 { | |
left: 91.66666667%; | |
} | |
.col-md-push-10 { | |
left: 83.33333333%; | |
} | |
.col-md-push-9 { | |
left: 75%; | |
} | |
.col-md-push-8 { | |
left: 66.66666667%; | |
} | |
.col-md-push-7 { | |
left: 58.33333333%; | |
} | |
.col-md-push-6 { | |
left: 50%; | |
} | |
.col-md-push-5 { | |
left: 41.66666667%; | |
} | |
.col-md-push-4 { | |
left: 33.33333333%; | |
} | |
.col-md-push-3 { | |
left: 25%; | |
} | |
.col-md-push-2 { | |
left: 16.66666667%; | |
} | |
.col-md-push-1 { | |
left: 8.33333333%; | |
} | |
.col-md-push-0 { | |
left: auto; | |
} | |
.col-md-offset-12 { | |
margin-left: 100%; | |
} | |
.col-md-offset-11 { | |
margin-left: 91.66666667%; | |
} | |
.col-md-offset-10 { | |
margin-left: 83.33333333%; | |
} | |
.col-md-offset-9 { | |
margin-left: 75%; | |
} | |
.col-md-offset-8 { | |
margin-left: 66.66666667%; | |
} | |
.col-md-offset-7 { | |
margin-left: 58.33333333%; | |
} | |
.col-md-offset-6 { | |
margin-left: 50%; | |
} | |
.col-md-offset-5 { | |
margin-left: 41.66666667%; | |
} | |
.col-md-offset-4 { | |
margin-left: 33.33333333%; | |
} | |
.col-md-offset-3 { | |
margin-left: 25%; | |
} | |
.col-md-offset-2 { | |
margin-left: 16.66666667%; | |
} | |
.col-md-offset-1 { | |
margin-left: 8.33333333%; | |
} | |
.col-md-offset-0 { | |
margin-left: 0%; | |
} | |
} | |
@media (min-width: 1200px) { | |
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { | |
float: left; | |
} | |
.col-lg-12 { | |
width: 100%; | |
} | |
.col-lg-11 { | |
width: 91.66666667%; | |
} | |
.col-lg-10 { | |
width: 83.33333333%; | |
} | |
.col-lg-9 { | |
width: 75%; | |
} | |
.col-lg-8 { | |
width: 66.66666667%; | |
} | |
.col-lg-7 { | |
width: 58.33333333%; | |
} | |
.col-lg-6 { | |
width: 50%; | |
} | |
.col-lg-5 { | |
width: 41.66666667%; | |
} | |
.col-lg-4 { | |
width: 33.33333333%; | |
} | |
.col-lg-3 { | |
width: 25%; | |
} | |
.col-lg-2 { | |
width: 16.66666667%; | |
} | |
.col-lg-1 { | |
width: 8.33333333%; | |
} | |
.col-lg-pull-12 { | |
right: 100%; | |
} | |
.col-lg-pull-11 { | |
right: 91.66666667%; | |
} | |
.col-lg-pull-10 { | |
right: 83.33333333%; | |
} | |
.col-lg-pull-9 { | |
right: 75%; | |
} | |
.col-lg-pull-8 { | |
right: 66.66666667%; | |
} | |
.col-lg-pull-7 { | |
right: 58.33333333%; | |
} | |
.col-lg-pull-6 { | |
right: 50%; | |
} | |
.col-lg-pull-5 { | |
right: 41.66666667%; | |
} | |
.col-lg-pull-4 { | |
right: 33.33333333%; | |
} | |
.col-lg-pull-3 { | |
right: 25%; | |
} | |
.col-lg-pull-2 { | |
right: 16.66666667%; | |
} | |
.col-lg-pull-1 { | |
right: 8.33333333%; | |
} | |
.col-lg-pull-0 { | |
right: auto; | |
} | |
.col-lg-push-12 { | |
left: 100%; | |
} | |
.col-lg-push-11 { | |
left: 91.66666667%; | |
} | |
.col-lg-push-10 { | |
left: 83.33333333%; | |
} | |
.col-lg-push-9 { | |
left: 75%; | |
} | |
.col-lg-push-8 { | |
left: 66.66666667%; | |
} | |
.col-lg-push-7 { | |
left: 58.33333333%; | |
} | |
.col-lg-push-6 { | |
left: 50%; | |
} | |
.col-lg-push-5 { | |
left: 41.66666667%; | |
} | |
.col-lg-push-4 { | |
left: 33.33333333%; | |
} | |
.col-lg-push-3 { | |
left: 25%; | |
} | |
.col-lg-push-2 { | |
left: 16.66666667%; | |
} | |
.col-lg-push-1 { | |
left: 8.33333333%; | |
} | |
.col-lg-push-0 { | |
left: auto; | |
} | |
.col-lg-offset-12 { | |
margin-left: 100%; | |
} | |
.col-lg-offset-11 { | |
margin-left: 91.66666667%; | |
} | |
.col-lg-offset-10 { | |
margin-left: 83.33333333%; | |
} | |
.col-lg-offset-9 { | |
margin-left: 75%; | |
} | |
.col-lg-offset-8 { | |
margin-left: 66.66666667%; | |
} | |
.col-lg-offset-7 { | |
margin-left: 58.33333333%; | |
} | |
.col-lg-offset-6 { | |
margin-left: 50%; | |
} | |
.col-lg-offset-5 { | |
margin-left: 41.66666667%; | |
} | |
.col-lg-offset-4 { | |
margin-left: 33.33333333%; | |
} | |
.col-lg-offset-3 { | |
margin-left: 25%; | |
} | |
.col-lg-offset-2 { | |
margin-left: 16.66666667%; | |
} | |
.col-lg-offset-1 { | |
margin-left: 8.33333333%; | |
} | |
.col-lg-offset-0 { | |
margin-left: 0%; | |
} | |
} | |
.clearfix:before, | |
.clearfix:after, | |
.container:before, | |
.container:after, | |
.container-fluid:before, | |
.container-fluid:after, | |
.row:before, | |
.row:after, | |
.dl-horizontal dd:before, | |
.dl-horizontal dd:after, | |
.form-horizontal .form-group:before, | |
.form-horizontal .form-group:after, | |
.btn-toolbar:before, | |
.btn-toolbar:after, | |
.btn-group-vertical > .btn-group:before, | |
.btn-group-vertical > .btn-group:after { | |
content: " "; | |
display: table; | |
} | |
.clearfix:after, | |
.container:after, | |
.container-fluid:after, | |
.row:after, | |
.dl-horizontal dd:after, | |
.form-horizontal .form-group:after, | |
.btn-toolbar:after, | |
.btn-group-vertical > .btn-group:after { | |
clear: both; | |
} | |
.center-block { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.pull-right { | |
float: right !important; | |
} | |
.pull-left { | |
float: left !important; | |
} | |
.hide { | |
display: none !important; | |
} | |
.show { | |
display: block !important; | |
} | |
.invisible { | |
visibility: hidden; | |
} | |
.text-hide { | |
font: 0/0 a; | |
color: transparent; | |
text-shadow: none; | |
background-color: transparent; | |
border: 0; | |
} | |
.hidden { | |
display: none !important; | |
} | |
.affix { | |
position: fixed; | |
} | |
@-ms-viewport { | |
width: device-width; | |
} | |
.visible-xs, | |
.visible-sm, | |
.visible-md, | |
.visible-lg { | |
display: none !important; | |
} | |
.visible-xs-block, | |
.visible-xs-inline, | |
.visible-xs-inline-block, | |
.visible-sm-block, | |
.visible-sm-inline, | |
.visible-sm-inline-block, | |
.visible-md-block, | |
.visible-md-inline, | |
.visible-md-inline-block, | |
.visible-lg-block, | |
.visible-lg-inline, | |
.visible-lg-inline-block { | |
display: none !important; | |
} | |
@media (max-width: 767px) { | |
.visible-xs { | |
display: block !important; | |
} | |
table.visible-xs { | |
display: table !important; | |
} | |
tr.visible-xs { | |
display: table-row !important; | |
} | |
th.visible-xs, | |
td.visible-xs { | |
display: table-cell !important; | |
} | |
} | |
@media (max-width: 767px) { | |
.visible-xs-block { | |
display: block !important; | |
} | |
} | |
@media (max-width: 767px) { | |
.visible-xs-inline { | |
display: inline !important; | |
} | |
} | |
@media (max-width: 767px) { | |
.visible-xs-inline-block { | |
display: inline-block !important; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 991px) { | |
.visible-sm { | |
display: block !important; | |
} | |
table.visible-sm { | |
display: table !important; | |
} | |
tr.visible-sm { | |
display: table-row !important; | |
} | |
th.visible-sm, | |
td.visible-sm { | |
display: table-cell !important; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 991px) { | |
.visible-sm-block { | |
display: block !important; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 991px) { | |
.visible-sm-inline { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 991px) { | |
.visible-sm-inline-block { | |
display: inline-block !important; | |
} | |
} | |
@media (min-width: 992px) and (max-width: 1199px) { | |
.visible-md { | |
display: block !important; | |
} | |
table.visible-md { | |
display: table !important; | |
} | |
tr.visible-md { | |
display: table-row !important; | |
} | |
th.visible-md, | |
td.visible-md { | |
display: table-cell !important; | |
} | |
} | |
@media (min-width: 992px) and (max-width: 1199px) { | |
.visible-md-block { | |
display: block !important; | |
} | |
} | |
@media (min-width: 992px) and (max-width: 1199px) { | |
.visible-md-inline { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 992px) and (max-width: 1199px) { | |
.visible-md-inline-block { | |
display: inline-block !important; | |
} | |
} | |
@media (min-width: 1200px) { | |
.visible-lg { | |
display: block !important; | |
} | |
table.visible-lg { | |
display: table !important; | |
} | |
tr.visible-lg { | |
display: table-row !important; | |
} | |
th.visible-lg, | |
td.visible-lg { | |
display: table-cell !important; | |
} | |
} | |
@media (min-width: 1200px) { | |
.visible-lg-block { | |
display: block !important; | |
} | |
} | |
@media (min-width: 1200px) { | |
.visible-lg-inline { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 1200px) { | |
.visible-lg-inline-block { | |
display: inline-block !important; | |
} | |
} | |
@media (max-width: 767px) { | |
.hidden-xs { | |
display: none !important; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 991px) { | |
.hidden-sm { | |
display: none !important; | |
} | |
} | |
@media (min-width: 992px) and (max-width: 1199px) { | |
.hidden-md { | |
display: none !important; | |
} | |
} | |
@media (min-width: 1200px) { | |
.hidden-lg { | |
display: none !important; | |
} | |
} | |
.visible-print { | |
display: none !important; | |
} | |
@media print { | |
.visible-print { | |
display: block !important; | |
} | |
table.visible-print { | |
display: table !important; | |
} | |
tr.visible-print { | |
display: table-row !important; | |
} | |
th.visible-print, | |
td.visible-print { | |
display: table-cell !important; | |
} | |
} | |
.visible-print-block { | |
display: none !important; | |
} | |
@media print { | |
.visible-print-block { | |
display: block !important; | |
} | |
} | |
.visible-print-inline { | |
display: none !important; | |
} | |
@media print { | |
.visible-print-inline { | |
display: inline !important; | |
} | |
} | |
.visible-print-inline-block { | |
display: none !important; | |
} | |
@media print { | |
.visible-print-inline-block { | |
display: inline-block !important; | |
} | |
} | |
@media print { | |
.hidden-print { | |
display: none !important; | |
} | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
.h1, | |
.h2, | |
.h3, | |
.h4, | |
.h5, | |
.h6 { | |
font-family: inherit; | |
font-weight: 500; | |
line-height: 1.1; | |
color: inherit; | |
} | |
h1 small, | |
h2 small, | |
h3 small, | |
h4 small, | |
h5 small, | |
h6 small, | |
.h1 small, | |
.h2 small, | |
.h3 small, | |
.h4 small, | |
.h5 small, | |
.h6 small, | |
h1 .small, | |
h2 .small, | |
h3 .small, | |
h4 .small, | |
h5 .small, | |
h6 .small, | |
.h1 .small, | |
.h2 .small, | |
.h3 .small, | |
.h4 .small, | |
.h5 .small, | |
.h6 .small { | |
font-weight: normal; | |
line-height: 1; | |
color: #616161; | |
} | |
h1, | |
.h1, | |
h2, | |
.h2, | |
h3, | |
.h3 { | |
margin-top: 20px; | |
margin-bottom: 10px; | |
} | |
h1 small, | |
.h1 small, | |
h2 small, | |
.h2 small, | |
h3 small, | |
.h3 small, | |
h1 .small, | |
.h1 .small, | |
h2 .small, | |
.h2 .small, | |
h3 .small, | |
.h3 .small { | |
font-size: 65%; | |
} | |
h4, | |
.h4, | |
h5, | |
.h5, | |
h6, | |
.h6 { | |
margin-top: 10px; | |
margin-bottom: 10px; | |
} | |
h4 small, | |
.h4 small, | |
h5 small, | |
.h5 small, | |
h6 small, | |
.h6 small, | |
h4 .small, | |
.h4 .small, | |
h5 .small, | |
.h5 .small, | |
h6 .small, | |
.h6 .small { | |
font-size: 75%; | |
} | |
h1, | |
.h1 { | |
font-size: 36px; | |
} | |
h2, | |
.h2 { | |
font-size: 30px; | |
} | |
h3, | |
.h3 { | |
font-size: 24px; | |
} | |
h4, | |
.h4 { | |
font-size: 18px; | |
} | |
h5, | |
.h5 { | |
font-size: 14px; | |
} | |
h6, | |
.h6 { | |
font-size: 12px; | |
} | |
p { | |
margin: 0 0 10px; | |
} | |
.lead { | |
margin-bottom: 20px; | |
font-size: 16px; | |
font-weight: 300; | |
line-height: 1.4; | |
} | |
@media (min-width: 768px) { | |
.lead { | |
font-size: 21px; | |
} | |
} | |
small, | |
.small { | |
font-size: 85%; | |
} | |
mark, | |
.mark { | |
background-color: #fcf8e3; | |
padding: .2em; | |
} | |
.text-left { | |
text-align: left; | |
} | |
.text-right { | |
text-align: right; | |
} | |
.text-center { | |
text-align: center; | |
} | |
.text-justify { | |
text-align: justify; | |
} | |
.text-nowrap { | |
white-space: nowrap; | |
} | |
.text-lowercase { | |
text-transform: lowercase; | |
} | |
.text-uppercase { | |
text-transform: uppercase; | |
} | |
.text-capitalize { | |
text-transform: capitalize; | |
} | |
.text-muted { | |
color: #616161; | |
} | |
.text-primary { | |
color: #337ab7; | |
} | |
a.text-primary:hover, | |
a.text-primary:focus { | |
color: #286090; | |
} | |
.text-success { | |
color: #3c763d; | |
} | |
a.text-success:hover, | |
a.text-success:focus { | |
color: #2b542c; | |
} | |
.text-info { | |
color: #31708f; | |
} | |
a.text-info:hover, | |
a.text-info:focus { | |
color: #245269; | |
} | |
.text-warning { | |
color: #8a6d3b; | |
} | |
a.text-warning:hover, | |
a.text-warning:focus { | |
color: #66512c; | |
} | |
.text-danger { | |
color: #632827; | |
} | |
a.text-danger:hover, | |
a.text-danger:focus { | |
color: #3e1919; | |
} | |
.bg-primary { | |
color: #fff; | |
background-color: #337ab7; | |
} | |
a.bg-primary:hover, | |
a.bg-primary:focus { | |
background-color: #286090; | |
} | |
.bg-success { | |
background-color: #dff0d8; | |
} | |
a.bg-success:hover, | |
a.bg-success:focus { | |
background-color: #c1e2b3; | |
} | |
.bg-info { | |
background-color: #d9edf7; | |
} | |
a.bg-info:hover, | |
a.bg-info:focus { | |
background-color: #afd9ee; | |
} | |
.bg-warning { | |
background-color: #fcf8e3; | |
} | |
a.bg-warning:hover, | |
a.bg-warning:focus { | |
background-color: #f7ecb5; | |
} | |
.bg-danger { | |
background-color: #f2dede; | |
} | |
a.bg-danger:hover, | |
a.bg-danger:focus { | |
background-color: #e4b9b9; | |
} | |
.page-header { | |
padding-bottom: 9px; | |
margin: 40px 0 20px; | |
border-bottom: 1px solid #EEEEEE; | |
} | |
ul, | |
ol { | |
margin-top: 0; | |
margin-bottom: 10px; | |
} | |
ul ul, | |
ol ul, | |
ul ol, | |
ol ol { | |
margin-bottom: 0; | |
} | |
.list-unstyled { | |
padding-left: 0; | |
list-style: none; | |
} | |
.list-inline { | |
padding-left: 0; | |
list-style: none; | |
margin-left: -5px; | |
} | |
.list-inline > li { | |
display: inline-block; | |
padding-left: 5px; | |
padding-right: 5px; | |
} | |
dl { | |
margin-top: 0; | |
margin-bottom: 20px; | |
} | |
dt, | |
dd { | |
line-height: 1.42857143; | |
} | |
dt { | |
font-weight: bold; | |
} | |
dd { | |
margin-left: 0; | |
} | |
@media (min-width: 768px) { | |
.dl-horizontal dt { | |
float: left; | |
width: 160px; | |
clear: left; | |
text-align: right; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.dl-horizontal dd { | |
margin-left: 180px; | |
} | |
} | |
abbr[title], | |
abbr[data-original-title] { | |
cursor: help; | |
border-bottom: 1px dotted #616161; | |
} | |
.initialism { | |
font-size: 90%; | |
text-transform: uppercase; | |
} | |
blockquote { | |
padding: 10px 20px; | |
margin: 0 0 20px; | |
font-size: 17.5px; | |
border-left: 5px solid #EEEEEE; | |
} | |
blockquote p:last-child, | |
blockquote ul:last-child, | |
blockquote ol:last-child { | |
margin-bottom: 0; | |
} | |
blockquote footer, | |
blockquote small, | |
blockquote .small { | |
display: block; | |
font-size: 80%; | |
line-height: 1.42857143; | |
color: #616161; | |
} | |
blockquote footer:before, | |
blockquote small:before, | |
blockquote .small:before { | |
content: '\2014 \00A0'; | |
} | |
.blockquote-reverse, | |
blockquote.pull-right { | |
padding-right: 15px; | |
padding-left: 0; | |
border-right: 5px solid #EEEEEE; | |
border-left: 0; | |
text-align: right; | |
} | |
.blockquote-reverse footer:before, | |
blockquote.pull-right footer:before, | |
.blockquote-reverse small:before, | |
blockquote.pull-right small:before, | |
.blockquote-reverse .small:before, | |
blockquote.pull-right .small:before { | |
content: ''; | |
} | |
.blockquote-reverse footer:after, | |
blockquote.pull-right footer:after, | |
.blockquote-reverse small:after, | |
blockquote.pull-right small:after, | |
.blockquote-reverse .small:after, | |
blockquote.pull-right .small:after { | |
content: '\00A0 \2014'; | |
} | |
address { | |
margin-bottom: 20px; | |
font-style: normal; | |
line-height: 1.42857143; | |
} | |
fieldset { | |
padding: 0; | |
margin: 0; | |
border: 0; | |
min-width: 0; | |
} | |
legend { | |
display: block; | |
width: 100%; | |
padding: 0; | |
margin-bottom: 20px; | |
font-size: 21px; | |
line-height: inherit; | |
color: #212121; | |
border: 0; | |
border-bottom: 1px solid #e5e5e5; | |
} | |
label { | |
display: inline-block; | |
max-width: 100%; | |
margin-bottom: 5px; | |
font-weight: bold; | |
} | |
input[type="search"] { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
input[type="radio"], | |
input[type="checkbox"] { | |
margin: 4px 0 0; | |
margin-top: 1px \9; | |
line-height: normal; | |
} | |
input[type="file"] { | |
display: block; | |
} | |
input[type="range"] { | |
display: block; | |
width: 100%; | |
} | |
select[multiple], | |
select[size] { | |
height: auto; | |
} | |
input[type="file"]:focus, | |
input[type="radio"]:focus, | |
input[type="checkbox"]:focus { | |
outline: thin dotted; | |
outline: 5px auto -webkit-focus-ring-color; | |
outline-offset: -2px; | |
} | |
output { | |
display: block; | |
padding-top: 7px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
color: #212121; | |
} | |
.form-control { | |
display: block; | |
width: 100%; | |
height: 34px; | |
padding: 6px 12px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
color: #212121; | |
background-color: #fff; | |
background-image: none; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
-webkit-transition: border-color ease-in-out .15s, 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:focus { | |
border-color: #66afe9; | |
outline: 0; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
} | |
.form-control::-moz-placeholder { | |
color: #999; | |
opacity: 1; | |
} | |
.form-control:-ms-input-placeholder { | |
color: #999; | |
} | |
.form-control::-webkit-input-placeholder { | |
color: #999; | |
} | |
.form-control::-ms-expand { | |
border: 0; | |
background-color: transparent; | |
} | |
.form-control[disabled], | |
.form-control[readonly], | |
fieldset[disabled] .form-control { | |
background-color: #EEEEEE; | |
opacity: 1; | |
} | |
.form-control[disabled], | |
fieldset[disabled] .form-control { | |
cursor: not-allowed; | |
} | |
textarea.form-control { | |
height: auto; | |
} | |
input[type="search"] { | |
-webkit-appearance: none; | |
} | |
@media screen and (-webkit-min-device-pixel-ratio: 0) { | |
input[type="date"].form-control, | |
input[type="time"].form-control, | |
input[type="datetime-local"].form-control, | |
input[type="month"].form-control { | |
line-height: 34px; | |
} | |
input[type="date"].input-sm, | |
input[type="time"].input-sm, | |
input[type="datetime-local"].input-sm, | |
input[type="month"].input-sm, | |
.input-group-sm input[type="date"], | |
.input-group-sm input[type="time"], | |
.input-group-sm input[type="datetime-local"], | |
.input-group-sm input[type="month"] { | |
line-height: 30px; | |
} | |
input[type="date"].input-lg, | |
input[type="time"].input-lg, | |
input[type="datetime-local"].input-lg, | |
input[type="month"].input-lg, | |
.input-group-lg input[type="date"], | |
.input-group-lg input[type="time"], | |
.input-group-lg input[type="datetime-local"], | |
.input-group-lg input[type="month"] { | |
line-height: 46px; | |
} | |
} | |
.form-group { | |
margin-bottom: 15px; | |
} | |
.radio, | |
.checkbox { | |
position: relative; | |
display: block; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
} | |
.radio label, | |
.checkbox label { | |
min-height: 20px; | |
padding-left: 20px; | |
margin-bottom: 0; | |
font-weight: normal; | |
cursor: pointer; | |
} | |
.radio input[type="radio"], | |
.radio-inline input[type="radio"], | |
.checkbox input[type="checkbox"], | |
.checkbox-inline input[type="checkbox"] { | |
position: absolute; | |
margin-left: -20px; | |
margin-top: 4px \9; | |
} | |
.radio + .radio, | |
.checkbox + .checkbox { | |
margin-top: -5px; | |
} | |
.radio-inline, | |
.checkbox-inline { | |
position: relative; | |
display: inline-block; | |
padding-left: 20px; | |
margin-bottom: 0; | |
vertical-align: middle; | |
font-weight: normal; | |
cursor: pointer; | |
} | |
.radio-inline + .radio-inline, | |
.checkbox-inline + .checkbox-inline { | |
margin-top: 0; | |
margin-left: 10px; | |
} | |
input[type="radio"][disabled], | |
input[type="checkbox"][disabled], | |
input[type="radio"].disabled, | |
input[type="checkbox"].disabled, | |
fieldset[disabled] input[type="radio"], | |
fieldset[disabled] input[type="checkbox"] { | |
cursor: not-allowed; | |
} | |
.radio-inline.disabled, | |
.checkbox-inline.disabled, | |
fieldset[disabled] .radio-inline, | |
fieldset[disabled] .checkbox-inline { | |
cursor: not-allowed; | |
} | |
.radio.disabled label, | |
.checkbox.disabled label, | |
fieldset[disabled] .radio label, | |
fieldset[disabled] .checkbox label { | |
cursor: not-allowed; | |
} | |
.form-control-static { | |
padding-top: 7px; | |
padding-bottom: 7px; | |
margin-bottom: 0; | |
min-height: 34px; | |
} | |
.form-control-static.input-lg, | |
.form-control-static.input-sm { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.input-sm { | |
height: 30px; | |
padding: 5px 10px; | |
font-size: 12px; | |
line-height: 1.5; | |
border-radius: 3px; | |
} | |
select.input-sm { | |
height: 30px; | |
line-height: 30px; | |
} | |
textarea.input-sm, | |
select[multiple].input-sm { | |
height: auto; | |
} | |
.form-group-sm .form-control { | |
height: 30px; | |
padding: 5px 10px; | |
font-size: 12px; | |
line-height: 1.5; | |
border-radius: 3px; | |
} | |
.form-group-sm select.form-control { | |
height: 30px; | |
line-height: 30px; | |
} | |
.form-group-sm textarea.form-control, | |
.form-group-sm select[multiple].form-control { | |
height: auto; | |
} | |
.form-group-sm .form-control-static { | |
height: 30px; | |
min-height: 32px; | |
padding: 6px 10px; | |
font-size: 12px; | |
line-height: 1.5; | |
} | |
.input-lg { | |
height: 46px; | |
padding: 10px 16px; | |
font-size: 18px; | |
line-height: 1.3333333; | |
border-radius: 6px; | |
} | |
select.input-lg { | |
height: 46px; | |
line-height: 46px; | |
} | |
textarea.input-lg, | |
select[multiple].input-lg { | |
height: auto; | |
} | |
.form-group-lg .form-control { | |
height: 46px; | |
padding: 10px 16px; | |
font-size: 18px; | |
line-height: 1.3333333; | |
border-radius: 6px; | |
} | |
.form-group-lg select.form-control { | |
height: 46px; | |
line-height: 46px; | |
} | |
.form-group-lg textarea.form-control, | |
.form-group-lg select[multiple].form-control { | |
height: auto; | |
} | |
.form-group-lg .form-control-static { | |
height: 46px; | |
min-height: 38px; | |
padding: 11px 16px; | |
font-size: 18px; | |
line-height: 1.3333333; | |
} | |
.has-feedback { | |
position: relative; | |
} | |
.has-feedback .form-control { | |
padding-right: 42.5px; | |
} | |
.form-control-feedback { | |
position: absolute; | |
top: 0; | |
right: 0; | |
z-index: 2; | |
display: block; | |
width: 34px; | |
height: 34px; | |
line-height: 34px; | |
text-align: center; | |
pointer-events: none; | |
} | |
.input-lg + .form-control-feedback, | |
.input-group-lg + .form-control-feedback, | |
.form-group-lg .form-control + .form-control-feedback { | |
width: 46px; | |
height: 46px; | |
line-height: 46px; | |
} | |
.input-sm + .form-control-feedback, | |
.input-group-sm + .form-control-feedback, | |
.form-group-sm .form-control + .form-control-feedback { | |
width: 30px; | |
height: 30px; | |
line-height: 30px; | |
} | |
.has-success .help-block, | |
.has-success .control-label, | |
.has-success .radio, | |
.has-success .checkbox, | |
.has-success .radio-inline, | |
.has-success .checkbox-inline, | |
.has-success.radio label, | |
.has-success.checkbox label, | |
.has-success.radio-inline label, | |
.has-success.checkbox-inline label { | |
color: #3c763d; | |
} | |
.has-success .form-control { | |
border-color: #3c763d; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
} | |
.has-success .form-control:focus { | |
border-color: #2b542c; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; | |
} | |
.has-success .input-group-addon { | |
color: #3c763d; | |
border-color: #3c763d; | |
background-color: #dff0d8; | |
} | |
.has-success .form-control-feedback { | |
color: #3c763d; | |
} | |
.has-warning .help-block, | |
.has-warning .control-label, | |
.has-warning .radio, | |
.has-warning .checkbox, | |
.has-warning .radio-inline, | |
.has-warning .checkbox-inline, | |
.has-warning.radio label, | |
.has-warning.checkbox label, | |
.has-warning.radio-inline label, | |
.has-warning.checkbox-inline label { | |
color: #8a6d3b; | |
} | |
.has-warning .form-control { | |
border-color: #8a6d3b; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
} | |
.has-warning .form-control:focus { | |
border-color: #66512c; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; | |
} | |
.has-warning .input-group-addon { | |
color: #8a6d3b; | |
border-color: #8a6d3b; | |
background-color: #fcf8e3; | |
} | |
.has-warning .form-control-feedback { | |
color: #8a6d3b; | |
} | |
.has-error .help-block, | |
.has-error .control-label, | |
.has-error .radio, | |
.has-error .checkbox, | |
.has-error .radio-inline, | |
.has-error .checkbox-inline, | |
.has-error.radio label, | |
.has-error.checkbox label, | |
.has-error.radio-inline label, | |
.has-error.checkbox-inline label { | |
color: #632827; | |
} | |
.has-error .form-control { | |
border-color: #632827; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
} | |
.has-error .form-control:focus { | |
border-color: #3e1919; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ac4644; | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ac4644; | |
} | |
.has-error .input-group-addon { | |
color: #632827; | |
border-color: #632827; | |
background-color: #f2dede; | |
} | |
.has-error .form-control-feedback { | |
color: #632827; | |
} | |
.has-feedback label ~ .form-control-feedback { | |
top: 25px; | |
} | |
.has-feedback label.sr-only ~ .form-control-feedback { | |
top: 0; | |
} | |
.help-block { | |
display: block; | |
margin-top: 5px; | |
margin-bottom: 10px; | |
color: #616161; | |
} | |
@media (min-width: 768px) { | |
.form-inline .form-group { | |
display: inline-block; | |
margin-bottom: 0; | |
vertical-align: middle; | |
} | |
.form-inline .form-control { | |
display: inline-block; | |
width: auto; | |
vertical-align: middle; | |
} | |
.form-inline .form-control-static { | |
display: inline-block; | |
} | |
.form-inline .input-group { | |
display: inline-table; | |
vertical-align: middle; | |
} | |
.form-inline .input-group .input-group-addon, | |
.form-inline .input-group .input-group-btn, | |
.form-inline .input-group .form-control { | |
width: auto; | |
} | |
.form-inline .input-group > .form-control { | |
width: 100%; | |
} | |
.form-inline .control-label { | |
margin-bottom: 0; | |
vertical-align: middle; | |
} | |
.form-inline .radio, | |
.form-inline .checkbox { | |
display: inline-block; | |
margin-top: 0; | |
margin-bottom: 0; | |
vertical-align: middle; | |
} | |
.form-inline .radio label, | |
.form-inline .checkbox label { | |
padding-left: 0; | |
} | |
.form-inline .radio input[type="radio"], | |
.form-inline .checkbox input[type="checkbox"] { | |
position: relative; | |
margin-left: 0; | |
} | |
.form-inline .has-feedback .form-control-feedback { | |
top: 0; | |
} | |
} | |
.form-horizontal .radio, | |
.form-horizontal .checkbox, | |
.form-horizontal .radio-inline, | |
.form-horizontal .checkbox-inline { | |
margin-top: 0; | |
margin-bottom: 0; | |
padding-top: 7px; | |
} | |
.form-horizontal .radio, | |
.form-horizontal .checkbox { | |
min-height: 27px; | |
} | |
.form-horizontal .form-group { | |
margin-left: -15px; | |
margin-right: -15px; | |
} | |
@media (min-width: 768px) { | |
.form-horizontal .control-label { | |
text-align: right; | |
margin-bottom: 0; | |
padding-top: 7px; | |
} | |
} | |
.form-horizontal .has-feedback .form-control-feedback { | |
right: 15px; | |
} | |
@media (min-width: 768px) { | |
.form-horizontal .form-group-lg .control-label { | |
padding-top: 11px; | |
font-size: 18px; | |
} | |
} | |
@media (min-width: 768px) { | |
.form-horizontal .form-group-sm .control-label { | |
padding-top: 6px; | |
font-size: 12px; | |
} | |
} | |
.btn { | |
display: inline-block; | |
margin-bottom: 0; | |
font-weight: normal; | |
text-align: center; | |
vertical-align: middle; | |
touch-action: manipulation; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid transparent; | |
white-space: nowrap; | |
padding: 6px 12px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
border-radius: 4px; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
.btn:focus, | |
.btn:active:focus, | |
.btn.active:focus, | |
.btn.focus, | |
.btn:active.focus, | |
.btn.active.focus { | |
outline: thin dotted; | |
outline: 5px auto -webkit-focus-ring-color; | |
outline-offset: -2px; | |
} | |
.btn:hover, | |
.btn:focus, | |
.btn.focus { | |
color: #FFFFFF; | |
text-decoration: none; | |
} | |
.btn:active, | |
.btn.active { | |
outline: 0; | |
background-image: none; | |
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
} | |
.btn.disabled, | |
.btn[disabled], | |
fieldset[disabled] .btn { | |
cursor: not-allowed; | |
opacity: 0.65; | |
filter: alpha(opacity=65); | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
a.btn.disabled, | |
fieldset[disabled] a.btn { | |
pointer-events: none; | |
} | |
.btn-default { | |
color: #FFFFFF; | |
background-color: #37474F; | |
border-color: #ccc; | |
} | |
.btn-default:focus, | |
.btn-default.focus { | |
color: #FFFFFF; | |
background-color: #222c31; | |
border-color: #8c8c8c; | |
} | |
.btn-default:hover { | |
color: #FFFFFF; | |
background-color: #222c31; | |
border-color: #adadad; | |
} | |
.btn-default:active, | |
.btn-default.active, | |
.open > .dropdown-toggle.btn-default { | |
color: #FFFFFF; | |
background-color: #222c31; | |
border-color: #adadad; | |
} | |
.btn-default:active:hover, | |
.btn-default.active:hover, | |
.open > .dropdown-toggle.btn-default:hover, | |
.btn-default:active:focus, | |
.btn-default.active:focus, | |
.open > .dropdown-toggle.btn-default:focus, | |
.btn-default:active.focus, | |
.btn-default.active.focus, | |
.open > .dropdown-toggle.btn-default.focus { | |
color: #FFFFFF; | |
background-color: #13191c; | |
border-color: #8c8c8c; | |
} | |
.btn-default:active, | |
.btn-default.active, | |
.open > .dropdown-toggle.btn-default { | |
background-image: none; | |
} | |
.btn-default.disabled:hover, | |
.btn-default[disabled]:hover, | |
fieldset[disabled] .btn-default:hover, | |
.btn-default.disabled:focus, | |
.btn-default[disabled]:focus, | |
fieldset[disabled] .btn-default:focus, | |
.btn-default.disabled.focus, | |
.btn-default[disabled].focus, | |
fieldset[disabled] .btn-default.focus { | |
background-color: #37474F; | |
border-color: #ccc; | |
} | |
.btn-default .badge { | |
color: #37474F; | |
background-color: #FFFFFF; | |
} | |
.btn-primary { | |
color: #EEEEEE; | |
background-color: #263238; | |
border-color: #1c2429; | |
} | |
.btn-primary:focus, | |
.btn-primary.focus { | |
color: #EEEEEE; | |
background-color: #11171a; | |
border-color: #000000; | |
} | |
.btn-primary:hover { | |
color: #EEEEEE; | |
background-color: #11171a; | |
border-color: #030404; | |
} | |
.btn-primary:active, | |
.btn-primary.active, | |
.open > .dropdown-toggle.btn-primary { | |
color: #EEEEEE; | |
background-color: #11171a; | |
border-color: #030404; | |
} | |
.btn-primary:active:hover, | |
.btn-primary.active:hover, | |
.open > .dropdown-toggle.btn-primary:hover, | |
.btn-primary:active:focus, | |
.btn-primary.active:focus, | |
.open > .dropdown-toggle.btn-primary:focus, | |
.btn-primary:active.focus, | |
.btn-primary.active.focus, | |
.open > .dropdown-toggle.btn-primary.focus { | |
color: #EEEEEE; | |
background-color: #030404; | |
border-color: #000000; | |
} | |
.btn-primary:active, | |
.btn-primary.active, | |
.open > .dropdown-toggle.btn-primary { | |
background-image: none; | |
} | |
.btn-primary.disabled:hover, | |
.btn-primary[disabled]:hover, | |
fieldset[disabled] .btn-primary:hover, | |
.btn-primary.disabled:focus, | |
.btn-primary[disabled]:focus, | |
fieldset[disabled] .btn-primary:focus, | |
.btn-primary.disabled.focus, | |
.btn-primary[disabled].focus, | |
fieldset[disabled] .btn-primary.focus { | |
background-color: #263238; | |
border-color: #1c2429; | |
} | |
.btn-primary .badge { | |
color: #263238; | |
background-color: #EEEEEE; | |
} | |
.btn-success { | |
color: #fff; | |
background-color: #5cb85c; | |
border-color: #4cae4c; | |
} | |
.btn-success:focus, | |
.btn-success.focus { | |
color: #fff; | |
background-color: #449d44; | |
border-color: #255625; | |
} | |
.btn-success:hover { | |
color: #fff; | |
background-color: #449d44; | |
border-color: #398439; | |
} | |
.btn-success:active, | |
.btn-success.active, | |
.open > .dropdown-toggle.btn-success { | |
color: #fff; | |
background-color: #449d44; | |
border-color: #398439; | |
} | |
.btn-success:active:hover, | |
.btn-success.active:hover, | |
.open > .dropdown-toggle.btn-success:hover, | |
.btn-success:active:focus, | |
.btn-success.active:focus, | |
.open > .dropdown-toggle.btn-success:focus, | |
.btn-success:active.focus, | |
.btn-success.active.focus, | |
.open > .dropdown-toggle.btn-success.focus { | |
color: #fff; | |
background-color: #398439; | |
border-color: #255625; | |
} | |
.btn-success:active, | |
.btn-success.active, | |
.open > .dropdown-toggle.btn-success { | |
background-image: none; | |
} | |
.btn-success.disabled:hover, | |
.btn-success[disabled]:hover, | |
fieldset[disabled] .btn-success:hover, | |
.btn-success.disabled:focus, | |
.btn-success[disabled]:focus, | |
fieldset[disabled] .btn-success:focus, | |
.btn-success.disabled.focus, | |
.btn-success[disabled].focus, | |
fieldset[disabled] .btn-success.focus { | |
background-color: #5cb85c; | |
border-color: #4cae4c; | |
} | |
.btn-success .badge { | |
color: #5cb85c; | |
background-color: #fff; | |
} | |
.btn-info { | |
color: #fff; | |
background-color: #5bc0de; | |
border-color: #46b8da; | |
} | |
.btn-info:focus, | |
.btn-info.focus { | |
color: #fff; | |
background-color: #31b0d5; | |
border-color: #1b6d85; | |
} | |
.btn-info:hover { | |
color: #fff; | |
background-color: #31b0d5; | |
border-color: #269abc; | |
} | |
.btn-info:active, | |
.btn-info.active, | |
.open > .dropdown-toggle.btn-info { | |
color: #fff; | |
background-color: #31b0d5; | |
border-color: #269abc; | |
} | |
.btn-info:active:hover, | |
.btn-info.active:hover, | |
.open > .dropdown-toggle.btn-info:hover, | |
.btn-info:active:focus, | |
.btn-info.active:focus, | |
.open > .dropdown-toggle.btn-info:focus, | |
.btn-info:active.focus, | |
.btn-info.active.focus, | |
.open > .dropdown-toggle.btn-info.focus { | |
color: #fff; | |
background-color: #269abc; | |
border-color: #1b6d85; | |
} | |
.btn-info:active, | |
.btn-info.active, | |
.open > .dropdown-toggle.btn-info { | |
background-image: none; | |
} | |
.btn-info.disabled:hover, | |
.btn-info[disabled]:hover, | |
fieldset[disabled] .btn-info:hover, | |
.btn-info.disabled:focus, | |
.btn-info[disabled]:focus, | |
fieldset[disabled] .btn-info:focus, | |
.btn-info.disabled.focus, | |
.btn-info[disabled].focus, | |
fieldset[disabled] .btn-info.focus { | |
background-color: #5bc0de; | |
border-color: #46b8da; | |
} | |
.btn-info .badge { | |
color: #5bc0de; | |
background-color: #fff; | |
} | |
.btn-warning { | |
color: #fff; | |
background-color: #f0ad4e; | |
border-color: #eea236; | |
} | |
.btn-warning:focus, | |
.btn-warning.focus { | |
color: #fff; | |
background-color: #ec971f; | |
border-color: #985f0d; | |
} | |
.btn-warning:hover { | |
color: #fff; | |
background-color: #ec971f; | |
border-color: #d58512; | |
} | |
.btn-warning:active, | |
.btn-warning.active, | |
.open > .dropdown-toggle.btn-warning { | |
color: #fff; | |
background-color: #ec971f; | |
border-color: #d58512; | |
} | |
.btn-warning:active:hover, | |
.btn-warning.active:hover, | |
.open > .dropdown-toggle.btn-warning:hover, | |
.btn-warning:active:focus, | |
.btn-warning.active:focus, | |
.open > .dropdown-toggle.btn-warning:focus, | |
.btn-warning:active.focus, | |
.btn-warning.active.focus, | |
.open > .dropdown-toggle.btn-warning.focus { | |
color: #fff; | |
background-color: #d58512; | |
border-color: #985f0d; | |
} | |
.btn-warning:active, | |
.btn-warning.active, | |
.open > .dropdown-toggle.btn-warning { | |
background-image: none; | |
} | |
.btn-warning.disabled:hover, | |
.btn-warning[disabled]:hover, | |
fieldset[disabled] .btn-warning:hover, | |
.btn-warning.disabled:focus, | |
.btn-warning[disabled]:focus, | |
fieldset[disabled] .btn-warning:focus, | |
.btn-warning.disabled.focus, | |
.btn-warning[disabled].focus, | |
fieldset[disabled] .btn-warning.focus { | |
background-color: #f0ad4e; | |
border-color: #eea236; | |
} | |
.btn-warning .badge { | |
color: #f0ad4e; | |
background-color: #fff; | |
} | |
.btn-danger { | |
color: #fff; | |
background-color: #d9534f; | |
border-color: #d43f3a; | |
} | |
.btn-danger:focus, | |
.btn-danger.focus { | |
color: #fff; | |
background-color: #c9302c; | |
border-color: #761c19; | |
} | |
.btn-danger:hover { | |
color: #fff; | |
background-color: #c9302c; | |
border-color: #ac2925; | |
} | |
.btn-danger:active, | |
.btn-danger.active, | |
.open > .dropdown-toggle.btn-danger { | |
color: #fff; | |
background-color: #c9302c; | |
border-color: #ac2925; | |
} | |
.btn-danger:active:hover, | |
.btn-danger.active:hover, | |
.open > .dropdown-toggle.btn-danger:hover, | |
.btn-danger:active:focus, | |
.btn-danger.active:focus, | |
.open > .dropdown-toggle.btn-danger:focus, | |
.btn-danger:active.focus, | |
.btn-danger.active.focus, | |
.open > .dropdown-toggle.btn-danger.focus { | |
color: #fff; | |
background-color: #ac2925; | |
border-color: #761c19; | |
} | |
.btn-danger:active, | |
.btn-danger.active, | |
.open > .dropdown-toggle.btn-danger { | |
background-image: none; | |
} | |
.btn-danger.disabled:hover, | |
.btn-danger[disabled]:hover, | |
fieldset[disabled] .btn-danger:hover, | |
.btn-danger.disabled:focus, | |
.btn-danger[disabled]:focus, | |
fieldset[disabled] .btn-danger:focus, | |
.btn-danger.disabled.focus, | |
.btn-danger[disabled].focus, | |
fieldset[disabled] .btn-danger.focus { | |
background-color: #d9534f; | |
border-color: #d43f3a; | |
} | |
.btn-danger .badge { | |
color: #d9534f; | |
background-color: #fff; | |
} | |
.btn-link { | |
color: #337ab7; | |
font-weight: normal; | |
border-radius: 0; | |
} | |
.btn-link, | |
.btn-link:active, | |
.btn-link.active, | |
.btn-link[disabled], | |
fieldset[disabled] .btn-link { | |
background-color: transparent; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.btn-link, | |
.btn-link:hover, | |
.btn-link:focus, | |
.btn-link:active { | |
border-color: transparent; | |
} | |
.btn-link:hover, | |
.btn-link:focus { | |
color: #23527c; | |
text-decoration: underline; | |
background-color: transparent; | |
} | |
.btn-link[disabled]:hover, | |
fieldset[disabled] .btn-link:hover, | |
.btn-link[disabled]:focus, | |
fieldset[disabled] .btn-link:focus { | |
color: #616161; | |
text-decoration: none; | |
} | |
.btn-lg, | |
.btn-group-lg > .btn { | |
padding: 10px 16px; | |
font-size: 18px; | |
line-height: 1.3333333; | |
border-radius: 6px; | |
} | |
.btn-sm, | |
.btn-group-sm > .btn { | |
padding: 5px 10px; | |
font-size: 12px; | |
line-height: 1.5; | |
border-radius: 3px; | |
} | |
.btn-xs, | |
.btn-group-xs > .btn { | |
padding: 1px 5px; | |
font-size: 12px; | |
line-height: 1.5; | |
border-radius: 3px; | |
} | |
.btn-block { | |
display: block; | |
width: 100%; | |
} | |
.btn-block + .btn-block { | |
margin-top: 5px; | |
} | |
input[type="submit"].btn-block, | |
input[type="reset"].btn-block, | |
input[type="button"].btn-block { | |
width: 100%; | |
} | |
.btn-group, | |
.btn-group-vertical { | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.btn-group > .btn, | |
.btn-group-vertical > .btn { | |
position: relative; | |
float: left; | |
} | |
.btn-group > .btn:hover, | |
.btn-group-vertical > .btn:hover, | |
.btn-group > .btn:focus, | |
.btn-group-vertical > .btn:focus, | |
.btn-group > .btn:active, | |
.btn-group-vertical > .btn:active, | |
.btn-group > .btn.active, | |
.btn-group-vertical > .btn.active { | |
z-index: 2; | |
} | |
.btn-group .btn + .btn, | |
.btn-group .btn + .btn-group, | |
.btn-group .btn-group + .btn, | |
.btn-group .btn-group + .btn-group { | |
margin-left: -1px; | |
} | |
.btn-toolbar { | |
margin-left: -5px; | |
} | |
.btn-toolbar .btn, | |
.btn-toolbar .btn-group, | |
.btn-toolbar .input-group { | |
float: left; | |
} | |
.btn-toolbar > .btn, | |
.btn-toolbar > .btn-group, | |
.btn-toolbar > .input-group { | |
margin-left: 5px; | |
} | |
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { | |
border-radius: 0; | |
} | |
.btn-group > .btn:first-child { | |
margin-left: 0; | |
} | |
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} | |
.btn-group > .btn:last-child:not(:first-child), | |
.btn-group > .dropdown-toggle:not(:first-child) { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
} | |
.btn-group > .btn-group { | |
float: left; | |
} | |
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { | |
border-radius: 0; | |
} | |
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, | |
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} | |
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
} | |
.btn-group .dropdown-toggle:active, | |
.btn-group.open .dropdown-toggle { | |
outline: 0; | |
} | |
.btn-group > .btn + .dropdown-toggle { | |
padding-left: 8px; | |
padding-right: 8px; | |
} | |
.btn-group > .btn-lg + .dropdown-toggle { | |
padding-left: 12px; | |
padding-right: 12px; | |
} | |
.btn-group.open .dropdown-toggle { | |
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
} | |
.btn-group.open .dropdown-toggle.btn-link { | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.btn .caret { | |
margin-left: 0; | |
} | |
.btn-lg .caret { | |
border-width: 5px 5px 0; | |
border-bottom-width: 0; | |
} | |
.dropup .btn-lg .caret { | |
border-width: 0 5px 5px; | |
} | |
.btn-group-vertical > .btn, | |
.btn-group-vertical > .btn-group, | |
.btn-group-vertical > .btn-group > .btn { | |
display: block; | |
float: none; | |
width: 100%; | |
max-width: 100%; | |
} | |
.btn-group-vertical > .btn-group > .btn { | |
float: none; | |
} | |
.btn-group-vertical > .btn + .btn, | |
.btn-group-vertical > .btn + .btn-group, | |
.btn-group-vertical > .btn-group + .btn, | |
.btn-group-vertical > .btn-group + .btn-group { | |
margin-top: -1px; | |
margin-left: 0; | |
} | |
.btn-group-vertical > .btn:not(:first-child):not(:last-child) { | |
border-radius: 0; | |
} | |
.btn-group-vertical > .btn:first-child:not(:last-child) { | |
border-top-right-radius: 4px; | |
border-top-left-radius: 4px; | |
border-bottom-right-radius: 0; | |
border-bottom-left-radius: 0; | |
} | |
.btn-group-vertical > .btn:last-child:not(:first-child) { | |
border-top-right-radius: 0; | |
border-top-left-radius: 0; | |
border-bottom-right-radius: 4px; | |
border-bottom-left-radius: 4px; | |
} | |
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { | |
border-radius: 0; | |
} | |
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, | |
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { | |
border-bottom-right-radius: 0; | |
border-bottom-left-radius: 0; | |
} | |
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { | |
border-top-right-radius: 0; | |
border-top-left-radius: 0; | |
} | |
.btn-group-justified { | |
display: table; | |
width: 100%; | |
table-layout: fixed; | |
border-collapse: separate; | |
} | |
.btn-group-justified > .btn, | |
.btn-group-justified > .btn-group { | |
float: none; | |
display: table-cell; | |
width: 1%; | |
} | |
.btn-group-justified > .btn-group .btn { | |
width: 100%; | |
} | |
.btn-group-justified > .btn-group .dropdown-menu { | |
left: auto; | |
} | |
[data-toggle="buttons"] > .btn input[type="radio"], | |
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"], | |
[data-toggle="buttons"] > .btn input[type="checkbox"], | |
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { | |
position: absolute; | |
clip: rect(0, 0, 0, 0); | |
pointer-events: none; | |
} | |
.input-group { | |
position: relative; | |
display: table; | |
border-collapse: separate; | |
} | |
.input-group[class*="col-"] { | |
float: none; | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.input-group .form-control { | |
position: relative; | |
z-index: 2; | |
float: left; | |
width: 100%; | |
margin-bottom: 0; | |
} | |
.input-group .form-control:focus { | |
z-index: 3; | |
} | |
.input-group-lg > .form-control, | |
.input-group-lg > .input-group-addon, | |
.input-group-lg > .input-group-btn > .btn { | |
height: 46px; | |
padding: 10px 16px; | |
font-size: 18px; | |
line-height: 1.3333333; | |
border-radius: 6px; | |
} | |
select.input-group-lg > .form-control, | |
select.input-group-lg > .input-group-addon, | |
select.input-group-lg > .input-group-btn > .btn { | |
height: 46px; | |
line-height: 46px; | |
} | |
textarea.input-group-lg > .form-control, | |
textarea.input-group-lg > .input-group-addon, | |
textarea.input-group-lg > .input-group-btn > .btn, | |
select[multiple].input-group-lg > .form-control, | |
select[multiple].input-group-lg > .input-group-addon, | |
select[multiple].input-group-lg > .input-group-btn > .btn { | |
height: auto; | |
} | |
.input-group-sm > .form-control, | |
.input-group-sm > .input-group-addon, | |
.input-group-sm > .input-group-btn > .btn { | |
height: 30px; | |
padding: 5px 10px; | |
font-size: 12px; | |
line-height: 1.5; | |
border-radius: 3px; | |
} | |
select.input-group-sm > .form-control, | |
select.input-group-sm > .input-group-addon, | |
select.input-group-sm > .input-group-btn > .btn { | |
height: 30px; | |
line-height: 30px; | |
} | |
textarea.input-group-sm > .form-control, | |
textarea.input-group-sm > .input-group-addon, | |
textarea.input-group-sm > .input-group-btn > .btn, | |
select[multiple].input-group-sm > .form-control, | |
select[multiple].input-group-sm > .input-group-addon, | |
select[multiple].input-group-sm > .input-group-btn > .btn { | |
height: auto; | |
} | |
.input-group-addon, | |
.input-group-btn, | |
.input-group .form-control { | |
display: table-cell; | |
} | |
.input-group-addon:not(:first-child):not(:last-child), | |
.input-group-btn:not(:first-child):not(:last-child), | |
.input-group .form-control:not(:first-child):not(:last-child) { | |
border-radius: 0; | |
} | |
.input-group-addon, | |
.input-group-btn { | |
width: 1%; | |
white-space: nowrap; | |
vertical-align: middle; | |
} | |
.input-group-addon { | |
padding: 6px 12px; | |
font-size: 14px; | |
font-weight: normal; | |
line-height: 1; | |
color: #212121; | |
text-align: center; | |
background-color: #EEEEEE; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
} | |
.input-group-addon.input-sm { | |
padding: 5px 10px; | |
font-size: 12px; | |
border-radius: 3px; | |
} | |
.input-group-addon.input-lg { | |
padding: 10px 16px; | |
font-size: 18px; | |
border-radius: 6px; | |
} | |
.input-group-addon input[type="radio"], | |
.input-group-addon input[type="checkbox"] { | |
margin-top: 0; | |
} | |
.input-group .form-control:first-child, | |
.input-group-addon:first-child, | |
.input-group-btn:first-child > .btn, | |
.input-group-btn:first-child > .btn-group > .btn, | |
.input-group-btn:first-child > .dropdown-toggle, | |
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), | |
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
} | |
.input-group-addon:first-child { | |
border-right: 0; | |
} | |
.input-group .form-control:last-child, | |
.input-group-addon:last-child, | |
.input-group-btn:last-child > .btn, | |
.input-group-btn:last-child > .btn-group > .btn, | |
.input-group-btn:last-child > .dropdown-toggle, | |
.input-group-btn:first-child > .btn:not(:first-child), | |
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
} | |
.input-group-addon:last-child { | |
border-left: 0; | |
} | |
.input-group-btn { | |
position: relative; | |
font-size: 0; | |
white-space: nowrap; | |
} | |
.input-group-btn > .btn { | |
position: relative; | |
} | |
.input-group-btn > .btn + .btn { | |
margin-left: -1px; | |
} | |
.input-group-btn > .btn:hover, | |
.input-group-btn > .btn:focus, | |
.input-group-btn > .btn:active { | |
z-index: 2; | |
} | |
.input-group-btn:first-child > .btn, | |
.input-group-btn:first-child > .btn-group { | |
margin-right: -1px; | |
} | |
.input-group-btn:last-child > .btn, | |
.input-group-btn:last-child > .btn-group { | |
z-index: 2; | |
margin-left: -1px; | |
} | |
table { | |
background-color: transparent; | |
} | |
caption { | |
padding-top: 8px; | |
padding-bottom: 8px; | |
color: #616161; | |
text-align: left; | |
} | |
th { | |
text-align: left; | |
} | |
.table { | |
width: 100%; | |
max-width: 100%; | |
margin-bottom: 20px; | |
} | |
.table > thead > tr > th, | |
.table > tbody > tr > th, | |
.table > tfoot > tr > th, | |
.table > thead > tr > td, | |
.table > tbody > tr > td, | |
.table > tfoot > tr > td { | |
padding: 8px; | |
line-height: 1.42857143; | |
vertical-align: top; | |
border-top: 1px solid #ddd; | |
} | |
.table > thead > tr > th { | |
vertical-align: bottom; | |
border-bottom: 2px solid #ddd; | |
} | |
.table > caption + thead > tr:first-child > th, | |
.table > colgroup + thead > tr:first-child > th, | |
.table > thead:first-child > tr:first-child > th, | |
.table > caption + thead > tr:first-child > td, | |
.table > colgroup + thead > tr:first-child > td, | |
.table > thead:first-child > tr:first-child > td { | |
border-top: 0; | |
} | |
.table > tbody + tbody { | |
border-top: 2px solid #ddd; | |
} | |
.table .table { | |
background-color: #fff; | |
} | |
.table-condensed > thead > tr > th, | |
.table-condensed > tbody > tr > th, | |
.table-condensed > tfoot > tr > th, | |
.table-condensed > thead > tr > td, | |
.table-condensed > tbody > tr > td, | |
.table-condensed > tfoot > tr > td { | |
padding: 5px; | |
} | |
.table-bordered { | |
border: 1px solid #ddd; | |
} | |
.table-bordered > thead > tr > th, | |
.table-bordered > tbody > tr > th, | |
.table-bordered > tfoot > tr > th, | |
.table-bordered > thead > tr > td, | |
.table-bordered > tbody > tr > td, | |
.table-bordered > tfoot > tr > td { | |
border: 1px solid #ddd; | |
} | |
.table-bordered > thead > tr > th, | |
.table-bordered > thead > tr > td { | |
border-bottom-width: 2px; | |
} | |
.table-striped > tbody > tr:nth-of-type(odd) { | |
background-color: #f9f9f9; | |
} | |
.table-hover > tbody > tr:hover { | |
background-color: #f5f5f5; | |
} | |
table col[class*="col-"] { | |
position: static; | |
float: none; | |
display: table-column; | |
} | |
table td[class*="col-"], | |
table th[class*="col-"] { | |
position: static; | |
float: none; | |
display: table-cell; | |
} | |
.table > thead > tr > td.active, | |
.table > tbody > tr > td.active, | |
.table > tfoot > tr > td.active, | |
.table > thead > tr > th.active, | |
.table > tbody > tr > th.active, | |
.table > tfoot > tr > th.active, | |
.table > thead > tr.active > td, | |
.table > tbody > tr.active > td, | |
.table > tfoot > tr.active > td, | |
.table > thead > tr.active > th, | |
.table > tbody > tr.active > th, | |
.table > tfoot > tr.active > th { | |
background-color: #f5f5f5; | |
} | |
.table-hover > tbody > tr > td.active:hover, | |
.table-hover > tbody > tr > th.active:hover, | |
.table-hover > tbody > tr.active:hover > td, | |
.table-hover > tbody > tr:hover > .active, | |
.table-hover > tbody > tr.active:hover > th { | |
background-color: #e8e8e8; | |
} | |
.table > thead > tr > td.success, | |
.table > tbody > tr > td.success, | |
.table > tfoot > tr > td.success, | |
.table > thead > tr > th.success, | |
.table > tbody > tr > th.success, | |
.table > tfoot > tr > th.success, | |
.table > thead > tr.success > td, | |
.table > tbody > tr.success > td, | |
.table > tfoot > tr.success > td, | |
.table > thead > tr.success > th, | |
.table > tbody > tr.success > th, | |
.table > tfoot > tr.success > th { | |
background-color: #dff0d8; | |
} | |
.table-hover > tbody > tr > td.success:hover, | |
.table-hover > tbody > tr > th.success:hover, | |
.table-hover > tbody > tr.success:hover > td, | |
.table-hover > tbody > tr:hover > .success, | |
.table-hover > tbody > tr.success:hover > th { | |
background-color: #d0e9c6; | |
} | |
.table > thead > tr > td.info, | |
.table > tbody > tr > td.info, | |
.table > tfoot > tr > td.info, | |
.table > thead > tr > th.info, | |
.table > tbody > tr > th.info, | |
.table > tfoot > tr > th.info, | |
.table > thead > tr.info > td, | |
.table > tbody > tr.info > td, | |
.table > tfoot > tr.info > td, | |
.table > thead > tr.info > th, | |
.table > tbody > tr.info > th, | |
.table > tfoot > tr.info > th { | |
background-color: #d9edf7; | |
} | |
.table-hover > tbody > tr > td.info:hover, | |
.table-hover > tbody > tr > th.info:hover, | |
.table-hover > tbody > tr.info:hover > td, | |
.table-hover > tbody > tr:hover > .info, | |
.table-hover > tbody > tr.info:hover > th { | |
background-color: #c4e3f3; | |
} | |
.table > thead > tr > td.warning, | |
.table > tbody > tr > td.warning, | |
.table > tfoot > tr > td.warning, | |
.table > thead > tr > th.warning, | |
.table > tbody > tr > th.warning, | |
.table > tfoot > tr > th.warning, | |
.table > thead > tr.warning > td, | |
.table > tbody > tr.warning > td, | |
.table > tfoot > tr.warning > td, | |
.table > thead > tr.warning > th, | |
.table > tbody > tr.warning > th, | |
.table > tfoot > tr.warning > th { | |
background-color: #fcf8e3; | |
} | |
.table-hover > tbody > tr > td.warning:hover, | |
.table-hover > tbody > tr > th.warning:hover, | |
.table-hover > tbody > tr.warning:hover > td, | |
.table-hover > tbody > tr:hover > .warning, | |
.table-hover > tbody > tr.warning:hover > th { | |
background-color: #faf2cc; | |
} | |
.table > thead > tr > td.danger, | |
.table > tbody > tr > td.danger, | |
.table > tfoot > tr > td.danger, | |
.table > thead > tr > th.danger, | |
.table > tbody > tr > th.danger, | |
.table > tfoot > tr > th.danger, | |
.table > thead > tr.danger > td, | |
.table > tbody > tr.danger > td, | |
.table > tfoot > tr.danger > td, | |
.table > thead > tr.danger > th, | |
.table > tbody > tr.danger > th, | |
.table > tfoot > tr.danger > th { | |
background-color: #f2dede; | |
} | |
.table-hover > tbody > tr > td.danger:hover, | |
.table-hover > tbody > tr > th.danger:hover, | |
.table-hover > tbody > tr.danger:hover > td, | |
.table-hover > tbody > tr:hover > .danger, | |
.table-hover > tbody > tr.danger:hover > th { | |
background-color: #ebcccc; | |
} | |
.table-responsive { | |
overflow-x: auto; | |
min-height: 0.01%; | |
} | |
@media screen and (max-width: 767px) { | |
.table-responsive { | |
width: 100%; | |
margin-bottom: 15px; | |
overflow-y: hidden; | |
-ms-overflow-style: -ms-autohiding-scrollbar; | |
border: 1px solid #ddd; | |
} | |
.table-responsive > .table { | |
margin-bottom: 0; | |
} | |
.table-responsive > .table > thead > tr > th, | |
.table-responsive > .table > tbody > tr > th, | |
.table-responsive > .table > tfoot > tr > th, | |
.table-responsive > .table > thead > tr > td, | |
.table-responsive > .table > tbody > tr > td, | |
.table-responsive > .table > tfoot > tr > td { | |
white-space: nowrap; | |
} | |
.table-responsive > .table-bordered { | |
border: 0; | |
} | |
.table-responsive > .table-bordered > thead > tr > th:first-child, | |
.table-responsive > .table-bordered > tbody > tr > th:first-child, | |
.table-responsive > .table-bordered > tfoot > tr > th:first-child, | |
.table-responsive > .table-bordered > thead > tr > td:first-child, | |
.table-responsive > .table-bordered > tbody > tr > td:first-child, | |
.table-responsive > .table-bordered > tfoot > tr > td:first-child { | |
border-left: 0; | |
} | |
.table-responsive > .table-bordered > thead > tr > th:last-child, | |
.table-responsive > .table-bordered > tbody > tr > th:last-child, | |
.table-responsive > .table-bordered > tfoot > tr > th:last-child, | |
.table-responsive > .table-bordered > thead > tr > td:last-child, | |
.table-responsive > .table-bordered > tbody > tr > td:last-child, | |
.table-responsive > .table-bordered > tfoot > tr > td:last-child { | |
border-right: 0; | |
} | |
.table-responsive > .table-bordered > tbody > tr:last-child > th, | |
.table-responsive > .table-bordered > tfoot > tr:last-child > th, | |
.table-responsive > .table-bordered > tbody > tr:last-child > td, | |
.table-responsive > .table-bordered > tfoot > tr:last-child > td { | |
border-bottom: 0; | |
} | |
} | |
@font-face { | |
font-family: 'Glyphicons Halflings'; | |
src: url('node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot'); | |
src: url('node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('node_modules/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('node_modules/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); | |
} | |
.glyphicon { | |
position: relative; | |
top: 1px; | |
display: inline-block; | |
font-family: 'Glyphicons Halflings'; | |
font-style: normal; | |
font-weight: normal; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.glyphicon-asterisk:before { | |
content: "\002a"; | |
} | |
.glyphicon-plus:before { | |
content: "\002b"; | |
} | |
.glyphicon-euro:before, | |
.glyphicon-eur:before { | |
content: "\20ac"; | |
} | |
.glyphicon-minus:before { | |
content: "\2212"; | |
} | |
.glyphicon-cloud:before { | |
content: "\2601"; | |
} | |
.glyphicon-envelope:before { | |
content: "\2709"; | |
} | |
.glyphicon-pencil:before { | |
content: "\270f"; | |
} | |
.glyphicon-glass:before { | |
content: "\e001"; | |
} | |
.glyphicon-music:before { | |
content: "\e002"; | |
} | |
.glyphicon-search:before { | |
content: "\e003"; | |
} | |
.glyphicon-heart:before { | |
content: "\e005"; | |
} | |
.glyphicon-star:before { | |
content: "\e006"; | |
} | |
.glyphicon-star-empty:before { | |
content: "\e007"; | |
} | |
.glyphicon-user:before { | |
content: "\e008"; | |
} | |
.glyphicon-film:before { | |
content: "\e009"; | |
} | |
.glyphicon-th-large:before { | |
content: "\e010"; | |
} | |
.glyphicon-th:before { | |
content: "\e011"; | |
} | |
.glyphicon-th-list:before { | |
content: "\e012"; | |
} | |
.glyphicon-ok:before { | |
content: "\e013"; | |
} | |
.glyphicon-remove:before { | |
content: "\e014"; | |
} | |
.glyphicon-zoom-in:before { | |
content: "\e015"; | |
} | |
.glyphicon-zoom-out:before { | |
content: "\e016"; | |
} | |
.glyphicon-off:before { | |
content: "\e017"; | |
} | |
.glyphicon-signal:before { | |
content: "\e018"; | |
} | |
.glyphicon-cog:before { | |
content: "\e019"; | |
} | |
.glyphicon-trash:before { | |
content: "\e020"; | |
} | |
.glyphicon-home:before { | |
content: "\e021"; | |
} | |
.glyphicon-file:before { | |
content: "\e022"; | |
} | |
.glyphicon-time:before { | |
content: "\e023"; | |
} | |
.glyphicon-road:before { | |
content: "\e024"; | |
} | |
.glyphicon-download-alt:before { | |
content: "\e025"; | |
} | |
.glyphicon-download:before { | |
content: "\e026"; | |
} | |
.glyphicon-upload:before { | |
content: "\e027"; | |
} | |
.glyphicon-inbox:before { | |
content: "\e028"; | |
} | |
.glyphicon-play-circle:before { | |
content: "\e029"; | |
} | |
.glyphicon-repeat:before { | |
content: "\e030"; | |
} | |
.glyphicon-refresh:before { | |
content: "\e031"; | |
} | |
.glyphicon-list-alt:before { | |
content: "\e032"; | |
} | |
.glyphicon-lock:before { | |
content: "\e033"; | |
} | |
.glyphicon-flag:before { | |
content: "\e034"; | |
} | |
.glyphicon-headphones:before { | |
content: "\e035"; | |
} | |
.glyphicon-volume-off:before { | |
content: "\e036"; | |
} | |
.glyphicon-volume-down:before { | |
content: "\e037"; | |
} | |
.glyphicon-volume-up:before { | |
content: "\e038"; | |
} | |
.glyphicon-qrcode:before { | |
content: "\e039"; | |
} | |
.glyphicon-barcode:before { | |
content: "\e040"; | |
} | |
.glyphicon-tag:before { | |
content: "\e041"; | |
} | |
.glyphicon-tags:before { | |
content: "\e042"; | |
} | |
.glyphicon-book:before { | |
content: "\e043"; | |
} | |
.glyphicon-bookmark:before { | |
content: "\e044"; | |
} | |
.glyphicon-print:before { | |
content: "\e045"; | |
} | |
.glyphicon-camera:before { | |
content: "\e046"; | |
} | |
.glyphicon-font:before { | |
content: "\e047"; | |
} | |
.glyphicon-bold:before { | |
content: "\e048"; | |
} | |
.glyphicon-italic:before { | |
content: "\e049"; | |
} | |
.glyphicon-text-height:before { | |
content: "\e050"; | |
} | |
.glyphicon-text-width:before { | |
content: "\e051"; | |
} | |
.glyphicon-align-left:before { | |
content: "\e052"; | |
} | |
.glyphicon-align-center:before { | |
content: "\e053"; | |
} | |
.glyphicon-align-right:before { | |
content: "\e054"; | |
} | |
.glyphicon-align-justify:before { | |
content: "\e055"; | |
} | |
.glyphicon-list:before { | |
content: "\e056"; | |
} | |
.glyphicon-indent-left:before { | |
content: "\e057"; | |
} | |
.glyphicon-indent-right:before { | |
content: "\e058"; | |
} | |
.glyphicon-facetime-video:before { | |
content: "\e059"; | |
} | |
.glyphicon-picture:before { | |
content: "\e060"; | |
} | |
.glyphicon-map-marker:before { | |
content: "\e062"; | |
} | |
.glyphicon-adjust:before { | |
content: "\e063"; | |
} | |
.glyphicon-tint:before { | |
content: "\e064"; | |
} | |
.glyphicon-edit:before { | |
content: "\e065"; | |
} | |
.glyphicon-share:before { | |
content: "\e066"; | |
} | |
.glyphicon-check:before { | |
content: "\e067"; | |
} | |
.glyphicon-move:before { | |
content: "\e068"; | |
} | |
.glyphicon-step-backward:before { | |
content: "\e069"; | |
} | |
.glyphicon-fast-backward:before { | |
content: "\e070"; | |
} | |
.glyphicon-backward:before { | |
content: "\e071"; | |
} | |
.glyphicon-play:before { | |
content: "\e072"; | |
} | |
.glyphicon-pause:before { | |
content: "\e073"; | |
} | |
.glyphicon-stop:before { | |
content: "\e074"; | |
} | |
.glyphicon-forward:before { | |
content: "\e075"; | |
} | |
.glyphicon-fast-forward:before { | |
content: "\e076"; | |
} | |
.glyphicon-step-forward:before { | |
content: "\e077"; | |
} | |
.glyphicon-eject:before { | |
content: "\e078"; | |
} | |
.glyphicon-chevron-left:before { | |
content: "\e079"; | |
} | |
.glyphicon-chevron-right:before { | |
content: "\e080"; | |
} | |
.glyphicon-plus-sign:before { | |
content: "\e081"; | |
} | |
.glyphicon-minus-sign:before { | |
content: "\e082"; | |
} | |
.glyphicon-remove-sign:before { | |
content: "\e083"; | |
} | |
.glyphicon-ok-sign:before { | |
content: "\e084"; | |
} | |
.glyphicon-question-sign:before { | |
content: "\e085"; | |
} | |
.glyphicon-info-sign:before { | |
content: "\e086"; | |
} | |
.glyphicon-screenshot:before { | |
content: "\e087"; | |
} | |
.glyphicon-remove-circle:before { | |
content: "\e088"; | |
} | |
.glyphicon-ok-circle:before { | |
content: "\e089"; | |
} | |
.glyphicon-ban-circle:before { | |
content: "\e090"; | |
} | |
.glyphicon-arrow-left:before { | |
content: "\e091"; | |
} | |
.glyphicon-arrow-right:before { | |
content: "\e092"; | |
} | |
.glyphicon-arrow-up:before { | |
content: "\e093"; | |
} | |
.glyphicon-arrow-down:before { | |
content: "\e094"; | |
} | |
.glyphicon-share-alt:before { | |
content: "\e095"; | |
} | |
.glyphicon-resize-full:before { | |
content: "\e096"; | |
} | |
.glyphicon-resize-small:before { | |
content: "\e097"; | |
} | |
.glyphicon-exclamation-sign:before { | |
content: "\e101"; | |
} | |
.glyphicon-gift:before { | |
content: "\e102"; | |
} | |
.glyphicon-leaf:before { | |
content: "\e103"; | |
} | |
.glyphicon-fire:before { | |
content: "\e104"; | |
} | |
.glyphicon-eye-open:before { | |
content: "\e105"; | |
} | |
.glyphicon-eye-close:before { | |
content: "\e106"; | |
} | |
.glyphicon-warning-sign:before { | |
content: "\e107"; | |
} | |
.glyphicon-plane:before { | |
content: "\e108"; | |
} | |
.glyphicon-calendar:before { | |
content: "\e109"; | |
} | |
.glyphicon-random:before { | |
content: "\e110"; | |
} | |
.glyphicon-comment:before { | |
content: "\e111"; | |
} | |
.glyphicon-magnet:before { | |
content: "\e112"; | |
} | |
.glyphicon-chevron-up:before { | |
content: "\e113"; | |
} | |
.glyphicon-chevron-down:before { | |
content: "\e114"; | |
} | |
.glyphicon-retweet:before { | |
content: "\e115"; | |
} | |
.glyphicon-shopping-cart:before { | |
content: "\e116"; | |
} | |
.glyphicon-folder-close:before { | |
content: "\e117"; | |
} | |
.glyphicon-folder-open:before { | |
content: "\e118"; | |
} | |
.glyphicon-resize-vertical:before { | |
content: "\e119"; | |
} | |
.glyphicon-resize-horizontal:before { | |
content: "\e120"; | |
} | |
.glyphicon-hdd:before { | |
content: "\e121"; | |
} | |
.glyphicon-bullhorn:before { | |
content: "\e122"; | |
} | |
.glyphicon-bell:before { | |
content: "\e123"; | |
} | |
.glyphicon-certificate:before { | |
content: "\e124"; | |
} | |
.glyphicon-thumbs-up:before { | |
content: "\e125"; | |
} | |
.glyphicon-thumbs-down:before { | |
content: "\e126"; | |
} | |
.glyphicon-hand-right:before { | |
content: "\e127"; | |
} | |
.glyphicon-hand-left:before { | |
content: "\e128"; | |
} | |
.glyphicon-hand-up:before { | |
content: "\e129"; | |
} | |
.glyphicon-hand-down:before { | |
content: "\e130"; | |
} | |
.glyphicon-circle-arrow-right:before { | |
content: "\e131"; | |
} | |
.glyphicon-circle-arrow-left:before { | |
content: "\e132"; | |
} | |
.glyphicon-circle-arrow-up:before { | |
content: "\e133"; | |
} | |
.glyphicon-circle-arrow-down:before { | |
content: "\e134"; | |
} | |
.glyphicon-globe:before { | |
content: "\e135"; | |
} | |
.glyphicon-wrench:before { | |
content: "\e136"; | |
} | |
.glyphicon-tasks:before { | |
content: "\e137"; | |
} | |
.glyphicon-filter:before { | |
content: "\e138"; | |
} | |
.glyphicon-briefcase:before { | |
content: "\e139"; | |
} | |
.glyphicon-fullscreen:before { | |
content: "\e140"; | |
} | |
.glyphicon-dashboard:before { | |
content: "\e141"; | |
} | |
.glyphicon-paperclip:before { | |
content: "\e142"; | |
} | |
.glyphicon-heart-empty:before { | |
content: "\e143"; | |
} | |
.glyphicon-link:before { | |
content: "\e144"; | |
} | |
.glyphicon-phone:before { | |
content: "\e145"; | |
} | |
.glyphicon-pushpin:before { | |
content: "\e146"; | |
} | |
.glyphicon-usd:before { | |
content: "\e148"; | |
} | |
.glyphicon-gbp:before { | |
content: "\e149"; | |
} | |
.glyphicon-sort:before { | |
content: "\e150"; | |
} | |
.glyphicon-sort-by-alphabet:before { | |
content: "\e151"; | |
} | |
.glyphicon-sort-by-alphabet-alt:before { | |
content: "\e152"; | |
} | |
.glyphicon-sort-by-order:before { | |
content: "\e153"; | |
} | |
.glyphicon-sort-by-order-alt:before { | |
content: "\e154"; | |
} | |
.glyphicon-sort-by-attributes:before { | |
content: "\e155"; | |
} | |
.glyphicon-sort-by-attributes-alt:before { | |
content: "\e156"; | |
} | |
.glyphicon-unchecked:before { | |
content: "\e157"; | |
} | |
.glyphicon-expand:before { | |
content: "\e158"; | |
} | |
.glyphicon-collapse-down:before { | |
content: "\e159"; | |
} | |
.glyphicon-collapse-up:before { | |
content: "\e160"; | |
} | |
.glyphicon-log-in:before { | |
content: "\e161"; | |
} | |
.glyphicon-flash:before { | |
content: "\e162"; | |
} | |
.glyphicon-log-out:before { | |
content: "\e163"; | |
} | |
.glyphicon-new-window:before { | |
content: "\e164"; | |
} | |
.glyphicon-record:before { | |
content: "\e165"; | |
} | |
.glyphicon-save:before { | |
content: "\e166"; | |
} | |
.glyphicon-open:before { | |
content: "\e167"; | |
} | |
.glyphicon-saved:before { | |
content: "\e168"; | |
} | |
.glyphicon-import:before { | |
content: "\e169"; | |
} | |
.glyphicon-export:before { | |
content: "\e170"; | |
} | |
.glyphicon-send:before { | |
content: "\e171"; | |
} | |
.glyphicon-floppy-disk:before { | |
content: "\e172"; | |
} | |
.glyphicon-floppy-saved:before { | |
content: "\e173"; | |
} | |
.glyphicon-floppy-remove:before { | |
content: "\e174"; | |
} | |
.glyphicon-floppy-save:before { | |
content: "\e175"; | |
} | |
.glyphicon-floppy-open:before { | |
content: "\e176"; | |
} | |
.glyphicon-credit-card:before { | |
content: "\e177"; | |
} | |
.glyphicon-transfer:before { | |
content: "\e178"; | |
} | |
.glyphicon-cutlery:before { | |
content: "\e179"; | |
} | |
.glyphicon-header:before { | |
content: "\e180"; | |
} | |
.glyphicon-compressed:before { | |
content: "\e181"; | |
} | |
.glyphicon-earphone:before { | |
content: "\e182"; | |
} | |
.glyphicon-phone-alt:before { | |
content: "\e183"; | |
} | |
.glyphicon-tower:before { | |
content: "\e184"; | |
} | |
.glyphicon-stats:before { | |
content: "\e185"; | |
} | |
.glyphicon-sd-video:before { | |
content: "\e186"; | |
} | |
.glyphicon-hd-video:before { | |
content: "\e187"; | |
} | |
.glyphicon-subtitles:before { | |
content: "\e188"; | |
} | |
.glyphicon-sound-stereo:before { | |
content: "\e189"; | |
} | |
.glyphicon-sound-dolby:before { | |
content: "\e190"; | |
} | |
.glyphicon-sound-5-1:before { | |
content: "\e191"; | |
} | |
.glyphicon-sound-6-1:before { | |
content: "\e192"; | |
} | |
.glyphicon-sound-7-1:before { | |
content: "\e193"; | |
} | |
.glyphicon-copyright-mark:before { | |
content: "\e194"; | |
} | |
.glyphicon-registration-mark:before { | |
content: "\e195"; | |
} | |
.glyphicon-cloud-download:before { | |
content: "\e197"; | |
} | |
.glyphicon-cloud-upload:before { | |
content: "\e198"; | |
} | |
.glyphicon-tree-conifer:before { | |
content: "\e199"; | |
} | |
.glyphicon-tree-deciduous:before { | |
content: "\e200"; | |
} | |
.glyphicon-cd:before { | |
content: "\e201"; | |
} | |
.glyphicon-save-file:before { | |
content: "\e202"; | |
} | |
.glyphicon-open-file:before { | |
content: "\e203"; | |
} | |
.glyphicon-level-up:before { | |
content: "\e204"; | |
} | |
.glyphicon-copy:before { | |
content: "\e205"; | |
} | |
.glyphicon-paste:before { | |
content: "\e206"; | |
} | |
.glyphicon-alert:before { | |
content: "\e209"; | |
} | |
.glyphicon-equalizer:before { | |
content: "\e210"; | |
} | |
.glyphicon-king:before { | |
content: "\e211"; | |
} | |
.glyphicon-queen:before { | |
content: "\e212"; | |
} | |
.glyphicon-pawn:before { | |
content: "\e213"; | |
} | |
.glyphicon-bishop:before { | |
content: "\e214"; | |
} | |
.glyphicon-knight:before { | |
content: "\e215"; | |
} | |
.glyphicon-baby-formula:before { | |
content: "\e216"; | |
} | |
.glyphicon-tent:before { | |
content: "\26fa"; | |
} | |
.glyphicon-blackboard:before { | |
content: "\e218"; | |
} | |
.glyphicon-bed:before { | |
content: "\e219"; | |
} | |
.glyphicon-apple:before { | |
content: "\f8ff"; | |
} | |
.glyphicon-erase:before { | |
content: "\e221"; | |
} | |
.glyphicon-hourglass:before { | |
content: "\231b"; | |
} | |
.glyphicon-lamp:before { | |
content: "\e223"; | |
} | |
.glyphicon-duplicate:before { | |
content: "\e224"; | |
} | |
.glyphicon-piggy-bank:before { | |
content: "\e225"; | |
} | |
.glyphicon-scissors:before { | |
content: "\e226"; | |
} | |
.glyphicon-bitcoin:before { | |
content: "\e227"; | |
} | |
.glyphicon-btc:before { | |
content: "\e227"; | |
} | |
.glyphicon-xbt:before { | |
content: "\e227"; | |
} | |
.glyphicon-yen:before { | |
content: "\00a5"; | |
} | |
.glyphicon-jpy:before { | |
content: "\00a5"; | |
} | |
.glyphicon-ruble:before { | |
content: "\20bd"; | |
} | |
.glyphicon-rub:before { | |
content: "\20bd"; | |
} | |
.glyphicon-scale:before { | |
content: "\e230"; | |
} | |
.glyphicon-ice-lolly:before { | |
content: "\e231"; | |
} | |
.glyphicon-ice-lolly-tasted:before { | |
content: "\e232"; | |
} | |
.glyphicon-education:before { | |
content: "\e233"; | |
} | |
.glyphicon-option-horizontal:before { | |
content: "\e234"; | |
} | |
.glyphicon-option-vertical:before { | |
content: "\e235"; | |
} | |
.glyphicon-menu-hamburger:before { | |
content: "\e236"; | |
} | |
.glyphicon-modal-window:before { | |
content: "\e237"; | |
} | |
.glyphicon-oil:before { | |
content: "\e238"; | |
} | |
.glyphicon-grain:before { | |
content: "\e239"; | |
} | |
.glyphicon-sunglasses:before { | |
content: "\e240"; | |
} | |
.glyphicon-text-size:before { | |
content: "\e241"; | |
} | |
.glyphicon-text-color:before { | |
content: "\e242"; | |
} | |
.glyphicon-text-background:before { | |
content: "\e243"; | |
} | |
.glyphicon-object-align-top:before { | |
content: "\e244"; | |
} | |
.glyphicon-object-align-bottom:before { | |
content: "\e245"; | |
} | |
.glyphicon-object-align-horizontal:before { | |
content: "\e246"; | |
} | |
.glyphicon-object-align-left:before { | |
content: "\e247"; | |
} | |
.glyphicon-object-align-vertical:before { | |
content: "\e248"; | |
} | |
.glyphicon-object-align-right:before { | |
content: "\e249"; | |
} | |
.glyphicon-triangle-right:before { | |
content: "\e250"; | |
} | |
.glyphicon-triangle-left:before { | |
content: "\e251"; | |
} | |
.glyphicon-triangle-bottom:before { | |
content: "\e252"; | |
} | |
.glyphicon-triangle-top:before { | |
content: "\e253"; | |
} | |
.glyphicon-console:before { | |
content: "\e254"; | |
} | |
.glyphicon-superscript:before { | |
content: "\e255"; | |
} | |
.glyphicon-subscript:before { | |
content: "\e256"; | |
} | |
.glyphicon-menu-left:before { | |
content: "\e257"; | |
} | |
.glyphicon-menu-right:before { | |
content: "\e258"; | |
} | |
.glyphicon-menu-down:before { | |
content: "\e259"; | |
} | |
.glyphicon-menu-up:before { | |
content: "\e260"; | |
} | |
.alert { | |
padding: 15px; | |
margin-bottom: 20px; | |
border: 1px solid transparent; | |
border-radius: 4px; | |
} | |
.alert h4 { | |
margin-top: 0; | |
color: inherit; | |
} | |
.alert .alert-link { | |
font-weight: bold; | |
} | |
.alert > p, | |
.alert > ul { | |
margin-bottom: 0; | |
} | |
.alert > p + p { | |
margin-top: 5px; | |
} | |
.alert-dismissable, | |
.alert-dismissible { | |
padding-right: 35px; | |
} | |
.alert-dismissable .close, | |
.alert-dismissible .close { | |
position: relative; | |
top: -2px; | |
right: -21px; | |
color: inherit; | |
} | |
.alert-success { | |
background-color: #dff0d8; | |
border-color: #d6e9c6; | |
color: #3c763d; | |
} | |
.alert-success hr { | |
border-top-color: #c9e2b3; | |
} | |
.alert-success .alert-link { | |
color: #2b542c; | |
} | |
.alert-info { | |
background-color: #d9edf7; | |
border-color: #bce8f1; | |
color: #31708f; | |
} | |
.alert-info hr { | |
border-top-color: #a6e1ec; | |
} | |
.alert-info .alert-link { | |
color: #245269; | |
} | |
.alert-warning { | |
background-color: #fcf8e3; | |
border-color: #faebcc; | |
color: #8a6d3b; | |
} | |
.alert-warning hr { | |
border-top-color: #f7e1b5; | |
} | |
.alert-warning .alert-link { | |
color: #66512c; | |
} | |
.alert-danger { | |
background-color: #f2dede; | |
border-color: #ebccd1; | |
color: #632827; | |
} | |
.alert-danger hr { | |
border-top-color: #e4b9c0; | |
} | |
.alert-danger .alert-link { | |
color: #3e1919; | |
} | |
.close { | |
float: right; | |
font-size: 21px; | |
font-weight: bold; | |
line-height: 1; | |
color: #000; | |
text-shadow: 0 1px 0 #fff; | |
opacity: 0.2; | |
filter: alpha(opacity=20); | |
} | |
.close:hover, | |
.close:focus { | |
color: #000; | |
text-decoration: none; | |
cursor: pointer; | |
opacity: 0.5; | |
filter: alpha(opacity=50); | |
} | |
button.close { | |
padding: 0; | |
cursor: pointer; | |
background: transparent; | |
border: 0; | |
-webkit-appearance: none; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
.h1, | |
.h2, | |
.h3, | |
.h4, | |
.h5, | |
.h6 { | |
opacity: 0.87; | |
} | |
label { | |
opacity: 0.87; | |
} | |
label input { | |
opacity: 1; | |
} | |
input { | |
opacity: 0.87; | |
} | |
.label-default { | |
opacity: 0.87; | |
} | |
legend { | |
opacity: 0.87; | |
} | |
button { | |
opacity: 0.87; | |
} | |
span, | |
p, | |
dl { | |
opacity: 0.87; | |
} | |
h1 { | |
color: #455A64; | |
font-size: 50px; | |
font-weight: bold; | |
} | |
h2 { | |
color: #455A64; | |
font-size: 30px; | |
font-weight: bold; | |
} | |
h3, | |
legend { | |
font-size: 20px; | |
font-weight: 400; | |
line-height: 40px; | |
} | |
label, | |
.label-default { | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 28px; | |
} | |
input, | |
textarea, | |
select { | |
color: #212121; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 28px; | |
margin-top: 15px; | |
} | |
span, | |
p, | |
dl, | |
.doc-text { | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 28px; | |
} | |
button.btn { | |
font-size: 16px; | |
font-weight: bold; | |
line-height: 28px; | |
} | |
.dl-horizontal dt { | |
text-align: left; | |
} | |
.input-group-btn { | |
padding-top: 15px; | |
} | |
.input-group-btn button.btn { | |
padding-top: 2px; | |
padding-bottom: 3px; | |
} | |
.shadow-1 { | |
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); | |
} | |
.showcase { | |
margin-bottom: 20px; | |
} | |
.showcase .showcase-header { | |
background: #E0E0E0; | |
padding: 32px; | |
} | |
.showcase .showcase-content { | |
padding: 32px; | |
} | |
.main-header { | |
margin-bottom: 40px; | |
} | |
a * { | |
color: inherit; | |
} | |
a *:hover { | |
color: inherit; | |
} | |
input::-webkit-input-placeholder { | |
color: #616161 !important; | |
} | |
input::-moz-placeholder { | |
color: #616161 !important; | |
} | |
label input, | |
label textarea, | |
label select { | |
font-weight: normal; | |
} | |
button.btn.disabled, | |
button.btn[disabled] { | |
color: #FFFFFF; | |
background-color: #000000; | |
} | |
.btn.btn-primary:not(.disabled):not([disabled]):hover, | |
.btn.btn-primary:not(.disabled):not([disabled]):focus { | |
color: #000000; | |
background-color: #EEEEEE; | |
} | |
.btn.btn-default:not(.disabled):not([disabled]):hover, | |
.btn.btn-default:not(.disabled):not([disabled]):focus { | |
color: #000000; | |
background-color: #EEEEEE; | |
} | |
button.btn.disabled:hover, | |
button.btn[disabled]:hover, | |
button.btn.disabled:focus, | |
button.btn[disabled]:focus { | |
color: #FFFFFF; | |
background-color: #000000; | |
} | |
.close, | |
.close:hover, | |
.close:focus { | |
opacity: 1; | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { QuestionService } from './question.service'; | |
@Component({ | |
selector: 'my-app', | |
template: ` | |
<div> | |
<h2>Job Application for Heroes</h2> | |
<dynamic-form [questions]="questions"></dynamic-form> | |
</div> | |
`, | |
providers: [QuestionService] | |
}) | |
export class AppComponent { | |
questions: any[]; | |
constructor(service: QuestionService) { | |
this.questions = service.getQuestions(); | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { BrowserModule } from '@angular/platform-browser'; | |
import { ReactiveFormsModule } from '@angular/forms'; | |
import { NgModule } from '@angular/core'; | |
import { AppComponent } from './app.component'; | |
import { DynamicFormComponent } from './dynamic-form.component'; | |
import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; | |
@NgModule({ | |
imports: [ BrowserModule, ReactiveFormsModule ], | |
declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ], | |
bootstrap: [ AppComponent ] | |
}) | |
export class AppModule { | |
constructor() { | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div [formGroup]="form"> | |
<label [attr.for]="question.key">{{question.label}}</label> | |
<div [ngSwitch]="question.controlType"> | |
<input *ngSwitchCase="'textbox'" [formControlName]="question.key" | |
[id]="question.key" [type]="question.type"> | |
<select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key"> | |
<option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option> | |
</select> | |
</div> | |
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div> | |
</div> | |
<!-- | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, Input } from '@angular/core'; | |
import { FormGroup } from '@angular/forms'; | |
import { QuestionBase } from './question-base'; | |
@Component({ | |
moduleId: module.id, | |
selector: 'df-question', | |
templateUrl: 'dynamic-form-question.component.html' | |
}) | |
export class DynamicFormQuestionComponent { | |
@Input() question: QuestionBase<any>; | |
@Input() form: FormGroup; | |
get isValid() { return this.form.controls[this.question.key].valid; } | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<form (ngSubmit)="onSubmit()" [formGroup]="form"> | |
<div *ngFor="let question of questions" class="form-row"> | |
<df-question [question]="question" [form]="form"></df-question> | |
</div> | |
<div class="form-row"> | |
<button type="submit" [disabled]="!form.valid">Save</button> | |
</div> | |
</form> | |
<div *ngIf="payLoad" class="form-row"> | |
<strong>Saved the following values</strong><br>{{payLoad}} | |
</div> | |
</div> | |
<!-- | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, Input, OnInit } from '@angular/core'; | |
import { FormGroup } from '@angular/forms'; | |
import { QuestionBase } from './question-base'; | |
import { QuestionControlService } from './question-control.service'; | |
@Component({ | |
moduleId: module.id, | |
selector: 'dynamic-form', | |
templateUrl: 'dynamic-form.component.html', | |
providers: [ QuestionControlService ] | |
}) | |
export class DynamicFormComponent implements OnInit { | |
@Input() questions: QuestionBase<any>[] = []; | |
form: FormGroup; | |
payLoad = ''; | |
constructor(private qcs: QuestionControlService) { } | |
ngOnInit() { | |
this.form = this.qcs.toFormGroup(this.questions); | |
} | |
onSubmit() { | |
this.payLoad = JSON.stringify(this.form.value); | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | |
import { AppModule } from './app.module'; | |
platformBrowserDynamic().bootstrapModule(AppModule); | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class QuestionBase<T>{ | |
value: T; | |
key: string; | |
label: string; | |
required: boolean; | |
order: number; | |
controlType: string; | |
constructor(options: { | |
value?: T, | |
key?: string, | |
label?: string, | |
required?: boolean, | |
order?: number, | |
controlType?: string | |
} = {}) { | |
this.value = options.value; | |
this.key = options.key || ''; | |
this.label = options.label || ''; | |
this.required = !!options.required; | |
this.order = options.order === undefined ? 1 : options.order; | |
this.controlType = options.controlType || ''; | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { FormControl, FormGroup, Validators } from '@angular/forms'; | |
import { QuestionBase } from './question-base'; | |
@Injectable() | |
export class QuestionControlService { | |
constructor() { } | |
toFormGroup(questions: QuestionBase<any>[] ) { | |
let group: any = {}; | |
questions.forEach(question => { | |
group[question.key] = question.required ? new FormControl(question.value || '', Validators.required) | |
: new FormControl(question.value || ''); | |
}); | |
return new FormGroup(group); | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { QuestionBase } from './question-base'; | |
export class DropdownQuestion extends QuestionBase<string> { | |
controlType = 'dropdown'; | |
options: {key: string, value: string}[] = []; | |
constructor(options: {} = {}) { | |
super(options); | |
this.options = options['options'] || []; | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { QuestionBase } from './question-base'; | |
export class TextboxQuestion extends QuestionBase<string> { | |
controlType = 'textbox'; | |
type: string; | |
constructor(options: {} = {}) { | |
super(options); | |
this.type = options['type'] || ''; | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
import { DropdownQuestion } from './question-dropdown'; | |
import { QuestionBase } from './question-base'; | |
import { TextboxQuestion } from './question-textbox'; | |
@Injectable() | |
export class QuestionService { | |
// Todo: get from a remote source of question metadata | |
// Todo: make asynchronous | |
getQuestions() { | |
let questions: QuestionBase<any>[] = [ | |
new DropdownQuestion({ | |
key: 'brave', | |
label: 'Bravery Rating', | |
options: [ | |
{key: 'solid', value: 'Solid'}, | |
{key: 'great', value: 'Great'}, | |
{key: 'good', value: 'Good'}, | |
{key: 'unproven', value: 'Unproven'} | |
], | |
order: 3 | |
}), | |
new TextboxQuestion({ | |
key: 'firstName', | |
label: 'First name', | |
value: 'Bombasto', | |
required: true, | |
order: 1 | |
}), | |
new TextboxQuestion({ | |
key: 'emailAddress', | |
label: 'Email', | |
type: 'email', | |
order: 2 | |
}) | |
]; | |
return questions.sort((a, b) => a.order - b.order); | |
} | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<script>document.write('<base href="' + document.location + '" />');</script> | |
<title>Dynamic Form</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="styles.css"> | |
<link rel="stylesheet" href="sample.css"> | |
<!-- Polyfill(s) for older browsers --> | |
<script src="https://unpkg.com/core-js/client/shim.min.js"></script> | |
<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script> | |
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script> | |
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script> | |
<script src="systemjs.config.js"></script> | |
<script> | |
System.import('app').catch(function(err){ console.error(err); }); | |
</script> | |
</head> | |
<body> | |
<my-app>Loading app...</my-app> | |
</body> | |
</html> | |
<!-- | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.errorMessage{ | |
color:red; | |
} | |
.form-row{ | |
margin-top: 10px; | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Master Styles */ | |
h1 { | |
color: #369; | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 250%; | |
} | |
h2, h3 { | |
color: #444; | |
font-family: Arial, Helvetica, sans-serif; | |
font-weight: lighter; | |
} | |
body { | |
margin: 2em; | |
} | |
body, input[text], button { | |
color: #888; | |
font-family: Cambria, Georgia; | |
} | |
a { | |
cursor: pointer; | |
cursor: hand; | |
} | |
button { | |
font-family: Arial; | |
background-color: #eee; | |
border: none; | |
padding: 5px 10px; | |
border-radius: 4px; | |
cursor: pointer; | |
cursor: hand; | |
} | |
button:hover { | |
background-color: #cfd8dc; | |
} | |
button:disabled { | |
background-color: #eee; | |
color: #aaa; | |
cursor: auto; | |
} | |
/* Navigation link styles */ | |
nav a { | |
padding: 5px 10px; | |
text-decoration: none; | |
margin-top: 10px; | |
display: inline-block; | |
background-color: #eee; | |
border-radius: 4px; | |
} | |
nav a:visited, a:link { | |
color: #607D8B; | |
} | |
nav a:hover { | |
color: #039be5; | |
background-color: #CFD8DC; | |
} | |
nav a.active { | |
color: #039be5; | |
} | |
/* items class */ | |
.items { | |
margin: 0 0 2em 0; | |
list-style-type: none; | |
padding: 0; | |
width: 24em; | |
} | |
.items li { | |
cursor: pointer; | |
position: relative; | |
left: 0; | |
background-color: #EEE; | |
margin: .5em; | |
padding: .3em 0; | |
height: 1.6em; | |
border-radius: 4px; | |
} | |
.items li:hover { | |
color: #607D8B; | |
background-color: #DDD; | |
left: .1em; | |
} | |
.items li.selected:hover { | |
background-color: #BBD8DC; | |
color: white; | |
} | |
.items .text { | |
position: relative; | |
top: -3px; | |
} | |
.items { | |
margin: 0 0 2em 0; | |
list-style-type: none; | |
padding: 0; | |
width: 24em; | |
} | |
.items li { | |
cursor: pointer; | |
position: relative; | |
left: 0; | |
background-color: #EEE; | |
margin: .5em; | |
padding: .3em 0; | |
height: 1.6em; | |
border-radius: 4px; | |
} | |
.items li:hover { | |
color: #607D8B; | |
background-color: #DDD; | |
left: .1em; | |
} | |
.items li.selected { | |
background-color: #CFD8DC; | |
color: white; | |
} | |
.items li.selected:hover { | |
background-color: #BBD8DC; | |
} | |
.items .text { | |
position: relative; | |
top: -3px; | |
} | |
.items .badge { | |
display: inline-block; | |
font-size: small; | |
color: white; | |
padding: 0.8em 0.7em 0 0.7em; | |
background-color: #607D8B; | |
line-height: 1em; | |
position: relative; | |
left: -1px; | |
top: -4px; | |
height: 1.8em; | |
margin-right: .8em; | |
border-radius: 4px 0 0 4px; | |
} | |
/* everywhere else */ | |
* { | |
font-family: Arial, Helvetica, sans-serif; | |
} | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* PLUNKER VERSION | |
* (based on systemjs.config.js in angular.io) | |
* System configuration for Angular samples | |
* Adjust as necessary for your application needs. | |
*/ | |
(function (global) { | |
System.config({ | |
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER | |
transpiler: 'ts', | |
typescriptOptions: { | |
tsconfig: true | |
}, | |
meta: { | |
'typescript': { | |
"exports": "ts" | |
} | |
}, | |
paths: { | |
// paths serve as alias | |
'npm:': 'https://unpkg.com/' | |
}, | |
// map tells the System loader where to look for things | |
map: { | |
// our app is within the app folder | |
app: 'app', | |
// angular bundles | |
'@angular/core': 'npm:@angular/core/bundles/core.umd.js', | |
'@angular/common': 'npm:@angular/common/bundles/common.umd.js', | |
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', | |
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', | |
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', | |
'@angular/http': 'npm:@angular/http/bundles/http.umd.js', | |
'@angular/router': 'npm:@angular/router/bundles/router.umd.js', | |
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', | |
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', | |
// other libraries | |
'rxjs': 'npm:rxjs', | |
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', | |
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js', | |
'typescript': 'npm:typescript@2.0.2/lib/typescript.js', | |
}, | |
// packages tells the System loader how to load when no filename and/or no extension | |
packages: { | |
app: { | |
main: './main.ts', | |
defaultExtension: 'ts' | |
}, | |
rxjs: { | |
defaultExtension: 'js' | |
}, | |
'angular-in-memory-web-api': { | |
main: './index.js', | |
defaultExtension: 'js' | |
} | |
} | |
}); | |
})(this); | |
/* | |
Copyright 2016 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"compilerOptions": { | |
"target": "es5", | |
"module": "commonjs", | |
"moduleResolution": "node", | |
"sourceMap": true, | |
"emitDecoratorMetadata": true, | |
"experimentalDecorators": true, | |
"removeComments": false, | |
"noImplicitAny": true, | |
"suppressImplicitAnyIndexErrors": true | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment