UNPKG

@atlassian/aui

Version:

Atlassian User Interface Framework

269 lines (267 loc) 5.92 kB
.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 */