Skip to content

Commit

Permalink
MINOR Tree and content toolbar styling fixes (SSF-138, SSF-71)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chillu
jbridson authored and chillu committed Feb 13, 2012
1 parent 4bd526f commit 23e7aee
Show file tree
Hide file tree
Showing 11 changed files with 294 additions and 66 deletions.
11 changes: 11 additions & 0 deletions admin/css/ie7.css
View file
@@ -1,3 +1,14 @@
html { overflow: hidden; } html { overflow: hidden; }


.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; } .field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }

.ss-ui-button.cms-page-add-button { float: left; }

.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn_icons-saaa1989272.png") 5px -49px no-repeat; }

.cms-tree-view-modes div { float: left; }
.cms-tree-view-modes span { float: left; padding-top: 5px; }

.cms-content-toolbar { border-bottom: 1px solid #c9cdce; padding-bottom: 5px; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
8 changes: 8 additions & 0 deletions admin/css/ie8.css
View file
@@ -1,2 +1,10 @@
.cms-panel .cms-panel-content-collapsed { width: 40px; } .cms-panel .cms-panel-content-collapsed { width: 40px; }
.cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { display: none; } .cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { display: none; }

.cms-content-toolbar .cms-tree-view-modes .checkboxAboveTree { margin-right: 1px; }

.cms-content-toolbar { border-bottom: 1px solid #c9cdce; }

.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn_icons-saaa1989272.png") 5px -49px no-repeat; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
86 changes: 58 additions & 28 deletions admin/css/screen.css
View file

Large diffs are not rendered by default.

Binary file added admin/images/content-header-tabs-sprite.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added admin/images/textures/cms_content_header.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
159 changes: 124 additions & 35 deletions admin/scss/_style.scss
View file
@@ -1,4 +1,4 @@
/** /**
* This file defines most styles of the CMS: Colors, fonts, backgrounds, * This file defines most styles of the CMS: Colors, fonts, backgrounds,
* alignments, dimensions. * alignments, dimensions.
* *
Expand Down Expand Up @@ -53,6 +53,16 @@ body.cms {
strong { strong {
font-weight: bold; font-weight: bold;
} }

.ss-ui-button.cms-page-add-button {
margin-left:0px;
font-size:13px;
@include border-radius(4px);
}

.ss-ui-button.cms-page-add-button:hover {
text-decoration:none;
}
} }


/** -------------------------------------------- /** --------------------------------------------
Expand Down Expand Up @@ -89,17 +99,14 @@ body.cms {




.cms-content-header { .cms-content-header {
background-color: darken($color-widget-bg, 20%); padding: ($grid-vertical - 8) $grid-horizontal $grid-vertical;
padding: $grid-vertical $grid-horizontal ($grid-vertical - 2);
height: $grid-vertical * 4; height: $grid-vertical * 4;
z-index: 60; z-index: 60;
border-bottom: 2px solid darken($color-widget-bg, 35%);


@include box-shadow($color-widget-bg 0 $grid-vertical $grid-vertical*2); background: {

image:url(../images/textures/cms_content_header.png);
@include background-image( repeat:repeat;
linear-gradient(darken($color-widget-bg, 10%), darken($color-widget-bg, 30%)) }
);


h2 { h2 {
float: left; float: left;
Expand All @@ -119,41 +126,85 @@ body.cms {
} }


.cms-content-header-tabs { .cms-content-header-tabs {
float: left; position:fixed;
right:40px;
} }
} }


.ui-tabs .cms-content-header, .cms-dialog .ui-tabs-nav { .ui-tabs .cms-content-header, .cms-dialog .ui-tabs-nav {
.ui-tabs-nav li { .ui-tabs-nav li {
margin:0;
a { a {
font-weight: bold; font-weight: bold;
line-height: $grid-vertical * 2; line-height: $grid-vertical * 2;
padding: ($grid-vertical * 2 - 5) $grid-horizontal + 4 $grid-vertical + 1; padding: ($grid-vertical * 2 - 4) ($grid-horizontal * 2 + 4) $grid-vertical + 3;
border-bottom: 2px solid darken($color-tab, 15%); text-indent: -9999em;

&.content-treeview {
background:url(../images/content-header-tabs-sprite.png) no-repeat 2px 0px;
}
&.content-galleryview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -87px 0px;
}
&.content-listview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -38px 0px;
}
} }
} }


.ui-state-default, .ui-state-default,
.ui-widget-content .ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default { .ui-widget-header .ui-state-default {
background-color: $color-tab; background-color: $color-base;
@include background-image( @include background-image(
linear-gradient($color-tab, darken($color-tab, 10%) linear-gradient($color-base, darken($color-base, 12%))
)); );


border-color: darken($color-tab, 20%); border: {
right-color: darken($color-tab, 20%);
left-color: $color-tab;
top:none;
bottom:none;
}

text-shadow: lighten($color-tab, 60%) 0 1px 0; text-shadow: lighten($color-tab, 60%) 0 1px 0;
} }


.ui-state-active, .ui-state-active,
.ui-widget-content .ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active { .ui-widget-header .ui-state-active {
background: $color-widget-bg; background: $color-widget-bg;
border: {
right-color: darken($color-tab, 20%);
left-color: darken($color-tab, 20%);
top:none;
}
margin-right:-1px;
margin-left:-1px;
z-index:2;


a { a {
border-bottom: 2px solid $color-widget-bg; border-bottom:none;

&.content-treeview {
background:url(../images/content-header-tabs-sprite.png) no-repeat 2px -40px;
}
&.content-galleryview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -87px -40px;
}
&.content-listview {
background:url(../images/content-header-tabs-sprite.png) no-repeat -38px -40px;
}
} }
} }

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-radius:0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-radius:0;
}
} }


/** ------------------------------------------------------- /** -------------------------------------------------------
Expand Down Expand Up @@ -385,11 +436,57 @@ body.cms {
@include legacy-pie-clearfix(); @include legacy-pie-clearfix();


& > * { & > * {
float: left; float: right;
} }


.cms-tree-view-modes * { .cms-tree-view-modes * {
display: inline-block; display: inline-block;
label {
color:$color-text-blue-link;
}
}

/* smaller treedropdown */
.chzn-container-single .chzn-single {
height: 26px;
line-height: 26px;
padding-left:25px;
color: darken($color-dark-grey, 15%);
@include background-image(
linear-gradient($color-button-generic, darken($color-button-generic, 10%))
);
font: {
size:13px;
weight:bold;
}
text-shadow:darken($color-text-shadow, 10%) 0 -1px 1px;
box-shadow:none;
&:hover {
@include box-shadow(0 0 5px darken($color-button-generic, 20%));
@include background-image(
linear-gradient(lighten($color-button-generic, 2%), darken($color-button-generic, 8%))
);
}

&:active {
@include box-shadow(inset 0 1px 3px darken($color-button-generic, 60%));
}

span {
padding-top:1px;
}

div {
background:url(../images/btn_icons/settings.png) 5px 4px no-repeat;
border-left:none;
width:100%;
}

div b {
background: url(../images/sprites_32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px;
float:right;
width:24px;
}
} }
} }


