chrome/common/extensions/docs/static/sass/_layout.scss

   1 @mixin content-container-layout {
   2   margin: auto;
   3   width: 90%;
   4 }
   5
   6 //-----------------------------------------------------------------------
   7 // Layout
   8 //-----------------------------------------------------------------------
   9
  10 * {
  11   padding: 0;
  12   margin: 0;
  13   @include box-sizing(border-box);
  14 }
  15
  16 html, body {
  17   overflow-x: hidden; // Allows .span-full to take up entire viewport without overflowing.
  18   overflow-y: auto;
  19 }
  20
  21 img {
  22   max-width: 100%;
  23 }
  24
  25 #gc-container {
  26   max-width: $site-max-width;
  27   @include content-container-layout();
  28 }
  29
  30 #gc-pagecontent {
  31   > .g-section {
  32     margin: $main-content-top-margin 0;
  33   }
  34 }
  35
  36 main {
  37   margin-bottom: 50px;
  38   position: relative;
  39 }
  40
  41 footer[role="contentinfo"] {
  42   padding: 40px 0 50px;
  43 }
  44
  45 // Phone
  46 @media only screen and (max-width: $break-small)  {
  47   #gc-container {
  48     width: auto;
  49   }
  50   #gc-pagecontent {
  51     @include content-container-layout();
  52
  53     > .g-section {
  54       margin: $main-content-top-margin / 2 0;
  55     }
  56   }
  57   footer[role="contentinfo"]  {
  58     padding: $main-content-top-margin / 2 $main-content-top-margin - 10;
  59   }
  60 }
  61
  62 // Tablet
  63 @media only screen and (min-width: $break-small + 1) and (max-width: $break-large) {
  64   #gc-container {
  65     width: 95%;
  66   }
  67 }
  68
  69 @media only screen and (min-width: $break-large)  {
  70
  71 }