.tile { /* container */
display: block; float: left; background-color: lighten($grayLighter, 5%); width: 202px; height: 202px; cursor: pointer; box-shadow: inset 0px 0px 1px #FFFFCC; text-decoration: none; color: $white; margin: 0 10px 10px 0; position: relative; box-sizing: border-box; overflow: hidden; .tile-content { width: 200px; height: 200px; display: block; padding: 0; padding-bottom: 30px; vertical-align: top; padding: 10px 15px; overflow: hidden; text-overflow: ellipsis; position: relative; color: $black; line-height: 16px; padding: 0; border: solid 1px darken($grayLighter, 5%); &, * { @include transition(0.1s all linear); } & > img { width: 100%; height : auto; max-width: 100%; } &:hover { color: $linkColorHover; text-decoration: none; background: $concerto-blue-5; border-color: $concerto-blue-4; @include opacity(90); } .tile-labels { position: absolute; bottom: 0; right: 0; min-height: 30px; background-color: transparent; @include clearfix(); i[class*=icon-] { padding: 2px 5px; position: absolute; bottom: 0; right: 0; @include opacity(70); z-index: 2; color: $white; font-size: 25px; @include transition(0.1s linear all); } } .default-padding { padding: 6px; } h1 { font-size: 150%; text-align: center; } h2 { font-size: 125%; } p { color: $gray; line-height: 16px; overflow: hidden; text-overflow: ellipsis; } } .tile-info { position: absolute; bottom: 0; right: 0; width: 100%; min-height: 30px; @include clearfix(); @include transition(0.1s all linear); .tile-moderate { @include opacity(0); text-align: center; min-height: 30px; .icon-check { color: lighten($linkColor, 40%); font-size: 3em; @include transition(0.1s all linear); } .icon-remove-sign { color: lighten($linkColor, 40%); font-size: 3em; @include transition(0.1s all linear); } a:hover { text-decoration: none; .icon-check, .icon-remove-sign { color: #FFF !important; } } } } &:hover .tile-moderate { background: rgba(0,0,0,0.7); @include opacity(100); } &:hover .tile-labels i[class*=icon-] { @include opacity(0); } .tile-overlay { width: 202px; height: 202px; z-index: $zindexPopover; position: absolute; top: 202px; /* start the overlay so that it is hidden at the bottom of its tile container */ left: 0px; display: none; &.black { background: rgba(0,0,0,0.7); } }
}
.tile-stack::before, .tile-stack::after {
box-sizing: border-box; -moz-box-sizing: border-box; position: absolute; content: ''; border: 1px solid darken($grayLighter, 5%); background: $grayLightest; height: 4px;
} .tile-stack::before {
width: 196px; left: 1px; bottom: -4px;
} .tile-stack::after {
width: 192px; left: 3px; bottom: -7px;
}