@atlassian/aui
Version:
Atlassian User Interface Framework
269 lines (267 loc) • 5.92 kB
CSS
.aui-dialog2 {
box-shadow: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
background-color: #FFFFFF;
box-sizing: border-box;
border-radius: 3px;
left: 0;
margin-left: auto;
margin-right: auto;
position: relative;
right: 0;
}
.aui-dialog2.aui-layer {
overflow: visible;
position: fixed;
top: 100px;
}
.aui-dialog2.aui-layer[aria-hidden="true"] .aui-dialog2-header,
.aui-dialog2.aui-layer[aria-hidden="true"] .aui-dialog2-footer,
.aui-dialog2.aui-layer[aria-hidden="true"] .aui-dialog2-content {
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
transition-delay: 0s;
visibility: hidden;
}
.aui-dialog2.aui-layer[aria-hidden="false"] .aui-dialog2-header,
.aui-dialog2.aui-layer[aria-hidden="false"] .aui-dialog2-footer,
.aui-dialog2.aui-layer[aria-hidden="false"] .aui-dialog2-content {
opacity: 1;
transition: opacity 0.2s;
transition-delay: 0s;
visibility: visible;
}
.aui-dialog2-small {
width: 400px;
min-height: 138px;
}
.aui-dialog2-medium {
width: 600px;
min-height: 238px;
}
.aui-dialog2-large {
width: 800px;
min-height: 438px;
}
.aui-dialog2-xlarge {
min-height: 438px;
width: 980px;
}
.aui-dialog2-small .aui-dialog2-content {
min-height: 86px;
}
.aui-dialog2-medium .aui-dialog2-content {
min-height: 186px;
}
.aui-dialog2-xlarge .aui-dialog2-content,
.aui-dialog2-large .aui-dialog2-content {
min-height: 386px;
}
.aui-dialog2-content {
max-height: 100%;
}
.aui-dialog2-content {
background-color: #FFFFFF;
box-sizing: border-box;
overflow: auto;
padding: 20px;
max-height: calc(100vh - 314px);
}
.aui-dialog2-content:last-child {
border-radius: 0 0 3px 3px;
}
.aui-dialog2-header {
border-bottom: 2px solid #EBECF0;
box-sizing: border-box;
height: 62px;
padding: 15px 20px;
border-radius: 3px 3px 0 0;
color: #172B4D;
display: table;
font-weight: normal;
padding: 0 20px;
width: 100%;
}
.aui-dialog2-header > * {
display: table-cell;
vertical-align: middle;
}
.aui-dialog2-header h2,
.aui-dialog2-header h3 {
font-size: 20px;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.008em;
text-transform: none;
}
.aui-dialog2[data-aui-modal="true"] .aui-dialog2-header-close {
display: none;
}
.aui-dialog2-footer {
border-top: 2px solid #EBECF0;
box-sizing: border-box;
height: 52px;
padding: 10px;
border-radius: 0 0 3px 3px;
padding: 10px 20px;
width: 100%;
}
.aui-dialog2-footer:empty {
height: 5px;
padding: 0;
}
.aui-dialog2-footer-hint {
color: #505F79;
line-height: 32px;
}
.aui-dialog2-footer-hint,
.aui-dialog2-header-main {
overflow: hidden;
padding-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.aui-dialog2-header-main {
color: #172B4D;
max-width: 400px;
}
.aui-dialog2-header-secondary,
.aui-dialog2-header-close,
.aui-dialog2-footer-actions {
text-align: right;
}
.aui-dialog2-footer-actions {
float: right;
}
.aui-dialog2-header-close {
cursor: pointer;
color: #505F79;
height: 20px;
line-height: 100%;
padding-left: 5px;
text-align: right;
width: 20px;
}
.aui-dialog2-header-close:hover {
color: #505F79;
}
.aui-dialog2-warning .aui-dialog2-header {
background-color: #DE350B;
border-bottom-color: #DE350B;
color: #FFFFFF;
}
.aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-main,
.aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-actions a,
.aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-secondary a,
.aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-close {
color: inherit;
}
.aui-dialog2 .aui-iconfont-close-dialog:before {
content: "\f11b";
}
@media all and (max-height: 700px) {
.aui-dialog2-large,
.aui-dialog2-xlarge {
min-height: 200px;
}
.aui-dialog2-large.aui-layer,
.aui-dialog2-xlarge.aui-layer {
bottom: 100px;
}
.aui-dialog2-large .aui-dialog2-content,
.aui-dialog2-xlarge .aui-dialog2-content {
height: calc(100vh - 314px);
max-height: none;
min-height: 86px;
}
}
@media all and (max-height: 500px) {
.aui-dialog2-medium {
min-height: 200px;
}
.aui-dialog2-medium.aui-layer {
bottom: 100px;
}
.aui-dialog2-medium .aui-dialog2-content {
height: calc(100vh - 314px);
max-height: none;
min-height: 86px;
}
}
@media all and (max-height: 400px) {
.aui-dialog2.aui-layer {
bottom: auto;
}
}
@media all and (max-width: 1000px) {
.aui-dialog2-xlarge.aui-layer {
box-shadow: none;
height: 100vh;
width: 100vw;
top: 0;
}
.aui-dialog2-xlarge .aui-dialog2-content {
height: calc(100vh - 114px);
max-height: none;
}
}
@media all and (max-width: 820px) {
.aui-dialog2-large.aui-layer {
box-shadow: none;
height: 100vh;
width: 100vw;
top: 0;
}
.aui-dialog2-large .aui-dialog2-content {
height: calc(100vh - 114px);
max-height: none;
}
}
@media all and (max-width: 620px) {
.aui-dialog2-medium.aui-layer {
box-shadow: none;
height: 100vh;
width: 100vw;
top: 0;
}
.aui-dialog2-medium .aui-dialog2-content {
height: calc(100vh - 114px);
max-height: none;
}
}
@media all and (max-width: 420px) {
.aui-dialog2-small.aui-layer {
box-shadow: none;
height: 100vh;
width: 100vw;
top: 0;
}
.aui-dialog2-small .aui-dialog2-content {
height: calc(100vh - 114px);
max-height: none;
}
}
@supports (display: flex) {
.aui-dialog2 {
display: flex;
flex-direction: column;
}
.aui-dialog2-content {
flex: 1;
}
.aui-dialog2-header {
align-items: center;
display: flex;
justify-content: space-between;
}
.aui-dialog2-header > .aui-dialog2-header-secondary,
.aui-dialog2-header > .aui-dialog2-header-actions {
display: block;
flex: 1;
}
.aui-dialog2-header-close {
align-items: center;
display: flex;
justify-content: center;
}
}
/*# sourceMappingURL=dialog2.css.map */