/* * # Semantic Item View * http://github.com/quirkyinc/semantic * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: April 17 2013 */ /******************************* Standard *******************************/ /*-------------- Items ---------------*/ /* Force Clearing */ .ui.items:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } /* prevents reflow bug in chrome by targeting webkit browser */ @media screen and (-webkit-min-device-pixel-ratio: 0) { .ui.items > .item { display: block; } } /*-------------- Item ---------------*/ .ui.items .item { float: left; display: block; margin: 1em 0.5em 2.5em; padding: 0em; width: 100%; margin: 0%; font-size: 1em; line-height: 1.2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.items .item a { cursor: pointer; } .ui.items .item > .image, .ui.items .item > .image .overlay, .ui.items .item > .content, .ui.items .item > .content > .meta, .ui.items .item > .content > .extra { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.items .item { display: block; position: relative; width: 316px; min-height: 375px; margin: 1em 0.5em; background-color: #FFFFFF; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); -moz-border-radius: 0.33em; -webkit-border-radius: 0.33em; border-radius: 0.33em; padding: 0.5em; } /*-------------- Images ---------------*/ .ui.items .item > .image { display: block; position: relative; background-color: rgba(0, 0, 0, 0.05); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.items .item > .image > img { position: relative; display: block; width: 100%; overflow: hidden; -webkit-border-radius: 0.22em; -moz-border-radius: 0.22em; border-radius: 0.22em; } /*-------------- Image Labels ---------------*/ .ui.items .item .label:after { position: absolute; content: ""; right: 0em; top: 0em; z-index: -1; width: 0em; height: 0em; border-color: transparent #F5F5F5 transparent transparent; border-style: solid; border-width: 0em 2.75em 2.75em 0em; } .ui.items .item .label { position: absolute; top: 0em; right: 0em; z-index: 10; width: 1.4em; height: 1.5em; padding: 0.25em 0.1em 0em 0em; color: #AAAAAA; font-size: 0.9em; text-align: center; } /* Hover */ .ui.items .item a.label:hover { color: #999999; } .ui.items .item a.label:hover::after { border-right-color: #EEEEEE; } /*-------------- Star Label ---------------*/ /* hover */ .ui.items .item a.star.label:hover::after { border-right-color: #F6EFC3; } .ui.items .item a.star.label:hover .icon { color: #ac9400; } /* active */ .ui.items .item a.star.label.active::after { border-right-color: #F6EFC3; } .ui.items .item a.star.label.active .icon { color: #ac9400; } /*-------------- Like Label ---------------*/ /* hover */ .ui.items .item a.like.label:hover::after { border-right-color: #F5E1E2; } .ui.items .item a.like.label:hover .icon { color: #ef404a; } /* active */ .ui.items .item a.like.label.active::after { border-right-color: #F5E1E2; } .ui.items .item a.like.label.active .icon { color: #ef404a; } /*-------------- Common Labels ---------------*/ .ui.items .item a.label:hover .like { color: #EF404A; } .ui.items .item a.label:hover .star { color: #928D44; } /*-------------- Content ---------------*/ .ui.items .item > .content { padding: 0.75em 0.5em; } .ui.items .item > .content > .name { display: block; font-size: 1.25em; font-weight: bold; margin-bottom: 0.2em; color: rgba(0, 0, 0, 0.7); } .ui.items .item > .content > .description { clear: both; margin: 0em 0em; color: rgba(0, 0, 0, 0.45); } .ui.items .item > .content > .description p { margin: 0em 0em 0.2em; } .ui.items .item > .content > .description p:last-child { margin-bottom: 0em; } /*-------------- Meta ---------------*/ .ui.items .item .meta { float: right; color: rgba(0, 0, 0, 0.35); } .ui.items .item > .content > .meta + .name { float: left; } /*-------------- Extra ---------------*/ .ui.items .item .extra { position: absolute; width: 100%; padding: 0em 0.5em; bottom: -2em; left: 0em; height: 1.5em; color: rgba(0, 0, 0, 0.25); } .ui.items .item .extra > img { display: inline-block; border-radius: 500px 500px 500px 500px; margin-right: 0.25em; vertical-align: middle; width: 2em; } .ui.items .item .extra .left { float: left; } .ui.items .item .extra .right { float: right; } /******************************* Variations *******************************/ /*-------------- Connected ---------------*/ .ui.connected.items { display: table; width: 100%; margin-left: 0em !important; margin-right: 0em !important; } .ui.connected.items > .row > .item, .ui.connected.items > .item { float: none; display: table-cell; vertical-align: top; height: auto; border-radius: 0px; margin: 0em; width: 33.33%; border-bottom: none; } .ui.connected.items > .row { display: table-row; } .ui.connected.items > .item, .ui.connected.items > .row:last-child > .item { border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); } .ui.connected.items > .row:last-child > .item:first-child, .ui.connected.items > .item:first-child { border-radius: 0em 0em 0em 0.33em; } .ui.connected.items > .row:last-child > .item:last-child, .ui.connected.items > .item:last-child { border-radius: 0em 0em 0.33em 0em; } .ui.two.connected.items > .row > .item, .ui.two.connected.items > .item { width: 50%; padding-left: 1%; padding-right: 1%; } .ui.three.connected.items > .row > .item, .ui.three.connected.items > .item { width: 33.333%; padding-left: 1%; padding-right: 1%; } .ui.four.connected.items > .row > .item, .ui.four.connected.items > .item { width: 25%; padding-left: 0.5%; padding-right: 0.5%; } .ui.five.connected.items > .row > .item, .ui.five.connected.items > .item { width: 20%; padding-left: 0.5%; padding-right: 0.5%; } .ui.six.connected.items > .row > .item, .ui.six.connected.items > .item { width: 16.66%; padding-left: 0.5%; padding-right: 0.5%; } .ui.seven.connected.items > .row > .item, .ui.seven.connected.items > .item { width: 14.28%; padding-left: 0.5%; padding-right: 0.5%; } .ui.eight.connected.items > .row > .item, .ui.eight.connected.items > .item { width: 12.5%; padding-left: 0.25%; padding-right: 0.25%; } .ui.nine.connected.items > .row > .item, .ui.nine.connected.items > .item { width: 11.11%; padding-left: 0.25%; padding-right: 0.25%; } .ui.ten.connected.items > .row > .item, .ui.ten.connected.items > .item { width: 10%; padding-left: 0.2%; padding-right: 0.2%; } .ui.eleven.connected.items > .row > .item, .ui.eleven.connected.items > .item { width: 9.09%; padding-left: 0.2%; padding-right: 0.2%; } .ui.twelve.connected.items > .row > .item, .ui.twelve.connected.items > .item { width: 8.3333%; padding-left: 0.1%; padding-right: 0.1%; } /*-------------- Horizontal ---------------*/ .ui.horizontal.items > .item, .ui.items > .horizontal.item { display: table; } .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 { width: 50%; display: table-cell; } .ui.horizontal.items > .item > .content, .ui.items > .horizontal.item > .content { padding: 1% 1.7% 11% 3%; vertical-align: top; } .ui.horizontal.items > .item > .meta, .ui.items > .horizontal.item > .meta { position: absolute; padding: 0%; bottom: 7%; left: 3%; width: 94%; } .ui.horizontal.items > .item > .image + .content + .meta, .ui.items > .horizontal.item > .image + .content + .meta { bottom: 7%; left: 53%; width: 44%; } .ui.horizontal.items > .item .avatar, .ui.items > .horizontal.item .avatar { width: 11.5%; } .ui.items > .item .avatar { max-width: 25px; } /*-------------- Item Count ---------------*/ .ui.two.items { margin-left: -1%; margin-right: -1%; } .ui.two.items > .item { width: 48%; margin-left: 1%; margin-right: 1%; } .ui.two.items > .item:nth-child(2n+1) { clear: left; } .ui.three.items { margin-left: -1%; margin-right: -1%; } .ui.three.items > .item { width: 31.333%; margin-left: 1%; margin-right: 1%; } .ui.three.items > .item:nth-child(3n+1) { clear: left; } .ui.four.items { margin-left: -0.5%; margin-right: -0.5%; } .ui.four.items > .item { width: 24%; margin-left: 0.5%; margin-right: 0.5%; } .ui.four.items > .item:nth-child(4n+1) { clear: left; } .ui.five.items { margin-left: -0.5%; margin-right: -0.5%; } .ui.five.items > .item { width: 19%; margin-left: 0.5%; margin-right: 0.5%; } .ui.five.items > .item:nth-child(5n+1) { clear: left; } .ui.six.items { margin-left: -0.5%; margin-right: -0.5%; } .ui.six.items > .item { width: 15.66%; margin-left: 0.5%; margin-right: 0.5%; } .ui.six.items > .item:nth-child(6n+1) { clear: left; } .ui.seven.items { margin-left: -0.5%; margin-right: -0.5%; } .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) { clear: left; } .ui.eight.items { margin-left: -0.25%; margin-right: -0.25%; } .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) { clear: left; } .ui.nine.items { margin-left: -0.25%; margin-right: -0.25%; } .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) { clear: left; } .ui.ten.items { margin-left: -0.2%; margin-right: -0.2%; } .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) { clear: left; } .ui.eleven.items { margin-left: -0.2%; margin-right: -0.2%; } .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) { clear: left; } .ui.twelve.items { margin-left: -0.1%; margin-right: -0.1%; } .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) { clear: left; }