modules/promotion/css/promotion.form.css
/**
 * @file
 * Styles for the promotion add/edit form.
 *
 * Copied from node-module.css
 */

/* 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-promotion-main,
  .layout-region-promotion-footer {
    float: left; /* LTR */
    width: 65%;
    padding-right: 2em; /* LTR */
    box-sizing: border-box;
  }

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

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

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

/**
 * 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-promotion-main,
  .toolbar-vertical.toolbar-tray-open .layout-region-promotion-footer,
  .toolbar-vertical.toolbar-tray-open .layout-region-promotion-secondary {
    float: none;
    width: auto;
    padding-right: 0;
  }
}
