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 .cms-file-info-data { width: 400px; }
#FileP .fieldgroup-field .fieldholder-small { margin-top: 5px; }
@ -6,9 +11,16 @@
#DocumentTypeID ul { padding: 0; }
#DocumentTypeID ul input[type="radio"] { display: none; }
#DocumentTypeID ul li { display: inline; float: none; padding: 4px; }
#DocumentTypeID ul li.selected { border-bottom: 1px solid #555; border-top: 1px solid #e6e6e6; }
#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: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; }
table.ss-gridfield-table { width: 400px; }
.cms fieldset table.ss-gridfield-table { width: 900px; }

View File

@ -4,7 +4,7 @@
$('#DocumentTypeID ul li').entwine({
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');
},
});

View File

@ -1,3 +1,14 @@
/* #Root_Documents{
table{
white-space:normal;
}
} */
@import "compass/css3";
$color-button-generic: #e6e6e6 !default;
#FileP{
.fieldgroup-field{
width:100%;
@ -28,25 +39,58 @@
display:none;
}
li{
display:inline;
float: none;
padding:4px;
display:inline-block;
padding:0;
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{
border-bottom:1px solid #555;
border-top:1px solid #e6e6e6;
border-bottom:1px solid lighten($color-button-generic, 1%);
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{
//display: inline-block;
//padding: 4px 10px;
padding: .4em 1em;
display: block;
line-height: 1.4;
}
}
}
}
#Actions{
li{
margin-left: 2px;
&:first-child{
margin-left: 0;
}
}
}
#ReplaceFile{
display:none;
}
table.ss-gridfield-table{
width: 400px;
.cms{
fieldset{
table.ss-gridfield-table{
width: 900px;
}
}
}