diff --git a/admin/css/screen.css b/admin/css/screen.css index 9c9db5c3c..b43726bb8 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -371,10 +371,10 @@ body.cms { overflow: hidden; } /** -------------------------------------------- Tabs -------------------------------------------- */ .ui-tabs { padding: 0; background: none; } .ui-tabs .ui-tabs { position: static; } -.ui-tabs .ui-tabs-panel { padding: 8px 0; background: transparent; border: 0; } +.ui-tabs .ui-tabs-panel { padding: 16px; background: transparent; border: 0; } .ui-tabs .ui-tabs-panel.cms-edit-form { padding: 0; } .ui-tabs .ui-widget-header { border: 0; background: none; } -.ui-tabs .ui-tabs-nav { float: right; margin: 0 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; } +.ui-tabs .ui-tabs-nav { float: right; margin: 16px 0 -1px 0; padding: 0 12px 0 0; border-bottom: none; } .ui-tabs .ui-tabs-nav ~ .ui-tabs-panel { border-top: 1px solid #c0c0c2; clear: both; } .ui-tabs .ui-tabs-nav li { top: 0; float: left; border-bottom: 0 !important; } .ui-tabs .ui-tabs-nav li a { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; float: none; font-weight: bold; color: #444444; line-height: 32px; padding: 0 16px 0; } @@ -396,20 +396,13 @@ body.cms { overflow: hidden; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.gallery.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -54px no-repeat; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.edit.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -404px no-repeat; } .ui-tabs .ui-tabs-nav li.cms-tabset-icon.search.ui-state-active a { background: url('../images/sprites-64x64-s88957ee578.png') 0 -104px no-repeat; } -.ui-tabs .cms-edit-form, .ui-tabs .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ } -.ui-tabs .cms-edit-form .cms-panel-padded, .ui-tabs .cms-content-fields .cms-panel-padded { /* Has padded area inside it */ padding: 0; margin: 0; } -.ui-tabs .cms-edit-form .ui-tabs-panel, .ui-tabs .cms-edit-form .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel, .ui-tabs .cms-content-fields .ss-gridfield { margin: 12px; padding: 0 0 12px; } -.ui-tabs .cms-edit-form .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-edit-form .ss-gridfield .ss-gridfield, .ui-tabs .cms-content-fields .ui-tabs-panel .ss-gridfield, .ui-tabs .cms-content-fields .ss-gridfield .ss-gridfield { /* Files area & inside second level tabs */ padding: 0; /* should be zero ideally */ margin: 0 0 12px; } -.ui-tabs .cms-edit-form .ui-tabs-nav, .ui-tabs .cms-content-fields .ui-tabs-nav { margin: 10px 12px 0; padding: 0 8px 0 0; /* second set of tabs */ } -.ui-tabs .cms-edit-form #tree_actions .ui-tabs-nav, .ui-tabs .cms-content-fields #tree_actions .ui-tabs-nav { margin: 0; } -.ui-tabs .cms-panel-padded h3 { margin-left: 12px; /* reports headers, probably too specific */ } -.ui-tabs .cms-panel-padded .ui-tabs-panel { margin: 0; padding: 12px 12px 12px; } +.ui-tabs .cms-panel-padded .ui-tabs-panel { padding: 0; } .ui-tabs .cms-panel-padded .ui-tabs-panel .ui-tabs-panel { padding: 8px 0 0 0; } -.ui-tabs .ui-tabs .ui-tabs-panel { /* second level tabs */ padding-top: 8px; } +.ui-tabs .cms-panel-padded .Actions { padding: 0; } .ui-tabs.ss-tabset-tabshidden .ui-tabs-panel { border-top: none; } /** Primary styles which sit on top of screen, with different tab colors. TODO Only use one "primary" selector and fix HTMLEditorField TabSet addExtraClass() */ -.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { border-left: 1px solid #b3b3b3; float: none; } +.ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { margin-top: 0; border-left: 1px solid #b3b3b3; float: none; } .ui-tabs.cms-tabset-primary .ui-tabs-nav li, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li { margin-right: 0; margin-top: 0; } .ui-tabs.cms-tabset-primary .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary li a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav li a { margin: 0; line-height: 39px; } .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-all, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-top, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-right, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tr, .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-corner-tl, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-all, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-top, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-right, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tr, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-corner-tl, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-all, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-top, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-right, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tr, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; } @@ -442,7 +435,8 @@ body.cms { overflow: hidden; } .message.good { background-color: #eaf6e4; border-color: #72c34b; } .message p { margin: 0; } -p.message { margin-bottom: 12px; } +.cms-edit-form .message { margin: 16px; } +.cms-edit-form .ui-tabs-panel .message { margin: 0 0 16px 0; } /** -------------------------------------------- Page icons -------------------------------------------- */ .page-icon, a .jstree-pageicon { display: block; width: 16px; height: 16px; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; } @@ -492,7 +486,7 @@ p.message { margin-bottom: 12px; } .cms-content-tools { background: #eceff1; width: 200px; overflow-y: auto; overflow-x: hidden; z-index: 70; border-right: 1px solid #c0c0c2; -webkit-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); -moz-box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); box-shadow: rgba(248, 248, 248, 0.9) -1px 0 0 inset, 0 0 1px rgba(201, 205, 206, 0.8); float: left; position: relative; } .cms-content-tools.filter { padding: 0 !important; } .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid #d0d3d5; -webkit-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -moz-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); -o-box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); box-shadow: 0 1px 0 rgba(248, 248, 248, 0.9); } -.cms-content-tools .cms-panel-content { width: 184px; padding: 8px 8px 0; overflow: auto; height: 100%; } +.cms-content-tools .cms-panel-content { width: 184px; padding: 16px 8px 0; overflow: auto; height: 100%; } .cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; } .cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); } .cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; } @@ -538,7 +532,7 @@ p.message { margin-bottom: 12px; } /** -------------------------------------------- Member Profile -------------------------------------------- */ form.member-profile-form { padding: 0 16px 0 0; } form.member-profile-form #Root_Permissions { clear: both; border-top: 1px solid #a6a6a6; } -form.member-profile-form #Root_Main { clear: both; border-top: 1px solid #a6a6a6; padding-top: 16px; } +form.member-profile-form #Root_Main { clear: both; border-top: 1px solid #a6a6a6; } form.member-profile-form #Root_Main .cms-help-toggle { text-indent: -9999em; display: inline-block; width: 20px; background: url(../images/question.png) no-repeat 0px 0px; } form.member-profile-form #FavouritePageID { margin-top: 8px; } form.member-profile-form #CsvFile .middleColumn { background: none !important; } @@ -595,6 +589,8 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto; .cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; } .cms-panel .collapsed-flyout li a span { display: block !important; } +.cms .cms-panel-padded { padding: 16px 16px; margin: 0; } + /** ------------------------------------------------------------------ * Dialog * diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 0cdc4c8a5..2b2482229 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -159,7 +159,7 @@ body.cms { } .ui-tabs-panel { - padding: $grid-x 0; + padding: $grid-x*2; background: transparent; // default it's white border: 0; // suppress default borders &.cms-edit-form { @@ -174,7 +174,7 @@ body.cms { .ui-tabs-nav { float: right; - margin: 0 0 -1px 0; + margin: $grid-x*2 0 -1px 0; padding: 0 $grid-x*1.5 0 0; border-bottom: none; @@ -250,43 +250,17 @@ body.cms { } } - .cms-edit-form, .cms-content-fields { /*not sure if .cms-content-fields effects other areas*/ - .cms-panel-padded { /* Has padded area inside it */ - padding: 0; - margin: 0; - } - .ui-tabs-panel, .ss-gridfield { - margin: 12px; - padding: 0 0 12px; - .ss-gridfield { /* Files area & inside second level tabs */ - padding: 0; /* should be zero ideally */ - margin: 0 0 12px; - } - } - .ui-tabs-nav { - margin: 10px 12px 0; - padding: 0 8px 0 0; /* second set of tabs */ - } - #tree_actions .ui-tabs-nav{ - margin: 0; - } - } - .cms-panel-padded { - h3 { - margin-left: 12px; /* reports headers, probably too specific */ - } .ui-tabs-panel { - margin: 0; - padding: 12px 12px 12px; + padding: 0; // Avoid double padding with parent .ui-tabs-panel { padding: $grid-x 0 0 0; } } - } - .ui-tabs .ui-tabs-panel { /* second level tabs */ - padding-top: 8px; + .Actions { + padding: 0; // Avoid double padding with parent + } } &.ss-tabset-tabshidden .ui-tabs-panel { @@ -301,6 +275,7 @@ body.cms { .ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { + margin-top: 0; border-left: 1px solid darken($color-tab, 15%); float: none; // parent container is already right floated @@ -483,8 +458,17 @@ body.cms { margin: 0; } } -p.message { - margin-bottom: $grid-y*1.5; + + +.cms-edit-form { + .message { + margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel + } + .ui-tabs-panel { + .message { + margin: 0 0 $grid-x*2 0; // gets padding from tab panel + } + } } /** -------------------------------------------- @@ -704,7 +688,7 @@ p.message { .cms-panel-content { width: ($grid-x * 23); - padding: $grid-x $grid-x 0; + padding: $grid-x*2 $grid-x 0; // smaller left/right padding to use space efficiently overflow: auto; height:100%; @@ -924,7 +908,6 @@ form.member-profile-form { #Root_Main { clear:both; border-top: 1px solid darken($color-tab, 20%); - padding-top:$grid-y*2; .cms-help-toggle { text-indent: -9999em; display: inline-block; @@ -1210,6 +1193,13 @@ form.member-profile-form { } } +.cms { + .cms-panel-padded { + padding: $grid-y*2 $grid-x*2; + margin:0; + } +} + /** ------------------------------------------------------------------ * Dialog * diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index ad090f63c..9b997cff3 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -12,7 +12,7 @@ Used in side panels and action tabs */ .ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; } -#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 12px; } +#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .backlink { padding-left: 12px; } diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss index e3b0b2ef0..a96b24c6a 100644 --- a/scss/AssetUploadField.scss +++ b/scss/AssetUploadField.scss @@ -17,7 +17,6 @@ #AssetUploadField { border-bottom: 0; @include box-shadow(none); - padding: 12px; } .backlink { padding-left: 12px;