Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

More CSS fixes for the ActionTabSets.

Thanks for contributing @clarkepaul.
  • Loading branch information...
commit ee797e4a48511b3c4c534e612d11ea6028932d10 1 parent 618e639
@adrexia adrexia authored chillu committed
View
42 admin/css/ie7.css
@@ -127,6 +127,21 @@ fieldset.switch-states .switch .slide-button { display: none; }
html { overflow: hidden; }
+.cms-content-toolbar { padding-bottom: 5px; }
+
+.cms-menu-list li { list-style-type: none; width: 100%; float: left; margin: 0px; padding: 0px; }
+
+/* Site tree
+------------------------- */
+.cms-tree-view-modes div { float: left; }
+.cms-tree-view-modes span { float: left; padding-top: 5px; }
+
+.cms-panel-content .cms-tree li { width: 200px; overflow: hidden; float: left; display: inline; }
+
+.jstree li a .ui-icon { text-indent: 0px !important; }
+
+/* Forms and files area
+-----------------------------*/
.field input.text, .field textarea, .field .TreeDropdownField { width: 94%; }
select { padding: 10px 0; height: 30px; }
@@ -149,6 +164,8 @@ select { padding: 10px 0; height: 30px; }
.jstree li a .ui-icon { text-indent: 0px !important; }
+/* Gridfield
+------------------------- */
.cms table.ss-gridfield-table tbody td { width: auto; }
.cms table.ss-gridfield-table tr th.extra span input { height: 23px; }
@@ -173,12 +190,14 @@ table.ss-gridfield-table tr.title th h2 { float: left; }
table.ss-gridfield-table tr.ss-gridfield-item.odd { background: white; }
table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; }
-.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { overflow: hidden; }
-.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form input { width: 160px; }
-
.cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; }
.cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 4px -4px; display: block; }
+.ss-ui-button.ss-gridfield-button-filter { border: none !important; }
+
+.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { overflow: hidden; }
+.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form input { width: 160px; }
+
.cms-content-header h2 { float: left; }
.cms-content-header h2 .section-icon { display: none; }
.cms-content-header .cms-content-header-tabs { position: absolute; right: 0; }
@@ -189,10 +208,17 @@ table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; }
.cms .Actions > .cms-preview-toggle-link { display: block; }
-.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset a.ui-tabs-anchor { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; padding-left: 20px; }
-.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset a.ui-tabs-anchor:hover { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; }
-.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-state-active a.ui-tabs-anchor { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; }
-.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset .ui-state-active a.ui-tabs-anchor:hover { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; }
-
.cms-panel-content-collapsed { position: relative; width: 40px; }
.cms-panel-content-collapsed h2.cms-panel-header, .cms-panel-content-collapsed h3.cms-panel-header { zoom: 1; position: absolute; top: 10px; right: 10px; writing-mode: tb-rl; float: right; z-index: 5000; }
+
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset { width: 190px; }
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset ul.ui-tabs-nav a.ui-tabs-anchor { background: transparent url(../images/sprites-32x32/arrow_down_lighter.png) no-repeat right top; }
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset ul.ui-tabs-nav a.ui-tabs-anchor:hover { background: transparent url(../images/sprites-32x32/arrow_down_darker.png) no-repeat right top; }
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset ul.ui-tabs-nav .ui-state-active a.ui-tabs-anchor { background: transparent url(../images/sprites-32x32/arrow_up_lighter.png) no-repeat right top; }
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset ul.ui-tabs-nav .ui-state-active a.ui-tabs-anchor:hover { background: transparent url(../images/sprites-32x32/arrow_up_darker.png) no-repeat right top; }
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button { width: 190px; /* Width 100% not calculating by ie7 */ }
+
+/* Tempory fix as jquery loads too slow to add icons */
+button.ui-button-text-icon-primary { padding-left: 30px !important; }
+button.ui-button-text-icon-primary span.ui-button-icon-primary { position: absolute !important; top: 5px !important; left: 8px !important; }
+button.ui-button-text-icon-primary .ui-button-text { margin-left: 0 !important; }
View
243 admin/css/screen.css
@@ -196,10 +196,11 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.field.remove-splitter { border-bottom: none; box-shadow: none; }
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
-.cms .button-no-style button, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button { background: none; border: none; display: block; margin: 0; outline: none; color: #0073c1; font-weight: normal; width: 210px; /* same as width of surrounding panel */ text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; text-shadow: none; margin-left: -10px; }
-.cms .button-no-style button.ss-ui-action-destructive, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; }
-.cms .button-no-style button span, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; }
-.cms .button-no-style button:hover, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button:active { outline: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; }
+.cms { /* Tempory fix: Overide default icon & text styles as the order of the icon and text are mixed up */ }
+.cms .button-no-style button, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: none; border: none; color: #0073c1; display: block; font-weight: normal; margin: 0; outline: none; padding-left: 10px; padding-right: 10px; text-align: left; text-shadow: none; white-space: normal; }
+.cms .button-no-style button.ss-ui-action-destructive, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; }
+.cms .button-no-style button span, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; }
+.cms .button-no-style button:hover, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; background: none; border: none; }
.cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
.cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
.cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; }
@@ -225,6 +226,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.cms .ss-ui-buttonset .ui-button { margin-left: -1px; }
.cms .ss-ui-buttonset { margin-left: 1px; }
.cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
+.cms .south .Actions .ss-ui-button.ss-ui-action-constructive .ui-button-text-alternate { margin-left: 22px; }
+.cms .south .Actions .ss-ui-button.ss-ui-action-constructive .ui-icon { position: absolute; left: 10px; top: 5px; }
/** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
.fieldgroup .fieldgroup-field { float: left; display: block; padding: 8px 0 0 8px; }
@@ -938,127 +941,131 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; }
.cms-preview.desktop .preview-scroll .preview-device-outer { -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 1s; -moz-transition: all 0.3s ease-out 1s; -o-transition: all 0.3s ease-out 1s; transition: all 0.3s ease-out 1s; height: 800px; margin: 0 auto; width: 1024px; }
/********************************************
-
-Defines the styles for the action tabset, found on the site tree,
-and as a single (more options) tab in page view. This is a special
-use case of tabs, so the default tab styling should not apply
-
-
+* Defines the styles for .ss-ui-action-tabset:
+* * Site tree action tabs (to perform actions on the site tree)
+* * Actions menu (Edit page actions)
+*
+* Reliant on TabSet.js to apply and remove some classes.
+*
+* Note: This is a special use case of tabs, so the default tab
+* styling should not apply
+*
**********************************************/
-.cms { /**********************
-Styles for edit page action menus
-************************/ /* Styles for the cms-actions in tree view, to use more limited space.
+.cms .ss-ui-action-tabset { float: left; position: relative; /*
+ Styles for the tab-nav of the site tree implementation
+ of ss-ui-action-tabset
+*/ /* position a checkbox & icon within a tab */ /* Styles for the cms-actions in tree view, to use more limited space.
Title hidden in tree view, until hover/active state added. Active is applied
to the first tab within the template, so there should always be one title
-visible. Added and removed with js in TabSet.js */ }
-.cms .ss-ui-action-tabset { position: relative; float: left; /*Style the "tabs" navigation for action tabs (as in the sitetree batch actions)*/ /* Style the tab panels */ }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav { overflow: hidden; *zoom: 1; padding: 0; overflow: visible; float: left; height: 28px; border: 1px solid #b3b3b3; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li { width: 110px; overflow: visible; background: #eaeaea; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); border-radius: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav li:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active { background: #f8f8f8; border-bottom: none !important; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a span:focus, .cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a:active, .cms .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a span:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li.first { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; border-left: none; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li.last { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-right: none; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link { color: #444444; font-weight: bold; line-height: 16px; display: inline-block; padding: 5px 10px; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link .ui-no-icon { display: inline-block; float: left; padding: 0 2px; width: 16px; height: 16px; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link .title { display: inline-block; line-height: 18px; }
-.cms .ss-ui-action-tabset ul.ui-tabs-nav li a.tab-nav-link.view-mode-batchactions-wrapper .title { margin-left: 22px; }
+visible. Added and removed with js in TabSet.js */ /****************************************************************
+ Styles for the actions-menu implementation
+ of ss-ui-action-tabset
+****************************************************************/ }
+.cms .ss-ui-action-tabset.multi { /* Style the tab panels */ }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow: hidden; *zoom: 1; border: 1px solid #b3b3b3; float: left; height: 28px; overflow: visible; padding: 0; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eaeaea; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; overflow: visible; width: 110px; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; background: #f8f8f8; border-bottom: none !important; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active a { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active a:active, .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active a span:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.first { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; border-left: none; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.last { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-right: none; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li a.tab-nav-link { color: #444444; display: inline-block; font-weight: bold; line-height: 16px; padding: 5px 10px; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li a.tab-nav-link .ui-no-icon { display: inline-block; float: left; height: 16px; padding: 0 2px; width: 16px; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li a.tab-nav-link .title { display: inline-block; line-height: 18px; }
+.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li a.tab-nav-link.view-mode-batchactions-wrapper .title { margin-left: 22px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel { /* Restyle for smaller area*/ background: #f8f8f8 !important; border: 1px solid #b3b3b3; border-top: none; clear: both; display: block; float: left; margin: 0; padding: 10px; padding-top: 15px; position: absolute; top: 30px; width: 202px; z-index: 1; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel h3, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel h4, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel h5 { font-weight: bold; line-height: 16px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel h3 { font-size: 13px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .ui-widget-content { background: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field .middleColumn { margin: 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field input.text, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field select, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .field.checkbox input { margin: 2px 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .cms-content-fields { overflow: visible; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .chzn-container-single { width: 100% !important; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .cms-content-actions, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .cms-edit-form { width: 100%; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .parent-mode { padding-top: 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .treedropdown, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel.first { left: 0; width: 203px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .ui-icon { padding-right: 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .tab-nav-link, .cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel .ss-ui-button { font-size: 12px; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel #PageType ul { padding: 0; }
+.cms .ss-ui-action-tabset.multi .ss-ui-action-tab.ui-tabs-panel #PageType ul li { padding: 4px 5px; }
.cms .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav, .cms .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.first { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; }
.cms .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.last { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; }
-.cms .ss-ui-action-tabset .batch-check, .cms .ss-ui-action-tabset .ui-icon { /* position a checkbox & icon within a tab */ display: inline-block; float: left; margin-left: -2px; padding-right: 6px; }
+.cms .ss-ui-action-tabset .batch-check, .cms .ss-ui-action-tabset .ui-icon { display: inline-block; float: left; margin-left: -2px; padding-right: 6px; }
.cms .ss-ui-action-tabset .batch-check { margin: 6px 0px 5px 9px; position: absolute; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav { background: none; border: none; display: inline; padding: 0; float: left; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li { display: inline; background: none; border: none; padding: 0; border-bottom: none !important; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li:hover, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li:focus, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a { color: #0073c1; text-shadow: white 0 1px 1px; padding: 0 0 0 10px; line-height: 24px; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:hover, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:focus, .cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:hover { text-shadow: white 0 10px 10px; color: #005b98; }
-.cms .ss-ui-action-tabset.action-menus ul.ui-tabs-nav li a:hover:after { border-bottom: 4px solid #005b98; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel { /* Restyle for smaller area*/ background: #f8f8f8 !important; border: 1px solid #b3b3b3; border-top: none; clear: both; display: block; float: left; margin: 0; padding: 10px; padding-top: 15px; position: absolute; top: 30px; width: 202px; z-index: 1; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h3, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h4, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h5 { font-weight: bold; line-height: 16px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h3 { font-size: 13px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ui-widget-content { background: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field .middleColumn { margin: 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field input.text, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field select, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field.checkbox input { margin: 2px 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-content-fields { overflow: visible; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .chzn-container-single { width: 100% !important; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-content-actions, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-edit-form { width: 100%; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .parent-mode { padding-top: 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel.first { left: 0; width: 203px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ui-icon { padding-right: 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .tab-nav-link, .cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ss-ui-button { font-size: 12px; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul { padding: 0; }
-.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel #PageType ul li { padding: 4px 5px; }
-.cms .ss-ui-action-tabset .last .ss-ui-action-tab { right: -1px; left: auto; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar { min-width: 176px; /* for when the scrollbar is present & find dropdown open */ }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li { width: auto; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; overflow: hidden; padding-right: 0; width: 30px; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link.active { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; width: 110px; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav, .cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.first, .cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.last, .cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav, .cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.first, .cms .ss-ui-action-tabset .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.last { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab { padding: 10px 6px; width: 162px; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .field { max-width: 160px; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .ui-icon { padding-right: 0; }
+.cms .ss-ui-action-tabset .cms-tree-view-sidebar .last .ui-tabs-panel.ss-ui-action-tab { left: auto; right: 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset { margin-top: 2px; /* Style the panel for actions-menu */ /* Re-align last tab */ }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav { margin: 0; float: left; /* needed for ie but doesnt effect other browsers */ }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li { background: none; border: none; border-bottom: none !important; display: inline; padding: 0; /* Make arrow point in up when nav open */ }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li:hover, .cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a { text-shadow: white 0 1px 1px; color: #0073c1; font-size: 13px; font-weight: normal; line-height: 24px; padding: 0 25px 0 10px; /* Arrow */ }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:hover, .cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:hover { text-shadow: white 0 10px 10px; color: #005b98; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; border-bottom: 0; content: ""; display: inline-block; height: 16px; margin-left: 6px; width: 16px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li a:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li.ui-state-active a:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset ul.ui-tabs-nav li.ui-state-active a:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel { overflow: hidden; *zoom: 1; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; /* Restyle for smaller area*/ clear: both; display: block; background-color: #eceff1; border: 1px solid #ccc; border-bottom: 1px solid #eceff1; margin: 0; margin-top: 2px; max-width: 250px; padding: 8px 0 2px; position: absolute; z-index: 1; min-width: 190px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h3, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h4, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h5 { font-weight: bold; line-height: 16px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h3 { font-size: 13px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .ui-widget-content { background: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field .middleColumn { margin: 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field input.text, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field select, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-content-fields { overflow: visible; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .chzn-container-single { width: 100% !important; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-content-actions, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-edit-form { width: 100%; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .parent-mode { padding-top: 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .treedropdown, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-sitetree-information { border-bottom: 1px solid #e6e7e8; margin-bottom: 8px; padding: 0 20px 0 0; margin-right: 10px; margin-left: 10px; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-sitetree-information p.meta-info { color: #999; font-size: 11px; line-height: 16px; margin-bottom: 8px; white-space: nowrap; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-button { width: 100%; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-button:hover, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-button:focus, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-button:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #e0e5e8; outline: none; }
+.cms .ss-ui-action-tabset.action-menus.ss-tabset .last .ui-tabs-panel.ss-ui-action-tab { left: auto; right: -1px; }
.cms .cms-content-actions .Actions { overflow: visible; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav { margin: 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor { font-weight: normal; font-size: 13px; line-height: 24px; padding-right: 25px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1189px no-repeat; width: 16px; height: 16px; content: ""; display: inline-block; margin-left: 6px; border-bottom: 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li a.ui-tabs-anchor:hover:after { border-bottom: 0; background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1163px no-repeat; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1215px no-repeat; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset ul.ui-tabs-nav li.ui-state-active a.ui-tabs-anchor:hover:after { background: url('../images/sprites-32x32-sf6890c994e.png') 0 -1137px no-repeat; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel { overflow: hidden; *zoom: 1; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; /* Restyle for smaller area*/ background-color: #eceff1; border: 1px solid #ccc; border-bottom: 1px solid #eceff1; clear: both; display: block; position: absolute; top: -204px; width: 190px; /* same width as buttons within panel */ z-index: 1; padding: 10px; margin: 0; margin-top: 1px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h3, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h4, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h5 { font-weight: bold; line-height: 16px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h3 { font-size: 13px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .ui-widget-content { background: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field { /* Fields are more compressed in some areas compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field label.extra-details { overflow: hidden; margin-top: 10px; display: block; color: #9d9d9d; font-style: italic; font-weight: normal; font-size: 1em; float: left; text-shadow: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field label.extra-details.fill:before { color: #fff; content: '?'; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3px; padding-right: 3px; display: block; float: left; text-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b7b7b7; width: 15px; height: 15px; margin-right: 5px; margin-bottom: 5px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field .middleColumn { margin: 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field input.text, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field select, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field textarea { padding: 5px; font-size: 11px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-content-fields { overflow: visible; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .chzn-container-single { width: 100% !important; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-content-actions, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-preview-controls { padding: 0; height: auto; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-edit-form { width: 100%; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .parent-mode { padding-top: 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field { margin: 10px 0 0 0; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-title, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-title { position: absolute; z-index: 2; padding: 5px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-panel, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-panel { margin-top: 11px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link { background: none; border-left: none; padding: 5px 3px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .treedropdown .treedropdownfield-toggle-panel-link .ui-icon, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .SelectionGroup li.selected div.field .treedropdownfield-toggle-panel-link .ui-icon { float: right; opacity: 0.7; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-add-form ul.SelectionGroup { padding-left: 0; padding-right: 0; overflow: visible; border-bottom: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .chzn-container-single .chzn-single { padding: 0 0 0 5px; float: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:hover, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:focus, .cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel button.ss-ui-button:active { /*text-decoration:underline;*/ background-color: #e0e5e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information { border-bottom: 1px solid #d0d3d5; margin-bottom: 8px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .ui-tabs-panel .cms-sitetree-information p.meta-info { color: #999; font-size: 11px; line-height: 16px; margin-bottom: 8px; }
-.cms .cms-content-actions .Actions .ss-ui-action-tabset .last .ui-tabs-panel.ss-ui-action-tab { right: -1px; left: auto; }
-.cms .cms-tree-view-sidebar { min-width: 176px; /* for when the scrollbar is present & find dropdown open */ }
-.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li { width: auto; }
-.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link { width: 30px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
-.cms .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li a.tab-nav-link.active { width: 110px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
-.cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.first, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open ul.ui-tabs-nav li.last, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.first, .cms .cms-tree-view-sidebar .ss-ui-action-tabset.tabset-open-last ul.ui-tabs-nav li.last { -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; }
-.cms .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab { width: 162px; padding: 10px 6px; }
-.cms .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .field { max-width: 160px; }
-.cms .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .ui-icon { padding-right: 0; }
-.cms .cms-tree-view-sidebar .last .ui-tabs-panel.ss-ui-action-tab { right: 0; left: auto; }
.ModelAdmin .cms-content-fields { overflow: hidden; }
.ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; overflow-x: hidden; }
View
478 admin/scss/_actionTabs.scss
@@ -1,10 +1,13 @@
/********************************************
-
-Defines the styles for the action tabset, found on the site tree,
-and as a single (more options) tab in page view. This is a special
-use case of tabs, so the default tab styling should not apply
-
-
+* Defines the styles for .ss-ui-action-tabset:
+* * Site tree action tabs (to perform actions on the site tree)
+* * Actions menu (Edit page actions)
+*
+* Reliant on TabSet.js to apply and remove some classes.
+*
+* Note: This is a special use case of tabs, so the default tab
+* styling should not apply
+*
**********************************************/
@@ -12,87 +15,129 @@ $border: 1px solid darken(#D9D9D9, 15%);
.cms {
.ss-ui-action-tabset{
- position:relative;
float:left;
+ position:relative;
- /*Style the "tabs" navigation for action tabs (as in the sitetree batch actions)*/
- ul.ui-tabs-nav{
- @include clearfix;
- padding:0;
- overflow:visible;
- float:left;
- height: 28px;
- border:$border;
- @include border-radius(3px);
- &:focus,&:active{
- outline:none;
- box-shadow:none;
- -webkit-box-shadow: none;
- }
- li{
- &:focus, &:active{
+ /*
+ Styles for the tab-nav of the site tree implementation
+ of ss-ui-action-tabset
+ */
+ &.multi{
+ ul.ui-tabs-nav{
+ @include border-radius(3px);
+ @include clearfix;
+ border:$border;
+ float:left;
+ height: 28px;
+ overflow:visible;
+ padding:0;
+ &:active{
outline:none;
box-shadow:none;
-webkit-box-shadow: none;
- }
- width: 110px;
- overflow:visible;
- background:#eaeaea;
- @include background-image(linear-gradient(top, #f8f8f8, #D9D9D9));
- border-radius: none;
- @include border-radius(0);
- border: none;
- border-right:1px solid #eee;
- border-left: $border;
- margin:0;
- &.ui-state-active{
- background:#f8f8f8;
- border-bottom:none !important; //jquery-ui style has important on it
- @include border-bottom-left-radius(0px);
- @include border-bottom-right-radius(0px);
- a {
+ }
+ li{
+ @include background-image(linear-gradient(top, #f8f8f8, #D9D9D9));
+ @include border-radius(0);
+ background: #eaeaea;
+ border: none;
+ border-right:1px solid #eee;
+ border-left: $border;
+ margin:0;
+ overflow: visible;
+ width: 110px;
+ &:active{
+ outline:none;
+ box-shadow:none;
+ -webkit-box-shadow: none;
+ }
+ &.ui-state-active{
@include border-bottom-left-radius(0px);
- @include border-bottom-right-radius(0px);
- &:focus, span:focus,&:active, span:active{
- outline:none;
- box-shadow:none;
- -webkit-box-shadow: none;
+ @include border-bottom-right-radius(0px);
+ background:#f8f8f8;
+ border-bottom:none !important; //jquery-ui style has important on it
+ a {
+ @include border-bottom-left-radius(0px);
+ @include border-bottom-right-radius(0px);
+ &:active, span:active{
+ outline:none;
+ box-shadow:none;
+ -webkit-box-shadow: none;
+ }
}
}
- }
- &.first{
- @include border-top-left-radius(3px);
- @include border-bottom-left-radius(3px);
- border-left:none;
- }
- &.last{
- @include border-top-right-radius(3px);
- @include border-bottom-right-radius(3px);
- border-right:none;
- }
- a.tab-nav-link{
- color:$color-text;
- font-weight:bold;
- line-height:16px;
- display:inline-block;
- padding: 5px 10px;
- .ui-no-icon {
- display:inline-block;
- float:left;
- padding: 0 2px;
- width:16px;
- height:16px;
+ &.first{
+ @include border-top-left-radius(3px);
+ @include border-bottom-left-radius(3px);
+ border-left:none;
}
- .title{
- display:inline-block;
- line-height: 18px;
+ &.last{
+ @include border-top-right-radius(3px);
+ @include border-bottom-right-radius(3px);
+ border-right:none;
}
- &.view-mode-batchactions-wrapper .title {
- margin-left: 22px;
+ a.tab-nav-link{
+ color:$color-text;
+ display:inline-block;
+ font-weight:bold;
+ line-height:16px;
+ padding: 5px 10px;
+ .ui-no-icon { //for links that don't have icons (ie the batch actions field)
+ display: inline-block;
+ float: left;
+ height: 16px;
+ padding: 0 2px;
+ width: 16px;
+ }
+ .title{
+ display:inline-block;
+ line-height: 18px;
+ }
+ &.view-mode-batchactions-wrapper .title {
+ margin-left: 22px;
+ }
}
}
}
+ /* Style the tab panels */
+ .ss-ui-action-tab.ui-tabs-panel{
+ @include tightSpacing;
+ background:#f8f8f8 !important; //Because ie7 doesn't understand what the 'C' in CSS stands for
+ border:$border;
+ border-top:none;
+ clear:both;
+ display:block;
+ float:left;
+ margin:0;
+ padding:10px;
+ padding-top:15px;
+ position:absolute;
+ top:30px;
+ width:202px;
+ z-index:1;
+ &.first {
+ left: 0;
+ width: 203px;
+ }
+ .ui-icon {
+ padding-right: 0;
+ }
+ .tab-nav-link, .ss-ui-button {
+ font-size: 12px;
+ }
+ #PageType ul{
+ padding:0;
+ li{
+ padding:4px 5px;
+ }
+ }
+ }
+ .last .ss-ui-action-tab{
+ //right:-1px;
+ // left:auto;
+ }
}
+ // Classes applied by javascript
&.tabset-open {
ul.ui-tabs-nav,
ul.ui-tabs-nav li.first {
@@ -103,9 +148,9 @@ $border: 1px solid darken(#D9D9D9, 15%);
ul.ui-tabs-nav li.last {
@include border-bottom-right-radius(0);
}
- }
-
- .batch-check, .ui-icon { /* position a checkbox & icon within a tab */
+ }
+ /* position a checkbox & icon within a tab */
+ .batch-check, .ui-icon {
display: inline-block;
float:left;
margin-left: -2px;
@@ -115,221 +160,172 @@ $border: 1px solid darken(#D9D9D9, 15%);
margin: 6px 0px 5px 9px;
position: absolute;
}
- &.action-menus{ //Styles for actions-menu implementation
+
+
+ /* Styles for the cms-actions in tree view, to use more limited space.
+ Title hidden in tree view, until hover/active state added. Active is applied
+ to the first tab within the template, so there should always be one title
+ visible. Added and removed with js in TabSet.js */
+ .cms-tree-view-sidebar{
+ min-width: 176px; /* for when the scrollbar is present & find dropdown open */
+ .ss-ui-action-tabset{
+ ul.ui-tabs-nav{
+ >li{
+ width: auto;
+ a.tab-nav-link{
+ @include box-sizing(border-box);
+ @include duration(0.5s);
+ overflow:hidden;
+ padding-right:0;
+ width:30px;
+ &.active{
+ @include duration(0.5s);
+ width:110px;
+
+ }
+ }
+ }
+ }
+ &.tabset-open, &.tabset-open-last {
+ ul.ui-tabs-nav,
+ ul.ui-tabs-nav li.first,
+ ul.ui-tabs-nav li.last {
+ @include border-bottom-right-radius(0);
+ @include border-bottom-left-radius(0);
+ }
+ }
+ }
+ .ui-tabs .ui-tabs-panel.ss-ui-action-tab {
+ padding:10px 6px;
+ width:162px;
+ .field {
+ max-width:160px;
+ }
+ .ui-icon {
+ padding-right: 0;
+ }
+ }
+ .last .ui-tabs-panel.ss-ui-action-tab {
+ left:auto;
+ right:0;
+ }
+ }
+
+ /****************************************************************
+ Styles for the actions-menu implementation
+ of ss-ui-action-tabset
+ ****************************************************************/
+ &.action-menus.ss-tabset {
+ margin-top: 2px;
+
+ //Style the tabs naivgation
ul.ui-tabs-nav{
- background:none;
- border:none;
- display:inline;
- padding:0;
- float:left;
+ margin: 0;
+ float: left; /* needed for ie but doesnt effect other browsers */
+
li{
- display:inline;
- background:none;
- border:none;
- padding:0;
- border-bottom:none !important; //over-ride jquery-ui style (which also has important)
-
- &:hover, &:focus, &:active{
+ background: none;
+ border: none;
+ border-bottom: none !important; //over-ride jquery-ui style (which also has important)
+ display: inline;
+ padding: 0;
+ &:hover, &:active{
@include box-shadow(none);
outline:none;
}
a{
- color: $color-text-blue-link;
@include text-shadow(#fff 0 1px 1px);
- padding:0 0 0 10px;
- line-height:24px;
-
- &:hover, &:focus, &:active{
+ color: $color-text-blue-link;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 24px;
+ padding:0 25px 0 10px;
+ &:hover, &:active{
@include box-shadow(none);
outline:none;
}
&:hover{
@include text-shadow(#fff 0 10px 10px);
color: darken($color-text-blue-link,8%);
- &:after{
- border-bottom: 4px solid darken($color-text-blue-link,8%);
- }
}
- }
- }
- }
- }
-
- /* Style the tab panels */
- .ss-ui-action-tab.ui-tabs-panel{
- @include tightSpacing;
- background:#f8f8f8 !important; //Because ie7 doesn't understand what the 'C' in CSS stands for
- border:$border;
- border-top:none;
- clear:both;
- display:block;
- float:left;
- margin:0;
- padding:10px;
- padding-top:15px;
- position:absolute;
- top:30px;
- width:202px;
- z-index:1;
- &.first {
- left: 0;
- width: 203px;
- }
- .ui-icon {
- padding-right: 0;
- }
- .tab-nav-link, .ss-ui-button {
- font-size: 12px;
- }
- #PageType ul{
- padding:0;
- li{
- padding:4px 5px;
- }
- }
- }
- .last .ss-ui-action-tab{
- right:-1px;
- left:auto;
- }
- }
-
- /**********************
- Styles for edit page action menus
- ************************/
- .cms-content-actions .Actions{
- overflow:visible; //for testing (changed in another branch)
-
- .ss-ui-action-tabset{
- ul.ui-tabs-nav {
- margin: 0;
- li {
- a.ui-tabs-anchor {
- font-weight: normal;
- font-size: 13px;
- line-height: 24px;
- padding-right: 25px;
+ /* Arrow */
&:after {
background: sprite($sprites32, arrow_down_lighter) no-repeat;
- width: 16px;
- height: 16px;
+ border-bottom: 0;
content: "";
display: inline-block;
+ height: 16px;
margin-left: 6px;
- border-bottom: 0;
-
+ width: 16px;
}
- &:hover:after {
- border-bottom: 0;
+ &:hover:after {
background: sprite($sprites32, arrow_down_darker) no-repeat;
- }
-
+ }
}
- &.ui-state-active a.ui-tabs-anchor {
+ /* Make arrow point in up when nav open */
+ &.ui-state-active a {
&:after {
background: sprite($sprites32, arrow_up_lighter) no-repeat;
}
&:hover:after {
background: sprite($sprites32, arrow_up_darker) no-repeat;
}
- }
+ }
}
}
+ /* Style the panel for actions-menu */
.ui-tabs-panel{
@include clearfix;
@include border-top-radius(3px);
@include border-bottom-radius(0);
@include tightSpacing;
+ @extend .button-no-style;
+ clear:both;
+ display:block;
background-color: $tab-panel-texture-color;
border:1px solid #ccc;
border-bottom:1px solid $tab-panel-texture-color;
- clear:both;
- display:block;
- position:absolute;
- top:-204px;
- width:190px; /* same width as buttons within panel */
- z-index:1;
- padding:10px;
margin:0;
- margin-top:1px;
- .chzn-container-single .chzn-single{
- padding: 0 0 0 5px;
- float:none;
- }
- @extend .button-no-style;
- button.ss-ui-button{
- &:hover, &:focus, &:active{
- /*text-decoration:underline;*/
- background-color: darken($tab-panel-texture-color,4%);
- @include box-shadow(none);
- outline:none;
- }
-
- }
+ margin-top:2px;
+ max-width:250px;
+ padding: 8px 0 2px;
+ position:absolute;
+ z-index:1;
+ min-width: 190px;
+
+ //Styles for the information displayed in popup above the main action buttons
.cms-sitetree-information {
- border-bottom: 1px solid $color-light-separator;
+ border-bottom: 1px solid lighten($color-light-separator, 8%);
margin-bottom: 8px;
- p.meta-info {
+ padding: 0 20px 0 0;
+ margin-right: 10px;
+ margin-left: 10px;
+ p.meta-info {
color: #999;
font-size: 11px;
line-height: 16px;
margin-bottom: 8px;
+ white-space: nowrap;
}
+ }
+ button.ss-ui-button{
+ width:100%;
+ &:hover, &:focus, &:active{
+ @include box-shadow(none);
+ background-color: darken($tab-panel-texture-color,4%);
+ outline:none;
+ }
}
}
+ /* Re-align last tab */
.last .ui-tabs-panel.ss-ui-action-tab{
- right:-1px;
left:auto;
- }
- }
+ right:-1px;
+ }
+ }
}
-
- /* Styles for the cms-actions in tree view, to use more limited space.
- Title hidden in tree view, until hover/active state added. Active is applied
- to the first tab within the template, so there should always be one title
- visible. Added and removed with js in TabSet.js */
- .cms-tree-view-sidebar{
- min-width: 176px; /* for when the scrollbar is present & find dropdown open */
- .ss-ui-action-tabset{
- ul.ui-tabs-nav{
- >li{
- width: auto;
- a.tab-nav-link{
- width:30px;
- overflow:hidden;
- @include box-sizing(border-box);
- padding-right:0;
- @include duration(0.5s);
- &.active{
- width:110px;
- @include duration(0.5s);
- }
- }
- }
- }
- &.tabset-open, &.tabset-open-last {
- ul.ui-tabs-nav,
- ul.ui-tabs-nav li.first,
- ul.ui-tabs-nav li.last {
- @include border-bottom-right-radius(0);
- @include border-bottom-left-radius(0);
- }
- }
- }
- .ui-tabs .ui-tabs-panel.ss-ui-action-tab {
- width:162px;
- padding:10px 6px;
- .field {
- max-width:160px;
- }
- .ui-icon {
- padding-right: 0;
- }
- }
- .last .ui-tabs-panel.ss-ui-action-tab {
- right:0;
- left:auto;
- }
- }
+ .cms-content-actions .Actions{
+ overflow:visible; //for testing (changed in another branch)
+ }
}
View
34 admin/scss/_forms.scss
@@ -287,19 +287,19 @@ form.small .field, .field.small {
.cms {
.button-no-style{
button{
+ @include border-radius(0);
background: none;
border: none;
+ color: $color-text-blue-link;
display: block;
+ font-weight:normal;
margin:0;
outline:none;
- color: $color-text-blue-link;
- font-weight:normal;
- width: 210px; /* same as width of surrounding panel */
- text-align: left;
- @include border-radius(0);
- text-shadow: none;
- margin-left:-10px;
-
+ padding-left:10px;
+ padding-right:10px;
+ text-align: left;
+ text-shadow: none;
+ white-space:normal;
&.ss-ui-action-destructive{
color: darken($color-error,25%);
}
@@ -307,10 +307,10 @@ form.small .field, .field.small {
padding-left:0;
padding-right:0;
}
- &:hover, &:focus, &:active{
+ &:hover, &:focus, &:active{
+ @include box-shadow(none);
outline:none;
- background:none;
- @include box-shadow(none);
+ background:none;
border:none;
}
}
@@ -509,6 +509,18 @@ form.small .field, .field.small {
width: 16px;
height: 16px;
}
+
+ /* Tempory fix: Overide default icon & text styles as the order of the icon and text are mixed up */
+ .south .Actions .ss-ui-button.ss-ui-action-constructive {
+ .ui-button-text-alternate {
+ margin-left: 22px;
+ }
+ .ui-icon {
+ position: absolute;
+ left: 10px;
+ top: 5px;
+ }
+ }
}
/** ----------------------------------------------------
View
128 admin/scss/ie7.scss
@@ -7,6 +7,52 @@ html {
overflow: hidden;
}
+//add line below the cms-content-toolbar
+.cms-content-toolbar {
+ padding-bottom:5px;
+}
+
+.cms-menu-list{
+ li{
+ list-style-type: none;
+ width: 100%;
+ float: left;
+ margin: 0px;
+ padding: 0px;
+ }
+}
+
+
+/* Site tree
+------------------------- */
+
+//fix for the tree view modes not displaying inline
+.cms-tree-view-modes {
+ div {
+ float:left;
+ }
+ span {
+ float:left;
+ padding-top:5px;
+ }
+}
+.cms-panel-content .cms-tree{
+ li{
+ width:200px;
+ overflow:hidden;
+ float:left;
+ display:inline;
+ }
+}
+
+// fix jstree themeroller plugin bug: tree disappear in IE7
+.jstree li a .ui-icon {
+ text-indent: 0px !important;
+}
+
+
+/* Forms and files area
+-----------------------------*/
.field {
input.text,
textarea,
@@ -43,7 +89,6 @@ select {
float:left;
}
-
//fix for the tree view modes not displaying inline
.cms-tree-view-modes {
div {
@@ -86,6 +131,9 @@ select {
text-indent: 0px !important;
}
+/* Gridfield
+------------------------- */
+
.cms table.ss-gridfield-table {
tbody td {
// Overrule width: 100% setting to trigger "shrink fit"
@@ -106,8 +154,6 @@ select {
margin: -1px -5px;
}
-
-
//fix for edit and delete icons
.cms .ss-gridfield table.ss-gridfield-table tbody {
td {
@@ -173,16 +219,6 @@ table.ss-gridfield-table {
}
}
-//fix for model admin filter styling
-.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content {
- .cms-search-form {
- overflow:hidden;
- input {
- width:160px;
- }
- }
-}
-
//fix for view children arrow in pages list view
.cms .ss-gridfield table.ss-gridfield-table tbody {
td {
@@ -194,7 +230,26 @@ table.ss-gridfield-table {
}
}
}
-}
+}
+
+.ss-ui-button{
+ &.ss-gridfield-button-filter{
+ border:none !important;
+ }
+}
+
+
+
+//fix for model admin filter styling
+.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content {
+ .cms-search-form {
+ overflow:hidden;
+ input {
+ width:160px;
+ }
+ }
+}
+
// CMS Content header & tab fix
.cms-content-header {
@@ -225,21 +280,40 @@ table.ss-gridfield-table {
display:block;
}
+@include IEVerticalPanelText;
+
//IE7 can't use before and after. Compromise
-.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset{
- a.ui-tabs-anchor{
- background: sprite($sprites32, arrow_down_lighter) no-repeat;
- padding-left:20px;
- &:hover {
- background: sprite($sprites32, arrow_down_darker) no-repeat;
+.cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset {
+ width: 190px;
+ ul.ui-tabs-nav {
+ a.ui-tabs-anchor{
+ background: transparent url(../images/sprites-32x32/arrow_down_lighter.png) no-repeat right top;
+ &:hover {
+ background: transparent url(../images/sprites-32x32/arrow_down_darker.png) no-repeat right top;
+ }
+ }
+ .ui-state-active a.ui-tabs-anchor {
+ background: transparent url(../images/sprites-32x32/arrow_up_lighter.png) no-repeat right top;
+ &:hover {
+ background: transparent url(../images/sprites-32x32/arrow_up_darker.png) no-repeat right top;
+ }
}
}
- .ui-state-active a.ui-tabs-anchor {
- background: sprite($sprites32, arrow_up_lighter) no-repeat;
- &:hover {
- background: sprite($sprites32, arrow_up_darker) no-repeat;
- }
- }
+ .ui-tabs-panel button.ss-ui-button {
+ width: 190px; /* Width 100% not calculating by ie7 */
+ }
}
-@include IEVerticalPanelText;
+
+/* Tempory fix as jquery loads too slow to add icons */
+button.ui-button-text-icon-primary {
+ padding-left: 30px !important;
+ span.ui-button-icon-primary {
+ position: absolute !important;
+ top: 5px !important;
+ left: 8px !important;
+ }
+ .ui-button-text {
+ margin-left: 0 !important;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.