CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-27 20:36:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

styling for input, toggle, color, select and button.

Browse Source
This commit is contained in:
Keegan
2016-01-18 15:47:36 -08:00
parent 08bff3ac4b
commit 04273ed8d5
34 changed files with 711 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/config.js
+45 -49
View File
@@ -2,17 +2,46 @@
/* eslint-disable quotes */
module.exports = [
{
"type": "heading",
"id": "main-heading",
"value": "My Cool App",
"size": 1
},
{
"type": "text",
"value": "By Keegan Lillo - <a href=\"http://lillo.me\">Lillo.me</a>"
},
{
"type": "section",
"items": [
{
"type": "heading",
"id": "main-heading",
"value": "My Cool App"
"value": "Settings"
},
{
"type": "footer",
"value": "By Keegan Lillo - <a href=\"http://lillo.me\">Lillo.me</a>"
"type": "input",
"app_key": "email",
"value": "",
"label": "Email",
"attributes": {
"placeholder": "eg: name@domain.com",
"limit": 10,
"required": "required",
type: "email"
}
},
{
"type": "toggle",
"app_key": "like_stuff",
"label": "Enable Cool Stuff",
"value": false
},
{
"type": "color",
"app_key": "background",
"value": "0xFF0000",
"label": "Background Color"
}
]
},
@@ -20,58 +49,25 @@ module.exports = [
"type": "section",
"items": [
{
"type": "subheading",
"type": "heading",
"value": "Settings"
},
{
"type": "block",
"items": [
{
"type": "input",
"app_key": "greeting",
"value": "Hello",
"label": "Greeting",
"attributes": {
"placeholder": "Enter a \"greeting\" >",
"limit": 10,
"required": "required"
}
},
{
"type": "toggle",
"app_key": "like_stuff",
"label": "Enable Cool Stuff",
"value": true
},
{
"id": "flavor",
"type": "select",
"app_key": "flavor",
"value": "grape",
"label": "Favorite Flavor",
"options": [
{ "label": "Berry", "value": "berry" },
{ "label": "Grape", "value": "grape" },
{ "label": "Banana", "value": "banana" }
]
},
{
"type": "color",
"app_key": "background",
"value": "0xFF0000",
"label": "Background Color"
}
"id": "flavor",
"type": "select",
"app_key": "flavor",
"value": "grape",
"label": "Favorite Flavor",
"options": [
{ "label": "Berry things", "value": "berry" },
{ "label": "Grape", "value": "grape" },
{ "label": "Banana", "value": "banana" }
]
}
]
},
{
"type": "section",
"items": [
{
"type": "submit",
"value": "Save"
}
]
"type": "submit",
"label": "Save"
}
];
dev/dev.html
-3
View File
@@ -4,14 +4,11 @@
<title>Pebble Clay Development Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--<link rel="stylesheet" href="../vendor/pebble-slate/dist/css/slate.min.css">-->
<link rel="stylesheet" href="../tmp/config-page.css">
</head>
<body>
<form id="main-form" class="inputs"></form>
<script src="../tmp/dev.js"></script>
<script src="../tmp/config-page.js"></script>
<!--<script src="../src/scripts/vendor/minified/minified.min.js"></script>-->
<!--<script src="../vendor/pebble-slate/dist/js/slate.min.js"></script>-->
</body>
</html>
dev/dev.js
+11
View File
@@ -4,3 +4,14 @@ window.returnTo = '$$RETURN_TO$$';
window.clayConfig = require('./config.js');
window.claySettings = {};
window.customFn = require('./custom-fn.js');
var platform = window.navigator.userAgent.match('Android') ? 'android' : 'ios';
document.documentElement.classList.add('platform-' + platform);
window.expand = function(obj) {
obj.size = 5;
};
function unexpand(obj) {
obj.size = 1;
}
dev/text.html
+57
View File
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pebble Clay Development Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<script>
if (!String.prototype.repeat) {
String.prototype.repeat = function(count) {
'use strict';
if (this == null) {
throw new TypeError('can\'t convert ' + this + ' to object');
}
var str = '' + this;
count = +count;
if (count != count) {
count = 0;
}
if (count < 0) {
throw new RangeError('repeat count must be non-negative');
}
if (count == Infinity) {
throw new RangeError('repeat count must be less than infinity');
}
count = Math.floor(count);
if (str.length == 0 || count == 0) {
return '';
}
// Ensuring count is a 31-bit integer allows us to heavily optimize the
// main part. But anyway, most current (August 2014) browsers can't handle
// strings 1 << 28 chars or longer, so:
if (str.length * count >= 1 << 28) {
throw new RangeError('repeat count must not overflow maximum string size');
}
var rpt = '';
for (;;) {
if ((count & 1) == 1) {
rpt += str;
}
count >>>= 1;
if (count == 0) {
break;
}
str += str;
}
return rpt;
}
}
var test = encodeURIComponent(window.btoa('<html><body>' + '1 '.repeat(389550 / 2) + '</body></html>'));
alert(test.length);
document.write('<iframe src="data:text/html;base64,' + test + '">');
</script>
</body>
</html>
gulpfile.js
+5
View File
@@ -10,6 +10,7 @@ var minifyInline = require('gulp-minify-inline');
var minifyHTML = require('gulp-minify-html');
var sass = require('gulp-sass');
var sourceMaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('clean-js', function() {
return del(['tmp/config-page.js']);
@@ -31,6 +32,10 @@ gulp.task('sass', ['clean-sass'], function() {
gulp.src('./src/styles/config-page.scss')
.pipe(sourceMaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['Android 4', 'iOS 8'],
cascade: false
}))
.pipe(sourceMaps.write('./'))
.pipe(gulp.dest('tmp'));
});
index.js
+13 -4
View File
@@ -1,6 +1,7 @@
'use strict';
var configPageHtml = require('./tmp/config-page.html');
//var errorPageHtml = require('./tmp/error-page.html');
function encodeDataUri(input) {
if (window.btoa) {
@@ -74,12 +75,20 @@ Clay.prototype.generateUrl = function(returnTo) {
console.error(e);
settings = {};
}
var strings = {
customFn: this.customFn.toString().replace(/^.*?\{/, '{'),
returnTo: returnTo || 'pebblejs://close#',
config: JSON.stringify(this.config),
settings: JSON.stringify(settings)
};
// Show config page
return encodeDataUri(configPageHtml
.replace('$$CUSTOM_FN$$', this.customFn.toString().replace(/^.*?\{/, '{'))
.replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#')
.replace('$$CONFIG$$', JSON.stringify(this.config))
.replace('$$SETTINGS$$', JSON.stringify(settings))
.replace('$$CUSTOM_FN$$', strings.customFn)
.replace('$$RETURN_TO$$', strings.returnTo)
.replace('$$CONFIG$$', strings.config)
.replace('$$SETTINGS$$', strings.settings)
);
};
package.json
+1
View File
@@ -29,6 +29,7 @@
"eslint": "^1.5.1",
"eslint-config-pebble": "^1.2.0",
"eslint-plugin-standard": "^1.3.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.6.0"
},
src/config-page.html
-2
View File
@@ -2,7 +2,6 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../vendor/pebble-slate/dist/css/slate.min.css">
<link rel="stylesheet" href="../tmp/config-page.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
@@ -14,7 +13,6 @@
</head>
<body>
<form id="main-form" class="inputs"></form>
<script src="../vendor/pebble-slate/dist/js/slate.min.js"></script>
<script uglify src="../tmp/config-page.js"></script>
</body>
</html>
src/scripts/config-page.js
+5 -10
View File
@@ -60,15 +60,9 @@ function processConfigItem(item, $parent) {
processConfigItem(item, $parent);
});
} else if (item.type === 'section') {
processConfigItem(
item.items,
$parent.add(HTML('<div class="section">'))
);
} else if (item.type === 'block') {
processConfigItem(
item.items,
$parent.add(HTML('<div class="block">'))
);
var $container = HTML('<div class="section">');
$parent.add($container);
processConfigItem(item.items, $container);
} else {
console.debug('KEEGAN: itemType', item.type);
var apiItem = {};
@@ -76,7 +70,8 @@ function processConfigItem(item, $parent) {
var templateData = {
label: '',
options: [],
attributes: {}
attributes: {},
size: 4
};
console.debug('KEEGAN: templateData', templateData);
src/scripts/lib/items.js
+1 -1
View File
@@ -2,7 +2,7 @@
module.exports = {
heading: require('./items/heading'),
subheading: require('./items/subheading'),
text: require('./items/text'),
footer: require('./items/footer'),
input: require('./items/input'),
color: require('./items/color'),
src/scripts/lib/items/color.js
+12 -5
View File
@@ -60,7 +60,7 @@ module.exports = {
grid += '<i ' +
'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
roundedBR + '" ' +
'data-value="' + color.replace(/^#/, '0x') + '" ' +
'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
'style="' +
'width:' + itemWidth + '%; ' +
'height:' + itemHeight + '%; ' +
@@ -71,17 +71,24 @@ module.exports = {
$elem.select('.color-box-container').add(HTML(grid));
var $injectedColor = $elem.select('.color-box-container')
var $valueDisplay = $injectedColor.select('.value');
var $valueDisplay = $elem.select('.value');
var $picker = $elem.select('.picker-wrap')
$elem.on('click', function(ev) {
$elem.select('.color-box-wrap').set('show');
$picker.set('show');
});
self.on('change', function(ev) {
var value = self.get().replace(/^0x/, '').toLowerCase();
$valueDisplay.set('$background-color', '#' + value);
$elem.select('.color-box').set('-selected');
$elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
});
$elem.select('.color-box.selectable').on('click', function(ev) {
self.set(ev.target.dataset.value);
$picker.set('-show');
});
}
}
};
src/scripts/lib/items/select.js
+11 -1
View File
@@ -2,5 +2,15 @@
module.exports = {
template: require('../../../templates/items/select.tpl'),
manipulator: require('../manipulators').val
manipulator: require('../manipulators').val,
initialize: function() {
var self = this;
var $value = self.$element.select('.value');
self.on('change', function(ev) {
var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
$value.set('innerHTML', value);
});
}
};
src/scripts/lib/items/subheading.js → src/scripts/lib/items/text.js
+1 -1
View File
@@ -1,6 +1,6 @@
'use strict';
module.exports = {
template: require('../../../templates/items/subheading.tpl'),
template: require('../../../templates/items/text.tpl'),
manipulator: require('../manipulators').html
};
src/styles/_base.scss
+197
View File
@@ -0,0 +1,197 @@
@import "vendor/bourbon/bourbon";
@import "partials/vars";
@import "partials/mixins";
html, body {
@include font-pfdin(regular);
-webkit-font-smoothing: antialiased;
font-size: $em-base;
line-height: 1;
height:100%;
color: $color-white;
//&.platform-ios {
// font-size: 13px;
//}
}
body {
background-color: $color-gray-2;
padding: 0.75rem;
}
h1, h2, h3, h4 {
text-transform: uppercase;
@include font-pfdin(medium);
@include pfdin-uppercase();
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.3rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.8rem;
}
.section {
background: $color-gray-4;
border-radius: 0.25rem;
margin-bottom: 1rem;
box-shadow: $color-gray-1 0 0.15rem 0.25rem;
}
.item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: $item-spacing-v / 2;
.input {
white-space: nowrap;
display: flex;
max-width: 50%;
}
&.invalid .input:after {
$size: 1.1rem;
content: "!";
display: inline-block;
color: $color-white;
background: $color-orange;
border-radius: $size / 2;
width: $size;
text-align: center;
height: $size;
font-size: $size * 0.75;
vertical-align: middle;
line-height: $size;
box-shadow: $box-shadow-small-components;
@include font-pfdin(medium);
flex: 0 0 $size;
margin-left: 0.3rem;
}
//.input input {
// color: $color-orange;
// padding-right: 1em;
//
// @include placeholder {
// color: $color-orange;
// }
//
//}
.section & {
padding-top: $item-spacing-v / 2;
padding-right: $item-spacing-h;
padding-left: $item-spacing-h;
&:last-child {
padding-bottom: $item-spacing-v /2 ;
}
&:first-child {
padding-bottom: $item-spacing-v / 2;
}
}
}
label.item{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
&:active {
background-color: rgba(255, 255, 255, 0.1);
}
}
.section {
.item-heading:first-child {
background: $color-gray-3;
border-radius: $border-radius $border-radius 0 0;
}
}
strong {
@include font-pfdin(medium);
color: $color-orange;
}
a {
color: $color-gray-8;
&:hover {
color: inherit;
}
}
.inputs {
display: block;
width:100%;
border-collapse: collapse;
.section & .item {
display: table;
width:100%;
.label,
.input {
display: table-cell;
}
.input {
text-align: right;
}
&.invalid {
.input:after {
content: "!";
display: inline-block;
color: $color-white;
background: $color-orange;
border-radius: $border-radius;
width: 1.2em;
text-align: center;
height: 1.2em;
font-size: 1em;
vertical-align: middle;
line-height: 1.3em;
margin-left: -0.7em;
position:absolute;
@include font-pfdin(regular);
}
.input input {
color: $color-orange;
padding-right: 1em;
@include placeholder {
color: $color-orange;
}
}
}
}
}
src/styles/_fonts.scss
+6
View File
File diff suppressed because one or more lines are too long
src/styles/base.scss
-303
View File
@@ -1,303 +0,0 @@
@import "vendor/bourbon/bourbon";
@import "partials/vars";
@import "partials/mixins";
html, body {
@include font-pfdin(regular);
font-size: $em-base;
height:100%;
color: $color-white;
&.platform-ios {
font-size: 13px;
}
}
body {
background-color: $color-grey-darker;
}
strong {
@include font-pfdin(medium);
color: $color-orange;
}
button,
.button,
input[type="submit"] {
@include font-pfdin(medium);
text-transform: uppercase;
background-color: $color-grey-medium;
border-radius: rem($border-radius);
font-size: rem(18px);
line-height: rem($button-line-height);
border: none;
display: block;
color: $color-white;
margin: 0 auto rem(12px);
width: 100%;
text-align: center;
@include user-select(none);
-webkit-tap-highlight-color: rgba(0,0,0,0);
padding: rem($button-padding);
.platform-ios & {
padding: rem($button-padding-ios);
}
&:disabled {
background-color: $color-grey-dark;
color: $color-grey-lighter;
}
&:not(:disabled):active {
background-color: $color-grey-lighter;
}
&.orange {
background-color: $color-orange;
&:disabled {
background-color: darken($color-orange, 20%);
color: $color-grey-lighter;
}
&:not(:disabled):active {
background-color: $color-red;
}
}
&.light-grey {
background-color: $color-grey-light;
}
}
a.button {
text-decoration: none;
color: $color-white;
}
a {
color: $color-grey-lighter;
&:hover {
color: inherit;
}
}
.inputs {
display: block;
width:100%;
border-collapse: collapse;
margin-bottom: rem(20px);
@include font-pfdin(light);
label {
display: table-row;
.label,
.input {
display: table-cell;
padding: rem(13px) rem(10px) rem(13px) rem(5px);
font-size: rem(21px);
border-bottom: $border-standard;
position:relative;
&.no-border {
border-bottom: none;
}
}
.input {
width: 100%;
input {
display:inline-block;
width: 100%;
background: transparent;
border: none;
padding: 0;
vertical-align: baseline;
font-size: rem(21px);
@include font-pfdin(light);
color: $color-white;
@include placeholder {
color: $color-grey-lighter;
}
&:focus {
@include placeholder {
color: $color-grey-dark;
}
border: none;
box-shadow: none ;
}
}
}
&:last-child .label,
&:last-child .input {
border-bottom: none;
}
&:first-child .label,
&:first-child .input {
padding-top: 0;
}
&:only-child .label,
&:only-child .input {
border-bottom: $border-standard;
border-top: $border-standard;
padding-top: rem(13px);
}
&.invalid {
.input:after {
content: "!";
display: inline-block;
color: $color-white;
background: $color-orange;
border-radius: 0.6em;
width: 1.2em;
text-align: center;
height: 1.2em;
font-size: 1em;
vertical-align: middle;
line-height: 1.3em;
margin-left: -0.7em;
position:absolute;
@include font-pfdin(regular);
}
.input input {
color: $color-orange;
padding-right: 1em;
@include placeholder {
color: $color-orange;
}
}
}
}
}
.view-inner-container {
// @include display(flex);
// @include flex-direction(column);
// @include flex-wrap(nowrap);
// @include align-content(stretch);
height:100%;
width:100%;
display: table;
table-layout: fixed;
}
.form-container {
// @include flex-grow(1);
// @include display(flex);
// @include flex-direction(column);
// @include flex-wrap(nowrap);
// @include justify-content(center);
height: 100%;
display: table-row;
form {
display: table-cell;
vertical-align: middle;
padding: rem($global-margin/2) rem($form-margin);
}
.buttons {
padding: 0 rem($global-margin - $form-margin);
}
}
footer {
text-align: center;
font-size: rem(14px);
line-height: 1;
.privacy-policy-link {
display: block;
}
}
.caption {
text-align: center;
margin: 0 auto rem(25px);
color: $color-grey-lightest;
}
//
//
//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;
//}
src/styles/config-page.scss
+5
View File
@@ -1,6 +1,11 @@
@import "partials/vars";
@import "partials/mixins";
@import "partials/reset";
@import "fonts";
@import "base";
@import "items/color";
@import "items/toggle";
@import "items/input";
@import "items/select";
@import "items/button";
src/styles/items/_button.scss
+61
View File
@@ -0,0 +1,61 @@
@import "../partials/vars";
.item-button {
}
button,
.button {
@include font-pfdin(medium);
text-transform: uppercase;
background-color: $color-gray-4;
border-radius: $border-radius;
font-size: 1rem;
line-height: 1;
border: none;
display: block;
color: $color-white;
min-width: 12rem;
text-align: center;
margin: 0 auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
padding: $button-padding;
.platform-ios & {
padding: $button-padding-ios;
}
&:disabled {
background-color: $color-gray-3;
color: $color-gray-8;
}
&:not(:disabled):active {
background-color: $color-gray-8;
}
&.orange, &[type="submit"] {
background-color: $color-orange;
&:disabled {
background-color: $color-orange-dark;
color: $color-gray-3;
}
&:not(:disabled):active {
background-color: $color-red;
}
}
&.light-grey {
background-color: $color-gray-5;
}
}
a.button {
text-decoration: none;
color: $color-white;
}
src/styles/items/_color.scss
+86
View File
@@ -0,0 +1,86 @@
@import "../partials/vars";
.item-color {
.value {
width: 1.8rem;
height: 1rem;
border-radius: 1rem;
box-shadow: $box-shadow-small-components;
}
.picker-wrap {
left: 0;
top: 0;
top: 0;
right: 0;
bottom: 0;
position: fixed;
padding: 1rem;
background: rgba(0,0,0,0.7);
opacity: 0;
transition: opacity 70ms ease-in 175ms;
pointer-events: none;
z-index: 100;
.picker {
padding: 1rem;
background: $color-gray-11;
border-radius: $border-radius;
}
&.show {
transition-delay: 0ms;
pointer-events: auto;
opacity: 1;
}
}
.color-box-wrap {
box-sizing: border-box;
position: relative;
height: 0;
width: 100%;
padding: 0 0 100% 0; // overridden with inline style
margin: 0.6em 0 0em;
.color-box-container {
position: absolute;
height: 99.97%;
width: 100%;
left: 0;
top: 0;
.color-box {
float:left;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&.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;
}
&.selected {
transform: scale(1.15);
border-radius: $border-radius;
box-shadow: #111 0 0 0.24rem;
position: relative;
z-index: 100;
}
}
}
}
}
src/styles/items/_input.scss
+47
View File
@@ -0,0 +1,47 @@
@import "../partials/vars";
@import "../partials/mixins";
.item-input {
.input {
margin-left: 1rem;
position: relative;
min-width: 50%;
&:before {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
bottom: -0.4rem;
height: 0;
border-bottom: 1px solid $color-gray-5;
}
}
input {
display:inline-block;
width: 100%;
background: transparent;
border: none;
padding: 0;
vertical-align: baseline;
color: $color-white;
font-size: inherit;
@include placeholder {
color: $color-gray-8;
}
&:focus {
@include placeholder {
color: $color-gray-6;
}
border: none;
box-shadow: none ;
}
}
}
src/styles/items/_select.scss
+36
View File
@@ -0,0 +1,36 @@
@import "../vendor/bourbon/bourbon";
@import "../partials/vars";
.item-select {
position: relative;
.value {
$triangle-size: 0.85rem;
position: relative;
padding-right: $triangle-size + 0.25rem;
&:after {
content: "";
position: absolute;
right: 0;
top: 50%;
margin-top: -0.1rem;
@include triangle($triangle-size, $color-gray-10, down);
}
}
select {
opacity: 0;
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
width: 100%;
border: none;
margin:0;
padding:0;
}
}
src/styles/items/_toggle.scss
+51
View File
@@ -0,0 +1,51 @@
@import "../partials/vars";
.item-toggle {
$slide-height: 0.75rem;
$slide-width: $slide-height * 2.4;
$marker-diameter: 1rem;
input {
display: none; // @todo make sure this doesnt mess up interactivity on iOS
}
.graphic {
display: inline-block;
position: relative;
.slide {
display:block;
border-radius: $slide-height;
height: $slide-height;
width: $slide-width;
background: $color-gray-1;
transition: background-color 150ms linear;
}
.marker {
background: $color-gray-10;
width: $marker-diameter;
height: $marker-diameter;
border-radius: 50%;
position: absolute;
left: 0;
display: block;
top: ($marker-diameter - $slide-height) / 2 * -1;
transition: transform 150ms linear;
box-shadow: $box-shadow-small-components;
}
}
input:checked + .graphic {
.slide {
background: $color-orange-dark;
}
.marker {
background: $color-orange;
transform: translateX($slide-width - $marker-diameter);
}
}
}
src/styles/items/color.scss
-58
View File
@@ -1,58 +0,0 @@
@import "../partials/vars";
.item-color {
.picker {
}
.value {
width: rem(10px);
border-color: $color-grey-medium;
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: rem($border-radius);
}
&.rounded-tr {
border-top-right-radius: rem($border-radius);
}
&.rounded-bl {
border-bottom-left-radius: rem($border-radius);
}
&.rounded-br {
border-bottom-right-radius: rem($border-radius);
}
}
}
}
}
src/styles/partials/_mixins.scss
+11 -6
View File
@@ -2,21 +2,26 @@
font-weight: normal;
@if $weight == light {
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
}
@if $weight == normal or $weight == regular {
font-family: 'PFDinDisplayPro-Regular', PFDinDisplayProRegularWebfont, sans-serif;
}
@if $weight == medium {
// iOS includes the PFDinDisplayPro-Medium in the webview but Android does not,
// so we apply a faux bold on the regular weight.
font-family: 'PFDinDisplayPro-Medium', PFDinDisplayProRegularWebfont, sans-serif;
.platform-android & {
font-family: PFDinDisplayProLightWebfont, sans-serif;
font-family: PFDinDisplayProRegularWebfont, sans-serif;
font-weight: bold;
letter-spacing: 0.03em;
letter-spacing: 0.025em;
}
}
}
@mixin pfdin-uppercase {
text-transform: uppercase;
position: relative;
top: 0.05rem;
line-height: 0.9;
}
src/styles/partials/_reset.scss
-2
View File
@@ -50,11 +50,9 @@ q:before, q:after {
/* apply a natural box layout model to all elements, but allowing components to change */
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
src/styles/partials/_vars.scss
+23 -20
View File
@@ -1,37 +1,40 @@
@import "../vendor/bourbon/bourbon";
// Bourbon settings
$em-base: 16px;
$em-base: 18px;
// ---- Colors ------
$color-orange: #ff4700;
$color-orange-dark: #993d19;
$color-red: #ff0000;
$color-white: #ffffff;
$color-borders: #5c5c5c;
$color-black: #000000;
// background color
$color-grey-darker: #333333;
// secondary background
$color-grey-dark: #484848;
//buttons
$color-grey-medium: #666666;
$color-grey-light: #767676;
$border-radius: 4px;
// used for fonts
$color-grey-lighter: #848484;
$color-grey-lightest: #adadad;
$color-gray-0: #111111;
$color-gray-1: #2f2f2f;
$color-gray-2: #333333;
$color-gray-3: #414141;
$color-gray-4: #484848; // divider
$color-gray-5: #5b5b5b;
$color-gray-6: #666666;
$color-gray-7: #767676;
$color-gray-8: #858585;
$color-gray-9: #a4a4a4 ;
$color-gray-10: #ececec;
$color-gray-11: #f2f2f2;
// custom vars
$border-radius: 0.25rem;
$item-spacing-v: 1.5rem;
$item-spacing-h: 0.75rem;
$global-margin: 55px;
$form-margin: 25px;
$button-padding: 18px;
$button-padding-ios: 16px;
$button-padding: 0.7rem;
$button-padding-ios: 0.6rem;
$button-line-height: 13px;
$footer-height-large: 90px;
$border-standard: 1px solid $color-borders;
$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;
src/templates/items/color.tpl
+7 -5
View File
@@ -2,12 +2,14 @@
<span class="label">{{{label}}}</span>
<input
data-manipulator-target
type="text"
type="hidden"
/>
<div class="picker">
<span class="value"></span>
<div class="color-box-wrap">
<div class="color-box-container"></div>
<span class="value"></span>
<div class="picker-wrap">
<div class="picker">
<div class="color-box-wrap">
<div class="color-box-container"></div>
</div>
</div>
</div>
</label>
src/templates/items/heading.tpl
+2 -2
View File
@@ -1,3 +1,3 @@
<div class="item-container-header">
<h1 data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h1>
<div class="item item-heading">
<h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
</div>
src/templates/items/input.tpl
+1 -2
View File
@@ -1,9 +1,8 @@
<label class="item">
<label class="item item-input">
<span class="label">{{{label}}}</span>
<span class="input">
<input
data-manipulator-target
type="text"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
</span>
src/templates/items/select.tpl
+4 -3
View File
@@ -1,8 +1,9 @@
<label class="item">
<label class="item item-select">
<span class="label">{{{label}}}</span>
<select data-manipulator-target class="item-select">
<span class="value"></span>
<select data-manipulator-target>
{{each options}}
<option value="{{value}}" class="item-select-option">{{{label}}}</option>
<option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
{{/each}}
</select>
</label>
src/templates/items/subheading.tpl
-3
View File
@@ -1,3 +0,0 @@
<div class="item-container-header">
<h2 data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h2>
</div>
src/templates/items/submit.tpl
+4 -4
View File
@@ -1,9 +1,9 @@
<div class="button-container">
<input
<div class="item item-button">
<button
data-manipulator-target
type="submit"
class="item-button"
value="{{label}}"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
>
{{{label}}}
</button>
</div>
src/templates/items/text.tpl
+3
View File
@@ -0,0 +1,3 @@
<div class="item item-text">
<p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
</div>
src/templates/items/toggle.tpl
+5 -1
View File
@@ -1,4 +1,4 @@
<label class="item">
<label class="item item-toggle">
<span class="label">{{{label}}}</span>
<span class="input">
<input
@@ -6,5 +6,9 @@
type="checkbox"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
<span class="graphic">
<span class="slide"></span>
<span class="marker"></span>
</span>
</span>
</label>