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:fixed use of $grid_x/y variables and documented 'magic' numbers

Browse Source
This commit is contained in:
jbridson 2012-03-09 10:33:17 +13:00 committed by Ingo Schommer
parent aed91931a7
commit 4a6116b562
3 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin/scss/_style.scss
View File

@ -1354,15 +1354,15 @@ form.small {
.members_grid { .members_grid {
span button#action_gridfield_relationfind { span button#action_gridfield_relationfind {
display:none; display:none; //hides find button - redundant functionality
} }
p button#action_export { p button#action_export {
margin-top:$grid-y*2; margin-top:$grid-y*2;
span.btn-icon-download-csv { span.btn-icon-download-csv {
height:17px; height:17px; //exact height of icon
} }
span.ui-button-text { span.ui-button-text {
padding-left:26px; padding-left:26px; //to accomodate wider export icon
} }
} }
} }

4
css/GridField.css
View File

@ -1,5 +1,5 @@
/** Core styles for the basic GridField form field without any specific style. @package sapphire @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? */ /** Core styles for the basic GridField form field without any specific style. @package sapphire @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? */
.cms .ss-gridfield > div { margin-bottom: 35px; } .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] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms .ss-gridfield[data-selectable] td { cursor: pointer; } .cms .ss-gridfield[data-selectable] td { cursor: pointer; }
.cms .ss-gridfield .add-existing-autocompleter { width: 500px; } .cms .ss-gridfield .add-existing-autocompleter { width: 500px; }
@ -11,7 +11,7 @@
.cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; } .cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
.cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tbody td button.ui-state-active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cms table.ss-gridfield-table tbody td button.ui-state-active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 20px; height: 20px; text-indent: -9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; } .cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 16px; height: 20px; text-indent: -9999em; 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 { 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 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; }

28
scss/GridField.scss
View File

@ -40,7 +40,7 @@ $gf_grid_x: 16px;
.cms { .cms {
.ss-gridfield { .ss-gridfield {
& > div { & > div {
margin-bottom: $gf_grid_y*3 - 1; margin-bottom: $gf_grid_y*3;
} }
&[data-selectable] { &[data-selectable] {
@ -76,7 +76,7 @@ $gf_grid_x: 16px;
background: transparent; background: transparent;
tr.filter-header { tr.filter-header {
.fieldgroup { .fieldgroup {
max-width:$gf_grid_x*32; max-width:$gf_grid_x*32; //max width 512px
} }
} }
} }
@ -102,8 +102,8 @@ $gf_grid_x: 16px;
} }
a.edit-link { a.edit-link {
display:inline-block; display:inline-block;
width:20px; width:$gf_grid_x;
height:20px; height:20px; //min height to fit the edit icon
text-indent:-9999em; text-indent:-9999em;
background: url(../images/icons/document--pencil.png) no-repeat 0 1px; background: url(../images/icons/document--pencil.png) no-repeat 0 1px;
} }
@ -129,7 +129,7 @@ $gf_grid_x: 16px;
background: $gf_colour_gradient_dark; background: $gf_colour_gradient_dark;
border-top: 1px solid $gf_colour_border; border-top: 1px solid $gf_colour_border;
padding: 5px; padding: 5px;
min-height: 40px; 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 background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
@include border-top-radius($gf_border_radius); @include border-top-radius($gf_border_radius);
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0); @include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
@ -224,7 +224,7 @@ $gf_grid_x: 16px;
display: inline; display: inline;
position: static; position: static;
input { input {
height:28px; height:28px; //height of input field - to match design.
} }
} }
button.ss-ui-button { button.ss-ui-button {
@ -275,12 +275,12 @@ $gf_grid_x: 16px;
} }
&.ss-gridfield-button-filter.ss-ui-button{ &.ss-gridfield-button-filter.ss-ui-button{
position:absolute; position:absolute;
right:5px; right:5px; //positions filter button in correct position on top of input field
top:-28px; top:-28px;
display:block; display:block;
text-indent:-9999em; text-indent:-9999em;
width:30px; width:30px;
height:28px; height:28px; //match the height of the input field
border: { border: {
top-left-radius:0px; top-left-radius:0px;
bottom-left-radius:0px; bottom-left-radius:0px;
@ -312,12 +312,12 @@ $gf_grid_x: 16px;
} }
&.ss-gridfield-button-reset.ss-ui-button{ &.ss-gridfield-button-reset.ss-ui-button{
position:absolute; position:absolute;
right:36px; right:34px; //positions reset button in correct position on top of input field and to the left of the filter button
top:-28px; top:-28px;
display:block; display:block;
text-indent:-9999em; text-indent:-9999em;
width:30px; width:30px;
height:28px; height:28px; //match the height of the input field
float:right; float:right;
border: { border: {
radius:0px; radius:0px;
@ -375,13 +375,13 @@ $gf_grid_x: 16px;
padding-top:2px; padding-top:2px;
position:absolute; position:absolute;
left:50%; left:50%;
margin-left:-116px; margin-left:-116px; //half the width of .datagrid-pagination - centers pagination
.pagination-page-number { .pagination-page-number {
color:$color-text-light; color:$color-text-light;
input { input {
width:35px; width:35px; //exact width so that a four digit number can be entered
height:18px; height:18px;
margin-bottom:-$gf_grid_y/2; margin-bottom:-6px; //moves input field up to be aligned with the pagination buttons
padding:0px; padding:0px;
} }
} }
@ -428,7 +428,7 @@ $gf_grid_x: 16px;
} }
.pagination-records-number { .pagination-records-number {
float:right; float:right;
padding:($gf_grid_y/2) 0; padding:6px 0;
color:$color-text-light; color:$color-text-light;
} }
} }