Expand All @@ -405,8 +502,7 @@ body.cms {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
z-index: 70; z-index: 70;
float: left; @include box-shadow($color-shadow-dark 0 0 ($grid-horizontal / 2));
position: relative;


.cms-panel-header { .cms-panel-header {
padding: 0; padding: 0;
Expand Down Expand Up @@ -484,18 +580,9 @@ body.cms {
margin: 2px 0; margin: 2px 0;
} }
} }

/* smaller treedropdown */
.chzn-container-single .chzn-single {
height: 24px;
line-height: 24px;
font-size: 11px;

div b {
background-position: 4px 0;
}
}
} }




/* buttons now need to line with with reduced input sizes */ /* buttons now need to line with with reduced input sizes */
.ss-ui-button { .ss-ui-button {
Expand Down Expand Up @@ -562,10 +649,10 @@ body.cms {
} }


.cms-content-batchactions { .cms-content-batchactions {
float: right; float: left;
position: relative; position: relative;
display: block; display: block;
margin-right: 8px; margin-left: 8px;


form > * { form > * {
display: block; display: block;
Expand All @@ -575,6 +662,9 @@ body.cms {
form.cms-batch-actions { form.cms-batch-actions {
float: left; float: left;
} }
.Actions {
display:none;
}
} }


.cms-content-constructive-actions a { .cms-content-constructive-actions a {
Expand Down Expand Up @@ -757,6 +847,7 @@ form.member-profile-form {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
background: none; background: none;
@include box-shadow($color-shadow-dark 0 0 ($grid-horizontal / 2));
} }
} }


Expand Down Expand Up @@ -896,8 +987,6 @@ form.member-profile-form {
background-color: #92a5b2; background-color: #92a5b2;
padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2; padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2;
border-bottom: 2px solid #8399a7; border-bottom: 2px solid #8399a7;
// @include border-radius-top(4px);
// @include border-radius-bottom(0px);
@include background-image(linear-gradient(#ced7dc, #92a5b2)); @include background-image(linear-gradient(#ced7dc, #92a5b2));
} }


Expand Down
30 changes: 28 additions & 2 deletions admin/scss/_tree.scss
View file
Expand Up @@ -63,7 +63,6 @@
.jstree-icon { .jstree-icon {
margin-right: 3px; margin-right: 3px;
} }

} }


} }
Expand Down Expand Up @@ -241,6 +240,10 @@
} }
li.jstree-open > ul { li.jstree-open > ul {
display: block; display: block;
margin-left:-13px;
li ul {
margin-left:2px;
}
} }
li.jstree-closed > ul { li.jstree-closed > ul {
display: none; display: none;
Expand Down Expand Up @@ -379,6 +382,21 @@
} }
} }


