system-admin--layout.pcss.css 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /**
  2. * @file
  3. * Replacement 'Reusable layout' component styles of system/admin library.
  4. */
  5. .layout-container {
  6. margin-right: 1em;
  7. margin-left: 1em;
  8. }
  9. .layout-container::after {
  10. display: table;
  11. clear: both;
  12. content: "";
  13. }
  14. @media screen and (min-width: 38em) {
  15. .toolbar-tray-open:not(.toolbar-vertical) .layout-container,
  16. body:not(.toolbar-tray-open) .layout-container {
  17. margin-right: 3em;
  18. margin-left: 3em;
  19. }
  20. .toolbar-tray-open:not(.toolbar-vertical) .layout-row,
  21. body:not(.toolbar-tray-open) .layout-row {
  22. margin-right: -1.5em;
  23. margin-left: -1.5em;
  24. }
  25. .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
  26. body:not(.toolbar-tray-open) .layout-column {
  27. float: left; /* LTR */
  28. box-sizing: border-box;
  29. padding-right: 1.5em;
  30. padding-left: 1.5em;
  31. }
  32. [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
  33. [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {
  34. float: right;
  35. }
  36. .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,
  37. body:not(.toolbar-tray-open) .layout-column--half {
  38. width: 50%;
  39. }
  40. .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,
  41. body:not(.toolbar-tray-open) .layout-column--quarter {
  42. width: 25%;
  43. }
  44. .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,
  45. body:not(.toolbar-tray-open) .layout-column--three-quarter {
  46. width: 75%;
  47. }
  48. }
  49. @media screen and (min-width: 60em) {
  50. .layout-container {
  51. margin-right: 3em;
  52. margin-left: 3em;
  53. }
  54. .layout-row {
  55. margin-right: -1.5em;
  56. margin-left: -1.5em;
  57. }
  58. .layout-column {
  59. float: left; /* LTR */
  60. box-sizing: border-box;
  61. padding-right: 1.5em;
  62. padding-left: 1.5em;
  63. }
  64. [dir="rtl"] .layout-column {
  65. float: right;
  66. }
  67. .layout-column--half {
  68. width: 50%;
  69. }
  70. .layout-column--quarter {
  71. width: 25%;
  72. }
  73. .layout-column--three-quarter {
  74. width: 75%;
  75. }
  76. }