Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
contacts-v2: various style adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Oct 30, 2013
1 parent d0b00b5 commit 1ddef25
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 169 deletions.
8 changes: 4 additions & 4 deletions shiny/Contacts-v2/components/contacts-create-add-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
<style>
/* @polyfill @host */
:host {
padding: 18px 20px;
padding: 16px;
border-color: rgba(0, 0, 0, 0.14902);
border-width: 0 1px 1px;
border-style: solid;
color: #a9a9a9;
color: #999;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
font-size: 18px;
font-size: 14px;
}
polymer-ui-icon {
margin: 0 30px 0 10px;
margin: 9px 24px 9px 9px;
}
</style>
<polymer-flex-layout align="center"></polymer-flex-layout>
Expand Down
30 changes: 13 additions & 17 deletions shiny/Contacts-v2/components/contacts-create-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@
<style>
/* @polyfill @host */
:host {
padding: 0 20px;
padding: 16px;
border-color: rgba(0, 0, 0, 0.14902);
border-width: 0 1px 1px;
border-style: solid;
}
input {
margin-left: 20px;
margin: 0 0 0 16px;
padding: 0;
border: none;
font-size: 18px;
font-size: 14px;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
box-sizing: border-box;
height: 60px;
background: transparent;
}
input:focus {
Expand All @@ -30,31 +30,27 @@
display: none !important;
}
#typeOverlay {
left: 10px;
left: 8px;
box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.6);
}
#typeOverlay input {
margin-left: 0px;
height: auto;
}
#typeOverlay polymer-ui-menu-item {
font-size: 18px !important;
height: 61px !important;
font-size: 14px !important;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
padding: 10px 20px !important;
border-color: rgba(0, 0, 0, 0.14902) !important;
padding: 16px !important;
border-color: rgba(0, 0, 0, 0.15) !important;
border-width: 0 1px 1px !important;
border-style: solid !important;
height: auto !important;
}
/* FIXME: Safari drops the whole rule if it doesn't recognize the selector. */
#typeOverlay content::-webkit-distributed(polymer-ui-menu-item) {
font-size: 18px !important;
height: 61px !important;
font-size: 14px !important;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
padding: 10px 20px !important;
border-color: rgba(0, 0, 0, 0.14902) !important;
padding: 16px !important;
border-color: rgba(0, 0, 0, 0.15) !important;
border-width: 0 1px 1px !important;
border-style: solid !important;
height: auto !important;
}
</style>
<polymer-flex-layout align="center"></polymer-flex-layout>
Expand Down
11 changes: 6 additions & 5 deletions shiny/Contacts-v2/components/contacts-create-phone-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@
/* @polyfill @host */
:host {
position: relative;
font-size: 14px;
}
#errorOverlay {
position: absolute !important;
left: 10px;
top: 38px !important;
right: 10px;
left: 8px;
top: 40px !important;
right: 8px;
box-sizing: border-box;
}
#errorOverlay::x-overlay {
Expand All @@ -23,12 +24,12 @@
}
#errorOverlay polymer-ui-arrow {
position: absolute !important;
right: 21px;
right: 19px;
top: 0px;
}
#errorOverlay .overlayBody {
position: absolute;
padding: 25px;
padding: 16px;
border-radius: 3px;
left: 0;
right: 0;
Expand Down
8 changes: 3 additions & 5 deletions shiny/Contacts-v2/components/contacts-create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
background: transparent none;
border: 0;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
font-size: 16px;
font-size: 14px;
color: #999;
padding: 10px;
margin: 0 20px;
margin: 0 16px;
}
button:focus {
outline: none;
Expand All @@ -27,9 +27,7 @@
border-radius: 3px;
}
contacts-create-item[active], contacts-create-phone-item[active] {
background: #f2f2f2 -webkit-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f2f2f2 -moz-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f2f2f2 -ms-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f7f7f7;
}
</style>
<polymer-ui-toolbar>
Expand Down
7 changes: 3 additions & 4 deletions shiny/Contacts-v2/components/contacts-detail-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,14 @@
<style>
/* @polyfill @host */
:host {
font-size: 18px;
font-size: 14px;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
box-sizing: border-box;
height: 60px;
padding: 20px;
padding: 16px;
}
.contactsDetailItemLabel {
color: #999;
font-size: 16px;
font-size: 14px;
width: 80px;
max-width: 80px;
}
Expand Down
7 changes: 3 additions & 4 deletions shiny/Contacts-v2/components/contacts-detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,17 @@
border: 0 !important;
}
.detailHeader {
height: 240px;
height: 275px;
}
.detailIconContainer {
padding: 40px 20px;
padding: 16px;
}
.detailName {
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
background: #999;
color: white;
font-size: 24px;
font-size: 20px;
box-sizing: border-box;
height: 60px;
padding: 16px 20px;
}
contacts-detail-item {
Expand Down
44 changes: 15 additions & 29 deletions shiny/Contacts-v2/components/contacts-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,20 @@
right: 0;
}
polymer-ui-toolbar {
padding-left: 10px;
padding-right: 10px;
padding-left: 8px;
padding-right: 8px;
}
.clip {
background: #eeeeee;
overflow: hidden;
position: relative;
}
#listContainer {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgb(242, 242, 242),
min-width: 320px;
overflow-y: scroll;
}
polymer-list {
height: 100%;
}
.contactItem {
font-size: 18px;
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
font-size: 14px;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, sans-serif;
}
.contactItem.sticky {
position: absolute;
Expand All @@ -58,22 +48,20 @@
opacity: 0.95;
}
.contactItem.header {
background: #f2f2f2 -webkit-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f2f2f2 -moz-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f2f2f2 -ms-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f0f0f0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.14902);
border-color: rgba(0, 0, 0, 0.15);
border-width: 0 0 1px;
box-sizing: border-box;
color: #9f9f9f;
color: #999;
font-variant: small-caps;
height: 60px;
padding: 20px;
padding: 16px;
}
.contactItem .firstName {
font-weight: bold;
}
[wideLayout] .contactItem.polymer-selected {
background: #f2f2f2 -webkit-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f2f2f2 -moz-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f2f2f2 -ms-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
background: #f0f0f0;
}
.contactItemControls {
position: absolute;
Expand All @@ -86,7 +74,7 @@
border-color: rgba(0, 0, 0, 0.14902);
border-width: 0 0 1px;
text-align: right;
padding: 21px 30px;
padding: 17px 24px;
}
.contactItemControls.active {
background: #f5565a;
Expand All @@ -98,8 +86,7 @@
border-color: rgba(0, 0, 0, 0.14902);
border-width: 0 0 1px 1px;
box-sizing: border-box;
height: 80px;
padding: 0 20px;
padding: 16px;
}
.addButton {
position: absolute;
Expand Down Expand Up @@ -166,7 +153,7 @@
<div class="contactItemBody" on-click="{{activateAction}}">
<polymer-flex-layout align="center"></polymer-flex-layout>
<contacts-icon contact="{{contact}}"></contacts-icon>
<div>{{contact.name}}</div>
<div><span class="firstName">{{contact.firstName}}</span> {{contact.surname}}</div>
</div>
</div>
</template>
Expand Down Expand Up @@ -209,7 +196,6 @@
</template>
<script>
Polymer('contacts-list', {
applyAuthorStyles: true,
wideLayout: true,
stickyContent: 'A',
selectedContact: null,
Expand Down
Loading

0 comments on commit 1ddef25

Please sign in to comment.