/* Tileset */
.tileset {
$gutter: 0; @include vendor('display', 'flex'); @include vendor('flex-wrap', 'wrap'); margin: 0 !important; width: 100%; .tile-container { @include vendor('flex-grow', '1'); @include vendor('flex-shrink', '1'); position: relative; margin: 0; padding: 0; min-height: 30vh; .tile { transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, background-color 0.4s; position: relative; top: 10%; left: 10%; padding: 0; width: 80%; height: 80%; border-radius: 0.5rem; border: 0; display: block; overflow: hidden; background-color: #336699 !important; div.on, div.off { position: absolute; width: 100%; padding: 1em; top: 50%; transform: translateY(-50%); } h3, p, div, .icon { margin: 0 !important; width: 100%; text-align: center; color: _palette(bg) !important; } .on { display: block; } .off { display: none; } .icon { z-index: 10; width: 100%; padding: 0; position: relative; color: _palette(accent); font-size: 3rem; text-align: center; &:before{ width: 100%; } } } } .tile-container:hover, .tile-container:active { .tile { top: 0; left: 0; width: 100%; height: 100%; background-color: _palette(accent) !important; h3, p, .icon { color: _palette(accent-cp) !important; } .on { display: none; } .off { display: block; } } }
}
/* Inverted */
.inverted .tileset .tile-container {
.tile { background-color: rgba(0,100,140,0.6) !important; h3, p, icon { color: _palette(bg) !important; } }
}
.inverted .tileset .tile-container:hover, .inverted .tileset .tile-container:active {
.tile { background-color: _palette(accent) !important; h3, p, icon { color: _palette(accent-cp) !important; } }
}