com.phloxui/styles/lib/component/ToastNotification.less

PhloxUI Ng2+ Framework

phx-toast-notification{
	display: block;
}

.phx-toast-notification{
	background-color: extract(@CLR_1, 9);
	.phlox-box-shadow(0, 0, 3, 3);
	width: @TOAST_NOTIFICATION_WIDTH;

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	>.row-container {
	    margin: 0;
	    padding-left: @TOAST_NOTIFICATION_ROW_CONTENT_LEFT_PADDING;
	    padding-right: @TOAST_NOTIFICATION_ROW_CONTENT_RIGHT_PADDING;
	    padding-top: @TOAST_NOTIFICATION_ROW_CONTENT_TOP_PADDING;
	    padding-bottom: @TOAST_NOTIFICATION_ROW_CONTENT_BOTTOM_PADDING;
	    width: 100%;
	    height: 100%;
	    position: relative;

	    >.row {
	        margin: 0;
	        height: @TOAST_NOTIFICATION_ROW_HEIGHT;
	        position: relative;

	        > div {
	        	overflow: hidden;
	        	height: 100%;

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

	        >.left {
	            width: @TOAST_NOTIFICATION_CELL_WIDTH_LEFT;
	            position: absolute;
	        }

	        >.center {
	            width: @TOAST_NOTIFICATION_CELL_WIDTH_CENTER;
	            margin-left: @TOAST_NOTIFICATION_CELL_WIDTH_LEFT;
	            position: absolute;
	            text-align: left;

	            .title-label {
	            	color: @CLR_FIXED_FONT;
	            	font-size: 110%;
	            	font-weight: bold;
	            	height: 33%;
	            	padding-top: 1%;
	            	overflow: hidden;
	            }

	            .description-label {
	            	color: extract(@CLR_1, 4);
	            	height: 43%;
	            	font-size: 90%;
	            	overflow: hidden;
	            }

	            .time-label {
	            	color: extract(@CLR_1, 4);
	            	height: 20%;
	            	font-size: 70%;
	            	overflow: hidden;

	            	>div{
	            		height: 100%;
	            	}

	            	>div:first-child{
	            		float: left;
	            		width: 10%;

	            		.clock{
	            			width: @TOAST_NOTIFICATION_CLOCK_WIDTH;
	            			height: @TOAST_NOTIFICATION_CLOCK_HEIGHT;
	            		}
	            	}

	            	>div:last-child{
	            		float: right;
	            		width: 90%;
	            	}
	            }

	            >.wrapper >.left{
	            	width: 50%;
	            	float: left;

	            	&.hide{
	            		display: none;
	            	}

	            	>div{
	            		padding-right: 5pt;
	            	}
	            }

	            >.wrapper >.right{
	            	width: 50%;
	            	float: right;

	            	&.expand{
	            		width: 100%;
	            	}

	            	>div{
	            		padding-right: 5pt;
	            	}
	            }
	        }

	        >.right {
	            width: @TOAST_NOTIFICATION_CELL_WIDTH_RIGHT;
	            margin-left: @TOAST_NOTIFICATION_CELL_WIDTH_LEFT + @TOAST_NOTIFICATION_CELL_WIDTH_CENTER;
	            position: absolute;
	        }

	        &.action-bar{
	        	max-height: 0;
	        	opacity: 0;
	        	transition: @TOAST_NOTIFICATION_ANIMATE_SHOW_ACITON_BAR_TRANSITION;
	        	overflow: hidden;

	        	&.show{
	        		max-height: @TOAST_NOTIFICATION_ACTION_BAR_HEIGHT;
	        		padding-top: @TOAST_NOTIFICATION_ACTION_BAR_PADDING_TOP;
	        		opacity: 1;
	        	}
	        }

	        &.content{
	        	height: auto;

	        	>.wrapper{
	        		max-height: 0;
	        		transition: @TOAST_NOTIFICATION_ANIMATE_SHOW_BODY_TRANSITION;
	        		opacity: 0;
	        		overflow: hidden;
	        	}

	        	&.show{
	        		>.wrapper{
	        			max-height: 200px;
	        			overflow: auto; // when opacity to 1
	        			opacity: 1;
	        		}
	        	}

	        	&.show.animating{
	        		>.wrapper{
	        			overflow: hidden;
	        			opacity: 1;
	        		}
	        	}
	        }
	    }

	    // end row container
	}

	.textCircle{
		width: @TOAST_NOTIFICATION_ICON_WIDTH;
		height: @TOAST_NOTIFICATION_ICON_HEIGHT;
		background: @CLR_BRAND;
	 	color: @CLR_BRAND_FONT;
	 	border: 0;
	 	font-size: 130%;
	 	margin: 0 auto;
	 	margin-top: 5pt;

		>div {
			height: 100%;
			width: 100%;

			&.text-container {

			}
		}
	}

	.notification-action-btn{
		.phlox-ripple();
		color: @CLR_FIXED_FONT;
		width: @TOAST_NOTIFICATION_ACTION_BUTTON_WIDTH;
		height: @TOAST_NOTIFICATION_ACTION_BUTTON_HEIGHT;
		border-radius: @TOAST_NOTIFICATION_ACTION_BUTTON_BORDER_RADIUS;
		border-width: @TOAST_NOTIFICATION_ACTION_BUTTON_BORDER_WIDTH;
		border-style: solid;
		border-color: @CLR_BORDER_COLOR;
		font-size: @TOAST_NOTIFICATION_ACTION_BUTTON_FONT_SIZE;
		text-align: center;
		cursor: default;

		&.first{
			background-color: @CLR_BORDER_COLOR;
			border: 0;
		}

		transition: @TOAST_NOTIFICATION_ANIMATE_OUT_TRANSITION;

		&.fadeout{
			opacity: 0;
		}
	}

	.cross-icon{
		color: extract(@CLR_1, 8);
		margin-top: -4.5pt;
	}

	transition: @TOAST_NOTIFICATION_ANIMATE_IN_TRANSITION;

	&.animateIn{
		margin-top: -(@TOAST_NOTIFICATION_ROW_HEIGHT + @TOAST_NOTIFICATION_ROW_PADDING_BOTTOM);
		opacity: 0;
	}

	&.animateOut{
		transition: @TOAST_NOTIFICATION_ANIMATE_OUT_TRANSITION;
		opacity: 0;
	}

	&.animateRemove{
		transition: @TOAST_NOTIFICATION_ANIMATE_REMOVE_TRANSITION;
		margin-top: -(@TOAST_NOTIFICATION_ROW_HEIGHT + @TOAST_NOTIFICATION_ROW_PADDING_BOTTOM);
	}

	// end notification
}