layout.css

Same filename in this branch
  1. 8.x drupal/core/themes/bartik/css/layout.css
  2. 8.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;
  }
  #sidebar-first,
  #sidebar-second {
    width: 50%;
  }
  #sidebar-second {
    margin-left: 50%; /* LTR */
  }
  .one-sidebar #sidebar-first,
  .one-sidebar #sidebar-second {
    width: 100%;
  }
  .one-sidebar #sidebar-second {
    margin-left: 0; /* LTR */
  }
  .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%;
  }
  .no-sidebars #content {
    width: 100%;
  }
  .sidebar-first #content {
    margin-left: 25%; /* LTR */
    margin-right: 0; /* LTR */
  }
  .sidebar-second #content {
    margin-right: 25%; /* LTR */
    margin-left: 0; /* LTR */
  }
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    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.   #sidebar-first,

  89.   #sidebar-second {

  90.     width: 50%;

  91.   }

  92.   #sidebar-second {

  93.     margin-left: 50%; /* LTR */

  94.   }

  95.   .one-sidebar #sidebar-first,

  96.   .one-sidebar #sidebar-second {

  97.     width: 100%;

  98.   }

  99.   .one-sidebar #sidebar-second {

  100.     margin-left: 0; /* LTR */

  101.   }

  102.   .region-triptych-first,

  103.   .region-triptych-middle,

  104.   .region-triptych-last {

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

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

  107.     box-sizing: border-box;

  108.     padding: 20px 15px 30px;

  109.     width: 33%;

  110.   }

  111.   .region-triptych-middle {

  112.     padding: 20px 5px 30px;

  113.   }

  114.   .region-footer-firstcolumn,

  115.   .region-footer-secondcolumn {

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

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

  118.     box-sizing: border-box;

  119.     padding: 0 10px;

  120.     width: 50%;

  121.   }

  122.   .region-footer-thirdcolumn,

  123.   .region-footer-fourthcolumn {

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

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

  126.     box-sizing: border-box;

  127.     padding: 0 10px;

  128.     width: 50%;

  129.   }

  130.   .region-footer-thirdcolumn {

  131.     clear: both;

  132.   }

  133. }

  134. 

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

  136. 

  137.   #header div.section,

  138.   #featured div.section,

  139.   #messages div.section,

  140.   #main,

  141.   #triptych,

  142.   #footer-columns,

  143.   #footer {

  144.     max-width: 1290px;

  145.   }

  146.   #content,

  147.   #sidebar-first,

  148.   #sidebar-second,

  149.   .region-triptych-first,

  150.   .region-triptych-middle,

  151.   .region-triptych-last,

  152.   .region-footer-firstcolumn,

  153.   .region-footer-secondcolumn,

  154.   .region-footer-thirdcolumn,

  155.   .region-footer-fourthcolumn {

  156.     display: inline;

  157.     float: left; /* LTR */

  158.     position: relative;

  159.   }

  160.   .two-sidebars #content {

  161.     margin-left: 25%;

  162.     margin-right: 25%;

  163.     width: 50%;

  164.   }

  165.   .one-sidebar #content {

  166.     width: 75%;

  167.   }

  168.   .no-sidebars #content {

  169.     width: 100%;

  170.   }

  171.   .sidebar-first #content {

  172.     margin-left: 25%; /* LTR */

  173.     margin-right: 0; /* LTR */

  174.   }

  175.   .sidebar-second #content {

  176.     margin-right: 25%; /* LTR */

  177.     margin-left: 0; /* LTR */

  178.   }

  179.   #sidebar-first {

  180.     width: 25%;

  181.     margin-left: -100%; /* LTR */

  182.   }

  183.   #sidebar-second {

  184.     width: 25%;

  185.     margin-left: -25%; /* LTR */

  186.     clear: none;

  187.   }

  188.   .region-triptych-first,

  189.   .region-triptych-middle,

  190.   .region-triptych-last {

  191.     width: 33%;

  192.   }

  193.   .region-footer-firstcolumn,

  194.   .region-footer-secondcolumn,

  195.   .region-footer-thirdcolumn,

  196.   .region-footer-fourthcolumn {

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

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

  199.     box-sizing: border-box;

  200.     padding: 0 10px;

  201.     width: 25%;

  202.   }

  203. }