com.phloxui/styles/lib/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-record-view {
	height: 100%;
	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;
		padding-left: 5pt;
	}

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

	.right {
		text-align: right;
		vertical-align: middle;
		padding-right: 5pt;
	}

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

		>.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 {
						display: flex;
						align-items: center;
						justify-content: center;
						width:  @RECORD_HEADER_SWITCH_CONTAINER_WIDTH;
						height: 100%;
						position: relative;
						padding-top: @RECORD_HEADER_SWITCH_CONTAINER_PADDING_TOP;

						.material-switch { 

							>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();
									.no-hilight();

									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();
									.no-hilight();
									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 {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							height: 100%;
							text-align: center; 
							position: relative; 

							>.icon {
								.FC2();
								.no-hilight();
								font-family: "PhloxGlyphicons"; 
							}

							>.title {
								margin-left: 5pt 
							}
						}
					}

					>.sorting-container {
						.no-hilight();
						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();
									padding-bottom:5px;
									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: 1;

		>.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;
				z-index: 5;
				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: calc(100% - 35pt);
				width: 100%;
				position: absolute;
				left: 0;
				top: @RECORD_TABLE_HEADER_HEIGHT; 
				
				& {
					// overflow: auto;
					overflow-x: hidden;

					&::-webkit-scrollbar-track {
						// -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
						background-color: @SCROLL_LOAD_WHITE_COLOR;
					}

					&::-webkit-scrollbar {
						width: @SCROLL_WIDTH_HEIGHT;
						background-color: @SCROLL_LOAD_WHITE_COLOR;
					}

					&::-webkit-scrollbar-thumb {
						border-radius: 4px;
						background-color: extract(@CLR_1, 5);
					}
				}
				
				.checkbox {
					margin-top: 11pt;
				}

				
				>.wrapper {
					position: relative;
					width: 100%;
					height: fit-content;
					overflow-y: auto;
					
					>phx-table {
						width: 100%;
						
						>phx-table-header {
							width: 100%;	
							position: absolute;
						}

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

								>.phx-table-cell {
									border-bottom: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

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

									> phx-string-data-view {
										.phx-string-data-view {
											overflow: hidden;
											white-space: nowrap;
											text-overflow: ellipsis;
											padding: 0 3pt;
										}
									}
								}
							}
						}
					}
				}

				// body table cell
				.phx-table-cell {
					.phx-text-box {
						> div {
							width: 100%; 
						}
					}
				}

			}

		}
	}
}

phx-component-popover {
	.phx-component-popover {
		z-index: 2;
		&.sorting {
			height: 100%;
			margin-left: -38.5pt;

			// >.container-wrapper {
			// 	height: auto;
			// 	width: min-content;
			// }
			
		}

		&.filter {
			margin-left: -43.5pt;

			.phx-column-display {
				.boder-column-display {
					border-bottom: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
					padding: 5pt 5pt 0 5pt;
				}
			}
		}
	}


	.phx-column-sorting {
		cursor: pointer;
		
		.boder-column-sorting {
			border-bottom: @RECORD_VIEW_HEADER_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
			padding: 5.88pt 8pt;

			span {
				margin-right: -8pt;
			}
		}
	}
}