tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

More CSS fixes for the ActionTabSets.

Browse Source 
Thanks for contributing @clarkepaul.
This commit is contained in:
Naomi Guyer 2012-11-30 15:29:53 +13:00 committed by Ingo Schommer
parent 618e639526
commit ee797e4a48
5 changed files with 520 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
admin/css/ie7.css
View File

@ -127,6 +127,21 @@ fieldset.switch-states .switch .slide-button { display: none; }
html { overflow: hidden; } 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%; } .field input.text, .field textarea, .field .TreeDropdownField { width: 94%; }
select { padding: 10px 0; height: 30px; } 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; } .jstree li a .ui-icon { text-indent: 0px !important; }
/* Gridfield
------------------------- */
.cms table.ss-gridfield-table tbody td { width: auto; } .cms table.ss-gridfield-table tbody td { width: auto; }
.cms table.ss-gridfield-table tr th.extra span input { height: 23px; } .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.odd { background: white; }
table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; } 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 { 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; } .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 { float: left; }
.cms-content-header h2 .section-icon { display: none; } .cms-content-header h2 .section-icon { display: none; }
.cms-content-header .cms-content-header-tabs { position: absolute; right: 0; } .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 .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 { 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-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; }

243
admin/css/screen.css
View File

@ -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; } .field.remove-splitter { border-bottom: none; box-shadow: none; }
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */ /** ---------------------------------------------------- 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 { /* Tempory fix: Overide default icon & text styles as the order of the icon and text are mixed up */ }
.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, .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 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.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: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 .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 > *, .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 > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
.cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; } .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 .ui-button { margin-left: -1px; }
.cms .ss-ui-buttonset { 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 .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 ---------------------------------------------------- */ /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
.fieldgroup .fieldgroup-field { float: left; display: block; padding: 8px 0 0 8px; } .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; } .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 .ss-ui-action-tabset:
Defines the styles for the action tabset, found on the site tree, * * Site tree action tabs (to perform actions on the site tree)
and as a single (more options) tab in page view. This is a special * * Actions menu (Edit page actions)
use case of tabs, so the default tab styling should not apply *
* 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 { /********************** .cms .ss-ui-action-tabset { float: left; position: relative; /*
Styles for edit page action menus Styles for the tab-nav of the site tree implementation
************************/ /* Styles for the cms-actions in tree view, to use more limited space. 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 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 to the first tab within the template, so there should always be one title
visible. Added and removed with js in TabSet.js */ } 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 */ } Styles for the actions-menu implementation
.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; } of ss-ui-action-tabset
.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.multi { /* Style the tab panels */ }
.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.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 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.multi ul.ui-tabs-nav:active { outline: none; box-shadow: none; -webkit-box-shadow: none; }
.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.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 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.multi 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.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.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 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.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 a.tab-nav-link { color: #444444; font-weight: bold; line-height: 16px; display: inline-block; padding: 5px 10px; } .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 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.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 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.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.view-mode-batchactions-wrapper .title { margin-left: 22px; } .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 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.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 .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 .cms-tree-view-sidebar { min-width: 176px; /* for when the scrollbar is present & find dropdown open */ }
.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 .cms-tree-view-sidebar .ss-ui-action-tabset ul.ui-tabs-nav > li { width: auto; }
.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 .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.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 .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.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 .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.action-menus ul.ui-tabs-nav li a:hover { text-shadow: white 0 10px 10px; color: #005b98; } .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.action-menus ul.ui-tabs-nav li a:hover:after { border-bottom: 4px solid #005b98; } .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 .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 .cms-tree-view-sidebar .ui-tabs .ui-tabs-panel.ss-ui-action-tab .ui-icon { padding-right: 0; }
.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 .cms-tree-view-sidebar .last .ui-tabs-panel.ss-ui-action-tab { left: auto; right: 0; }
.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel h3 { font-size: 13px; } .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 .ss-ui-action-tab.ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; } .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 .ss-ui-action-tab.ui-tabs-panel .ui-widget-content { background: none; } .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 .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.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 .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.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 .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.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 .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.action-menus.ss-tabset ul.ui-tabs-nav li a:hover { text-shadow: white 0 10px 10px; color: #005b98; }
.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .field .middleColumn { margin: 0; } .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 .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.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 .ss-ui-action-tab.ui-tabs-panel .field.checkbox { padding: 0 8px 0; } .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 .ss-ui-action-tab.ui-tabs-panel .field.checkbox input { margin: 2px 0; } .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 .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; } .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 .ss-ui-action-tab.ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } .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 .ss-ui-action-tab.ui-tabs-panel .cms-content-fields { overflow: visible; } .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h3 { font-size: 13px; }
.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .chzn-container-single { width: 100% !important; } .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel h4 { font-size: 12px; margin: 5px 0; }
.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.action-menus.ss-tabset .ui-tabs-panel .ui-widget-content { background: 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.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 .ss-ui-action-tab.ui-tabs-panel .cms-edit-form { width: 100%; } .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 .ss-ui-action-tab.ui-tabs-panel .CompositeField { margin: 0; padding: 0; float: none; } .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 .ss-ui-action-tab.ui-tabs-panel .parent-mode { padding-top: 0; } .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 .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.action-menus.ss-tabset .ui-tabs-panel .field .middleColumn { margin: 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.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 .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.action-menus.ss-tabset .ui-tabs-panel .field.checkbox { padding: 0 8px 0; }
.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.action-menus.ss-tabset .ui-tabs-panel .field.checkbox input { margin: 2px 0; }
.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.action-menus.ss-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field { padding: 0; }
.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.action-menus.ss-tabset .ui-tabs-panel .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; }
.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel.first { left: 0; width: 203px; } .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-content-fields { overflow: visible; }
.cms .ss-ui-action-tabset .ss-ui-action-tab.ui-tabs-panel .ui-icon { padding-right: 0; } .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .chzn-container-single { width: 100% !important; }
.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.action-menus.ss-tabset .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 #PageType ul { padding: 0; } .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 .ss-ui-action-tab.ui-tabs-panel #PageType ul li { padding: 4px 5px; } .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .cms-edit-form { width: 100%; }
.cms .ss-ui-action-tabset .last .ss-ui-action-tab { right: -1px; left: auto; } .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 { 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 { overflow: hidden; }
.ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; overflow-x: hidden; } .ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; overflow-x: hidden; }

