Skip to content
This repository
Browse code

ENHANCEMENT:SSF-124 - changed how the border radius was applied on th…

…e gridfield header. border radius is now applied to the first and last th in the first row in <thead>.
  • Loading branch information...
commit 84388a41190306cc3df0eca677b5b04a2d70302c 1 parent b58183f
authored April 11, 2012
5  css/GridField.css
@@ -13,6 +13,8 @@
13 13
 .cms table.ss-gridfield-table { display: table; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
14 14
 .cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
15 15
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
  16
+.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; }
  17
+.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; }
16 18
 .cms table.ss-gridfield-table tbody { background: #FFF; }
17 19
 .cms table.ss-gridfield-table tbody td { width: auto; white-space: nowrap; }
18 20
 .cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; }
@@ -32,8 +34,7 @@
32 34
 .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; }
33 35
 .cms table.ss-gridfield-table tfoot { color: #1d2224; }
34 36
 .cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
35  
-.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; }
36  
-.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; }
  37
+.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; }
37 38
 .cms table.ss-gridfield-table tr.title th h2 { padding: 0px; font-size: 16.8px; color: #fff; margin: 3px 8px 0; display: inline-block; }
38 39
 .cms table.ss-gridfield-table tr.title th .right > * { float: right; font-size: 14.4px; }
39 40
 .cms table.ss-gridfield-table tr.title th .left > * { float: left; font-size: 14.4px; }
10  scss/GridField.scss
@@ -100,6 +100,14 @@ $gf_grid_x:	16px;
100 100
 					max-width:$gf_grid_x*32; //max width 512px
101 101
 				}
102 102
 			}
  103
+			tr:first-child { //sets 7px border-radius on the top row in the thead - accounts for edgecase where there is no title row.
  104
+				th:first-child {
  105
+					@include border-top-left-radius($gf_border_radius);
  106
+				}
  107
+				th:last-child {
  108
+					@include border-top-right-radius($gf_border_radius);
  109
+				}
  110
+			} 
103 111
 		}
104 112
 		
105 113
 		tbody {
@@ -219,7 +227,6 @@ $gf_grid_x:	16px;
219 227
 		
220 228
 		tr {	
221 229
 			&.title {
222  
-				@include border-top-radius($gf_border_radius);
223 230
 				th {
224 231
 					position: relative;
225 232
 					background: $gf_colour_gradient_dark;
@@ -227,7 +234,6 @@ $gf_grid_x:	16px;
227 234
 					padding: 5px;
228 235
 					min-height: 40px; //this is to accomodate the add new button.
229 236
 					@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
230  
-					@include border-top-radius($gf_border_radius);
231 237
 					@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
232 238
 					h2{
233 239
 						padding: 0px;

0 notes on commit 84388a4

Please sign in to comment.
Something went wrong with that request. Please try again.