move static & templates to panikweb project directory

[panikweb.git] / panikweb / static / css / _grid.scss

diff --git a/panikweb/static/css/_grid.scss b/panikweb/static/css/_grid.scss
new file mode 100644 (file)
index 0000000..ce2f0de
--- /dev/null
+++ b/panikweb/static/css/_grid.scss
@@ -0,0 +1,54 @@
+form.quixote div.grid {
+       float: left;
+       box-sizing: border-box;
+       padding-right: 1em;
+       clear: none;
+}
+
+@each $i in 1, 2, 3, 4, 6, 12 {
+       @for $j from 1 through $i {
+               div.cell.grid-#{$j}-#{$i},
+               div.dataview div.grid-#{$j}-#{$i},
+               form.quixote div.grid-#{$j}-#{$i} {
+                       clear: none;
+                       &.newline {
+                               clear: both;
+                       }
+               }
+               div.grid-#{$j}-#{$i} {
+                       float: left;
+                       box-sizing: border-box;
+                       padding-right: 1em;
+                       width: (100*$j/$i+0%);
+                       @media screen and (max-width: $mobile-limit) {
+                               @if $i == 4 and $j <= 2 { width: 50%; }
+                               @else if $i == 4 and $j >  2 { width: 100%; }
+                               @else if $i == 6 and $j <= 2 { width: (100/3+0%); }
+                               @else if $i == 6 and $j == 3 { width: 50%; }
+                               @else if $i == 6 and $j <= 5 { width: (200/3+0%); }
+                               @else if $i == 6 and $j == 6 { width: 100%; }
+                               @else if $i == 12 and $j <= 4 { width: (100/3+0%); }
+                               @else if $i == 12 and $j <= 7 { width: 50%; }
+                               @else if $i == 12 and $j <= 11 { width: (200/3+0%); }
+                               @else if $i == 12 and $j == 12 { width: 100%; }
+                       }
+                       @media screen and (max-width: $very-small-limit) {
+                               width: 100%;
+                       }
+                       textarea, select, input[type=text], input[type=password], input[type=email] {
+                               width: 100%;
+                       }
+               }
+               form div.grid-#{$j}-#{$i} + h3,
+               form div.grid-#{$j}-#{$i} + h4,
+               form div.grid-#{$j}-#{$i} + p,
+               form div.grid-#{$j}-#{$i} + div {
+                       clear: both;
+               }
+       }
+}
+
+form div[class*=grid-] span.select2-selection,
+form div[class*=grid-] div.select2-container {
+       width: 100% !important;
+}