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

Commit 1ddef25

Browse files
author
Yvonne Yip
committed
contacts-v2: various style adjustments
1 parent d0b00b5 commit 1ddef25

8 files changed

+151
-169
lines changed

‎shiny/Contacts-v2/components/contacts-create-add-item.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
<style>
66
/* @polyfill @host */
77
:host {
8-
padding: 18px 20px;
8+
padding: 16px;
99
border-color: rgba(0, 0, 0, 0.14902);
1010
border-width: 0 1px 1px;
1111
border-style: solid;
12-
color: #a9a9a9;
12+
color: #999;
1313
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
14-
font-size: 18px;
14+
font-size: 14px;
1515
}
1616
polymer-ui-icon {
17-
margin: 0 30px 0 10px;
17+
margin: 9px 24px 9px 9px;
1818
}
1919
</style>
2020
<polymer-flex-layout align="center"></polymer-flex-layout>

‎shiny/Contacts-v2/components/contacts-create-item.html

+13-17
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88
<style>
99
/* @polyfill @host */
1010
:host {
11-
padding: 0 20px;
11+
padding: 16px;
1212
border-color: rgba(0, 0, 0, 0.14902);
1313
border-width: 0 1px 1px;
1414
border-style: solid;
1515
}
1616
input {
17-
margin-left: 20px;
17+
margin: 0 0 0 16px;
18+
padding: 0;
1819
border: none;
19-
font-size: 18px;
20+
font-size: 14px;
2021
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
2122
box-sizing: border-box;
22-
height: 60px;
2323
background: transparent;
2424
}
2525
input:focus {
@@ -30,31 +30,27 @@
3030
display: none !important;
3131
}
3232
#typeOverlay {
33-
left: 10px;
33+
left: 8px;
3434
box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.6);
3535
}
36-
#typeOverlay input {
37-
margin-left: 0px;
38-
height: auto;
39-
}
4036
#typeOverlay polymer-ui-menu-item {
41-
font-size: 18px !important;
42-
height: 61px !important;
37+
font-size: 14px !important;
4338
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
44-
padding: 10px 20px !important;
45-
border-color: rgba(0, 0, 0, 0.14902) !important;
39+
padding: 16px !important;
40+
border-color: rgba(0, 0, 0, 0.15) !important;
4641
border-width: 0 1px 1px !important;
4742
border-style: solid !important;
43+
height: auto !important;
4844
}
4945
/* FIXME: Safari drops the whole rule if it doesn't recognize the selector. */
5046
#typeOverlay content::-webkit-distributed(polymer-ui-menu-item) {
51-
font-size: 18px !important;
52-
height: 61px !important;
47+
font-size: 14px !important;
5348
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
54-
padding: 10px 20px !important;
55-
border-color: rgba(0, 0, 0, 0.14902) !important;
49+
padding: 16px !important;
50+
border-color: rgba(0, 0, 0, 0.15) !important;
5651
border-width: 0 1px 1px !important;
5752
border-style: solid !important;
53+
height: auto !important;
5854
}
5955
</style>
6056
<polymer-flex-layout align="center"></polymer-flex-layout>

‎shiny/Contacts-v2/components/contacts-create-phone-item.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@
99
/* @polyfill @host */
1010
:host {
1111
position: relative;
12+
font-size: 14px;
1213
}
1314
#errorOverlay {
1415
position: absolute !important;
15-
left: 10px;
16-
top: 38px !important;
17-
right: 10px;
16+
left: 8px;
17+
top: 40px !important;
18+
right: 8px;
1819
box-sizing: border-box;
1920
}
2021
#errorOverlay::x-overlay {
@@ -23,12 +24,12 @@
2324
}
2425
#errorOverlay polymer-ui-arrow {
2526
position: absolute !important;
26-
right: 21px;
27+
right: 19px;
2728
top: 0px;
2829
}
2930
#errorOverlay .overlayBody {
3031
position: absolute;
31-
padding: 25px;
32+
padding: 16px;
3233
border-radius: 3px;
3334
left: 0;
3435
right: 0;

‎shiny/Contacts-v2/components/contacts-create.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
background: transparent none;
1414
border: 0;
1515
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
16-
font-size: 16px;
16+
font-size: 14px;
1717
color: #999;
1818
padding: 10px;
19-
margin: 0 20px;
19+
margin: 0 16px;
2020
}
2121
button:focus {
2222
outline: none;
@@ -27,9 +27,7 @@
2727
border-radius: 3px;
2828
}
2929
contacts-create-item[active], contacts-create-phone-item[active] {
30-
background: #f2f2f2 -webkit-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
31-
background: #f2f2f2 -moz-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
32-
background: #f2f2f2 -ms-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
30+
background: #f7f7f7;
3331
}
3432
</style>
3533
<polymer-ui-toolbar>

