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 body {
  17   overflow: auto;
  18 }
  19
  20 img {
  21   max-width: 100%;
  22 }
  23
  24 .gc-container {
  25   max-width: $site-max-width;
  26   @include content-container-layout();
  27 }
  28
  29 #gc-pagecontent {
  30   > .g-section {
  31     margin: $main-content-top-margin 0;
  32   }
  33 }
  34
  35 main {
  36   margin-bottom: 50px;
  37   position: relative;
  38 }
  39
  40 footer[role="contentinfo"] {
  41   padding: 40px 0 50px;
  42 }
  43
  44 // Phone
  45 @media only screen and (max-width: $break-small)  {
  46   .gc-container {
  47     width: auto;
  48   }
  49   #gc-pagecontent {
  50     @include content-container-layout();
  51
  52     > .g-section {
  53       margin: $main-content-top-margin / 2 0;
  54     }
  55   }
  56   footer[role="contentinfo"]  {
  57     padding: $main-content-top-margin / 2 $main-content-top-margin - 10;
  58   }
  59 }
  60
  61 // Tablet
  62 @media only screen and (min-width: $break-small + 1) and (max-width: $break-large) {
  63   .gc-container {
  64     width: 95%;
  65   }
  66 }
  67
  68 @media only screen and (min-width: $break-large)  {
  69
  70 }