diff options
Diffstat (limited to 'library/jRange/demo/main.less')
| -rw-r--r-- | library/jRange/demo/main.less | 296 |
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 |