tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Felipe Skroski 2012-02-29 13:46:10 +13:00
parent af59228036
commit fea1a9357d
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/GridField.css
View File

@ -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 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 { -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 { 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 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: 14px; border-color: rgba(0, 0, 0, 0.1); float: right; } .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 { 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:hover { background: #FFFAD6 !important; }
.cms table.ss-gridfield-table tr:first-child { background: transparent; } .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: #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.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: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: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 { 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 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; } .cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 12px; color: #666666; }

25
scss/GridField.scss
View File

@ -23,6 +23,8 @@ $gf_colour_font: #666;
$gf_colour_text_shadow: rgba(0,0,0,.3); $gf_colour_text_shadow: rgba(0,0,0,.3);
$gf_border_radius: 7px; $gf_border_radius: 7px;
$gf_grid_y: 12px;
$gf_grid_x: 16px;
@mixin box-shadow-none { @mixin box-shadow-none {
-moz-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); @include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
h2{ h2{
padding: 0px; padding: 0px;
font-size: 16px; font-size: $gf_grid_y*1.4;
color:#fff; color:#fff;
margin:0; margin:3px $gf_grid_x/2 0;
display:inline; display:inline-block;
} }
.new{ .new{
font-size: 14px; font-size: $gf_grid_y*1.2;
border-color: $gf_colour_border; border-color: $gf_colour_border;
float: right; float: right;
} }
@ -114,6 +116,10 @@ $gf_border_radius: 7px;
} }
&.sortable-header { &.sortable-header {
background: $gf_colour_subheader; background: $gf_colour_subheader;
th{
padding: 0px;
}
} }
&:hover { &:hover {
background: #FFFAD6 !important; background: #FFFAD6 !important;
@ -134,7 +140,7 @@ $gf_border_radius: 7px;
th { th {
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: $gf_grid_y;
color: #FFF; color: #FFF;
padding: 5px; padding: 5px;
border-right: 1px solid $gf_colour_border; border-right: 1px solid $gf_colour_border;
@ -210,7 +216,7 @@ $gf_border_radius: 7px;
@include box-shadow-none; @include box-shadow-none;
} }
&.ss-gridfield-sort { &.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; border:none;
width:100%; width:100%;
text-align: left; text-align: left;
@ -218,6 +224,12 @@ $gf_border_radius: 7px;
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0); @include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
color: #fff; color: #fff;
@include border-radius(0); @include border-radius(0);
&:hover {
background-position: right -34px;
}
&.ss-gridfield-sorted {
background-position: right -116px;
}
} }
} }
input { input {
@ -226,6 +238,7 @@ $gf_border_radius: 7px;
&:focus { &:focus {
@include box-shadow-none; @include box-shadow-none;
} }
} }
} }
} }