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

ENHANCEMENT: using CSS3 to do number label in dialog box (SSO-8)

Browse Source
This commit is contained in:
Julian Seidenberg 2011-09-30 12:48:27 +13:00
parent 90d4321c52
commit fb364bcc25
2 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
admin/css/screen.css
View File

@ -462,16 +462,19 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333;
/* Adjusting the color of the background overlay to be darker for pop-up dialogs (created by jQuery-UI) */
.cms .ui-widget-overlay { background-color: #000; background-image: none; }
.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Exception for a label that is inline with the selector dropdown box */ }
.ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; /* Labels for all the Dialogs of the pop-up form */ /* Numeric labels in the sitetree */ /* Exception for a label that is inline with the selector dropdown box */ }
.ui-dialog #PageType .middleColumn { margin: 0; padding: 0; }
.ui-dialog #PageType .middleColumn .optionset li { width: 100%; }
.ui-dialog #PageType li.selected { background-color: rgba(255, 255, 153, 0.5); /*background-color: #FFFF99;*/ }
.ui-dialog #PageType li:hover { background-color: #FFFF99 !important; /* lighter highlight on hover */ }
.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; }
.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: right !important; }
.ui-dialog .field label.left { font-size: 14px; font-weight: bold; width: 100%; float: none; color: #5f6160; margin-top: -4px; margin-left: 36px; }
.ui-dialog label.numeric-label { font-size: 14px; font-weight: bold; float: left; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #7b8c91; padding: 4px 8px 4px 3px; text-align: right; color: #fff; position: absolute; width: 15px; /* Numeric label icon (supports up to two-digit numbers) */ }
.ui-dialog label.numeric-label .label-triangle { position: absolute; left: 26px; margin-top: -18px; overflow: visible; display: block; width: 0; height: 0; border-top: 11px solid transparent; border-left: 7px dashed #7b8c91; border-bottom: 11px solid transparent; }
.ui-dialog #ParentID label.left { padding: 8px 0 8px 0; float: left !important; width: 125px; }
.ui-dialog #ParentID .middleColumn { width: 320px; }
.ui-dialog .Actions { float: right; margin: 0; }
/** ------------------------------------------------------------------
* Titlebar for pop-up dialog.
* ----------------------------------------------------------------- */
.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #b0bec7; padding: 8px 8px 6px 16px; border-bottom: 2px solid #8399a7; border-radius: 4px 8px 0 0; 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); }
.ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #b0bec7; padding: 4px 4px 3px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; /* /2 need to eliminate visual artifact */ -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; -ms-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; 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); margin-bottom: 7px; }

52
admin/scss/_style.scss
View File

@ -10,6 +10,9 @@
* create new SCSS files for larger components like the CMS menu or tree
* (see _tree.scss and _menu.scss).
*/
@import "compass";
@import "compass/css3";
@import "compass/utilities";
/** ----------------------------------------------------
* Core Styles.
@ -859,6 +862,7 @@ form.member-profile-form {
$DialogHeaderColor: #5F6160;
$DialogHeaderFontSize: 14px;
$DialogBorderRadius: 8px;
$DialogLabelColor: #7B8C91;
.ui-dialog {
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
border: 3px solid #000 !important;
@ -894,13 +898,50 @@ $DialogBorderRadius: 8px;
width: 100%;
float: none;
color: $DialogHeaderColor;
margin-top: -4px;
margin-left: 36px;
}
/* Numeric labels in the sitetree */
label.numeric-label {
font-size: $DialogHeaderFontSize;
font-weight: bold;
float: left;
@include border-top-left-radius(3px);
@include border-bottom-left-radius(3px);
background-color: $DialogLabelColor;
padding: 4px 8px 4px 3px;
text-align: right;
color: #fff;
position: absolute;
width: 15px;
/* Numeric label icon (supports up to two-digit numbers) */
.label-triangle {
position: absolute;
left: 26px;
margin-top: -18px;
overflow: visible;
display: block;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-left: 7px dashed $DialogLabelColor;
border-bottom: 11px solid transparent;
}
}
/* Exception for a label that is inline with the selector dropdown box */
#ParentID {
label.left {
padding: 8px 0 8px 0;
float: right !important;
float: left !important;
width: 125px;
}
.middleColumn {
width: 320px;
}
}
@ -913,15 +954,14 @@ $DialogBorderRadius: 8px;
/** ------------------------------------------------------------------
* Titlebar for pop-up dialog.
* ----------------------------------------------------------------- */
@import "compass";
@import "compass/css3";
@import "compass/utilities";
.ui-dialog-titlebar.ui-widget-header {
font-size: $DialogHeaderFontSize;
background-color: #b0bec7;
padding: 8px 8px 6px 16px;
padding: 4px 4px 3px 16px;
border-bottom: 2px solid #8399a7;
border-radius: $DialogBorderRadius/2 $DialogBorderRadius 0 0;
@include border-top-left-radius($DialogBorderRadius/2); /* /2 need to eliminate visual artifact */
@include border-top-right-radius($DialogBorderRadius);
@include background-image(linear-gradient(#ced7dc, #92a5b2));
margin-bottom: 7px;
}