Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

MINOR: (SSF-106) tidied up the datagrid header styling

  • Loading branch information...
commit fea1a9357dc05336a6e64ba7955861e00f010145 1 parent af59228
@felipesilverstripe felipesilverstripe authored
Showing with 25 additions and 9 deletions.
  1. +6 −3 css/GridField.css
  2. +19 −6 scss/GridField.scss
View
9 css/GridField.css
@@ -11,9 +11,10 @@
.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 { -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; -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.title th { position: relative; background: #7f9198; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; 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); -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; -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; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
-.cms table.ss-gridfield-table tr.title th h2 { padding: 0px; font-size: 16px; color: #fff; margin: 0; display: inline; }
-.cms table.ss-gridfield-table tr.title th .new { font-size: 14px; border-color: rgba(0, 0, 0, 0.1); float: right; }
+.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 .new { font-size: 14.4px; border-color: rgba(0, 0, 0, 0.1); float: right; }
.cms table.ss-gridfield-table tr.sortable-header { background: #bac8ce; }
+.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; }
@@ -34,7 +35,9 @@
.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: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-01.png) no-repeat right 2px; border: none; width: 100%; text-align: left; padding: 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 { background: transparent url(../images/arrows.png) no-repeat right 6px; border: none; width: 100%; text-align: left; padding: 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.ss-gridfield-sorted { background-position: right -116px; }
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; }
.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 td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 12px; color: #666666; }
View
25 scss/GridField.scss
@@ -23,6 +23,8 @@ $gf_colour_font: #666;
$gf_colour_text_shadow: rgba(0,0,0,.3);
$gf_border_radius: 7px;
+$gf_grid_y: 12px;
+$gf_grid_x: 16px;
@mixin box-shadow-none {
-moz-box-shadow: none;
@@ -100,13 +102,13 @@ $gf_border_radius: 7px;
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
h2{
padding: 0px;
- font-size: 16px;
+ font-size: $gf_grid_y*1.4;
color:#fff;
- margin:0;
- display:inline;
+ margin:3px $gf_grid_x/2 0;
+ display:inline-block;
}
.new{
- font-size: 14px;
+ font-size: $gf_grid_y*1.2;
border-color: $gf_colour_border;
float: right;
}
@@ -114,6 +116,10 @@ $gf_border_radius: 7px;
}
&.sortable-header {
background: $gf_colour_subheader;
+ th{
+ padding: 0px;
+ }
+
}
&:hover {
background: #FFFAD6 !important;
@@ -134,7 +140,7 @@ $gf_border_radius: 7px;
th {
font-weight: bold;
- font-size: 12px;
+ font-size: $gf_grid_y;
color: #FFF;
padding: 5px;
border-right: 1px solid $gf_colour_border;
@@ -210,7 +216,7 @@ $gf_border_radius: 7px;
@include box-shadow-none;
}
&.ss-gridfield-sort {
- background: transparent url(../images/arrows-01.png) no-repeat right 2px;
+ background: transparent url(../images/arrows.png) no-repeat right 6px;
border:none;
width:100%;
text-align: left;
@@ -218,6 +224,12 @@ $gf_border_radius: 7px;
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
color: #fff;
@include border-radius(0);
+ &:hover {
+ background-position: right -34px;
+ }
+ &.ss-gridfield-sorted {
+ background-position: right -116px;
+ }
}
}
input {
@@ -226,6 +238,7 @@ $gf_border_radius: 7px;
&:focus {
@include box-shadow-none;
}
+
}
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.