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

Merge pull request #5208 from jonom/fix-tabs

Browse Source 
FIX tab wrapping
This commit is contained in:
Daniel Hensby 2016-03-20 18:36:33 +00:00
commit c0d8cf3e97
3 changed files with 133 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
admin/css/screen.css
View File

@ -495,15 +495,15 @@ fieldset.switch-states.size_5 input:checked:nth-of-type(5) ~ .slide-button { lef
.cms-panel .cms-content-filters .Actions { margin-bottom: 0; } .cms-panel .cms-content-filters .Actions { margin-bottom: 0; }
/** /**
* This file defines most styles of the CMS: Colors, fonts, backgrounds, * This file defines most styles of the CMS: Colors, fonts, backgrounds,
* alignments, dimensions. * alignments, dimensions.
* *
* Use SCSS variable definitions in screen.css to avoid repeating styles * Use SCSS variable definitions in screen.css to avoid repeating styles
* like background colours or padding dimensions. See themes/_default.scss * like background colours or padding dimensions. See themes/_default.scss
* to get started. * to get started.
* *
* To avoid this file getting too large and complicated, it is encouraged to * To avoid this file getting too large and complicated, it is encouraged to
* create new SCSS files for larger components like the CMS menu or tree * create new SCSS files for larger components like the CMS menu or tree
* (see _tree.scss and _menu.scss). * (see _tree.scss and _menu.scss).
*/ */
/** ---------------------------------------------------- Core Styles. ---------------------------------------------------- */ /** ---------------------------------------------------- Core Styles. ---------------------------------------------------- */
@ -612,11 +612,12 @@ body.cms { overflow: hidden; }
.ui-tabs .ui-tabs-nav li:active { outline: none; } .ui-tabs .ui-tabs-nav li:active { outline: none; }
.ui-tabs .ui-tabs-nav li a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; outline: none; float: none; font-weight: normal; color: #4f5861; line-height: 32px; padding: 0 12px 0; } .ui-tabs .ui-tabs-nav li a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; outline: none; float: none; font-weight: normal; color: #4f5861; line-height: 32px; padding: 0 12px 0; }
.ui-tabs .ui-tabs-nav li:last-child { margin-right: 0; } .ui-tabs .ui-tabs-nav li:last-child { margin-right: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-state-default, .ui-tabs .ui-tabs-nav li.ui-state-active { margin-bottom: -1px; padding-bottom: 0; }
.ui-tabs .ui-tabs-nav .ui-state-default { border: 0; background: transparent; } .ui-tabs .ui-tabs-nav .ui-state-default { border: 0; background: transparent; }
.ui-tabs .ui-tabs-nav .ui-state-default a { line-height: 28px; padding-top: 12px; padding-bottom: 8px; color: #66727d; } .ui-tabs .ui-tabs-nav .ui-state-default a { line-height: 28px; padding-top: 12px; padding-bottom: 5px; color: #66727d; border-bottom: 3px solid transparent; }
.ui-tabs .ui-tabs-nav .ui-state-default a:hover { color: #4f5861; } .ui-tabs .ui-tabs-nav .ui-state-default a:hover { color: #4f5861; }
.ui-tabs .ui-tabs-nav .ui-state-active { padding-bottom: 1px; background-color: transparent; cursor: text; } .ui-tabs .ui-tabs-nav .ui-state-active { background-color: transparent; cursor: text; }
.ui-tabs .ui-tabs-nav .ui-state-active a { border-bottom: 3px solid #66727d; padding-left: 0; padding-right: 0; margin: 0 12px 0; color: #4f5861; } .ui-tabs .ui-tabs-nav .ui-state-active a { border-color: #66727d; padding-left: 0; padding-right: 0; margin: 0 12px 0; color: #4f5861; }
.ui-tabs .ui-tabs-nav.ui-state-active { border-color: #808080; } .ui-tabs .ui-tabs-nav.ui-state-active { border-color: #808080; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.ui-corner-top { text-indent: -9999em; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.ui-corner-top { text-indent: -9999em; }
.ui-tabs .ui-tabs-nav li.cms-tabset-icon.ui-corner-top a { display: block; padding-left: 40px; padding-right: 0; margin: 0; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.ui-corner-top a { display: block; padding-left: 40px; padding-right: 0; margin: 0; }
@ -649,8 +650,7 @@ body.cms { overflow: hidden; }
.cms-content-header-tabs .icon-button-group { margin-right: 16px; } .cms-content-header-tabs .icon-button-group { margin-right: 16px; }
.cms-content-fields .ui-tabs-nav { float: none; padding: 0; border-bottom: 1px solid #d0d3d5; margin: 0 16px 0; } .cms-content-fields .ui-tabs-nav { float: none; padding: 0; border-bottom: 1px solid #d0d3d5; margin: 0 16px 0; }
.cms-content-fields .ui-tabs-nav li { margin-bottom: -1px; } .cms-content-fields .ui-tabs-nav li { margin: 0 12px -1px -12px; }
.cms-content-fields .ui-tabs-nav li.first a { margin-left: 0; padding-left: 0; }
/** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */ /** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */
.cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; } .cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; }
@ -741,7 +741,7 @@ body.cms { overflow: hidden; }
.cms-content-tools h3 { font-size: 13px; } .cms-content-tools h3 { font-size: 13px; }
.cms-content-tools h4 { font-size: 12px; margin: 5px 0; } .cms-content-tools h4 { font-size: 12px; margin: 5px 0; }
.cms-content-tools .ui-widget-content { background: none; } .cms-content-tools .ui-widget-content { background: none; }
.cms-content-tools .field { /* Fields are more compressed in the sidebar 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 */ } .cms-content-tools .field { /* Fields are more compressed in the sidebar 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 */ }
.cms-content-tools .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; } .cms-content-tools .field label { float: none; width: auto; font-size: 12px; padding: 0 8px 4px 0; }
.cms-content-tools .field .middleColumn { margin: 0; } .cms-content-tools .field .middleColumn { margin: 0; }
.cms-content-tools .field input.text, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 5px; font-size: 11px; } .cms-content-tools .field input.text, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 5px; font-size: 11px; }
@ -766,7 +766,7 @@ body.cms { overflow: hidden; }
.cms-tree-filtered { position: absolute; margin: 0; width: 100%; box-sizing: border-box; margin-left: -16px; padding: 16px 16px; background: #D4E2EC; text-shadow: none; border: 0; } .cms-tree-filtered { position: absolute; margin: 0; width: 100%; box-sizing: border-box; margin-left: -16px; padding: 16px 16px; background: #D4E2EC; text-shadow: none; border: 0; }
.cms-tree-filtered > strong, .cms-tree-filtered > a { font-size: 14px; } .cms-tree-filtered > strong, .cms-tree-filtered > a { font-size: 14px; }
/** CMS Batch actions */ /** CMS Batch actions */
.cms-content-batchactions-button { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 4px 6px; vertical-align: middle; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9); background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9); background-image: linear-gradient(to bottom, #ffffff, #d9d9d9); border: 1px solid #aaa; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .cms-content-batchactions-button { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 4px 6px; vertical-align: middle; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9); background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9); background-image: linear-gradient(to bottom, #ffffff, #d9d9d9); border: 1px solid #aaa; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.cms-content-batchactions { float: left; position: relative; display: block; } .cms-content-batchactions { float: left; position: relative; display: block; }
@ -852,7 +852,7 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
/** ------------------------------------------------------------------ /** ------------------------------------------------------------------
* Dialog * Dialog
* *
* Contained in a jQuery UI dialog ('.ui-dialog'), with either inline * Contained in a jQuery UI dialog ('.ui-dialog'), with either inline
* markup (for the "insert" dialogs), or an iframe (for member profile). * markup (for the "insert" dialogs), or an iframe (for member profile).
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
@ -968,7 +968,7 @@ form.import-form label.left { width: 250px; }
.toggle-details-icon.opened { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -846px no-repeat; } .toggle-details-icon.opened { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -846px no-repeat; }
.ss-uploadfield-item-edit-all .toggle-details-icon.opened { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -814px no-repeat; } .ss-uploadfield-item-edit-all .toggle-details-icon.opened { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -814px no-repeat; }
/** -------------------------------------------- Hide preview toggle link by default. May be shown in IE7 stylesheet and forced to show with js if needed -------------------------------------------- */ /** -------------------------------------------- Hide preview toggle link by default. May be shown in IE7 stylesheet and forced to show with js if needed -------------------------------------------- */
.cms .Actions > .cms-preview-toggle-link, .cms .cms-navigator > .cms-preview-toggle-link { display: none; } .cms .Actions > .cms-preview-toggle-link, .cms .cms-navigator > .cms-preview-toggle-link { display: none; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */ /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */

4
admin/css/screen.css.map
View File

File diff suppressed because one or more lines are too long

226
admin/scss/_style.scss
View File

@ -1,13 +1,13 @@
/** /**
* This file defines most styles of the CMS: Colors, fonts, backgrounds, * This file defines most styles of the CMS: Colors, fonts, backgrounds,
* alignments, dimensions. * alignments, dimensions.
* *
* Use SCSS variable definitions in screen.css to avoid repeating styles * Use SCSS variable definitions in screen.css to avoid repeating styles
* like background colours or padding dimensions. See themes/_default.scss * like background colours or padding dimensions. See themes/_default.scss
* to get started. * to get started.
* *
* To avoid this file getting too large and complicated, it is encouraged to * To avoid this file getting too large and complicated, it is encouraged to
* create new SCSS files for larger components like the CMS menu or tree * create new SCSS files for larger components like the CMS menu or tree
* (see _tree.scss and _menu.scss). * (see _tree.scss and _menu.scss).
*/ */
@import "compass"; @import "compass";
@ -33,18 +33,18 @@ body.cms {
a { a {
color: $color-text-blue-link; color: $color-text-blue-link;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: underline; text-decoration: underline;
} }
} }
body .ui-widget { body .ui-widget {
font-family: $font-family; font-family: $font-family;
font-size: $font-base-size; font-size: $font-base-size;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
@ -108,7 +108,7 @@ body.cms {
a { a {
color: $color-text-blue-link; color: $color-text-blue-link;
} }
.backlink { .backlink {
span.btn-icon-back { span.btn-icon-back {
height:16px; height:16px;
@ -159,7 +159,7 @@ body.cms {
} }
} }
} }
// Reset to default styles // Reset to default styles
.ss-ui-button { .ss-ui-button {
line-height: $grid-x*3; line-height: $grid-x*3;
@ -255,7 +255,7 @@ body.cms {
.view-controls { .view-controls {
float: right; float: right;
margin-top: 4px; margin-top: 4px;
.icon-button-group { .icon-button-group {
.icon-button { .icon-button {
padding: 6px 8px; padding: 6px 8px;
@ -365,7 +365,7 @@ body.cms {
&:active { &:active {
background-color: #d4dbe1; background-color: #d4dbe1;
} }
&.font-icon-search { &.font-icon-search {
&:before { &:before {
font-size: 18px; font-size: 18px;
@ -385,7 +385,7 @@ body.cms {
} }
// Context specific overrides for Tabs. // Context specific overrides for Tabs.
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link, .ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-active a.icon-button.cms-panel-link,
.ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link { .ui-tabs.ui-tabs-nav li.cms-tabset-icon.ui-corner-top.ui-state-default a.icon-button.cms-panel-link {
padding: 5px 8px 6px; padding: 5px 8px 6px;
line-height: 1em; line-height: 1em;
@ -466,7 +466,7 @@ body.cms {
box-shadow: inset 0 0 3px rgba(191, 194, 196, .9); box-shadow: inset 0 0 3px rgba(191, 194, 196, .9);
} }
} }
.cms-content-header-tabs & { .cms-content-header-tabs & {
overflow: hidden; overflow: hidden;
} }
@ -508,16 +508,16 @@ body.cms {
~ .ui-tabs-panel { ~ .ui-tabs-panel {
clear: both; clear: both;
} }
li { li {
top: 0; top: 0;
float: left; float: left;
margin-top: 0; margin-top: 0;
&:active { &:active {
outline: none; outline: none;
} }
a { a {
@include inline-block; @include inline-block;
outline: none; outline: none;
@ -538,6 +538,14 @@ body.cms {
} }
} }
//jquery UI override
li.ui-tabs-active,
li.ui-state-default,
li.ui-state-active {
margin-bottom: -1px;
padding-bottom: 0;
}
.ui-state-default { .ui-state-default {
border: 0; border: 0;
background: transparent; background: transparent;
@ -545,8 +553,9 @@ body.cms {
a { a {
line-height: 28px; line-height: 28px;
padding-top: 12px; padding-top: 12px;
padding-bottom: 8px; padding-bottom: 5px;
color: lighten($color-text, 10%); color: lighten($color-text, 10%);
border-bottom: 3px solid transparent;
&:hover { &:hover {
color: $color-text; color: $color-text;
@ -555,19 +564,18 @@ body.cms {
} }
.ui-state-active { .ui-state-active {
padding-bottom: 1px;
background-color: transparent; background-color: transparent;
cursor: text; cursor: text;
a { a {
border-bottom: 3px solid #66727d; border-color: #66727d;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
margin: 0 12px 0; margin: 0 12px 0;
color: $color-text; color: $color-text;
} }
} }
&.ui-state-active { &.ui-state-active {
border-color: $color-medium-separator; border-color: $color-medium-separator;
} }
@ -619,8 +627,8 @@ body.cms {
* Primary styles which sit on top of screen, with different tab colors. * Primary styles which sit on top of screen, with different tab colors.
* TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass() * TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass()
*/ */
.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs.cms-tabset-primary .ui-tabs-nav,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav { .ui-tabs .cms-content-header-tabs .ui-tabs-nav {
margin-top: 0; margin-top: 0;
float: none; // parent container is already right floated float: none; // parent container is already right floated
@ -643,13 +651,13 @@ body.cms {
.ui-state-default { .ui-state-default {
background: none; background: none;
border-top: none; border-top: none;
border: none; border: none;
} }
.ui-state-active { .ui-state-active {
@include box-shadow(none); @include box-shadow(none);
background: transparent; background: transparent;
border-top: none; border-top: none;
border: none; border: none;
z-index:2; z-index:2;
@ -665,7 +673,7 @@ body.cms {
.cms-content-header-tabs { .cms-content-header-tabs {
float: right; float: right;
margin-top: 8px; margin-top: 8px;
&.icon-button-group-tabs { &.icon-button-group-tabs {
margin-top: 12px; margin-top: 12px;
margin-bottom: 13px; margin-bottom: 13px;
@ -683,12 +691,8 @@ body.cms {
margin: 0 16px 0; margin: 0 16px 0;
li { li {
margin-bottom: -1px; // Align tab content with gutter (supports multiple rows of tabs)
margin: 0 $grid-x*1.5 -1px $grid-x*-1.5;
&.first a {
margin-left: 0;
padding-left: 0;
}
} }
} }
@ -744,7 +748,7 @@ body.cms {
position: absolute; position: absolute;
bottom: 80px; bottom: 80px;
z-index: 100001; z-index: 100001;
span.notice { span.notice {
width: 300px; width: 300px;
font-size: 14px; font-size: 14px;
@ -758,7 +762,7 @@ body.cms {
*display: inline; *display: inline;
} }
} }
.loading-animation { .loading-animation {
display: none; display: none;
position: absolute; position: absolute;
@ -791,16 +795,16 @@ body.cms {
clear: both; clear: both;
margin: 0 0 $grid-y; margin: 0 0 $grid-y;
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2; padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
font-weight: normal; font-weight: normal;
border: 1px #ccc solid; border: 1px #ccc solid;
background: #fff; // for browsers that don't understand rgba background: #fff; // for browsers that don't understand rgba
background: rgba(#fff,0.5); background: rgba(#fff,0.5);
text-shadow: none; text-shadow: none;
@include border-radius(3px 3px 3px 3px); @include border-radius(3px 3px 3px 3px);
&.notice { &.notice {
background-color: lighten($color-notice,22%); // Blue background-color: lighten($color-notice,22%); // Blue
border-color: $color-notice; border-color: $color-notice;
} }
&.warning { // Yellow &.warning { // Yellow
background-color: lighten($color-warning,47%); background-color: lighten($color-warning,47%);
@ -809,12 +813,12 @@ body.cms {
&.error, &.bad, &.required, &.validation { // Red &.error, &.bad, &.required, &.validation { // Red
background-color: lighten($color-error,24%); background-color: lighten($color-error,24%);
border-color: $color-error; border-color: $color-error;
} }
&.good { // Green &.good { // Green
background-color: lighten($color-good,40%); background-color: lighten($color-good,40%);
border-color: $color-good; border-color: $color-good;
} }
p { p {
margin: 0; margin: 0;
} }
@ -828,15 +832,15 @@ body.cms {
.ui-tabs-panel { .ui-tabs-panel {
.message { .message {
margin: $grid-x*2 0; // gets padding from tab panel margin: $grid-x*2 0; // gets padding from tab panel
} }
} }
} }
.notice-item { .notice-item {
@include border-radius(3px); @include border-radius(3px);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
padding: 6px 24px 8px 10px; padding: 6px 24px 8px 10px;
word-wrap: break-word; word-wrap: break-word;
min-height: 60px; min-height: 60px;
@ -880,7 +884,7 @@ body.cms {
font-weight: normal; font-weight: normal;
width: 12px; width: 12px;
height: 16px; height: 16px;
color: #555; color: #555;
font-size: 16px; font-size: 16px;
overflow: hidden; overflow: hidden;
top: 4px; top: 4px;
@ -938,14 +942,14 @@ body.cms {
.step-label { .step-label {
opacity:0.9; opacity:0.9;
.flyout { .flyout {
height:17px; //centres number within the grey arrow height:17px; //centres number within the grey arrow
padding-top:5px; padding-top:5px;
} }
.title { .title {
padding-top:5px; //aligns label with point of arrow padding-top:5px; //aligns label with point of arrow
font-weight:bold; //to match pagetype label font-weight:bold; //to match pagetype label
@include text-shadow(1px 1px 0 $color-text-shadow); @include text-shadow(1px 1px 0 $color-text-shadow);
} }
} }
ul.SelectionGroup { ul.SelectionGroup {
padding-left:28px; padding-left:28px;
@ -955,7 +959,7 @@ body.cms {
.parent-mode { .parent-mode {
padding: $grid-x; padding: $grid-x;
overflow: auto; overflow: auto;
} }
} }
#PageType { #PageType {
@ -974,14 +978,14 @@ body.cms {
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
&:hover, &.selected { &:hover, &.selected {
background-color: $color-highlight-opacity; background-color: $color-highlight-opacity;
} }
&.disabled { &.disabled {
color: $color-text-disabled; color: $color-text-disabled;
@include opacity(0.5); @include opacity(0.5);
&:hover { &:hover {
@ -997,22 +1001,22 @@ body.cms {
padding-left: 0; padding-left: 0;
padding-bottom: 0; padding-bottom: 0;
} }
input, label, .page-icon, .title { input, label, .page-icon, .title {
float: left; float: left;
line-height: 1.3em; line-height: 1.3em;
} }
.page-icon { .page-icon {
margin: 0 4px; margin: 0 4px;
} }
.title { .title {
width: 120px; width: 120px;
font-weight: bold; font-weight: bold;
padding-right: 10px; padding-right: 10px;
} }
.description { .description {
font-style: italic; font-style: italic;
// Undo some generic styles from tooltips // Undo some generic styles from tooltips
@ -1021,8 +1025,8 @@ body.cms {
margin: 0; margin: 0;
} }
} }
} }
} }
/** -------------------------------------------- /** --------------------------------------------
* Content toolbar * Content toolbar
@ -1036,7 +1040,7 @@ body.cms {
@include legacy-pie-clearfix(); @include legacy-pie-clearfix();
border-bottom: 0; border-bottom: 0;
box-shadow: none; box-shadow: none;
.cms-tree-view-modes { .cms-tree-view-modes {
float:right; float:right;
padding-top:$grid-y - 3; padding-top:$grid-y - 3;
@ -1068,7 +1072,7 @@ body.cms {
.cms-content-tools { .cms-content-tools {
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
width: $grid-x * 36; width: $grid-x * 36;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
z-index: 70; z-index: 70;
border-right: 1px solid $color-separator; border-right: 1px solid $color-separator;
@ -1078,7 +1082,7 @@ body.cms {
&.filter{ &.filter{
padding:0 !important; padding:0 !important;
} }
.cms-panel-header { .cms-panel-header {
clear: both; clear: both;
margin: 10px 0 $grid-y - 1; margin: 10px 0 $grid-y - 1;
@ -1086,7 +1090,7 @@ body.cms {
line-height: $grid-y * 3; line-height: $grid-y * 3;
border-bottom: 1px solid $color-light-separator; border-bottom: 1px solid $color-light-separator;
} }
.cms-panel-content { .cms-panel-content {
width: $grid-x * 34; width: $grid-x * 34;
padding: 0 $grid-x*1.5 0 $grid-x*2; padding: 0 $grid-x*1.5 0 $grid-x*2;
@ -1097,9 +1101,9 @@ body.cms {
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two. margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
} }
} }
.cms-content-header { .cms-content-header {
background-color: darken($color-widget-bg, 40%); background-color: darken($color-widget-bg, 40%);
@include background-image( @include background-image(
linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%)) linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%))
); );
@ -1124,13 +1128,13 @@ body.cms {
font-size: $font-base-size; font-size: $font-base-size;
margin:5px 0; margin:5px 0;
} }
.ui-widget-content { .ui-widget-content {
background: none; background: none;
} }
.field { .field {
/* /*
* Fields are more compressed in the sidebar compared to the * Fields are more compressed in the sidebar compared to the
* main content editing window so the below alters the internal * main content editing window so the below alters the internal
* spacing of the fields so we can move that spacing to between * spacing of the fields so we can move that spacing to between
@ -1142,23 +1146,23 @@ body.cms {
font-size: $font-base-size; font-size: $font-base-size;
padding: 0 $grid-x 4px 0; padding: 0 $grid-x 4px 0;
} }
.middleColumn { .middleColumn {
margin: 0; margin: 0;
} }
input.text, input.text,
select, select,
textarea { textarea {
padding: 5px; padding: 5px;
font-size: 11px; font-size: 11px;
} }
&.checkbox { &.checkbox {
padding: 0 0 8px; padding: 0 0 8px;
input { input {
margin: 2px 0; margin: 2px 0;
} }
} }
@ -1170,14 +1174,14 @@ body.cms {
.fieldgroup { .fieldgroup {
.fieldgroup-field { .fieldgroup-field {
padding: 0; padding: 0;
.field { .field {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
} }
} }
table { table {
margin: 8px -4px; margin: 8px -4px;
thead { thead {
@ -1189,7 +1193,7 @@ body.cms {
padding: 4px; padding: 4px;
} }
} }
tr { tr {
&.active { &.active {
background-color: $color-menu-button; background-color: $color-menu-button;
@ -1203,14 +1207,14 @@ body.cms {
} }
} }
} }
td { td {
padding: 4px; padding: 4px;
line-height: 16px; line-height: 16px;
vertical-align: top; vertical-align: top;
} }
} }
td { td {
border-bottom: 1px solid darken($color-widget-bg, 10%); border-bottom: 1px solid darken($color-widget-bg, 10%);
padding: $grid-y - 1 2px; padding: $grid-y - 1 2px;
@ -1243,14 +1247,14 @@ body.cms {
background: #D4E2EC; background: #D4E2EC;
text-shadow: none; text-shadow: none;
border: 0; border: 0;
> strong, > strong,
> a { > a {
font-size: 14px; font-size: 14px;
} }
} }
/** /**
* CMS Batch actions * CMS Batch actions
*/ */
.cms-content-batchactions-button { .cms-content-batchactions-button {
@ -1376,7 +1380,7 @@ form.member-profile-form {
text-indent: -9999em; text-indent: -9999em;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
background:url(../images/question.png) no-repeat 0px 0px; background:url(../images/question.png) no-repeat 0px 0px;
} }
} }
@ -1387,14 +1391,14 @@ form.member-profile-form {
#CsvFile .middleColumn { #CsvFile .middleColumn {
background: none !important; background: none !important;
} }
.advanced h4 { .advanced h4 {
margin-bottom: .5em; margin-bottom: .5em;
} }
.Actions { .Actions {
text-align: left; text-align: left;
border: 0; border: 0;
} }
input.customFormat { input.customFormat {
width: $grid-x * 10; width: $grid-x * 10;
border: 1px solid #ccc !important; border: 1px solid #ccc !important;
@ -1439,7 +1443,7 @@ form.member-profile-form {
li { li {
float: none; float: none;
width: auto; width: auto;
} }
} }
} }
} }
@ -1461,13 +1465,13 @@ form.member-profile-form {
width: 800px; width: 800px;
z-index: 40; z-index: 40;
} }
.cms-content-fields { .cms-content-fields {
// always show a y scroll bar as popups like TreeDropdowns // always show a y scroll bar as popups like TreeDropdowns
// can trigger longer pages and the extra scroll bar doesn't fire our sizing bar // can trigger longer pages and the extra scroll bar doesn't fire our sizing bar
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
background: $tab-panel-texture-color; background: $tab-panel-texture-color;
width: 100%; width: 100%;
#Root_Main { #Root_Main {
.confirmedpassword { .confirmedpassword {
@ -1488,19 +1492,19 @@ form.member-profile-form {
ul.optionset li { ul.optionset li {
float:none; float:none;
} }
} }
} }
form.member-profile-form { form.member-profile-form {
#Root .ui-tabs-nav { #Root .ui-tabs-nav {
display: none; display: none;
} }
#Root_Main, #Root_Permissions { #Root_Main, #Root_Permissions {
border: none; border: none;
} }
} }
} }
/** -------------------------------------------- /** --------------------------------------------
* "Settings" Form * "Settings" Form
* -------------------------------------------- */ * -------------------------------------------- */
@ -1533,7 +1537,7 @@ form.member-profile-form {
bottom: 0; bottom: 0;
width:100%; width:100%;
} }
a { a {
display: block; display: block;
text-align: right; text-align: right;
padding: $grid-y/2 0; padding: $grid-y/2 0;
@ -1545,7 +1549,7 @@ form.member-profile-form {
color: #555d60; color: #555d60;
font-size: 16px; font-size: 16px;
} }
&.toggle-expand { &.toggle-expand {
width: 40px; // will set the collapsed width width: 40px; // will set the collapsed width
display: none; display: none;
@ -1565,7 +1569,7 @@ form.member-profile-form {
} }
&.collapsed { &.collapsed {
cursor: pointer; cursor: pointer;
.cms-panel-header *, .cms-panel-header *,
.cms-panel-content, .cms-panel-content,
.cms-panel-toggle a.toggle-collapse{ .cms-panel-toggle a.toggle-collapse{
display:none; display:none;
@ -1665,12 +1669,12 @@ form.member-profile-form {
} }
/** ------------------------------------------------------------------ /** ------------------------------------------------------------------
* Dialog * Dialog
* *
* Contained in a jQuery UI dialog ('.ui-dialog'), with either inline * Contained in a jQuery UI dialog ('.ui-dialog'), with either inline
* markup (for the "insert" dialogs), or an iframe (for member profile). * markup (for the "insert" dialogs), or an iframe (for member profile).
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
// overlay for switching between CMS panes // overlay for switching between CMS panes
.cms .ui-widget-overlay-light { .cms .ui-widget-overlay-light {
background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; background: #aaaaaa url(../../thirdparty/jquery-ui-themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: 0.3; opacity: 0.3;
@ -1698,7 +1702,7 @@ form.member-profile-form {
overflow: visible; overflow: visible;
padding: 0; padding: 0;
@include box-shadow(0px 0px 30px 10px rgba(0,0,0,.3)); @include box-shadow(0px 0px 30px 10px rgba(0,0,0,.3));
// Titlebar for pop-up dialog. // Titlebar for pop-up dialog.
.ui-dialog-titlebar.ui-widget-header { .ui-dialog-titlebar.ui-widget-header {
font-size: $font-base-size+2; font-size: $font-base-size+2;
@ -1707,7 +1711,7 @@ form.member-profile-form {
background: { background: {
color:transparent; color:transparent;
image:url(../images/textures/cms_content_header.png); image:url(../images/textures/cms_content_header.png);
repeat:repeat; repeat:repeat;
} }
@include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset); @include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset);
.ui-dialog-title { .ui-dialog-title {
@ -1760,7 +1764,7 @@ form.member-profile-form {
.clear { .clear {
clear: both; clear: both;
} }
} }
&.loading { &.loading {
@ -1801,9 +1805,9 @@ body.cms-dialog {
position: absolute; position: absolute;
left: 8px; left: 8px;
top: 13px; top: 13px;
font-weight: normal; font-weight: normal;
color: #888; color: #888;
width: 35px; width: 35px;
padding-right: 0; padding-right: 0;
} }
@ -1883,11 +1887,11 @@ body.cms-dialog {
.field{ .field{
border-bottom: 1px solid $color-shadow-light; border-bottom: 1px solid $color-shadow-light;
@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%)); @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
&.last{ &.last{
border-bottom:none; border-bottom:none;
@include box-shadow(0 0 0 rgba(0, 0, 0, 0)); @include box-shadow(0 0 0 rgba(0, 0, 0, 0));
margin-bottom:0; margin-bottom:0;
} }
} }
} }
@ -2006,7 +2010,7 @@ body.cms-dialog {
.title { .title {
height: 26px - 2*4px; // minus padding height: 26px - 2*4px; // minus padding
padding: 4px; padding: 4px;
} }
} }
@ -2068,7 +2072,7 @@ form.small {
.cms-file-info-data { .cms-file-info-data {
// Ensure it fits beside the image preview, increased size for long url // Ensure it fits beside the image preview, increased size for long url
max-width: 550px; max-width: 550px;
// Reduced label widths to fit everything in smaller space // Reduced label widths to fit everything in smaller space
.field { .field {
@ -2155,7 +2159,7 @@ form.import-form {
.ss-uploadfield-item-edit-all .ui-button-text{ .ss-uploadfield-item-edit-all .ui-button-text{
padding-right:0; padding-right:0;
} }
.toggle-details-icon { .toggle-details-icon {
background: sprite($sprites32, menu-arrow-down) no-repeat; background: sprite($sprites32, menu-arrow-down) no-repeat;
.ss-uploadfield-item-edit-all &{ .ss-uploadfield-item-edit-all &{
@ -2163,22 +2167,22 @@ form.import-form {
display:inline-block; display:inline-block;
width:8px; width:8px;
height:8px; height:8px;
padding-left:5px; padding-left:5px;
} }
&.opened { &.opened {
background: sprite($sprites32, menu-arrow-up) no-repeat; background: sprite($sprites32, menu-arrow-up) no-repeat;
.ss-uploadfield-item-edit-all &{ .ss-uploadfield-item-edit-all &{
background: sprite($sprites32, menu-arrow-deselected-up) no-repeat; background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
} }
} }
} }
/** -------------------------------------------- /** --------------------------------------------
* Hide preview toggle link by default. May be shown * Hide preview toggle link by default. May be shown
in IE7 stylesheet and forced to show with js if needed in IE7 stylesheet and forced to show with js if needed
* -------------------------------------------- */ * -------------------------------------------- */
.cms .Actions > .cms-preview-toggle-link, .cms .Actions > .cms-preview-toggle-link,
.cms .cms-navigator > .cms-preview-toggle-link{ .cms .cms-navigator > .cms-preview-toggle-link{
display:none; display:none;
} }