209 lines
3.0 KiB
CSS
209 lines
3.0 KiB
CSS
/*
|
|
* Toggle Demo
|
|
*/
|
|
|
|
.toggle-demo {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: -8px;
|
|
display: block;
|
|
width: 150px;
|
|
height: auto;
|
|
z-index: 99;
|
|
opacity: .9;
|
|
|
|
}.toggle-demo:hover {
|
|
opacity:1;
|
|
}
|
|
|
|
.toggle-demo .btn-group {
|
|
width:100px;
|
|
float:left;
|
|
}
|
|
|
|
.toggle-demo > span {
|
|
display:inline-block;
|
|
float:left;
|
|
margin-right:5px;
|
|
line-height: 21px;
|
|
color: #757575;
|
|
}
|
|
|
|
|
|
/*
|
|
* noUISlider vertical demo
|
|
*/
|
|
.demo-vertical-uislider {
|
|
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
}
|
|
.demo-vertical-uislider > div {
|
|
height:200px;
|
|
margin: 0 0px 0 10px;
|
|
display:inline-block;
|
|
}
|
|
|
|
.demo-vertical-uislider >:first-child {
|
|
margin-left:15px;
|
|
}
|
|
|
|
|
|
/*
|
|
* Knobs demo
|
|
*/
|
|
|
|
.knobs-demo > div {
|
|
display:inline-block;
|
|
margin-left:30px;
|
|
}
|
|
.knobs-demo >:first-child {
|
|
margin-left:0;
|
|
}
|
|
|
|
/*
|
|
* DEMO INPUT
|
|
*/
|
|
|
|
.demo label input[type=radio].radiobox+span:before, .demo label input[type=checkbox].checkbox+span:before {
|
|
border: 1px solid #5E5E5E;
|
|
}
|
|
|
|
.demo label:hover input[type=checkbox].checkbox+span:before {
|
|
border-color:#E77317;
|
|
}
|
|
|
|
/*
|
|
* DEMO
|
|
* Demo CSS only
|
|
*/
|
|
.demo label {
|
|
margin-bottom:4 !important;
|
|
}
|
|
|
|
.demo .checkbox i {
|
|
border-color: #7A7A7A;
|
|
}
|
|
|
|
.demo .radio, .demo .checkbox {
|
|
padding-left:22px;
|
|
}
|
|
|
|
.demo.activate {
|
|
right:0px !important;
|
|
box-shadow: -11px 12px 23px rgba(0, 0, 0, 0.2);
|
|
padding:5px 10px 10px;
|
|
}
|
|
|
|
.demo #demo-setting + form {
|
|
display:none;
|
|
}
|
|
|
|
.demo.activate #demo-setting + form {
|
|
display:block;
|
|
}
|
|
|
|
.demo {
|
|
position:absolute;
|
|
top:5px;
|
|
right:0px;
|
|
width:160px;
|
|
z-index:5;
|
|
background:#F1DA91;
|
|
}
|
|
|
|
.demo > span {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
display: block;
|
|
height: 30px;
|
|
width: 30px;
|
|
border-radius: 5px 0 0 5px;
|
|
background: #F1DA91;
|
|
padding: 2px;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.demo > span i {
|
|
font-size:17px;
|
|
}
|
|
|
|
.demo.activate > span i:before {
|
|
content: "\f00d";
|
|
}
|
|
|
|
.demo.activate > span {
|
|
left: -30px;
|
|
}
|
|
|
|
.demo > span:hover i {
|
|
color:#333 !important;
|
|
}
|
|
|
|
.demo form section {
|
|
margin:0 !important;
|
|
}
|
|
|
|
.demo .btn {
|
|
font-size: 13px !important;
|
|
line-height: 1.5 !important;
|
|
border-radius: 3px !important;
|
|
padding: 3px 7px !important;
|
|
height:auto !important;
|
|
}
|
|
|
|
.demo-liveupdate-1 {
|
|
font-size: 12px !important;
|
|
position: absolute !important;
|
|
left: 33px;
|
|
top: 15px;
|
|
display: block;
|
|
z-index: 2;
|
|
font-weight: bold;
|
|
padding: 1px 61px 3px 7px;
|
|
}
|
|
|
|
.demo-btns {
|
|
margin:0;
|
|
padding:0;
|
|
list-style:none;
|
|
}
|
|
.demo-btns > li {
|
|
display:inline-block;
|
|
margin-bottom:7px;
|
|
}
|
|
|
|
|
|
.demo-icon-font {
|
|
font-size: 14px;
|
|
margin-bottom: 6px;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.demo-icon-font:hover {
|
|
background-color: rgba(86, 61, 124, 0.1);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.demo-modal {
|
|
width: auto;
|
|
max-width:600px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.demo-red {
|
|
color:#DF413E
|
|
}
|
|
|
|
.demo-orange {
|
|
color:#DAA03E;
|
|
}
|
|
|
|
.demo-border {
|
|
border:1px solid rgba(0,0,0,.2)
|
|
} |