layout.css

Same filename in this branch
  1. 9.x drupal/core/themes/bartik/css/layout.css
  2. 9.x drupal/core/themes/stark/css/layout.css
/* ---------- Basic Layout Styles ----------- */

html,
body,
#page  {
  height: 100%;
}
#page-wrapper {
  min-height: 100%;
}
#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
#header div.section {
  position: relative;
}
.region-header {
  float: right; /* LTR */
  margin: .5em 5px .75em;
  border: 1px solid #ccc;
}
#secondary-menu {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#main-wrapper {
  min-height: 300px;
}
#content .section,
.sidebar .section {
  padding: 0 15px;
}
.breadcrumb {
  margin: 0 15px;
}
#footer-wrapper {
  padding: 35px 0 30px;
}
#footer-wrapper .section {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px 0;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
}

@media all and (min-width: 560px) and (max-width: 850px) {

  #sidebar-first,
  .region-triptych-first,
  .region-triptych-middle,
  .region-triptych-last,
  .region-footer-firstcolumn,
  .region-footer-secondcolumn,
  .region-footer-thirdcolumn,
  .region-footer-fourthcolumn {
    display: inline;
    float: left; /* LTR */
    position: relative;
  }
  .one-sidebar #sidebar {
    width: 100%;
  }
  #sidebar-first,
  #sidebar-second {
    width: 50%;
  }
  #sidebar-second {
    margin-left: 50%;
  }
  .region-triptych-first,
  .region-triptych-middle,
  .region-triptych-last {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 15px 30px;
    width: 33%;
  }
  .region-triptych-middle {
    padding: 20px 5px 30px;
  }
  .region-footer-firstcolumn,
  .region-footer-secondcolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    width: 50%;
  }
  .region-footer-thirdcolumn,
  .region-footer-fourthcolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    width: 50%;
  }
  .region-footer-thirdcolumn {
    clear: both;
  }
}

@media all and (min-width: 851px) {

  #header div.section,
  #featured div.section,
  #messages div.section,
  #main,
  #triptych,
  #footer-columns,
  #footer {
    max-width: 1290px;
  }
  #content,
  #sidebar-first,
  #sidebar-second,
  .region-triptych-first,
  .region-triptych-middle,
  .region-triptych-last,
  .region-footer-firstcolumn,
  .region-footer-secondcolumn,
  .region-footer-thirdcolumn,
  .region-footer-fourthcolumn {
    display: inline;
    float: left; /* LTR */
    position: relative;
  }
  .two-sidebars #content {
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
  }
  .one-sidebar #content {
    width: 75%;
  }
  .sidebar-first #content {
    margin-left: 25%;
    margin-right: 0;
  }
  .sidebar-second #content {
    margin-right: 25%;
    margin-left: 0;
  }
  #sidebar-first {
    width: 25%;
    margin-left: -100%;
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%;
    clear: none;
  }
  .region-triptych-first,
  .region-triptych-middle,
  .region-triptych-last {
    width: 33%;
  }
  .region-footer-firstcolumn,
  .region-footer-secondcolumn,
  .region-footer-thirdcolumn,
  .region-footer-fourthcolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    width: 25%;
  }
}

File

