node.module.css

/**
 * @file
 * Styles for administration pages.
 */

/**
 * Node add/edit form layout
 */

/* Narrow screens */
.layout-region {
  box-sizing: border-box;
}

/* Wide screens */
@media screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
  .layout-region-node-main,
  .layout-region-node-footer {
    float: left; /* LTR */
    box-sizing: border-box;
    width: 65%;
    padding-right: 2em; /* LTR */
  }

  [dir="rtl"] .layout-region-node-main,
  [dir="rtl"] .layout-region-node-footer {
    float: right;
    padding-right: 0;
    padding-left: 2em;
  }

  .layout-region-node-secondary {
    float: right; /* LTR */
    width: 35%;
  }

  [dir="rtl"] .layout-region-node-secondary {
    float: left;
  }

  /* @todo File an issue to add a standard class to all text-like inputs */
  .layout-region-node-secondary .form-autocomplete,
  .layout-region-node-secondary .form-text,
  .layout-region-node-secondary .form-tel,
  .layout-region-node-secondary .form-email,
  .layout-region-node-secondary .form-url,
  .layout-region-node-secondary .form-search,
  .layout-region-node-secondary .form-number,
  .layout-region-node-secondary .form-color,
  .layout-region-node-secondary textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

/**
 * The vertical toolbar mode gets triggered for narrow screens, which throws off
 * the intent of media queries written for the viewport width. When the vertical
 * toolbar is on, we need to suppress layout for the original media width + the
 * toolbar width (240px). In this case, 240px + 780px.
 */
@media screen and (max-width: 1020px) {
  .toolbar-vertical.toolbar-tray-open .layout-region-node-main,
  .toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
  .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
    float: none;
    width: auto;
    padding-right: 0;
  }
}