Files
Umbraco-CMS/src/Umbraco.Web.UI.Client/src/less/modals.less
2017-02-22 10:20:37 +01:00

203 lines
4.2 KiB
Plaintext

/* Modals
// -------------------------*/
/* Modalcolumn is used for menu panels */
.umb-modalcolumn {
background: white;
}
.umb-modalcolumn-header {
background: @test-purple;
border-bottom: 1px solid @purple-l3;
height: 94px;
padding: 5px 20px 0px 20px;
white-space: nowrap
}
.umb-modalcolumn-header h1{
margin: 0;
white-space: nowrap;
font-size: @fontSizeLarge;
font-weight: 400;
padding-top: 10px !important;
}
.umb-modalcolumn-body {
padding: 0px;
background: @white;
top: 100px;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
}
.no-padding .umb-modalcolumn-body {
padding: 0px
}
.umb-modalcolumn .umb-modalcolumn-header .btn {
position: absolute;
top: 13px;
right: 15px
}
.umb-modalcolumn iframe.auto-expand, .umb-modal iframe.auto-expand {
border: none;
padding: 0px;
margin: 0px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;;
}
/* re-align loader */
.umb-modal .umb-loader-wrapper, .umb-modalcolumn .umb-loader-wrapper, .umb-dialog .umb-loader-wrapper{
position:relative;
margin: 20px -20px;
}
.umb-modal-left .umb-panel-header .umb-headline, .umb-modal-left .umb-panel-header h1 {
width: auto;
padding-left: 0;
}
/* umb.dialog is used for the dialogs on the conent tree*/
.umb-dialog {
outline: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: absolute;
padding: 0px;
}
.umb-dialog .umb-btn-toolbar {
text-align: right;
padding: 15px 20px 10px 20px;
margin-top: 30px;
clear: both;
background: #fff;
}
.umb-dialog .umb-btn-toolbar .umb-control-group{
border: none;
padding: none;
}
.umb-dialog-body{
position: absolute;
overflow:auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 90px;
}
.umb-dialog-body .umb-pane{margin-top: 15px;}
.umb-dialog-footer{
border-top: @purple-l3 1px solid;
position: absolute;
overflow:auto;
text-align: right;
height: 60px;
left: 0px;
right: 0px;
bottom: 0px;
}
/*we will always make sure to wrap iframe dialogs in proper padding*/
.umbracoDialog{
width: auto !Important;
height: auto !Important;
padding: 20px;
}
.umbracoDialog .umb-pane{margin-left: 0px; margin-right: 0px; margin-top: 0px;}
.umbracoDialog .umb-dialog-body .umb-pane{margin-left: 20px; margin-right: 20px; margin-top: 20px;}
.umbracoDialog form{height: 100%;}
/*ensures dialogs doesnt have side-by-side labels*/
.umbracoDialog .controls-row,
.umb-modal .controls-row{margin-left: 0px !important;}
/* modal and umb-modal are used for right.hand dialogs */
.modal {
border-radius: 0 !important;
&.fade.in{border: none !important;}
}
.umb-modal.fade {
outline: none;
top: 0 !important;
left: -100% !important;
width: 0px !important;
-webkit-transition: left 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
height: 100% !important;
}
.umb-modal.fade.in {
top: 0 !important;
left: 100% !important;
margin-left: -440px;
width: 440px !important;
height: 100% !important;
display: block;
}
.umb-modal-left.fade {
top: 0 !important;
left: -100% !important;
width: 0px !important;
-webkit-transition: left 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
height: 100% !important;
}
.umb-modal-left.fade.in {
top: 0 !important;
left: 0 !important;
margin-left: 80px;
width: 440px !important;
height: 100% !important;
display: block;
}
/*Modal default panel styles*/
.umb-modal .umb-panel-header {
padding: 20px;
background: @white;
border: none;
height: auto;
}
.umb-modal .umb-panel-body{
padding: 0px 20px 0px 20px;
}
.umb-modal.fade.in.wide {
margin-left: -640px;
width: 640px !important;
}
.umb-modal i {
font-size: 14px;
}
.umb-modal .breadcrumb {
background: none;
padding: 0
}
.umb-modal .breadcrumb input {
height: 12px
}
.umb-modal.ysod {
z-index: 10000;
}