system-admin--layout.css

Replacement 'Reusable layout' component styles of system/admin library.

File

core/themes/claro/css/layout/system-admin--layout.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Replacement 'Reusable layout' component styles of system/admin library.

  11.  */

  12. 

  13. .layout-container {

  14.   margin-right: 1em;

  15.   margin-left: 1em;

  16. }

  17. 

  18. .layout-container::after {

  19.   display: table;

  20.   clear: both;

  21.   content: "";

  22. }

  23. 

  24. @media screen and (min-width: 38em) {

  25.   .toolbar-tray-open:not(.toolbar-vertical) .layout-container,

  26.   body:not(.toolbar-tray-open) .layout-container {

  27.     margin-right: 3em;

  28.     margin-left: 3em;

  29.   }

  30.   .toolbar-tray-open:not(.toolbar-vertical) .layout-row,

  31.   body:not(.toolbar-tray-open) .layout-row {

  32.     margin-right: -1.5em;

  33.     margin-left: -1.5em;

  34.   }

  35.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column,

  36.   body:not(.toolbar-tray-open) .layout-column {

  37.     float: left; /* LTR */

  38.     box-sizing: border-box;

  39.     padding-right: 1.5em;

  40.     padding-left: 1.5em;

  41.   }

  42.   [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,

  43.   [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {

  44.     float: right;

  45.   }

  46.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,

  47.   body:not(.toolbar-tray-open) .layout-column--half {

  48.     width: 50%;

  49.   }

  50.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,

  51.   body:not(.toolbar-tray-open) .layout-column--quarter {

  52.     width: 25%;

  53.   }

  54.   .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,

  55.   body:not(.toolbar-tray-open) .layout-column--three-quarter {

  56.     width: 75%;

  57.   }

  58. }

  59. 

  60. @media screen and (min-width: 60em) {

  61.   .layout-container {

  62.     margin-right: 3em;

  63.     margin-left: 3em;

  64.   }

  65.   .layout-row {

  66.     margin-right: -1.5em;

  67.     margin-left: -1.5em;

  68.   }

  69.   .layout-column {

  70.     float: left; /* LTR */

  71.     box-sizing: border-box;

  72.     padding-right: 1.5em;

  73.     padding-left: 1.5em;

  74.   }

  75.   [dir="rtl"] .layout-column {

  76.     float: right;

  77.   }

  78.   .layout-column--half {

  79.     width: 50%;

  80.   }

  81.   .layout-column--quarter {

  82.     width: 25%;

  83.   }

  84.   .layout-column--three-quarter {

  85.     width: 75%;

  86.   }

  87. }