@ -6,7 +6,7 @@
Sizing
--------------- * /
. ui . items . item {
. ui . items > . item {
float : left ;
display : block ;
@ -34,12 +34,12 @@
margin-left : -1 % ;
margin-right : -1 % ;
}
. ui . two . items . item {
. ui . two . items > . item {
width : 48 % ;
margin-left : 1 % ;
margin-right : 1 % ;
}
. ui . two . items . item : nth-child ( 2n + 1 ) {
. ui . two . items > . item : nth-child ( 2n + 1 ) {
clear : left ;
}
@ -47,12 +47,12 @@
margin-left : -1 % ;
margin-right : -1 % ;
}
. ui . three . items . item {
. ui . three . items > . item {
width : 31 . 333 % ;
margin-left : 1 % ;
margin-right : 1 % ;
}
. ui . three . items . item : nth-child ( 3n + 1 ) {
. ui . three . items > . item : nth-child ( 3n + 1 ) {
clear : left ;
}
@ -60,12 +60,12 @@
margin-left : -0 . 5 % ;
margin-right : -0 . 5 % ;
}
. ui . four . items . item {
. ui . four . items > . item {
width : 24 % ;
margin-left : 0 . 5 % ;
margin-right : 0 . 5 % ;
}
. ui . four . items . item : nth-child ( 4n + 1 ) {
. ui . four . items > . item : nth-child ( 4n + 1 ) {
clear : left ;
}
@ -73,12 +73,12 @@
margin-left : -0 . 5 % ;
margin-right : -0 . 5 % ;
}
. ui . five . items . item {
. ui . five . items > . item {
width : 19 % ;
margin-left : 0 . 5 % ;
margin-right : 0 . 5 % ;
}
. ui . five . items . item : nth-child ( 5n + 1 ) {
. ui . five . items > . item : nth-child ( 5n + 1 ) {
clear : left ;
}
@ -86,12 +86,12 @@
margin-left : -0 . 5 % ;
margin-right : -0 . 5 % ;
}
. ui . six . items . item {
. ui . six . items > . item {
width : 15 . 66 % ;
margin-left : 0 . 5 % ;
margin-right : 0 . 5 % ;
}
. ui . six . items . item : nth-child ( 6n + 1 ) {
. ui . six . items > . item : nth-child ( 6n + 1 ) {
clear : left ;
}
@ -99,13 +99,13 @@
margin-left : -0 . 5 % ;
margin-right : -0 . 5 % ;
}
. ui . seven . items . item {
. ui . seven . items > . item {
width : 13 . 28 % ;
margin-left : 0 . 5 % ;
margin-right : 0 . 5 % ;
font-size : 11px ;
}
. ui . seven . items . item : nth-child ( 7n + 1 ) {
. ui . seven . items > . item : nth-child ( 7n + 1 ) {
clear : left ;
}
@ -113,13 +113,13 @@
margin-left : -0 . 25 % ;
margin-right : -0 . 25 % ;
}
. ui . eight . items . item {
. ui . eight . items > . item {
width : 12 . 0 % ;
margin-left : 0 . 25 % ;
margin-right : 0 . 25 % ;
font-size : 11px ;
}
. ui . eight . items . item : nth-child ( 8n + 1 ) {
. ui . eight . items > . item : nth-child ( 8n + 1 ) {
clear : left ;
}
@ -127,13 +127,13 @@
margin-left : -0 . 25 % ;
margin-right : -0 . 25 % ;
}
. ui . nine . items . item {
. ui . nine . items > . item {
width : 10 . 61 % ;
margin-left : 0 . 25 % ;
margin-right : 0 . 25 % ;
font-size : 10px ;
}
. ui . nine . items . item : nth-child ( 9n + 1 ) {
. ui . nine . items > . item : nth-child ( 9n + 1 ) {
clear : left ;
}
@ -141,13 +141,13 @@
margin-left : -0 . 2 % ;
margin-right : -0 . 2 % ;
}
. ui . ten . items . item {
. ui . ten . items > . item {
width : 9 . 6 % ;
margin-left : 0 . 2 % ;
margin-right : 0 . 2 % ;
font-size : 10px ;
}
. ui . ten . items . item : nth-child ( 10n + 1 ) {
. ui . ten . items > . item : nth-child ( 10n + 1 ) {
clear : left ;
}
@ -155,13 +155,13 @@
margin-left : -0 . 2 % ;
margin-right : -0 . 2 % ;
}
. ui . eleven . items . item {
. ui . eleven . items > . item {
width : 8 . 69 % ;
margin-left : 0 . 2 % ;
margin-right : 0 . 2 % ;
font-size : 9px ;
}
. ui . eleven . items . item : nth-child ( 11n + 1 ) {
. ui . eleven . items > . item : nth-child ( 11n + 1 ) {
clear : left ;
}
@ -169,13 +169,13 @@
margin-left : -0 . 1 % ;
margin-right : -0 . 1 % ;
}
. ui . twelve . items . item {
. ui . twelve . items > . item {
width : 8 . 1333 % ;
margin-left : 0 . 1 % ;
margin-right : 0 . 1 % ;
font-size : 9px ;
}
. ui . twelve . items . item : nth-child ( 12n + 1 ) {
. ui . twelve . items > . item : nth-child ( 12n + 1 ) {
clear : left ;
}
@ -203,25 +203,34 @@
. ui . items > . item {
display : block ;
position : relative ;
margin-top : 10px ;
margin-bottom : 10px ;
margin : 0 . 5em 0em ;
min-height : 50px ;
min-height : 3em ;
background-color : # FFFFFF ;
-moz-box-shadow : 0px 1 px 1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
-webkit-box-shadow : 0px 1 px 1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
box-shadow : 0px 1 px 1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
-moz-box-shadow : 0px 0px 0 px 1px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
-webkit-box-shadow : 0px 0px 0 px 1px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
box-shadow : 0px 0px 0 px 1px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
-moz-border-radius : 5px ;
-webkit-border-radius : 5px ;
border-radius : 5px ;
-moz-border-radius : 0 . 33em ;
-webkit-border-radius : 0 . 33em ;
border-radius : 0 . 33em ;
padding : 0 . 7 % ;
padding : 0 . 5em ;
}
. ui . items . item > . image a ,
. ui . items . item > . image img {
. ui . items > . item > . image {
background-color : rgba ( 0 , 0 , 0 , 0 . 05 ) ;
display : table-cell ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
}
. ui . items > . item > . image a ,
. ui . items > . item > . image img {
position : relative ;
display : block ;
width : 100 % ;
@ -230,7 +239,7 @@
-moz-border-radius : 3px ;
border-radius : 3px ;
}
. ui . items . item > . image a : after {
. ui . items > . item > . image a : after {
position : absolute ;
display : block ;
content : '' ;
@ -245,7 +254,7 @@
-moz-box-shadow : 0px 0px 5px rgba ( 0 , 0 , 0 , 0 . 2 ) inset ;
box-shadow : 0px 0px 5px rgba ( 0 , 0 , 0 , 0 . 2 ) inset ;
}
. ui . items . item > . image . overlay {
. ui . items > . item > . image . overlay {
position : absolute ;
bottom : 0px ;
left : 0px ;
@ -264,44 +273,44 @@
text-shadow : 0px -1px 0px rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
. ui . items . item > . image . overlay i {
. ui . items > . item > . image . overlay i {
font-size : 1 . 3em ;
font-weight : bold ;
}
/* Content */
. ui . items . item > . content {
. ui . items > . item > . content {
padding : 4 % 1 % 6 % ;
color : # 888888 ;
}
. ui . items . item > . content > . name ,
. ui . items . item > . content > . title {
. ui . items > . item > . content > . name ,
. ui . items > . item > . content > . title {
margin-bottom : 1 % ;
font-size : 1 . 2em ;
font-weight : bold ;
color : # 009FDA ;
}
. ui . items . item > . content p {
. ui . items > . item > . content p {
line-height : 1 . 33 ;
margin : 0 % 0 % 5 % ;
}
. ui . items . item > . content : last-child {
. ui . items > . item > . content : last-child {
margin-bottom : 0 % ;
}
/* Optional Content */
. ui . items . item > . extra {
. ui . items > . item > . extra {
color : # C6C7C9 ;
padding : 0 % 1 % 1 % ;
}
. ui . items . item > . extra img {
. ui . items > . item > . extra img {
display : inline-block ;
vertical-align : middle ;
}
. ui . items . item . avatar {
. ui . items > . item . avatar {
display : inline-block ;
width : 5 . 5 % ;
min-width : 15px ;
@ -313,54 +322,54 @@
Table Items
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
. ui . horizontal . items . item ,
. ui . items . horizontal . item {
. ui . horizontal . items > . item ,
. ui . items > . horizontal . item {
display : table ;
}
/* prevents reflow bug in chrome by targeting webkit browser */
@ media screen and ( -webkit-min-device-pixel-ratio : 0 ) {
. ui . items . item {
. ui . items > . item {
display : block ;
}
}
. ui . horizontal . items . item > . image
. ui . items . horizontal . item > . image {
. ui . horizontal . items > . item > . image
. ui . items > . horizontal . item > . image {
display : table-cell ;
width : 50 % ;
}
. ui . horizontal . items . item > . image + . content ,
. ui . items . horizontal . item > . image + . content {
. ui . horizontal . items > . item > . image + . content ,
. ui . items > . horizontal . item > . image + . content {
width : 50 % ;
display : table-cell ;
}
. ui . horizontal . items . item > . content ,
. ui . items . horizontal . item > . content {
. ui . horizontal . items > . item > . content ,
. ui . items > . horizontal . item > . content {
padding : 1 % 1 . 7 % 11 % 3 % ;
vertical-align : top ;
}
. ui . horizontal . items . item > . extra ,
. ui . items . horizontal . item > . extra {
. ui . horizontal . items > . item > . extra ,
. ui . items > . horizontal . item > . extra {
position : absolute ;
padding : 0 % ;
bottom : 7 % ;
left : 3 % ;
width : 94 % ;
}
. ui . horizontal . items . item > . image + . content + . extra ,
. ui . items . horizontal . item > . image + . content + . extra {
. ui . horizontal . items > . item > . image + . content + . extra ,
. ui . items > . horizontal . item > . image + . content + . extra {
bottom : 7 % ;
left : 53 % ;
width : 44 % ;
}
. ui . horizontal . items . item . avatar ,
. ui . items . horizontal . item . avatar {
. ui . horizontal . items > . item . avatar ,
. ui . items > . horizontal . item . avatar {
width : 11 . 5 % ;
}
. ui . items . item . avatar {
. ui . items > . item . avatar {
max-width : 25px ;
}