mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-25 18:52:20 -05:00
[ux] port forms
This commit is contained in:
karolinaszczur
parent
f5c0dc56c7
commit
6d51d237a1
@ -196,7 +196,7 @@ exports.pages.groupchat = function anonymous(locals) {
|
||||
exports.pages.main = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div></section>');
|
||||
buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact" class="inline"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
||||
@ -14,7 +14,7 @@ section.page.main
|
||||
|
||||
div
|
||||
h3 Add / Approve Contacts
|
||||
input(type="text")#addcontact
|
||||
input(type="text", class="inline")#addcontact
|
||||
button.addContact Add
|
||||
ul#contactrequests
|
||||
|
||||
|
||||
@ -204,12 +204,8 @@
|
||||
position: relative
|
||||
|
||||
textarea
|
||||
width: 100%
|
||||
position: relative
|
||||
height: 30px
|
||||
line-height: $line-height-base
|
||||
padding: 5px
|
||||
background: white
|
||||
padding: 6px 10px
|
||||
|
||||
&.editing
|
||||
background-color: #fffcea
|
||||
|
||||
@ -1,40 +1,98 @@
|
||||
// Forms and Buttons
|
||||
// Forms
|
||||
|
||||
input[type=text], input[type=email], input[type=search], input[type=password], textarea, .main .status
|
||||
-webkit-appearance: none
|
||||
roundall(3px)
|
||||
padding: 0 10px
|
||||
background-color: white
|
||||
border: 1px solid $gray-lighter
|
||||
font-size: $font-size-small
|
||||
color: $gray
|
||||
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea, .main .status
|
||||
width: 100%
|
||||
borderbox()
|
||||
font-family: $font-family-gotham
|
||||
-webkit-font-smoothing: antialiased
|
||||
-webkit-appearance: none
|
||||
|
||||
transition: border .2s ease-in 0
|
||||
-webkit-transition: border .2s ease-in 0
|
||||
-moz-transition: border .2s ease-in 0
|
||||
&.inline
|
||||
display: inline-block
|
||||
width: auto
|
||||
|
||||
input[type=text], input[type=email], input[type=search], input[type=password], .main .status
|
||||
input[type=text], input[type=email], input[type=password], input[type=search],
|
||||
input[type=date], input[type=url], input[type=file], textarea, select, input[type=checkbox], input[type=radio]
|
||||
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
|
||||
.invalid
|
||||
|
||||
label
|
||||
color: $red
|
||||
|
||||
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea
|
||||
background: $red-lighter
|
||||
border: 1px solid $red-light
|
||||
color: $red-light
|
||||
|
||||
&:focus
|
||||
border: 1px solid $red-light
|
||||
box-shadow: 0 0 5px $red-light
|
||||
|
||||
.valid
|
||||
|
||||
label
|
||||
color: $green
|
||||
|
||||
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea
|
||||
background: $green-lighter
|
||||
border: 1px solid $green-light
|
||||
color: $green-light
|
||||
|
||||
&:focus
|
||||
border: 1px solid $green-light
|
||||
box-shadow: 0 0 5px $green-light
|
||||
|
||||
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], input[type=file], textarea, select, .main .status
|
||||
display: block
|
||||
border-radius: 3px
|
||||
border: 1px solid $gray-lighter
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
border: 1px solid $blue-light
|
||||
box-shadow: 0 0 5px $blue-light
|
||||
transition: all .3s ease-in
|
||||
-webkit-transition: all .3s ease-in
|
||||
|
||||
&:disabled
|
||||
background: lighten($gray-lighter, 60%)
|
||||
|
||||
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=url], .main .status
|
||||
height: 35px
|
||||
padding: 5px 10px
|
||||
|
||||
textarea
|
||||
padding: 10px
|
||||
resize: none
|
||||
font-size: $font-size-small
|
||||
|
||||
input[type=text]:focus,
|
||||
input[type=email]:focus,
|
||||
input[type=search]:focus,
|
||||
input[type=password]:focus,
|
||||
textarea:focus,
|
||||
.main .status:focus
|
||||
outline: none
|
||||
border: 1px solid lighten($blue, 50%)
|
||||
input[type=file]
|
||||
padding: 15px
|
||||
background: lighten($gray-lighter, 70%)
|
||||
font-size: $font-size-small
|
||||
color: $gray-light
|
||||
|
||||
label
|
||||
display: block
|
||||
margin-bottom: 5px
|
||||
font-size: 13px
|
||||
font-weight: $font-weight-bold
|
||||
color: $gray
|
||||
font-size: $font-size-small
|
||||
|
||||
.has-icon
|
||||
position: relative
|
||||
|
||||
.ss-icon
|
||||
position: absolute
|
||||
top: 31px
|
||||
right: 10px
|
||||
font-size: $font-size-small
|
||||
transition: all .3s ease-in
|
||||
|
||||
&.ss-delete
|
||||
color: $red-light
|
||||
|
||||
&.ss-check
|
||||
color: $green-light
|
||||
|
||||
&.ss-search
|
||||
color: $gray-lighter
|
||||
|
||||
@ -5,19 +5,14 @@
|
||||
padding: 20px
|
||||
border-bottom: 1px solid $gray-lighter
|
||||
|
||||
.status
|
||||
padding: 10px
|
||||
|
||||
&:last-of-type
|
||||
border: none
|
||||
|
||||
.uploadRegion
|
||||
padding: 15px
|
||||
font-size: $font-size-small
|
||||
roundall(3px)
|
||||
margin: 10px 0
|
||||
color: $gray-light
|
||||
background: lighten($gray-light, 93%)
|
||||
border: 1px solid $gray-lighter
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
||||
@ -785,12 +785,8 @@ h3 {
|
||||
position: relative;
|
||||
}
|
||||
.chatBox textarea {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
line-height: 18px;
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.chatBox textarea.editing {
|
||||
background-color: #fffcea;
|
||||
@ -801,15 +797,11 @@ h3 {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.main > div .status {
|
||||
padding: 10px;
|
||||
}
|
||||
.main > div:last-of-type {
|
||||
border: none;
|
||||
}
|
||||
.uploadRegion {
|
||||
padding: 15px;
|
||||
font-size: 12px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-khtml-border-radius: 3px;
|
||||
@ -817,8 +809,7 @@ h3 {
|
||||
-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 0;
|
||||
color: #878787;
|
||||
background: #f7f7f7;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.uploadRegion p {
|
||||
margin: 0;
|
||||
@ -897,60 +888,188 @@ h3 {
|
||||
}
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=search],
|
||||
input[type=password],
|
||||
input[type=search],
|
||||
input[type=date],
|
||||
input[type=url],
|
||||
input[type=file],
|
||||
textarea,
|
||||
.main .status {
|
||||
-webkit-appearance: none;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-khtml-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
color: #565656;
|
||||
width: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-appearance: none;
|
||||
-webkit-transition: border 0.2s ease-in 0;
|
||||
-o-transition: border 0.2s ease-in 0;
|
||||
transition: border 0.2s ease-in 0;
|
||||
-moz-transition: border 0.2s ease-in 0;
|
||||
-webkit-transition: border 0.2s ease-in 0;
|
||||
-moz-transition: border 0.2s ease-in 0;
|
||||
}
|
||||
input[type=text].inline,
|
||||
input[type=email].inline,
|
||||
input[type=password].inline,
|
||||
input[type=search].inline,
|
||||
input[type=date].inline,
|
||||
input[type=url].inline,
|
||||
input[type=file].inline,
|
||||
textarea.inline,
|
||||
.main .status.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
input[type=text]:disabled,
|
||||
input[type=email]:disabled,
|
||||
input[type=password]:disabled,
|
||||
input[type=search]:disabled,
|
||||
input[type=date]:disabled,
|
||||
input[type=url]:disabled,
|
||||
input[type=file]:disabled,
|
||||
textarea:disabled,
|
||||
select:disabled,
|
||||
input[type=checkbox]:disabled,
|
||||
input[type=radio]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.invalid label {
|
||||
color: #de0a32;
|
||||
}
|
||||
.invalid input[type=text],
|
||||
.invalid input[type=email],
|
||||
.invalid input[type=password],
|
||||
.invalid input[type=search],
|
||||
.invalid input[type=date],
|
||||
.invalid input[type=url],
|
||||
.invalid input[type=file],
|
||||
.invalid textarea {
|
||||
background: #fff7f8;
|
||||
border: 1px solid #fdcad3;
|
||||
color: #fdcad3;
|
||||
}
|
||||
.invalid input[type=text]:focus,
|
||||
.invalid input[type=email]:focus,
|
||||
.invalid input[type=password]:focus,
|
||||
.invalid input[type=search]:focus,
|
||||
.invalid input[type=date]:focus,
|
||||
.invalid input[type=url]:focus,
|
||||
.invalid input[type=file]:focus,
|
||||
.invalid textarea:focus {
|
||||
border: 1px solid #fdcad3;
|
||||
box-shadow: 0 0 5px #fdcad3;
|
||||
}
|
||||
.valid label {
|
||||
color: #43bb6e;
|
||||
}
|
||||
.valid input[type=text],
|
||||
.valid input[type=email],
|
||||
.valid input[type=password],
|
||||
.valid input[type=search],
|
||||
.valid input[type=date],
|
||||
.valid input[type=url],
|
||||
.valid input[type=file],
|
||||
.valid textarea {
|
||||
background: #f4fbf6;
|
||||
border: 1px solid #c6ebd3;
|
||||
color: #c6ebd3;
|
||||
}
|
||||
.valid input[type=text]:focus,
|
||||
.valid input[type=email]:focus,
|
||||
.valid input[type=password]:focus,
|
||||
.valid input[type=search]:focus,
|
||||
.valid input[type=date]:focus,
|
||||
.valid input[type=url]:focus,
|
||||
.valid input[type=file]:focus,
|
||||
.valid textarea:focus {
|
||||
border: 1px solid #c6ebd3;
|
||||
box-shadow: 0 0 5px #c6ebd3;
|
||||
}
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=search],
|
||||
input[type=password],
|
||||
input[type=search],
|
||||
input[type=date],
|
||||
input[type=url],
|
||||
input[type=file],
|
||||
textarea,
|
||||
select,
|
||||
.main .status {
|
||||
height: 35px;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
input[type=text]:focus,
|
||||
input[type=email]:focus,
|
||||
input[type=search]:focus,
|
||||
input[type=password]:focus,
|
||||
input[type=search]:focus,
|
||||
input[type=date]:focus,
|
||||
input[type=url]:focus,
|
||||
input[type=file]:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.main .status:focus {
|
||||
outline: none;
|
||||
border: 1px solid #88d5f7;
|
||||
box-shadow: 0 0 5px #88d5f7;
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-o-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
}
|
||||
input[type=text]:disabled,
|
||||
input[type=email]:disabled,
|
||||
input[type=password]:disabled,
|
||||
input[type=search]:disabled,
|
||||
input[type=date]:disabled,
|
||||
input[type=url]:disabled,
|
||||
input[type=file]:disabled,
|
||||
textarea:disabled,
|
||||
select:disabled,
|
||||
.main .status:disabled {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
input[type=search],
|
||||
input[type=date],
|
||||
input[type=url],
|
||||
.main .status {
|
||||
height: 35px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
textarea {
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
input[type=file] {
|
||||
padding: 15px;
|
||||
background: #fafafa;
|
||||
font-size: 12px;
|
||||
color: #878787;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #565656;
|
||||
font-size: 12px;
|
||||
}
|
||||
.has-icon {
|
||||
position: relative;
|
||||
}
|
||||
.has-icon .ss-icon {
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-o-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
}
|
||||
.has-icon .ss-icon.ss-delete {
|
||||
color: #fdcad3;
|
||||
}
|
||||
.has-icon .ss-icon.ss-check {
|
||||
color: #c6ebd3;
|
||||
}
|
||||
.has-icon .ss-icon.ss-search {
|
||||
color: #eee;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# 0.0.1 1382650276075
|
||||
# 0.0.1 1382651972797
|
||||
|
||||
CACHE:
|
||||
/app.js
|
||||
|
||||
Loading…
Reference in New Issue
Block a user