‎shiny/Contacts-v2/components/contacts-detail-item.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
<style>
55
/* @polyfill @host */
66
:host {
7-
font-size: 18px;
7+
font-size: 14px;
88
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
99
box-sizing: border-box;
10-
height: 60px;
11-
padding: 20px;
10+
padding: 16px;
1211
}
1312
.contactsDetailItemLabel {
1413
color: #999;
15-
font-size: 16px;
14+
font-size: 14px;
1615
width: 80px;
1716
max-width: 80px;
1817
}

‎shiny/Contacts-v2/components/contacts-detail.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,17 @@
1111
border: 0 !important;
1212
}
1313
.detailHeader {
14-
height: 240px;
14+
height: 275px;
1515
}
1616
.detailIconContainer {
17-
padding: 40px 20px;
17+
padding: 16px;
1818
}
1919
.detailName {
2020
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
2121
background: #999;
2222
color: white;
23-
font-size: 24px;
23+
font-size: 20px;
2424
box-sizing: border-box;
25-
height: 60px;
2625
padding: 16px 20px;
2726
}
2827
contacts-detail-item {

‎shiny/Contacts-v2/components/contacts-list.html

+15-29
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,20 @@
2424
right: 0;
2525
}
2626
polymer-ui-toolbar {
27-
padding-left: 10px;
28-
padding-right: 10px;
27+
padding-left: 8px;
28+
padding-right: 8px;
2929
}
3030
.clip {
3131
background: #eeeeee;
3232
overflow: hidden;
3333
position: relative;
3434
}
35-
#listContainer {
36-
position: absolute;
37-
top: 0;
38-
right: 0;
39-
left: 0;
40-
bottom: 0;
41-
background-color: rgb(242, 242, 242),
42-
min-width: 320px;
43-
overflow-y: scroll;
44-
}
4535
polymer-list {
4636
height: 100%;
4737
}
4838
.contactItem {
49-
font-size: 18px;
50-
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
39+
font-size: 14px;
40+
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, sans-serif;
5141
}
5242
.contactItem.sticky {
5343
position: absolute;
@@ -58,22 +48,20 @@
5848
opacity: 0.95;
5949
}
6050
.contactItem.header {
61-
background: #f2f2f2 -webkit-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
62-
background: #f2f2f2 -moz-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
63-
background: #f2f2f2 -ms-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
51+
background: #f0f0f0;
6452
border-style: solid;
65-
border-color: rgba(0, 0, 0, 0.14902);
53+
border-color: rgba(0, 0, 0, 0.15);
6654
border-width: 0 0 1px;
6755
box-sizing: border-box;
68-
color: #9f9f9f;
56+
color: #999;
6957
font-variant: small-caps;
70-
height: 60px;
71-
padding: 20px;
58+
padding: 16px;
7259
}
60+
.contactItem .firstName {
61+
font-weight: bold;
62+
}
7363
[wideLayout] .contactItem.polymer-selected {
74-
background: #f2f2f2 -webkit-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
75-
background: #f2f2f2 -moz-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
76-
background: #f2f2f2 -ms-linear-gradient(top, rgba(197,197,197,0), rgba(197,197,197,0.15));
64+
background: #f0f0f0;
7765
}
7866
.contactItemControls {
7967
position: absolute;
@@ -86,7 +74,7 @@
8674
border-color: rgba(0, 0, 0, 0.14902);
8775
border-width: 0 0 1px;
8876
text-align: right;
89-
padding: 21px 30px;
77+
padding: 17px 24px;
9078
}
9179
.contactItemControls.active {
9280
background: #f5565a;
@@ -98,8 +86,7 @@
9886
border-color: rgba(0, 0, 0, 0.14902);
9987
border-width: 0 0 1px 1px;
10088
box-sizing: border-box;
101-
height: 80px;
102-
padding: 0 20px;
89+
padding: 16px;
10390
}
10491
.addButton {
10592
position: absolute;
@@ -166,7 +153,7 @@
166153
<div class="contactItemBody" on-click="{{activateAction}}">
167154
<polymer-flex-layout align="center"></polymer-flex-layout>
168155
<contacts-icon contact="{{contact}}"></contacts-icon>
169-
<div>{{contact.name}}</div>
156+
<div><span class="firstName">{{contact.firstName}}</span> {{contact.surname}}</div>
170157
</div>
171158
</div>
172159
</template>
@@ -209,7 +196,6 @@
209196
</template>
210197
<script>
211198
Polymer('contacts-list', {
212-
applyAuthorStyles: true,
213199
wideLayout: true,
214200
stickyContent: 'A',
215201
selectedContact: null,

0 commit comments

Comments
 (0)