com.phloxui/styles/theme/material/component/dataview/input/MaterialFileSelector.less

PhloxUI Ng2+ Framework

phx-material-file-selector {
	cursor: pointer;

	.phx-material-file-selector{
		position: fixed;
		width: 92%;
		height: 88%;
		top: 6%;
		left: 4%;
		border: 2px dashed;
		border-color:  extract(@CLR_1, 5);
		display: flex;
		justify-content: center;
		align-items: center;
		color:  extract(@CLR_0, 7);
		.FH6L();

		>.phx-material-file-selector-box{

			.icon-clouds {
				display: flex;
				align-content: center;
				align-items: center;
				justify-items: center;
				justify-content: center;
		
				&:before {
					color: extract(@CLR_1, 3);
					font-family: 'PhloxGlyphicons';
					font-size: 256pt;
					content: "1";
					position: absolute;
					z-index: -1;
				}
	
				>.icon-clouds-text{
					font-family: 'Courier New';
					color: #FFF; 
					font-family: 'Kanit';
					color: #FFF;
					padding-left: 8pt;
					padding-top: 32pt;
					font-size: 36pt;
					display: flex;
					align-items: center;
					padding-left: 14pt;
	
					>.icon-clouds-text-type{
						font-size: 20pt;
						padding-left: 10pt;
						padding-top: 10pt;
					}
				}
			}

		}
	}
}

@media (max-width: 1200px) {
	phx-material-file-selector {
		cursor: pointer;
	
		.phx-material-file-selector{
			position: fixed;
			width: 92%;
			height: 88%;
			top: 6%;
			left: 4%;
			border: 2px dashed;
			border-color:  extract(@CLR_1, 5);
			display: flex;
			justify-content: center;
			align-items: center;
			color:  extract(@CLR_0, 7);
			.FH4L();
	
			>.phx-material-file-selector-box{
	
				.icon-clouds {
					display: flex;
					align-content: center;
					align-items: center;
					justify-items: center;
					justify-content: center;
			
					&:before {
						color: extract(@CLR_1, 3);
						font-family: 'PhloxGlyphicons';
						font-size: 128pt;
						content: "1";
						position: absolute;
						z-index: -1;
					}
		
					>.icon-clouds-text{
						font-family: 'Kanit';
						color: #FFF;
						padding-left: 8pt;
						padding-top: 20pt;
						font-size: 28pt;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-align: center;
						align-items: center;
						padding-left: 14pt;
		
						>.icon-clouds-text-type{
							font-size: 16pt;
							padding-left: 6pt;
							padding-top: 6pt;
						}
					}
				}
	
			}
		}
	}
}

@media (max-width: 992px) {
	phx-material-file-selector {
		cursor: pointer;
	
		.phx-material-file-selector{
			position: fixed;
			width: 92%;
			height: 88%;
			top: 6%;
			left: 4%;
			border: 2px dashed;
			border-color:  extract(@CLR_1, 5);
			display: flex;
			justify-content: center;
			align-items: center;
			color:  extract(@CLR_0, 7);
			.FH2L();
	
			>.phx-material-file-selector-box{
	
				.icon-clouds {
					display: flex;
					align-content: center;
					align-items: center;
					justify-items: center;
					justify-content: center;
			
					&:before {
						color: extract(@CLR_1, 3);
						font-family: 'PhloxGlyphicons';
						font-size: 128pt;
						content: "1";
						position: absolute;
						z-index: -1;
					}
		
					>.icon-clouds-text{
						font-family: 'Kanit';
						color: #FFF;
						padding-left: 8pt;
						padding-top: 12pt;
						font-size: 24pt;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-align: center;
						align-items: center;
						padding-left: 14pt;
		
						>.icon-clouds-text-type{
							font-size: 16pt;
							padding-left: 6pt;
							padding-top: 4pt;
						}
					}
				}
	
			}
		}
	}
}