primo commit

components/com_tabulizer/assets/css/responsive/responsive-reflow.css

@@ -0,0 +1,84 @@
+/**
+Developed by Dimitrios Mourloukos (http://www.tabulizer.com) based on an idea presented by Simon Elvery at http://elvery.net/
+*/
+
+@media only screen and (max-width: 40em),(max-device-width: 640px) {
+    /* Force table to not be like tables anymore */
+    .responsive-reflow table,
+    .responsive-reflow thead,
+    .responsive-reflow tbody,
+    .responsive-reflow th,
+    .responsive-reflow td,
+    .responsive-reflow tr {
+    	display: block;
+    }
+	
+	.responsive-reflow { width: auto; }
+	     
+    /* Hide table headers (but not display: none;, for accessibility) */
+    .responsive-reflow thead tr {
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+    }
+     
+    .responsive-reflow tr { border: 1px solid #ccc; }
+     
+    .responsive-reflow td {
+		/* Behave like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee;
+		position: relative;
+		padding-left: 0.3em;
+		white-space: normal;
+		text-align:left;
+		width: 100%;
+    }
+          
+    /* Label the data */
+    .responsive-reflow td:before { 		
+		content: attr(data-title); 
+		
+		display: inline-block;
+	    margin: -0.3em 1em -0.3em -0.3em;
+    	min-width: 45%;
+	    padding: 0.3em;
+			
+		font-weight: bold; 
+		text-align: left;								
+		text-shadow: 0 1px 0 #FFFFFF;
+	}
+}
+
+/*
+@media only screen and (max-width: 40em),(max-device-width: 640px) {
+    .responsive-reflow thead tr {
+        position: relative;
+        top: -10px;
+        left: 0px;
+    }
+
+    .responsive-reflow thead tr td.sorting_disabled {
+        display: none;
+    }
+
+    .responsive-reflow thead tr td {
+        display: inline-block;
+        text-align: left;
+    }
+
+    .responsive-reflow thead tr td::before {
+        display: inline;
+        text-align: left;
+        min-width: 10%;
+    }
+
+    .responsive-reflow tbody tr td {
+        text-align: left;
+    }
+
+    .responsive-reflow tbody tr td:before {
+        text-align: left;
+    }
+}
+*/