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

16
admin/css/screen.css
View File

@ -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; }
@ -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

22
admin/scss/_style.scss
View File

@ -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,12 +564,11 @@ 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;
@ -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;
}
} }
} }