adding columns features

2017-01-24 19:56:58 +01:00 · 2017-01-24 19:56:58 +01:00 · 0d1cece6db
commit 0d1cece6db
parent f48f6c57a7
2 changed files with 305 additions and 0 deletions
--- a/kfet/static/kfet/css/index.css
+++ b/kfet/static/kfet/css/index.css
@ -372,3 +372,147 @@ textarea {
 .stat-graph {
    height: 100px;
 }
+
+/*
+ * Responsive Columns
+ */
+
+.column-row {
+    padding: 15px 20px;
+}
+
+.column-xs-1,
+.column-sm-1,
+.column-md-1,
+.column-lg-1,
+.column-xs-2,
+.column-sm-2,
+.column-md-2,
+.column-lg-2,
+.column-xs-3,
+.column-sm-3,
+.column-md-3,
+.column-lg-3,
+.column-xs-4,
+.column-sm-4,
+.column-md-4,
+.column-lg-4,
+.column-xs-5,
+.column-sm-5,
+.column-md-5,
+.column-lg-5 {
+    -webkit-column-count: 1; /* Chrome, Safari, Opera */
+    -moz-column-count: 1; /* Firefox */
+    column-count: 1;
+}
+
+
+.column-xs-1 {
+    -webkit-column-count: 1; /* Chrome, Safari, Opera */
+    -moz-column-count: 1; /* Firefox */
+    column-count: 1;
+}
+.column-xs-2 {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+}
+.column-xs-3 {
+    -webkit-column-count: 3; /* Chrome, Safari, Opera */
+    -moz-column-count: 3; /* Firefox */
+    column-count: 3;
+}
+.column-xs-4 {
+    -webkit-column-count: 4; /* Chrome, Safari, Opera */
+    -moz-column-count: 4; /* Firefox */
+    column-count: 4;
+}
+.column-xs-5 {
+    -webkit-column-count: 5; /* Chrome, Safari, Opera */
+    -moz-column-count: 5; /* Firefox */
+    column-count: 5;
+}
+
+@media (min-width: 576px) {
+    .column-sm-1 {
+        -webkit-column-count: 1; /* Chrome, Safari, Opera */
+        -moz-column-count: 1; /* Firefox */
+        column-count: 1;
+    }
+    .column-sm-2 {
+        -webkit-column-count: 2; /* Chrome, Safari, Opera */
+        -moz-column-count: 2; /* Firefox */
+        column-count: 2;
+    }
+    .column-sm-3 {
+        -webkit-column-count: 3; /* Chrome, Safari, Opera */
+        -moz-column-count: 3; /* Firefox */
+        column-count: 3;
+    }
+    .column-sm-4 {
+        -webkit-column-count: 4; /* Chrome, Safari, Opera */
+        -moz-column-count: 4; /* Firefox */
+        column-count: 4;
+    }
+    .column-sm-5 {
+        -webkit-column-count: 5; /* Chrome, Safari, Opera */
+        -moz-column-count: 5; /* Firefox */
+        column-count: 5;
+    }
+}
+
+@media (min-width: 768px) {
+    .column-md-1 {
+        -webkit-column-count: 1; /* Chrome, Safari, Opera */
+        -moz-column-count: 1; /* Firefox */
+        column-count: 1;
+    }
+    .column-md-2 {
+        -webkit-column-count: 2; /* Chrome, Safari, Opera */
+        -moz-column-count: 2; /* Firefox */
+        column-count: 2;
+    }
+    .column-md-3 {
+        -webkit-column-count: 3; /* Chrome, Safari, Opera */
+        -moz-column-count: 3; /* Firefox */
+        column-count: 3;
+    }
+    .column-md-4 {
+        -webkit-column-count: 4; /* Chrome, Safari, Opera */
+        -moz-column-count: 4; /* Firefox */
+        column-count: 4;
+    }
+    .column-md-5 {
+        -webkit-column-count: 5; /* Chrome, Safari, Opera */
+        -moz-column-count: 5; /* Firefox */
+        column-count: 5;
+    }
+}
+
+@media (min-width: 992px) {
+    .column-lg-1 {
+        -webkit-column-count: 1; /* Chrome, Safari, Opera */
+        -moz-column-count: 1; /* Firefox */
+        column-count: 1;
+    }
+    .column-lg-2 {
+        -webkit-column-count: 2; /* Chrome, Safari, Opera */
+        -moz-column-count: 2; /* Firefox */
+        column-count: 2;
+    }
+    .column-lg-3 {
+        -webkit-column-count: 3; /* Chrome, Safari, Opera */
+        -moz-column-count: 3; /* Firefox */
+        column-count: 3;
+    }
+    .column-lg-4 {
+        -webkit-column-count: 4; /* Chrome, Safari, Opera */
+        -moz-column-count: 4; /* Firefox */
+        column-count: 4;
+    }
+    .column-lg-5 {
+        -webkit-column-count: 5; /* Chrome, Safari, Opera */
+        -moz-column-count: 5; /* Firefox */
+        column-count: 5;
+    }
+}