.jstree-apple {
li, .jstree-apple ins {
background:none;
}
.jstree-unchecked > a > .jstree-checkbox {
margin-right:3px;
}
.jstree-checked > a > .jstree-checkbox {
margin-right:3px;
}
.jstree-undetermined > a > .jstree-checkbox {
margin-right:3px;
}
}

.cms-tree.jstree-apple { .cms-tree.jstree-apple {


& li.Root { & li.Root {
Expand Down Expand Up @@ -500,10 +518,18 @@
background-color: transparent; background-color: transparent;
background-image: url(../images/sitetree_ss_default_icons.png); background-image: url(../images/sitetree_ss_default_icons.png);
} }

& li.jstree-checked a, li.jstree-checked a:link { & li.jstree-checked a, li.jstree-checked a:link {
background-color: $color-cms-batchactions-menu-selected-background; background-color: $color-cms-batchactions-menu-selected-background;
} }

& .jstree-closed > ins {
background-position:0 0;
}

& .jstree-open > ins {
background-position:-20px 0;
}
} }


.jstree-apple #record-0.jstree-open > ins { .jstree-apple #record-0.jstree-open > ins {
Expand Down
2 changes: 1 addition & 1 deletion admin/scss/_uitheme.scss
View file
Expand Up @@ -39,7 +39,7 @@


.ui-tabs-panel { .ui-tabs-panel {
background: transparent; // default it's white background: transparent; // default it's white
padding: $grid-vertical * 2 $grid-horizontal * 2; padding: $grid-vertical * 2 $grid-horizontal * 5 $grid-vertical * 2 ($grid-horizontal * 3 + 1);
} }
} }


Expand Down

0 comments on commit 23e7aee

Please sign in to comment.