tonyair
/
silverstripe-dms
mirror of https://github.com/silverstripe/silverstripe-dms
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: Styling to DMS actions button and panel

This commit is contained in:
Ryan O'Hara 2012-08-13 17:51:59 +12:00
parent ba51c38262
commit bf0236d74a
3 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/DMSDocumentCMSFields.css
View File

@ -21,8 +21,10 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
#Actions { box-shadow: none; border: none; padding: 0; }
#Actions li { margin-left: 2px; }
#Actions li:first-child { margin-left: 0; }
#Actions li.delete-button-appended { display: inline-block; position: relative; margin-left: 0; }
#Actions li.dms-active { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); box-shadow: 0 1px 1px 0 #A0A0A0 inset; }
#Actions li.dms-active:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; }
#ActionsPanel { display: none; }
#ActionsPanel .middleColumn { margin-left: 184px; }
#ActionsPanel label.fieldholder-small-label { display: none; }
#ActionsPanel .fieldgroup-field { float: none; width: auto; }

1
javascript/DMSDocumentCMSFields.js
View File

@ -32,6 +32,7 @@
//add active state to the current button
$('#Actions ul li').removeClass('dms-active');
this.addClass('dms-active');
//$('li.dms-active').append('<span class="arrow"></span>');
//hide all inner field sections
var panel = $('#ActionsPanel');

33
scss/DMSDocumentCMSFields.scss
View File

@ -96,11 +96,42 @@ form.small .field .TreeDropdownField,
&:first-child{
margin-left: 0;
}
&.delete-button-appended{
display: inline-block;
position: relative;
margin-left: 0;
}
&.dms-active{
border-bottom:1px solid #C0C0C2;
@include background(
linear-gradient(color-stops(
darken($color-button-generic, 15%),
$color-button-generic
))
);
box-shadow: 0 1px 1px 0 #A0A0A0 inset;
&:after{
content: '';
display: block;
position: absolute;
top: 33px;
left: 50%;
margin-left: -6px;
width: 12px;
height: 12px;
background: #F8F8F8;
border-right: 1px solid #B3B3B3;
border-top: 1px solid #B3B3B3;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
pointer-events:none;
}
}
}
}
#ActionsPanel{
display: none;
//display: none;
.middleColumn{
margin-left:184px;
}