ENHANCEMENT: Add styling to Document type buttons. TODO - Allow selected styling to only be added once.

This commit is contained in:
Ryan O'Hara 2012-08-06 16:55:57 +12:00
parent 3f2956bf95
commit aa9075af79
3 changed files with 70 additions and 14 deletions

View File

@ -1,3 +1,8 @@
/* #Root_Documents{
table{
white-space:normal;
}
} */
#FileP .fieldgroup-field { width: 100%; } #FileP .fieldgroup-field { width: 100%; }
#FileP .fieldgroup-field .cms-file-info-data { width: 400px; } #FileP .fieldgroup-field .cms-file-info-data { width: 400px; }
#FileP .fieldgroup-field .fieldholder-small { margin-top: 5px; } #FileP .fieldgroup-field .fieldholder-small { margin-top: 5px; }
@ -6,9 +11,16 @@
#DocumentTypeID ul { padding: 0; } #DocumentTypeID ul { padding: 0; }
#DocumentTypeID ul input[type="radio"] { display: none; } #DocumentTypeID ul input[type="radio"] { display: none; }
#DocumentTypeID ul li { display: inline; float: none; padding: 4px; } #DocumentTypeID ul li { display: inline-block; padding: 0; width: auto; margin-right: 0; border-radius: 0; border-left: 1px solid #C0C0C2; border-right: 1px solid #f4f4f4; }
#DocumentTypeID ul li.selected { border-bottom: 1px solid #555; border-top: 1px solid #e6e6e6; } #DocumentTypeID ul li:first-child { border-radius: 6px 0 0 6px; }
#DocumentTypeID ul li:last-child { border-radius: 0 6px 6px 0; border-right: 1px solid #C0C0C2; }
#DocumentTypeID ul li.selected { border-bottom: 1px solid #e9e9e9; border-right: 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 #555 inset; }
#DocumentTypeID ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; }
#DocumentTypeID ul li label { padding: .4em 1em; display: block; line-height: 1.4; }
#Actions li { margin-left: 2px; }
#Actions li:first-child { margin-left: 0; }
#ReplaceFile { display: none; } #ReplaceFile { display: none; }
table.ss-gridfield-table { width: 400px; } .cms fieldset table.ss-gridfield-table { width: 900px; }

View File

@ -4,7 +4,7 @@
$('#DocumentTypeID ul li').entwine({ $('#DocumentTypeID ul li').entwine({
onmatch: function() { onmatch: function() {
this.addClass('ss-ui-button'); this.addClass('ui-button ss-ui-button ui-corner-all ui-state-default ui-widget ui-button-text-only');
this.parents('ul').removeClass('ui-tabs-nav'); this.parents('ul').removeClass('ui-tabs-nav');
}, },
}); });

View File

@ -1,3 +1,14 @@
/* #Root_Documents{
table{
white-space:normal;
}
} */
@import "compass/css3";
$color-button-generic: #e6e6e6 !default;
#FileP{ #FileP{
.fieldgroup-field{ .fieldgroup-field{
width:100%; width:100%;
@ -28,25 +39,58 @@
display:none; display:none;
} }
li{ li{
display:inline; display:inline-block;
float: none; padding:0;
padding:4px; width:auto;
margin-right: 0;
border-radius:0;
border-left: 1px solid #C0C0C2;
border-right: 1px solid lighten(#C0C0C2, 20%);
&:first-child{
border-radius: 6px 0 0 6px;
}
&:last-child{
border-radius: 0 6px 6px 0;
border-right: 1px solid #C0C0C2;
}
&.selected{ &.selected{
border-bottom:1px solid #555; border-bottom:1px solid lighten($color-button-generic, 1%);
border-top:1px solid #e6e6e6; border-right: 1px solid #C0C0C2;
@include background(
linear-gradient(color-stops(
darken($color-button-generic, 15%),
$color-button-generic
))
);
box-shadow: 0 1px 1px 0 #555 inset;
:after{
box-shadow: 0 1px 1px 0 #DDD;
}
} }
label{ label{
//display: inline-block; padding: .4em 1em;
//padding: 4px 10px; display: block;
line-height: 1.4;
} }
} }
} }
} }
#Actions{
li{
margin-left: 2px;
&:first-child{
margin-left: 0;
}
}
}
#ReplaceFile{ #ReplaceFile{
display:none; display:none;
} }
table.ss-gridfield-table{ .cms{
width: 400px; fieldset{
table.ss-gridfield-table{
width: 900px;
}
}
} }