mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-01 05:39:10 +02:00
458171ff92
1. Modified gridfield to use default colours 2. Added ability to show and hide the filter 3. Design changes to icons used 4. Gridfield template fixes: Took out broken mark-up from templates (spans were being inserted inside spans), and adjusted styles. Added extra class to template 5. Added "filter by ..." placeholder text to input fields
600 lines
14 KiB
SCSS
600 lines
14 KiB
SCSS
/**
|
||
* Core styles for the basic GridField form field without any specific style.
|
||
*
|
||
* @package framework
|
||
* @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";
|
||
@import "compass/css3/images";
|
||
@import "compass/css3/text-shadow";
|
||
@import "compass/css3/border-radius";
|
||
@import "../admin/scss/themes/default";
|
||
@import "../admin/scss/themes/default";
|
||
@import "_elementMixins";
|
||
|
||
//$experimental-support-for-svg variable comes from
|
||
//imported compass/support file and enables svg gradients in IE9.
|
||
//This is needed for the background gradients to work as desired with
|
||
//multiple images.
|
||
$experimental-support-for-svg: true;
|
||
|
||
$gf_colour_base: desaturate(darken(adjust-hue($color-base, -10%), 10%),5%);
|
||
$gf_colour_gradient_light: lighten($gf_colour_base, 10%);
|
||
$gf_colour_gradient_dark: darken($gf_colour_base, 5%);
|
||
$gf_colour_header_border: $gf_colour_gradient_dark;
|
||
$gf_colour_subheader: saturate(lighten($gf_colour_base, 15%),5%);
|
||
$gf_colour_border: rgba(0,0,0,.1);
|
||
$gf_colour_zebra: lighten($gf_colour_subheader,17%);
|
||
$gf_colour_font: #666;
|
||
$gf_colour_text_shadow: rgba(0,0,0,.3);
|
||
$gf_border_radius: 7px;
|
||
|
||
$gf_grid_y: 12px;
|
||
$gf_grid_x: 16px;
|
||
|
||
@mixin box-shadow-none {
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.cms {
|
||
.ss-gridfield {
|
||
& > div {
|
||
margin-bottom: $gf_grid_y*3;
|
||
}
|
||
|
||
&[data-selectable] {
|
||
tr.ui-selected, tr.ui-selecting {
|
||
background: #FFFAD6 !important;
|
||
}
|
||
|
||
td {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
span button#action_gridfield_relationfind {
|
||
display:none; //hides find button - redundant functionality
|
||
}
|
||
|
||
p button#action_export {
|
||
margin-top:$gf_grid_y;
|
||
span.btn-icon-download-csv {
|
||
height:17px; //exact height of icon
|
||
}
|
||
span.ui-button-text {
|
||
padding-left:26px; //to accomodate wider export icon
|
||
}
|
||
}
|
||
}
|
||
|
||
.ss-gridfield {
|
||
.grid-levelup {
|
||
text-indent: -9999em;
|
||
a.list-parent-link{
|
||
background: transparent url(../images/gridfield-level-up.png) no-repeat 0 0;
|
||
display:block;
|
||
}
|
||
margin-bottom: 6px;
|
||
}
|
||
.add-existing-autocompleter {
|
||
input.relation-search {
|
||
width: 380px;
|
||
}
|
||
width: 500px;
|
||
}
|
||
.grid-print-button{
|
||
display: inline-block;
|
||
}
|
||
.grid-csv-button{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
table.ss-gridfield-table {
|
||
display: table;
|
||
box-shadow: none;
|
||
padding: 0;
|
||
border-collapse: separate;
|
||
border-bottom: 0 none;
|
||
width: 100%;
|
||
|
||
thead {
|
||
color: darken($gf_colour_base, 50%);
|
||
background: transparent;
|
||
tr.filter-header {
|
||
.fieldgroup {
|
||
max-width:$gf_grid_x*32; //max width 512px
|
||
.fieldgroup-field {
|
||
padding:0;
|
||
}
|
||
}
|
||
}
|
||
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 {
|
||
background: #FFF;
|
||
td {
|
||
// Give browser some hints on which cols take priority:
|
||
// The last column (buttons) should always shrink to fit.
|
||
// Overwritten for IE7, which doesn't support this.
|
||
width: auto;
|
||
white-space:nowrap;
|
||
&.col-buttons {
|
||
width: 70px;
|
||
padding:0;
|
||
text-align: right;
|
||
}
|
||
|
||
&.col-description {
|
||
width: auto;
|
||
}
|
||
|
||
&.col-listChildrenLink {
|
||
width:$gf_grid_x;
|
||
border-right:none;
|
||
text-indent:-9999em;
|
||
padding:0;
|
||
.list-children-link {
|
||
background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px;
|
||
display:block;
|
||
}
|
||
}
|
||
|
||
&.col-getTreeTitle {
|
||
span.item {
|
||
color:$color-text-blue-link;
|
||
}
|
||
span.badge {
|
||
clear: both;
|
||
text-transform: uppercase;
|
||
display: inline-block;
|
||
padding: 0px 3px;
|
||
font-size: 0.75em;
|
||
line-height: 1em;
|
||
margin-left: 10px;
|
||
margin-right: 6px;
|
||
margin-top: -1px;
|
||
@include border-radius(2px, 2px);
|
||
}
|
||
|
||
span.badge.modified {
|
||
color: #7E7470;
|
||
border: 1px solid #C9B800;
|
||
background-color: #FFF0BC;
|
||
}
|
||
|
||
span.badge.addedtodraft {
|
||
color: #7E7470;
|
||
border: 1px solid #C9B800;
|
||
background-color: #FFF0BC;
|
||
}
|
||
|
||
span.badge.deletedonlive {
|
||
color: #636363;
|
||
border: 1px solid #E49393;
|
||
background-color: #F2DADB;
|
||
}
|
||
|
||
span.badge.removedfromdraft {
|
||
color: #636363;
|
||
border: 1px solid #E49393;
|
||
background-color: #F2DADB;
|
||
}
|
||
|
||
span.badge.workflow-approval {
|
||
color: #56660C;
|
||
border: 1px solid #7C8816;
|
||
background-color: #DAE79A;
|
||
}
|
||
}
|
||
|
||
button {
|
||
border: none;
|
||
background: none;
|
||
margin: 0 0 0 2px;
|
||
padding: 0;
|
||
width: auto;
|
||
text-shadow: none;
|
||
&.ui-state-hover {
|
||
background:none;
|
||
@include box-shadow-none;
|
||
}
|
||
&.ui-state-active {
|
||
border:none;
|
||
@include box-shadow-none;
|
||
}
|
||
}
|
||
a.view-link, a.edit-link {
|
||
display:inline-block;
|
||
width:$gf_grid_x;
|
||
height:20px; //min height to fit the edit icon
|
||
text-indent:9999em;
|
||
overflow: hidden;
|
||
vertical-align: middle;
|
||
}
|
||
a.view-link {
|
||
background: url(../admin/images/btn-icon/magnifier.png) no-repeat 0 1px;
|
||
}
|
||
a.edit-link {
|
||
background: url(../admin/images/btn-icon/document--pencil.png) no-repeat 0 1px;
|
||
}
|
||
}
|
||
}
|
||
|
||
tfoot {
|
||
color: darken($gf_colour_base, 50%);
|
||
tr {
|
||
td {
|
||
background: $gf_colour_base;
|
||
padding: .7em;
|
||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
tr {
|
||
&.title {
|
||
th {
|
||
position: relative;
|
||
background: $gf_colour_gradient_dark;
|
||
border-top: 1px solid $gf_colour_border;
|
||
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 single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
h2{
|
||
padding: 0px;
|
||
font-size: $gf_grid_y*1.4;
|
||
color:#fff;
|
||
margin:3px 8px 0;
|
||
display:inline-block;
|
||
}
|
||
.right > * {
|
||
float: right;
|
||
font-size: $gf_grid_y*1.2;
|
||
}
|
||
.left > * {
|
||
float: left;
|
||
font-size: $gf_grid_y*1.2;
|
||
}
|
||
}
|
||
}
|
||
&.sortable-header {
|
||
background: $gf_colour_subheader;
|
||
th{
|
||
padding: 0px;
|
||
}
|
||
}
|
||
&:hover {
|
||
background: #FFFAD6 !important;
|
||
}
|
||
&:first-child {
|
||
background: transparent;
|
||
}
|
||
&.ss-gridfield-even {
|
||
background: $gf_colour_zebra;
|
||
|
||
&.ss-gridfield-last {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
&.even {
|
||
background: $gf_colour_zebra;
|
||
}
|
||
|
||
th {
|
||
font-weight: bold;
|
||
font-size: $gf_grid_y;
|
||
color: #FFF;
|
||
padding: 5px;
|
||
border-right: 1px solid $gf_colour_border;
|
||
|
||
div {
|
||
&.fieldgroup,&.fieldgroup-field {
|
||
width: 100%;
|
||
position:relative;
|
||
}
|
||
&.fieldgroup {
|
||
min-width: $gf_grid_x*12.5;
|
||
padding-right:0;
|
||
&.filter-buttons{
|
||
min-width:0;
|
||
div{
|
||
@extend .col-buttons;
|
||
width:auto;
|
||
display:inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.main{
|
||
white-space:nowrap;
|
||
border-top: 1px solid $gf_colour_border;
|
||
color:#fff;
|
||
background: darken($gf_colour_subheader,10%);
|
||
border-bottom: 1px solid $gf_colour_border;
|
||
span{
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
}
|
||
&.col-listChildrenLink {
|
||
border-right:none;
|
||
}
|
||
}
|
||
&.extra,&.action {
|
||
padding: 0;
|
||
cursor: default;
|
||
}
|
||
&.extra {
|
||
position:relative;
|
||
background:darken($color-dark-grey, 10%);
|
||
background: rgba(#000, 0.7);
|
||
padding: 5px;
|
||
border-top: $gf_colour_text_shadow;
|
||
input {
|
||
height:28px; //height of input field - to match design.
|
||
}
|
||
button.ss-ui-button {
|
||
padding: .3em;
|
||
line-height: 1;
|
||
@include box-shadow-none;
|
||
position: relative;
|
||
border-bottom-width: 0;
|
||
@include border-radius(2px, 2px);
|
||
}
|
||
}
|
||
&.first {
|
||
@include border-top-left-radius($gf_border_radius);
|
||
}
|
||
&.last {
|
||
@include border-top-right-radius($gf_border_radius);
|
||
}
|
||
|
||
|
||
|
||
button {
|
||
&#action_gridfield_relationadd:hover {
|
||
color: #444 !important; /* Not sure why IE think it needs this */
|
||
}
|
||
&:hover {
|
||
color: #ccc !important; /* Not sure why IE think it needs this */
|
||
}
|
||
&.ss-gridfield-sort:hover {
|
||
color: #fff !important;
|
||
@include box-shadow-none;
|
||
}
|
||
&.ss-gridfield-sort {
|
||
background: transparent url(../images/arrows.png) no-repeat right 10px;
|
||
border:none;
|
||
width:100%;
|
||
text-align: left;
|
||
padding: 4px 8px 4px 0;
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
color: #fff;
|
||
@include border-radius(0);
|
||
&:hover {
|
||
background-position: right -30px;
|
||
}
|
||
&.ss-gridfield-sorted-desc {
|
||
background-position: right -72px;
|
||
}
|
||
&.ss-gridfield-sorted-asc {
|
||
background-position: right -116px;
|
||
}
|
||
}
|
||
|
||
&.ss-ui-button{
|
||
&.ss-gridfield-button-filter{
|
||
$bgImage: url(../images/icons/filter-icons.png) no-repeat;
|
||
background-color:lighten($color-menu-button,10%);
|
||
@include gridFieldButtons;
|
||
@include background(
|
||
$bgImage -14px 4px,
|
||
linear-gradient(
|
||
$color-menu-button,
|
||
darken($color-menu-button, 10%)
|
||
)
|
||
);
|
||
border-top: 1px solid lighten($color-menu-button, 5%);
|
||
|
||
&.hover-alike:active, &:active, &.hover-alike, &:hover {
|
||
@include background (
|
||
$bgImage -14px 4px,
|
||
linear-gradient(
|
||
lighten($color-menu-button, 10%),
|
||
$color-menu-button
|
||
));
|
||
}
|
||
|
||
&#showFilter{ //The magnifying glass before filter is opened
|
||
margin-left: $gf_grid_y;
|
||
border:none;
|
||
@include background ($bgImage -17px 6px);
|
||
|
||
span{ //this is the dropdown arrow
|
||
opacity: 0.4;
|
||
position:absolute;
|
||
width:10px;
|
||
left:30px;
|
||
top:40%;
|
||
background: url(../admin/images/btn_arrow_down_grey.png) no-repeat 0px 0px;
|
||
}
|
||
&:hover{
|
||
@include background ($bgImage -40px 6px);
|
||
span{//dropdown arrow
|
||
opacity:0.9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.ss-gridfield-button-close{
|
||
$bgImage: url(../images/icons/filter-icons.png) no-repeat;
|
||
@include background ($bgImage 7px -17px);
|
||
@include gridFieldButtons;
|
||
width:25px;
|
||
opacity:0.8;
|
||
margin-right:-5px; //For IE
|
||
&.hover-alike:active, &:active, &.hover-alike, &:hover {
|
||
opacity:1;
|
||
@include background (
|
||
$bgImage 7px -17px,
|
||
linear-gradient(
|
||
rgba(#fff,0.1),
|
||
rgba(#fff,0.1)
|
||
)
|
||
);
|
||
}
|
||
|
||
}
|
||
&.ss-gridfield-button-reset{
|
||
@include gridFieldButtons;
|
||
position:absolute;
|
||
top: -21px;
|
||
right: -1px;
|
||
width:20px;
|
||
height:20px;
|
||
display:none;
|
||
|
||
&.filtered{
|
||
display:block;
|
||
|
||
background: url(../admin/images/btn-icon/cross.png) no-repeat 0px 0px;
|
||
opacity:0.5;
|
||
&:hover{
|
||
opacity:0.8;
|
||
}
|
||
&:active {
|
||
opacity:1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
input {
|
||
&.ss-gridfield-sort {
|
||
height:25px;
|
||
// Placeholder styling done with an each loop because when a browser
|
||
// doesn’t understand a selector, it invalidates the entire line of selectors.
|
||
// This avoids that, and keeps the scss tidy
|
||
$browserPlaceholder: "::-webkit-input-placeholder", ":-moz-placeholder", ":-ms-input-placeholder", ":placeholder";
|
||
|
||
@each $browser in $browserPlaceholder {
|
||
&#{$browser}{
|
||
font-style:italic;
|
||
color: lighten($color-dark-grey,30%);
|
||
}
|
||
}
|
||
|
||
&:focus {
|
||
@include box-shadow-none;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
span.non-sortable {
|
||
padding:1em 1em;
|
||
display:block;
|
||
}
|
||
}
|
||
|
||
td {
|
||
border-right: 1px solid $gf_colour_border;
|
||
padding: $gf_grid_x/2.5 $gf_grid_y;
|
||
color: $gf_colour_font;
|
||
&.bottom-all {
|
||
@include border-bottom-radius($gf_border_radius);
|
||
@include background-image(linear-gradient($gf_colour_gradient_light, $gf_colour_gradient_dark));
|
||
.datagrid-footer-message {
|
||
text-align: center;
|
||
padding-top: 6px;
|
||
color:$color-text-light;
|
||
}
|
||
.datagrid-pagination {
|
||
padding-top:2px;
|
||
position:absolute;
|
||
left:50%;
|
||
margin-left:-116px; //half the width of .datagrid-pagination - centers pagination
|
||
.pagination-page-number {
|
||
color:$color-text-light;
|
||
input {
|
||
width:35px; //exact width so that a four digit number can be entered
|
||
height:18px;
|
||
margin-bottom:-6px; //moves input field up to be aligned with the pagination buttons
|
||
padding:0px;
|
||
}
|
||
}
|
||
button.ss-gridfield-previouspage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat -23px 7px);
|
||
@include box-shadow-none;
|
||
border:none;
|
||
width:10px;
|
||
margin:0 10px;
|
||
span {
|
||
text-indent:-9999em;
|
||
}
|
||
}
|
||
button.ss-gridfield-nextpage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat -47px 7px);
|
||
@include box-shadow-none;
|
||
border:none;
|
||
width:10px;
|
||
margin:0 10px;
|
||
span {
|
||
text-indent:-9999em;
|
||
}
|
||
}
|
||
button.ss-gridfield-firstpage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat 0px 7px);
|
||
@include box-shadow-none;
|
||
border:none;
|
||
width:10px;
|
||
margin:0 10px;
|
||
span {
|
||
text-indent:-9999em;
|
||
}
|
||
}
|
||
button.ss-gridfield-lastpage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat -73px 7px);
|
||
@include box-shadow-none;
|
||
border:none;
|
||
width:10px;
|
||
margin:0 10px;
|
||
span {
|
||
text-indent:-9999em;
|
||
}
|
||
}
|
||
}
|
||
.pagination-records-number {
|
||
float:right;
|
||
padding:6px 0;
|
||
color:$color-text-light;
|
||
}
|
||
}
|
||
}
|
||
&.last td {
|
||
border-bottom: 0 none;
|
||
}
|
||
}
|
||
td:first-child{
|
||
border-left: 1px solid $gf_colour_border;
|
||
}
|
||
td:last-child{
|
||
border-right: 1px solid $gf_colour_border;
|
||
}
|
||
}
|
||
}
|