aboutsummaryrefslogtreecommitdiffstats
path: root/library/jRange/demo/main.less
diff options
context:
space:
mode:
authorStefan Parviainen <saparvia@caterva.eu>2015-01-05 18:30:12 +0100
committerStefan Parviainen <saparvia@caterva.eu>2015-01-05 18:30:12 +0100
commit128b0008eef797050cf5146fb1dd69505c4439d4 (patch)
tree65d6b6214ee48322bd5a5c84e0ac9bcde09ff13a /library/jRange/demo/main.less
parent7791d28a5d24193a01ce004988ba6767f45835ba (diff)
downloadvolse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.gz
volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.tar.bz2
volse-hubzilla-128b0008eef797050cf5146fb1dd69505c4439d4.zip
Replace jslider with jRange
Diffstat (limited to 'library/jRange/demo/main.less')
-rw-r--r--library/jRange/demo/main.less296
1 files changed, 296 insertions, 0 deletions
diff --git a/library/jRange/demo/main.less b/library/jRange/demo/main.less
new file mode 100644
index 000000000..e9ee232a1
--- /dev/null
+++ b/library/jRange/demo/main.less
@@ -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;
+ }
+} \ No newline at end of file