Chris@14: /**
Chris@14:  * @file
Chris@14:  * CSS for off-canvas dialog.
Chris@14:  */
Chris@14: 
Chris@14: /* Position the off-canvas dialog container outside the right of the viewport. */
Chris@14: .ui-dialog-off-canvas {
Chris@18:   overflow: visible;
Chris@14:   box-sizing: border-box;
Chris@14:   height: 100%;
Chris@14: }
Chris@14: 
Chris@14: /* Wrap the form that's inside the off-canvas dialog. */
Chris@14: .ui-dialog-off-canvas .ui-dialog-content {
Chris@14:   /* Prevent horizontal scrollbar. */
Chris@14:   overflow-x: hidden;
Chris@14:   overflow-y: auto;
Chris@18:   padding: 0 20px;
Chris@14: }
Chris@14: [dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
Chris@14:   text-align: right;
Chris@14: }
Chris@14: 
Chris@14: /* Position the off-canvas dialog container outside the right of the viewport. */
Chris@14: .ui-dialog-off-canvas {
Chris@18:   overflow: visible;
Chris@14:   box-sizing: border-box;
Chris@14:   height: 100%;
Chris@14: }
Chris@14: 
Chris@14: /* Wrap the form that's inside the off-canvas dialog. */
Chris@14: .ui-dialog-off-canvas #drupal-off-canvas {
Chris@14:   /* Prevent horizontal scrollbar. */
Chris@14:   overflow-x: hidden;
Chris@14:   overflow-y: auto;
Chris@18:   padding: 0 20px 20px;
Chris@14: }
Chris@14: [dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
Chris@14:   text-align: right;
Chris@14: }
Chris@14: 
Chris@14: /*
Chris@14:  * Force the off-canvas dialog to be 100% width at the same breakpoint the
Chris@14:  * dialog system uses to expand dialog widths.
Chris@14:  */
Chris@14: @media all and (max-width: 48em) { /* 768px */
Chris@14:   .ui-dialog.ui-dialog-off-canvas {
Chris@14:     width: 100% !important;
Chris@14:   }
Chris@14:   /* When off-canvas dialog is at 100% width stop the body from scrolling */
Chris@14:   .js-off-canvas-dialog-open {
Chris@18:     overflow-y: hidden;
Chris@14:     height: 100%;
Chris@14:   }
Chris@14: }