com.phloxui/styles/component/editor/RecordView.less

PhloxUI Ng2+ Framework

.ua-chrome {
	.phx-record-view {
		>.header {
			>.left {
				>.wrapper {
					>.switch-container {
						padding-top: @RECORD_HEADER_SWITCH_CONTAINER_PADDING_TOP_CHROME;

						.phx-switch {
							margin-top: @RECORD_HEADER_SWITCH_MARGIN_TOP_WINDOW;
						}
					}
				}
			}
		}
	}
}

.phx-record-view {
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: relative;

	-webkit-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Firefox < 16 */
        -ms-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Internet Explorer */
         -o-animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION; /* Opera < 12.1 */
            animation: fadein @EDITOR_VIEW_ANIMATION_TRANSITION_DURATION;

	&.hide {
		display: none;
	}

	.left {
		text-align: left;
		vertical-align: middle;
	}

	.center {
		text-align: center;
		vertical-align: middle;
	}

	.right {
		text-align: left;
		vertical-align: middle;
	}

	>.header-wrapper {
		width: 100%;
		height: @RECORD_VIEW_HEADER_HEIGHT;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;

		>.header {
			.FC1();
			color: @CLR_FIXED_FONT;
			background-color: extract(@CLR_1, 9);
			height: 100%;
	    border-bottom: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
			position: relative;
			overflow: hidden;

			>.left {
				width: 50%;
				height: 100%;
				float: left;
				overflow: hidden;

				>.wrapper {
					padding-top: @RECORD_HEADER_PADDING_TOP;
					padding-bottom: @RECORD_HEADER_PADDING_BOTTOM;
					height: 100%;

					> div {
						float: left;
					}

					>.switch-container {
						width:  @RECORD_HEADER_SWITCH_CONTAINER_WIDTH;
						height: 100%;
						position: relative;
						padding-top: @RECORD_HEADER_SWITCH_CONTAINER_PADDING_TOP;

						.phx-switch {
							margin: 0;
							margin-top: @RECORD_HEADER_SWITCH_MARGIN_TOP;
							margin-left: @RECORD_HEADER_SWITCH_MARGIN_LEFT;

							>label{
									margin-top: -5pt;
							}

							// edit switch size
							& input.toggle + label {
								height: @RECORD_HEADER_SWITCH_HEIGHT;
								width: @RECORD_HEADER_SWITCH_WIDTH;
							}

							& input.toggle + label:before {
								height: @RECORD_HEADER_SWITCH_HEIGHT;
								width: @RECORD_HEADER_SWITCH_HEIGHT;
							}

							& input.toggle + label:after {
								height: @RECORD_HEADER_SWITCH_HEIGHT;
								width: @RECORD_HEADER_SWITCH_HEIGHT;
							}

							& input.toggle:checked + label:before {
								width: @RECORD_HEADER_SWITCH_WIDTH;
							}

							& input.toggle:checked + label:after {
								left: @RECORD_HEADER_SWITCH_AFTER_TOGGLE_LEFT;
							}
						}
					}

					>.title-container {
						width: @RECORD_HEADER_SWITCH_TITLE_CONTAINER_WIDTH;
						height: 100%;
						position: relative;
						border-right: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
						overflow: hidden;

						>.title {
							margin-left: @RECORD_HEADER_SWITCH_LABEL_MARGIN_LEFT;
							margin-top: @RECORD_HEADER_SWITCH_LABEL_MARGIN_TOP;
						}
					}
				}
			}

			>.right {
				width: 50%;
				height: 100%;
				float: right;

				>.wrapper {
					padding-top: @RECORD_HEADER_PADDING_TOP;
					padding-bottom: @RECORD_HEADER_PADDING_BOTTOM;
					height: 100%;

					>div {
						float: right;
						border-left: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
						height: 100%;
					}

					>.create-container {
						width: @RECORD_HEADER_CREATE_CONTAINER_WIDTH;
						padding-left: @RECORD_HEADER_BTN_LABEL_MARGIN_LEFT;
						padding-right: @RECORD_HEADER_BTN_LABEL_MARGIN_RIGHT;
						cursor: pointer;

						>.wrapper {
							width: 100%;
							text-align: center;
							position: relative;

							>div {
								position: absolute;
							}

							>.icon {
								.FC0();
								font-family: "PhloxGlyphicons";
								top: @RECORD_HEADER_CREATE_ICON_TOP;
								left: @RECORD_HEADER_CREATE_ICON_LEFT;
							}

							>.title {
								top: @RECORD_HEADER_CREATE_LABEL_TOP;
								left: @RECORD_HEADER_CREATE_LABEL_LEFT;
							}
						}
					}

					>.redo-container {
						width: @RECORD_HEADER_REDO_UNDO_CONTAINER_WIDTH;
						padding-left: @RECORD_HEADER_BTN_LABEL_MARGIN_LEFT;
						padding-right: @RECORD_HEADER_BTN_LABEL_MARGIN_RIGHT;
						position: relative;

						.left {
							float: left;
							width: 50%;
							height: 100%;
							cursor: pointer;

							>.wrapper {
								width: 100%;
								text-align: center;
								margin-top: @RECORD_HEADER_SWITCH_LABEL_MARGIN_TOP;

								>.icon {
									.FC1();
									font-family: "PhloxGlyphicons";
									width: 100%;
									float: left;
									top: @RECORD_HEADER_CREATE_ICON_TOP;
									left: @RECORD_HEADER_CREATE_ICON_LEFT;
									text-align: center;

									&.disable {
										color: extract(@CLR_1, 4);
									}
								}
							}
						}

						.left-hint-shortcut {
							position: absolute;
							top: @RECORD_HEADER_UNDO_HINT_TOP;
							z-index: 2;
							width: (@RECORD_HEADER_REDO_UNDO_CONTAINER_WIDTH / 2) - @RECORD_HEADER_BTN_LABEL_MARGIN_LEFT;
						}

						.right {
							float: right;
							width: 50%;
							height: 100%;
							cursor: pointer;

							>.wrapper {
								width: 100%;
								text-align: center;
								margin-top: @RECORD_HEADER_SWITCH_LABEL_MARGIN_TOP;

								>.icon {
									.FC1();
									font-family: "PhloxGlyphicons";
									width: 100%;
									float: left;
									top: @RECORD_HEADER_CREATE_ICON_TOP;
									left: @RECORD_HEADER_CREATE_ICON_LEFT;
									text-align: center;

									&.disable {
										color: extract(@CLR_1, 4);
									}
								}
							}
						}

						.right-hint-shortcut {
							position: absolute;
							top: @RECORD_HEADER_REDO_HINT_TOP;
							left: @RECORD_HEADER_REDO_HINT_LEFT;
							z-index: 2;
							width: (@RECORD_HEADER_REDO_UNDO_CONTAINER_WIDTH / 2) - @RECORD_HEADER_BTN_LABEL_MARGIN_RIGHT;
						}
					}

					>.save-container {
						width: @RECORD_HEADER_SAVE_CONTAINER_WIDTH;
						padding-left: @RECORD_HEADER_BTN_LABEL_MARGIN_LEFT;
						padding-right: @RECORD_HEADER_BTN_LABEL_MARGIN_RIGHT;
						cursor: pointer;

						>.wrapper {
							width: 100%;
							text-align: center;
							position: relative;

							>div {
								position: absolute;
							}

							>.icon {
								.FC2();
								font-family: "PhloxGlyphicons";
								top: @RECORD_HEADER_SAVE_ICON_TOP;
								left: @RECORD_HEADER_SAVE_ICON_LEFT;
							}

							>.title {
								top: @RECORD_HEADER_SAVE_LABEL_TOP;
								left: @RECORD_HEADER_SAVE_LABEL_LEFT;
							}
						}
					}

					>.sorting-container {
						width: @RECORD_HEADER_SORTING_CONTAINER_WIDTH;
						padding-left: @RECORD_HEADER_BTN_LABEL_MARGIN_LEFT;
						padding-right: @RECORD_HEADER_BTN_LABEL_MARGIN_RIGHT;

						>.wrapper {
							width: 100%;
							text-align: center;
							position: relative;

							>div {
								position: absolute;
							}

							>.icon {
								cursor: pointer;

								&:first-child {
									.FC1();
									font-family: "PhloxGlyphicons";
									top: @RECORD_HEADER_SORT_ICON_TOP;
									left: @RECORD_HEADER_SORT_ICON_LEFT;
								}

								&:nth-child(2) {
									.FC2();
									font-family: "PhloxGlyphicons";
									top: @RECORD_HEADER_SETTING_ICON_TOP;
									left: @RECORD_HEADER_SETTING_ICON_LEFT;
								}
							}

							>.title {
								top: @RECORD_HEADER_TOP_LABEL_TOP;
								left: @RECORD_HEADER_TOP_LABEL_LEFT;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}

	>.body-wrapper {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: @RECORD_VIEW_HEADER_HEIGHT;
		z-index: 2;

		>.body {
			position: relative;
			height: 100%;

			.checkbox {
				margin-left: 0;
				margin-right: 7pt;
			}

			>.load-container {
				width: 100%;
				height: 100%;
				text-align: center;

				material-icon-loader {
					display: block;

					>.material-icon-loader {
						position: absolute;
					  margin: auto;
					  top: @RECORD_TABLE_LOADING_TOP;
					  right: 0;
					  bottom: 0;
					  left: 0;
					}
				}
			}

			>.table-header {
				height: @RECORD_TABLE_HEADER_HEIGHT;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				border-bottom: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
				color: extract(@CLR_1, 4);

				.checkbox {
					margin-top: 13pt;
				}

				>.wrapper {
					position: relative;
					width: 100%;
					height: 100%;
					overflow: hidden;

					>phx-table {
						height: 100%;
						width: 100%;

						>phx-table-header {
							>.phx-table-cell:first-child {
								border-right: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
								height: @RECORD_TABLE_HEADER_HEIGHT;
							}
						}
					}
				}
			}

			>.table-body {
				height: 100%;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				padding-top: @RECORD_TABLE_HEADER_HEIGHT; // as same as table-header
				padding-bottom: @RECORD_BODY_PADDING_BOTTOM; // as same as header Height

				.checkbox {
					margin-top: 11pt;
				}

				>.wrapper {
					position: relative;
					width: 100%;
					height: 100%;
					overflow-y: auto;

					>phx-table {
						width: 100%;

						>phx-table-body {
							>.phx-table-row {
								height: 40pt;

								>.phx-table-cell {

									&:first-child {
										border-right: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
									}

									border-bottom: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
								}
							}
						}
					}
				}

			}

		}
	}

}