/** * 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? */ @import "compass/css3"; $gf_colour_gradient_light: #B1C0C5; $gf_colour_gradient_dark: #7F9198; $gf_colour_base: #95a5ab; $gf_colour_header_border: #819198; $gf_colour_border: #DBDDDD; $gf_colour_zebra: #f2f9fd; $gf_border_radius: 7px; @mixin box-shadow-none { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @mixin gridfield-gradient-top { background: $gf_colour_gradient_light; background: -moz-linear-gradient($gf_colour_gradient_light 20%, $gf_colour_gradient_dark); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,$gf_colour_gradient_light), color-stop(80%,$gf_colour_gradient_dark)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, $gf_colour_gradient_light 20%,$gf_colour_gradient_dark 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, $gf_colour_gradient_light 20%,$gf_colour_gradient_dark 80%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$gf_colour_gradient_light}', endColorstr='#{$gf_colour_gradient_dark}'); /* IE5.5+ */ background: -ms-linear-gradient(top, $gf_colour_gradient_light 20%,$gf_colour_gradient_dark 80%); /* IE10+ */ background: linear-gradient(top, $gf_colour_gradient_light 20%,$gf_colour_gradient_dark 80%); /* W3C */ } @mixin gridfield-gradient-bottom { background: $gf_colour_gradient_dark; background: -moz-linear-gradient($gf_colour_gradient_dark 20%, $gf_colour_gradient_light); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,$gf_colour_gradient_dark), color-stop(80%,$gf_colour_gradient_light)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, $gf_colour_gradient_dark 20%,$gf_colour_gradient_light 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, $gf_colour_gradient_dark 20%,$gf_colour_gradient_light 80%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{$gf_colour_gradient_dark}', endColorstr='#{$gf_colour_gradient_light}'); /* IE5.5+ */ background: -ms-linear-gradient(top, $gf_colour_gradient_dark 20%,$gf_colour_gradient_dark 80%); /* IE10+ */ background: linear-gradient(top, $gf_colour_gradient_dark 20%,$gf_colour_gradient_light 80%); /* W3C */ } .cms { table.ss-gridfield.field { box-shadow: none; padding: 0; margin: 20px 0 0 0; border-collapse: separate; border-bottom: 0 none; thead { color: darken($gf_colour_base, 50%); background: transparent; } tbody { background: #FFF; td { /* Emulate a link by default */ button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; } } } tfoot { color: darken($gf_colour_base, 50%); tr { td { background: $gf_colour_base; padding: .7em; } } } tr { &.sortable-header { th { background: $gf_colour_gradient_dark; } } &:hover { background: #FFFAD6 !important; } &:first-child { background: transparent; } &.ss-gridfield-even { background: $gf_colour_zebra; &.ss-gridfield-last { border-bottom: none; } } th { font-weight: bold; font-size: 12px; color: #FFF; padding: 0; border-right: 1px solid #85959C; height: 20px; /* Makes it appear as though the text sits over the boundary of the two