begin
This commit is contained in:
wangjinlei
414
js/selectivity/main.js
Normal file
414
js/selectivity/main.js
Normal file
@@ -0,0 +1,414 @@
|
||||
function escape(string) {
|
||||
return string ? String(string).replace(/[&<>"']/g, function(match) {
|
||||
return {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
}[match];
|
||||
}) : '';
|
||||
}
|
||||
|
||||
var cities = [
|
||||
'Amsterdam',
|
||||
'Antwerp',
|
||||
'Athens',
|
||||
'Barcelona',
|
||||
'Berlin',
|
||||
'Birmingham',
|
||||
'Bradford',
|
||||
'Bremen',
|
||||
'Brussels',
|
||||
'Bucharest',
|
||||
'Budapest',
|
||||
'Cologne',
|
||||
'Copenhagen',
|
||||
'Dortmund',
|
||||
'Dresden',
|
||||
'Dublin',
|
||||
'Düsseldorf',
|
||||
'Essen',
|
||||
'Frankfurt',
|
||||
'Genoa',
|
||||
'Glasgow',
|
||||
'Gothenburg',
|
||||
'Hamburg',
|
||||
'Hannover',
|
||||
'Helsinki',
|
||||
'Leeds',
|
||||
'Leipzig',
|
||||
'Lisbon',
|
||||
'Łódź',
|
||||
'London',
|
||||
'Kraków',
|
||||
'Madrid',
|
||||
'Málaga',
|
||||
'Manchester',
|
||||
'Marseille',
|
||||
'Milan',
|
||||
'Munich',
|
||||
'Naples',
|
||||
'Palermo',
|
||||
'Paris',
|
||||
'Poznań',
|
||||
'Prague',
|
||||
'Riga',
|
||||
'Rome',
|
||||
'Rotterdam',
|
||||
'Seville',
|
||||
'Sheffield',
|
||||
'Sofia',
|
||||
'Stockholm',
|
||||
'Stuttgart',
|
||||
'The Hague',
|
||||
'Turin',
|
||||
'Valencia',
|
||||
'Vienna',
|
||||
'Vilnius',
|
||||
'Warsaw',
|
||||
'Wrocław',
|
||||
'Zagreb',
|
||||
'Zaragoza'
|
||||
];
|
||||
|
||||
var citiesByCountry = [
|
||||
{
|
||||
text: 'Austria',
|
||||
children: [
|
||||
{ id: 54, text: 'Vienna' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Belgium',
|
||||
children: [
|
||||
{ id: 2, text: 'Antwerp' },
|
||||
{ id: 9, text: 'Brussels' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Bulgaria',
|
||||
children: [
|
||||
{ id: 48, text: 'Sofia' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Croatia',
|
||||
children: [
|
||||
{ id: 58, text: 'Zagreb' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Czech Republic',
|
||||
children: [
|
||||
{ id: 42, text: 'Prague' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Denmark',
|
||||
children: [
|
||||
{ id: 13, text: 'Copenhagen' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'England',
|
||||
children: [
|
||||
{ id: 6, text: 'Birmingham' },
|
||||
{ id: 7, text: 'Bradford' },
|
||||
{ id: 26, text: 'Leeds' },
|
||||
{ id: 30, text: 'London' },
|
||||
{ id: 34, text: 'Manchester' },
|
||||
{ id: 47, text: 'Sheffield' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Finland',
|
||||
children: [
|
||||
{ id: 25, text: 'Helsinki' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'France',
|
||||
children: [
|
||||
{ id: 35, text: 'Marseille' },
|
||||
{ id: 40, text: 'Paris' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Germany',
|
||||
children: [
|
||||
{ id: 5, text: 'Berlin' },
|
||||
{ id: 8, text: 'Bremen' },
|
||||
{ id: 12, text: 'Cologne' },
|
||||
{ id: 14, text: 'Dortmund' },
|
||||
{ id: 15, text: 'Dresden' },
|
||||
{ id: 17, text: 'Düsseldorf' },
|
||||
{ id: 18, text: 'Essen' },
|
||||
{ id: 19, text: 'Frankfurt' },
|
||||
{ id: 23, text: 'Hamburg' },
|
||||
{ id: 24, text: 'Hannover' },
|
||||
{ id: 27, text: 'Leipzig' },
|
||||
{ id: 37, text: 'Munich' },
|
||||
{ id: 50, text: 'Stuttgart' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Greece',
|
||||
children: [
|
||||
{ id: 3, text: 'Athens' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Hungary',
|
||||
children: [
|
||||
{ id: 11, text: 'Budapest' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Ireland',
|
||||
children: [
|
||||
{ id: 16, text: 'Dublin' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Italy',
|
||||
children: [
|
||||
{ id: 20, text: 'Genoa' },
|
||||
{ id: 36, text: 'Milan' },
|
||||
{ id: 38, text: 'Naples' },
|
||||
{ id: 39, text: 'Palermo' },
|
||||
{ id: 44, text: 'Rome' },
|
||||
{ id: 52, text: 'Turin' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Latvia',
|
||||
children: [
|
||||
{ id: 43, text: 'Riga' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Lithuania',
|
||||
children: [
|
||||
{ id: 55, text: 'Vilnius' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Netherlands',
|
||||
children: [
|
||||
{ id: 1, text: 'Amsterdam' },
|
||||
{ id: 45, text: 'Rotterdam' },
|
||||
{ id: 51, text: 'The Hague' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Poland',
|
||||
children: [
|
||||
{ id: 29, text: 'Łódź' },
|
||||
{ id: 31, text: 'Kraków' },
|
||||
{ id: 41, text: 'Poznań' },
|
||||
{ id: 56, text: 'Warsaw' },
|
||||
{ id: 57, text: 'Wrocław' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Portugal',
|
||||
children: [
|
||||
{ id: 28, text: 'Lisbon' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Romania',
|
||||
children: [
|
||||
{ id: 10, text: 'Bucharest' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Scotland',
|
||||
children: [
|
||||
{ id: 21, text: 'Glasgow' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Spain',
|
||||
children: [
|
||||
{ id: 4, text: 'Barcelona' },
|
||||
{ id: 32, text: 'Madrid' },
|
||||
{ id: 33, text: 'Málaga' },
|
||||
{ id: 46, text: 'Seville' },
|
||||
{ id: 53, text: 'Valencia' },
|
||||
{ id: 59, text: 'Zaragoza' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Sweden',
|
||||
children: [
|
||||
{ id: 22, text: 'Gothenburg' },
|
||||
{ id: 49, text: 'Stockholm' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
var citiesByTimezone = [
|
||||
{
|
||||
id: '+00:00',
|
||||
text: 'Western European Time Zone',
|
||||
submenu: {
|
||||
items: [
|
||||
{ id: 4, text: 'Barcelona' },
|
||||
{ id: 6, text: 'Birmingham' },
|
||||
{ id: 7, text: 'Bradford' },
|
||||
{ id: 16, text: 'Dublin' },
|
||||
{ id: 21, text: 'Glasgow' },
|
||||
{ id: 26, text: 'Leeds' },
|
||||
{ id: 28, text: 'Lisbon' },
|
||||
{ id: 30, text: 'London' },
|
||||
{ id: 32, text: 'Madrid' },
|
||||
{ id: 33, text: 'Málaga' },
|
||||
{ id: 34, text: 'Manchester' },
|
||||
{ id: 46, text: 'Seville' },
|
||||
{ id: 47, text: 'Sheffield' },
|
||||
{ id: 53, text: 'Valencia' },
|
||||
{ id: 59, text: 'Zaragoza' }
|
||||
],
|
||||
showSearchInput: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '+01:00',
|
||||
text: 'Central European Time Zone',
|
||||
submenu: {
|
||||
items: [
|
||||
{ id: 1, text: 'Amsterdam' },
|
||||
{ id: 2, text: 'Antwerp' },
|
||||
{ id: 5, text: 'Berlin' },
|
||||
{ id: 8, text: 'Bremen' },
|
||||
{ id: 9, text: 'Brussels' },
|
||||
{ id: 11, text: 'Budapest' },
|
||||
{ id: 12, text: 'Cologne' },
|
||||
{ id: 13, text: 'Copenhagen' },
|
||||
{ id: 14, text: 'Dortmund' },
|
||||
{ id: 15, text: 'Dresden' },
|
||||
{ id: 17, text: 'Düsseldorf' },
|
||||
{ id: 18, text: 'Essen' },
|
||||
{ id: 19, text: 'Frankfurt' },
|
||||
{ id: 20, text: 'Genoa' },
|
||||
{ id: 22, text: 'Gothenburg' },
|
||||
{ id: 23, text: 'Hamburg' },
|
||||
{ id: 24, text: 'Hannover' },
|
||||
{ id: 27, text: 'Leipzig' },
|
||||
{ id: 29, text: 'Łódź' },
|
||||
{ id: 31, text: 'Kraków' },
|
||||
{ id: 35, text: 'Marseille' },
|
||||
{ id: 36, text: 'Milan' },
|
||||
{ id: 37, text: 'Munich' },
|
||||
{ id: 38, text: 'Naples' },
|
||||
{ id: 39, text: 'Palermo' },
|
||||
{ id: 40, text: 'Paris' },
|
||||
{ id: 41, text: 'Poznań' },
|
||||
{ id: 42, text: 'Prague' },
|
||||
{ id: 44, text: 'Rome' },
|
||||
{ id: 45, text: 'Rotterdam' },
|
||||
{ id: 49, text: 'Stockholm' },
|
||||
{ id: 50, text: 'Stuttgart' },
|
||||
{ id: 51, text: 'The Hague' },
|
||||
{ id: 52, text: 'Turin' },
|
||||
{ id: 54, text: 'Vienna' },
|
||||
{ id: 56, text: 'Warsaw' },
|
||||
{ id: 57, text: 'Wrocław' },
|
||||
{ id: 58, text: 'Zagreb' }
|
||||
],
|
||||
showSearchInput: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '+02:00',
|
||||
text: 'Eastern European Time Zone',
|
||||
submenu: {
|
||||
items: [
|
||||
{ id: 3, text: 'Athens' },
|
||||
{ id: 10, text: 'Bucharest' },
|
||||
{ id: 25, text: 'Helsinki' },
|
||||
{ id: 43, text: 'Riga' },
|
||||
{ id: 48, text: 'Sofia' },
|
||||
{ id: 55, text: 'Vilnius' }
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
$('#example-1').selectivity({
|
||||
allowClear: true,
|
||||
items: cities,
|
||||
placeholder: 'No city selected'
|
||||
});
|
||||
|
||||
$('#example-2').selectivity({
|
||||
items: cities,
|
||||
multiple: true,
|
||||
placeholder: 'Type to search a city'
|
||||
});
|
||||
|
||||
$('#example-3').selectivity({
|
||||
allowClear: true,
|
||||
items: citiesByCountry,
|
||||
placeholder: 'No city selected'
|
||||
});
|
||||
|
||||
$('#example-4').selectivity({
|
||||
allowClear: true,
|
||||
items: citiesByTimezone,
|
||||
placeholder: 'No city selected',
|
||||
showSearchInputInDropdown: false
|
||||
});
|
||||
|
||||
$('#example-5').selectivity({
|
||||
inputType: 'Email',
|
||||
placeholder: 'Type or paste email addresses'
|
||||
});
|
||||
|
||||
$('#example-6').selectivity({
|
||||
ajax: {
|
||||
url: 'https://api.github.com/search/repositories',
|
||||
minimumInputLength: 3,
|
||||
quietMillis: 250,
|
||||
params: function(term, offset) {
|
||||
// GitHub uses 1-based pages with 30 results, by default
|
||||
return { q: term, page: 1 + Math.floor(offset / 30) };
|
||||
},
|
||||
fetch: function(url, init, queryOptions) {
|
||||
return $.ajax(url).then(function(data) {
|
||||
return {
|
||||
results: $.map(data.items, function(item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name,
|
||||
description: item.description
|
||||
};
|
||||
}),
|
||||
more: (data.total_count > queryOptions.offset + data.items.length)
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
placeholder: 'Search for a repository',
|
||||
templates: {
|
||||
resultItem: function(item) {
|
||||
return (
|
||||
'<div class="selectivity-result-item" data-item-id="' + escape(item.id) + '">' +
|
||||
'<b>' + escape(item.text) + '</b><br>' +
|
||||
escape(item.description) +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// toggle between code samples
|
||||
$('body').on('click', '.handle', function(event) {
|
||||
var active = ($(event.currentTarget).hasClass('jquery') ? 'jquery' : 'react');
|
||||
$('.example-code').removeClass('active');
|
||||
$('.example-code.' + active).addClass('active');
|
||||
$('.handle').removeClass('active');
|
||||
$('.handle.' + active).addClass('active');
|
||||
});
|
||||
252
js/selectivity/selectivity-jquery.css
Normal file
252
js/selectivity/selectivity-jquery.css
Normal file
@@ -0,0 +1,252 @@
|
||||
/**
|
||||
* All CSS that comes with Selectivity.js can be used as is, or tweaked to your heart's content :)
|
||||
*
|
||||
* Please realize though there is no "API contract" regarding styling of CSS classes, meaning that
|
||||
* any customized CSS made may need to be updated without warning if you want to upgrade the
|
||||
* Selectivity version you use. You can mitigate this problem by using your own templates instead of
|
||||
* those defined in src/templates.js, since templates will at the very least continue working across
|
||||
* patch versions and any changes necessary to templates will be documented in the changelog.
|
||||
*/
|
||||
.selectivity-clearfix {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.selectivity-input {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.selectivity-input select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectivity-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.selectivity-placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown
|
||||
*/
|
||||
.selectivity-dropdown {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.15), 0 10px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
z-index: 1046;
|
||||
}
|
||||
|
||||
.selectivity-search-input-container {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.selectivity-search-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selectivity-results-container {
|
||||
max-height: 28em;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectivity-load-more,
|
||||
.selectivity-result-item {
|
||||
cursor: pointer;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.selectivity-result-children .selectivity-result-item {
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
.selectivity-result-children .selectivity-result-item b {
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
|
||||
.selectivity-load-more.highlight,
|
||||
.selectivity-result-item.highlight {
|
||||
background: #4484c7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.selectivity-result-item.disabled {
|
||||
cursor: default;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.selectivity-result-item:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.selectivity-dropdown.has-search-input .selectivity-result-item:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.selectivity-result-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.selectivity-load-more,
|
||||
.selectivity-result-item:last-child,
|
||||
.selectivity-result-children:last-child .selectivity-result-item:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.selectivity-result-children .selectivity-result-item:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.selectivity-error,
|
||||
.selectivity-loading,
|
||||
.selectivity-search-input-container,
|
||||
.selectivity-result-label {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Multi-selection input
|
||||
*/
|
||||
.selectivity-multiple-input-container {
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
cursor: text;
|
||||
max-height: 10em;
|
||||
min-height: calc(2em + 4px);
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.selectivity-multiple-input-container .selectivity-placeholder {
|
||||
height: calc(2em + 4px);
|
||||
line-height: calc(2em + 4px);
|
||||
}
|
||||
|
||||
.selectivity-multiple-input,
|
||||
input[type='text'].selectivity-multiple-input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
float: left;
|
||||
font: inherit;
|
||||
height: calc(2em + 4px);
|
||||
max-width: 100%;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.selectivity-multiple-input:focus,
|
||||
input[type='text'].selectivity-multiple-input:focus {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.selectivity-multiple-input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectivity-multiple-input.selectivity-width-detector {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.selectivity-multiple-selected-item {
|
||||
background: #4484c7;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
float: left;
|
||||
line-height: 2em;
|
||||
margin: 2px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selectivity-multiple-selected-item.highlighted {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.selectivity-multiple-selected-item-remove {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Single-selection input
|
||||
*/
|
||||
.selectivity-single-select {
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
min-height: 2em;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.selectivity-single-select-input {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.selectivity-single-result-container {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 15px;
|
||||
left: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selectivity-single-selected-item {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.selectivity-single-selected-item-remove {
|
||||
color: #000;
|
||||
float: right;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.selectivity-caret {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
.selectivity-single-select {
|
||||
background: #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.selectivity-single-result-container {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.selectivity-caret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Submenu
|
||||
*/
|
||||
.selectivity-submenu-icon {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
5592
js/selectivity/selectivity-jquery.js
Normal file
5592
js/selectivity/selectivity-jquery.js
Normal file
File diff suppressed because it is too large
Load Diff
482
js/selectivity/stylesheet.css
Normal file
482
js/selectivity/stylesheet.css
Normal file
@@ -0,0 +1,482 @@
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
MeyerWeb Reset
|
||||
*******************************************************************************/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Theme Styles
|
||||
*******************************************************************************/
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
color: #373737;
|
||||
background: #212121;
|
||||
font-size: 14px;
|
||||
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #222222;
|
||||
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
clear: both;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
clear: both;
|
||||
font-size: 24px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 15px 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007edf;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
|
||||
transition: color 0.5s ease;
|
||||
transition: text-shadow 0.5s ease;
|
||||
-webkit-transition: color 0.5s ease;
|
||||
-webkit-transition: text-shadow 0.5s ease;
|
||||
-moz-transition: color 0.5s ease;
|
||||
-moz-transition: text-shadow 0.5s ease;
|
||||
-o-transition: color 0.5s ease;
|
||||
-o-transition: text-shadow 0.5s ease;
|
||||
-ms-transition: color 0.5s ease;
|
||||
-ms-transition: text-shadow 0.5s ease;
|
||||
}
|
||||
|
||||
a:hover, a:focus {text-decoration: underline;}
|
||||
|
||||
footer a {
|
||||
color: #F2F2F2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
i, em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 739px;
|
||||
padding: 5px;
|
||||
margin: 10px 0 10px 0;
|
||||
border: 1px solid #ebebeb;
|
||||
|
||||
box-shadow: 0 0 5px #ebebeb;
|
||||
-webkit-box-shadow: 0 0 5px #ebebeb;
|
||||
-moz-box-shadow: 0 0 5px #ebebeb;
|
||||
-o-box-shadow: 0 0 5px #ebebeb;
|
||||
-ms-box-shadow: 0 0 5px #ebebeb;
|
||||
}
|
||||
|
||||
p img {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
width: 100%;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
|
||||
font-size: 11px;
|
||||
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 0 0 20px;
|
||||
border-left: 3px solid #bbb;
|
||||
}
|
||||
|
||||
|
||||
ul, ol, dl {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: inside;
|
||||
list-style: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
list-style: decimal;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
dl p {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin-bottom: 5px;
|
||||
border: none;
|
||||
background: url('../images/bg_hr.png') repeat-x center;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #373737;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
padding: 10px;
|
||||
background: #373737;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
border: 1px solid #373737;
|
||||
}
|
||||
|
||||
form {
|
||||
background: #f2f2f2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Full-Width Styles
|
||||
*******************************************************************************/
|
||||
|
||||
.outer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
max-width: 640px;
|
||||
padding: 20px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#forkme_banner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
padding: 10px 50px 10px 10px;
|
||||
color: #fff;
|
||||
background: url('../images/blacktocat.png') #000 no-repeat 95% 50%;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
#header_wrap {
|
||||
background: #4484c7;
|
||||
}
|
||||
|
||||
#header_wrap .inner {
|
||||
padding: 50px 10px 30px 10px;
|
||||
}
|
||||
|
||||
#project_title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
text-shadow: #111 0px 0px 10px;
|
||||
}
|
||||
|
||||
#project_tagline {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
text-shadow: #111 0px 0px 10px;
|
||||
}
|
||||
|
||||
#downloads {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
z-index: 10;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
background: url('../images/icon_download.png') no-repeat 0% 90%;
|
||||
}
|
||||
|
||||
.tar_download_link {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 90px;
|
||||
height:70px;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
background: url(../images/tar-icon.png) no-repeat;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#main_content_wrap {
|
||||
background: #f2f2f2;
|
||||
border-top: 1px solid #111;
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
|
||||
#main_content {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#footer_wrap {
|
||||
background: #4484c7;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
Examples
|
||||
*******************************************************************************/
|
||||
|
||||
.example-input {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.example-code.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.handles-container {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: -25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.handles {
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
margin: 0 5px 5px;
|
||||
}
|
||||
|
||||
.handle {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background: #ccc;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.handle.active {
|
||||
background: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
.handle:first-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.handle:last-child {
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.attribute {
|
||||
color: #840;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.string {
|
||||
color: #080;
|
||||
}
|
||||
|
||||
.api-example {
|
||||
margin: 10px 0 15px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
Small Device Styles
|
||||
*******************************************************************************/
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#downloads {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner {
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#project_title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.example-input {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
float: none;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user