CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-31 06:16:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

add eslint and clean up code

Browse Source
This commit is contained in:
Keegan
2016-01-27 19:12:12 -08:00
parent 67d2258bb6
commit cdb855edaa
51 changed files with 292 additions and 2793 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+3 -1
View File
@@ -1,2 +1,4 @@
vendor/
coverage/
dist/
tmp/
src/scripts/vendor/
dev/config.js
+1 -1
View File
@@ -36,7 +36,7 @@ module.exports = [
"type": "toggle",
"appKey": "cool_stuff",
"label": "Enable Cool Stuff",
"value": false
"value": true
},
{
"type": "color",
dev/custom-fn.js
+1 -1
View File
@@ -1,7 +1,7 @@
'use strict';
module.exports = function() {
var Clay = this;
var Clay = window.Clay = this;
Clay.getItemByAppKey('cool_stuff').on('change', function() {
if (this.get()) {
gulpfile.js
+9 -6
View File
@@ -6,8 +6,7 @@ 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');
var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass');
var sourceMaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
@@ -43,11 +42,15 @@ gulp.task('sass', ['clean-sass'], function() {
gulp.task('inlineHtml', ['js', 'sass'], function() {
return gulp.src('src/config-page.html')
.pipe(inline())
.pipe(minifyInline({
js: {},
jsSelector: 'script[uglify]'
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true,
removeTagWhitespace: true,
removeRedundantAttributes: true,
caseSensitive: true,
minifyJS: true,
minifyCSS: true
}))
.pipe(minifyHTML())
.pipe(gulp.dest('tmp/'));
});
index.js
-1
View File
@@ -1,7 +1,6 @@
'use strict';
var configPageHtml = require('./tmp/config-page.html');
//var errorPageHtml = require('./tmp/error-page.html');
function encodeDataUri(input) {
if (window.btoa) {
package.json
+6 -7
View File
@@ -7,8 +7,9 @@
"example": "example"
},
"scripts": {
"test-travis": "./node_modules/karma/bin/karma start ./test/karma.conf.js --single-run --browsers chromeTravisCI",
"test": "./node_modules/karma/bin/karma start ./test/karma.conf.js --no-single-run",
"test-travis": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run --browsers chromeTravisCI && ./node_modules/.bin/eslint ./",
"test": "./node_modules/.bin/karma start ./test/karma.conf.js --no-single-run",
"lint": "./node_modules/.bin/eslint ./",
"build": "gulp"
},
"repository": {
@@ -45,16 +46,14 @@
"karma-source-map-support": "^1.1.0",
"karma-threshold-reporter": "^0.1.15",
"mocha": "^2.3.4",
"watchify": "^3.7.0"
},
"dependencies": {
"watchify": "^3.7.0",
"browserify": "^13.0.0",
"del": "^2.0.2",
"gulp": "^3.9.0",
"gulp-inline": "0.0.15",
"gulp-minify-html": "^1.0.4",
"gulp-minify-inline": "^0.1.1",
"stringify": "^3.2.0",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
}
}
src/scripts/config-page.js
+6 -10
View File
@@ -2,28 +2,24 @@
var $ = require('./vendor/minified/minified').$;
var _ = require('./vendor/minified/minified')._;
var Api = require('./lib/api');
var ClayConfig = require('./lib/clay-config');
var config = _.extend([], window.clayConfig || []);
var settings = _.extend({}, window.claySettings || {});
var returnTo = window.returnTo || 'pebblejs://close#';
var customFn = window.customFn || function() {};
var api = new Api(settings);
var $mainForm = $('#main-form');
var clayConfig = new ClayConfig(settings, config, $mainForm);
function submit(event) {
_.each(api.itemsByAppKey, function(appKey, item) {
settings[appKey] = item.get();
});
// Set the return URL depending on the runtime environment
location.href = returnTo + encodeURIComponent(JSON.stringify(settings));
location.href =
returnTo + encodeURIComponent(JSON.stringify(clayConfig.getSettings()));
event.preventDefault();
return false;
}
api.addItem(config, $mainForm);
$mainForm.on('|submit', submit);
//$mainForm.on('submit', submit);
customFn.call(api);
customFn.call(clayConfig);
src/scripts/lib/api-item.js
-88
View File
@@ -1,88 +0,0 @@
'use strict';
var itemTypes = require('./items');
var $ = require('../vendor/minified/minified').$;
var _ = require('../vendor/minified/minified')._;
var HTML = require('../vendor/minified/minified').HTML;
function ApiItem(config) {
var self = this;
var eventProxies = {};
var itemType = itemTypes[config.type];
var templateData = _.extend({}, itemType.defaults, config);
var $element = HTML(_.formatHtml(itemType.template, templateData));
var $manipulatorTarget = $element.select('[data-manipulator-target]');
// this caters for situations where the manipulator target is the root element
if (!$manipulatorTarget.length) {
$manipulatorTarget = $element;
}
Object.defineProperties(self, {
id: {
value: config.id || null
},
appKey: {
value: config.appKey || null
},
config: {
value: config || null
},
$element: {
value: $element
},
$manipulatorTarget: {
value: $manipulatorTarget
},
on: {
value: function(events, handler) {
eventProxies[handler] = function() {
handler.apply(self, arguments);
};
return $manipulatorTarget.on(events, eventProxies[handler]);
}
},
one: {
value: function(events, handler) {
eventProxies[handler] = function(event) {
handler.apply(self, arguments);
$.off(eventProxies[handler]);
};
return $manipulatorTarget.on(events, eventProxies[handler]);
}
},
off: {
value: function(handler) {
return $.off(eventProxies[handler]);
}
},
trigger: {
value: $manipulatorTarget.trigger.bind($manipulatorTarget)
},
initialize: {
value: typeof itemType.initialize === 'function' ?
itemType.initialize.bind(self) :
function() {}
}
});
// attach the manipulator methods to the apiItem
_.eachObj(itemType.manipulator, function(methodName, method) {
Object.defineProperty(self, methodName, { value: method.bind(self) });
});
self.initialize();
}
module.exports = ApiItem;
src/scripts/lib/api.js
-95
View File
@@ -1,95 +0,0 @@
'use strict';
/**
* A Clay config Item
* @typedef {object} Clay~Item
* @property {string} type
* @property {string} appKey
* @property {string} id
* @property {string} content
* @property {string|boolean} default
* @property {string} label
* @property {object} attributes
* @property {Array} options
* @property {Array} items
*/
var HTML = require('../vendor/minified/minified').HTML;
var _ = require('../vendor/minified/minified')._;
var ApiItem = require('./api-item');
function Api(settings) {
var self = this;
var _items = [];
var _itemsById = {};
var _itemsByAppKey = {};
var _settings = _.copyObj(settings);
Object.defineProperties(self, {
getItemByAppKey: {
value: function(key) {
return _itemsByAppKey[key];
}
},
getItemById: {
value: function(key) {
return _itemsById[key];
}
},
getItemsByType: {
value: function(type) {
return _items.filter(function(item) {
return item.config.type === type;
});
}
},
getSettings: {
value: function() {
_.eachObj(_itemsByAppKey, function(appKey, item) {
_settings[appKey] = item.get();
});
return _settings;
}
},
addItem: {
value: function(item, $container) {
if (Array.isArray(item)) {
item.forEach(function(item) {
self.addItem(item, $container);
});
} else if (item.type === 'section') {
var $wrapper = HTML('<div class="section">');
$container.add($wrapper);
self.addItem(item.items, $wrapper);
} else {
var apiItem = new ApiItem(item);
if (item.id) {
_itemsById[item.id] = apiItem;
}
if (item.appKey) {
_itemsByAppKey[item.appKey] = apiItem;
}
_items.push(apiItem);
// set the value of the item via the manipulator to ensure consistency
var value = typeof _settings[item.appKey] !== 'undefined' ?
_settings[item.appKey] :
(item.value || '');
apiItem.set(value);
$container.add(apiItem.$element);
}
}
}
});
}
module.exports = Api;
src/scripts/lib/clay-config.js
+110
View File
@@ -0,0 +1,110 @@
'use strict';
/**
* A Clay config Item
* @typedef {object} Clay~ConfigItem
* @property {string} type
* @property {string|boolean|number} value
* @property {string} [appKey]
* @property {string} [id]
* @property {string} [label]
* @property {object} [attributes]
* @property {array} [options]
* @property {array} [items]
*/
var HTML = require('../vendor/minified/minified').HTML;
var _ = require('../vendor/minified/minified')._;
var ApiItem = require('./clay-item');
var utils = require('../lib/utils');
function ClayConfig(settings, config, $rootContainer) {
var self = this;
var _settings = _.copyObj(settings);
var _items = [];
var _itemsById = {};
var _itemsByAppKey = {};
/**
* @param {string} key
* @returns {ClayItem}
*/
self.getItemByAppKey = function(key) {
return _itemsByAppKey[key];
};
/**
* @param {string} key
* @returns {ClayItem}
*/
self.getItemById = function(key) {
return _itemsById[key];
};
/**
* @param {string} key
* @returns {[ClayItem]}
*/
self.getItemsByType = function(type) {
return _items.filter(function(item) {
return item.config.type === type;
});
};
/**
* @returns {object}
*/
self.getSettings = function() {
_.eachObj(_itemsByAppKey, function(appKey, item) {
_settings[appKey] = item.get();
});
return _settings;
};
/**
* Add item(s) to the config
* @param {Clay~ConfigItem|array} items
* @param {M} [$container]
*/
var _addItems = function(item, $container) {
if (Array.isArray(item)) {
item.forEach(function(item) {
_addItems(item, $container);
});
} else if (item.type === 'section') {
var $wrapper = HTML('<div class="section">');
$container.add($wrapper);
_addItems(item.items, $wrapper);
} else {
var apiItem = new ApiItem(item);
if (item.id) {
_itemsById[item.id] = apiItem;
}
if (item.appKey) {
_itemsByAppKey[item.appKey] = apiItem;
}
_items.push(apiItem);
// set the value of the item via the manipulator to ensure consistency
var value = typeof _settings[item.appKey] !== 'undefined' ?
_settings[item.appKey] :
(item.value || '');
apiItem.set(value);
$container.add(apiItem.$element);
}
};
// prevent external modifications of properties
utils.updateProperties(self, { writable: false, configurable: false });
// initialize the config
_addItems(config, $rootContainer);
}
module.exports = ClayConfig;
src/scripts/lib/clay-item.js
+116
View File
@@ -0,0 +1,116 @@
'use strict';
var itemTypes = require('./items');
var $ = require('../vendor/minified/minified').$;
var _ = require('../vendor/minified/minified')._;
var HTML = require('../vendor/minified/minified').HTML;
var utils = require('../lib/utils');
function ClayItem(config) {
var self = this;
var _eventProxies = {};
var _itemType = itemTypes[config.type];
var _templateData = _.extend({}, _itemType.defaults, config);
/** @type {string|null} */
self.id = config.id || null;
/** @type {string|null} */
self.appKey = config.appKey || null;
/** @type {object|null} */
self.config = config || null;
/** @type {M} */
self.$element = HTML(_.formatHtml(_itemType.template, _templateData));
/** @type {M} */
self.$manipulatorTarget = self.$element.select('[data-manipulator-target]');
// this caters for situations where the manipulator target is the root element
if (!self.$manipulatorTarget.length) {
self.$manipulatorTarget = self.$element;
}
/**
* Attach an event listener to the item. This proxies minified.js' on.
* If you are using a native event like "change", consider using "|change" instead
* as this will allow the native events to still work
* @see {@link http://minifiedjs.com/api/on.html|.on()}
* @param {string} events
* @param {function} handler
* @returns {ClayItem}
*/
self.on = function(events, handler) {
_eventProxies[handler] = function() {
handler.apply(self, arguments);
};
self.$manipulatorTarget.on(events, _eventProxies[handler]);
return self;
};
/**
* Attach an event listener to the item. This proxies minified.js' one.
* If you are using a native event like "change", consider using "|change" instead
* as this will allow the native events to still work
* @see {@link http://minifiedjs.com/api/one.html|.one()}
* @param {string} events
* @param {function} handler
* @returns {ClayItem}
*/
self.one = function(events, handler) {
_eventProxies[handler] = function(event) {
handler.apply(self, arguments);
$.off(_eventProxies[handler]);
};
self.$manipulatorTarget.on(events, _eventProxies[handler]);
return self;
};
/**
* Remove the given event handler.
* @see {@link http://minifiedjs.com/api/off.html|$.off()}
* @param {function} handler
* @returns {ClayItem}
*/
self.off = function(handler) {
return $.off(_eventProxies[handler]);
};
/**
* trigger an event. This proxies minified.js' trigger.
* @param {string} name - a single event name to trigger
* @param {object} eventObj - an object to pass to the event handler, provided the
* handler does not have custom arguments.
* @see {@link http://minifiedjs.com/api/trigger.html|.trigger()}
* @returns {ClayItem}
*/
self.trigger = function(name, eventObj) {
self.$manipulatorTarget.trigger(name, eventObj);
return self;
};
/**
* Run the initializer. This will automatically be run on item creation.
* @returns {ClayItem}
*/
self.initialize = function() {
if (typeof _itemType.initialize === 'function') {
_itemType.initialize.apply(self, arguments);
}
return self;
};
// attach the manipulator methods to the clayItem
_.eachObj(_itemType.manipulator, function(methodName, method) {
self[methodName] = method.bind(self);
});
self.initialize();
// prevent external modifications of properties
utils.updateProperties(self, { writable: false, configurable: false });
}
module.exports = ClayItem;
src/scripts/lib/items/color.js
-1
View File
@@ -29,7 +29,6 @@ module.exports = {
var grid = '';
var itemWidth = 100 / layout[0].length;
var itemHeight = 100 / layout.length;
var boxHeight = itemWidth * layout.length;
var $elem = self.$element;
for (var i = 0; i < layout.length; i++) {
src/scripts/lib/utils.js
+18
View File
@@ -0,0 +1,18 @@
'use strict';
/**
* Batch update all the properties of an object.
* @param {object} obj
* @param {object} descriptor
* @param {boolean} [descriptor.configurable]
* @param {boolean} [descriptor.enumerable]
* @param {*} [descriptor.value]
* @param {boolean} [descriptor.writable]
* @param {function} [descriptor.get]
* @param {function} [descriptor.set]
*/
module.exports.updateProperties = function(obj, descriptor) {
Object.getOwnPropertyNames(obj).forEach(function(prop) {
Object.defineProperty(obj, prop, descriptor);
});
};
test/spec/lib/api-item.js
+1 -1
View File
@@ -1,7 +1,7 @@
'use strict';
var assert = require('chai').assert;
var ApiItem = require('../../../src/scripts/lib/api-item');
var ApiItem = require('../../../src/scripts/lib/clay-item');
var fixture = require('../../fixture');
var items = require('../../../src/scripts/lib/items');
test/spec/lib/utils.js
+21
View File
@@ -0,0 +1,21 @@
'use strict';
var utils = require('../../../src/scripts/lib/utils');
var assert = require('chai').assert;
describe('.updateProperties', function() {
var obj;
beforeEach(function() {
obj = {
one: 1,
two: 2
};
});
it('sets the properties as non-writable', function() {
utils.updateProperties(obj, { writable: false });
assert.strictEqual(Object.getOwnPropertyDescriptor(obj, 'one').writable, false);
assert.strictEqual(Object.getOwnPropertyDescriptor(obj, 'two').writable, false);
});
});
vendor/pebble-slate/.bower.json
Vendored
-21
View File
@@ -1,21 +0,0 @@
{
"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"
}
vendor/pebble-slate/History.md
Vendored
-16
View File
@@ -1,16 +0,0 @@
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
vendor/pebble-slate/LICENSE
Vendored
-22
View File
@@ -1,22 +0,0 @@
(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.
vendor/pebble-slate/README.md
Vendored
-312
View File
@@ -1,312 +0,0 @@
Slate
=====
![Bower](https://img.shields.io/bower/v/pebble-slate.svg)
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.
![screenshot](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/screenshot.png)
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.
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/TtP7z6wceqI/0.jpg)](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
![paragraph](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-paragraph.png)
```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
![header, footer, and item](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-header-content-footer.png)
```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
![toggles and select](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-toggle.png)
```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
![checkboxes](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-checkbox.png)
```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
![radio buttons](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-radio.png)
```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
![date, time, and colorpickers](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-date-time-colorpickers.png)
```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
![input field](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-input.png)
```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
![input field with button](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-input-button.png)
```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
![tab buttons](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-tab-button.png)
```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
![slider](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-slider.png)
```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
![draggable list](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-draggable.png)
```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
![list](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-list.png)
```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
![button](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-button.png)
```html
<div class="item-container">
<div class="button-container">
<input type="button" class="item-button" value="SEND">
</div>
</div>
```
vendor/pebble-slate/bower.json
Vendored
-13
View File
@@ -1,13 +0,0 @@
{
"name": "Slate",
"version": "0.0.3",
"homepage": "https://github.com/pebble/slate",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
vendor/pebble-slate/dist/css/slate.css
Vendored
-485
View File
@@ -1,485 +0,0 @@
@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; }
vendor/pebble-slate/dist/css/slate.min.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
vendor/pebble-slate/dist/fonts/PFDinDisplayPro-Light.woff
Vendored
BIN
View File
Binary file not shown.
vendor/pebble-slate/dist/fonts/ptsans-regular.woff
Vendored
BIN
View File
Binary file not shown.
vendor/pebble-slate/dist/js/slate.js
Vendored
-381
View File
File diff suppressed because one or more lines are too long
vendor/pebble-slate/dist/js/slate.min.js
Vendored
-2
View File
File diff suppressed because one or more lines are too long
vendor/pebble-slate/docs/assets/screenshot.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

vendor/pebble-slate/docs/assets/slate-button.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

vendor/pebble-slate/docs/assets/slate-checkbox.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

vendor/pebble-slate/docs/assets/slate-date-time-colorpickers.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

vendor/pebble-slate/docs/assets/slate-draggable.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

vendor/pebble-slate/docs/assets/slate-header-content-footer.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

vendor/pebble-slate/docs/assets/slate-input-button.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

vendor/pebble-slate/docs/assets/slate-input.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

vendor/pebble-slate/docs/assets/slate-list.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.7 KiB

vendor/pebble-slate/docs/assets/slate-paragraph.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

vendor/pebble-slate/docs/assets/slate-radio.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

vendor/pebble-slate/docs/assets/slate-slider.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

vendor/pebble-slate/docs/assets/slate-tab-button.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

vendor/pebble-slate/docs/assets/slate-toggle.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

vendor/pebble-slate/docs/index.html
Vendored
-54
View File
@@ -1,54 +0,0 @@
<!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&amp;repo=REPO&amp;type=watch&amp;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>
vendor/pebble-slate/docs/template.html
Vendored
-210
View File
@@ -1,210 +0,0 @@
<!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>
vendor/pebble-slate/external/Sortable/LICENSE.md
Vendored
-22
View File
@@ -1,22 +0,0 @@
## 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.
vendor/pebble-slate/external/Sortable/Sortable.min.js
Vendored
-2
View File
File diff suppressed because one or more lines are too long
vendor/pebble-slate/external/zepto/zepto.min.js
Vendored
-2
View File
File diff suppressed because one or more lines are too long
vendor/pebble-slate/gulpfile.js
Vendored
-51
View File
@@ -1,51 +0,0 @@
// 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']);
vendor/pebble-slate/lib/fonts/PFDinDisplayPro-Light.woff
Vendored
BIN
View File
Binary file not shown.
vendor/pebble-slate/lib/fonts/ptsans-regular.woff
Vendored
BIN
View File
Binary file not shown.
vendor/pebble-slate/lib/js/main.js
Vendored
-377
View File
@@ -1,377 +0,0 @@
'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));
vendor/pebble-slate/lib/sass/main.scss
Vendored
-581
View File
@@ -1,581 +0,0 @@
@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;
}
vendor/pebble-slate/package.json
Vendored
-29
View File
@@ -1,29 +0,0 @@
{
"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"
}
}