163 lines
3.9 KiB
CSS
163 lines
3.9 KiB
CSS
/**
|
|
Copyright (c) 2012 Marco Pegoraro, http://movableapp.com/
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining
|
|
a copy of this software and associated documentation files (the
|
|
"Software"), to deal in the Software without restriction, including
|
|
without limitation the rights to use, copy, modify, merge, publish,
|
|
distribute, sublicense, and/or sell copies of the Software, and to
|
|
permit persons to whom the Software is furnished to do so, subject to
|
|
the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be
|
|
included in all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
|
|
|
|
WHERE TO FIND MEDIA TABLE:
|
|
https://github.com/thepeg/MediaTable
|
|
http://consulenza-web.com/jquery/MediaTable/
|
|
http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/
|
|
|
|
**/
|
|
|
|
/**
|
|
* Structural Style
|
|
*/
|
|
.mediaTable {
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
}
|
|
|
|
.mediaTableWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.mediaTableWrapperWithMenu {
|
|
padding-top:3em;
|
|
}
|
|
|
|
.mediaTableMenuClosed ul {
|
|
display:none;
|
|
}
|
|
|
|
/**
|
|
* Active Media Table Rules
|
|
* these rules are applied to a table activated by the jQuery plugin.
|
|
*/
|
|
|
|
.activeMediaTable th, .activeMediaTable td {
|
|
display: none;
|
|
}
|
|
|
|
.activeMediaTable th.persist, .activeMediaTable td.persist {
|
|
display: table-cell;
|
|
_display:block; /* IE6 Hack */
|
|
}
|
|
|
|
/* IE7 Hack */
|
|
*+html .activeMediaTable th.persist, *+html .activeMediaTable td.persist { display:block }
|
|
|
|
.activeMediaTable th.essential, .activeMediaTable td.essential {
|
|
display: table-cell;
|
|
_display:block; /* IE6 Hack */
|
|
}
|
|
|
|
/* IE7 Hack */
|
|
*+html .activeMediaTable th.essential, *+html .activeMediaTable td.essential { display:block }
|
|
|
|
|
|
/* Break points */
|
|
|
|
@media screen and (min-width: 768px) {
|
|
|
|
.activeMediaTable th.optional, .activeMediaTable td.optional {
|
|
display: table-cell;
|
|
_display:block; /* IE6 Hack */
|
|
}
|
|
|
|
/* IE7 Hack */
|
|
*+html .activeMediaTable th.optional, *+html .activeMediaTable td.optional { display:block }
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
|
|
.activeMediaTable th, .activeMediaTable td {
|
|
display: table-cell;
|
|
_display:block; /* IE6 Hack */
|
|
}
|
|
|
|
/* IE7 Hack */
|
|
*+html .activeMediaTable th, *+html .activeMediaTable td { display:block }
|
|
|
|
}
|
|
|
|
.activeMediaTable th.invisible_column, .activeMediaTable td.invisible_column {
|
|
display: none;
|
|
}
|
|
|
|
/* IE7 Hack */
|
|
*+html .activeMediaTable th.invisible_column, *+html .activeMediaTable td.invisible_column { display:none }
|
|
|
|
/**
|
|
* Menu Style
|
|
*/
|
|
|
|
.mediaTableMenu {
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
|
|
background: #fff;
|
|
border:1px solid #aaa;
|
|
border-radius:5px;
|
|
overflow:hidden;
|
|
box-shadow:2px 2px 4px #ddd;
|
|
z-index:100;
|
|
}
|
|
|
|
.mediaTableMenu a {
|
|
display: block;
|
|
background: #ddd;
|
|
padding:0.5em;
|
|
cursor:pointer;
|
|
|
|
-webkit-border-top-right-radius: 5px;
|
|
-webkit-border-top-left-radius: 5px;
|
|
-moz-border-radius-topright: 5px;
|
|
-moz-border-radius-topleft: 5px;
|
|
border-top-right-radius: 5px;
|
|
border-top-left-radius: 5px;
|
|
}
|
|
|
|
.mediaTableMenu ul {
|
|
list-style-position:outside;
|
|
list-style:none;
|
|
margin:0;
|
|
padding:0 0.5em;
|
|
}
|
|
|
|
.mediaTableMenuClosed a {
|
|
border-radius:5px;
|
|
}
|
|
|
|
.mediaTableMenu ul li {
|
|
line-height: 2em;
|
|
}
|
|
|
|
.mediaTableMenu ul li label {
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* bring header selection to left, when screen is small */
|
|
@media only screen and (max-width: 1024px) {
|
|
.mediaTableMenu { right: auto; }
|
|
} |