@openui5/sap.ui.demokit/src/sap/ui/demokit/themes/base/IndexLayout.less

OpenUI5 UI Library sap.ui.demokit

.sapDkIdxLayout {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	white-space: nowrap;
	text-align: center;
}

.sapDkIdxLayoutHidden.sapDkIdxLayout > div {
	display: none;
}

.sapDkIdxLayoutAnim {
	transition: padding 0.2s, height 0.2s;
	-webkit-transition: padding 0.2s, height 0.2s;
}

.sapDkIdxLayout > div {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

.sapDkIdxLayoutItem {
 	display: inline-block;
	position: absolute;
	padding: 5px;
	box-sizing: border-box;
}

.sapDkIdxLayoutAnim > div > .sapDkIdxLayoutItem {
    transition: all 0.4s, width 0, height 0;
    -webkit-transition: all 0.4s, width 0, height 0;
}

.sapDkIdxLayoutItem > div {
	height: 100%;
	overflow: auto;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}


/************ Tile *************/

.sapDkIdxLayout_Tile {
	position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px 3px;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 15px;
}

.sapDkIdxLayout_Tile,
.sapDkIdxLayout_Tile:active,
.sapDkIdxLayout_Tile:focus,
.sapDkIdxLayout_Tile:hover,
.sapDkIdxLayout_Tile:visited {
	color: @sapUiHighlight;
}

.sapDkIdxLayout_Tile:hover {
	background-color: #F9F9F9;
}

.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileIcon,
.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileLabel,
.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileDesc {
	display: block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileLabel,
.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileDesc {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileIcon {
    height: 30%;
    font-size: 30px;
}

.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileLabel {
    height: 25%;
    font-size: 16px;
    font-weight: bold;
}

.sapDkIdxLayout_Tile > .sapDkIdxLayout_TileDesc {
	height: 45%;
	font-size: 12px;
	color: @sapUiBaseText;
}


/* Tablet */

html.sapUiMedia-Std-Tablet .sapDkIdxLayoutScale .sapDkIdxLayout_Tile {
	padding: 8px;
}

html.sapUiMedia-Std-Tablet .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileIcon {
	font-size: 25px;
}

html.sapUiMedia-Std-Tablet .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileLabel {
    font-size: 12px;
}

html.sapUiMedia-Std-Tablet .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileDesc {
	font-size: 10px;
}


/* Phone */

html.sapUiMedia-Std-Phone .sapDkIdxLayoutScale .sapDkIdxLayout_Tile {
	padding: 2px;
}

html.sapUiMedia-Std-Phone .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileIcon {
    height: 75%;
    font-size: 55px;
    text-align: center;
    padding: 0;
}

html.sapUiMedia-Std-Phone .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileIcon > span.sapUiIcon {
	height: 100%;
	line-height: inherit;
}

html.sapUiMedia-Std-Phone .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileLabel {
    text-align:	center;
    font-size: 10px;
    white-space: nowrap;
}

html.sapUiMedia-Std-Phone .sapDkIdxLayoutScale .sapDkIdxLayout_Tile > .sapDkIdxLayout_TileDesc {
	display: none;
}