drupal/core/themes/bartik/css/layout.css
View source
  1. 

  2. /* ---------- Basic Layout Styles ----------- */

  3. 

  4. html,

  5. body,

  6. #page  {

  7.   height: 100%;

  8. }

  9. #page-wrapper {

  10.   min-height: 100%;

  11. }

  12. #header div.section,

  13. #featured div.section,

  14. #messages div.section,

  15. #main,

  16. #triptych,

  17. #footer-columns,

  18. #footer {

  19.   width: 100%;

  20.   max-width: 860px;

  21.   margin-left: auto;

  22.   margin-right: auto;

  23. }

  24. #header div.section {

  25.   position: relative;

  26. }

  27. .region-header {

  28.   float: right; /* LTR */

  29.   margin: .5em 5px .75em;

  30.   border: 1px solid #ccc;

  31. }

  32. #secondary-menu {

  33.   width: 100%;

  34.   margin: 0 auto;

  35.   overflow: hidden;

  36. }

  37. #main-wrapper {

  38.   min-height: 300px;

  39. }

  40. #content .section,

  41. .sidebar .section {

  42.   padding: 0 15px;

  43. }

  44. .breadcrumb {

  45.   margin: 0 15px;

  46. }

  47. #footer-wrapper {

  48.   padding: 35px 0 30px;

  49. }

  50. #footer-wrapper .section {

  51.   -moz-box-sizing: border-box;

  52.   -webkit-box-sizing: border-box;

  53.   box-sizing: border-box;

  54.   padding: 0 15px;

  55. }

  56. .region-triptych-first,

  57. .region-triptych-middle,

  58. .region-triptych-last {

  59.   -moz-box-sizing: border-box;

  60.   -webkit-box-sizing: border-box;

  61.   box-sizing: border-box;

  62.   padding: 0 20px 0;

  63. }

  64. .region-footer-firstcolumn,

  65. .region-footer-secondcolumn,

  66. .region-footer-thirdcolumn,

  67. .region-footer-fourthcolumn {

  68.   -moz-box-sizing: border-box;

  69.   -webkit-box-sizing: border-box;

  70.   box-sizing: border-box;

  71.   padding: 0 10px;

  72. }

  73. 

  74. @media all and (min-width: 560px) and (max-width: 850px) {

  75. 

  76.   #sidebar-first,

  77.   .region-triptych-first,

  78.   .region-triptych-middle,

  79.   .region-triptych-last,

  80.   .region-footer-firstcolumn,

  81.   .region-footer-secondcolumn,

  82.   .region-footer-thirdcolumn,

  83.   .region-footer-fourthcolumn {

  84.     display: inline;

  85.     float: left; /* LTR */

  86.     position: relative;

  87.   }

  88.   .one-sidebar #sidebar {

  89.     width: 100%;

  90.   }

  91.   #sidebar-first,

  92.   #sidebar-second {

  93.     width: 50%;

  94.   }

  95.   #sidebar-second {

  96.     margin-left: 50%;

  97.   }

  98.   .region-triptych-first,

  99.   .region-triptych-middle,

  100.   .region-triptych-last {

  101.     -moz-box-sizing: border-box;

  102.     -webkit-box-sizing: border-box;

  103.     box-sizing: border-box;

  104.     padding: 20px 15px 30px;

  105.     width: 33%;

  106.   }

  107.   .region-triptych-middle {

  108.     padding: 20px 5px 30px;

  109.   }

  110.   .region-footer-firstcolumn,

  111.   .region-footer-secondcolumn {

  112.     -moz-box-sizing: border-box;

  113.     -webkit-box-sizing: border-box;

  114.     box-sizing: border-box;

  115.     padding: 0 10px;

  116.     width: 50%;

  117.   }

  118.   .region-footer-thirdcolumn,

  119.   .region-footer-fourthcolumn {

  120.     -moz-box-sizing: border-box;

  121.     -webkit-box-sizing: border-box;

  122.     box-sizing: border-box;

  123.     padding: 0 10px;

  124.     width: 50%;

  125.   }

  126.   .region-footer-thirdcolumn {

  127.     clear: both;

  128.   }

  129. }

  130. 

  131. @media all and (min-width: 851px) {

  132. 

  133.   #header div.section,

  134.   #featured div.section,

  135.   #messages div.section,

  136.   #main,

  137.   #triptych,

  138.   #footer-columns,

  139.   #footer {

  140.     max-width: 1290px;

  141.   }

  142.   #content,

  143.   #sidebar-first,

  144.   #sidebar-second,

  145.   .region-triptych-first,

  146.   .region-triptych-middle,

  147.   .region-triptych-last,

  148.   .region-footer-firstcolumn,

  149.   .region-footer-secondcolumn,

  150.   .region-footer-thirdcolumn,

  151.   .region-footer-fourthcolumn {

  152.     display: inline;

  153.     float: left; /* LTR */

  154.     position: relative;

  155.   }

  156.   .two-sidebars #content {

  157.     margin-left: 25%;

  158.     margin-right: 25%;

  159.     width: 50%;

  160.   }

  161.   .one-sidebar #content {

  162.     width: 75%;

  163.   }

  164.   .sidebar-first #content {

  165.     margin-left: 25%;

  166.     margin-right: 0;

  167.   }

  168.   .sidebar-second #content {

  169.     margin-right: 25%;

  170.     margin-left: 0;

  171.   }

  172.   #sidebar-first {

  173.     width: 25%;

  174.     margin-left: -100%;

  175.   }

  176.   #sidebar-second {

  177.     width: 25%;

  178.     margin-left: -25%;

  179.     clear: none;

  180.   }

  181.   .region-triptych-first,

  182.   .region-triptych-middle,

  183.   .region-triptych-last {

  184.     width: 33%;

  185.   }

  186.   .region-footer-firstcolumn,

  187.   .region-footer-secondcolumn,

  188.   .region-footer-thirdcolumn,

  189.   .region-footer-fourthcolumn {

  190.     -moz-box-sizing: border-box;

  191.     -webkit-box-sizing: border-box;

  192.     box-sizing: border-box;

  193.     padding: 0 10px;

  194.     width: 25%;

  195.   }

  196. }