From 094b3916e6a38d7aa98c8e1b049feb24e966749a Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 9 Aug 2011 17:52:13 +1200 Subject: [PATCH] MINOR: misc style fixes to the content-tools sidebar in the main tab including resizing form fields to fit. --- admin/css/screen.css | 223 ++++----- admin/javascript/LeftAndMain.Panel.js | 4 +- admin/scss/_forms.scss | 48 +- admin/scss/_style.scss | 97 ++-- admin/scss/_tree.scss | 655 +++++++++++++------------- admin/scss/_uitheme.scss | 2 +- 6 files changed, 529 insertions(+), 500 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index e99bfeb10..53f2bab80 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -53,116 +53,67 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** ----------------------------- CMS Components ------------------------------ */ /** 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. */ -.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; } -.jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } -.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; float: left; } -.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; } -.jstree a:focus { outline: none; } -.jstree a > ins { height: 16px; width: 16px; } -.jstree a > .jstree-icon { margin-right: 3px; } -.jstree li.jstree-open > ul { display: block; } -.jstree li.jstree-closed > ul { display: none; } -.jstree li.disabled a { color: #aaaaaa; } - -.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; } -.jstree-rtl li { margin-left: 0; margin-right: 18px; } - -.jstree-rtl > ul > li { margin-right: 0px; } - -.jstree > ul > li { margin-left: 0px; } - -#vakata-dragged { display: block; margin: 0 0 0 0; padding: 4px 4px 4px 24px; position: absolute; top: -2000px; line-height: 16px; z-index: 10000; } - -#vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #ebebeb; border: 1px solid silver; z-index: 10000; *width: 180px; } - -#vakata-contextmenu ul { min-width: 180px; *width: 180px; } - -#vakata-contextmenu ul, #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; } - -#vakata-contextmenu li { line-height: 20px; min-height: 20px; position: relative; padding: 0px; } - -#vakata-contextmenu li a { padding: 1px 6px; line-height: 17px; display: block; text-decoration: none; margin: 1px 1px 0 1px; } - -#vakata-contextmenu li ins { float: left; width: 16px; height: 16px; text-decoration: none; margin-right: 2px; } - -#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background: gray; color: white; } - -#vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #ebebeb; border: 1px solid gray; } - -#vakata-contextmenu .right { right: 100%; left: auto; } - -#vakata-contextmenu .bottom { bottom: -1px; top: auto; } - -#vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: silver; /* border-top:1px solid #fefefe; */ padding: 0; } - -.jstree ul, .jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; } - -.jstree li { display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } - -.jstree-rtl li { margin-left: 0; margin-right: 18px; } - -.jstree > ul > li { margin-left: 0px; } - -.jstree-rtl > ul > li { margin-right: 0px; } - -.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; } - -.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; } - -.jstree a:focus { outline: none; } - -.jstree a > ins { height: 16px; width: 16px; } - -.jstree a > .jstree-icon { margin-right: 3px; } - -.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; } - -li.jstree-open > ul { display: block; } - -li.jstree-closed > ul { display: none; } - -#vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; } - -#vakata-dragged .jstree-ok { background: green; } - -#vakata-dragged .jstree-invalid { background: red; } - -#jstree-marker { padding: 0; margin: 0; font-size: 12px; overflow: hidden; height: 12px; width: 8px; position: absolute; top: -30px; z-index: 10001; background-repeat: no-repeat; display: none; background-color: transparent; text-shadow: 1px 1px 1px white; color: black; line-height: 10px; } - -#jstree-marker-line { padding: 0; margin: 0; line-height: 0%; font-size: 1px; overflow: hidden; height: 1px; width: 100px; position: absolute; top: -30px; z-index: 10000; background-repeat: no-repeat; display: none; background-color: #456c43; cursor: pointer; border: 1px solid #eeeeee; border-left: 0; -moz-box-shadow: 0px 0px 2px #666; -webkit-box-shadow: 0px 0px 2px #666; box-shadow: 0px 0px 2px #666; -moz-border-radius: 1px; border-radius: 1px; -webkit-border-radius: 1px; } - -.jstree .jstree-real-checkbox { display: none; } - -.jstree-themeroller .ui-icon { overflow: visible; } - -.jstree-themeroller a { padding: 0 2px; } - -.jstree-themeroller .jstree-no-icon { display: none; } - -.jstree .jstree-wholerow-real { position: relative; z-index: 1; } - -.jstree .jstree-wholerow-real li { cursor: pointer; } - -.jstree .jstree-wholerow-real a { border-left-color: transparent !important; border-right-color: transparent !important; } - -.jstree .jstree-wholerow { position: relative; z-index: 0; height: 0; } - -.jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { width: 100%; } - -.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li, .jstree .jstree-wholerow a { margin: 0 !important; padding: 0 !important; } - -.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { background: transparent !important; } - -.jstree .jstree-wholerow ins, .jstree .jstree-wholerow span, .jstree .jstree-wholerow input { display: none !important; } - -.jstree .jstree-wholerow a, .jstree .jstree-wholerow a:hover { text-indent: -9999px !important; width: 100%; padding: 0 !important; border-right-width: 0px !important; border-left-width: 0px !important; } - -.jstree .jstree-wholerow-span { position: absolute; left: 0; margin: 0px; padding: 0; height: 18px; border-width: 0; padding: 0; z-index: 0; } - +.cms .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; } +.cms .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } +.cms .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; float: left; } +.cms .jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; border: 1px solid #fff; } +.cms .jstree a:focus, .cms .jstree a:active, .cms .jstree a:hover { outline: none; text-decoration: none; cursor: pointer; text-shadow: none; } +.cms .jstree a > ins { height: 16px; width: 16px; } +.cms .jstree a > .jstree-icon { margin-right: 3px; } +.cms .jstree li.jstree-open > ul { display: block; } +.cms .jstree li.jstree-closed > ul { display: none; } +.cms .jstree li.disabled a { color: #aaaaaa; } +.cms .jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; } +.cms .jstree-rtl li { margin-left: 0; margin-right: 18px; } +.cms .jstree-rtl > ul > li { margin-right: 0px; } +.cms .jstree > ul > li { margin-left: 0px; } +.cms #vakata-dragged { display: block; margin: 0 0 0 0; padding: 4px 4px 4px 24px; position: absolute; top: -2000px; line-height: 16px; z-index: 10000; } +.cms #vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #ebebeb; border: 1px solid silver; z-index: 10000; *width: 180px; } +.cms #vakata-contextmenu ul { min-width: 180px; *width: 180px; } +.cms #vakata-contextmenu ul, .cms #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; } +.cms #vakata-contextmenu li { line-height: 20px; min-height: 20px; position: relative; padding: 0px; } +.cms #vakata-contextmenu li a { padding: 1px 6px; line-height: 17px; display: block; text-decoration: none; margin: 1px 1px 0 1px; } +.cms #vakata-contextmenu li ins { float: left; width: 16px; height: 16px; text-decoration: none; margin-right: 2px; } +.cms #vakata-contextmenu li a:hover, .cms #vakata-contextmenu li.vakata-hover > a { background: gray; color: white; } +.cms #vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #ebebeb; border: 1px solid gray; } +.cms #vakata-contextmenu .right { right: 100%; left: auto; } +.cms #vakata-contextmenu .bottom { bottom: -1px; top: auto; } +.cms #vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: silver; /* border-top:1px solid #fefefe; */ padding: 0; } +.cms .jstree ul, .cms .jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; } +.cms .jstree li { display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; } +.cms .jstree-rtl li { margin-left: 0; margin-right: 18px; } +.cms .jstree > ul > li { margin-left: 0px; } +.cms .jstree-rtl > ul > li { margin-right: 0px; } +.cms .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; } +.cms .jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; } +.cms .jstree a:focus { outline: none; } +.cms .jstree a > ins { height: 16px; width: 16px; } +.cms .jstree a > .jstree-icon { margin-right: 3px; } +.cms .jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; } +.cms li.jstree-open > ul { display: block; } +.cms li.jstree-closed > ul { display: none; } +.cms #vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; } +.cms #vakata-dragged .jstree-ok { background: green; } +.cms #vakata-dragged .jstree-invalid { background: red; } +.cms #jstree-marker { padding: 0; margin: 0; font-size: 12px; overflow: hidden; height: 12px; width: 8px; position: absolute; top: -30px; z-index: 10001; background-repeat: no-repeat; display: none; background-color: transparent; text-shadow: 1px 1px 1px white; color: black; line-height: 10px; } +.cms #jstree-marker-line { padding: 0; margin: 0; line-height: 0%; font-size: 1px; overflow: hidden; height: 1px; width: 100px; position: absolute; top: -30px; z-index: 10000; background-repeat: no-repeat; display: none; background-color: #456c43; cursor: pointer; border: 1px solid #eeeeee; border-left: 0; -moz-box-shadow: 0px 0px 2px #666; -webkit-box-shadow: 0px 0px 2px #666; box-shadow: 0px 0px 2px #666; -moz-border-radius: 1px; border-radius: 1px; -webkit-border-radius: 1px; } +.cms .jstree .jstree-real-checkbox { display: none; } +.cms .jstree-themeroller .ui-icon { overflow: visible; } +.cms .jstree-themeroller a { padding: 0 2px; } +.cms .jstree-themeroller .jstree-no-icon { display: none; } +.cms .jstree .jstree-wholerow-real { position: relative; z-index: 1; } +.cms .jstree .jstree-wholerow-real li { cursor: pointer; } +.cms .jstree .jstree-wholerow-real a { border-left-color: transparent !important; border-right-color: transparent !important; } +.cms .jstree .jstree-wholerow { position: relative; z-index: 0; height: 0; } +.cms .jstree .jstree-wholerow ul, .cms .jstree .jstree-wholerow li { width: 100%; } +.cms .jstree .jstree-wholerow, .cms .jstree .jstree-wholerow ul, .cms .jstree .jstree-wholerow li, .cms .jstree .jstree-wholerow a { margin: 0 !important; padding: 0 !important; } +.cms .jstree .jstree-wholerow, .cms .jstree .jstree-wholerow ul, .cms .jstree .jstree-wholerow li { background: transparent !important; } +.cms .jstree .jstree-wholerow ins, .cms .jstree .jstree-wholerow span, .cms .jstree .jstree-wholerow input { display: none !important; } +.cms .jstree .jstree-wholerow a, .cms .jstree .jstree-wholerow a:hover { text-indent: -9999px !important; width: 100%; padding: 0 !important; border-right-width: 0px !important; border-left-width: 0px !important; } +.cms .jstree .jstree-wholerow-span { position: absolute; left: 0; margin: 0px; padding: 0; height: 18px; border-width: 0; padding: 0; z-index: 0; } .cms .jstree-apple.jstree-focused { background: none; } -.cms .jstree-apple > ul { background: none; } - -.jstree li { line-height: 25px; } +.cms .jstree-apple.jstree-focused .jstree-apple > ul { background: none; } +.cms .jstree li { line-height: 25px; } .cms-tree.jstree-apple { /* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */ } .cms-tree.jstree-apple li.Root strong { font-weight: bold; padding-left: 1px; } @@ -228,19 +179,20 @@ form.nostyle .field { display: inline; padding: 0; border: 0; } form.nostyle label { float: none; width: auto; } form.nostyle .middleColumn { margin-left: 0; } -.field { display: block; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ } +.field { display: block; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); *zoom: 1; /* TreeDropdowns */ /* dropdowns */ /* chzn override */ /* Date Fields */ } .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .field.noLabel .middleColumn { margin-left: 0; } -.field label.left { float: left; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; } +.field label.left { float: left; display: block; width: 168px; padding: 8px 8px 8px 0; line-height: 16px; } .field label.left span { display: block; font-size: 11px; color: #848484; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .field label.right { cursor: pointer; } -.field .middleColumn { margin-left: 184px; /* 23 as we lose a column on the field padding */ } +.field .middleColumn { margin-left: 176px; } .field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 90%; max-width: 512px; } .field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 8px 8px; margin: 0; outline: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } .field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid #b3b3b3; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .field .TreeDropdownField { padding: 0 14px 0 0; } -.field .TreeDropdownField .panel { margin-top: -2px; border: 1px solid #b3b3b3; border-top: none; padding-right: 14px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } -.field .TreeDropdownField .toggle-panel-link { margin-right: -14px; } +.field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; padding-right: 14px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } +.field .TreeDropdownField .treedropdownfield-toggle-panel-link { margin-right: -14px; } +.field .TreeDropdownField.treedropdownfield-open-tree { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; -o-border-bottom-left-radius: 0; -ms-border-bottom-left-radius: 0; -khtml-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0; -ms-border-bottom-right-radius: 0; -khtml-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .field .dropdown select { margin-top: 8px; } .field .chzn-container .chzn-results li { font-size: 11px; line-height: 16px; padding: 4px 4px; } .field .chzn-container-active .chzn-single { border: 1px solid #9a9a9a; } @@ -248,21 +200,24 @@ form.nostyle .middleColumn { margin-left: 0; } .field .chzn-container-single .chzn-single:hover, .field .chzn-container-single .chzn-single:focus, .field .chzn-container-single .chzn-single:active { text-decoration: none; outline: none; } .field .chzn-container-single .chzn-single div { width: 24px; } .field .chzn-container-single .chzn-single div b { background-position: 3px 4px; } +.field input.hasDatepicker { width: 50%; max-width: 96px; } /** ---------------------------------------------------- Buttons ---------------------------------------------------- */ .cms .ui-widget { /* loading */ } .cms .ui-widget input.loading, .cms .ui-widget input.ui-state-default.loading, .cms .ui-widget .ui-widget-content input.ui-state-default.loading, .cms .ui-widget .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .cms .ui-widget .ss-ui-button { /* all buttons */ padding: 5px 12px; text-decoration: none; line-height: 16px; color: #1f1f1f; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } .cms .ui-widget .ss-ui-button.ui-state-hover { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ui-widget .ss-ui-button:focus, .cms .ui-widget .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } .cms .ui-widget .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } .cms .ui-widget .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } .cms .ui-widget .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } .cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } .cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ui-widget .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #1f1f1f; text-decoration: underline; } +.cms .ui-widget .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #1f1f1f; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */ .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; } +.fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; } /** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */ .field.checkbox { padding-left: 192px; margin-bottom: 8px; } @@ -286,7 +241,7 @@ form.nostyle .middleColumn { margin-left: 0; } .cms .ui-tabs .ui-tabs-nav li { top: 0; } .cms .ui-tabs .ui-tabs-nav li a { padding: 0 15px; } .cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; } -.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 24px 16px; } +.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 16px 16px; } .cms .ui-widget-content, .cms .ui-widget { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; } .cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; } .cms .ui-state-hover { cursor: pointer; } @@ -324,8 +279,8 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { *display: inline; } -.cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 16px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 16px 16px; -webkit-box-shadow: #eceff1 0 16px 16px; -o-box-shadow: #eceff1 0 16px 16px; box-shadow: #eceff1 0 16px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } -.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 12px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 176px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } +.cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 16px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 8px 16px; -webkit-box-shadow: #eceff1 0 8px 16px; -o-box-shadow: #eceff1 0 8px 16px; box-shadow: #eceff1 0 8px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } +.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 168px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header .cms-content-header-tabs { float: left; } @@ -334,9 +289,6 @@ html article, html aside, html details, html figcaption, html figure, html foote .ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active { background: #eceff1; } .ui-tabs .cms-content-header .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a { border-bottom: 2px solid #eceff1; } -/* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */ -.cms-content-tools { background-color: #dde3e7; padding: 8px 8px; width: 176px; border-right: 1px solid #dde3e7; overflow: auto; z-index: 60; } - .cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; } /** ------------------------------------------------------- Top Left Header and logo area -------------------------------------------------------- */ @@ -347,9 +299,9 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; } .cms-logo .version { display: none; } .cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1311826037') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } -.cms-logo span { font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } +.cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } -.cms-login-status { border-top: 1px solid #19435c; height: 23px; padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 10px; } +.cms-login-status { border-top: 1px solid #19435c; height: 23px; padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } .cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; } /** ----------------------------------------------- Loading Screen ------------------------------------------------ */ @@ -361,7 +313,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; } /** -------------------------------------------- Actions -------------------------------------------- */ -.cms-content-actions { margin: 8px 8px; text-align: right; height: 32px; -moz-box-shadow: #f0f3f4 0 -16px 16px; -webkit-box-shadow: #f0f3f4 0 -16px 16px; -o-box-shadow: #f0f3f4 0 -16px 16px; box-shadow: #f0f3f4 0 -16px 16px; } +.cms-content-actions { margin: 8px 8px; text-align: right; height: 32px; z-index: 70; -moz-box-shadow: #f0f3f4 0 -16px 16px; -webkit-box-shadow: #f0f3f4 0 -16px 16px; -o-box-shadow: #f0f3f4 0 -16px 16px; box-shadow: #f0f3f4 0 -16px 16px; } /** -------------------------------------------- Messages -------------------------------------------- */ .message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; } @@ -370,7 +322,6 @@ html article, html aside, html details, html figcaption, html figure, html foote .message.error { background-color: #ffbe66; border-color: #ff9300; } /** -------------------------------------------- ModelAdmin -------------------------------------------- */ -.ModelAdmin .cms-content-tools { width: 192px; } .ModelAdmin .ResultAssemblyBlock { display: none; } /** -------------------------------------------- "Add page" dialog -------------------------------------------- */ @@ -388,13 +339,21 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-content-toolbar .cms-tree-view-modes * { display: inline-block; } .cms-content-toolbar .cms-content-batchactions form > * { display: inline-block; } +/* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */ +.cms-content-tools { background-color: #dde3e7; width: 200px; border-right: 1px solid #bfcad2; overflow: auto; z-index: 60; } +.cms-content-tools .cms-panel-header { padding: 0 4px; margin: 8px 12px 0; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); } +.cms-content-tools .cms-panel-content { width: 160px; padding: 8px 16px; } +.cms-content-tools .cms-panel-content form { width: 160px; } .cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; } -.cms-content-tools h3 { font-size: 14px; margin-left: -2px; padding-left: 2px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); } -.cms-content-tools h4 { font-size: 13px; } -.cms-content-tools h5 { font-size: 12px; } -.cms-content-tools .field label { float: none; width: auto; } -.cms-content-tools .field .middleColumn { margin-left: 0; } -.cms-content-tools .fieldgroup .fieldgroup-field { width: auto; } +.cms-content-tools h3 { font-size: 13px; } +.cms-content-tools .field { /* fields are more compressed in the sidebar */ /* smaller treedropdown */ } +.cms-content-tools .field label { float: none; width: auto; padding: 0 8px 0 0; } +.cms-content-tools .field .middleColumn { margin: 2px 0; } +.cms-content-tools .field input, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 6px; /* taken 2px off the padding to realign with grid */ } +.cms-content-tools .field .chzn-container-single .chzn-single { height: 26px; line-height: 28px; } +.cms-content-tools .field .chzn-container-single .chzn-single div b { background-position: 4px 2px; } +.cms-content-tools .fieldgroup .fieldgroup-field { width: auto; padding: 0; } +.cms-content-tools .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } .cms-content-batchactions, .cms-content-constructive-actions { float: right; } @@ -431,7 +390,7 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; .cms-panel .toggle-collapse { width: 100%; } .cms-panel .toggle-expand { width: 40px; } .cms-panel.collapsed .cms-panel-content { display: none; } -.cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 100px; } +.cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 80px; border: none; padding: 0; } .cms-content .cms-panel.collapsed { cursor: pointer; } diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js index b4d12f878..382917031 100644 --- a/admin/javascript/LeftAndMain.Panel.js +++ b/admin/javascript/LeftAndMain.Panel.js @@ -36,11 +36,11 @@ if(!this.find('.toggle-collapse').length) this.append('«'); // Set panel width same as the content panel it contains. Assumes the panel has overflow: hidden. - this.setWidthExpanded(this.find('.cms-panel-content').width()); + this.setWidthExpanded(this.find('.cms-panel-content').innerWidth()); // Assumes the collasped width is indicated by the toggle, or by an optional collapsed view var collapsedContent = this.find('.cms-panel-content-collapsed'); - this.setWidthCollapsed(collapsedContent.length ? collapsedContent.widht() : this.find('.toggle-expand').width()); + this.setWidthCollapsed(collapsedContent.length ? collapsedContent.innerWidth() : this.find('.toggle-expand').innerWidth()); this.togglePanel(!jQuery(this).hasClass('collapsed')); diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index b27aab3ff..fc45f9519 100755 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -21,7 +21,7 @@ form.nostyle { // margin with a postive padding to ensure the bottom border extends // over the edges padding: 0 $grid-horizontal $grid-vertical - 1 $grid-horizontal; - margin: 0 ($grid-horizontal * -1) $grid-vertical ($grid-horizontal * -1); + margin: 0 $grid-horizontal * -1 $grid-vertical $grid-horizontal * -1; border-bottom: 1px solid $color-shadow-light; // using the legacy version as some of the more complex form fields @@ -39,8 +39,8 @@ form.nostyle { &.left { float: left; - - width: $grid-horizontal * 22; + display: block; + width: $grid-horizontal * 21; padding: $grid-vertical $grid-horizontal $grid-vertical 0; line-height: $grid-vertical * 2; @@ -59,7 +59,7 @@ form.nostyle { } .middleColumn { - margin-left: $grid-horizontal * 23; /* 23 as we lose a column on the field padding */ + margin-left: $grid-horizontal * 22; } input.text, @@ -93,8 +93,7 @@ form.nostyle { .TreeDropdownField { padding: 0 14px 0 0; - .panel { - margin-top: -2px; + .treedropdownfield-panel { border: 1px solid lighten($color-medium-separator, 20%); border-top: none; padding-right: 14px; @@ -102,9 +101,14 @@ form.nostyle { @include border-bottom-left-radius(4px); @include border-bottom-right-radius(4px); } - .toggle-panel-link { + .treedropdownfield-toggle-panel-link { margin-right: -14px; } + + &.treedropdownfield-open-tree { + @include border-bottom-left-radius(0); + @include border-bottom-right-radius(0); + } } /* dropdowns */ @@ -152,6 +156,12 @@ form.nostyle { } } } + + /* Date Fields */ + input.hasDatepicker { + width: 50%; + max-width: ($grid-horizontal * 12); + } } /** ---------------------------------------------------- @@ -183,8 +193,8 @@ form.nostyle { color: $color-text-dark; background-color: $color-button-generic; border: 1px solid $color-button-generic-border; - @include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px); + @include box-shadow(lighten($color-base, 10%) 0 1px 2px); @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, linear-gradient(color-stops( @@ -194,6 +204,7 @@ form.nostyle { ); &.ui-state-hover { border: 1px solid darken($color-button-generic-border, 5%); + @include box-shadow($color-base 0 1px 2px); @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, linear-gradient(color-stops( @@ -202,6 +213,18 @@ form.nostyle { )) ); } + &:focus, + &:active { + border: 1px solid darken($color-button-generic-border, 5%); + + @include box-shadow($color-base 0 1px 2px); + @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, + linear-gradient(color-stops( + $color-button-generic, + lighten($color-button-generic, 20%) + )) + ); + } /* constructive */ &.ss-ui-action-constructive { padding-left: 24px; @@ -264,6 +287,8 @@ form.nostyle { border: 0; color: $color-text-dark; text-decoration: underline; + + @include box-shadow(none); } } } @@ -278,7 +303,7 @@ form.nostyle { display: block; width: $grid-horizontal * 23; padding-right: $grid-horizontal; - + &.odd { } @@ -286,6 +311,11 @@ form.nostyle { &.even { } + + .field { + border: none; + padding-bottom: 0; + } } } /** ---------------------------------------------------- diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 3707c4ed6..924ed9a4b 100755 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -105,7 +105,7 @@ html,body { z-index: 60; border-bottom: 2px solid darken($color-widget-bg, 35%); - @include box-shadow($color-widget-bg 0 $grid-vertical*2 $grid-vertical*2); + @include box-shadow($color-widget-bg 0 $grid-vertical $grid-vertical*2); @include background-image( linear-gradient(darken($color-widget-bg, 10%), darken($color-widget-bg, 30%)) ); @@ -113,11 +113,11 @@ html,body { h2 { float: left; padding: $grid-vertical $grid-horizontal 0 0; - font-size: $font-base-size; + font-size: $font-base-size + 2; line-height: $grid-horizontal * 3; font-weight: bold; text-shadow: darken($color-widget-bg, 10%) 1px 1px 0; - width: $grid-horizontal * 22 /* 24 - (padding on each side) */; + width: $grid-horizontal * 21 /* 24 - (padding on each side + margin) */; @include hide-text-overflow(); } @@ -165,19 +165,6 @@ html,body { } } -/* -------------------------------------------------------- - * Content Tools is the sidebar on the left of the main content - * panel - */ -.cms-content-tools { - background-color: darken($color-widget-bg, 5%); - padding: $grid-vertical $grid-horizontal; - width: $grid-horizontal * 22 /* 24 - padding */; - border-right: 1px solid darken($color-widget-bg, 5%); - overflow: auto; - z-index: 60; -} - .cms-content { &.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; @@ -237,6 +224,7 @@ html,body { span { font-weight: bold; + font-size: 14px; @include hide-text-overflow(); } } @@ -247,7 +235,7 @@ html,body { padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; - font-size: $font-base-size - 2; + font-size: $font-base-size - 1; .logout-link { display: inline-block; @@ -317,6 +305,8 @@ html,body { margin: $grid-vertical $grid-horizontal; text-align: right; height: $grid-vertical*4; + z-index: 70; + @include box-shadow($tab-panel-texture-color 0 $grid-vertical*-2 $grid-vertical*2); } @@ -353,10 +343,6 @@ html,body { * -------------------------------------------- */ .ModelAdmin { - .cms-content-tools { - width: $grid-horizontal * 24; - } - // Disable by default, will be replaced by more intuitive column selection in new data grid .ResultAssemblyBlock { display: none; @@ -421,39 +407,82 @@ html,body { } } + +/* -------------------------------------------------------- + * Content Tools is the sidebar on the left of the main content + * panel + */ .cms-content-tools { + background-color: darken($color-widget-bg, 5%); + width: $grid-horizontal * 25; + border-right: 1px solid darken($color-widget-bg, 15%); + overflow: auto; + z-index: 60; + + .cms-panel-header { + padding: 0 $grid-horizontal / 2; + margin: $grid-vertical $grid-horizontal * 1.5 0; + line-height: $grid-vertical * 3; + + @include doubleborder(bottom, $color-light-separator, lighten($color-light-separator, 10%)) + + } + + .cms-panel-content { + width: ($grid-horizontal * 20); + padding: $grid-vertical $grid-horizontal * 2; + + form { + width: $grid-horizontal * 20; + } + } + h3,h4,h5 { font-weight: bold; line-height: $grid-vertical * 2; } h3 { - font-size: $font-base-size + 2; - margin-left: -2px; - padding-left: 2px; - - @include doubleborder(bottom, $color-light-separator, lighten($color-light-separator, 10%)) - } - h4 { font-size: $font-base-size + 1; } - h5 { - font-size: $font-base-size; - } .field { + /* fields are more compressed in the sidebar */ label { float: none; width: auto; + padding: 0 $grid-vertical 0 0; } .middleColumn { - margin-left: 0; + margin: 2px 0; + } + + input, + select, + textarea { + padding: ($grid-vertical - 2); /* taken 2px off the padding to realign with grid */ + } + + /* smaller treedropdown */ + .chzn-container-single .chzn-single { + height: 26px; + line-height: 28px; + } + + .chzn-container-single .chzn-single div b { + background-position: 4px 2px; } } .fieldgroup { .fieldgroup-field { width: auto; + padding: 0; + + .field { + margin: 0; + padding: 0; + } } } } @@ -611,7 +640,9 @@ form.member-profile-form { .cms-panel-header { @include rotate(-90deg); position: relative; - top: 100px; + top: $grid-vertical * 10; + border: none; + padding: 0; } } diff --git a/admin/scss/_tree.scss b/admin/scss/_tree.scss index 69932f4c7..a600b3960 100755 --- a/admin/scss/_tree.scss +++ b/admin/scss/_tree.scss @@ -6,18 +6,190 @@ * but we need it earlier in order to correctly display the uninitialized tree. */ -.jstree { - ul { +.cms { + .jstree { + ul { + display: block; + margin: 0; + padding: 0; + background: none; + list-style-type: none; + } + li { + display: block; + margin: 0; + padding: 0; + list-style-type: none; + display: block; + min-height: 18px; + line-height: 18px; + white-space: nowrap; + margin-left: 18px; + min-width: 18px; + } + ins { + display: inline-block; + text-decoration: none; + width: 18px; + height: 18px; + margin: 0 0 0 0; + padding: 0; + float: left; + } + a { + display: inline-block; + line-height: 16px; + height: 16px; + color: black; + white-space: nowrap; + text-decoration: none; + padding: 1px 2px; + margin: 0; + border: 1px solid #fff; + + &:focus, + &:active, + &:hover { + outline: none; + text-decoration: none; + cursor: pointer; + text-shadow: none; + } + > { + ins { + height: 16px; + width: 16px; + } + .jstree-icon { + margin-right: 3px; + } + + } + + } + li { + &.jstree-open > ul { + display: block; + } + &.jstree-closed > ul { + display: none; + } + + } + li.disabled a { + color: #aaaaaa; + } + + } + + .jstree-rtl { + a > .jstree-icon { + margin-left: 3px; + margin-right: 0; + } + li { + margin-left: 0; + margin-right: 18px; + } + + } + + .jstree-rtl > ul > li { + margin-right: 0px; + } + + .jstree > ul > li { + margin-left: 0px; + } + + #vakata-dragged { + display: block; + margin: 0 0 0 0; + padding: 4px 4px 4px 24px; + position: absolute; + top: -2000px; + line-height: 16px; + z-index: 10000; + } + #vakata-contextmenu { + display: block; + visibility: hidden; + left: 0; + top: -200px; + position: absolute; + margin: 0; + padding: 0; + min-width: 180px; + background: #ebebeb; + border: 1px solid silver; + z-index: 10000; *width:180px; + } + #vakata-contextmenu ul { + min-width: 180px; *width:180px; + } + #vakata-contextmenu ul, #vakata-contextmenu li { + margin: 0; + padding: 0; + list-style-type: none; + display: block; + } + #vakata-contextmenu li { + line-height: 20px; + min-height: 20px; + position: relative; + padding: 0px; + } + #vakata-contextmenu li a { + padding: 1px 6px; + line-height: 17px; + display: block; + text-decoration: none; + margin: 1px 1px 0 1px; + } + #vakata-contextmenu li ins { + float: left; + width: 16px; + height: 16px; + text-decoration: none; + margin-right: 2px; + } + #vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { + background: gray; + color: white; + } + #vakata-contextmenu li ul { + display: none; + position: absolute; + top: -2px; + left: 100%; + background: #ebebeb; + border: 1px solid gray; + } + #vakata-contextmenu .right { + right: 100%; + left: auto; + } + #vakata-contextmenu .bottom { + bottom: -1px; + top: auto; + } + #vakata-contextmenu li.vakata-separator { + min-height: 0; + height: 1px; + line-height: 1px; + font-size: 1px; + overflow: hidden; + margin: 0 2px; + background: silver; /* border-top:1px solid #fefefe; */ padding:0; + } + + .jstree ul, .jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; } - li { - display: block; - margin: 0 0 0 0; - padding: 0 0 0 0; - list-style-type: none; + .jstree li { display: block; min-height: 18px; line-height: 18px; @@ -25,16 +197,25 @@ margin-left: 18px; min-width: 18px; } - ins { + .jstree-rtl li { + margin-left: 0; + margin-right: 18px; + } + .jstree > ul > li { + margin-left: 0px; + } + .jstree-rtl > ul > li { + margin-right: 0px; + } + .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; - float: left; } - a { + .jstree a { display: inline-block; line-height: 16px; height: 16px; @@ -43,331 +224,159 @@ text-decoration: none; padding: 1px 2px; margin: 0; - &:focus { - outline: none; - } - > { - ins { - height: 16px; - width: 16px; - } - .jstree-icon { - margin-right: 3px; - } - - } - } - li { - &.jstree-open > ul { - display: block; - } - &.jstree-closed > ul { - display: none; - } - + .jstree a:focus { + outline: none; } - li.disabled a { - color: #aaaaaa; + .jstree a > ins { + height: 16px; + width: 16px; } - -} - -.jstree-rtl { - a > .jstree-icon { + .jstree a > .jstree-icon { + margin-right: 3px; + } + .jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; } - li { - margin-left: 0; - margin-right: 18px; + li.jstree-open > ul { + display: block; + } + li.jstree-closed > ul { + display: none; + } + #vakata-dragged ins { + display: block; + text-decoration: none; + width: 16px; + height: 16px; + margin: 0 0 0 0; + padding: 0; + position: absolute; + top: 4px; + left: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-border-radius: 4px; + } + #vakata-dragged .jstree-ok { + background: green; + } + #vakata-dragged .jstree-invalid { + background: red; + } + #jstree-marker { + padding: 0; + margin: 0; + font-size: 12px; + overflow: hidden; + height: 12px; + width: 8px; + position: absolute; + top: -30px; + z-index: 10001; + background-repeat: no-repeat; + display: none; + background-color: transparent; + text-shadow: 1px 1px 1px white; + color: black; + line-height: 10px; + } + #jstree-marker-line { + padding: 0; + margin: 0; + line-height: 0%; + font-size: 1px; + overflow: hidden; + height: 1px; + width: 100px; + position: absolute; + top: -30px; + z-index: 10000; + background-repeat: no-repeat; + display: none; + background-color: #456c43; + cursor: pointer; + border: 1px solid #eeeeee; + border-left: 0; + -moz-box-shadow: 0px 0px 2px #666; + -webkit-box-shadow: 0px 0px 2px #666; + box-shadow: 0px 0px 2px #666; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-border-radius: 1px; + } + .jstree .jstree-real-checkbox { + display: none; + } + .jstree-themeroller .ui-icon { + overflow: visible; + } + .jstree-themeroller a { + padding: 0 2px; + } + .jstree-themeroller .jstree-no-icon { + display: none; + } + .jstree .jstree-wholerow-real { + position: relative; + z-index: 1; + } + .jstree .jstree-wholerow-real li { + cursor: pointer; + } + .jstree .jstree-wholerow-real a { + border-left-color: transparent !important; + border-right-color: transparent !important; + } + .jstree .jstree-wholerow { + position: relative; + z-index: 0; + height: 0; + } + .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { + width: 100%; + } + .jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li, .jstree .jstree-wholerow a { + margin: 0 !important; + padding: 0 !important; + } + .jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { + background: transparent !important; + } + .jstree .jstree-wholerow ins, .jstree .jstree-wholerow span, .jstree .jstree-wholerow input { + display: none !important; + } + .jstree .jstree-wholerow a, .jstree .jstree-wholerow a:hover { + text-indent: -9999px !important; + width: 100%; + padding: 0 !important; + border-right-width: 0px !important; + border-left-width: 0px !important; + } + .jstree .jstree-wholerow-span { + position: absolute; + left: 0; + margin: 0px; + padding: 0; + height: 18px; + border-width: 0; + padding: 0; + z-index: 0; } -} - -.jstree-rtl > ul > li { - margin-right: 0px; -} - -.jstree > ul > li { - margin-left: 0px; -} - -#vakata-dragged { - display: block; - margin: 0 0 0 0; - padding: 4px 4px 4px 24px; - position: absolute; - top: -2000px; - line-height: 16px; - z-index: 10000; -} -#vakata-contextmenu { - display: block; - visibility: hidden; - left: 0; - top: -200px; - position: absolute; - margin: 0; - padding: 0; - min-width: 180px; - background: #ebebeb; - border: 1px solid silver; - z-index: 10000; *width:180px; -} -#vakata-contextmenu ul { - min-width: 180px; *width:180px; -} -#vakata-contextmenu ul, #vakata-contextmenu li { - margin: 0; - padding: 0; - list-style-type: none; - display: block; -} -#vakata-contextmenu li { - line-height: 20px; - min-height: 20px; - position: relative; - padding: 0px; -} -#vakata-contextmenu li a { - padding: 1px 6px; - line-height: 17px; - display: block; - text-decoration: none; - margin: 1px 1px 0 1px; -} -#vakata-contextmenu li ins { - float: left; - width: 16px; - height: 16px; - text-decoration: none; - margin-right: 2px; -} -#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { - background: gray; - color: white; -} -#vakata-contextmenu li ul { - display: none; - position: absolute; - top: -2px; - left: 100%; - background: #ebebeb; - border: 1px solid gray; -} -#vakata-contextmenu .right { - right: 100%; - left: auto; -} -#vakata-contextmenu .bottom { - bottom: -1px; - top: auto; -} -#vakata-contextmenu li.vakata-separator { - min-height: 0; - height: 1px; - line-height: 1px; - font-size: 1px; - overflow: hidden; - margin: 0 2px; - background: silver; /* border-top:1px solid #fefefe; */ padding:0; -} - -.jstree ul, .jstree li { - display: block; - margin: 0 0 0 0; - padding: 0 0 0 0; - list-style-type: none; -} -.jstree li { - display: block; - min-height: 18px; - line-height: 18px; - white-space: nowrap; - margin-left: 18px; - min-width: 18px; -} -.jstree-rtl li { - margin-left: 0; - margin-right: 18px; -} -.jstree > ul > li { - margin-left: 0px; -} -.jstree-rtl > ul > li { - margin-right: 0px; -} -.jstree ins { - display: inline-block; - text-decoration: none; - width: 18px; - height: 18px; - margin: 0 0 0 0; - padding: 0; -} -.jstree a { - display: inline-block; - line-height: 16px; - height: 16px; - color: black; - white-space: nowrap; - text-decoration: none; - padding: 1px 2px; - margin: 0; -} -.jstree a:focus { - outline: none; -} -.jstree a > ins { - height: 16px; - width: 16px; -} -.jstree a > .jstree-icon { - margin-right: 3px; -} -.jstree-rtl a > .jstree-icon { - margin-left: 3px; - margin-right: 0; -} -li.jstree-open > ul { - display: block; -} -li.jstree-closed > ul { - display: none; -} -#vakata-dragged ins { - display: block; - text-decoration: none; - width: 16px; - height: 16px; - margin: 0 0 0 0; - padding: 0; - position: absolute; - top: 4px; - left: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-border-radius: 4px; -} -#vakata-dragged .jstree-ok { - background: green; -} -#vakata-dragged .jstree-invalid { - background: red; -} -#jstree-marker { - padding: 0; - margin: 0; - font-size: 12px; - overflow: hidden; - height: 12px; - width: 8px; - position: absolute; - top: -30px; - z-index: 10001; - background-repeat: no-repeat; - display: none; - background-color: transparent; - text-shadow: 1px 1px 1px white; - color: black; - line-height: 10px; -} -#jstree-marker-line { - padding: 0; - margin: 0; - line-height: 0%; - font-size: 1px; - overflow: hidden; - height: 1px; - width: 100px; - position: absolute; - top: -30px; - z-index: 10000; - background-repeat: no-repeat; - display: none; - background-color: #456c43; - cursor: pointer; - border: 1px solid #eeeeee; - border-left: 0; - -moz-box-shadow: 0px 0px 2px #666; - -webkit-box-shadow: 0px 0px 2px #666; - box-shadow: 0px 0px 2px #666; - -moz-border-radius: 1px; - border-radius: 1px; - -webkit-border-radius: 1px; -} -.jstree .jstree-real-checkbox { - display: none; -} -.jstree-themeroller .ui-icon { - overflow: visible; -} -.jstree-themeroller a { - padding: 0 2px; -} -.jstree-themeroller .jstree-no-icon { - display: none; -} -.jstree .jstree-wholerow-real { - position: relative; - z-index: 1; -} -.jstree .jstree-wholerow-real li { - cursor: pointer; -} -.jstree .jstree-wholerow-real a { - border-left-color: transparent !important; - border-right-color: transparent !important; -} -.jstree .jstree-wholerow { - position: relative; - z-index: 0; - height: 0; -} -.jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { - width: 100%; -} -.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li, .jstree .jstree-wholerow a { - margin: 0 !important; - padding: 0 !important; -} -.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { - background: transparent !important; -} -.jstree .jstree-wholerow ins, .jstree .jstree-wholerow span, .jstree .jstree-wholerow input { - display: none !important; -} -.jstree .jstree-wholerow a, .jstree .jstree-wholerow a:hover { - text-indent: -9999px !important; - width: 100%; - padding: 0 !important; - border-right-width: 0px !important; - border-left-width: 0px !important; -} -.jstree .jstree-wholerow-span { - position: absolute; - left: 0; - margin: 0px; - padding: 0; - height: 18px; - border-width: 0; - padding: 0; - z-index: 0; -} - -// Custom styles -.cms { + // Custom styles .jstree-apple.jstree-focused { background: none; + + .jstree-apple > ul { + background: none; + } } - .jstree-apple > ul { - background: none; - } -} -.jstree li { - line-height: 25px; + .jstree li { + line-height: 25px; + } } .cms-tree.jstree-apple { diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index 3a3a9163a..9bf605ab7 100755 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -39,7 +39,7 @@ .ui-tabs-panel { background: transparent; // default it's white - padding: $grid-vertical * 3 $grid-horizontal * 2; + padding: $grid-vertical * 2 $grid-horizontal * 2; } }