mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
3ee8f505b7
The main benefit of this is so that authors who make use of
.editorconfig don't end up with whitespace changes in their PRs.
Spaces vs. tabs has been left alone, although that could do with a
tidy-up in SS4 after the switch to PSR-1/2.
The command used was this:
for match in '*.ss' '*.css' '*.scss' '*.html' '*.yml' '*.php' '*.js' '*.csv' '*.inc' '*.php5'; do
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" -exec sed -E -i '' 's/[[:space:]]+$//' {} \+
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" | xargs perl -pi -e 's/ +$//'
done
688 lines
16 KiB
SCSS
688 lines
16 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/_mixins";
|
||
@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_gradient_dark: darken($color-base, 8%);
|
||
$gf_colour_header_border: $gf_colour_gradient_dark;
|
||
$gf_colour_subheader: saturate(lighten($color-base, 15%),5%);
|
||
$gf_colour_border: rgba(0,0,0,.1);
|
||
$gf_colour_zebra: #F0F4F7;
|
||
$gf_colour_font: #666;
|
||
$gf_colour_text_shadow: rgba(0,0,0,.2);
|
||
$gf_colour_text_shadow_dark: rgba(0,0,0,.4);
|
||
$gf_border_radius: 5px;
|
||
|
||
$gf_grid_y: 12px;
|
||
$gf_grid_x: 16px;
|
||
|
||
|
||
.cms {
|
||
.ss-gridfield {
|
||
& > div {
|
||
margin-bottom: $gf_grid_y*3;
|
||
&.addNewGridFieldButton{
|
||
margin-bottom: 0;
|
||
.action {
|
||
margin-bottom:$gf_grid_y;
|
||
}
|
||
}
|
||
&.ss-gridfield-buttonrow-before{
|
||
margin-bottom: 0;
|
||
.action {
|
||
margin-bottom:$gf_grid_y;
|
||
}
|
||
}
|
||
&.ss-gridfield-buttonrow-after{
|
||
margin-bottom: 0;
|
||
.action {
|
||
margin-top:$gf_grid_y;
|
||
}
|
||
}
|
||
}
|
||
|
||
&[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 {
|
||
span.btn-icon-download-csv {
|
||
height:17px; //exact height of icon
|
||
}
|
||
}
|
||
.right {
|
||
float:right;
|
||
& > * {
|
||
float: right;
|
||
margin-left:$gf_grid_x/2;
|
||
}
|
||
|
||
.pagination-records-number {
|
||
font-size: 1.0em;
|
||
padding: 6px 3px 6px 0;
|
||
color: $color-text-light;
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
.left {
|
||
float:left;
|
||
& > * {
|
||
margin-right:$gf_grid_x/2;
|
||
float: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
span {
|
||
float: left;
|
||
@include inline-block(top);
|
||
}
|
||
input.relation-search {
|
||
width: 270px; height: 32px;
|
||
margin-bottom: $gf_grid_y;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
button#action_gridfield_relationadd {
|
||
height: 32px;
|
||
margin-left: 0; // Webkit needs this
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
border-left: none;
|
||
}
|
||
}
|
||
.grid-csv-button, .grid-print-button {
|
||
margin-bottom: 0;
|
||
font-size: $font-base-size;
|
||
@include inline-block();
|
||
}
|
||
}
|
||
table.ss-gridfield-table {
|
||
display: table;
|
||
@include box-shadow-none;
|
||
padding: 0;
|
||
border-collapse: separate;
|
||
border-bottom: 0 none;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
thead {
|
||
color: darken($color-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;
|
||
tr {
|
||
// This lets iOS Safari know that these elements are clickable
|
||
// and so to send the click events.
|
||
cursor: pointer;
|
||
}
|
||
td {
|
||
width: auto;
|
||
max-width: 500px; //This number is semi-arbitary. It is acting as a percentage limit, rather than actually constricting the width to 500px.
|
||
word-wrap:break-word;
|
||
// Give browser some hints on which cols take priority:
|
||
// The last column (buttons) should always shrink to fit.
|
||
// Overwritten for IE7, which doesnt support this.
|
||
&.col-buttons {
|
||
width: 1px;
|
||
padding:0 $gf_grid_x/2;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
&.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 3px -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.status-modified {
|
||
color: #7E7470;
|
||
border: 1px solid #C9B800;
|
||
background-color: #FFF0BC;
|
||
}
|
||
|
||
span.badge.status-addedtodraft {
|
||
color: #7E7470;
|
||
border: 1px solid #C9B800;
|
||
background-color: #FFF0BC;
|
||
}
|
||
|
||
span.badge.status-deletedonlive {
|
||
color: #636363;
|
||
border: 1px solid #E49393;
|
||
background-color: #F2DADB;
|
||
}
|
||
|
||
span.badge.status-removedfromdraft {
|
||
color: #636363;
|
||
border: 1px solid #E49393;
|
||
background-color: #F2DADB;
|
||
}
|
||
|
||
span.badge.status-workflow-approval {
|
||
color: #56660C;
|
||
border: 1px solid #7C8816;
|
||
background-color: #DAE79A;
|
||
}
|
||
}
|
||
|
||
button {
|
||
border: none;
|
||
background: none;
|
||
margin: 0 0 0 2px;
|
||
padding: 1px 0;
|
||
width: auto;
|
||
text-shadow: none;
|
||
&.ui-state-hover {
|
||
background:none;
|
||
@include box-shadow-none;
|
||
}
|
||
&.ui-state-active {
|
||
border:none;
|
||
@include box-shadow-none;
|
||
}
|
||
&.gridfield-button-delete {
|
||
width: 20px;
|
||
margin: 0;
|
||
span.btn-icon-decline {
|
||
left: 2px;
|
||
}
|
||
}
|
||
}
|
||
a.view-link, a.edit-link {
|
||
display:inline-block;
|
||
width:20px;
|
||
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 2px 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
tfoot {
|
||
color: darken($color-base, 50%);
|
||
tr {
|
||
td {
|
||
background: $color-base;
|
||
padding: .7em;
|
||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
tr {
|
||
&.title {
|
||
th {
|
||
position: relative;
|
||
background: $gf_colour_gradient_dark;
|
||
border-bottom: 1px solid darken($gf_colour_gradient_dark,5%);
|
||
padding: 5px;
|
||
min-height: 40px; //this is to accomodate the add new button.
|
||
@include background-image(linear-gradient($color-base, $gf_colour_gradient_dark));
|
||
@include single-text-shadow($gf_colour_text_shadow_dark, 0px, -1px, 0);
|
||
h2{
|
||
padding: 0px;
|
||
font-size: $gf_grid_y*1.4;
|
||
color:#fff;
|
||
margin: 1px 8px 0;
|
||
display:inline-block;
|
||
float:left;
|
||
}
|
||
}
|
||
}
|
||
&.sortable-header {
|
||
background: $gf_colour_subheader;
|
||
th{
|
||
padding: 0; // Should be padding: 0 1em; like td
|
||
font-weight: normal;
|
||
.ss-ui-button {
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
&:hover {
|
||
background: #FFFAD6;
|
||
}
|
||
&:first-child {
|
||
background: transparent;
|
||
|
||
&:hover {
|
||
background: #FFFAD6;
|
||
}
|
||
}
|
||
&.ss-gridfield-even {
|
||
background: $gf_colour_zebra;
|
||
|
||
&.ss-gridfield-last {
|
||
border-bottom: none;
|
||
}
|
||
&:hover {
|
||
background: #FFFAD6;
|
||
}
|
||
}
|
||
&.even {
|
||
background: $gf_colour_zebra;
|
||
|
||
&:hover {
|
||
background: #FFFAD6;
|
||
}
|
||
}
|
||
|
||
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:49px;
|
||
box-shadow: none;
|
||
border: none;
|
||
div{
|
||
width:auto;
|
||
display:inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.main{
|
||
white-space:nowrap;
|
||
border-top: 1px solid darken($color-base,4%);
|
||
border-left: 1px solid darken($color-base,4%);
|
||
color:#fff;
|
||
background: $gf_colour_gradient_dark;
|
||
border-bottom: 1px solid $gf_colour_border;
|
||
span{
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
padding-left: $gf_grid_x/2;
|
||
padding-right: $gf_grid_x/2;
|
||
@include hide-text-overflow; // Add ellipses to overflowing text
|
||
margin-right: 8px;
|
||
|
||
}
|
||
&.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);
|
||
}
|
||
|
||
select {
|
||
margin: 0;
|
||
}
|
||
}
|
||
&.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 6px;
|
||
border:none;
|
||
width:100%;
|
||
text-align: left;
|
||
padding: 2px 8px 2px 0; // Doesn't need to be so big now that filter has moved
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
color: #fff;
|
||
@include border-radius(0);
|
||
&:hover {
|
||
background-position: right -34px;
|
||
}
|
||
&.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 -15px 4px,
|
||
linear-gradient(
|
||
$color-menu-button,
|
||
darken($color-menu-button, 10%)
|
||
)
|
||
);
|
||
width: 26px;
|
||
border-top: 1px solid lighten($color-menu-button, 5%);
|
||
|
||
&.hover-alike:active, &:active, &.hover-alike, &:hover {
|
||
@include background (
|
||
$bgImage -15px 4px,
|
||
linear-gradient(
|
||
lighten($color-menu-button, 10%),
|
||
$color-menu-button
|
||
));
|
||
}
|
||
|
||
&.trigger{ //The magnifying glass before filter is opened
|
||
margin-left: $gf_grid_y;
|
||
border:none;
|
||
@include background ($bgImage -17px 6px);
|
||
padding-right: 46px;
|
||
margin: 0 $gf_grid_y/2;
|
||
|
||
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 -17px -38px);
|
||
@include box-shadow-none;
|
||
span{//dropdown arrow
|
||
opacity:0.9;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.ss-gridfield-button-close{
|
||
$bgImage: url(../images/icons/filter-icons.png) no-repeat;
|
||
@include background ($bgImage 8px -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 8px -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;
|
||
padding: 4px;
|
||
// 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";
|
||
border: 1px solid #313232;
|
||
|
||
@each $browser in $browserPlaceholder {
|
||
&#{$browser}{
|
||
font-style:italic;
|
||
color: lighten($color-dark-grey,30%);
|
||
}
|
||
}
|
||
|
||
&:focus {
|
||
@include box-shadow-none;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
span.non-sortable {
|
||
display:block;
|
||
padding: 6px 8px;
|
||
}
|
||
}
|
||
|
||
td {
|
||
border-right: 1px solid $gf_colour_border;
|
||
padding: $gf_grid_x/2 $gf_grid_x/2;
|
||
color: $gf_colour_font;
|
||
&.bottom-all {
|
||
@include border-bottom-radius($gf_border_radius);
|
||
@include background-image(linear-gradient($color-base, $gf_colour_gradient_dark));
|
||
padding: $gf_grid_x/4 $gf_grid_y;
|
||
|
||
.datagrid-footer-message {
|
||
text-align: center;
|
||
padding-top: 6px;
|
||
color:$color-text-light;
|
||
}
|
||
.datagrid-pagination {
|
||
padding-top:1px;
|
||
position:absolute;
|
||
left:50%;
|
||
margin-left:-116px; //half the width of .datagrid-pagination - centers pagination
|
||
.pagination-page-number {
|
||
color:$color-text-light;
|
||
text-align: center;
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
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;
|
||
border: 1px solid darken($gf_colour_gradient_dark, 5%);
|
||
border-bottom: 1px solid lighten($gf_colour_gradient_dark, 5%);
|
||
}
|
||
}
|
||
z-index:5;
|
||
button{
|
||
@include box-shadow-none;
|
||
border:none;
|
||
width:10px;
|
||
margin:0 10px;
|
||
display:inline;
|
||
float:none;
|
||
span {
|
||
text-indent:-9999em;
|
||
}
|
||
&.ss-gridfield-previouspage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat -23px 8px);
|
||
}
|
||
&.ss-gridfield-nextpage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat -47px 8px);
|
||
}
|
||
&.ss-gridfield-firstpage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat 0px 8px);
|
||
}
|
||
&.ss-gridfield-lastpage {
|
||
@include background (url(../images/icons/pagination-arrows.png) no-repeat -73px 8px);
|
||
}
|
||
&.ssui-button-disabled{
|
||
z-index:-1;
|
||
}
|
||
}
|
||
}
|
||
.pagination-records-number {
|
||
float:right;
|
||
padding:6px 0;
|
||
color:$color-text-light;
|
||
@include single-text-shadow($gf_colour_text_shadow, 0px, -1px, 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.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;
|
||
}
|
||
|
||
// Thumbnails e.g. in File admin, UploadField and HtmlEditorField file selection
|
||
td.col-StripThumbnail {
|
||
padding: 2px 4px;
|
||
width: 32px;
|
||
height: 32px;
|
||
|
||
img {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|