com.phloxui/styles/component/VersionHistory.less

PhloxUI Ng2+ Framework

/* version history */
phx-version-history{
	display: block;
}

.phx-component-dialog  {
	.dialog-body {
		&.version-body {
			height: @VERSION_HISTORY_BODY_HEIGHT;
		}
	}
}

.phx-version-history{
	width: 100%;
	height: 100%;

	>.header{
		display: inline-block;
		width: 100%;
		height: @VERSION_HISTORY_HEADER_HEIGHT;
		background-color: extract(@CLR_1, 8);
		border-bottom: @VERSION_HISTORY_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		position: relative;

		>.wrapper{
			padding-left: @VERSION_HISTORY_WRAPPER_PADDING_LEFT;
			padding-right: @VERSION_HISTORY_WRAPPER_PADDING_RIGHT;
			padding-top: @VERSION_HISTORY_WRAPPER_PADDING_TOP;
			width: 100%;
			height: 100%;
			position: relative;

			>.left{
				float: left;
				width: 65%;
				height: @VERSION_HISTORY_HEADER_LEFT_HEIGHT;

				// title and description
				>div:first-child{
					width: 100%;
					height: @VERSION_HISTORY_HEADER_LEFT_FIRST_HEIGHT;
					overflow: hidden;

					h3{
						margin: 0;
					}

					>.title {
						width: 100%;
						height: @VERSION_HISTORY_HEADER_LEFT_FIRST_TITLE_HEIGHT;
						overflow: hidden;
					}

					>.description{
						color: extract(@CLR_1, 2);
						width: 100%;
						height: @VERSION_HISTORY_HEADER_LEFT_FIRST_DESCRIPTION_HEIGHT;
						font-size: 90%;
						overflow: hidden;
					}
				}

				// day tab
				>div:last-child{
					width: 100%;
					height: @VERSION_HISTORY_HEADER_LEFT_SECOND_HEIGHT;

					>.tab{
						color: extract(@CLR_1, 2);
						width: 25%;
						height: 100%;
						float: left;
						text-align: center;
						padding-top: @VERSION_HISTORY_HEADER_LEFT_TAB_PADDING_TOP;
						font-size: 90%;

						&.active{
							color: extract(@CLR_0, 1);
							border-bottom: @VERSION_HISTORY_TAB_BORDER_THICKNESS solid @CLR_BRAND;
						}
					}
				}
			}

			>.right{
				color: extract(@CLR_1, 2);
				float: right;
				width: 35%;
				height: 100%;

				>div:first-child{
					width: 100%;
					height: @VERSION_HISTORY_HEADER_RIGHT_FIRST_HEIGHT;

					>.sorting-label{
						float: right;
						height: @VERSION_HISTORY_DROPDOWN_HEIGHT;
					}

					>.sorting{
						float: right;
						font-size: 80%;
					}
				}

				>div:last-child{
					width: 100%;
					height: @VERSION_HISTORY_HEADER_RIGHT_SECOND_HEIGHT;

					>div {
						float: left;

						&:first-child{
							margin-right: @VERSION_HISTORY_PADDING_ICON;
						}

						&:nth-child(2){

						}

						&:nth-child(3){
							margin-right: @VERSION_HISTORY_PADDING_ICON;
							margin-left: @VERSION_HISTORY_PADDING_ICON;
							height: 100%;
							text-align: center;
						}

						&:last-child{

						}
					}

					>.logo {
						height: 100%;

						>.calendar{
							width: @VERSION_HISTORY_HEADER_CALENDAR_LOGO_SIZE;
							height: @VERSION_HISTORY_HEADER_CALENDAR_LOGO_SIZE;
							margin-top: @VERSION_HISTORY_HEADER_CALENDAR_LOGO_MARGIN_TOP;
						}
					}

					>.date {
						.form-control{
							color: extract(@CLR_1, 2);
							background-color: extract(@CLR_1, 8);
						}

						.phx-date-picker{
							margin-top: @VERSION_HISTORY_DATE_PICKER_MARGIN_TOP;
						}
					}
				}

				.phx-date-picker{
					input {
						width: @VERSION_HISTORY_DATE_PICKER_WIDTH;
					}
				}
			}

			.component-dropdown{
				width: @VERSION_HISTORY_DROPDOWN_WIDTH;
				height: @VERSION_HISTORY_DROPDOWN_HEIGHT;

				> .dropdown > .label{
					text-align: left;
					padding-left: @VERSION_HISTORY_DROPDOWN_LABEL_PADDING_LEFT;
				}
			}
		}
		// end
	}

	>.body{
		display: inline-block;
		width: 100%;
		height: @VERSION_HISTORY_BODY_HEIGHT - @VERSION_HISTORY_HEADER_HEIGHT;
		overflow-x: hidden;
		overflow-y: auto;

		>.wrapper{
			padding-left: @VERSION_HISTORY_WRAPPER_PADDING_LEFT;
			padding-right: @VERSION_HISTORY_WRAPPER_PADDING_RIGHT;
			padding-top: @VERSION_HISTORY_WRAPPER_PADDING_TOP;
		}

		.table > tbody > tr {
			height: @VERSION_HISTORY_TABLE_ROW_HEIGHT;
			box-sizing: border-box;

			&:first-child, &:nth-child(2) {
				height: 0;

				> td{
					padding: 0;
				}
			}
		}

		.table > tbody > tr > td {
			color: @CLR_FIXED_FONT;
			border-top: 0;
			line-height: normal;
			font-size: 80%;
			vertical-align: middle;
			width: 18%;

			&.highlight{
				color: @CLR_FIXED_FONT;
			}
		}

		.table > tbody > tr {
			&.selected{
				border: @VERSION_HISTORY_ROW_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
			}

			a {
				text-decoration: none;
				cursor:pointer;
			}
		}

		// first td
		.table > tbody > tr > td:first-child {
			text-align: center;
			width: 10%;
		}

		.table > tbody > tr > td:nth-child(2) {
			text-align: center;
		}

		.table > tbody > tr > td:nth-child(3) {
			text-align: center;
		}

		.table > tbody > tr > td:last-child {
			color: extract(@CLR_BRAND_HUE, 4);
			text-align: center;

			.current {
				color: @CLR_FIXED_FONT;
			}

			.heavy-check-mark{

			}
		}
	}
}