primo commit
This commit is contained in:
		| @ -0,0 +1,53 @@ | ||||
| /** | ||||
| Based on an idea by Scott Jehl  | ||||
| **/ | ||||
|  | ||||
| @media screen and (max-width: 47em){  | ||||
|   html:not(.responsive-tap) .responsive-tap th,  | ||||
|   html:not(.responsive-tap) .responsive-tap td { | ||||
|     font-size: 0; | ||||
|     padding: 0; | ||||
|     content: ""; | ||||
|     height: 7px; | ||||
|   } | ||||
|   html:not(.responsive-tap) table { | ||||
|     position: relative;  | ||||
|     overflow: hidden; | ||||
|   } | ||||
|   html:not(.responsive-tap) table.responsive-tap:before { | ||||
|     content: attr(data-view-label); | ||||
|     position: absolute; | ||||
|     width: 100%; | ||||
|     height: 100%; | ||||
|     background: rgba(0,0,0,.6); | ||||
|     color: #fff; | ||||
|     font-weight: bold; | ||||
|     font-size: 1.6em; | ||||
|     text-align: center; | ||||
|     vertical-align: middle; | ||||
|     z-index: 100; | ||||
|     font-family: Helvetica, sans-serif;  | ||||
|   } | ||||
|   html.responsive-tap table:before { | ||||
|     content: ""; | ||||
|     display: block; | ||||
|     background: #333; | ||||
|     padding: 10px; | ||||
|   }   | ||||
|   html.responsive-tap table:before{ | ||||
|     content: attr(data-close-label); | ||||
|     position: absolute; | ||||
|     top: 0; | ||||
|     left: 15px; | ||||
|     padding: .5em 1em; | ||||
|     margin: 10px 0; | ||||
|     font-weight: bold; | ||||
|     color: #fff; | ||||
|     background: #000; | ||||
|     border: 1px solid #fff; | ||||
|   } | ||||
|    /* around here we could use the HTML class to hide all other content on the page aside from the table */ | ||||
|   html.responsive-tap p, html.responsive-tap h1 { | ||||
|     display: none;  | ||||
|   } | ||||
| } | ||||
		Reference in New Issue
	
	Block a user