You are here

Home » API reference » Entity Translation Unified Form 8

etuf-side-by-side-seven.css in Entity Translation Unified Form 8 

@media screen and (min-width: 992px) {
  body.etuf-sbs .layout-region-node-main,
  body.etuf-sbs .layout-region-node-footer {
    width: 80%;
  }
  /* For separators between side-by-side fields, to prevent alignment problems */
  .etuf-sbs-none {
    float: left;
    display: inline-block;
    width: 99%;
  }
  body.etuf-sbs section[id*="wrapper--2--etuftabsection"],
  body.etuf-sbs form.node-form div.layout-region__content > div.form-item[class*="-etuf-"] {
    float: right;
    width: 49%;
  }
  body.etuf-sbs details.claro-details {
    float: left;
    display: inline-block;
    width: 99%;
  }
  body.etuf-sbs #edit-revision-information div.etuf-sbs-none {
    float: unset;
    display: unset;
    width: unset;
  }
  body.etuf-sbs.path-node .layout-region-node-main > details.form-wrapper,
  body.etuf-sbs.path-node .layout-region-node-footer > details.form-wrapper {
    display: inline-block;
    width: 100%;
  }

  body.etuf-sbs.path-node .layout-region-node-main > details.form-wrapper div.js-form-item.form-item,
  body.etuf-sbs.path-node .layout-region-node-footer > details.form-wrapper div.js-form-item.form-item,
  body.etuf-sbs.path-node .layout-region-node-main > fieldset.form-wrapper div.fieldset-wrapper > div.js-form-item.form-item,
  body.etuf-sbs.path-node .layout-region-node-footer > fieldset.form-wrapper div.fieldset-wrapper > div.js-form-item.form-item,
  body.etuf-sbs.path-node .layout-region-node-main > div.js-form-item.form-item,
  body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item {
    float: left;
    width: 49%;
    margin-right: 5px;
  }

  body.etuf-sbs.path-node .layout-region-node-main > div.js-form-item.form-item:nth-child(even),
  body.etuf-sbs.path-node .layout-region-node-main > fieldset.js-form-item.form-item:nth-child(even),
  body.etuf-sbs.path-node .layout-region-node-footer > fieldset.js-form-item.form-item:nth-child(even),
  body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item:nth-child(even) {
    float: left;
    width: 49%;
    margin-left: 5px;
  }

  body.etuf-sbs.path-node .layout-region-node-main > div.js-form-item.form-item.form-type--textarea {
    width: 100%;
  }

  body.etuf-sbs .layout-region-node-secondary {
    width: 20%;
  }

  body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item.form-item--moderation-state-0-state,
  body.etuf-sbs.path-node .layout-region-node-footer transitionset {
    float: none;
    width: auto;
    margin-right: 0;
  }

  body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item.form-item--moderation-state-etuf-fr-0-state,
  body.etuf-sbs.path-node .layout-region-node-footer transitionset:nth-child(even) {
    float: none;
    width: auto;
    margin-left: 0;
  }

}

File

css/etuf-side-by-side-seven.css
View source 
  1. @media screen and (min-width: 992px) {

  2.   body.etuf-sbs .layout-region-node-main,

  3.   body.etuf-sbs .layout-region-node-footer {

  4.     width: 80%;

  5.   }

  6.   /* For separators between side-by-side fields, to prevent alignment problems */

  7.   .etuf-sbs-none {

  8.     float: left;

  9.     display: inline-block;

  10.     width: 99%;

  11.   }

  12.   body.etuf-sbs section[id*="wrapper--2--etuftabsection"],

  13.   body.etuf-sbs form.node-form div.layout-region__content > div.form-item[class*="-etuf-"] {

  14.     float: right;

  15.     width: 49%;

  16.   }

  17.   body.etuf-sbs details.claro-details {

  18.     float: left;

  19.     display: inline-block;

  20.     width: 99%;

  21.   }

  22.   body.etuf-sbs #edit-revision-information div.etuf-sbs-none {

  23.     float: unset;

  24.     display: unset;

  25.     width: unset;

  26.   }

  27.   body.etuf-sbs.path-node .layout-region-node-main > details.form-wrapper,

  28.   body.etuf-sbs.path-node .layout-region-node-footer > details.form-wrapper {

  29.     display: inline-block;

  30.     width: 100%;

  31.   }

  32. 

  33.   body.etuf-sbs.path-node .layout-region-node-main > details.form-wrapper div.js-form-item.form-item,

  34.   body.etuf-sbs.path-node .layout-region-node-footer > details.form-wrapper div.js-form-item.form-item,

  35.   body.etuf-sbs.path-node .layout-region-node-main > fieldset.form-wrapper div.fieldset-wrapper > div.js-form-item.form-item,

  36.   body.etuf-sbs.path-node .layout-region-node-footer > fieldset.form-wrapper div.fieldset-wrapper > div.js-form-item.form-item,

  37.   body.etuf-sbs.path-node .layout-region-node-main > div.js-form-item.form-item,

  38.   body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item {

  39.     float: left;

  40.     width: 49%;

  41.     margin-right: 5px;

  42.   }

  43. 

  44.   body.etuf-sbs.path-node .layout-region-node-main > div.js-form-item.form-item:nth-child(even),

  45.   body.etuf-sbs.path-node .layout-region-node-main > fieldset.js-form-item.form-item:nth-child(even),

  46.   body.etuf-sbs.path-node .layout-region-node-footer > fieldset.js-form-item.form-item:nth-child(even),

  47.   body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item:nth-child(even) {

  48.     float: left;

  49.     width: 49%;

  50.     margin-left: 5px;

  51.   }

  52. 

  53.   body.etuf-sbs.path-node .layout-region-node-main > div.js-form-item.form-item.form-type--textarea {

  54.     width: 100%;

  55.   }

  56. 

  57.   body.etuf-sbs .layout-region-node-secondary {

  58.     width: 20%;

  59.   }

  60. 

  61.   body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item.form-item--moderation-state-0-state,

  62.   body.etuf-sbs.path-node .layout-region-node-footer transitionset {

  63.     float: none;

  64.     width: auto;

  65.     margin-right: 0;

  66.   }

  67. 

  68.   body.etuf-sbs.path-node .layout-region-node-footer > div.js-form-item.form-item.form-item--moderation-state-etuf-fr-0-state,

  69.   body.etuf-sbs.path-node .layout-region-node-footer transitionset:nth-child(even) {

  70.     float: none;

  71.     width: auto;

  72.     margin-left: 0;

  73.   }

  74. 

  75. }