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

   1 // Adapted from chrome.com
   2
   3 @import "vars";
   4 @import "mixins";
   5
   6
   7 .g-section:after {
   8   content: ".";
   9   display: block;
  10   height: 0;
  11   clear: both;
  12   visibility: hidden;
  13 }
  14 .g-unit .g-section:after {
  15   clear:none
  16 }
  17 .g-unit .g-section {
  18   width: 100%;
  19   overflow: hidden;
  20 }
  21 .g-section,.g-unit {
  22   zoom: 1;
  23 }
  24 .g-split > .g-unit {
  25   float: right;
  26   text-align: right;
  27 }
  28 .g-split > .g-first {
  29   float: left;
  30   text-align: left;
  31 }
  32
  33 .g-tpl-160 .g-unit,.g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-unit {
  34 display:block;margin:0 0 0 160px;width:auto;float:none
  35 }
  36 .g-tpl-160 .g-first,.g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-160 .g-first {
  37 display:block;margin:0;width:160px;float:left
  38 }
  39 .g-tpl-25-75 .g-unit,.g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit {
  40 width:74.999%;float:right;display:inline;margin:0
  41 }
  42 .g-tpl-25-75 .g-first,.g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-25-75 .g-first {
  43 width:24.999%;float:left;display:inline;margin:0
  44 }
  45 .g-tpl-75-25 .g-unit,.g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit {
  46 width:24.999%;float:right;display:inline;margin:0
  47 }
  48 .g-tpl-75-25 .g-first,.g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-75-25 .g-first {
  49 width:74.999%;float:left;display:inline;margin:0
  50 }
  51 .g-tpl-33-67 .g-unit,.g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit {
  52 width:66.999%;float:right;display:inline;margin:0
  53 }
  54 .g-tpl-33-67 .g-first,.g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-33-67 .g-first {
  55 width:32.999%;float:left;display:inline;margin:0
  56 }
  57 .g-tpl-67-33 .g-unit,.g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit {
  58 width:32.999%;float:right;display:inline;margin:0
  59 }
  60 .g-tpl-67-33 .g-first,.g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-67-33 .g-first {
  61 width:66.999%;float:left;display:inline;margin:0
  62 }
  63 .g-tpl-50-50 .g-unit,.g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit {
  64 width:49.999%;float:right;display:inline;margin:0
  65 }
  66 .g-tpl-50-50 .g-first,.g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-first,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-50-50 .g-first {
  67 width:49.999%;float:left;display:inline;margin:0
  68 }
  69 .g-tpl-nest .g-unit
  70 /*,.g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-nest .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-nest .g-unit {*/ {
  71 float:left;width:auto;display:inline;margin:0 }
  72 .g-tpl-nest-alt .g-unit
  73 /*,.g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit,.g-unit .g-unit .g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit*/ {
  74 float:right;width:auto;display:inline;margin:0 }
  75
  76 .g-content {
  77   margin-right: 30px;
  78 }
  79
  80 .g-last .g-content {
  81   margin-right: 0;
  82 }
  83
  84 // Phone
  85 @media only screen and (max-width: $break-small)  {
  86   .g-unit {
  87     &.g-unit {
  88       float: none !important;
  89     }
  90   }
  91   .g-content {
  92     margin-right: 0;
  93   }
  94 }