panikweb/static/css/_grid.scss

   1 form.quixote div.grid {
   2         float: left;
   3         box-sizing: border-box;
   4         padding-right: 1em;
   5         clear: none;
   6 }
   7
   8 @each $i in 1, 2, 3, 4, 6, 12 {
   9         @for $j from 1 through $i {
  10                 div.cell.grid-#{$j}-#{$i},
  11                 div.dataview div.grid-#{$j}-#{$i},
  12                 form.quixote div.grid-#{$j}-#{$i} {
  13                         clear: none;
  14                         &.newline {
  15                                 clear: both;
  16                         }
  17                 }
  18                 div.grid-#{$j}-#{$i} {
  19                         float: left;
  20                         box-sizing: border-box;
  21                         padding-right: 1em;
  22                         width: (100*$j/$i+0%);
  23                         @media screen and (max-width: $mobile-limit) {
  24                                 @if $i == 4 and $j <= 2 { width: 50%; }
  25                                 @else if $i == 4 and $j >  2 { width: 100%; }
  26                                 @else if $i == 6 and $j <= 2 { width: (100/3+0%); }
  27                                 @else if $i == 6 and $j == 3 { width: 50%; }
  28                                 @else if $i == 6 and $j <= 5 { width: (200/3+0%); }
  29                                 @else if $i == 6 and $j == 6 { width: 100%; }
  30                                 @else if $i == 12 and $j <= 4 { width: (100/3+0%); }
  31                                 @else if $i == 12 and $j <= 7 { width: 50%; }
  32                                 @else if $i == 12 and $j <= 11 { width: (200/3+0%); }
  33                                 @else if $i == 12 and $j == 12 { width: 100%; }
  34                         }
  35                         @media screen and (max-width: $very-small-limit) {
  36                                 width: 100%;
  37                         }
  38                         textarea, select, input[type=text], input[type=password], input[type=email] {
  39                                 width: 100%;
  40                         }
  41                 }
  42                 form div.grid-#{$j}-#{$i} + h3,
  43                 form div.grid-#{$j}-#{$i} + h4,
  44                 form div.grid-#{$j}-#{$i} + p,
  45                 form div.grid-#{$j}-#{$i} + div {
  46                         clear: both;
  47                 }
  48         }
  49 }
  50
  51 form div[class*=grid-] span.select2-selection,
  52 form div[class*=grid-] div.select2-container {
  53         width: 100% !important;
  54 }