From 84388a41190306cc3df0eca677b5b04a2d70302c Mon Sep 17 00:00:00 2001 From: Jeremy Bridson Date: Wed, 11 Apr 2012 13:45:37 +1200 Subject: [PATCH] ENHANCEMENT:SSF-124 - changed how the border radius was applied on the gridfield header. border radius is now applied to the first and last th in the first row in . --- css/GridField.css | 5 +++-- scss/GridField.scss | 10 ++++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/css/GridField.css b/css/GridField.css index 51e2cb3f0..d17ce34a2 100644 --- a/css/GridField.css +++ b/css/GridField.css @@ -13,6 +13,8 @@ .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 tr.filter-header .fieldgroup { max-width: 512px; } +.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; } @@ -32,8 +34,7 @@ .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; background: url(../images/icons/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 { -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); 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; } diff --git a/scss/GridField.scss b/scss/GridField.scss index 91f8bd433..6ad3838e3 100644 --- a/scss/GridField.scss +++ b/scss/GridField.scss @@ -100,6 +100,14 @@ $gf_grid_x: 16px; max-width:$gf_grid_x*32; //max width 512px } } + tr:first-child { //sets 7px border-radius on the top row in the thead - accounts for edgecase where there is no title row. + th:first-child { + @include border-top-left-radius($gf_border_radius); + } + th:last-child { + @include border-top-right-radius($gf_border_radius); + } + } } tbody { @@ -219,7 +227,6 @@ $gf_grid_x: 16px; tr { &.title { - @include border-top-radius($gf_border_radius); th { position: relative; background: $gf_colour_gradient_dark; @@ -227,7 +234,6 @@ $gf_grid_x: 16px; padding: 5px; 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 border-top-radius($gf_border_radius); @include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0); h2{ padding: 0px;