mirror of
https://github.com/pebble-dev/clay.git
synced 2026-10-27 23:20:04 -04:00
Basic build process and transforming json into html
This commit is contained in:
Keegan committed
1 parent
8b489173df
commit
227bb49786
54 files changed
+3136
No files matched your search
+485
@@ -0,0 +1,485 @@
|
||||
@font-face {
|
||||
font-family: 'PFDinDisplayProLightWebfont';
|
||||
src: url("../fonts/PFDinDisplayPro-Light.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal; }
|
||||
@font-face {
|
||||
font-family: 'PTSansRegularWebfont';
|
||||
src: url("../fonts/PTSans-regular.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal; }
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
*:focus {
|
||||
outline-width: 0; }
|
||||
|
||||
a {
|
||||
color: #FF4700;
|
||||
text-decoration: none; }
|
||||
|
||||
body {
|
||||
background-color: #EAEAEA;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important; }
|
||||
|
||||
body, select, input[type=text], input[type=time], input[type=date] {
|
||||
font-family: 'PFDinDisplayPro-Light', PFDinDisplayProLightWebfont, sans-serif;
|
||||
font-weight: normal; }
|
||||
|
||||
select, input[type=time], input[type=date] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
color: #A8A8A8;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: #F7F7F7; }
|
||||
|
||||
input[type=date] {
|
||||
direction: rtl; }
|
||||
|
||||
select {
|
||||
right: 30px;
|
||||
top: 14px; }
|
||||
|
||||
input[type=time] {
|
||||
right: 10px !important; }
|
||||
|
||||
input[type=date] {
|
||||
right: 10px !important; }
|
||||
|
||||
.select-triangle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid #FF4700; }
|
||||
|
||||
.item-container {
|
||||
color: #333333;
|
||||
margin-top: 15px; }
|
||||
|
||||
.item-container-header {
|
||||
padding: 3px 10px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'PT Sans', PTSansRegularWebfont, sans-serif;
|
||||
font-size: .8em;
|
||||
font-weight: normal;
|
||||
color: #A8A8A8; }
|
||||
|
||||
.item-container-content {
|
||||
background-color: #F7F7F7;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
border-bottom: 1px solid #DEDEDE; }
|
||||
|
||||
.item-container-footer {
|
||||
padding: 3px 10px;
|
||||
font-size: .7em;
|
||||
line-height: 1.4em;
|
||||
color: #A8A8A8; }
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow: hidden; }
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #DEDEDE; }
|
||||
|
||||
.item-subtitle-wrapper {
|
||||
font-size: 1em; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
||||
top: 16px; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-checkbox {
|
||||
top: 18px; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-radio {
|
||||
top: 16px; }
|
||||
|
||||
.item-subtitle-wrapper .item-draggable-handle {
|
||||
top: 18px; }
|
||||
|
||||
.item-subtitle {
|
||||
font-size: .7em;
|
||||
line-height: .7em;
|
||||
padding: .3em 0; }
|
||||
|
||||
.item-styled-toggle-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: background-color; }
|
||||
|
||||
.item-styled-toggle {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
top: 1px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: left; }
|
||||
|
||||
.item-toggle {
|
||||
display: none; }
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper {
|
||||
background-color: #A8A8A8; }
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 1px; }
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 27px; }
|
||||
|
||||
.item-styled-toggle-bar {
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
margin-left: 3px;
|
||||
background-color: #EAEAEA;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
top: 7px; }
|
||||
|
||||
.item-styled-checkbox {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 5px;
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
.item-checkbox {
|
||||
display: none; }
|
||||
|
||||
.item-checkbox + .item-styled-checkbox {
|
||||
border-color: #DEDEDE; }
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox {
|
||||
border-color: #FF4700;
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: #F7F7F7;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
|
||||
.item-styled-radio {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 12px;
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
.item-radio {
|
||||
display: none; }
|
||||
|
||||
.item-radio + .item-styled-radio {
|
||||
border-color: #DEDEDE; }
|
||||
|
||||
.item-radio:checked + .item-styled-radio {
|
||||
border-color: #FF4700;
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-radio:checked + .item-styled-radio:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: #F7F7F7;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
|
||||
.item-color {
|
||||
display: none; }
|
||||
|
||||
.item-styled-color {
|
||||
background: #F7F7F7; }
|
||||
.item-styled-color .value {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: #A8A8A8;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
.item-styled-color .color-box-wrap {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0;
|
||||
margin: 0.6em 0 0em; }
|
||||
.item-styled-color .color-box-wrap.show {
|
||||
display: block; }
|
||||
.item-styled-color .color-box-wrap .color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box {
|
||||
float: left;
|
||||
cursor: pointer; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
|
||||
border-top-left-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
|
||||
border-top-right-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
|
||||
border-bottom-left-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
|
||||
border-bottom-right-radius: 5px; }
|
||||
|
||||
.item-date, .item-time {
|
||||
position: absolute;
|
||||
color: #F7F7F7 !important; }
|
||||
|
||||
.item-styled-date, .item-styled-time {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
color: #A8A8A8;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: #F7F7F7; }
|
||||
|
||||
.item-input-wrapper {
|
||||
border-radius: 5px;
|
||||
border: 2px solid #DEDEDE; }
|
||||
|
||||
.item-input-wrapper-button {
|
||||
box-sizing: border-box;
|
||||
width: 77%; }
|
||||
|
||||
.item-input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0 10px 7px 10px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.button-container {
|
||||
text-align: center; }
|
||||
|
||||
.item-button {
|
||||
width: 60%;
|
||||
height: 35px;
|
||||
background-color: #FF4700;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
.item-input-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 20%; }
|
||||
|
||||
.tab-buttons {
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
|
||||
.tab-button {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: #FF4700;
|
||||
border: 1px solid #FF4700;
|
||||
border-right-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
right: -1px; }
|
||||
|
||||
.tab-button:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-right-width: 0; }
|
||||
|
||||
.tab-button:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-right-width: 1px; }
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #FF4700;
|
||||
color: #F7F7F7; }
|
||||
|
||||
.item-slider {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
height: 30px;
|
||||
width: 79%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-top: -10px; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -1001px;
|
||||
height: 2px;
|
||||
width: 1000px;
|
||||
background: #FF4700; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
top: -13px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #EAEAEA; }
|
||||
|
||||
.item-slider::-webkit-slider-runnable-track {
|
||||
height: 2px;
|
||||
background-color: #DEDEDE; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb:after {
|
||||
content: "lll";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
color: #DEDEDE;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px; }
|
||||
|
||||
.item-slider-text {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
width: 16%; }
|
||||
|
||||
.item-slider-text .item-input {
|
||||
text-align: center; }
|
||||
|
||||
.delete-item {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
border-radius: 6px; }
|
||||
|
||||
.delete-item:before, .delete-item:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: #A8A8A8;
|
||||
border-radius: 2px;
|
||||
top: 16px; }
|
||||
|
||||
.delete-item:before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
left: 3px; }
|
||||
|
||||
.delete-item:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 3px; }
|
||||
|
||||
.add-item {
|
||||
color: #FF4700; }
|
||||
|
||||
.item-draggable-handle {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
height: 28px;
|
||||
width: 28px; }
|
||||
|
||||
.item-draggable-handle-bar {
|
||||
margin-top: 5px;
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
background-color: #A8A8A8;
|
||||
text-align: center; }
|
||||
|
||||
[draggable=true] {
|
||||
background-color: #F7F7F7;
|
||||
border: 2px solid #EAEAEA;
|
||||
border-radius: 2px; }
|
||||
+1
@@ -0,0 +1 @@
|
||||
@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:0;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:#333;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:.3s;transition-property:background-color}.item-styled-toggle{position:relative;background-color:#fff;width:28px;height:28px;border-radius:5px;top:1px;transition-timing-function:ease-in-out;transition-duration:.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:.6em 0 0}.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-tLine truncated
|
||||
Reference in new issue
Block a user