[Summary view] [Print] [Text view]

   1  /* Styling for mustache templates */
   2  
   3  // TODO: MDL-55142 remove browser these brwoser hacks:
   4  /* stylelint-disable declaration-block-no-duplicate-properties, no-browser-hacks */
   5  // RTL styles for column templates.
   6  #grid {
   7      // A mixin to set styles for the fluid row when RTL language enabled.
   8      .fluid-rtl(@fluidGridColumnWidth, @fluidGridGutterWidth) {
   9          .dir-rtl {
  10              .row-fluid.rtl-compatible {
  11                  [class*="span"] {
  12                      float: right;
  13                      margin-left: 0;
  14                      *margin-left: 0;
  15                      margin-right: @fluidGridGutterWidth;
  16                      *margin-right: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
  17                  }
  18                  [class*="span"]:first-child {
  19                      margin-right: 0;
  20                  }
  21              }
  22          }
  23      }
  24  }
  25  /* stylelint-enable */
  26  
  27  
  28  // Style for template 3 columns auto.
  29  .columns-autoflow-1to1to1 {
  30      .content-columns(3);
  31  }
  32  
  33  @media (max-width: 767px) {
  34      // Change to a single column for smaller screens.
  35      .columns-autoflow-1to1to1 {
  36          .content-columns(1, 0);
  37      }
  38  }
  39  
  40  @media (min-width: 768px) and (max-width: 979px) {
  41      // Include fluid-rtl mixin from grid namespace.
  42      #grid > .fluid-rtl(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
  43  }
  44  
  45  @media (min-width: 980px) and (max-width: 1199px) {
  46      // Include fluid-rtl mixin from grid namespace.
  47      #grid > .fluid-rtl(@fluidGridColumnWidth, @fluidGridGutterWidth);
  48  }
  49  
  50  @media (min-width: 1200px) {
  51      // Include fluid-rtl mixin from grid namespace.
  52      #grid > .fluid-rtl(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
  53  }