2011-12-06 01:56:24 +01:00
/** 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? */
2012-01-09 20:38:58 +01:00
. cms table . ss-gridfield . field { box-shadow : none ; padding : 0 ; margin : 20 px 0 0 0 ; border-collapse : separate ; border-bottom : 0 none ; }
. cms table . ss-gridfield . field thead { color : #1d2224 ; background : transparent ; }
. cms table . ss-gridfield . field tbody { background : #FFF ; }
2012-01-10 00:31:09 +01:00
. cms table . ss-gridfield . field tbody td { /* Emulate a link by default */ }
. cms table . ss-gridfield . field tbody td button { border : none ; background : none ; margin : 0 0 0 2 px ; padding : 0 ; width : auto ; text-shadow : none ; }
2012-01-09 20:38:58 +01:00
. cms table . ss-gridfield . field tfoot { color : #1d2224 ; }
. cms table . ss-gridfield . field tfoot tr td { background : #95a5ab ; padding : .7 em ; }
. cms table . ss-gridfield . field tr . sortable-header th { background : #7f9198 ; }
. cms table . ss-gridfield . field tr : hover { background : #FFFAD6 !important ; }
. cms table . ss-gridfield . field tr : first-child { background : transparent ; }
. cms table . ss-gridfield . field tr . ss-gridfield-even { background : #f2f9fd ; }
. cms table . ss-gridfield . field tr . ss-gridfield-even . ss-gridfield-last { border-bottom : none ; }
. cms table . ss-gridfield . field tr th { font-weight : bold ; font-size : 12 px ; color : #FFF ; padding : 0 ; border-right : 1 px solid #85959C ; height : 20 px ; /* Makes it appear as though the text sits over the boundary of the two <tr>'s in <thead> */ }
. cms table . ss-gridfield . field tr th span { display : block ; position : relative ; left : 20 px ; top : -7 px ; width : 100 % ; }
. cms table . ss-gridfield . field tr th div . fieldgroup , . cms table . ss-gridfield . field tr th div . fieldgroup-field { width : auto ; }
. cms table . ss-gridfield . field tr th div . fieldgroup { min-width : 200 px ; }
. cms table . ss-gridfield . field tr th . extra , . cms table . ss-gridfield . field tr th . action { background : #7f9198 ; padding : 0 ; cursor : default ; }
. cms table . ss-gridfield . field tr th . extra button . ss-ui-button , . cms table . ss-gridfield . field tr th . extra button : hover . ss-ui-button , . cms table . ss-gridfield . field tr th . action button . ss-ui-button , . cms table . ss-gridfield . field tr th . action button : hover . ss-ui-button { margin-left : .9 em ; color : #222 ; }
. cms table . ss-gridfield . field tr th . extra { text-align : center ; background : #b1c0c5 ; background : -moz- linear-gradient ( #b1c0c5 20 % , #7f9198 ) ; /* FF3.6+ */ background : -webkit- gradient ( linear , left top , left bottom , color-stop ( 20 % , #b1c0c5 ) , color-stop ( 80 % , #7f9198 ) ) ; /* Chrome,Safari4+ */ background : -webkit- linear-gradient ( top , #b1c0c5 20 % , #7f9198 80 % ) ; /* Chrome10+,Safari5.1+ */ background : -o- linear-gradient ( top , #b1c0c5 20 % , #7f9198 80 % ) ; /* Opera 11.10+ */ filter : progid : DXImageTransform . Microsoft . gradient ( GradientType = 0 , startColorstr = '#b1c0c5' , endColorstr = '#7f9198' ) ; /* IE5.5+ */ background : -ms- linear-gradient ( top , #b1c0c5 20 % , #7f9198 80 % ) ; /* IE10+ */ background : linear-gradient ( top , #b1c0c5 20 % , #7f9198 80 % ) ; /* W3C */ }
. cms table . ss-gridfield . field tr th . extra span { width : auto ; display : inline ; position : static ; }
. cms table . ss-gridfield . field tr th . action { border-right : 0 ; }
. cms table . ss-gridfield . field tr th . first { -moz- border-radius-topleft : 7 px ; -webkit- border-top-left-radius : 7 px ; -o- border-top-left-radius : 7 px ; -ms- border-top-left-radius : 7 px ; -khtml- border-top-left-radius : 7 px ; border-top-left-radius : 7 px ; }
. cms table . ss-gridfield . field tr th . last { -moz- border-radius-topright : 7 px ; -webkit- border-top-right-radius : 7 px ; -o- border-top-right-radius : 7 px ; -ms- border-top-right-radius : 7 px ; -khtml- border-top-right-radius : 7 px ; border-top-right-radius : 7 px ; }
. cms table . ss-gridfield . field tr th button , . cms table . ss-gridfield . field tr th button : hover { font-size : 12 px ; margin-left : -0.9 em ; }
. cms table . ss-gridfield . field tr th button . ss-gridfield-sort , . cms table . ss-gridfield . field tr th button : hover . ss-gridfield-sort { text-align : left ; padding : 0 ; color : #FFF ; width : 95 % ; background : transparent ; border : 0 none ; -moz- box-shadow : none ; -webkit- box-shadow : none ; box-shadow : none ; text-shadow : none ; }
. cms table . ss-gridfield . field tr th button : hover { color : #CCC !important ; /* Not sure why IE think it needs this */ }
. cms table . ss-gridfield . field tr th . extra button . ss-ui-button { padding : .3 em ; line-height : 1 ; -moz- box-shadow : none ; -webkit- box-shadow : none ; box-shadow : none ; position : relative ; top : -24 px ; border : #b1c0c5 solid 10 px ; border-bottom-width : 0 ; }
. cms table . ss-gridfield . field tr th input . ss-gridfield-sort { position : relative ; top : -24 px ; padding : 2 px ; width : 65 % ; margin : 0 auto ; border : #b1c0c5 solid 10 px ; border-bottom : 0 ; border-bottom-left-radius : 0 ; border-bottom-right-radius : 0 ; }
. cms table . ss-gridfield . field tr th input . ss-gridfield-sort : focus { -moz- box-shadow : none ; -webkit- box-shadow : none ; box-shadow : none ; }
. cms table . ss-gridfield . field tr td { border-right : 1 px solid #dbdddd ; padding : 10 px ; }
. cms table . ss-gridfield . field tr td . bottom-all { -moz- border-radius-bottomleft : 7 px ; -webkit- border-bottom-left-radius : 7 px ; -o- border-bottom-left-radius : 7 px ; -ms- border-bottom-left-radius : 7 px ; -khtml- border-bottom-left-radius : 7 px ; border-bottom-left-radius : 7 px ; -moz- border-radius-bottomright : 7 px ; -webkit- border-bottom-right-radius : 7 px ; -o- border-bottom-right-radius : 7 px ; -ms- border-bottom-right-radius : 7 px ; -khtml- border-bottom-right-radius : 7 px ; border-bottom-right-radius : 7 px ; background : #7f9198 ; background : -moz- linear-gradient ( #7f9198 20 % , #b1c0c5 ) ; /* FF3.6+ */ background : -webkit- gradient ( linear , left top , left bottom , color-stop ( 20 % , #7f9198 ) , color-stop ( 80 % , #b1c0c5 ) ) ; /* Chrome,Safari4+ */ background : -webkit- linear-gradient ( top , #7f9198 20 % , #b1c0c5 80 % ) ; /* Chrome10+,Safari5.1+ */ background : -o- linear-gradient ( top , #7f9198 20 % , #b1c0c5 80 % ) ; /* Opera 11.10+ */ filter : progid : DXImageTransform . Microsoft . gradient ( GradientType = 0 , startColorstr = '#7f9198' , endColorstr = '#b1c0c5' ) ; /* IE5.5+ */ background : -ms- linear-gradient ( top , #7f9198 20 % , #7f9198 80 % ) ; /* IE10+ */ background : linear-gradient ( top , #7f9198 20 % , #b1c0c5 80 % ) ; /* W3C */ }