mirror of
https://github.com/pebble-dev/clay.git
synced 2026-08-27 20:36:33 -04:00
Basic build process and transforming json into html
This commit is contained in:
Keegan
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"extends": "pebble",
|
||||
"env" : {
|
||||
"node": true,
|
||||
"browser": true
|
||||
},
|
||||
"globals": {
|
||||
"Pebble": true,
|
||||
"$": true,
|
||||
"t": true
|
||||
},
|
||||
"rules" : {
|
||||
"new-cap": [0],
|
||||
"max-params": [1]
|
||||
}
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
var browserify = require('browserify');
|
||||
var source = require('vinyl-source-stream');
|
||||
var stringify = require('stringify');
|
||||
var del = require('del');
|
||||
var inline = require('gulp-inline');
|
||||
var minifyInline = require('gulp-minify-inline');
|
||||
var minifyHTML = require('gulp-minify-html');
|
||||
|
||||
gulp.task('clean', function(done) {
|
||||
del(['dist', 'tmp']).then(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('browserify', ['clean'], function(done) {
|
||||
return browserify('src/scripts/config-page.js', { debug: true })
|
||||
.transform(stringify(['.html', '.mustache']))
|
||||
.bundle()
|
||||
.pipe(source('config-page.js'))
|
||||
.pipe(gulp.dest('./tmp/'));
|
||||
});
|
||||
|
||||
gulp.task('inlineHtml', ['clean', 'browserify'], function() {
|
||||
return gulp.src('src/config-page.html')
|
||||
.pipe(inline())
|
||||
.pipe(minifyInline({
|
||||
js: {},
|
||||
jsSelector: 'script[uglify]'
|
||||
}))
|
||||
.pipe(minifyHTML())
|
||||
.pipe(gulp.dest('dist/'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['inlineHtml']);
|
||||
@@ -0,0 +1,95 @@
|
||||
'use strict';
|
||||
|
||||
var configPageHtml = require('./dist/config-page.html');
|
||||
|
||||
function encodeDataUri(input) {
|
||||
if (window.btoa) {
|
||||
return 'data:text/html;base64,' + encodeURIComponent(window.btoa(input));
|
||||
}
|
||||
|
||||
// iOS doesn't have a window so we need to polyfil window.btoa
|
||||
// extracted from https://github.com/inexorabletash/polyfill
|
||||
var B64_ALPHABET =
|
||||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
||||
input = String(input);
|
||||
var position = 0;
|
||||
var out = [];
|
||||
var o1;
|
||||
var o2;
|
||||
var o3;
|
||||
var e1;
|
||||
var e2;
|
||||
var e3;
|
||||
var e4;
|
||||
|
||||
if (/[^\x00-\xFF]/.test(input)) { throw Error('InvalidCharacterError'); }
|
||||
|
||||
while (position < input.length) {
|
||||
o1 = input.charCodeAt(position++);
|
||||
o2 = input.charCodeAt(position++);
|
||||
o3 = input.charCodeAt(position++);
|
||||
|
||||
// 111111 112222 222233 333333
|
||||
e1 = o1 >> 2;
|
||||
e2 = ((o1 & 0x3) << 4) | (o2 >> 4);
|
||||
e3 = ((o2 & 0xf) << 2) | (o3 >> 6);
|
||||
e4 = o3 & 0x3f;
|
||||
|
||||
if (position === input.length + 2) {
|
||||
e3 = 64;
|
||||
e4 = 64;
|
||||
} else if (position === input.length + 1) {
|
||||
e4 = 64;
|
||||
}
|
||||
|
||||
out.push(B64_ALPHABET.charAt(e1),
|
||||
B64_ALPHABET.charAt(e2),
|
||||
B64_ALPHABET.charAt(e3),
|
||||
B64_ALPHABET.charAt(e4));
|
||||
}
|
||||
|
||||
return 'data:text/html;base64,' + encodeURIComponent(out.join(''));
|
||||
}
|
||||
|
||||
function Clay(config) {
|
||||
this.config = config;
|
||||
/**
|
||||
* @type {{}}
|
||||
* @private
|
||||
*/
|
||||
this._defaults = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate the Data URI used by the config Page with settings injected
|
||||
* @param {string} clayData - the entire HTML page as a data URI
|
||||
*/
|
||||
Clay.prototype.generateUrl = function() {
|
||||
var settings;
|
||||
try {
|
||||
settings = JSON.parse(localStorage.getItem('clay-settings')) || {};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
settings = {};
|
||||
}
|
||||
// Show config page
|
||||
return encodeDataUri(configPageHtml
|
||||
.replace('$$CONFIG$$', JSON.stringify(this.config))
|
||||
.replace('$$SETTINGS$$', JSON.stringify(settings))
|
||||
);
|
||||
};
|
||||
|
||||
Clay.prototype.getSettings = function(response) {
|
||||
// Decode and parse config data as JSON
|
||||
var settings = JSON.parse(decodeURIComponent(response));
|
||||
// @todo get defaults in here
|
||||
if (!settings) return {};
|
||||
|
||||
localStorage.setItem('clay-settings', JSON.stringify(settings));
|
||||
};
|
||||
|
||||
Clay.prototype.getDefaults = function() {
|
||||
return this._defaults;
|
||||
};
|
||||
|
||||
module.exports = Clay;
|
||||
@@ -0,0 +1,34 @@
|
||||
'use strict';
|
||||
|
||||
var browserify = require('browserify');
|
||||
var source = require('vinyl-source-stream');
|
||||
var gulp = require('gulp');
|
||||
var path = require('path');
|
||||
var template = require('gulp-template');
|
||||
var stringify = require('stringify');
|
||||
var del = require('del');
|
||||
|
||||
var projectPath = process.argv[2] || process.cwd();
|
||||
var pebbleJsPath = path.resolve(projectPath, 'src/js/pebble-js-app.js');
|
||||
var clayJsPath = path.resolve(projectPath, 'src/js/pebble-clay-js-app.js');
|
||||
|
||||
var warningMessage =
|
||||
'/* Do not edit this file! Use "pebble-clay-js-app.js" instead. */';
|
||||
|
||||
gulp.task('clean', function() {
|
||||
return del([pebbleJsPath]);
|
||||
});
|
||||
|
||||
gulp.task('build', ['clean', 'pebble-js-app'], function() {
|
||||
|
||||
});
|
||||
|
||||
gulp.task('pebble-js-app', function() {
|
||||
browserify(clayJsPath, { debug: false })
|
||||
.transform(stringify(['.html', '.mustache']))
|
||||
.bundle()
|
||||
.pipe(source('pebble-js-app.js'))
|
||||
.pipe(gulp.dest('./src/js/'));
|
||||
});
|
||||
|
||||
gulp.start('build');
|
||||
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="../vendor/pebble-slate/dist/css/slate.min.css">
|
||||
<link rel="stylesheet" href="styles/config-page.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script>
|
||||
window.clayConfig = $$CONFIG$$;
|
||||
window.claySettings = $$SETTINGS$$;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form id="main-form"></form>
|
||||
<script src="../vendor/pebble-slate/dist/js/slate.min.js"></script>
|
||||
<script src="../tmp/config-page.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,158 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* A Clay config Item
|
||||
* @typedef {object} Clay~Item
|
||||
* @property {string} type
|
||||
* @property {string} app_key
|
||||
* @property {string} id
|
||||
* @property {string} content
|
||||
* @property {string|boolean} default
|
||||
* @property {string} label
|
||||
* @property {object} attributes
|
||||
* @property {array} options
|
||||
* @property {array} items
|
||||
*/
|
||||
|
||||
var mustache = require('mustache');
|
||||
var itemTypes = require('./lib/item-types');
|
||||
var $ = require('zepto-browserify').$;
|
||||
|
||||
var config = $.extend(true, [], window.clayConfig || []);
|
||||
var settings = $.extend(true, {}, window.claySettings || {});
|
||||
|
||||
// Get query variables
|
||||
function getQueryParam(variable, defaultValue) {
|
||||
var query = location.search.substring(1);
|
||||
var vars = query.split('&');
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
var pair = vars[i].split('=');
|
||||
|
||||
if (pair[0] === variable) {
|
||||
return decodeURIComponent(pair[1]);
|
||||
}
|
||||
}
|
||||
return defaultValue || false;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
// Set the return URL depending on the runtime environment
|
||||
var return_to = getQueryParam('return_to', 'pebblejs://close#');
|
||||
document.location = return_to + encodeURIComponent(JSON.stringify(settings));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} key
|
||||
* @param {string|boolean} _default
|
||||
* @return {string|boolean}
|
||||
*/
|
||||
function getSetting(key, _default) {
|
||||
return typeof settings[key] !== 'undefined' ? settings[key] : (_default || '');
|
||||
}
|
||||
|
||||
function setSetting(key, value) {
|
||||
settings[key] = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Clay~Item} item
|
||||
* @param {$} $parent
|
||||
*/
|
||||
function processConfigItem(item, $parent) {
|
||||
// @todo add validation on the Item
|
||||
|
||||
if (Array.isArray(item)) {
|
||||
item.forEach(function(item) {
|
||||
processConfigItem(item, $parent);
|
||||
});
|
||||
} else if (item.type === 'section') {
|
||||
processConfigItem(
|
||||
item.items,
|
||||
$('<div class="item-container">').appendTo($parent)
|
||||
);
|
||||
} else if (item.type === 'block') {
|
||||
processConfigItem(
|
||||
item.items,
|
||||
$('<div class="item-container-content">').appendTo($parent)
|
||||
);
|
||||
} else {
|
||||
var apiItem = {};
|
||||
var itemType = itemTypes[item.type];
|
||||
var templateData = $.extend({}, item, {
|
||||
attributes: $.map(item.attributes || [], function(item, key) {
|
||||
return {
|
||||
key: key,
|
||||
// .replace('"', '"'),
|
||||
value: item.toString()
|
||||
// .replace('"', '"')
|
||||
};
|
||||
}),
|
||||
value: typeof itemType.valueTransformer === 'function' ?
|
||||
itemType.valueTransformer(getSetting(item.app_key, item.default), item) :
|
||||
getSetting(item.app_key, item.default)
|
||||
});
|
||||
|
||||
apiItem.$element = $(mustache.render(itemType.template, templateData));
|
||||
apiItem.$manipulatorTarget = apiItem.$element.find('[data-manipulator-target]');
|
||||
apiItem.on = function(events, handler) {
|
||||
return apiItem.$manipulatorTarget.on(events, $.proxy(handler, apiItem));
|
||||
};
|
||||
apiItem.one = function(events, handler) {
|
||||
return apiItem.$manipulatorTarget.one(events, $.proxy(handler, apiItem));
|
||||
};
|
||||
apiItem.off = apiItem.$manipulatorTarget.off.bind(apiItem.$manipulatorTarget);
|
||||
apiItem.triggerHandler =
|
||||
apiItem.$manipulatorTarget.triggerHandler.bind(apiItem.$manipulatorTarget);
|
||||
|
||||
// attach the manipulator methods the the apiItem
|
||||
$.each(itemType.manipulator, function(methodName, method) {
|
||||
apiItem[methodName] = method.bind(apiItem);
|
||||
});
|
||||
|
||||
apiItem.config = item;
|
||||
|
||||
if (item.id) {
|
||||
_interface.itemsById[item.id] = apiItem;
|
||||
}
|
||||
|
||||
if (item.app_key) {
|
||||
_interface.itemsByAppKey[item.app_key] = apiItem;
|
||||
}
|
||||
|
||||
_interface.items.push(apiItem);
|
||||
|
||||
$parent.append(apiItem.$element);
|
||||
}
|
||||
}
|
||||
|
||||
var _interface = {
|
||||
items: [],
|
||||
itemsById: {},
|
||||
itemsByAppKey: {}
|
||||
};
|
||||
|
||||
var $mainForm = $('#main-form');
|
||||
|
||||
_interface.getItemByAppKey = function(key) {
|
||||
return _interface.itemsByAppKey[key];
|
||||
};
|
||||
|
||||
_interface.getItemById = function(key) {
|
||||
return _interface.itemsById[key];
|
||||
};
|
||||
|
||||
_interface.getItemsByType = function(type) {
|
||||
return _interface.items.filter(function(item) {
|
||||
return item.config.type === type;
|
||||
});
|
||||
};
|
||||
|
||||
processConfigItem(config, $mainForm, 0);
|
||||
|
||||
$mainForm.submit(submit);
|
||||
|
||||
module.exports = _interface;
|
||||
window._interface = _interface;
|
||||
|
||||
console.log(_interface);
|
||||
@@ -0,0 +1,49 @@
|
||||
'use strict';
|
||||
|
||||
var manipulators = require('./manipulators');
|
||||
|
||||
module.exports = {
|
||||
heading: {
|
||||
template: require('../../templates/components/heading.mustache'),
|
||||
manipulator: manipulators.html
|
||||
},
|
||||
subheading: {
|
||||
template: require('../../templates/components/subheading.mustache'),
|
||||
manipulator: manipulators.html
|
||||
},
|
||||
footer: {
|
||||
template: require('../../templates/components/footer.mustache'),
|
||||
manipulator: manipulators.html
|
||||
},
|
||||
input: {
|
||||
template: require('../../templates/components/input.mustache'),
|
||||
manipulator: manipulators.val
|
||||
},
|
||||
color: {
|
||||
template: require('../../templates/components/color.mustache'),
|
||||
manipulator: manipulators.val
|
||||
},
|
||||
select: {
|
||||
template: require('../../templates/components/select.mustache'),
|
||||
manipulator: manipulators.val,
|
||||
valueTransformer: function(rawValue, item) {
|
||||
item.options.forEach(function(option, index) {
|
||||
if (option.value === rawValue) {
|
||||
item.options[index].selected = 'selected';
|
||||
}
|
||||
});
|
||||
return rawValue;
|
||||
}
|
||||
},
|
||||
toggle: {
|
||||
template: require('../../templates/components/toggle.mustache'),
|
||||
manipulator: manipulators.checked,
|
||||
valueTransformer: function(rawValue) {
|
||||
return rawValue ? 'checked' : '';
|
||||
}
|
||||
},
|
||||
submit: {
|
||||
template: require('../../templates/components/submit.mustache'),
|
||||
manipulator: manipulators.val
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
html: {
|
||||
get: function() {
|
||||
return this.$manipulatorTarget.html();
|
||||
},
|
||||
set: function(value) {
|
||||
return this.$manipulatorTarget.html(value)
|
||||
.triggerHandler('change');
|
||||
}
|
||||
},
|
||||
val: {
|
||||
get: function() {
|
||||
return this.$manipulatorTarget.val();
|
||||
},
|
||||
set: function(value) {
|
||||
return this.$manipulatorTarget.val(value)
|
||||
.triggerHandler('change');
|
||||
},
|
||||
disable: function() {
|
||||
return this.$manipulatorTarget.prop('disabled', true)
|
||||
.triggerHandler('change');
|
||||
},
|
||||
enable: function() {
|
||||
return this.$manipulatorTarget.prop('disabled', false)
|
||||
.triggerHandler('change');
|
||||
}
|
||||
},
|
||||
checked: {
|
||||
get: function() {
|
||||
return this.$manipulatorTarget.prop('checked');
|
||||
},
|
||||
set: function(value) {
|
||||
return this.$manipulatorTarget.prop('checked', value)
|
||||
.triggerHandler('change');
|
||||
},
|
||||
disable: function() {
|
||||
return this.$manipulatorTarget.prop('disabled', true)
|
||||
.triggerHandler('change');
|
||||
},
|
||||
enable: function() {
|
||||
return this.$manipulatorTarget.prop('disabled', false)
|
||||
.triggerHandler('change');
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display:none;
|
||||
}
|
||||
.item-styled-color .value {
|
||||
box-sizing: border-box;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
margin-top: 0;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
input[type="button"]:disabled {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
#cancel-btn {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
#cancel-btn,
|
||||
#save-btn {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#main-form {
|
||||
min-height: 100%;
|
||||
/* equal to footer height */
|
||||
margin-bottom: -1.5rem;
|
||||
}
|
||||
|
||||
#main-form:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
footer, #main-form:after {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: table;
|
||||
width:100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<label class="item">
|
||||
<span class="label">{{label}}</span>
|
||||
<input data-manipulator-target type="text" class="item-color item-color-normal" value="{{value}}">
|
||||
</label>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div data-manipulator-target class="item-container-footer">
|
||||
{{&content}}
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="item-container-header">
|
||||
<h1 data-manipulator-target>{{&content}}</h1>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<label class="item">
|
||||
<span class="label">{{label}}</span>
|
||||
<div class="item-input-wrapper">
|
||||
<input data-manipulator-target
|
||||
class="item-input"
|
||||
value="{{value}}"
|
||||
type="text"
|
||||
{{#attributes}} {{key}}="{{value}}" {{/attributes}}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
@@ -0,0 +1,8 @@
|
||||
<label class="item">
|
||||
<span class="label">{{label}}</span>
|
||||
<select data-manipulator-target class="item-select">
|
||||
{{#options}}
|
||||
<option value="{{value}}" {{selected}} class="item-select-option">{{&label}}</option>
|
||||
{{/options}}
|
||||
</select>
|
||||
</label>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="item-container-header">
|
||||
<h2 data-manipulator-target>{{&content}}</h2>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="button-container">
|
||||
<input data-manipulator-target type="submit" class="item-button" value="{{label}}">
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<label class="item">
|
||||
<span class="label">{{label}}</span>
|
||||
<input data-manipulator-target type="checkbox" class="item-toggle" {{value}}>
|
||||
</label>
|
||||
Vendored
+21
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Slate",
|
||||
"homepage": "https://github.com/pebble/slate",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"_release": "81d6db0ccd",
|
||||
"_resolution": {
|
||||
"type": "branch",
|
||||
"branch": "master",
|
||||
"commit": "81d6db0ccd64e455985c01683fed4fd287970637"
|
||||
},
|
||||
"_source": "git@github.com:keegan-lillo/slate.git",
|
||||
"_target": "master",
|
||||
"_originalSource": "git@github.com:keegan-lillo/slate.git"
|
||||
}
|
||||
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
|
||||
0.0.3 / 2015-07-29
|
||||
==================
|
||||
|
||||
* Change PFDinDisplayPro-Regular to PFDinDisplayPro-Light.
|
||||
* Use the web fonts as a fallback for when system font is unavailable.
|
||||
|
||||
0.0.2 / 2015-07-29
|
||||
==================
|
||||
|
||||
* Fix font imports.
|
||||
|
||||
0.0.1 / 2015-07-07
|
||||
==================
|
||||
|
||||
* Initial release
|
||||
Vendored
+22
@@ -0,0 +1,22 @@
|
||||
(The MIT License)
|
||||
|
||||
Copyright (c) 2015 Pebble Technology
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
Vendored
+312
@@ -0,0 +1,312 @@
|
||||
Slate
|
||||
=====
|
||||
|
||||
|
||||
|
||||
Slate is a front-end framework for developing Pebble mobile configuration pages.
|
||||
It's the fastest way to make a clean UI for a Pebble app's mobile configuration
|
||||
page.
|
||||
|
||||
|
||||
|
||||
Getting Started
|
||||
---------------
|
||||
|
||||
### Getting Slate
|
||||
|
||||
There are only four files that makeup the Slate framework, a CSS file and a
|
||||
JavaScript file, and two fonts.
|
||||
|
||||
There are two quick ways to getting started with Slate.
|
||||
|
||||
#### Via Download
|
||||
|
||||
The CSS and JS files and fonts are also available via download.
|
||||
|
||||
[Download Slate 0.0.3 >](https://github.com/pebble/slate/archive/v0.0.3.zip)
|
||||
|
||||
#### Via Bower
|
||||
|
||||
The CSS and JS files and fonts are also avaliable via Bower.
|
||||
|
||||
```bash
|
||||
bower install pebble-slate
|
||||
```
|
||||
|
||||
### Zepto.js
|
||||
|
||||
Slate is also bundled with [Zepto.js](https://github.com/madrobby/zepto), which
|
||||
is "a minimalist JavaScript library for modern browsers with a largely
|
||||
jQuery-compatible API."
|
||||
|
||||
Video Tutorial
|
||||
--------------
|
||||
|
||||
A detailed live demo tutorial was given at the Pebble SF Meetup, and can be
|
||||
watched in full below.
|
||||
|
||||
[](http://www.youtube.com/watch?v=TtP7z6wceqI)
|
||||
|
||||
Additionally, the example app used in the video
|
||||
[can be found here](https://github.com/pebble-hacks/slate-watchface-template),
|
||||
while a second example implementation
|
||||
[can be found here](https://github.com/pebble-examples/slate-config-example).
|
||||
|
||||
Documentation
|
||||
-------------
|
||||
|
||||
Here is a list of the different components you can create with Slate.
|
||||
|
||||
### Paragraphs
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-content">
|
||||
<div class="item">
|
||||
Abilities or he perfectly pretended so strangers be exquisite. Oh to
|
||||
another chamber pleased imagine do in. Went me rank at last loud shot an
|
||||
draw. Excellent so to no sincerity smallness. Removal request delight if
|
||||
on he we. Unaffected in we by apartments astonished to decisively
|
||||
themselves. Offended ten old consider speaking.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Headers, Footers, and Items
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Single Item</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-toggle" name="toggle-1" checked>
|
||||
</label>
|
||||
</div>
|
||||
<div class="item-container-footer">
|
||||
Comfort reached gay perhaps chamber his six detract besides add. Moonlight
|
||||
newspaper up he it enjoyment agreeable depending. Timed
|
||||
<a href="#">voice share</a> led his widen noisy young.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Toggles and Selects
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Multiple Items</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-toggle" name="toggle-2" checked>
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-toggle" name="toggle-3">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<select name="select-1" dir='rtl' class="item-select">
|
||||
<option class="item-select-option">Both</option>
|
||||
<option class="item-select-option" selected>Major only</option>
|
||||
<option class="item-select-option">Minor only</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Checkboxes
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Checkboxes</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-checkbox" name="checkbox-1">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-checkbox" name="checkbox-2" checked>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Radio Buttons
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Radio Buttons</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="radio" class="item-radio" name="radio-1" value="a">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="radio" class="item-radio" name="radio-1" value="b">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="radio" class="item-radio" name="radio-1" value="c" checked>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Date, Time, and Colorpickers
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Date, Time, Colorpickers</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="time" class="item-time" name="time-1" value="18:35">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="date" class="item-date" name="date-1" value="2015-02-12">
|
||||
</label>
|
||||
<label class="item">
|
||||
Normal Color Picker
|
||||
<input type="text" class="item-color item-color-normal" name="color-1" value="#000000">
|
||||
</label>
|
||||
<label class="item">
|
||||
Sunny Color Picker
|
||||
<input type="text" class="item-color item-color-sunny" name="color-2" value="#000000">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Input Fields
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Input Field</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<div class="item-input-wrapper">
|
||||
<input type="text" class="item-input" name="input-1" placeholder="Input field">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Input Fields with Buttons
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Input Field + Send Button</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<div class="item-input-wrapper item-input-wrapper-button">
|
||||
<input type="text" class="item-input" name="input-2" placeholder="Input field">
|
||||
</div>
|
||||
<input type="button" class="item-button item-input-button" value="SEND">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Tab Buttons
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Tab Buttons</div>
|
||||
<div class="item-container-content">
|
||||
<div class="item tab-buttons">
|
||||
<a name="tab-1" class="tab-button active">Both</a>
|
||||
<a name="tab-1" class="tab-button">Celcius</a>
|
||||
<a name="tab-1" class="tab-button">Fahrenheit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sliders
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Slider</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<input type="range" class="item-slider" name="slider-1" value="50">
|
||||
<div class="item-input-wrapper item-slider-text">
|
||||
<input type="text" class="item-input" name="slider-1" value="50">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Draggable Lists
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">draggable Items</div>
|
||||
<div class="item-container-content">
|
||||
<div class="item-draggable-list">
|
||||
<label class="item">Example Item 1</label>
|
||||
<label class="item">Example Item 2</label>
|
||||
<label class="item">Example Item 3</label>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Lists
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Item List</div>
|
||||
<div class="item-container-content">
|
||||
<div class="item-dynamic-list">
|
||||
<label class="item">Example Item A</label>
|
||||
<label class="item">Example Item B</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Buttons
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<div class="item-container">
|
||||
<div class="button-container">
|
||||
<input type="button" class="item-button" value="SEND">
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "Slate",
|
||||
"version": "0.0.3",
|
||||
"homepage": "https://github.com/pebble/slate",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
+485
@@ -0,0 +1,485 @@
|
||||
@font-face {
|
||||
font-family: 'PFDinDisplayProLightWebfont';
|
||||
src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal; }
|
||||
@font-face {
|
||||
font-family: 'PTSansRegularWebfont';
|
||||
src: url("../fonts/PTSans-regular.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal; }
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
*:focus {
|
||||
outline-width: 0; }
|
||||
|
||||
a {
|
||||
color: #FF4700;
|
||||
text-decoration: none; }
|
||||
|
||||
body {
|
||||
background-color: #EAEAEA;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important; }
|
||||
|
||||
body, select, input[type=text], input[type=time], input[type=date] {
|
||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
||||
font-weight: normal; }
|
||||
|
||||
select, input[type=time], input[type=date] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
color: #A8A8A8;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: #F7F7F7; }
|
||||
|
||||
input[type=date] {
|
||||
direction: rtl; }
|
||||
|
||||
select {
|
||||
right: 30px;
|
||||
top: 14px; }
|
||||
|
||||
input[type=time] {
|
||||
right: 10px !important; }
|
||||
|
||||
input[type=date] {
|
||||
right: 10px !important; }
|
||||
|
||||
.select-triangle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid #FF4700; }
|
||||
|
||||
.item-container {
|
||||
color: #333333;
|
||||
margin-top: 15px; }
|
||||
|
||||
.item-container-header {
|
||||
padding: 3px 10px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
|
||||
font-size: .8em;
|
||||
font-weight: normal;
|
||||
color: #A8A8A8; }
|
||||
|
||||
.item-container-content {
|
||||
background-color: #F7F7F7;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
border-bottom: 1px solid #DEDEDE; }
|
||||
|
||||
.item-container-footer {
|
||||
padding: 3px 10px;
|
||||
font-size: .7em;
|
||||
line-height: 1.4em;
|
||||
color: #A8A8A8; }
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow: hidden; }
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #DEDEDE; }
|
||||
|
||||
.item-subtitle-wrapper {
|
||||
font-size: 1em; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
||||
top: 16px; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-checkbox {
|
||||
top: 18px; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-radio {
|
||||
top: 16px; }
|
||||
|
||||
.item-subtitle-wrapper .item-draggable-handle {
|
||||
top: 18px; }
|
||||
|
||||
.item-subtitle {
|
||||
font-size: .7em;
|
||||
line-height: .7em;
|
||||
padding: .3em 0; }
|
||||
|
||||
.item-styled-toggle-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: background-color; }
|
||||
|
||||
.item-styled-toggle {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
top: 1px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: left; }
|
||||
|
||||
.item-toggle {
|
||||
display: none; }
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper {
|
||||
background-color: #A8A8A8; }
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 1px; }
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 27px; }
|
||||
|
||||
.item-styled-toggle-bar {
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
margin-left: 3px;
|
||||
background-color: #EAEAEA;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
top: 7px; }
|
||||
|
||||
.item-styled-checkbox {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 5px;
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
.item-checkbox {
|
||||
display: none; }
|
||||
|
||||
.item-checkbox + .item-styled-checkbox {
|
||||
border-color: #DEDEDE; }
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox {
|
||||
border-color: #FF4700;
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: #F7F7F7;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
|
||||
.item-styled-radio {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 12px;
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
.item-radio {
|
||||
display: none; }
|
||||
|
||||
.item-radio + .item-styled-radio {
|
||||
border-color: #DEDEDE; }
|
||||
|
||||
.item-radio:checked + .item-styled-radio {
|
||||
border-color: #FF4700;
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-radio:checked + .item-styled-radio:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: #F7F7F7;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
|
||||
.item-color {
|
||||
display: none; }
|
||||
|
||||
.item-styled-color {
|
||||
background: #F7F7F7; }
|
||||
.item-styled-color .value {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: #A8A8A8;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
.item-styled-color .color-box-wrap {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0;
|
||||
margin: 0.6em 0 0em; }
|
||||
.item-styled-color .color-box-wrap.show {
|
||||
display: block; }
|
||||
.item-styled-color .color-box-wrap .color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box {
|
||||
float: left;
|
||||
cursor: pointer; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
|
||||
border-top-left-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
|
||||
border-top-right-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
|
||||
border-bottom-left-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
|
||||
border-bottom-right-radius: 5px; }
|
||||
|
||||
.item-date, .item-time {
|
||||
position: absolute;
|
||||
color: #F7F7F7 !important; }
|
||||
|
||||
.item-styled-date, .item-styled-time {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
color: #A8A8A8;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: #F7F7F7; }
|
||||
|
||||
.item-input-wrapper {
|
||||
border-radius: 5px;
|
||||
border: 2px solid #DEDEDE; }
|
||||
|
||||
.item-input-wrapper-button {
|
||||
box-sizing: border-box;
|
||||
width: 77%; }
|
||||
|
||||
.item-input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0 10px 7px 10px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.button-container {
|
||||
text-align: center; }
|
||||
|
||||
.item-button {
|
||||
width: 60%;
|
||||
height: 35px;
|
||||
background-color: #FF4700;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
.item-input-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 20%; }
|
||||
|
||||
.tab-buttons {
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
|
||||
.tab-button {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: #FF4700;
|
||||
border: 1px solid #FF4700;
|
||||
border-right-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
right: -1px; }
|
||||
|
||||
.tab-button:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-right-width: 0; }
|
||||
|
||||
.tab-button:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-right-width: 1px; }
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #FF4700;
|
||||
color: #F7F7F7; }
|
||||
|
||||
.item-slider {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
height: 30px;
|
||||
width: 79%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-top: -10px; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -1001px;
|
||||
height: 2px;
|
||||
width: 1000px;
|
||||
background: #FF4700; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
top: -13px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #EAEAEA; }
|
||||
|
||||
.item-slider::-webkit-slider-runnable-track {
|
||||
height: 2px;
|
||||
background-color: #DEDEDE; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb:after {
|
||||
content: "lll";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: #DEDEDE;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px; }
|
||||
|
||||
.item-slider-text {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
width: 16%; }
|
||||
|
||||
.item-slider-text .item-input {
|
||||
text-align: center; }
|
||||
|
||||
.delete-item {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
border-radius: 6px; }
|
||||
|
||||
.delete-item:before, .delete-item:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: #A8A8A8;
|
||||
border-radius: 2px;
|
||||
top: 16px; }
|
||||
|
||||
.delete-item:before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
left: 3px; }
|
||||
|
||||
.delete-item:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 3px; }
|
||||
|
||||
.add-item {
|
||||
color: #FF4700; }
|
||||
|
||||
.item-draggable-handle {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
height: 28px;
|
||||
width: 28px; }
|
||||
|
||||
.item-draggable-handle-bar {
|
||||
margin-top: 5px;
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
background-color: #A8A8A8;
|
||||
text-align: center; }
|
||||
|
||||
[draggable=true] {
|
||||
background-color: #F7F7F7;
|
||||
border: 2px solid #EAEAEA;
|
||||
border-radius: 2px; }
|
||||
+1
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Vendored
+381
File diff suppressed because one or more lines are too long
+2
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Vendored
+54
@@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<title>Your Project</title>
|
||||
|
||||
<!-- Flatdoc -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/legacy.js'></script>
|
||||
<script src='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/flatdoc.js'></script>
|
||||
|
||||
<!-- Flatdoc theme -->
|
||||
<link href='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/theme-white/style.css' rel='stylesheet'>
|
||||
<script src='https://cdn.rawgit.com/rstacruz/flatdoc/v0.9.0/theme-white/script.js'></script>
|
||||
|
||||
<!-- Meta -->
|
||||
<meta content="Your Project" property="og:title">
|
||||
<meta content="Your Project description goes here." name="description">
|
||||
|
||||
<!-- Initializer -->
|
||||
<script>
|
||||
Flatdoc.run({
|
||||
fetcher: Flatdoc.file('../README.md')
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body role='flatdoc'>
|
||||
|
||||
<div class='header'>
|
||||
<div class='left'>
|
||||
<h1>Your Project</h1>
|
||||
<ul>
|
||||
<li><a href='https://github.com/USER/REPO'>View on GitHub</a></li>
|
||||
<li><a href='https://github.com/USER/REPO/issues'>Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='right'>
|
||||
<!-- GitHub buttons: see http://ghbtns.com -->
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=USER&repo=REPO&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='content-root'>
|
||||
<div class='menubar'>
|
||||
<div class='menu section' role='flatdoc-menu'></div>
|
||||
</div>
|
||||
<div role='flatdoc-content' class='content'></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../dist/css/slate.css">
|
||||
</head>
|
||||
<body>
|
||||
<form id="main-form">
|
||||
<div class="item-container">
|
||||
<div class="item-container-content">
|
||||
<div class="item">
|
||||
Abilities or he perfectly pretended so strangers be exquisite. Oh to
|
||||
another chamber pleased imagine do in. Went me rank at last loud shot an
|
||||
draw. Excellent so to no sincerity smallness. Removal request delight if
|
||||
on he we. Unaffected in we by apartments astonished to decisively
|
||||
themselves. Offended ten old consider speaking.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Single Item</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-toggle" name="toggle-1" checked>
|
||||
</label>
|
||||
</div>
|
||||
<div class="item-container-footer">
|
||||
Comfort reached gay perhaps chamber his six detract besides add. Moonlight
|
||||
newspaper up he it enjoyment agreeable depending. Timed
|
||||
<a href="#">voice share</a> led his widen noisy young.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Multiple Items</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-toggle" name="toggle-2" checked>
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-toggle" name="toggle-3">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<select name="select-1" dir='rtl' class="item-select">
|
||||
<option class="item-select-option">Both</option>
|
||||
<option class="item-select-option" selected>Major only</option>
|
||||
<option class="item-select-option">Minor only</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Date, Time, Colorpickers</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="time" class="item-time" name="time-1" value="18:35">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="date" class="item-date" name="date-1" value="2015-02-12">
|
||||
</label>
|
||||
<label class="item">
|
||||
Normal Color Picker
|
||||
<input type="text" class="item-color item-color-normal" name="color-1" value="0xFFFFFF">
|
||||
</label>
|
||||
<label class="item">
|
||||
Sunny Color Picker
|
||||
<input type="text" class="item-color item-color-sunny" name="color-1" value="0xFFFFFF">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Checkboxes</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-checkbox" name="checkbox-1">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="checkbox" class="item-checkbox" name="checkbox-2" checked>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Radio Buttons</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="radio" class="item-radio" name="radio-1" value="a">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="radio" class="item-radio" name="radio-1" value="b">
|
||||
</label>
|
||||
<label class="item">
|
||||
Example Item
|
||||
<input type="radio" class="item-radio" name="radio-1" value="c" checked>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Subtitles</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item item-subtitle-wrapper">
|
||||
Example Item
|
||||
<div class="item-subtitle">Some example subtitle</div>
|
||||
<input type="checkbox" class="item-toggle" name="toggle-4" checked>
|
||||
</label>
|
||||
<label class="item item-subtitle-wrapper">
|
||||
Example Item
|
||||
<div class="item-subtitle">Some example subtitle</div>
|
||||
<input type="checkbox" class="item-checkbox" name="checkbox-3">
|
||||
</label>
|
||||
<label class="item item-subtitle-wrapper">
|
||||
Example Item
|
||||
<div class="item-subtitle">Some example subtitle</div>
|
||||
<input type="radio" class="item-radio" name="radio-2" value="a" checked>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Input Field</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<div class="item-input-wrapper">
|
||||
<input type="text" class="item-input" name="input-1" placeholder="Input field">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Tab Buttons</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item tab-buttons">
|
||||
<a name="tab-1" class="tab-button active">Both</a>
|
||||
<a name="tab-1" class="tab-button">Celcius</a>
|
||||
<a name="tab-1" class="tab-button">Fahrenheit</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Slider</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<input type="range" class="item-slider" name="slider-1" value="50">
|
||||
<div class="item-input-wrapper item-slider-text">
|
||||
<input type="text" class="item-input" name="slider-1" value="50">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Input Field + Send Button</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<div class="item-input-wrapper item-input-wrapper-button">
|
||||
<input type="text" class="item-input" name="input-2" placeholder="Input field">
|
||||
</div>
|
||||
<input type="button" class="item-button item-input-button" value="SEND">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">draggable Items</div>
|
||||
<div class="item-container-content">
|
||||
<div class="item-draggable-list">
|
||||
<label class="item">Example Item 1</label>
|
||||
<label class="item">Example Item 2</label>
|
||||
<label class="item">Example Item 3</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">Item List</div>
|
||||
<div class="item-container-content">
|
||||
<div class="item-dynamic-list">
|
||||
<label class="item">Example Item A</label>
|
||||
<label class="item">Example Item B</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="button-container">
|
||||
<input type="button" class="item-button" value="SEND">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script type="text/javascript" src="../dist/js/slate.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
## MIT LICENSE
|
||||
Copyright 2013-2015 Lebedev Konstantin <ibnRubaXa@gmail.com>
|
||||
http://rubaxa.github.io/Sortable/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
+51
@@ -0,0 +1,51 @@
|
||||
// jshint ignore: start
|
||||
var gulp = require('gulp'),
|
||||
rimraf = require('rimraf'),
|
||||
concat = require('gulp-concat'),
|
||||
sass = require('gulp-ruby-sass'),
|
||||
notify = require('gulp-notify'),
|
||||
uglifycss = require('gulp-uglifycss'),
|
||||
uglify = require('gulp-uglify');
|
||||
|
||||
var config = {
|
||||
srcName: 'main',
|
||||
libName: 'slate',
|
||||
fontPath: './lib/fonts',
|
||||
sassPath: './lib/sass',
|
||||
extPath: './external',
|
||||
jsPath: './lib/js',
|
||||
distPath: './dist'
|
||||
};
|
||||
|
||||
gulp.task('clean', function(cb) {
|
||||
rimraf(config.distPath, cb);
|
||||
});
|
||||
|
||||
gulp.task('css', function() {
|
||||
return sass(config.sassPath + '/' + config.srcName + '.scss')
|
||||
.on("error", notify.onError(function (error) {
|
||||
return "Error: " + error.message;
|
||||
}))
|
||||
.pipe(concat(config.libName + '.css'))
|
||||
.pipe(gulp.dest(config.distPath + '/css'))
|
||||
.pipe(concat(config.libName + '.min.css'))
|
||||
.pipe(uglifycss())
|
||||
.pipe(gulp.dest(config.distPath + '/css'));
|
||||
});
|
||||
|
||||
gulp.task('js', function() {
|
||||
return gulp.src([config.extPath + '/*/*.js', config.jsPath + '/*.js'])
|
||||
.pipe(concat(config.libName + '.js'))
|
||||
.pipe(gulp.dest(config.distPath + '/js'))
|
||||
.pipe(uglify())
|
||||
.pipe(concat(config.libName + '.min.js'))
|
||||
.pipe(gulp.dest(config.distPath + '/js'));
|
||||
});
|
||||
|
||||
gulp.task('fonts', function() {
|
||||
return gulp.src(config.fontPath + '/*')
|
||||
.pipe(gulp.dest(config.distPath + '/fonts'));
|
||||
});
|
||||
|
||||
gulp.task('build', ['css', 'js', 'fonts']);
|
||||
gulp.task('default', ['build']);
|
||||
Binary file not shown.
Binary file not shown.
Vendored
+377
@@ -0,0 +1,377 @@
|
||||
'use strict';
|
||||
|
||||
(function($, Sortable) {
|
||||
|
||||
var ENUMS = {
|
||||
COLOR : {
|
||||
EMPTY: 'transparent'
|
||||
}
|
||||
}
|
||||
|
||||
$.extend($.fn, {
|
||||
itemToggle: function() {
|
||||
this.each(function() {
|
||||
var $checkbox = $(this);
|
||||
var item = $checkbox.parent();
|
||||
|
||||
var $injectedCheckbox = $('<div class="item-styled-toggle-wrapper">'
|
||||
+ '<div class="item-styled-toggle">'
|
||||
+ '<div class="item-styled-toggle-bar"></div>'
|
||||
+ '<div class="item-styled-toggle-bar"></div>'
|
||||
+ '<div class="item-styled-toggle-bar"></div>'
|
||||
+ '</div>'
|
||||
+ '</div>');
|
||||
|
||||
item.append($injectedCheckbox);
|
||||
});
|
||||
},
|
||||
|
||||
itemCheckbox: function() {
|
||||
this.each(function() {
|
||||
var $checkbox = $(this);
|
||||
var item = $checkbox.parent();
|
||||
|
||||
var $injectedCheckbox = $('<div class="item-styled-checkbox"></div>');
|
||||
|
||||
item.append($injectedCheckbox);
|
||||
});
|
||||
},
|
||||
|
||||
itemSelect: function() {
|
||||
this.each(function() {
|
||||
var $select = $(this);
|
||||
var $item = $select.parent();
|
||||
|
||||
$item.append('<div class="select-triangle"></div>');
|
||||
});
|
||||
},
|
||||
|
||||
itemDate: function() {
|
||||
this.each(function() {
|
||||
var $date = $(this);
|
||||
var $item = $date.parent();
|
||||
|
||||
var $injectedDate = $('<div class="item-styled-date"></div>');
|
||||
updateDate();
|
||||
|
||||
$item.append($injectedDate);
|
||||
|
||||
$date.change(function() {
|
||||
updateDate();
|
||||
});
|
||||
|
||||
function updateDate() {
|
||||
$injectedDate.html($date.val());
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
itemTime: function() {
|
||||
this.each(function() {
|
||||
var $time = $(this);
|
||||
var $item = $time.parent();
|
||||
|
||||
var $injectedTime = $('<div class="item-styled-time"></div>');
|
||||
updateTime();
|
||||
|
||||
$item.append($injectedTime);
|
||||
|
||||
$time.change(function() {
|
||||
updateTime();
|
||||
});
|
||||
|
||||
function updateTime() {
|
||||
$injectedTime.html($time.val());
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
itemRadio: function() {
|
||||
this.each(function() {
|
||||
var $radio = $(this);
|
||||
var $item = $radio.parent();
|
||||
|
||||
var $injectedRadio = $('<div class="item-styled-radio"></div>');
|
||||
|
||||
$item.append($injectedRadio);
|
||||
});
|
||||
},
|
||||
|
||||
itemColor: function(options){
|
||||
|
||||
var options = $.extend({}, {
|
||||
sunny: false
|
||||
}, options || {});
|
||||
|
||||
var layout = [
|
||||
[false , false , '#55FF00', '#AAFF55', false , '#FFFF55', '#FFFFAA', false , false ],
|
||||
[false , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false ],
|
||||
['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
|
||||
['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
|
||||
[false , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false ],
|
||||
['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
|
||||
['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
|
||||
[false , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false ],
|
||||
[false , false , false , '#AAAAFF', '#AA55FF', '#AA55AA', false , false , false ],
|
||||
];
|
||||
|
||||
var mappingSunny = {'000000': '000000','000055': '001e41','0000aa': '004387',
|
||||
'0000ff': '0068ca','005500': '2b4a2c','005555': '27514f',
|
||||
'0055aa': '16638d','0055ff': '007dce','00aa00': '5e9860',
|
||||
'00aa55': '5c9b72','00aaaa': '57a5a2','00aaff': '4cb4db',
|
||||
'00ff00': '8ee391','00ff55': '8ee69e','00ffaa': '8aebc0',
|
||||
'00ffff': '84f5f1','550000': '4a161b','550055': '482748',
|
||||
'5500aa': '40488a','5500ff': '2f6bcc','555500': '564e36',
|
||||
'555555': '545454','5555aa': '4f6790','5555ff': '4180d0',
|
||||
'55aa00': '759a64','55aa55': '759d76','55aaaa': '71a6a4',
|
||||
'55aaff': '69b5dd','55ff00': '9ee594','55ff55': '9de7a0',
|
||||
'55ffaa': '9becc2','55ffff': '95f6f2','aa0000': '99353f',
|
||||
'aa0055': '983e5a','aa00aa': '955694','aa00ff': '8f74d2',
|
||||
'aa5500': '9d5b4d','aa5555': '9d6064','aa55aa': '9a7099',
|
||||
'aa55ff': '9587d5','aaaa00': 'afa072','aaaa55': 'aea382',
|
||||
'aaaaaa': 'ababab','ffffff': 'ffffff','aaaaff': 'a7bae2',
|
||||
'aaff00': 'c9e89d','aaff55': 'c9eaa7','aaffaa': 'c7f0c8',
|
||||
'aaffff': 'c3f9f7','ff0000': 'e35462','ff0055': 'e25874',
|
||||
'ff00aa': 'e16aa3','ff00ff': 'de83dc','ff5500': 'e66e6b',
|
||||
'ff5555': 'e6727c','ff55aa': 'e37fa7','ff55ff': 'e194df',
|
||||
'ffaa00': 'f1aa86','ffaa55': 'f1ad93','ffaaaa': 'efb5b8',
|
||||
'ffaaff': 'ecc3eb','ffff00': 'ffeeab','ffff55': 'fff1b5',
|
||||
'ffffaa': 'fff6d3'};
|
||||
|
||||
var mappingNormal = {'000000': '000000','001e41': '000055','004387': '0000aa',
|
||||
'0068ca': '0000ff','2b4a2c': '005500','27514f': '005555',
|
||||
'16638d': '0055aa','007dce': '0055ff','5e9860': '00aa00',
|
||||
'5c9b72': '00aa55','57a5a2': '00aaaa','4cb4db': '00aaff',
|
||||
'8ee391': '00ff00','8ee69e': '00ff55','8aebc0': '00ffaa',
|
||||
'84f5f1': '00ffff','4a161b': '550000','482748': '550055',
|
||||
'40488a': '5500aa','2f6bcc': '5500ff','564e36': '555500',
|
||||
'545454': '555555','4f6790': '5555aa','4180d0': '5555ff',
|
||||
'759a64': '55aa00','759d76': '55aa55','71a6a4': '55aaaa',
|
||||
'69b5dd': '55aaff','9ee594': '55ff00','9de7a0': '55ff55',
|
||||
'9becc2': '55ffaa','95f6f2': '55ffff','99353f': 'aa0000',
|
||||
'983e5a': 'aa0055','955694': 'aa00aa','8f74d2': 'aa00ff',
|
||||
'9d5b4d': 'aa5500','9d6064': 'aa5555','9a7099': 'aa55aa',
|
||||
'9587d5': 'aa55ff','afa072': 'aaaa00','aea382': 'aaaa55',
|
||||
'ababab': 'aaaaaa','ffffff': 'ffffff','a7bae2': 'aaaaff',
|
||||
'c9e89d': 'aaff00','c9eaa7': 'aaff55','c7f0c8': 'aaffaa',
|
||||
'c3f9f7': 'aaffff','e35462': 'ff0000','e25874': 'ff0055',
|
||||
'e16aa3': 'ff00aa','de83dc': 'ff00ff','e66e6b': 'ff5500',
|
||||
'e6727c': 'ff5555','e37fa7': 'ff55aa','e194df': 'ff55ff',
|
||||
'f1aa86': 'ffaa00','f1ad93': 'ffaa55','efb5b8': 'ffaaaa',
|
||||
'ecc3eb': 'ffaaff','ffeeab': 'ffff00','fff1b5': 'ffff55',
|
||||
'fff6d3': 'ffffaa'};
|
||||
|
||||
this.each(function() {
|
||||
var $color = $(this);
|
||||
var $item = $color.parent();
|
||||
var grid = '';
|
||||
var itemWidth = 100 / layout[0].length;
|
||||
var itemHeight = 100 / layout.length;
|
||||
var boxHeight = itemWidth * layout.length;
|
||||
|
||||
for(var i = 0; i < layout.length; i++) {
|
||||
for(var j = 0; j < layout[i].length; j++) {
|
||||
|
||||
var color = layout[i][j] || ENUMS.COLOR.EMPTY;
|
||||
var selectable = (color !== ENUMS.COLOR.EMPTY ? ' selectable' : '');
|
||||
|
||||
var roundedTL = (i === 0 && j === 0)
|
||||
|| i === 0 && !layout[i][j - 1]
|
||||
|| !layout[i][j - 1] && !layout[i -1][j]
|
||||
? ' rounded-tl' : '';
|
||||
|
||||
var roundedTR = i === 0 && !layout[i][j + 1]
|
||||
|| !layout[i][j + 1] && !layout[i -1][j]
|
||||
? ' rounded-tr ' : '';
|
||||
|
||||
var roundedBL = (i === layout.length - 1 && j === 0)
|
||||
|| i === layout.length - 1 && !layout[i][j - 1]
|
||||
|| !layout[i][j - 1] && !layout[i + 1][j]
|
||||
? ' rounded-bl' : '';
|
||||
|
||||
var roundedBR = i === layout.length - 1 && !layout[i][j + 1]
|
||||
|| !layout[i][j + 1] && !layout[i + 1][j]
|
||||
? ' rounded-br' : '';
|
||||
|
||||
if(options.sunny && color !== ENUMS.COLOR.EMPTY) {
|
||||
color = '#' + mappingSunny[color.replace('#', '').toLowerCase()];
|
||||
}
|
||||
|
||||
grid += '<i ' +
|
||||
'class="color-box ' + selectable + roundedTL +
|
||||
roundedTR + roundedBL + roundedBR + '" ' +
|
||||
'data-value="' + color.replace(/^#/, '0x') + '" ' +
|
||||
'style="' +
|
||||
'width:' + itemWidth + '%; ' +
|
||||
'height:' + itemHeight + '%; ' +
|
||||
'background:' + color + ';">' +
|
||||
'</i>';
|
||||
}
|
||||
}
|
||||
|
||||
var $injectedColor = $('<div class="item-styled-color">' +
|
||||
'<span class="value" style="background:' + $color.val().replace(/^0x/, '#') + '"></span>' +
|
||||
'<div ' +
|
||||
'style="padding-bottom:' + boxHeight + '%"' +
|
||||
'class="color-box-wrap">' +
|
||||
'<div class="color-box-container">' +
|
||||
grid +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
$item.append($injectedColor);
|
||||
|
||||
var $valueDisplay = $injectedColor.find('.value');
|
||||
|
||||
$color.on('click', function(ev) {
|
||||
$item.find('.color-box-wrap').toggleClass('show');
|
||||
});
|
||||
|
||||
$color.on('change', function(ev) {
|
||||
var value = $(this).val().replace(/^0x/, '').toLowerCase();
|
||||
if(options.sunny) {
|
||||
value = mappingSunny[value];
|
||||
}
|
||||
$valueDisplay.css('background-color', '#' + value);
|
||||
});
|
||||
|
||||
$item.find('.color-box.selectable').on('click', function(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var value = $(this).data('value').toLowerCase();
|
||||
if(options.sunny) {
|
||||
$color.val('0x' + mappingNormal[value.replace(/^0x/, '')]).trigger('change');
|
||||
} else {
|
||||
$color.val(value).trigger('change');
|
||||
}
|
||||
$valueDisplay.css('background-color', value.replace(/^0x/, '#'));
|
||||
$item.find('.color-box-wrap').removeClass('show');
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
tab: function() {
|
||||
this.each(function() {
|
||||
var $tab = $(this);
|
||||
|
||||
$tab.click(function() {
|
||||
var $current = $(this);
|
||||
var name = $current.attr('name');
|
||||
|
||||
$('a[name=' + name + ']').each(function(){
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
$current.addClass('active');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
itemSlider: function() {
|
||||
this.each(function() {
|
||||
var $slider = $(this);
|
||||
var name = $slider.attr('name');
|
||||
var $input = $('input[name=' + name + '][class=item-input]');
|
||||
|
||||
$slider.on('input', function() {
|
||||
var $current = $(this);
|
||||
$input.val($current.val());
|
||||
});
|
||||
|
||||
$input.change(function() {
|
||||
var $current = $(this);
|
||||
$slider.val($current.val());
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
itemDraggableList: function() {
|
||||
this.each(function() {
|
||||
var $handlebar = '<div class="item-draggable-handle">'
|
||||
+ '<div class="item-draggable-handle-bar"></div>'
|
||||
+ '<div class="item-draggable-handle-bar"></div>'
|
||||
+ '<div class="item-draggable-handle-bar"></div>'
|
||||
+ '</div>';
|
||||
|
||||
$(this).children('label').append($handlebar);
|
||||
|
||||
Sortable.create(this, {
|
||||
handle: '.item-draggable-handle'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
itemDynamicList: function() {
|
||||
this.each(function() {
|
||||
var $list = $(this);
|
||||
|
||||
$list.children('label').each(function() {
|
||||
var $deleteButton = $('<div class="delete-item"></div>');
|
||||
|
||||
$deleteButton.click(function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
$(this).append($deleteButton);
|
||||
});
|
||||
|
||||
var $addButton = $('<div class="item add-item">Add one more...</div>');
|
||||
|
||||
$list.append($addButton);
|
||||
|
||||
$addButton.click(function() {
|
||||
var $inbox = $('<div class="item">'
|
||||
+ '<div class="item-input-wrapper">'
|
||||
+ '<input class="item-input" type="text" name="focus-box">'
|
||||
+ '</div>'
|
||||
+ '</div>');
|
||||
|
||||
$inbox.insertBefore($list.children().last());
|
||||
|
||||
var $input = $inbox.find('input');
|
||||
$input.focus();
|
||||
|
||||
$input.keypress(function(e) {
|
||||
var key = e.which;
|
||||
if (key === 13) {
|
||||
stopEditing($input, $inbox);
|
||||
}
|
||||
});
|
||||
|
||||
$input.focusout(function() {
|
||||
stopEditing($input, $inbox);
|
||||
});
|
||||
|
||||
function stopEditing(input, inbox) {
|
||||
var text = input.val();
|
||||
inbox.html(text);
|
||||
|
||||
var deletebutton = $('<div class="delete-item"></div>');
|
||||
|
||||
deletebutton.click(function(){
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
inbox.append(deletebutton);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$('.item-toggle').itemToggle();
|
||||
$('.item-checkbox').itemCheckbox();
|
||||
$('.item-select').itemSelect();
|
||||
$('.item-date').itemDate();
|
||||
$('.item-time').itemTime();
|
||||
$('.item-radio').itemRadio();
|
||||
$('.item-color-normal').itemColor({sunny: false});
|
||||
$('.item-color-sunny').itemColor({sunny: true});
|
||||
$('.tab-button').tab();
|
||||
$('.item-slider').itemSlider();
|
||||
$('.item-draggable-list').itemDraggableList();
|
||||
$('.item-dynamic-list').itemDynamicList();
|
||||
});
|
||||
}(Zepto, Sortable));
|
||||
+581
@@ -0,0 +1,581 @@
|
||||
@font-face {
|
||||
font-family: 'PFDinDisplayProLightWebfont';
|
||||
src: url('../fonts/PFDinDisplayPro-Light.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PTSansRegularWebfont';
|
||||
src: url('../fonts/PTSans-regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant:normal;
|
||||
}
|
||||
|
||||
$orange: #FF4700;
|
||||
$dark-gray: #333333;
|
||||
$gray: #A8A8A8;
|
||||
$light-gray: #EAEAEA;
|
||||
$medium-light-gray: #DEDEDE;
|
||||
$lighter-gray: #F7F7F7;
|
||||
$white: #FFFFFF;
|
||||
$border-radius: 5px;
|
||||
|
||||
@mixin transform($deg) {
|
||||
-webkit-transform: rotate($deg);
|
||||
-moz-transform: rotate($deg);
|
||||
-ms-transform: rotate($deg);
|
||||
-o-transform: rotate($deg);
|
||||
transform: rotate($deg);
|
||||
}
|
||||
|
||||
@mixin user-select($type) {
|
||||
-webkit-user-select: $type;
|
||||
-moz-user-select: $type;
|
||||
-ms-user-select: $type;
|
||||
user-select: $type;
|
||||
}
|
||||
|
||||
@mixin appearance($type) {
|
||||
-webkit-appearance: $type;
|
||||
-moz-appearance: $type;
|
||||
-ms-appearance: $type;
|
||||
appearance: $type;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $orange;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $light-gray;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
@include user-select(none !important);
|
||||
}
|
||||
|
||||
body, select, input[type=text], input[type=time], input[type=date] {
|
||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
select, input[type=time], input[type=date] {
|
||||
@include appearance(none);
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
color: $gray;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: $lighter-gray;
|
||||
}
|
||||
|
||||
input[type=date] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
select {
|
||||
right: 30px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
input[type=time] {
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
input[type=date] {
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
.select-triangle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid $orange;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
color: $dark-gray;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.item-container-header {
|
||||
padding: 3px 10px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
|
||||
font-size: .8em;
|
||||
font-weight: normal;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.item-container-content {
|
||||
background-color: $lighter-gray;
|
||||
border-top: 1px solid $medium-light-gray;
|
||||
border-bottom: 1px solid $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-container-footer {
|
||||
padding: 3px 10px;
|
||||
font-size: .7em;
|
||||
line-height: 1.4em;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-styled-checkbox {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-styled-radio {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-draggable-handle {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.item-subtitle {
|
||||
font-size: .7em;
|
||||
line-height: .7em;
|
||||
padding: .3em 0;
|
||||
}
|
||||
|
||||
.item-styled-toggle-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: $border-radius;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.item-styled-toggle {
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: $border-radius;
|
||||
top: 1px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: left;
|
||||
}
|
||||
|
||||
.item-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper {
|
||||
background-color: $gray;
|
||||
}
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 27px;
|
||||
}
|
||||
|
||||
.item-styled-toggle-bar {
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
margin-left: 3px;
|
||||
background-color: $light-gray;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.item-styled-checkbox {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: $border-radius;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-checkbox + .item-styled-checkbox {
|
||||
border-color: $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox {
|
||||
border-color: $orange;
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: $lighter-gray;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
@include transform(45deg);
|
||||
}
|
||||
|
||||
.item-styled-radio {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 12px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.item-radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-radio + .item-styled-radio {
|
||||
border-color: $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-radio:checked + .item-styled-radio {
|
||||
border-color: $orange;
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.item-radio:checked + .item-styled-radio:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: $lighter-gray;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
@include transform(45deg);
|
||||
}
|
||||
|
||||
.item-color {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.item-styled-color {
|
||||
|
||||
background: $lighter-gray;
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: $border-radius;
|
||||
border-color: $gray;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.color-box-wrap {
|
||||
display:none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0; // overridden with inline style
|
||||
margin: 0.6em 0 0em;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.color-box {
|
||||
float:left;
|
||||
cursor: pointer;
|
||||
|
||||
&.rounded-tl {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-tr {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-bl {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-br {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-date, .item-time {
|
||||
position: absolute;
|
||||
color: $lighter-gray !important;
|
||||
}
|
||||
|
||||
.item-styled-date, .item-styled-time {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
color: $gray;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: $lighter-gray;
|
||||
}
|
||||
|
||||
.item-input-wrapper {
|
||||
border-radius: $border-radius;
|
||||
border: 2px solid $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-input-wrapper-button {
|
||||
box-sizing: border-box;
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
.item-input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0 10px 7px 10px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-button {
|
||||
width: 60%;
|
||||
height: 35px;
|
||||
background-color: $orange;
|
||||
border-radius: $border-radius;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
border: none;
|
||||
@include appearance(none);
|
||||
}
|
||||
|
||||
.item-input-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.tab-buttons {
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: $orange;
|
||||
border: 1px solid $orange;
|
||||
border-right-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.tab-button:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.tab-button:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: $orange;
|
||||
color: $lighter-gray;
|
||||
}
|
||||
|
||||
.item-slider {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
@include appearance(none);
|
||||
height: 30px;
|
||||
width: 79%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-thumb:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -1001px;
|
||||
height: 2px;
|
||||
width: 1000px;
|
||||
background: $orange;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-thumb {
|
||||
@include appearance(none);
|
||||
position: relative;
|
||||
top: -13px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background-color: $white;
|
||||
border-radius: $border-radius;
|
||||
border: 2px solid $light-gray;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-runnable-track {
|
||||
height: 2px;
|
||||
background-color: $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-thumb:after {
|
||||
content: "lll";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: $medium-light-gray;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item-slider-text {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.item-slider-text .item-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delete-item{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.delete-item:before,.delete-item:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: $gray;
|
||||
border-radius: 2px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.delete-item:before{
|
||||
@include transform(45deg);
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.delete-item:after{
|
||||
@include transform(-45deg);
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.add-item{
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.item-draggable-handle {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.item-draggable-handle-bar {
|
||||
margin-top: 5px;
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
background-color: $gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[draggable=true] {
|
||||
background-color: $lighter-gray;
|
||||
border: 2px solid $light-gray;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
Vendored
+29
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "Slate",
|
||||
"version": "0.0.3",
|
||||
"description": "Front-end framework for developing Pebble mobile configuration pages.",
|
||||
"scripts": {
|
||||
"build": "gulp build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/pebble/slate.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Pebble"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/pebble/slate/issues"
|
||||
},
|
||||
"homepage": "https://github.com/pebble/slate",
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-concat": "^2.5.2",
|
||||
"gulp-notify": "^2.2.0",
|
||||
"gulp-ruby-sass": "^1.0.5",
|
||||
"gulp-uglify": "^1.2.0",
|
||||
"gulp-uglifycss": "^1.0.4",
|
||||
"rimraf": "^2.4.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user