mirror of
https://github.com/pebble-dev/clay.git
synced 2026-09-06 09:07:19 -04:00
Basic build process and transforming json into html
This commit is contained in:
Keegan
Binary file not shown.
Binary file not shown.
Vendored
+377
@@ -0,0 +1,377 @@
|
||||
'use strict';
|
||||
|
||||
(function($, Sortable) {
|
||||
|
||||
var ENUMS = {
|
||||
COLOR : {
|
||||
EMPTY: 'transparent'
|
||||
}
|
||||
}
|
||||
|
||||
$.extend($.fn, {
|
||||
itemToggle: function() {
|
||||
this.each(function() {
|
||||
var $checkbox = $(this);
|
||||
var item = $checkbox.parent();
|
||||
|
||||
var $injectedCheckbox = $('<div class="item-styled-toggle-wrapper">'
|
||||
+ '<div class="item-styled-toggle">'
|
||||
+ '<div class="item-styled-toggle-bar"></div>'
|
||||
+ '<div class="item-styled-toggle-bar"></div>'
|
||||
+ '<div class="item-styled-toggle-bar"></div>'
|
||||
+ '</div>'
|
||||
+ '</div>');
|
||||
|
||||
item.append($injectedCheckbox);
|
||||
});
|
||||
},
|
||||
|
||||
itemCheckbox: function() {
|
||||
this.each(function() {
|
||||
var $checkbox = $(this);
|
||||
var item = $checkbox.parent();
|
||||
|
||||
var $injectedCheckbox = $('<div class="item-styled-checkbox"></div>');
|
||||
|
||||
item.append($injectedCheckbox);
|
||||
});
|
||||
},
|
||||
|
||||
itemSelect: function() {
|
||||
this.each(function() {
|
||||
var $select = $(this);
|
||||
var $item = $select.parent();
|
||||
|
||||
$item.append('<div class="select-triangle"></div>');
|
||||
});
|
||||
},
|
||||
|
||||
itemDate: function() {
|
||||
this.each(function() {
|
||||
var $date = $(this);
|
||||
var $item = $date.parent();
|
||||
|
||||
var $injectedDate = $('<div class="item-styled-date"></div>');
|
||||
updateDate();
|
||||
|
||||
$item.append($injectedDate);
|
||||
|
||||
$date.change(function() {
|
||||
updateDate();
|
||||
});
|
||||
|
||||
function updateDate() {
|
||||
$injectedDate.html($date.val());
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
itemTime: function() {
|
||||
this.each(function() {
|
||||
var $time = $(this);
|
||||
var $item = $time.parent();
|
||||
|
||||
var $injectedTime = $('<div class="item-styled-time"></div>');
|
||||
updateTime();
|
||||
|
||||
$item.append($injectedTime);
|
||||
|
||||
$time.change(function() {
|
||||
updateTime();
|
||||
});
|
||||
|
||||
function updateTime() {
|
||||
$injectedTime.html($time.val());
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
itemRadio: function() {
|
||||
this.each(function() {
|
||||
var $radio = $(this);
|
||||
var $item = $radio.parent();
|
||||
|
||||
var $injectedRadio = $('<div class="item-styled-radio"></div>');
|
||||
|
||||
$item.append($injectedRadio);
|
||||
});
|
||||
},
|
||||
|
||||
itemColor: function(options){
|
||||
|
||||
var options = $.extend({}, {
|
||||
sunny: false
|
||||
}, options || {});
|
||||
|
||||
var layout = [
|
||||
[false , false , '#55FF00', '#AAFF55', false , '#FFFF55', '#FFFFAA', false , false ],
|
||||
[false , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false ],
|
||||
['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
|
||||
['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
|
||||
[false , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false ],
|
||||
['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
|
||||
['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
|
||||
[false , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false ],
|
||||
[false , false , false , '#AAAAFF', '#AA55FF', '#AA55AA', false , false , false ],
|
||||
];
|
||||
|
||||
var mappingSunny = {'000000': '000000','000055': '001e41','0000aa': '004387',
|
||||
'0000ff': '0068ca','005500': '2b4a2c','005555': '27514f',
|
||||
'0055aa': '16638d','0055ff': '007dce','00aa00': '5e9860',
|
||||
'00aa55': '5c9b72','00aaaa': '57a5a2','00aaff': '4cb4db',
|
||||
'00ff00': '8ee391','00ff55': '8ee69e','00ffaa': '8aebc0',
|
||||
'00ffff': '84f5f1','550000': '4a161b','550055': '482748',
|
||||
'5500aa': '40488a','5500ff': '2f6bcc','555500': '564e36',
|
||||
'555555': '545454','5555aa': '4f6790','5555ff': '4180d0',
|
||||
'55aa00': '759a64','55aa55': '759d76','55aaaa': '71a6a4',
|
||||
'55aaff': '69b5dd','55ff00': '9ee594','55ff55': '9de7a0',
|
||||
'55ffaa': '9becc2','55ffff': '95f6f2','aa0000': '99353f',
|
||||
'aa0055': '983e5a','aa00aa': '955694','aa00ff': '8f74d2',
|
||||
'aa5500': '9d5b4d','aa5555': '9d6064','aa55aa': '9a7099',
|
||||
'aa55ff': '9587d5','aaaa00': 'afa072','aaaa55': 'aea382',
|
||||
'aaaaaa': 'ababab','ffffff': 'ffffff','aaaaff': 'a7bae2',
|
||||
'aaff00': 'c9e89d','aaff55': 'c9eaa7','aaffaa': 'c7f0c8',
|
||||
'aaffff': 'c3f9f7','ff0000': 'e35462','ff0055': 'e25874',
|
||||
'ff00aa': 'e16aa3','ff00ff': 'de83dc','ff5500': 'e66e6b',
|
||||
'ff5555': 'e6727c','ff55aa': 'e37fa7','ff55ff': 'e194df',
|
||||
'ffaa00': 'f1aa86','ffaa55': 'f1ad93','ffaaaa': 'efb5b8',
|
||||
'ffaaff': 'ecc3eb','ffff00': 'ffeeab','ffff55': 'fff1b5',
|
||||
'ffffaa': 'fff6d3'};
|
||||
|
||||
var mappingNormal = {'000000': '000000','001e41': '000055','004387': '0000aa',
|
||||
'0068ca': '0000ff','2b4a2c': '005500','27514f': '005555',
|
||||
'16638d': '0055aa','007dce': '0055ff','5e9860': '00aa00',
|
||||
'5c9b72': '00aa55','57a5a2': '00aaaa','4cb4db': '00aaff',
|
||||
'8ee391': '00ff00','8ee69e': '00ff55','8aebc0': '00ffaa',
|
||||
'84f5f1': '00ffff','4a161b': '550000','482748': '550055',
|
||||
'40488a': '5500aa','2f6bcc': '5500ff','564e36': '555500',
|
||||
'545454': '555555','4f6790': '5555aa','4180d0': '5555ff',
|
||||
'759a64': '55aa00','759d76': '55aa55','71a6a4': '55aaaa',
|
||||
'69b5dd': '55aaff','9ee594': '55ff00','9de7a0': '55ff55',
|
||||
'9becc2': '55ffaa','95f6f2': '55ffff','99353f': 'aa0000',
|
||||
'983e5a': 'aa0055','955694': 'aa00aa','8f74d2': 'aa00ff',
|
||||
'9d5b4d': 'aa5500','9d6064': 'aa5555','9a7099': 'aa55aa',
|
||||
'9587d5': 'aa55ff','afa072': 'aaaa00','aea382': 'aaaa55',
|
||||
'ababab': 'aaaaaa','ffffff': 'ffffff','a7bae2': 'aaaaff',
|
||||
'c9e89d': 'aaff00','c9eaa7': 'aaff55','c7f0c8': 'aaffaa',
|
||||
'c3f9f7': 'aaffff','e35462': 'ff0000','e25874': 'ff0055',
|
||||
'e16aa3': 'ff00aa','de83dc': 'ff00ff','e66e6b': 'ff5500',
|
||||
'e6727c': 'ff5555','e37fa7': 'ff55aa','e194df': 'ff55ff',
|
||||
'f1aa86': 'ffaa00','f1ad93': 'ffaa55','efb5b8': 'ffaaaa',
|
||||
'ecc3eb': 'ffaaff','ffeeab': 'ffff00','fff1b5': 'ffff55',
|
||||
'fff6d3': 'ffffaa'};
|
||||
|
||||
this.each(function() {
|
||||
var $color = $(this);
|
||||
var $item = $color.parent();
|
||||
var grid = '';
|
||||
var itemWidth = 100 / layout[0].length;
|
||||
var itemHeight = 100 / layout.length;
|
||||
var boxHeight = itemWidth * layout.length;
|
||||
|
||||
for(var i = 0; i < layout.length; i++) {
|
||||
for(var j = 0; j < layout[i].length; j++) {
|
||||
|
||||
var color = layout[i][j] || ENUMS.COLOR.EMPTY;
|
||||
var selectable = (color !== ENUMS.COLOR.EMPTY ? ' selectable' : '');
|
||||
|
||||
var roundedTL = (i === 0 && j === 0)
|
||||
|| i === 0 && !layout[i][j - 1]
|
||||
|| !layout[i][j - 1] && !layout[i -1][j]
|
||||
? ' rounded-tl' : '';
|
||||
|
||||
var roundedTR = i === 0 && !layout[i][j + 1]
|
||||
|| !layout[i][j + 1] && !layout[i -1][j]
|
||||
? ' rounded-tr ' : '';
|
||||
|
||||
var roundedBL = (i === layout.length - 1 && j === 0)
|
||||
|| i === layout.length - 1 && !layout[i][j - 1]
|
||||
|| !layout[i][j - 1] && !layout[i + 1][j]
|
||||
? ' rounded-bl' : '';
|
||||
|
||||
var roundedBR = i === layout.length - 1 && !layout[i][j + 1]
|
||||
|| !layout[i][j + 1] && !layout[i + 1][j]
|
||||
? ' rounded-br' : '';
|
||||
|
||||
if(options.sunny && color !== ENUMS.COLOR.EMPTY) {
|
||||
color = '#' + mappingSunny[color.replace('#', '').toLowerCase()];
|
||||
}
|
||||
|
||||
grid += '<i ' +
|
||||
'class="color-box ' + selectable + roundedTL +
|
||||
roundedTR + roundedBL + roundedBR + '" ' +
|
||||
'data-value="' + color.replace(/^#/, '0x') + '" ' +
|
||||
'style="' +
|
||||
'width:' + itemWidth + '%; ' +
|
||||
'height:' + itemHeight + '%; ' +
|
||||
'background:' + color + ';">' +
|
||||
'</i>';
|
||||
}
|
||||
}
|
||||
|
||||
var $injectedColor = $('<div class="item-styled-color">' +
|
||||
'<span class="value" style="background:' + $color.val().replace(/^0x/, '#') + '"></span>' +
|
||||
'<div ' +
|
||||
'style="padding-bottom:' + boxHeight + '%"' +
|
||||
'class="color-box-wrap">' +
|
||||
'<div class="color-box-container">' +
|
||||
grid +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
$item.append($injectedColor);
|
||||
|
||||
var $valueDisplay = $injectedColor.find('.value');
|
||||
|
||||
$color.on('click', function(ev) {
|
||||
$item.find('.color-box-wrap').toggleClass('show');
|
||||
});
|
||||
|
||||
$color.on('change', function(ev) {
|
||||
var value = $(this).val().replace(/^0x/, '').toLowerCase();
|
||||
if(options.sunny) {
|
||||
value = mappingSunny[value];
|
||||
}
|
||||
$valueDisplay.css('background-color', '#' + value);
|
||||
});
|
||||
|
||||
$item.find('.color-box.selectable').on('click', function(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var value = $(this).data('value').toLowerCase();
|
||||
if(options.sunny) {
|
||||
$color.val('0x' + mappingNormal[value.replace(/^0x/, '')]).trigger('change');
|
||||
} else {
|
||||
$color.val(value).trigger('change');
|
||||
}
|
||||
$valueDisplay.css('background-color', value.replace(/^0x/, '#'));
|
||||
$item.find('.color-box-wrap').removeClass('show');
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
tab: function() {
|
||||
this.each(function() {
|
||||
var $tab = $(this);
|
||||
|
||||
$tab.click(function() {
|
||||
var $current = $(this);
|
||||
var name = $current.attr('name');
|
||||
|
||||
$('a[name=' + name + ']').each(function(){
|
||||
$(this).removeClass('active');
|
||||
});
|
||||
|
||||
$current.addClass('active');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
itemSlider: function() {
|
||||
this.each(function() {
|
||||
var $slider = $(this);
|
||||
var name = $slider.attr('name');
|
||||
var $input = $('input[name=' + name + '][class=item-input]');
|
||||
|
||||
$slider.on('input', function() {
|
||||
var $current = $(this);
|
||||
$input.val($current.val());
|
||||
});
|
||||
|
||||
$input.change(function() {
|
||||
var $current = $(this);
|
||||
$slider.val($current.val());
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
itemDraggableList: function() {
|
||||
this.each(function() {
|
||||
var $handlebar = '<div class="item-draggable-handle">'
|
||||
+ '<div class="item-draggable-handle-bar"></div>'
|
||||
+ '<div class="item-draggable-handle-bar"></div>'
|
||||
+ '<div class="item-draggable-handle-bar"></div>'
|
||||
+ '</div>';
|
||||
|
||||
$(this).children('label').append($handlebar);
|
||||
|
||||
Sortable.create(this, {
|
||||
handle: '.item-draggable-handle'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
itemDynamicList: function() {
|
||||
this.each(function() {
|
||||
var $list = $(this);
|
||||
|
||||
$list.children('label').each(function() {
|
||||
var $deleteButton = $('<div class="delete-item"></div>');
|
||||
|
||||
$deleteButton.click(function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
$(this).append($deleteButton);
|
||||
});
|
||||
|
||||
var $addButton = $('<div class="item add-item">Add one more...</div>');
|
||||
|
||||
$list.append($addButton);
|
||||
|
||||
$addButton.click(function() {
|
||||
var $inbox = $('<div class="item">'
|
||||
+ '<div class="item-input-wrapper">'
|
||||
+ '<input class="item-input" type="text" name="focus-box">'
|
||||
+ '</div>'
|
||||
+ '</div>');
|
||||
|
||||
$inbox.insertBefore($list.children().last());
|
||||
|
||||
var $input = $inbox.find('input');
|
||||
$input.focus();
|
||||
|
||||
$input.keypress(function(e) {
|
||||
var key = e.which;
|
||||
if (key === 13) {
|
||||
stopEditing($input, $inbox);
|
||||
}
|
||||
});
|
||||
|
||||
$input.focusout(function() {
|
||||
stopEditing($input, $inbox);
|
||||
});
|
||||
|
||||
function stopEditing(input, inbox) {
|
||||
var text = input.val();
|
||||
inbox.html(text);
|
||||
|
||||
var deletebutton = $('<div class="delete-item"></div>');
|
||||
|
||||
deletebutton.click(function(){
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
inbox.append(deletebutton);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$('.item-toggle').itemToggle();
|
||||
$('.item-checkbox').itemCheckbox();
|
||||
$('.item-select').itemSelect();
|
||||
$('.item-date').itemDate();
|
||||
$('.item-time').itemTime();
|
||||
$('.item-radio').itemRadio();
|
||||
$('.item-color-normal').itemColor({sunny: false});
|
||||
$('.item-color-sunny').itemColor({sunny: true});
|
||||
$('.tab-button').tab();
|
||||
$('.item-slider').itemSlider();
|
||||
$('.item-draggable-list').itemDraggableList();
|
||||
$('.item-dynamic-list').itemDynamicList();
|
||||
});
|
||||
}(Zepto, Sortable));
|
||||
+581
@@ -0,0 +1,581 @@
|
||||
@font-face {
|
||||
font-family: 'PFDinDisplayProLightWebfont';
|
||||
src: url('../fonts/PFDinDisplayPro-Light.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PTSansRegularWebfont';
|
||||
src: url('../fonts/PTSans-regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant:normal;
|
||||
}
|
||||
|
||||
$orange: #FF4700;
|
||||
$dark-gray: #333333;
|
||||
$gray: #A8A8A8;
|
||||
$light-gray: #EAEAEA;
|
||||
$medium-light-gray: #DEDEDE;
|
||||
$lighter-gray: #F7F7F7;
|
||||
$white: #FFFFFF;
|
||||
$border-radius: 5px;
|
||||
|
||||
@mixin transform($deg) {
|
||||
-webkit-transform: rotate($deg);
|
||||
-moz-transform: rotate($deg);
|
||||
-ms-transform: rotate($deg);
|
||||
-o-transform: rotate($deg);
|
||||
transform: rotate($deg);
|
||||
}
|
||||
|
||||
@mixin user-select($type) {
|
||||
-webkit-user-select: $type;
|
||||
-moz-user-select: $type;
|
||||
-ms-user-select: $type;
|
||||
user-select: $type;
|
||||
}
|
||||
|
||||
@mixin appearance($type) {
|
||||
-webkit-appearance: $type;
|
||||
-moz-appearance: $type;
|
||||
-ms-appearance: $type;
|
||||
appearance: $type;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $orange;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $light-gray;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
@include user-select(none !important);
|
||||
}
|
||||
|
||||
body, select, input[type=text], input[type=time], input[type=date] {
|
||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
select, input[type=time], input[type=date] {
|
||||
@include appearance(none);
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
color: $gray;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: $lighter-gray;
|
||||
}
|
||||
|
||||
input[type=date] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
select {
|
||||
right: 30px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
input[type=time] {
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
input[type=date] {
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
.select-triangle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid $orange;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
color: $dark-gray;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.item-container-header {
|
||||
padding: 3px 10px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
|
||||
font-size: .8em;
|
||||
font-weight: normal;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.item-container-content {
|
||||
background-color: $lighter-gray;
|
||||
border-top: 1px solid $medium-light-gray;
|
||||
border-bottom: 1px solid $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-container-footer {
|
||||
padding: 3px 10px;
|
||||
font-size: .7em;
|
||||
line-height: 1.4em;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-styled-checkbox {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-styled-radio {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.item-subtitle-wrapper .item-draggable-handle {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.item-subtitle {
|
||||
font-size: .7em;
|
||||
line-height: .7em;
|
||||
padding: .3em 0;
|
||||
}
|
||||
|
||||
.item-styled-toggle-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: $border-radius;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.item-styled-toggle {
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: $border-radius;
|
||||
top: 1px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: left;
|
||||
}
|
||||
|
||||
.item-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper {
|
||||
background-color: $gray;
|
||||
}
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 27px;
|
||||
}
|
||||
|
||||
.item-styled-toggle-bar {
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
margin-left: 3px;
|
||||
background-color: $light-gray;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.item-styled-checkbox {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: $border-radius;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-checkbox + .item-styled-checkbox {
|
||||
border-color: $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox {
|
||||
border-color: $orange;
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: $lighter-gray;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
@include transform(45deg);
|
||||
}
|
||||
|
||||
.item-styled-radio {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 12px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.item-radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-radio + .item-styled-radio {
|
||||
border-color: $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-radio:checked + .item-styled-radio {
|
||||
border-color: $orange;
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.item-radio:checked + .item-styled-radio:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: $lighter-gray;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
@include transform(45deg);
|
||||
}
|
||||
|
||||
.item-color {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.item-styled-color {
|
||||
|
||||
background: $lighter-gray;
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: $border-radius;
|
||||
border-color: $gray;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.color-box-wrap {
|
||||
display:none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0; // overridden with inline style
|
||||
margin: 0.6em 0 0em;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.color-box {
|
||||
float:left;
|
||||
cursor: pointer;
|
||||
|
||||
&.rounded-tl {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-tr {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-bl {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.rounded-br {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-date, .item-time {
|
||||
position: absolute;
|
||||
color: $lighter-gray !important;
|
||||
}
|
||||
|
||||
.item-styled-date, .item-styled-time {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
color: $gray;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: $lighter-gray;
|
||||
}
|
||||
|
||||
.item-input-wrapper {
|
||||
border-radius: $border-radius;
|
||||
border: 2px solid $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-input-wrapper-button {
|
||||
box-sizing: border-box;
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
.item-input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0 10px 7px 10px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-button {
|
||||
width: 60%;
|
||||
height: 35px;
|
||||
background-color: $orange;
|
||||
border-radius: $border-radius;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
border: none;
|
||||
@include appearance(none);
|
||||
}
|
||||
|
||||
.item-input-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.tab-buttons {
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: $orange;
|
||||
border: 1px solid $orange;
|
||||
border-right-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.tab-button:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.tab-button:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: $orange;
|
||||
color: $lighter-gray;
|
||||
}
|
||||
|
||||
.item-slider {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
@include appearance(none);
|
||||
height: 30px;
|
||||
width: 79%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-thumb:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -1001px;
|
||||
height: 2px;
|
||||
width: 1000px;
|
||||
background: $orange;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-thumb {
|
||||
@include appearance(none);
|
||||
position: relative;
|
||||
top: -13px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background-color: $white;
|
||||
border-radius: $border-radius;
|
||||
border: 2px solid $light-gray;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-runnable-track {
|
||||
height: 2px;
|
||||
background-color: $medium-light-gray;
|
||||
}
|
||||
|
||||
.item-slider::-webkit-slider-thumb:after {
|
||||
content: "lll";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: $medium-light-gray;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item-slider-text {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.item-slider-text .item-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delete-item{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.delete-item:before,.delete-item:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: $gray;
|
||||
border-radius: 2px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.delete-item:before{
|
||||
@include transform(45deg);
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.delete-item:after{
|
||||
@include transform(-45deg);
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.add-item{
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
.item-draggable-handle {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.item-draggable-handle-bar {
|
||||
margin-top: 5px;
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
background-color: $gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[draggable=true] {
|
||||
background-color: $lighter-gray;
|
||||
border: 2px solid $light-gray;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user