metrojs/src/less/liveTile.less

Metro JS is a plugin to help make Metro ( also known as flat or modern ) interfaces on the web. Example features include Live Tiles that can fade, flip, slide at custom points or in a carousel. Theme and accent colors are supported along with custom tile

@import "variables.less";
	
/* liveTile styles */
.tile-strip, .live-tile, .list-tile, .copy-tile, .slide
{
    float: left;
}

.live-tile, .list-tile, .copy-tile
{
	color: #fff;
	overflow: hidden;
	position: relative;
	z-index: 20;

	p, .face
	{
		display: block;
		font-size: 1em;
		line-height: 1.2em;
		margin: 0;
	}

	.face
	{
		padding: 0px;
	}

	p
	{
		padding: 10px;
	}

	&.half-tile p
	{
		padding: 5px;
	}

	.face.full
	{
		height: 100%;
		width: 100%;
	}

	img
	{
		border: none;
	}

	.tile-title
	{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;
		bottom: 0px;
		font-size: 12px;
		left: 0px;	
		text-decoration: none;
		width: 100%;
		z-index: 30;
	}

	a
	{
		color: #fff;

		&.tile-title:link,
		&.tile-title:visited,
		&.tile-title:hover,
		&.tile-title
		{
			text-decoration: none;
		}

		&:link, &:visited
		{
			color: #fff;
			text-decoration: underline;
		}

		&:hover
		{
			color: #fff;
			text-decoration: none;
		}
	}
}
.light
{
    .copy-tile
    {
        color: #000;
        &.accent
        {
			color:#fff;            
            a, a:link, a:visited, a:hover
            {
                color: #fff;
            }
        }
        a, a:link, a:visited, a:hover
        {
            color: #000;
        }
        .face, .accent
        {
            color: #fff;
            a, a:link, a:visited, a:hover
            {
                color: #fff;
            }
        }
    }
}
.copy-tile p {
  padding: 5px 5px 0px 5px;
  font-size:.95em;
}
.noselect >div,
.noselect >.slide,
.noselect >.slide-front,
.noselect >.slide-back,
.noselect >.fade-front,
.noselect >.fade-back,
.noselect >.flip-front,
.noselect >.flip-back
{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select:none;
}
.live-tile>div,
.list-tile>div,
.live-tile>.slide,
.carousel>.slide,
.live-tile>.slide-front,
.live-tile>.slide-back,
.live-tile>.fade-front,
.live-tile>.fade-back,
.live-tile>.flip-front,
.live-tile>.flip-back
{   
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	top:0px;
	left:0px;
	margin:0px;
	height:100%;
	width:100%;
	overflow:hidden;
	position:absolute;
	z-index:20;	
}
.list-tile>div
{
	position:relative;
	background-color:transparent;
}

.live-tile .align-mid
{
	display:inline-block;
	position: absolute;	
	left: 50%;
	max-height: 100%;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.live-tile .align-mid-x
{
	display:inline-block;	
	left: 50%;
	max-width: 100%;
	position: absolute;	
	-moz-transform: translate(-50%, 0px);
	-ms-transform: translate(-50%, 0px);
	-o-transform: translate(-50%, 0px);
	-webkit-transform: translate(-50%, 0px);
	transform: translate(-50%, 0px);
}

.live-tile .align-mid-y
{
	display:inline-block;
	max-height: 100%;
	position: absolute;
	top: 50%;
	-moz-transform: translate(0px, -50%);
	-ms-transform: translate(0px, -50%);
	-o-transform: translate(0px, -50%);
	-webkit-transform: translate(0px, -50%);
	transform: translate(0px, -50%);
}

img.full , a.full, .live-tile .full, .list-tile .full
{
	display:block;
	margin:0px;
	height:100%;
	text-decoration:none;
	width:100%;    
}

img.full-w, a.full-w, .live-tile .full-w, .list-tile .full-w
{
	display:block;
	margin:0px;
	text-decoration:none;
	width:100%;
}

img.full-h, a.full-h, .live-tile .full-h, .list-tile .full-h
{
	display:block;
	margin:0px;
	height:100%;
}

.live-tile>.back, .live-tile>.slide-back,.live-tile>.fade-back,.live-tile>.flip-back, .flip-list .flip-back
{
	position:absolute;
	z-index:10;	
}
/*  ========== flip-list Styles ==========
	.flip-list
	---li
	------div.flip-front
	------div.flip-back
*/
.flip-list  
{
	padding:0px; 
	margin:0px;	
}
.list-tile .flip-list 
{
	height:100%;
	width:100%;
}
.flip-list>li>a
{
	border:none;
	outline:none;
	text-decoration:none;
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
}

.flip-list>li img
{
	border:none;
	outline:none;
	height:100%;
	margin:0px;
	padding:0px;
	width:100%;
}

.flip-list>li 
{
	float: left;
	list-style-type:none;
	outline:none;	
	position: relative;	
}

.flip-list>li>div 
{
	border:none;
	background: white;
	height: 100%;
	left: 0px;
	margin:0px;
	overflow: hidden;
	position: absolute;
	padding:0px;
	top: 0px;
	width: 100%;
	z-index:20;
}

.flip-list>li>div.flip-back 
{
   height:0px;
}

/* ------ Hardware Accelerated Tiles --------*/
/* flip */
.live-tile.flip.ha, .flip-list.ha
{   
     position:relative;     
     overflow:hidden;
}
.live-tile.flip .ha.flip-front, .flip-list .ha.flip-front,
.live-tile.flip .ha.flip-back, .flip-list .ha.flip-back
{
    position:absolute;
    z-index:20;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
    backface-visibility:hidden;
}
.flip-list>li>.ha.flip-back, .flip-list>li>.ha.flip-back img
{
	 /* override the values set for margin and ensure the back tile is visible  */
	margin:0px !important;
	height:100%;
}