com.phloxui/styles/component/PhloxDialog.less

PhloxUI Ng2+ Framework

/* popup */
phx-dialog {
	display: block;
}

.phx-dialog-background{
	display: none;
	position: absolute;
	background-color: @PHLOX_DIALOG_BACKGROUND;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	top: 0;
	left: 0;
	z-index: @PHLOX_DIALOG_Z_INDEX;

	&.open{
		display: block;
	}
}

.phx-dialog {
	background-color: extract(@CLR_1, 9);
	display: none;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: @PHLOX_DIALOG_WIDTH;
	height: @PHLOX_DIALOG_HEIGHT;
	overflow: auto;
	box-shadow: 5px 5px 5px 5px rgba(69,69,69,0.1);

	&.show{
		display: block;
	}
}

phx-confirm-dialog {
	display: block;
}

.phx-confirm-dialog{
	display: none;
	width: 100%;

	.dialog-header{
		background-color: @CLR_BRAND;
		height: @CONFIRM_DIALOG_HEADER_HEIGHT;
		color: extract(@CLR_1, 9);
		display: table-row;

		div{
			display: table-cell;
			vertical-align: middle;
		}
	}

	.dialog-body{
		height: @CONFIRM_DIALOG_BODY_HEIGHT;
		display: table-row;

		div{
			display: table-cell;
			vertical-align: middle;
		}
	}

	.dialog-footer{
		height: @CONFIRM_DIALOG_BODY_FOOTER;
		display: table-row;

		div{
			display: table-cell;
			vertical-align: middle;
		}
	}

	.dialog-btn {
		.phlox-ripple();
		background-color: @CLR_BRAND;
		display: inline-block !important;
		color: extract(@CLR_1, 9);
		margin-left: @CONFIRM_DIALOG_BUTTON_MARGIN_LEFT;
		margin-right: @CONFIRM_DIALOG_BUTTON_MARGIN_RIGHT;
		width: @CONFIRM_DIALOG_BUTTON_WIDTH;
		height: @CONFIRM_DIALOG_BUTTON_HEIGHT;
		line-height: @CONFIRM_DIALOG_BUTTON_HEIGHT; // same as height
		border-radius: @CONFIRM_DIALOG_BUTTON_BORDER_RADIUS;
		cursor:pointer;

		&.cancel{
			background-color: extract(@CLR_1, 9);
			color: @CLR_FIXED_FONT;
			border-width: @CONFIRM_DIALOG_CANCEL_BUTTON_BORDER_WIDTH;
			border-style: solid;
			border-color: @CLR_BORDER_COLOR;
		}
	}

	&.show{
		display: table !important;
	}
}

phx-message-dialog {
	display: block;
}

.phx-message-dialog{
	display: none;
	width: 100%;

	.dialog-header{
		background-color: @CLR_BRAND;
		height: @MESSAGE_DIALOG_HEADER_HEIGHT;
		color: extract(@CLR_1, 9);
		display: table-row;

		div{
			display: table-cell;
			vertical-align: middle;
		}
	}

	.dialog-body{
		height: @MESSAGE_DIALOG_BODY_HEIGHT;
		display: table-row;

		div{
			display: table-cell;
			vertical-align: middle;
		}
	}

	.dialog-footer{
		height: @MESSAGE_DIALOG_BODY_FOOTER;
		display: table-row;

		div{
			display: table-cell;
			vertical-align: middle;
		}
	}

	.dialog-btn {
		.phlox-ripple();
		background-color: @CLR_BRAND;
		display: inline-block !important;
		color: extract(@CLR_1, 9);
		margin-left: @MESSAGE_DIALOG_BUTTON_MARGIN_LEFT;
		margin-right: @MESSAGE_DIALOG_BUTTON_MARGIN_RIGHT;
		width: @MESSAGE_DIALOG_BUTTON_WIDTH;
		height: @MESSAGE_DIALOG_BUTTON_HEIGHT;
		line-height: @MESSAGE_DIALOG_BUTTON_HEIGHT; // same as height
		border-radius: @MESSAGE_DIALOG_BUTTON_BORDER_RADIUS;
		cursor:pointer;

		&.cancel{
			background-color: extract(@CLR_1, 9);
			color: @CLR_BRAND_FONT;
			border-width: @MESSAGE_DIALOG_CANCEL_BUTTON_BORDER_WIDTH;
			border-style: solid;
			border-color: @CLR_BORDER_COLOR;
		}
	}

	&.show{
		display: table !important;
	}
}

