CC-5749 : Datatables ColVis CSS upgrade

This commit is contained in:
Naomi 2014-04-21 12:08:41 -04:00
parent 913d496a61
commit 52ab95bf77
5 changed files with 35 additions and 168 deletions

View File

@ -1,14 +0,0 @@
/*
* Namespace DTCR - "DataTables ColReorder" plug-in
*/
table.DTCR_clonedTable {
background-color: white;
z-index: 998;
}
div.DTCR_pointer {
width: 1px;
background-color: #5B5B5B;
z-index: 997;
}

View File

@ -1,75 +0,0 @@
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* ColVis styles
*/
.ColVis {
float: right;
margin-bottom: 1em;
}
.ColVis_Button {
position: relative;
float: left;
margin-right: 3px;
padding: 3px 5px;
height: 30px;
background-color: #fff;
border: 1px solid #d0d0d0;
cursor: pointer;
}
button.ColVis_Button::-moz-focus-inner {
border: none !important;
padding: 0;
}
.ColVis_text_hover {
border: 1px solid #999;
background-color: #f0f0f0;
}
div.ColVis_collectionBackground {
background-color: black;
z-index: 1003;
}
div.ColVis_collection {
position: relative;
width: 130px;
background-color: #999;
padding: 3px;
border: 1px solid #ccc;
z-index: 1005;
}
div.ColVis_collection button.ColVis_Button {
background-color: white;
width: 100%;
float: none;
margin-bottom: 2px;
}
div.ColVis_catcher {
position: absolute;
z-index: 1004;
}
.disabled {
color: #999;
}
button.ColVis_Button {
text-align: left;
}
div.ColVis_collection button.ColVis_Button:hover {
border: 1px solid #999;
background-color: #f0f0f0;
}
span.ColVis_radio {
display: inline-block;
width: 20px;
}

View File

@ -7,44 +7,9 @@ div.ColVis {
margin-bottom: 1em;
}
button.ColVis_Button,
ul.ColVis_collection li {
position: relative;
float: left;
margin-right: 3px;
padding: 5px 8px;
border: 1px solid #999;
cursor: pointer;
*cursor: hand;
font-size: 0.88em;
color: black !important;
white-space: nowrap;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 3px #ccc;
-moz-box-shadow: 1px 1px 3px #ccc;
-ms-box-shadow: 1px 1px 3px #ccc;
-o-box-shadow: 1px 1px 3px #ccc;
box-shadow: 1px 1px 3px #ccc;
/* Generated by http://www.colorzilla.com/gradient-editor/ */
background: #ffffff; /* Old browsers */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}
.ColVis_Button:hover,
ul.ColVis_collection li:hover {
border: 1px solid #666;
border: 1px solid white;
text-decoration: none !important;
-webkit-box-shadow: 1px 1px 3px #999;
@ -53,13 +18,9 @@ ul.ColVis_collection li:hover {
-o-box-shadow: 1px 1px 3px #999;
box-shadow: 1px 1px 3px #999;
background: #f3f3f3; /* Old browsers */
background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* IE10+ */
background: -o-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Opera 11.10+ */
background: linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
background-color: #3C3C3C;
background: -moz-linear-gradient(top, #7E7E7E 0, #5A5A5A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7E7E7E), color-stop(100%, #5A5A5A));
}
button.ColVis_Button {
@ -89,12 +50,10 @@ div.ColVis_collectionBackground {
ul.ColVis_collection {
width: 150px;
padding: 8px 8px 4px 8px;
padding: 8px 9px 4px 7px;
margin: 0;
border: 1px solid #ccc;
border: 1px solid rgba( 0, 0, 0, 0.4 );
background-color: #f3f3f3;
background-color: rgba( 255, 255, 255, 0.3 );
background-color: #999;
overflow: hidden;
z-index: 2002;
@ -122,17 +81,26 @@ ul.ColVis_collection li {
float: none;
margin-bottom: 4px;
-webkit-box-shadow: 1px 1px 3px #999;
-moz-box-shadow: 1px 1px 3px #999;
-ms-box-shadow: 1px 1px 3px #999;
-o-box-shadow: 1px 1px 3px #999;
box-shadow: 1px 1px 3px #999;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
background-color: #6e6e6e;
background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e));
border: 1px solid #d0d0d0;
}
ul.ColVis_collection li {
text-align: left;
}
ul.ColVis_collection li label {
color: #fff;
}
ul.ColVis_collection li.ColVis_Button:hover {
border: 1px solid #999;
background-color: #f0f0f0;

View File

@ -3,31 +3,19 @@ in this file.
The following function has been modified:
_fnDomBaseButton
_fnConstruct
The new _fnDomBaseButton looks like this:
this.dom.button has been changed like this:
"_fnDomBaseButton": function ( text )
{
var
that = this,
nButton = document.createElement('button'),
nSpan = document.createElement('span'),
sEvent = this.s.activate=="mouseover" ? "mouseover" : "click";
//nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
//"ColVis_Button TableTools_Button ui-button ui-state-default";
nButton.className = "btn-toolbar btn btn-small dropdown-toggle ColVis_MasterButton";
nButton.appendChild( nSpan );
$(nButton).append("<span class='caret'></span>");
nSpan.innerHTML = text;
$(nButton).bind( 'click', function (e) {
that._fnCollectionShow();
e.preventDefault();
} );
return nButton;
},
this.dom.button = $( '<button />', {
'class': !this.s.dt.bJUI ?
"ColVis_Button ColVis_MasterButton" :
"btn-toolbar btn btn-small dropdown-toggle ColVis_MasterButton"
} )
.append( '<span>'+this.s.buttonText+'</span><span class="caret"></span>' )
.bind( this.s.activate=="mouseover" ? "mouseover" : "click", function (e) {
e.preventDefault();
that._fnCollectionShow();
} )
.appendTo( this.dom.wrapper )[0];

View File

@ -253,9 +253,9 @@ ColVis.prototype = {
this.dom.button = $( '<button />', {
'class': !this.s.dt.bJUI ?
"ColVis_Button ColVis_MasterButton" :
"ColVis_Button ColVis_MasterButton ui-button ui-state-default"
"btn-toolbar btn btn-small dropdown-toggle ColVis_MasterButton"
} )
.append( '<span>'+this.s.buttonText+'</span>' )
.append( '<span>'+this.s.buttonText+'</span><span class="caret"></span>' )
.bind( this.s.activate=="mouseover" ? "mouseover" : "click", function (e) {
e.preventDefault();
that._fnCollectionShow();