diff --git a/admin/css/ie7.css b/admin/css/ie7.css
index 50616dd3e..3ea206c45 100644
--- a/admin/css/ie7.css
+++ b/admin/css/ie7.css
@@ -8,6 +8,7 @@
.cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; }
.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; }
+.cms .ss-ui-button.ss-gridfield-button-filter { background: #55a4d2 url(../../images/icons/filter-icons.png) no-repeat -14px 4px; }
.cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
@@ -72,6 +73,8 @@ html { overflow: hidden; }
.pagination-page-number { position: relative; bottom: 10px; right: 10px; }
.pagination-page-number input { width: 45px; padding: 0px; position: relative; bottom: 2px; }
+input.ss-gridfield-sort { padding-top: 0 !important; padding-bottom: 0 !important; }
+
table.ss-gridfield-table tr.title th h2 { float: left; }
table.ss-gridfield-table tr.ss-gridfield-item.odd { background: white; }
diff --git a/admin/css/ie8.css b/admin/css/ie8.css
index 9c4a820bc..3c8e9fca5 100644
--- a/admin/css/ie8.css
+++ b/admin/css/ie8.css
@@ -8,6 +8,7 @@
.cms .ss-ui-button.ui-state-hover { background-color: #f3f3f3; }
.cms .ss-ui-button.ss-ui-action-constructive { background-color: #1f9433; }
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { background-color: #23a93a; }
+.cms .ss-ui-button.ss-gridfield-button-filter { background: #55a4d2 url(../../images/icons/filter-icons.png) no-repeat -14px 4px; }
.cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
diff --git a/admin/css/screen.css b/admin/css/screen.css
index 7aff9ad6d..21c9574e3 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -29,21 +29,9 @@ If more variables exist in the future, consider creating a variables file.*/
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
/** ----------------------------- Custom mixins ------------------------------ */
-/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
-/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
-/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
-/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
-/**----------------------------------------------------
-Clearfix mixin clears the float of it's parent element
-----------------------------------------------------**/
-/**
- Mixin creates a transparent button with a dropdown arrow,
- as is used for files in the files up-load area. The arrows
- themselves are added in the _style file
-**/
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
-.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sf90be001ed.png') no-repeat; }
+.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-widget-content .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-widget-content .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-widget-content .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-widget-content .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-widget-content .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-widget-content .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-widget-content .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-widget-content .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-widget-content .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-widget-content .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-widget-content .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-widget-content .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-widget-content .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-widget-content .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-widget-content .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross, .ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled, .ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sd3ddece98a.png') no-repeat; }
.ui-state-default .btn-icon-accept, .ui-widget-content .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled, .ui-widget-content .btn-icon-accept_disabled { background-position: 0 -16px; }
@@ -65,30 +53,31 @@ Clearfix mixin clears the float of it's parent element
.ui-state-default .btn-icon-chain, .ui-widget-content .btn-icon-chain { background-position: 0 -272px; }
.ui-state-default .btn-icon-cross-circle, .ui-widget-content .btn-icon-cross-circle { background-position: 0 -288px; }
.ui-state-default .btn-icon-cross-circle_disabled, .ui-widget-content .btn-icon-cross-circle_disabled { background-position: 0 -304px; }
-.ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -320px; }
-.ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -336px; }
-.ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -352px; }
-.ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv { background-position: 0 -368px; }
-.ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -384px; }
-.ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled { background-position: 0 -400px; }
-.ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -416px; }
-.ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -432px; }
-.ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -448px; }
-.ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled { background-position: 0 -464px; }
-.ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -480px; }
-.ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -496px; }
-.ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -512px; }
-.ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -528px; }
-.ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -544px; }
-.ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -560px; }
-.ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -576px; }
-.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -592px; }
-.ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -608px; }
-.ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -624px; }
-.ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -640px; }
-.ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -656px; }
-.ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish { background-position: 0 -672px; }
-.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -688px; }
+.ui-state-default .btn-icon-cross, .ui-widget-content .btn-icon-cross { background-position: 0 -320px; }
+.ui-state-default .btn-icon-decline, .ui-widget-content .btn-icon-decline { background-position: 0 -335px; }
+.ui-state-default .btn-icon-decline_disabled, .ui-widget-content .btn-icon-decline_disabled { background-position: 0 -351px; }
+.ui-state-default .btn-icon-document--pencil, .ui-widget-content .btn-icon-document--pencil { background-position: 0 -367px; }
+.ui-state-default .btn-icon-download-csv, .ui-widget-content .btn-icon-download-csv { background-position: 0 -383px; }
+.ui-state-default .btn-icon-drive-upload, .ui-widget-content .btn-icon-drive-upload { background-position: 0 -399px; }
+.ui-state-default .btn-icon-drive-upload_disabled, .ui-widget-content .btn-icon-drive-upload_disabled { background-position: 0 -415px; }
+.ui-state-default .btn-icon-grid_print, .ui-widget-content .btn-icon-grid_print { background-position: 0 -431px; }
+.ui-state-default .btn-icon-magnifier, .ui-widget-content .btn-icon-magnifier { background-position: 0 -447px; }
+.ui-state-default .btn-icon-minus-circle, .ui-widget-content .btn-icon-minus-circle { background-position: 0 -463px; }
+.ui-state-default .btn-icon-minus-circle_disabled, .ui-widget-content .btn-icon-minus-circle_disabled { background-position: 0 -479px; }
+.ui-state-default .btn-icon-navigation, .ui-widget-content .btn-icon-navigation { background-position: 0 -495px; }
+.ui-state-default .btn-icon-navigation_disabled, .ui-widget-content .btn-icon-navigation_disabled { background-position: 0 -511px; }
+.ui-state-default .btn-icon-network-cloud, .ui-widget-content .btn-icon-network-cloud { background-position: 0 -527px; }
+.ui-state-default .btn-icon-network-cloud_disabled, .ui-widget-content .btn-icon-network-cloud_disabled { background-position: 0 -543px; }
+.ui-state-default .btn-icon-pencil, .ui-widget-content .btn-icon-pencil { background-position: 0 -559px; }
+.ui-state-default .btn-icon-pencil_disabled, .ui-widget-content .btn-icon-pencil_disabled { background-position: 0 -575px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-widget-content .btn-icon-plug-disconnect-prohibition { background-position: 0 -591px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-widget-content .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -607px; }
+.ui-state-default .btn-icon-preview, .ui-widget-content .btn-icon-preview { background-position: 0 -623px; }
+.ui-state-default .btn-icon-preview_disabled, .ui-widget-content .btn-icon-preview_disabled { background-position: 0 -639px; }
+.ui-state-default .btn-icon-settings, .ui-widget-content .btn-icon-settings { background-position: 0 -655px; }
+.ui-state-default .btn-icon-settings_disabled, .ui-widget-content .btn-icon-settings_disabled { background-position: 0 -671px; }
+.ui-state-default .btn-icon-unpublish, .ui-widget-content .btn-icon-unpublish { background-position: 0 -687px; }
+.ui-state-default .btn-icon-unpublish_disabled, .ui-widget-content .btn-icon-unpublish_disabled { background-position: 0 -703px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
diff --git a/admin/images/btn-icon-sd3ddece98a.png b/admin/images/btn-icon-sd3ddece98a.png
new file mode 100644
index 000000000..81cbc5601
Binary files /dev/null and b/admin/images/btn-icon-sd3ddece98a.png differ
diff --git a/admin/images/btn-icon-sf90be001ed.png b/admin/images/btn-icon-sf90be001ed.png
deleted file mode 100644
index adb91f745..000000000
Binary files a/admin/images/btn-icon-sf90be001ed.png and /dev/null differ
diff --git a/admin/images/btn-icon/cross.png b/admin/images/btn-icon/cross.png
new file mode 100644
index 000000000..6a91965c7
Binary files /dev/null and b/admin/images/btn-icon/cross.png differ
diff --git a/admin/scss/_ieShared.scss b/admin/scss/_ieShared.scss
index 79e7ebb1f..b3e7054c1 100644
--- a/admin/scss/_ieShared.scss
+++ b/admin/scss/_ieShared.scss
@@ -2,14 +2,18 @@
.cms .ss-ui-button {
background-color: $color-button-generic;
&.ui-state-hover {
- background-color:lighten($color-button-generic, 5%);
- }
+ background-color:lighten($color-button-generic, 5%);
+ }
&.ss-ui-action-constructive {
background-color:$color-button-constructive;
&.ui-state-hover {
background-color:lighten($color-button-constructive, 5%);
}
}
+ &.ss-gridfield-button-filter{
+ $bgImage: url(../../images/icons/filter-icons.png) no-repeat;
+ background:lighten($color-menu-button,10%) $bgImage -14px 4px;
+ }
}
.cms-content-toolbar{
diff --git a/admin/scss/_mixins.scss b/admin/scss/_mixins.scss
index 6d134ee89..5007ea9ef 100644
--- a/admin/scss/_mixins.scss
+++ b/admin/scss/_mixins.scss
@@ -1,17 +1,17 @@
-/**
- * This file contains generic mixins which we use throughout
- * the admin panels.
- *
- * Mixins should be stored here rather than individual files
- * so that we can keep.
- */
+//**
+// * This file contains generic mixins which we use throughout
+// * the admin panels.
+// *
+// * Mixins should be stored here rather than individual files
+// * so that we can keep.
+// */
-/** ----------------------------------------------------
- * Hides the overflowing text from a container
- *
- * Note: you must define a width on the element with this
- * overflow.
- * ----------------------------------------------------- */
+//** ----------------------------------------------------
+// * Hides the overflowing text from a container
+// *
+// * Note: you must define a width on the element with this
+// * overflow.
+// * ----------------------------------------------------- */
@mixin hide-text-overflow {
overflow: hidden;
white-space: nowrap;
@@ -22,11 +22,11 @@
o-text-overflow: ellipsis;
}
-/** ----------------------------------------------------
- * Clear the properties of sub form fields.
- *
- * Often needed for nested form fields and
- * ----------------------------------------------------- */
+//** ----------------------------------------------------
+// * Clear the properties of sub form fields.
+// *
+// * Often needed for nested form fields and
+// * ----------------------------------------------------- */
@mixin clear-form-field-styles {
.field {
padding: 0;
@@ -59,11 +59,11 @@
}
}
-/** ----------------------------------------------------
- * Double tone borders
- *
- * http://daverupert.com/2011/06/two-tone-borders-with-css3/
- * ----------------------------------------------------- */
+//** ----------------------------------------------------
+// * Double tone borders
+// *
+// * http://daverupert.com/2011/06/two-tone-borders-with-css3/
+// * ----------------------------------------------------- */
@mixin doubleborder($side, $innerColor, $outerColor) {
$shadow: "0 0 0";
border-#{$side}: 1px solid $innerColor;
@@ -78,9 +78,9 @@
}
-/**----------------------------------------------------
-Clearfix mixin clears the float of it's parent element
-----------------------------------------------------**/
+//**----------------------------------------------------
+//Clearfix mixin clears the float of it's parent element
+//----------------------------------------------------**/
@mixin clearfix{
&:after{
content: ".";
@@ -94,47 +94,3 @@ Clearfix mixin clears the float of it's parent element
-/**
- Mixin creates a transparent button with a dropdown arrow,
- as is used for files in the files up-load area. The arrows
- themselves are added in the _style file
-**/
-@mixin ss-uploadfield-editButton{
- &.ss-uploadfield-item-edit {
- opacity:0.9;
- padding-top: 3px;
- padding-bottom: 0;
- height:100%;
- @include border-radius(0);
- &.ui-state-hover{
- background:none;
- opacity:1;
- span.toggle-details{
- opacity:1;
- }
- }
- span.toggle-details{
- opacity:0.9;
- margin-left:3px;
- display: inline-block;
- width: 5px;
- height: 100%;
- cursor: pointer;
- .toggle-details-icon {
- margin-top:1px;
- display: inline-block;
- width: 8px;
- height: 8px;
- vertical-align: middle;
- &.opened {
- margin-top:0;
- }
- }
- }
-
- }
-
- .ui-icon {
- display: none;
- }
-}
diff --git a/admin/scss/ie7.scss b/admin/scss/ie7.scss
index 0cb7903b0..e9f365819 100644
--- a/admin/scss/ie7.scss
+++ b/admin/scss/ie7.scss
@@ -4,7 +4,7 @@
html {
overflow: hidden;
}
-
+
.field {
input.text,
textarea,
@@ -134,6 +134,13 @@ html {
}
}
+input {
+ &.ss-gridfield-sort {
+ padding-top:0 !important;
+ padding-bottom:0 !important;
+ }
+}
+
//fix for wrong height on users groups gridfield table header
table.ss-gridfield-table tr.title th h2 {
float:left;
diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css
index 8e7279e39..f4da913cc 100644
--- a/css/AssetUploadField.css
+++ b/css/AssetUploadField.css
@@ -4,30 +4,25 @@
/** ----------------------------------------------- Typography. ------------------------------------------------ */
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
-/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
-/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
-/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
-/**----------------------------------------------------
-Clearfix mixin clears the float of it's parent element
-----------------------------------------------------**/
+/** This file contains mixins relating to specific functionality Mixins should be stored here rather than individual files */
+/*Mixin generates the generic button styling for the gridfield*/
/**
Mixin creates a transparent button with a dropdown arrow,
as is used for files in the files up-load area. The arrows
themselves are added in the _style file
**/
-#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
.ss-uploadfield-edit-iframe { background: #E2E2E2; }
-.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
+.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
.ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; }
.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; margin-bottom: 5px; padding-bottom: 5px; height: 50px; position: relative; }
-.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
-.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; background: none; border: 0; right: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #444444; }
+.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
@@ -38,23 +33,23 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
.ss-assetuploadfield .fileOverview .state { font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 5px; }
.ss-assetuploadfield .fileOverview .details { color: #6a6a6a; }
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -ms-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 110px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-delete { display: none; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
@@ -62,20 +57,20 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button .ui-icon { display: none; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; position: relative; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; position: relative; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button .ui-icon { display: block; position: absolute; top: 0; left: 0; margin: 0; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { width: 300px; height: 30px; font-size: 14px; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; -o-border-radius: 13px; border-radius: 13px; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -moz-border-radius: 13px; -webkit-border-radius: 13px; -o-border-radius: 13px; -ms-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -o-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 25px no-repeat; width: 230px; z-index: 1; padding: 20px 0 0; line-height: 25px; font-size: 25px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 14px; z-index: -1; }
diff --git a/css/GridField.css b/css/GridField.css
index 9044b64ea..5c0a4e993 100644
--- a/css/GridField.css
+++ b/css/GridField.css
@@ -1,8 +1,23 @@
/** Core styles for the basic GridField form field without any specific style. @package framework @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
-/*$experimental-support-for-svg variable comes from
-imported compass/support file and enables svg gradients in IE9.
-This is needed for the background gradients to work as desired with
-multiple images. */
+/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
+/** ----------------------------------------------- Colours ------------------------------------------------ */
+/** ----------------------------------------------- Textures ----------------------------------------------- */
+/** ----------------------------------------------- Typography. ------------------------------------------------ */
+/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
+/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
+/** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */
+/** ----------------------------------------------- Colours ------------------------------------------------ */
+/** ----------------------------------------------- Textures ----------------------------------------------- */
+/** ----------------------------------------------- Typography. ------------------------------------------------ */
+/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
+/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
+/** This file contains mixins relating to specific functionality Mixins should be stored here rather than individual files */
+/*Mixin generates the generic button styling for the gridfield*/
+/**
+ Mixin creates a transparent button with a dropdown arrow,
+ as is used for files in the files up-load area. The arrows
+ themselves are added in the _style file
+**/
.cms .ss-gridfield > div { margin-bottom: 36px; }
.cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms .ss-gridfield[data-selectable] td { cursor: pointer; }
@@ -17,14 +32,14 @@ multiple images. */
.cms .ss-gridfield .grid-print-button { display: inline-block; }
.cms .ss-gridfield .grid-csv-button { display: inline-block; }
.cms table.ss-gridfield-table { display: table; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
-.cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
+.cms table.ss-gridfield-table thead { color: #1e2527; background: transparent; }
.cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
.cms table.ss-gridfield-table thead tr.filter-header .fieldgroup .fieldgroup-field { padding: 0; }
.cms table.ss-gridfield-table thead tr:first-child th:first-child { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
.cms table.ss-gridfield-table thead tr:first-child th:last-child { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
.cms table.ss-gridfield-table tbody { background: #FFF; }
.cms table.ss-gridfield-table tbody td { width: auto; white-space: nowrap; }
-.cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; }
+.cms table.ss-gridfield-table tbody td.col-buttons { width: 70px; padding: 0; text-align: right; }
.cms table.ss-gridfield-table tbody td.col-description { width: auto; }
.cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; border-right: none; text-indent: -9999em; padding: 0; }
.cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px; display: block; }
@@ -41,50 +56,61 @@ multiple images. */
.cms table.ss-gridfield-table tbody td a.view-link, .cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 16px; height: 20px; text-indent: 9999em; overflow: hidden; vertical-align: middle; }
.cms table.ss-gridfield-table tbody td a.view-link { background: url(../admin/images/btn-icon/magnifier.png) no-repeat 0 1px; }
.cms table.ss-gridfield-table tbody td a.edit-link { background: url(../admin/images/btn-icon/document--pencil.png) no-repeat 0 1px; }
-.cms table.ss-gridfield-table tfoot { color: #1d2224; }
-.cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
-.cms table.ss-gridfield-table tr.title th { position: relative; background: #7f9198; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IxYzBjNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdmOTE5OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
+.cms table.ss-gridfield-table tfoot { color: #1e2527; }
+.cms table.ss-gridfield-table tfoot tr td { background: #97a8ad; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+.cms table.ss-gridfield-table tr.title th { position: relative; background: #899ca2; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYzBjNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg5OWNhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3c0c4), color-stop(100%, #899ca2)); background-image: -webkit-linear-gradient(#b3c0c4, #899ca2); background-image: -moz-linear-gradient(#b3c0c4, #899ca2); background-image: -o-linear-gradient(#b3c0c4, #899ca2); background-image: -ms-linear-gradient(#b3c0c4, #899ca2); background-image: linear-gradient(#b3c0c4, #899ca2); text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
.cms table.ss-gridfield-table tr.title th h2 { padding: 0px; font-size: 16.8px; color: #fff; margin: 3px 8px 0; display: inline-block; }
.cms table.ss-gridfield-table tr.title th .right > * { float: right; font-size: 14.4px; }
.cms table.ss-gridfield-table tr.title th .left > * { float: left; font-size: 14.4px; }
-.cms table.ss-gridfield-table tr.sortable-header { background: #bac8ce; }
+.cms table.ss-gridfield-table tr.sortable-header { background: #bfcdd2; }
.cms table.ss-gridfield-table tr.sortable-header th { padding: 0px; }
.cms table.ss-gridfield-table tr:hover { background: #FFFAD6 !important; }
.cms table.ss-gridfield-table tr:first-child { background: transparent; }
-.cms table.ss-gridfield-table tr.ss-gridfield-even { background: #f0f4f7; }
+.cms table.ss-gridfield-table tr.ss-gridfield-even { background: #f2f5f6; }
.cms table.ss-gridfield-table tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; }
-.cms table.ss-gridfield-table tr.even { background: #f0f4f7; }
+.cms table.ss-gridfield-table tr.even { background: #f2f5f6; }
.cms table.ss-gridfield-table tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 5px; border-right: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield-table tr th div.fieldgroup, .cms table.ss-gridfield-table tr th div.fieldgroup-field { width: 100%; position: relative; }
.cms table.ss-gridfield-table tr th div.fieldgroup { min-width: 200px; padding-right: 0; }
-.cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; }
-.cms table.ss-gridfield-table tr th.main { white-space: nowrap; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #9cb0b9; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+.cms table.ss-gridfield-table tr th div.fieldgroup.filter-buttons { min-width: 0; }
+.cms table.ss-gridfield-table tr th div.fieldgroup.filter-buttons div { width: auto; display: inline; }
+.cms table.ss-gridfield-table tr th.main { white-space: nowrap; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #a1b6bc; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
.cms table.ss-gridfield-table tr th.main.col-listChildrenLink { border-right: none; }
-.cms table.ss-gridfield-table tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
-.cms table.ss-gridfield-table tr th.extra span { width: auto; display: inline; position: static; }
-.cms table.ss-gridfield-table tr th.extra span input { height: 28px; }
+.cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; }
+.cms table.ss-gridfield-table tr th.extra { position: relative; background: #637276; background: rgba(0, 0, 0, 0.7); padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
+.cms table.ss-gridfield-table tr th.extra input { height: 28px; }
.cms table.ss-gridfield-table tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
.cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
.cms table.ss-gridfield-table tr th.last { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
.cms table.ss-gridfield-table tr th button#action_gridfield_relationadd:hover { color: #444 !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 6px; border: none; width: 100%; text-align: left; padding: 4px 8px 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { background-position: right -34px; }
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows.png) no-repeat right 10px; border: none; width: 100%; text-align: left; padding: 4px 8px 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { background-position: right -30px; }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-desc { background-position: right -72px; }
.cms table.ss-gridfield-table tr th button.ss-gridfield-sort.ss-gridfield-sorted-asc { background-position: right -116px; }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-button-filter.ss-ui-button { position: absolute; top: -28px; right: -1px; display: block; text-indent: -9999em; width: 30px; height: 28px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-width: 1px; border-color: #9a9a9a; background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -o-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat -40px 6px, linear-gradient(#ffffff, #d9d9d9); }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-button-filter.ss-ui-button.hover-alike:active { background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxOTljZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJlN2VhZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4199cd), color-stop(100%, #2e7ead)); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -webkit-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -moz-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -o-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -ms-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, linear-gradient(#4199cd, #2e7ead); -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-button-filter.ss-ui-button.hover-alike { background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxOTljZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJlN2VhZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4199cd), color-stop(100%, #2e7ead)); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -webkit-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -moz-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -o-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, -ms-linear-gradient(#4199cd, #2e7ead); background: url(../images/icons/filter-icons.png) no-repeat -16px 6px, linear-gradient(#4199cd, #2e7ead); }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-button-reset.ss-ui-button { position: absolute; right: 28px; top: -28px; display: block; text-indent: -9999em; width: 30px; height: 28px; float: right; border-radius: 0px; border-bottom-width: 1px; border-color: #9a9a9a; background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -o-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url(../images/icons/filter-icons.png) no-repeat 8px 5px, linear-gradient(#ffffff, #d9d9d9); }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-button-reset.ss-ui-button.filtered:hover { background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #cc0000)); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -moz-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -o-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -ms-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, linear-gradient(#ff0000, #cc0000); }
-.cms table.ss-gridfield-table tr th button.ss-gridfield-button-reset.ss-ui-button.filtered:active { background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #cc0000)); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -webkit-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -moz-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -o-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, -ms-linear-gradient(#ff0000, #cc0000); background: url(../images/icons/filter-icons.png) no-repeat 8px -17px, linear-gradient(#ff0000, #cc0000); -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
-.cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter { background-color: #55a4d2; border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4NzA5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -moz-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -o-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -ms-linear-gradient(#338dc1, #287099); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, linear-gradient(#338dc1, #287099); border-top: 1px solid #4199cd; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.hover-alike:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.hover-alike, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter:hover { background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1YTRkMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #55a4d2), color-stop(100%, #338dc1)); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -webkit-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -moz-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -o-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, -ms-linear-gradient(#55a4d2, #338dc1); background: url(../images/icons/filter-icons.png) no-repeat -14px 4px, linear-gradient(#55a4d2, #338dc1); }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter { margin-left: 12px; border: none; background: url(../images/icons/filter-icons.png) no-repeat -17px 6px; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter span { opacity: 0.4; position: absolute; width: 10px; left: 30px; top: 40%; background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter:hover { background: url(../images/icons/filter-icons.png) no-repeat -40px 6px; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter#showFilter:hover span { opacity: 0.9; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close { background: url(../images/icons/filter-icons.png) no-repeat 7px -17px; border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; width: 25px; opacity: 0.8; margin-right: -5px; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close.hover-alike:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close:active, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close.hover-alike, .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-close:hover { opacity: 1; background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.1))); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -moz-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -o-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, -ms-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); background: url(../images/icons/filter-icons.png) no-repeat 7px -17px, linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-reset { border: none; display: block; text-indent: -9999em; width: 30px; height: 25px; position: absolute; top: -21px; right: -1px; width: 20px; height: 20px; display: none; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-reset.filtered { display: block; background: url(../admin/images/btn-icon/cross.png) no-repeat 0px 0px; opacity: 0.5; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-reset.filtered:hover { opacity: 0.8; }
+.cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-reset.filtered:active { opacity: 1; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort { height: 25px; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort::-webkit-input-placeholder { font-style: italic; color: #ced5d7; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:-moz-placeholder { font-style: italic; color: #ced5d7; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:-ms-input-placeholder { font-style: italic; color: #ced5d7; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:placeholder { font-style: italic; color: #ced5d7; }
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tr th span.non-sortable { padding: 1em 1em; display: block; }
.cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 6.4px 12px; color: #666666; }
-.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IxYzBjNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdmOTE5OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
+.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYzBjNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg5OWNhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3c0c4), color-stop(100%, #899ca2)); background-image: -webkit-linear-gradient(#b3c0c4, #899ca2); background-image: -moz-linear-gradient(#b3c0c4, #899ca2); background-image: -o-linear-gradient(#b3c0c4, #899ca2); background-image: -ms-linear-gradient(#b3c0c4, #899ca2); background-image: linear-gradient(#b3c0c4, #899ca2); }
.cms table.ss-gridfield-table tr td.bottom-all .datagrid-footer-message { text-align: center; padding-top: 6px; color: white; }
.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination { padding-top: 2px; position: absolute; left: 50%; margin-left: -116px; z-index: 5; }
.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination .pagination-page-number { color: white; }
@@ -98,4 +124,5 @@ multiple images. */
.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination button.ssui-button-disabled { z-index: -1; }
.cms table.ss-gridfield-table tr td.bottom-all .pagination-records-number { float: right; padding: 6px 0; color: white; }
.cms table.ss-gridfield-table tr.last td { border-bottom: 0 none; }
-.cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }
+.cms table.ss-gridfield-table td:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }
+.cms table.ss-gridfield-table td:last-child { border-right: 1px solid rgba(0, 0, 0, 0.1); }
diff --git a/css/UploadField.css b/css/UploadField.css
index 74903d33b..ae1a61574 100644
--- a/css/UploadField.css
+++ b/css/UploadField.css
@@ -5,10 +5,10 @@
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
.ss-uploadfield .clear { clear: both; }
-.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
+.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
.ss-uploadfield .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
-.ss-uploadfield .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; }
+.ss-uploadfield .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; }
.ss-uploadfield .ss-uploadfield-item-info { margin: 0 0 0 100px; }
.ss-uploadfield .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; }
.ss-uploadfield .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; }
@@ -22,11 +22,11 @@
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { height: 28px; margin: 6px 0 0; position: relative; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; position: relative; }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: none; position: relative; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span { position: absolute; left: 0; top: 0; margin: 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span.ui-button-text, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span.ui-button-text { display: none; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
diff --git a/forms/gridfield/GridFieldFilterHeader.php b/forms/gridfield/GridFieldFilterHeader.php
index da2e1b47f..35cf5554a 100644
--- a/forms/gridfield/GridFieldFilterHeader.php
+++ b/forms/gridfield/GridFieldFilterHeader.php
@@ -88,7 +88,7 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$state = $gridField->State->GridFieldFilterHeader;
if(!isset($state->Columns)) {
return $dataList;
- }
+ }
$filterArguments = $state->Columns->toArray();
foreach($filterArguments as $columnName => $value ) {
@@ -107,12 +107,13 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$columns = $gridField->getColumns();
$filterArguments = $gridField->State->GridFieldFilterHeader->Columns->toArray();
-
$currentColumn = 0;
foreach($columns as $columnField) {
$currentColumn++;
$metadata = $gridField->getColumnMetadata($columnField);
$title = $metadata['title'];
+
+
if($title && $gridField->getList()->canFilterBy($columnField)) {
$value = '';
if(isset($filterArguments[$columnField])) {
@@ -121,24 +122,33 @@ class GridFieldFilterHeader implements GridField_HTMLProvider, GridField_DataMan
$field = new TextField('filter['.$columnField.']', '', $value);
$field->addExtraClass('ss-gridfield-sort');
+ $field->setAttribute('placeholder', _t('GridField.FilterBy', "Filter by ")._t('GridField.'.$metadata['title'], $metadata['title']));
+
$field = new FieldGroup(
$field,
- GridField_FormAction::create($gridField, 'filter', false, 'filter', null)
- ->addExtraClass('ss-gridfield-button-filter')
- ->setAttribute('title', _t('GridField.Filter', "Filter"))
- ,
GridField_FormAction::create($gridField, 'reset', false, 'reset', null)
->addExtraClass('ss-gridfield-button-reset')
->setAttribute('title', _t('GridField.ResetFilter', "Reset"))
);
} else {
- $field = new LiteralField('', '');
+ if($currentColumn == count($columns)){
+ $field = new FieldGroup(
+ GridField_FormAction::create($gridField, 'filter', false, 'filter', null)
+ ->addExtraClass('ss-gridfield-button-filter')
+ ->setAttribute('title', _t('GridField.Filter', "Filter")),
+ GridField_FormAction::create($gridField, 'reset', false, 'reset', null)
+ ->addExtraClass('ss-gridfield-button-close')
+ ->setAttribute('title', _t('GridField.ResetFilter', "Reset"))
+ );
+ $field->addExtraClass('filter-buttons');
+ }else{
+ $field = new LiteralField('', '');
+ }
}
-
$forTemplate->Fields->push($field);
}
-
+
return array(
'header' => $forTemplate->renderWith('GridFieldFilterHeader_Row'),
);
diff --git a/forms/gridfield/GridFieldSortableHeader.php b/forms/gridfield/GridFieldSortableHeader.php
index 7ec2df4e6..fefe4dd6c 100644
--- a/forms/gridfield/GridFieldSortableHeader.php
+++ b/forms/gridfield/GridFieldSortableHeader.php
@@ -17,7 +17,7 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
/**
* Determine what happens when this component is used with a list that isn't {@link SS_Filterable}.
*
- * - true: An exception is thrown
+ * - true: An exception is thrown
* - false: This component will be ignored - it won't make any changes to the GridField.
*
* By default, this is set to true so that it's clearer what's happening, but the predefined
@@ -60,8 +60,9 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
$state = $gridField->State->GridFieldSortableHeader;
$columns = $gridField->getColumns();
-
+ $currentColumn = 0;
foreach($columns as $columnField) {
+ $currentColumn++;
$metadata = $gridField->getColumnMetadata($columnField);
$title = $metadata['title'];
if($title && $gridField->getList()->canSortBy($columnField)) {
@@ -84,7 +85,11 @@ class GridFieldSortableHeader implements GridField_HTMLProvider, GridField_DataM
$field->addExtraClass('ss-gridfield-sorted-desc');
}
} else {
- $field = new LiteralField($columnField, '' . $title . '');
+ if($currentColumn == count($columns) && $gridField->getConfig()->getComponentByType('GridFieldFilterHeader')){
+ $field = new LiteralField($columnField, '');
+ }else{
+ $field = new LiteralField($columnField, '' . $title . '');
+ }
}
$forTemplate->Fields->push($field);
}
diff --git a/javascript/GridField.js b/javascript/GridField.js
index f40a342a8..044a572a0 100644
--- a/javascript/GridField.js
+++ b/javascript/GridField.js
@@ -5,6 +5,7 @@
* @param {Object} Additional options for jQuery.ajax() call
* @param {successCallback} callback to call after reloading succeeded.
*/
+
reload: function(ajaxOpts, successCallback) {
var self = this, form = this.closest('form'),
focusedElName = this.find(':input:focus').attr('name'), // Save focused element for restoring after refresh
@@ -14,6 +15,7 @@
if(!ajaxOpts.data) ajaxOpts.data = [];
ajaxOpts.data = ajaxOpts.data.concat(data);
+
// Include any GET parameters from the current URL, as the view state might depend on it.
// For example, a list prefiltered through external search criteria might be passed to GridField.
if(window.location.search) {
@@ -37,6 +39,17 @@
// multiple relationships via keyboard.
if(focusedElName) self.find(':input[name="' + focusedElName + '"]').focus();
+ var content;
+ if(ajaxOpts.data[0].filter=="show"){
+ content = '';
+ self.addClass('show-filter').find('.filter-header').show();
+ }else{
+ content = '';
+ self.removeClass('show-filter').find('.filter-header').hide();
+ }
+
+ self.find('.sortable-header th:last').html(content);
+
form.removeClass('loading');
if(successCallback) successCallback.apply(this, arguments);
self.trigger('reload', self);
@@ -76,6 +89,20 @@
}
});
+
+
+ $('.ss-gridfield :button[name=showFilter]').entwine({
+ onclick: function(e) {
+ $('.filter-header')
+ .show('slow') // animate visibility
+ .find(':input:first').focus(); // focus first search field
+ this.closest('.ss-gridfield').addClass('show-filter');
+ this.parent().html('');
+ e.preventDefault();
+ }
+ });
+
+
$('.ss-gridfield .ss-gridfield-item').entwine({
onclick: function(e) {
if($(e.target).closest('.action').length) {
@@ -93,10 +120,16 @@
this.css('cursor', 'default');
}
});
-
+
$('.ss-gridfield .action').entwine({
onclick: function(e){
- this.getGridField().reload({data: [{name: this.attr('name'), value: this.val()}]});
+ var filterState='show'; //filterstate should equal current state.
+
+ if(this.hasClass('ss-gridfield-button-close') || !(this.closest('.ss-gridfield').hasClass('show-filter'))){
+ filterState='hidden';
+ }
+
+ this.getGridField().reload({data: [{name: this.attr('name'), value: this.val(), filter: filterState}]});
e.preventDefault();
}
});
@@ -214,19 +247,29 @@
*/
$('.ss-gridfield .filter-header :input').entwine({
onmatch: function(){
- filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter');
- resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+ var filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter'),
+ resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+
if(this.val()) {
filterbtn.addClass('filtered');
resetbtn.addClass('filtered');
}
},
onkeydown: function(e) {
- filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter');
- resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+ // Skip reset button events, they should trigger default submission
+ if(this.closest('.ss-gridfield-button-reset').length) return;
+
+ var filterbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-filter'),
+ resetbtn = this.closest('.fieldgroup').find('.ss-gridfield-button-reset');
+
if(e.keyCode == '13') {
- btns = this.closest('.filter-header').find('.ss-gridfield-button-filter');
- this.getGridField().reload({data: [{name: btns.attr('name'), value: btns.val()}]});
+ var btns = this.closest('.filter-header').find('.ss-gridfield-button-filter');
+ var filterState='show'; //filterstate should equal current state.
+ if(this.hasClass('ss-gridfield-button-close')||!(this.closest('.ss-gridfield').hasClass('show-filter'))){
+ filterState='hidden';
+ }
+
+ this.getGridField().reload({data: [{name: btns.attr('name'), value: btns.val(), filter: filterState}]});
return false;
}else{
filterbtn.addClass('hover-alike');
diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss
index 594c881a5..b0f5ffc99 100644
--- a/scss/AssetUploadField.scss
+++ b/scss/AssetUploadField.scss
@@ -4,6 +4,7 @@
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
@import "../admin/scss/themes/default.scss";
@import "../admin/scss/_mixins";
+@import "_elementMixins";
#AssetUploadField {
diff --git a/scss/GridField.scss b/scss/GridField.scss
index 7bd8d6eee..375b41bbb 100644
--- a/scss/GridField.scss
+++ b/scss/GridField.scss
@@ -11,29 +11,26 @@
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "compass/css3/border-radius";
+@import "../admin/scss/themes/default";
+@import "../admin/scss/themes/default";
+@import "_elementMixins";
-/*$experimental-support-for-svg variable comes from
-imported compass/support file and enables svg gradients in IE9.
-This is needed for the background gradients to work as desired with
-multiple images. */
+//$experimental-support-for-svg variable comes from
+//imported compass/support file and enables svg gradients in IE9.
+//This is needed for the background gradients to work as desired with
+//multiple images.
$experimental-support-for-svg: true;
-$gf_colour_gradient_light: #B1C0C5;
-$gf_colour_gradient_dark: #7F9198;
-$gf_colour_base: #95a5ab;
-$gf_colour_header_border: #819198;
-$gf_colour_subheader: #BAC8CE;
+$gf_colour_base: desaturate(darken(adjust-hue($color-base, -10%), 10%),5%);
+$gf_colour_gradient_light: lighten($gf_colour_base, 10%);
+$gf_colour_gradient_dark: darken($gf_colour_base, 5%);
+$gf_colour_header_border: $gf_colour_gradient_dark;
+$gf_colour_subheader: saturate(lighten($gf_colour_base, 15%),5%);
$gf_colour_border: rgba(0,0,0,.1);
-$gf_colour_zebra: #F0F4F7;
+$gf_colour_zebra: lighten($gf_colour_subheader,17%);
$gf_colour_font: #666;
$gf_colour_text_shadow: rgba(0,0,0,.3);
-$color-text-blue-link:#1556B2 !default;
$gf_border_radius: 7px;
-$gf_color_border_filter_button: #9A9A9A;
-$gf_color_button: #e6e6e6;
-$gf_color_button_filter_hover: #338DC1;
-$gf_color_button_reset_hover: #FF0000;
-$color-text-light: white;
$gf_grid_y: 12px;
$gf_grid_x: 16px;
@@ -136,7 +133,8 @@ $gf_grid_x: 16px;
width: auto;
white-space:nowrap;
&.col-buttons {
- width: auto;
+ width: 70px;
+ padding:0;
text-align: right;
}
@@ -257,7 +255,7 @@ $gf_grid_x: 16px;
min-height: 40px; //this is to accomodate the add new button.
@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
- h2{
+ h2{
padding: 0px;
font-size: $gf_grid_y*1.4;
color:#fff;
@@ -274,12 +272,11 @@ $gf_grid_x: 16px;
}
}
}
- &.sortable-header {
- background: $gf_colour_subheader;
+ &.sortable-header {
+ background: $gf_colour_subheader;
th{
padding: 0px;
- }
-
+ }
}
&:hover {
background: #FFFAD6 !important;
@@ -304,12 +301,7 @@ $gf_grid_x: 16px;
color: #FFF;
padding: 5px;
border-right: 1px solid $gf_colour_border;
- &.main:first-child{
- //@include border-top-left-radius($gf_border_radius);
- }
- &.main:last-child{
- //@include border-top-right-radius($gf_border_radius);
- }
+
div {
&.fieldgroup,&.fieldgroup-field {
width: 100%;
@@ -318,12 +310,16 @@ $gf_grid_x: 16px;
&.fieldgroup {
min-width: $gf_grid_x*12.5;
padding-right:0;
+ &.filter-buttons{
+ min-width:0;
+ div{
+ @extend .col-buttons;
+ width:auto;
+ display:inline;
+ }
+ }
}
}
- &.extra,&.action {
- padding: 0;
- cursor: default;
- }
&.main{
white-space:nowrap;
border-top: 1px solid $gf_colour_border;
@@ -337,17 +333,18 @@ $gf_grid_x: 16px;
border-right:none;
}
}
+ &.extra,&.action {
+ padding: 0;
+ cursor: default;
+ }
&.extra {
- background: $gf_colour_subheader;
+ position:relative;
+ background:darken($color-dark-grey, 10%);
+ background: rgba(#000, 0.7);
padding: 5px;
border-top: $gf_colour_text_shadow;
- span {
- width: auto;
- display: inline;
- position: static;
- input {
- height:28px; //height of input field - to match design.
- }
+ input {
+ height:28px; //height of input field - to match design.
}
button.ss-ui-button {
padding: .3em;
@@ -364,6 +361,8 @@ $gf_grid_x: 16px;
&.last {
@include border-top-right-radius($gf_border_radius);
}
+
+
button {
&#action_gridfield_relationadd:hover {
@@ -377,7 +376,7 @@ $gf_grid_x: 16px;
@include box-shadow-none;
}
&.ss-gridfield-sort {
- background: transparent url(../images/arrows.png) no-repeat right 6px;
+ background: transparent url(../images/arrows.png) no-repeat right 10px;
border:none;
width:100%;
text-align: left;
@@ -386,7 +385,7 @@ $gf_grid_x: 16px;
color: #fff;
@include border-radius(0);
&:hover {
- background-position: right -34px;
+ background-position: right -30px;
}
&.ss-gridfield-sorted-desc {
background-position: right -72px;
@@ -395,84 +394,110 @@ $gf_grid_x: 16px;
background-position: right -116px;
}
}
- &.ss-gridfield-button-filter.ss-ui-button{
- position:absolute;
- top: -28px;
- right: -1px;
- display:block;
- text-indent:-9999em;
- width:30px;
- height:28px; //match the height of the input field
- border: {
- top-left-radius:0px;
- bottom-left-radius:0px;
- top-right-radius:4px;
- bottom-right-radius:4px;
- bottom-width:1px;
- color:$gf_color_border_filter_button;
+
+ &.ss-ui-button{
+ &.ss-gridfield-button-filter{
+ $bgImage: url(../images/icons/filter-icons.png) no-repeat;
+ background-color:lighten($color-menu-button,10%);
+ @include gridFieldButtons;
+ @include background(
+ $bgImage -14px 4px,
+ linear-gradient(
+ $color-menu-button,
+ darken($color-menu-button, 10%)
+ )
+ );
+ border-top: 1px solid lighten($color-menu-button, 5%);
+
+ &.hover-alike:active, &:active, &.hover-alike, &:hover {
+ @include background (
+ $bgImage -14px 4px,
+ linear-gradient(
+ lighten($color-menu-button, 10%),
+ $color-menu-button
+ ));
+ }
+
+ &#showFilter{ //The magnifying glass before filter is opened
+ margin-left: $gf_grid_y;
+ border:none;
+ @include background ($bgImage -17px 6px);
+
+ span{ //this is the dropdown arrow
+ opacity: 0.4;
+ position:absolute;
+ width:10px;
+ left:30px;
+ top:40%;
+ background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px;
+ }
+ &:hover{
+ @include background ($bgImage -40px 6px);
+ span{//dropdown arrow
+ opacity:0.9;
+ }
+ }
+ }
}
- @include background (url(../images/icons/filter-icons.png) no-repeat -40px 6px,
- linear-gradient(
- lighten($gf_color_button, 10%),
- darken($gf_color_button, 5%)
- ));
- &.hover-alike:active {
- @include background (url(../images/icons/filter-icons.png) no-repeat -16px 6px,
- linear-gradient(
- lighten($gf_color_button_filter_hover, 5%),
- darken($gf_color_button_filter_hover, 5%)
- ));
- @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
+ &.ss-gridfield-button-close{
+ $bgImage: url(../images/icons/filter-icons.png) no-repeat;
+ @include background ($bgImage 7px -17px);
+ @include gridFieldButtons;
+ width:25px;
+ opacity:0.8;
+ margin-right:-5px; //For IE
+ &.hover-alike:active, &:active, &.hover-alike, &:hover {
+ opacity:1;
+ @include background (
+ $bgImage 7px -17px,
+ linear-gradient(
+ rgba(#fff,0.1),
+ rgba(#fff,0.1)
+ )
+ );
+ }
+
}
- &.hover-alike {
- @include background (url(../images/icons/filter-icons.png) no-repeat -16px 6px,
- linear-gradient(
- lighten($gf_color_button_filter_hover, 5%),
- darken($gf_color_button_filter_hover, 5%)
- ));
- }
- }
- &.ss-gridfield-button-reset.ss-ui-button{
- position:absolute;
- right: 28px;
- top: -28px;
- display:block;
- text-indent:-9999em;
- width:30px;
- height:28px; //match the height of the input field
- float:right;
- border: {
- radius:0px;
- bottom-width:1px;
- color:$gf_color_border_filter_button;
- }
- @include background (url(../images/icons/filter-icons.png) no-repeat 8px 5px,
- linear-gradient(color-stops(
- lighten($gf_color_button, 10%),
- darken($gf_color_button, 5%)
- ))
- );
- &.filtered:hover {
- @include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px,
- linear-gradient(
- $gf_color_button_reset_hover,
- darken($gf_color_button_reset_hover, 10%)
- ));
- }
- &.filtered:active {
- @include background (url(../images/icons/filter-icons.png) no-repeat 8px -17px,
- linear-gradient(
- $gf_color_button_reset_hover,
- darken($gf_color_button_reset_hover, 10%)
- ));
- @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
- }
- }
+ &.ss-gridfield-button-reset{
+ @include gridFieldButtons;
+ position:absolute;
+ top: -21px;
+ right: -1px;
+ width:20px;
+ height:20px;
+ display:none;
+
+ &.filtered{
+ display:block;
+
+ background: url(../admin/images/btn-icon/cross.png) no-repeat 0px 0px;
+ opacity:0.5;
+ &:hover{
+ opacity:0.8;
+ }
+ &:active {
+ opacity:1;
+ }
+ }
+ }
+ }
}
input {
&.ss-gridfield-sort {
- padding: 2px;
+ height:25px;
+ // Placeholder styling done with an each loop because when a browser
+ // doesn’t understand a selector, it invalidates the entire line of selectors.
+ // This avoids that, and keeps the scss tidy
+ $browserPlaceholder: "::-webkit-input-placeholder", ":-moz-placeholder", ":-ms-input-placeholder", ":placeholder";
+
+ @each $browser in $browserPlaceholder {
+ &#{$browser}{
+ font-style:italic;
+ color: lighten($color-dark-grey,30%);
+ }
+ }
+
&:focus {
@include box-shadow-none;
}
@@ -549,8 +574,11 @@ $gf_grid_x: 16px;
border-bottom: 0 none;
}
}
- td:first-child, th:first-child{
+ td:first-child{
border-left: 1px solid $gf_colour_border;
}
+ td:last-child{
+ border-right: 1px solid $gf_colour_border;
+ }
}
}
diff --git a/scss/_elementMixins.scss b/scss/_elementMixins.scss
new file mode 100644
index 000000000..f31e2bb6f
--- /dev/null
+++ b/scss/_elementMixins.scss
@@ -0,0 +1,61 @@
+/**
+ * This file contains mixins relating to specific functionality
+ *
+ * Mixins should be stored here rather than individual files
+ */
+
+
+/*Mixin generates the generic button styling for the gridfield*/
+@mixin gridFieldButtons{
+ border:none;
+ display:block;
+ text-indent:-9999em;
+ width:30px;
+ height:25px; //match the height of the input field
+}
+
+
+/**
+ Mixin creates a transparent button with a dropdown arrow,
+ as is used for files in the files up-load area. The arrows
+ themselves are added in the _style file
+**/
+@mixin ss-uploadfield-editButton{
+ &.ss-uploadfield-item-edit {
+ opacity:0.9;
+ padding-top: 3px;
+ padding-bottom: 0;
+ height:100%;
+ @include border-radius(0);
+ &.ui-state-hover{
+ background:none;
+ opacity:1;
+ span.toggle-details{
+ opacity:1;
+ }
+ }
+ span.toggle-details{
+ opacity:0.9;
+ margin-left:3px;
+ display: inline-block;
+ width: 5px;
+ height: 100%;
+ cursor: pointer;
+ .toggle-details-icon {
+ margin-top:1px;
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ vertical-align: middle;
+ &.opened {
+ margin-top:0;
+ }
+ }
+ }
+
+ }
+
+ .ui-icon {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/templates/Includes/GridFieldFilterHeader_Row.ss b/templates/Includes/GridFieldFilterHeader_Row.ss
index c3a5bbd49..32c77011f 100644
--- a/templates/Includes/GridFieldFilterHeader_Row.ss
+++ b/templates/Includes/GridFieldFilterHeader_Row.ss
@@ -1,5 +1,5 @@
-
diff --git a/templates/Includes/GridFieldSortableHeader_Row.ss b/templates/Includes/GridFieldSortableHeader_Row.ss
index 880606e69..0197407b7 100644
--- a/templates/Includes/GridFieldSortableHeader_Row.ss
+++ b/templates/Includes/GridFieldSortableHeader_Row.ss
@@ -1,5 +1,5 @@
diff --git a/templates/forms/FieldGroup.ss b/templates/forms/FieldGroup.ss
index e0590d0c2..21fd1aa43 100644
--- a/templates/forms/FieldGroup.ss
+++ b/templates/forms/FieldGroup.ss
@@ -1,4 +1,4 @@
-id="$ID"<% end_if %>>
+