mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
begin docs
This commit is contained in:
t1m0n
parent
20427d0c52
commit
35c0c5474b
3
dist/css/datepicker.css
vendored
3
dist/css/datepicker.css
vendored
@ -172,7 +172,8 @@
|
||||
border-top: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
width: 10px;
|
||||
height: 10px; }
|
||||
height: 10px;
|
||||
z-index: -1; }
|
||||
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
|
||||
top: calc(100% - 4px);
|
||||
-webkit-transform: rotate(135deg);
|
||||
|
||||
2
dist/css/datepicker.min.css
vendored
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
8
dist/js/datepicker.js
vendored
8
dist/js/datepicker.js
vendored
@ -2,6 +2,7 @@ var Datepicker;
|
||||
|
||||
(function (window, $, undefined) {
|
||||
var pluginName = 'datepicker',
|
||||
autoInitSelector = '.datepicker-here',
|
||||
$body, $datepickersContainer,
|
||||
containerBuilt = false,
|
||||
baseTemplate = '' +
|
||||
@ -68,7 +69,7 @@ var Datepicker;
|
||||
this.el = el;
|
||||
this.$el = $(el);
|
||||
|
||||
this.opts = $.extend(true, {}, defaults, options);
|
||||
this.opts = $.extend(true, {}, defaults, options, this.$el.data());
|
||||
|
||||
if ($body == undefined) {
|
||||
$body = $('body');
|
||||
@ -124,7 +125,6 @@ var Datepicker;
|
||||
},
|
||||
|
||||
_createShortCuts: function () {
|
||||
|
||||
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
||||
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
||||
},
|
||||
@ -710,6 +710,10 @@ var Datepicker;
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$(autoInitSelector).datepicker();
|
||||
})
|
||||
|
||||
})(window, jQuery);
|
||||
;(function () {
|
||||
var templates = {
|
||||
|
||||
2
dist/js/datepicker.min.js
vendored
2
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,48 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Air Datepicker</title>
|
||||
<meta charset="UTF-8">
|
||||
<link href="page/css/style.css" rel="stylesheet" type="text/css">
|
||||
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
|
||||
<script src="vendor/jquery/dist/jquery.min.js"></script>
|
||||
<script src="dist/js/datepicker.min.js"></script>
|
||||
<script src="dist/js/i18n/datepicker.en.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<main role="main" class="main">
|
||||
<div class="container">
|
||||
<input type="text" name="start">
|
||||
<input type="text" name="end">
|
||||
<script>
|
||||
var $start = $('[name="start"]'),
|
||||
$end = $('[name="end"]').hide();
|
||||
|
||||
$start.datepicker({
|
||||
inline: true,
|
||||
onSelect: function (format, date) {
|
||||
$end.data('datepicker')
|
||||
.update('minDate', date)
|
||||
}
|
||||
}).data('datepicker').show()
|
||||
|
||||
$end.datepicker({
|
||||
position: 'right top',
|
||||
onSelect: function (format, date) {
|
||||
$start.data('datepicker')
|
||||
.update('maxDate', date)
|
||||
}
|
||||
})
|
||||
|
||||
$('button').on('click', function () {
|
||||
$start.data('datepicker').update({
|
||||
language: 'en'
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><link href="page/css/style.css" rel="stylesheet" type="text/css"><link href="page/css/github-gist.css" rel="stylesheet" type="text/css"><link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="vendor/jquery/dist/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="dist/js/datepicker.min.js"></script><script src="dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><h1 class="promo-header">AIR DATEPICKER<span>легкий соврменныый jQuery календарь</span></h1><p class="-text-center-"><input type="text" id="example-promo" data-position="bottom center" class="promo-input datepicker-here"></p><h2>Установка</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Либо можно скачать файлы напрямую с <a href="">GitHub</a></p><h2>Использование</h2><p>Календарь автоматически проинициализируется на элементах с классом<span class="example-inline"><code class="css">.datepicker-here</code></span>, при этом опции можно передать через<span class="example-inline"><code class="html">data</code></span>атрибуты.</p><pre class="example-code"><code class="html"><input type='text' class="datepicker-here" data-position="right top" /></code></pre><h3>Ручная инициализация</h3><pre class="example-code"><code class="js">// Инициализация
|
||||
$('#my-element').datepicker([options])
|
||||
|
||||
// Доступ к экземпляру объекта
|
||||
$('#my-element').data('datepicker')
|
||||
</code></pre><h2>Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type='text' class='datepicker-here' /></code></pre></div></div></main></div><script>var $code = $('code');
|
||||
$code.each(function (i, el) {
|
||||
hljs.highlightBlock(el);
|
||||
})</script></body></html>
|
||||
@ -13,6 +13,7 @@
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^2.0.4",
|
||||
"gulp-uglify": "^1.2.0",
|
||||
"gulp-watch": "^4.3.5"
|
||||
"gulp-watch": "^4.3.5",
|
||||
"jade": "^1.11.0"
|
||||
}
|
||||
}
|
||||
|
||||
218
page/css/github-gist.css
Normal file
218
page/css/github-gist.css
Normal file
@ -0,0 +1,218 @@
|
||||
/**
|
||||
* GitHub Gist Theme
|
||||
* Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.bash .hljs-shebang,
|
||||
.java .hljs-javadoc,
|
||||
.javascript .hljs-javadoc,
|
||||
.rust .hljs-preprocessor {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.apache .hljs-sqbracket,
|
||||
.coffeescript .hljs-subst,
|
||||
.coffeescript .hljs-regexp,
|
||||
.cpp .hljs-preprocessor,
|
||||
.c .hljs-preprocessor,
|
||||
.javascript .hljs-regexp,
|
||||
.json .hljs-attribute,
|
||||
.makefile .hljs-variable,
|
||||
.markdown .hljs-value,
|
||||
.markdown .hljs-link_label,
|
||||
.markdown .hljs-strong,
|
||||
.markdown .hljs-emphasis,
|
||||
.markdown .hljs-blockquote,
|
||||
.nginx .hljs-regexp,
|
||||
.nginx .hljs-number,
|
||||
.objectivec .hljs-preprocessor .hljs-title,
|
||||
.perl .hljs-regexp,
|
||||
.php .hljs-regexp,
|
||||
.xml .hljs-value,
|
||||
.less .hljs-built_in,
|
||||
.scss .hljs-built_in {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.css .hljs-at_rule,
|
||||
.css .hljs-important,
|
||||
.http .hljs-request,
|
||||
.ini .hljs-setting,
|
||||
.haskell .hljs-type,
|
||||
.java .hljs-javadoctag,
|
||||
.javascript .hljs-tag,
|
||||
.javascript .hljs-javadoctag,
|
||||
.nginx .hljs-title,
|
||||
.objectivec .hljs-preprocessor,
|
||||
.php .hljs-phpdoc,
|
||||
.sql .hljs-built_in,
|
||||
.less .hljs-tag,
|
||||
.less .hljs-at_rule,
|
||||
.scss .hljs-tag,
|
||||
.scss .hljs-at_rule,
|
||||
.scss .hljs-important,
|
||||
.stylus .hljs-at_rule,
|
||||
.go .hljs-typename,
|
||||
.swift .hljs-preprocessor {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.apache .hljs-common,
|
||||
.apache .hljs-cbracket,
|
||||
.apache .hljs-keyword,
|
||||
.bash .hljs-literal,
|
||||
.bash .hljs-built_in,
|
||||
.coffeescript .hljs-literal,
|
||||
.coffeescript .hljs-built_in,
|
||||
.coffeescript .hljs-number,
|
||||
.cpp .hljs-number,
|
||||
.cpp .hljs-built_in,
|
||||
.c .hljs-number,
|
||||
.c .hljs-built_in,
|
||||
.cs .hljs-number,
|
||||
.cs .hljs-built_in,
|
||||
.css .hljs-attribute,
|
||||
.css .hljs-hexcolor,
|
||||
.css .hljs-number,
|
||||
.css .hljs-function,
|
||||
.haskell .hljs-number,
|
||||
.http .hljs-literal,
|
||||
.http .hljs-attribute,
|
||||
.java .hljs-number,
|
||||
.javascript .hljs-built_in,
|
||||
.javascript .hljs-literal,
|
||||
.javascript .hljs-number,
|
||||
.json .hljs-number,
|
||||
.makefile .hljs-keyword,
|
||||
.markdown .hljs-link_reference,
|
||||
.nginx .hljs-built_in,
|
||||
.objectivec .hljs-literal,
|
||||
.objectivec .hljs-number,
|
||||
.objectivec .hljs-built_in,
|
||||
.php .hljs-literal,
|
||||
.php .hljs-number,
|
||||
.python .hljs-number,
|
||||
.ruby .hljs-prompt,
|
||||
.ruby .hljs-constant,
|
||||
.ruby .hljs-number,
|
||||
.ruby .hljs-subst .hljs-keyword,
|
||||
.ruby .hljs-symbol,
|
||||
.rust .hljs-number,
|
||||
.sql .hljs-number,
|
||||
.puppet .hljs-function,
|
||||
.less .hljs-number,
|
||||
.less .hljs-hexcolor,
|
||||
.less .hljs-function,
|
||||
.less .hljs-attribute,
|
||||
.scss .hljs-preprocessor,
|
||||
.scss .hljs-number,
|
||||
.scss .hljs-hexcolor,
|
||||
.scss .hljs-function,
|
||||
.scss .hljs-attribute,
|
||||
.stylus .hljs-number,
|
||||
.stylus .hljs-hexcolor,
|
||||
.stylus .hljs-attribute,
|
||||
.stylus .hljs-params,
|
||||
.go .hljs-built_in,
|
||||
.go .hljs-constant,
|
||||
.swift .hljs-built_in,
|
||||
.swift .hljs-number {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.apache .hljs-tag,
|
||||
.cs .hljs-xmlDocTag,
|
||||
.css .hljs-tag,
|
||||
.xml .hljs-title,
|
||||
.stylus .hljs-tag {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.bash .hljs-variable,
|
||||
.cs .hljs-preprocessor,
|
||||
.cs .hljs-preprocessor .hljs-keyword,
|
||||
.css .hljs-attr_selector,
|
||||
.css .hljs-value,
|
||||
.ini .hljs-value,
|
||||
.ini .hljs-keyword,
|
||||
.javascript .hljs-tag .hljs-title,
|
||||
.makefile .hljs-constant,
|
||||
.nginx .hljs-variable,
|
||||
.xml .hljs-tag,
|
||||
.scss .hljs-variable {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bash .hljs-title,
|
||||
.coffeescript .hljs-title,
|
||||
.cpp .hljs-title,
|
||||
.c .hljs-title,
|
||||
.cs .hljs-title,
|
||||
.css .hljs-id,
|
||||
.css .hljs-class,
|
||||
.css .hljs-pseudo,
|
||||
.ini .hljs-title,
|
||||
.haskell .hljs-title,
|
||||
.haskell .hljs-pragma,
|
||||
.java .hljs-title,
|
||||
.javascript .hljs-title,
|
||||
.makefile .hljs-title,
|
||||
.objectivec .hljs-title,
|
||||
.perl .hljs-sub,
|
||||
.php .hljs-title,
|
||||
.python .hljs-decorator,
|
||||
.python .hljs-title,
|
||||
.ruby .hljs-parent,
|
||||
.ruby .hljs-title,
|
||||
.rust .hljs-title,
|
||||
.xml .hljs-attribute,
|
||||
.puppet .hljs-title,
|
||||
.less .hljs-id,
|
||||
.less .hljs-pseudo,
|
||||
.less .hljs-class,
|
||||
.scss .hljs-id,
|
||||
.scss .hljs-pseudo,
|
||||
.scss .hljs-class,
|
||||
.stylus .hljs-class,
|
||||
.stylus .hljs-id,
|
||||
.stylus .hljs-pseudo,
|
||||
.stylus .hljs-title,
|
||||
.swift .hljs-title,
|
||||
.diff .hljs-chunk {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.coffeescript .hljs-reserved,
|
||||
.coffeescript .hljs-attribute {
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
.diff .hljs-chunk {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diff .hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.diff .hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.markdown .hljs-link_url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -1 +1 @@
|
||||
html{font-family:Tahoma,sans-serif;font-size:13px}.contents{width:960px;margin:0 auto;padding:1px 0}.contents article{margin:60px 0 30px}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0}textarea{overflow:auto}
|
||||
.-text-center-,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}.container{width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}input[type=text]{border-radius:4px;outline:0;height:32px;border:1px solid silver;padding:0 8px;margin:0 0 14px;font-family:Tahoma,sans-serif;transition:all .2s}input[type=text]:focus{border-color:gold;box-shadow:0 0 8px rgba(0,0,0,.1)}.example--label{background:#f4f4f4;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{font-family:Consolas,monospace;line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ddd;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #eee;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#1373ba}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.example-code code{padding:16px 32px}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.promo-input{height:40px;margin:26px 0;width:300px}
|
||||
@ -10,13 +10,23 @@ html
|
||||
title Air Datepicker
|
||||
meta(charset='UTF-8')
|
||||
link(href='page/css/style.css', rel='stylesheet', type='text/css')
|
||||
link(href='page/css/github-gist.css', rel='stylesheet', type='text/css')
|
||||
link(href='dist/css/datepicker.min.css', rel='stylesheet', type='text/css')
|
||||
link(href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&subset=latin,cyrillic', rel='stylesheet', type='text/css')
|
||||
script(src='vendor/jquery/dist/jquery.min.js')
|
||||
script(src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js')
|
||||
script(src='dist/js/datepicker.min.js')
|
||||
script(src='dist/js/i18n/datepicker.en.js')
|
||||
|
||||
body
|
||||
div.wrapper
|
||||
main.main(role='main')
|
||||
.container
|
||||
block content
|
||||
|
||||
script.
|
||||
var $code = $('code');
|
||||
$code.each(function (i, el) {
|
||||
hljs.highlightBlock(el);
|
||||
})
|
||||
|
||||
|
||||
@ -1,31 +1,40 @@
|
||||
extends ../layout
|
||||
|
||||
block content
|
||||
input(type='text', name='start')
|
||||
input(type='text', name='end')
|
||||
h1.promo-header
|
||||
| AIR DATEPICKER
|
||||
span легкий соврменныый jQuery календарь
|
||||
|
||||
script.
|
||||
var $start = $('[name="start"]'),
|
||||
$end = $('[name="end"]').hide();
|
||||
p.-text-center-
|
||||
input.promo-input.datepicker-here(type='text' id='example-promo' data-position='bottom center')
|
||||
|
||||
$start.datepicker({
|
||||
inline: true,
|
||||
onSelect: function (format, date) {
|
||||
$end.data('datepicker')
|
||||
.update('minDate', date)
|
||||
}
|
||||
}).data('datepicker').show()
|
||||
h2 Установка
|
||||
+example-code('html') bower i --save air-datepicker
|
||||
p Либо можно скачать файлы напрямую с <a href="">GitHub</a>
|
||||
|
||||
$end.datepicker({
|
||||
position: 'right top',
|
||||
onSelect: function (format, date) {
|
||||
$start.data('datepicker')
|
||||
.update('maxDate', date)
|
||||
}
|
||||
})
|
||||
h2 Использование
|
||||
p
|
||||
|Календарь автоматически проинициализируется на элементах с классом
|
||||
+example-inline('.datepicker-here', 'css')
|
||||
|, при этом опции можно передать через
|
||||
+example-inline('data', 'html')
|
||||
| атрибуты.
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type='text' class="datepicker-here" data-position="right top" />
|
||||
h3 Ручная инициализация
|
||||
+example-code('js').
|
||||
// Инициализация
|
||||
$('#my-element').datepicker([options])
|
||||
|
||||
$('button').on('click', function () {
|
||||
$start.data('datepicker').update({
|
||||
language: 'en'
|
||||
})
|
||||
});
|
||||
// Доступ к экземпляру объекта
|
||||
$('#my-element').data('datepicker')
|
||||
|
||||
h2 Примеры
|
||||
h3 Инициализация с опциями по умолчанию
|
||||
+example
|
||||
+example-content
|
||||
input(type='text').datepicker-here
|
||||
+example-code('html')
|
||||
:code
|
||||
<input type='text' class='datepicker-here' />
|
||||
|
||||
1
page/js/highlight.pack.js
Normal file
1
page/js/highlight.pack.js
Normal file
File diff suppressed because one or more lines are too long
167
page/sass/_page.scss
Normal file
167
page/sass/_page.scss
Normal file
@ -0,0 +1,167 @@
|
||||
/* -------------------------------------------------
|
||||
Page styles
|
||||
------------------------------------------------- */
|
||||
|
||||
$fontFamily: Tahoma, sans-serif;
|
||||
|
||||
html {
|
||||
color: #333;
|
||||
font-family: $fontFamily;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.3;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 100;
|
||||
font-size: 32px;
|
||||
margin: 48px 0 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
margin: 24px 0 8px;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 1px 0;
|
||||
|
||||
article {
|
||||
margin: 60px 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.-text-center- {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
height: 32px;
|
||||
border: 1px solid #c0c0c0;
|
||||
padding: 0 8px;
|
||||
margin: 0 0 14px;
|
||||
font-family: $fontFamily;
|
||||
transition: all .2s;
|
||||
|
||||
&:focus {
|
||||
border-color: gold;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Example
|
||||
------------------------------------------------- */
|
||||
|
||||
%example-label {
|
||||
background: #f4f4f4;
|
||||
border-radius: 0 0 4px 4px;
|
||||
position: absolute;
|
||||
padding: 4px 12px;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
$exampleBorderRadius: 4px;
|
||||
|
||||
.hljs {
|
||||
font-family: Consolas, monospace;
|
||||
line-height: 1.2;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
.example {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: $exampleBorderRadius;
|
||||
position: relative;
|
||||
margin: 16px 0;
|
||||
|
||||
.example-code {
|
||||
border: none;
|
||||
border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius;
|
||||
border-top: 1px solid #eee;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.example-inline {
|
||||
background: red;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 4px;
|
||||
|
||||
.hljs {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.example--label {
|
||||
@extend %example-label;
|
||||
}
|
||||
|
||||
.example-content {
|
||||
padding: 32px;
|
||||
|
||||
h1, h2, h3 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #47A6EC;
|
||||
|
||||
&:hover {
|
||||
color: darken(#47A6EC, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.example-code {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: $exampleBorderRadius;
|
||||
overflow: hidden;
|
||||
margin: 16px 0;
|
||||
font-size: 13px;
|
||||
|
||||
code {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// Promo block
|
||||
// -------------------------------------------------
|
||||
|
||||
.promo-header {
|
||||
font-size: 48px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.promo-input {
|
||||
height: 40px;
|
||||
margin: 26px 0;
|
||||
width: 300px;
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
Reset
|
||||
------------------------------------------------- */
|
||||
|
||||
applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
||||
applet, object, iframe, p,
|
||||
blockquote, pre, a, abbr, acronym, address, big,
|
||||
cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, sub, sup, tt, var, u, i, center, dl,
|
||||
2
page/sass/init.scss
Normal file
2
page/sass/init.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "reset";
|
||||
@import "page";
|
||||
@ -1,18 +0,0 @@
|
||||
/* -------------------------------------------------
|
||||
Page styles
|
||||
------------------------------------------------- */
|
||||
|
||||
html {
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 1px 0;
|
||||
|
||||
article {
|
||||
margin: 60px 0 30px;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@ var Datepicker;
|
||||
|
||||
(function (window, $, undefined) {
|
||||
var pluginName = 'datepicker',
|
||||
autoInitSelector = '.datepicker-here',
|
||||
$body, $datepickersContainer,
|
||||
containerBuilt = false,
|
||||
baseTemplate = '' +
|
||||
@ -68,7 +69,7 @@ var Datepicker;
|
||||
this.el = el;
|
||||
this.$el = $(el);
|
||||
|
||||
this.opts = $.extend(true, {}, defaults, options);
|
||||
this.opts = $.extend(true, {}, defaults, options, this.$el.data());
|
||||
|
||||
if ($body == undefined) {
|
||||
$body = $('body');
|
||||
@ -124,7 +125,6 @@ var Datepicker;
|
||||
},
|
||||
|
||||
_createShortCuts: function () {
|
||||
|
||||
this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
|
||||
this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
|
||||
},
|
||||
@ -710,4 +710,8 @@ var Datepicker;
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$(autoInitSelector).datepicker();
|
||||
})
|
||||
|
||||
})(window, jQuery);
|
||||
@ -74,6 +74,7 @@ $pointerHalfSize: $pointerSize / 2 - 1;
|
||||
border-right: 1px solid $borderColor;
|
||||
width: $pointerSize;
|
||||
height: $pointerSize;
|
||||
z-index: -1;
|
||||
|
||||
// Main axis
|
||||
// -------------------------
|
||||
|
||||
@ -8,7 +8,7 @@ var gulp = require('gulp'),
|
||||
concat = require('gulp-concat');
|
||||
|
||||
module.exports = function () {
|
||||
gulp.src('page/sass/*.scss')
|
||||
gulp.src('page/sass/init.scss')
|
||||
.pipe(concat('style.css'))
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(postcss([autoprefixer]))
|
||||
|
||||
@ -1,8 +1,19 @@
|
||||
var gulp = require('gulp'),
|
||||
_jade = require('gulp-jade/node_modules/jade'),
|
||||
jade = require('gulp-jade');
|
||||
|
||||
_jade.filters.code = function( block ) {
|
||||
return block
|
||||
.replace( /&/g, '&' )
|
||||
.replace( /</g, '<' )
|
||||
.replace( />/g, '>' )
|
||||
.replace( /"/g, '"' )
|
||||
.replace( /#/g, '#' )
|
||||
.replace( /\\/g, '\\\\' );
|
||||
};
|
||||
|
||||
module.exports = function () {
|
||||
gulp.src('page/jade/pages/*.jade')
|
||||
.pipe(jade({pretty: true}))
|
||||
.pipe(jade())
|
||||
.pipe(gulp.dest('./'))
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user