mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.0 KiB
72 lines
1.0 KiB
* { |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: sans-serif; |
|
} |
|
|
|
.container { |
|
background: #EEE; |
|
width: 180px; |
|
margin-bottom: 20px; |
|
position: relative; |
|
} |
|
|
|
.container:after { |
|
content: ''; |
|
display: block; |
|
clear: both; |
|
} |
|
|
|
.item { |
|
width: 60px; |
|
height: 30px; |
|
float: left; |
|
border: 1px solid; |
|
background: #3BF; |
|
} |
|
|
|
.item.w2 { width: 120px; } |
|
.item.w3 { width: 180px; } |
|
|
|
.item.h2 { height: 50px; } |
|
.item.h3 { height: 70px; } |
|
.item.h4 { height: 90px; } |
|
.item.h5 { height: 110px; } |
|
|
|
.stamp { |
|
background: red; |
|
opacity: 0.75; |
|
position: absolute; |
|
border: 1px solid; |
|
} |
|
|
|
/* ---- stamp ---- */ |
|
|
|
.has-stamp .item { width: 45px; } |
|
|
|
/* stout, in the middle */ |
|
.has-stamp .stamp1 { |
|
width: 40px; |
|
height: 30px; |
|
} |
|
|
|
/* really wide */ |
|
.has-stamp .stamp2 { |
|
width: 200px; |
|
height: 20px; |
|
} |
|
|
|
/* ---- get segment size ---- */ |
|
|
|
#get-segment-size .grid-sizer { |
|
/* 57 outer width */ |
|
width: 52px; |
|
margin-right: 5px; |
|
/* 47 outer height */ |
|
height: 40px; |
|
margin-bottom: 7px; |
|
}
|
|
|