You are here

Home » API reference » Entity Reference with Layout 8

erl_layouts.css in Entity Reference with Layout 8 

.l__region {
  width: 100%;
}
.l__region + .l__region {
  margin-top: 1.5rem;
}
@media (min-width: 48em) {
  .l__region + .l__region {
    margin-top: 3rem;
} }
@media (min-width: 64em) {
  .l__region + .l__region {
    margin-top: 0;
} }
@media (min-width: 64em) {
  .l__main {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}
  .l__main .l__region {
    align-items: center;
    flex-direction: column;
}
  .column-priority-right .l__main {
    flex-direction: row-reverse;
}
  .l--layout-onecolumn .l__region {
    width: 100%;
}
  .l--layout-twocolumn-halves .l__main > .l__primary,
  .l--layout-twocolumn-halves .l__main > .l__secondary {
    width: 50%;
}
  .l--layout-twocolumn-onethird-twothirds .l__main > .l__primary {
    width: 33.33333%;
}
  .l--layout-twocolumn-onethird-twothirds .l__main > .l__secondary {
    width: 66.66667%;
}
  .l--layout-twocolumn-twothirds-onethird .l__main > .l__primary {
    width: 66.66667%;
}
  .l--layout-twocolumn-twothirds-onethird .l__main > .l__secondary {
    width: 33.33333%;
}
  .l--layout-threecolumn-thirds .l__main > .l__primary,
  .l--layout-threecolumn-thirds .l__main > .l__secondary,
  .l--layout-threecolumn-thirds .l__main > .l__tertiary {
    width: 33.33333%;
}
  .l--layout-threecolumn-half-quarter-quarter .l__main > .l__primary {
    width: 50%;
}
  .l--layout-threecolumn-half-quarter-quarter .l__main > .l__secondary,
  .l--layout-threecolumn-half-quarter-quarter .l__main > .l__tertiary {
    width: 25%;
}
  .l--layout-threecolumn-quarter-half-quarter .l__main > .l__secondary {
    width: 50%;
}
  .l--layout-threecolumn-quarter-half-quarter .l__main > .l__primary,
  .l--layout-threecolumn-quarter-half-quarter .l__main > .l__tertiary {
    width: 25%;
}
  .l--layout-threecolumn-quarter-quarter-half .l__main > .l__tertiary {
    width: 50%;
}
  .l--layout-threecolumn-quarter-quarter-half .l__main > .l__primary,
  .l--layout-threecolumn-quarter-quarter-half .l__main > .l__secondary {
    width: 25%;
} }

File

modules/erl_layouts/css/erl_layouts.css
View source 
  1. .l__region {

  2.   width: 100%;

  3. }

  4. .l__region + .l__region {

  5.   margin-top: 1.5rem;

  6. }

  7. @media (min-width: 48em) {

  8.   .l__region + .l__region {

  9.     margin-top: 3rem;

  10. } }

  11. @media (min-width: 64em) {

  12.   .l__region + .l__region {

  13.     margin-top: 0;

  14. } }

  15. @media (min-width: 64em) {

  16.   .l__main {

  17.     align-items: stretch;

  18.     display: flex;

  19.     flex-wrap: nowrap;

  20.     justify-content: space-between;

  21.     width: 100%;

  22. }

  23.   .l__main .l__region {

  24.     align-items: center;

  25.     flex-direction: column;

  26. }

  27.   .column-priority-right .l__main {

  28.     flex-direction: row-reverse;

  29. }

  30.   .l--layout-onecolumn .l__region {

  31.     width: 100%;

  32. }

  33.   .l--layout-twocolumn-halves .l__main > .l__primary,

  34.   .l--layout-twocolumn-halves .l__main > .l__secondary {

  35.     width: 50%;

  36. }

  37.   .l--layout-twocolumn-onethird-twothirds .l__main > .l__primary {

  38.     width: 33.33333%;

  39. }

  40.   .l--layout-twocolumn-onethird-twothirds .l__main > .l__secondary {

  41.     width: 66.66667%;

  42. }

  43.   .l--layout-twocolumn-twothirds-onethird .l__main > .l__primary {

  44.     width: 66.66667%;

  45. }

  46.   .l--layout-twocolumn-twothirds-onethird .l__main > .l__secondary {

  47.     width: 33.33333%;

  48. }

  49.   .l--layout-threecolumn-thirds .l__main > .l__primary,

  50.   .l--layout-threecolumn-thirds .l__main > .l__secondary,

  51.   .l--layout-threecolumn-thirds .l__main > .l__tertiary {

  52.     width: 33.33333%;

  53. }

  54.   .l--layout-threecolumn-half-quarter-quarter .l__main > .l__primary {

  55.     width: 50%;

  56. }

  57.   .l--layout-threecolumn-half-quarter-quarter .l__main > .l__secondary,

  58.   .l--layout-threecolumn-half-quarter-quarter .l__main > .l__tertiary {

  59.     width: 25%;

  60. }

  61.   .l--layout-threecolumn-quarter-half-quarter .l__main > .l__secondary {

  62.     width: 50%;

  63. }

  64.   .l--layout-threecolumn-quarter-half-quarter .l__main > .l__primary,

  65.   .l--layout-threecolumn-quarter-half-quarter .l__main > .l__tertiary {

  66.     width: 25%;

  67. }

  68.   .l--layout-threecolumn-quarter-quarter-half .l__main > .l__tertiary {

  69.     width: 50%;

  70. }

  71.   .l--layout-threecolumn-quarter-quarter-half .l__main > .l__primary,

  72.   .l--layout-threecolumn-quarter-quarter-half .l__main > .l__secondary {

  73.     width: 25%;

  74. } }