node.module.css

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

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

/* Narrow screens */
.layout-region {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  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 */
    width: 65%;
    padding-right: 2em;
  }

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

  /* @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 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    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),
  (orientation: landscape) and (max-device-height: 1020px) {

  .toolbar-vertical .layout-region-node-main,
  .toolbar-vertical .layout-region-node-footer,
  .toolbar-vertical .layout-region-node-secondary {
    float: none;
    width: auto;
    padding-right: 0;
  }
}