phx-component-dialog {
	display: block;
}

.phx-component-dialog{
	display: none;
	width: 100%;
	height: 100%;
	text-align: left;
	cursor: default;

	>div{
		>.wrapper{
			width: 100%;
			height: 100%;
			padding-left: @COMPONENT_DIALOG_WRAPPER_PADDING;
			padding-right: @COMPONENT_DIALOG_WRAPPER_PADDING;
			position: relative;
		}
	}

	.dialog-header{
		background-color: @CLR_BRAND;
		height: @COMPONENT_DIALOG_HEADER_HEIGHT;
		color: extract(@CLR_1, 9);
		position: relative;

		>.wrapper{
			>div{
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			// title
			>div:first-child {
				display: flex;
			  justify-content: center;
			  flex-direction: column;
			  text-align: center;
			}

			// X btn
			>div:last-child {
				text-align: right;
				padding-right: @COMPONENT_DIALOG_HEADER_XBTN_PADDING_RIGHT;
			}
		}
	}

	.dialog-body{
		height: @COMPONENT_DIALOG_BODY_HEIGHT;

		&.account-code {
			text-align: center;
			padding-top: 50pt;
			height: 100pt;
		}

		&.grey{
			border-bottom: @COMPONENT_DIALOG_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		}
	}

	.dialog-footer{
		height: @COMPONENT_DIALOG_FOOTER_HEIGHT;
		text-align: center;

		div{
			vertical-align: middle;
		}

		>.wrapper {
			display: flex;
		  justify-content: center;
		  flex-direction: column;
		  text-align: center;
		}

		&.right{
			text-align: right;
		}

		&.account-code {
			.dialog-btn {
				&.cancel{
					color: @CLR_FIXED_FONT;
					border: @COMPONENT_DIALOG_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
				}

				&.confirm:last-child {
					width: 120pt;
				}
			}
		}

		&.grey{
			background-color: extract(@CLR_1, 8);

			.dialog-btn {
				&.cancel{
					color: @CLR_BRAND_FONT;
					background-color: @CLR_BORDER_COLOR;
					border: @COMPONENT_DIALOG_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
				}
			}
		}
	}

	.dialog-btn {
		.phlox-ripple();
		background-color: @CLR_BRAND;
		display: inline-block !important;
		color: @CLR_BRAND_FONT;
		text-align: center;
		margin-left: @COMPONENT_DIALOG_BUTTON_MARGIN_LEFT;
		margin-right: @COMPONENT_DIALOG_BUTTON_MARGIN_RIGHT;
		width: @COMPONENT_DIALOG_BUTTON_WIDTH;
		height: @COMPONENT_DIALOG_BUTTON_HEIGHT;
		line-height: @COMPONENT_DIALOG_BUTTON_HEIGHT; // same as height
		border-radius: @COMPONENT_DIALOG_BUTTON_BORDER_RADIUS;
		cursor:pointer;

		&.cancel{
			background-color: extract(@CLR_1, 9);
			color: @CLR_FIXED_FONT;
			border-width: @COMPONENT_DIALOG_CANCEL_BUTTON_BORDER_WIDTH;
			border-style: solid;
			border-color: @CLR_BORDER_COLOR;
		}
	}

	&.show{
		display: table !important;
	}
}