Chris@0: /**
Chris@0:  * @file
Chris@0:  * Styles for administration pages.
Chris@0:  */
Chris@0: 
Chris@0: /**
Chris@0:  * Node add/edit form layout
Chris@0:  */
Chris@0: 
Chris@0: /* Narrow screens */
Chris@0: .layout-region {
Chris@14:   box-sizing: border-box;
Chris@0: }
Chris@0: 
Chris@0: /* Wide screens */
Chris@0: @media
Chris@0:   screen and (min-width: 780px),
Chris@0:   (orientation: landscape) and (min-device-height: 780px) {
Chris@0: 
Chris@0:   .layout-region-node-main,
Chris@0:   .layout-region-node-footer {
Chris@0:     float: left; /* LTR */
Chris@18:     box-sizing: border-box;
Chris@0:     width: 65%;
Chris@0:     padding-right: 2em; /* LTR */
Chris@0:   }
Chris@0: 
Chris@0:   [dir="rtl"] .layout-region-node-main,
Chris@0:   [dir="rtl"] .layout-region-node-footer {
Chris@0:     float: right;
Chris@18:     padding-right: 0;
Chris@0:     padding-left: 2em;
Chris@0:   }
Chris@0: 
Chris@0:   .layout-region-node-secondary {
Chris@0:     float: right; /* LTR */
Chris@0:     width: 35%;
Chris@0:   }
Chris@0: 
Chris@0:   [dir="rtl"] .layout-region-node-secondary {
Chris@0:     float: left;
Chris@0:   }
Chris@0: 
Chris@0:   /* @todo File an issue to add a standard class to all text-like inputs */
Chris@0:   .layout-region-node-secondary .form-autocomplete,
Chris@0:   .layout-region-node-secondary .form-text,
Chris@0:   .layout-region-node-secondary .form-tel,
Chris@0:   .layout-region-node-secondary .form-email,
Chris@0:   .layout-region-node-secondary .form-url,
Chris@0:   .layout-region-node-secondary .form-search,
Chris@0:   .layout-region-node-secondary .form-number,
Chris@0:   .layout-region-node-secondary .form-color,
Chris@0:   .layout-region-node-secondary textarea {
Chris@14:     box-sizing: border-box;
Chris@0:     width: 100%;
Chris@0:     max-width: 100%;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * The vertical toolbar mode gets triggered for narrow screens, which throws off
Chris@0:  * the intent of media queries written for the viewport width. When the vertical
Chris@0:  * toolbar is on, we need to suppress layout for the original media width + the
Chris@0:  * toolbar width (240px). In this case, 240px + 780px.
Chris@0:  */
Chris@0: @media
Chris@0:   screen and (max-width: 1020px) {
Chris@0: 
Chris@0:   .toolbar-vertical.toolbar-tray-open .layout-region-node-main,
Chris@0:   .toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
Chris@0:   .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
Chris@0:     float: none;
Chris@0:     width: auto;
Chris@0:     padding-right: 0;
Chris@0:   }
Chris@0: }