hy-checkbox/lib/Dialog/dialog.less

checkbox & radio ui components for react

@import "../../app/variables.less";
@import './dialogForm';

.@{ult-prefix}-ui-dialog-wrap{
	position: fixed;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
	top: 0;
	left: 0;
	.@{ult-prefix}-ui-dialog{
		// width: 60%;
		// height: 60%;
		// 导致ie11上不居中
		// margin: auto;
		min-width:400px;
		border: 1px solid #0056a1;
		border-radius: 0;
		background: #fff;
		overflow: auto; position:relative;
		.@{ult-prefix}-ui-dialog-header{
			padding: 12px 8px;
			line-height: 24px;
			border-bottom:1px solid #e0e0e0;
			margin: 0 16px;
			h3{
				font-size: 16px;
				color: @text-body;
				.iconfont {
					font-size: 14px;
					float: right;
					cursor: pointer;
					opacity: 0.3;
					&:hover {
						color:@text-headline;
						opacity: 0.5;
					}
				}
			}
		}
		.@{ult-prefix}-ui-dialog-close{ position: absolute; right: 16px; top: 16px; z-index: 888; color: @text-body; opacity: 0.5; cursor: pointer;
		   &:hover{ opacity: 0.8;}
		}
		.@{ult-prefix}-ui-dialog-content{
			height : calc(~"100% - 106px");
			align-items: center;
			width: 100%;
			overflow: auto;
			padding: 24px;
		.@{ult-prefix}-ui-confirm{ padding: 0 0 0 32px; position: relative;
				.@{ult-prefix}-ui-confirm-icon{ display: inline-block; position: absolute; left: 0; line-height: 1;
				   .iconfont{font-size: 24px;}
				   &.infor{ color: #1e88e5}
				   &.success{ color: #43a047}
				   &.danger{ color: #e53935;}
				   &.warning{ color: #f50;}
				}
				p{ line-height: 24px;}
			}	
			
		}
		&.step{ overflow: inherit;
			.@{ult-prefix}-ui-dialog-content{ padding: 0 8px;}
			.@{ult-prefix}-ui-dialog-close{ right: -12px; top: -12px; opacity: 1;
			   i.iconfont{background: rgba(0,0,0,.5);padding: 4px;border-radius:50%;color: #fff; font-size: 16px;}
			}
		}
		.@{ult-prefix}-ui-dialog-btn{
			width: 100%; padding: 8px 16px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			border-top: 1px solid #e5e5e5;
			.hidden {
				display: none;
			}
			button{
				margin-right: 8px;
			}
		}
	}
	
}