From: Frédéric Péters <fpeters@0d.be>
Date: Sun, 15 Oct 2017 09:18:05 +0000 (+0200)
Subject: style: import css grid system
X-Git-Url: https://git.0d.be/?p=panikweb.git;a=commitdiff_plain;h=2b14276ac4502a16c42ec7d7a78fa39d59a7fa8e

style: import css grid system
---

diff --git a/panikweb_templates/static/css/_grid.scss b/panikweb_templates/static/css/_grid.scss
new file mode 100644
index 0000000..ce2f0de
--- /dev/null
+++ b/panikweb_templates/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;
+}
diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index a15dc8d..3227e11 100644
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -1228,6 +1228,7 @@ ul.newsSpecial{
 	text-decoration: underline;
 }
 
+#fiber-content .episode a,
 #fiber-content ul.list a {
 	text-decoration: none;
 }
diff --git a/panikweb_templates/static/css/style.scss b/panikweb_templates/static/css/style.scss
index 39501ca..f2b88f4 100644
--- a/panikweb_templates/static/css/style.scss
+++ b/panikweb_templates/static/css/style.scss
@@ -1,8 +1,12 @@
 $size_m: 1000px;
 $size_s: 450px;
 
+$very-small-limit: 400px;
+$mobile-limit: 760px;
+
 @import 'data_uris';
 @import 'reset';
 @import 'type';
 @import 'general';
+@import 'grid';
 @import 'specifics';