Replace jslider with jRange
This commit is contained in:
Stefan Parviainen
296
library/jRange/demo/main.less
Normal file
296
library/jRange/demo/main.less
Normal file
@@ -0,0 +1,296 @@
|
||||
@font-family: 'Raleway' sans-serif;
|
||||
html, body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body{
|
||||
font-family: Helvetica Neue, Helvetica, Arial sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #434343;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
pre code{
|
||||
line-height: 1.5;
|
||||
}
|
||||
.container{
|
||||
width: 1130px;
|
||||
padding: 0 20px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.text-container{
|
||||
width: 900px;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.clearfix:after {
|
||||
content: " "; /* Older browser do not support empty content */
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
.pane{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
min-height: 450px;
|
||||
}
|
||||
.body{
|
||||
position: relative;
|
||||
}
|
||||
section.header{
|
||||
background-color: #606c88;
|
||||
|
||||
background: -webkit-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Chrome 10+, Saf5.1+ */
|
||||
background: -moz-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* IE10 */
|
||||
background: -o-linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* Opera 11.10+ */
|
||||
background: linear-gradient(90deg, #606c88 10%, #3f4c6b 90%); /* W3C */
|
||||
|
||||
// background-image: radial-gradient(50% 102%, #3cb3db 48%, #2e6c9a 100%);
|
||||
footer{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 10px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.left{
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.right{
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
div.header{
|
||||
color: #fff;
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// background-color: #333;
|
||||
border-radius: 5px;
|
||||
h1, h2{
|
||||
font-family: @font-family;
|
||||
font-weight: 100;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
h1{
|
||||
font-size: 72px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
section.demo{
|
||||
h2, h3{
|
||||
font-family: @font-family;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
h2{
|
||||
font-size: 48px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
h3{
|
||||
font-size: 28px;
|
||||
margin: 0.8em 0 1em;
|
||||
}
|
||||
.demo-container{
|
||||
margin: 40px 0 80px;
|
||||
}
|
||||
.demo-section{
|
||||
margin: 20px 0;
|
||||
clear: both;
|
||||
.demo-code{
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.demo-output{
|
||||
margin-left: 50%;
|
||||
padding: 50px 0;
|
||||
}
|
||||
.slider-container{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.text-container{
|
||||
h2{
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
.form-vertical{
|
||||
width: 200px;
|
||||
float: left;
|
||||
}
|
||||
.image-container{
|
||||
margin-left: 200px;
|
||||
padding: 1px;
|
||||
border: 1px solid #eee;
|
||||
// background-color: #333;
|
||||
}
|
||||
.form-group{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label{
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
}
|
||||
input{
|
||||
width: 150px;
|
||||
margin-top: 3px;
|
||||
// border-radius: 2px;
|
||||
border: 1px solid #999;
|
||||
border-width: 0 0 1px 0;
|
||||
padding: 3px 0 3px;
|
||||
transition: 0.3s all;
|
||||
// color: #999;
|
||||
&:focus, &:active{
|
||||
outline: none;
|
||||
border-color: #2fc7ff;
|
||||
box-shadow: 0 1px 3px -3px #2fc7ff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
button{
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
padding: 0.3em 1em;
|
||||
border: 1px solid #d4d4d4;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 0 #fff;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: #ececec;
|
||||
background-image: linear-gradient(#f4f4f4, #ececec);
|
||||
background-clip: padding-box;
|
||||
border-radius: 0.2em;
|
||||
zoom: 1;
|
||||
transition: background-image 0.3s;
|
||||
&:hover, &:active{
|
||||
border-color: #3072b3;
|
||||
border-bottom-color: #2a65a0;
|
||||
text-decoration: none;
|
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
|
||||
color: #fff;
|
||||
background-color: #3c8dde;
|
||||
background-image: linear-gradient(#599bdc, #3072b3);
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-family: @font-family;
|
||||
margin: 1em auto;
|
||||
}
|
||||
.footer{
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.large-github{
|
||||
display: inline-block;
|
||||
border: 1px solid #21b0ff;
|
||||
font-weight: 400;
|
||||
font-family: @font-family;
|
||||
text-shadow: none;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
padding: 8px 25px;
|
||||
color: #21b0ff;
|
||||
font-size: 18px;
|
||||
border-radius: 25px;
|
||||
&:hover, &:active{
|
||||
background-color: #21b0ff;
|
||||
color: #fff;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.two-coloumn{
|
||||
em{
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
.plugin-options{
|
||||
font-size: 14px;
|
||||
margin-bottom: 40px;
|
||||
width: 900px;
|
||||
font-weight: 200;
|
||||
td, th{
|
||||
padding: 8px ;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
&:first-child{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
td{
|
||||
&:nth-child(2), &:nth-child(3){
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
p{
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
margin: 4px 0;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th{
|
||||
background-color: #358ccb;
|
||||
color: #fff;
|
||||
}
|
||||
tr{
|
||||
&:nth-child(2n + 1){
|
||||
td{
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
small{
|
||||
display: block;
|
||||
// white-space: nowrap;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
ul{
|
||||
list-style: circle inside;
|
||||
// padding-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
section.footer{
|
||||
margin-top: 80px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background-color: #333;
|
||||
color: #999;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
p{
|
||||
margin: 5px 0;
|
||||
}
|
||||
a{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user