ffr-components/es/modal-dialog/style.css

Fiori styled UI components

/*!
 * Fundamental Styles v0.3.0
 * Copyright (c) 2019 SAP SE or an SAP affiliate company.
 * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)
 */
/*!
.fd-overlay
*/.fd-overlay{--fd-overlay-background-color:rgba(74,80,92,0.3);position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;top:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000}.fd-overlay.is-hidden{display:none}.fd-overlay--modal{background-color:var(--fd-overlay-background-color,rgba(74,80,92,.3));height:100vh;width:100vw}.fd-overlay--alert{position:fixed;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin-top:28px}
/*!
.fd-modal
  .fd-modal__header
    .fd-form__title
  .fd-form__body
  .fd-form__footer
*/.fd-modal{--fd-modal-background-color:var(--fd-color-background-2,#fff);--fd-modal-border-color:var(--fd-color-neutral-2,#eeeeef);--fd-modal-padding-x:var(--fd-width-gutter,16px);font-size:14px;line-height:1.42857;color:#32363a;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;max-width:460px}.hcb .fd-modal{color:#fff}.hcw .fd-modal{color:#000}.fd-modal:after,.fd-modal:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-modal__content{font-size:14px;line-height:1.42857;color:#32363a;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;border:0;border-radius:4px;background-color:#fff}.hcb .fd-modal__content{color:#fff;background-color:#fff}.hcw .fd-modal__content{color:#000;background-color:#fff}.fd-modal__content:after,.fd-modal__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-modal__body,.fd-modal__footer,.fd-modal__header{font-size:14px;line-height:1.42857;color:#32363a;font-family:"72",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;border:0;padding:16px}.hcb .fd-modal__body,.hcb .fd-modal__footer,.hcb .fd-modal__header{color:#fff;padding-left:16px;padding-right:16px}.hcw .fd-modal__body,.hcw .fd-modal__footer,.hcw .fd-modal__header{color:#000;padding-left:16px;padding-right:16px}.fd-modal__body:after,.fd-modal__body:before,.fd-modal__footer:after,.fd-modal__footer:before,.fd-modal__header:after,.fd-modal__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-modal__header{position:relative;border-bottom:1px solid #eeeeef}.hcb .fd-modal__header,.hcw .fd-modal__header{border-bottom-color:#eeeeef}.fd-modal__title{text-rendering:optimizeLegibility;margin-top:0;font-size:16px;line-height:1.25;font-weight:400;margin-bottom:0;padding-right:36px}.fd-modal__title[dir=rtl],[dir=rtl] .fd-modal__title{padding-left:36px;padding-right:0}.fd-modal__close{position:absolute;right:8px;top:8px;width:36px;height:36px}.fd-modal__close[dir=rtl],[dir=rtl] .fd-modal__close{left:8px;right:auto}.fd-modal__body{max-height:calc(100vh - 128px);overflow-y:auto}.fd-modal__body>:first-child{margin-top:0}.fd-modal__body>:last-child{margin-bottom:0}.fd-modal__footer{text-align:right;border-top:1px solid #eeeeef}.hcb .fd-modal__footer,.hcw .fd-modal__footer{border-top-color:#eeeeef}.fd-modal__footer[dir=rtl],[dir=rtl] .fd-modal__footer{text-align:left}.quick-frame{z-index:1100;position:absolute;-webkit-transition:all .3s ease-in;transition:all .3s ease-in;-webkit-transform-origin:right bottom;transform-origin:right bottom;width:54px;height:54px;border-radius:50%;box-shadow:0 4px 11px 0 rgba(0,0,0,.15);max-width:none;max-height:none;line-height:54px;font-size:1.5rem;overflow:hidden;right:1rem;bottom:22px}.quick-frame:before{font-size:1.75rem}.quick-frame__static{-webkit-transform-origin:center;transform-origin:center}.quick-frame__static:focus,.quick-frame__static:hover,.scale-Focus{-webkit-transform:scale(1.1);transform:scale(1.1)}.quick-btn__close{-webkit-transition:all .3s ease-in;transition:all .3s ease-in;position:absolute;top:.5rem;right:.5rem;color:#fff;z-index:10}.hcb .quick-btn__close{color:#fff}.hcw .quick-btn__close{color:#000}.to-dialog .quick-btn__close:active,.to-dialog .quick-btn__close:hover{background-color:transparent;border:none;outline:none;box-shadow:none;color:#0a6ed1}.hcb .to-dialog .quick-btn__close:active,.hcb .to-dialog .quick-btn__close:hover{color:#fff}.hcw .to-dialog .quick-btn__close:active,.hcw .to-dialog .quick-btn__close:hover{color:#000}.quick-frame .fd-modal{max-width:100%}.fd-modal__title{white-space:nowrap}.fd-modal__actions{display:-webkit-box;display:flex;-webkit-box-pack:end;justify-content:flex-end}.to-dialog .quick-btn__close{color:#74777a}.hcb .to-dialog .quick-btn__close{color:#fff}.hcw .to-dialog .quick-btn__close{color:#000}.quick-cnt{-webkit-transition:all .3s ease-in;transition:all .3s ease-in;opacity:0;width:100%}.quick-cnt.show-cnt{opacity:1}.quick-btn{-webkit-transition:all .25s ease-in;transition:all .25s ease-in;border:none;position:absolute;right:0;bottom:0;z-index:10}.quick-btn.btn-disappear{-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:transparent;opacity:0;border-radius:1rem}.unmount{display:none}.quick-frame.to-dialog{background-color:#fff;border-radius:1rem;-webkit-transform-origin:center;transform-origin:center}.hcb .quick-frame.to-dialog{background-color:#000}.hcw .quick-frame.to-dialog{background-color:#fff}.quick-frame .fd-modal__header{border:none}@media (max-width:599px){.quick-frame.to-dialog{width:calc(100% - 2rem);margin:0 1rem;right:0;bottom:22px}}@media (min-width:600px) and (max-width:1023px){.quick-frame.to-dialog{background-color:#fff;width:400px}}@media (min-width:1024px) and (max-width:1439px){.quick-frame.to-dialog{background-color:#fff;width:400px}}@media (min-width:1440px){.quick-frame.to-dialog{background-color:#fff;width:400px}}.modal-dialog.fd-modal__header{border-bottom:none}.modal-dialog__hide .fd-modal__header button{display:none}.fd-modal{position:relative;max-width:100%}.modal-demo-bg{width:100%;margin:0 1rem}