478
admin/scss/_actionTabs.scss
View File

@ -1,10 +1,13 @@
/******************************************** /********************************************
* Defines the styles for .ss-ui-action-tabset:
Defines the styles for the action tabset, found on the site tree, * * Site tree action tabs (to perform actions on the site tree)
and as a single (more options) tab in page view. This is a special * * Actions menu (Edit page actions)
use case of tabs, so the default tab styling should not apply *
* 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 { .cms {
.ss-ui-action-tabset{ .ss-ui-action-tabset{
position:relative;
float:left; float:left;
position:relative;
/*Style the "tabs" navigation for action tabs (as in the sitetree batch actions)*/ /*
ul.ui-tabs-nav{ Styles for the tab-nav of the site tree implementation
@include clearfix; of ss-ui-action-tabset
padding:0; */
overflow:visible; &.multi{
float:left; ul.ui-tabs-nav{
height: 28px; @include border-radius(3px);
border:$border; @include clearfix;
@include border-radius(3px); border:$border;
&:focus,&:active{ float:left;
outline:none; height: 28px;
box-shadow:none; overflow:visible;
-webkit-box-shadow: none; padding:0;
} &:active{
li{
&:focus, &:active{
outline:none; outline:none;
box-shadow:none; box-shadow:none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
} }
width: 110px; li{
overflow:visible; @include background-image(linear-gradient(top, #f8f8f8, #D9D9D9));
background:#eaeaea; @include border-radius(0);
@include background-image(linear-gradient(top, #f8f8f8, #D9D9D9)); background: #eaeaea;
border-radius: none; border: none;
@include border-radius(0); border-right:1px solid #eee;
border: none; border-left: $border;
border-right:1px solid #eee; margin:0;
border-left: $border; overflow: visible;
margin:0; width: 110px;
&.ui-state-active{ &:active{
background:#f8f8f8; outline:none;
border-bottom:none !important; //jquery-ui style has important on it box-shadow:none;
@include border-bottom-left-radius(0px); -webkit-box-shadow: none;
@include border-bottom-right-radius(0px); }
a { &.ui-state-active{
@include border-bottom-left-radius(0px); @include border-bottom-left-radius(0px);
@include border-bottom-right-radius(0px); @include border-bottom-right-radius(0px);
&:focus, span:focus,&:active, span:active{ background:#f8f8f8;
outline:none; border-bottom:none !important; //jquery-ui style has important on it
box-shadow:none; a {
-webkit-box-shadow: none; @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;
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;
} }
} }
} }
&.first{ }
@include border-top-left-radius(3px); /* Style the tab panels */
@include border-bottom-left-radius(3px); .ss-ui-action-tab.ui-tabs-panel{
border-left:none; @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;
} }
&.last{ .ui-icon {
@include border-top-right-radius(3px); padding-right: 0;
@include border-bottom-right-radius(3px);
border-right:none;
} }
a.tab-nav-link{ .tab-nav-link, .ss-ui-button {
color:$color-text; font-size: 12px;
font-weight:bold; }
line-height:16px; #PageType ul{
display:inline-block; padding:0;
padding: 5px 10px; li{
.ui-no-icon { padding:4px 5px;
display:inline-block;
float:left;
padding: 0 2px;
width:16px;
height:16px;
} }
.title{ }
display:inline-block; }
line-height: 18px; .last .ss-ui-action-tab{
} //right:-1px;
&.view-mode-batchactions-wrapper .title { // left:auto;
margin-left: 22px;
}
}
} }
} }
// Classes applied by javascript
&.tabset-open { &.tabset-open {
ul.ui-tabs-nav, ul.ui-tabs-nav,
ul.ui-tabs-nav li.first { ul.ui-tabs-nav li.first {
@ -103,9 +148,9 @@ $border: 1px solid darken(#D9D9D9, 15%);
ul.ui-tabs-nav li.last { ul.ui-tabs-nav li.last {
@include border-bottom-right-radius(0); @include border-bottom-right-radius(0);
} }
} }
/* position a checkbox & icon within a tab */
.batch-check, .ui-icon { /* position a checkbox & icon within a tab */ .batch-check, .ui-icon {
display: inline-block; display: inline-block;
float:left; float:left;
margin-left: -2px; margin-left: -2px;
@ -115,221 +160,172 @@ $border: 1px solid darken(#D9D9D9, 15%);
margin: 6px 0px 5px 9px; margin: 6px 0px 5px 9px;
position: absolute; 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{ ul.ui-tabs-nav{
background:none; margin: 0;
border:none; float: left; /* needed for ie but doesnt effect other browsers */
display:inline;
padding:0;
float:left;
li{ li{
display:inline; background: none;
background:none; border: none;
border:none; border-bottom: none !important; //over-ride jquery-ui style (which also has important)
padding:0; display: inline;
border-bottom:none !important; //over-ride jquery-ui style (which also has important) padding: 0;
&:hover, &:active{
&:hover, &:focus, &:active{
@include box-shadow(none); @include box-shadow(none);
outline:none; outline:none;
} }
a{ a{
color: $color-text-blue-link;
@include text-shadow(#fff 0 1px 1px); @include text-shadow(#fff 0 1px 1px);
padding:0 0 0 10px; color: $color-text-blue-link;
line-height:24px; font-size: 13px;
font-weight: normal;
&:hover, &:focus, &:active{ line-height: 24px;
padding:0 25px 0 10px;
&:hover, &:active{
@include box-shadow(none); @include box-shadow(none);
outline:none; outline:none;
} }
&:hover{ &:hover{
@include text-shadow(#fff 0 10px 10px); @include text-shadow(#fff 0 10px 10px);
color: darken($color-text-blue-link,8%); color: darken($color-text-blue-link,8%);
&:after{
border-bottom: 4px solid darken($color-text-blue-link,8%);
}
} }
} /* Arrow */
}
}
}
/* 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;
&:after { &:after {
background: sprite($sprites32, arrow_down_lighter) no-repeat; background: sprite($sprites32, arrow_down_lighter) no-repeat;
width: 16px; border-bottom: 0;
height: 16px;
content: ""; content: "";
display: inline-block; display: inline-block;
height: 16px;
margin-left: 6px; margin-left: 6px;
border-bottom: 0; width: 16px;
} }
&:hover:after { &:hover:after {
border-bottom: 0;
background: sprite($sprites32, arrow_down_darker) no-repeat; 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 { &:after {
background: sprite($sprites32, arrow_up_lighter) no-repeat; background: sprite($sprites32, arrow_up_lighter) no-repeat;
} }
&:hover:after { &:hover:after {
background: sprite($sprites32, arrow_up_darker) no-repeat; background: sprite($sprites32, arrow_up_darker) no-repeat;
} }
} }
} }
} }
/* Style the panel for actions-menu */
.ui-tabs-panel{ .ui-tabs-panel{
@include clearfix; @include clearfix;
@include border-top-radius(3px); @include border-top-radius(3px);
@include border-bottom-radius(0); @include border-bottom-radius(0);
@include tightSpacing; @include tightSpacing;
@extend .button-no-style;
clear:both;
display:block;
background-color: $tab-panel-texture-color; background-color: $tab-panel-texture-color;
border:1px solid #ccc; border:1px solid #ccc;
border-bottom:1px solid $tab-panel-texture-color; 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:0;
margin-top:1px; margin-top:2px;
.chzn-container-single .chzn-single{ max-width:250px;
padding: 0 0 0 5px; padding: 8px 0 2px;
float:none; position:absolute;
} z-index:1;
@extend .button-no-style; min-width: 190px;
button.ss-ui-button{
&:hover, &:focus, &:active{ //Styles for the information displayed in popup above the main action buttons
/*text-decoration:underline;*/
background-color: darken($tab-panel-texture-color,4%);
@include box-shadow(none);
outline:none;
}
}
.cms-sitetree-information { .cms-sitetree-information {
border-bottom: 1px solid $color-light-separator; border-bottom: 1px solid lighten($color-light-separator, 8%);
margin-bottom: 8px; margin-bottom: 8px;
p.meta-info { padding: 0 20px 0 0;
margin-right: 10px;
margin-left: 10px;
p.meta-info {
color: #999; color: #999;
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
margin-bottom: 8px; 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{ .last .ui-tabs-panel.ss-ui-action-tab{
right:-1px;
left:auto; left:auto;
} right:-1px;
} }
}
} }
/* Styles for the cms-actions in tree view, to use more limited space. .cms-content-actions .Actions{
Title hidden in tree view, until hover/active state added. Active is applied overflow:visible; //for testing (changed in another branch)
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;
}
}
} }

34
admin/scss/_forms.scss
View File

@ -287,19 +287,19 @@ form.small .field, .field.small {
.cms { .cms {
.button-no-style{ .button-no-style{
button{ button{
@include border-radius(0);
background: none; background: none;
border: none; border: none;
color: $color-text-blue-link;
display: block; display: block;
font-weight:normal;
margin:0; margin:0;
outline:none; outline:none;
color: $color-text-blue-link; padding-left:10px;
font-weight:normal; padding-right:10px;
width: 210px; /* same as width of surrounding panel */ text-align: left;
text-align: left; text-shadow: none;
@include border-radius(0); white-space:normal;
text-shadow: none;
margin-left:-10px;
&.ss-ui-action-destructive{ &.ss-ui-action-destructive{
color: darken($color-error,25%); color: darken($color-error,25%);
} }
@ -307,10 +307,10 @@ form.small .field, .field.small {
padding-left:0; padding-left:0;
padding-right:0; padding-right:0;
} }
&:hover, &:focus, &:active{ &:hover, &:focus, &:active{
@include box-shadow(none);
outline:none; outline:none;
background:none; background:none;
@include box-shadow(none);
border:none; border:none;
} }
} }
@ -509,6 +509,18 @@ form.small .field, .field.small {
width: 16px; width: 16px;
height: 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;
}
}
} }
/** ---------------------------------------------------- /** ----------------------------------------------------

128
admin/scss/ie7.scss
View File

@ -7,6 +7,52 @@ html {
overflow: hidden; 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 { .field {
input.text, input.text,
textarea, textarea,
@ -43,7 +89,6 @@ select {
float:left; float:left;
} }
//fix for the tree view modes not displaying inline //fix for the tree view modes not displaying inline
.cms-tree-view-modes { .cms-tree-view-modes {
div { div {
@ -86,6 +131,9 @@ select {
text-indent: 0px !important; text-indent: 0px !important;
} }
/* Gridfield
------------------------- */
.cms table.ss-gridfield-table { .cms table.ss-gridfield-table {
tbody td { tbody td {
// Overrule width: 100% setting to trigger "shrink fit" // Overrule width: 100% setting to trigger "shrink fit"
@ -106,8 +154,6 @@ select {
margin: -1px -5px; margin: -1px -5px;
} }
//fix for edit and delete icons //fix for edit and delete icons
.cms .ss-gridfield table.ss-gridfield-table tbody { .cms .ss-gridfield table.ss-gridfield-table tbody {
td { 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 //fix for view children arrow in pages list view
.cms .ss-gridfield table.ss-gridfield-table tbody { .cms .ss-gridfield table.ss-gridfield-table tbody {
td { 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 & tab fix
.cms-content-header { .cms-content-header {
@ -225,21 +280,40 @@ table.ss-gridfield-table {
display:block; display:block;
} }
@include IEVerticalPanelText;
//IE7 can't use before and after. Compromise //IE7 can't use before and after. Compromise
.cms .cms-content-actions .Actions .rise-up.ss-ui-action-tabset{ .cms .cms-content-actions .Actions .action-menus.ss-ui-action-tabset {
a.ui-tabs-anchor{ width: 190px;
background: sprite($sprites32, arrow_down_lighter) no-repeat; ul.ui-tabs-nav {
padding-left:20px; a.ui-tabs-anchor{
&:hover { background: transparent url(../images/sprites-32x32/arrow_down_lighter.png) no-repeat right top;
background: sprite($sprites32, arrow_down_darker) no-repeat; &: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 { .ui-tabs-panel button.ss-ui-button {
background: sprite($sprites32, arrow_up_lighter) no-repeat; width: 190px; /* Width 100% not calculating by ie7 */
&:hover { }
background: sprite($sprites32, arrow_up_darker) no-repeat;
}
}
} }
@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;
}
}