1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
/* A bit custom styling */
.my-page .ui-listview li .ui-btn p {
color: #c0c0c0;
}
.my-page .ui-listview li .ui-btn .ui-li-aside {
color: #eee;
}
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
.my-page .ui-content {
padding: .5625em; /* 9px */
}
.my-page .ui-listview li {
float: left;
width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
height: 14.5em; /* 232p */
margin: .5625em 1.2%;
}
.my-page .ui-listview li > .ui-btn {
-webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
}
.my-page .ui-listview li.ui-li-has-thumb .ui-li-thumb {
height: auto; /* To keep aspect ratio. */
max-width: 100%;
max-height: none;
}
/* Make all list items and anchors inherit the border-radius from the UL. */
.my-page .ui-listview li,
.my-page .ui-listview li .ui-btn,
.my-page .ui-listview .ui-li-thumb {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/* Hide the icon */
.my-page .ui-listview .ui-btn-icon-right:after {
display: none;
}
/* Make text wrap. */
.my-page .ui-listview h2,
.my-page .ui-listview p {
white-space: normal;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
/* Text position */
.my-page .ui-listview h2 {
font-size: 1.25em;
margin: 0;
padding: .125em 1em;
bottom: 50%;
}
.my-page .ui-listview p {
font-size: 1em;
margin: 0;
padding: 0 1.25em;
min-height: 50%;
bottom: 0;
}
/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
.ui-listview .ui-li-has-thumb h2,
.ui-listview .ui-li-has-thumb p {
background: #111;
background: rgba(0,0,0,.8);
}
.ui-listview .ui-li-has-thumb h2 {
bottom: 35%;
}
.ui-listview .ui-li-has-thumb p {
min-height: 35%;
}
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
.my-page .ui-listview .ui-li-aside {
padding: .125em .625em;
width: auto;
min-height: 0;
top: 0;
left: auto;
bottom: auto;
/* Custom styling. */
background: #990099;
background: rgba(153,0,153,.85);
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
/* If you want to add shadow, don't kill the focus style. */
.my-page .ui-listview li {
-moz-box-shadow: 0px 0px 9px #111;
-webkit-box-shadow: 0px 0px 9px #111;
box-shadow: 0px 0px 9px #111;
}
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
.my-page .ui-listview li > .ui-btn:hover {
-moz-box-shadow: 0px 0px 12px #33ccff;
-webkit-box-shadow: 0px 0px 12px #33ccff;
box-shadow: 0px 0px 12px #33ccff;
}
/* Animate focus and hover style, and resizing. */
.my-page .ui-listview li,
.my-page .ui-listview .ui-btn {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
.my-page .ui-content {
padding: .625em; /* 10px */
}
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
.my-page .ui-listview {
max-width: 62.5em; /* 1000px */
margin: 0 auto;
}
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
but we stick to percentage values for demo purposes. */
.my-page .ui-listview li {
width: 23%;
height: 230px;
margin: .625em 1%;
}
}
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
|
