Skip to content

Commit 3b6c1c3

Browse files
LowPowerLabLowPowerLab
committed
Create listview-grid.css
1 parent 2889787 commit 3b6c1c3

File tree

1 file changed

+151
-0
lines changed

1 file changed

+151
-0
lines changed

‎www/css/listview-grid.css‎

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

0 commit comments

Comments
 (0)