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

MINOR More robust way to style "triangle"/"flyout"/"step indicator" in forms, via background image rather than CSS3 with hard-to-maintain dimension and positioning tweaks. Use inline-block to have it working within other elements (+titles) rather than standalone

Browse Source
This commit is contained in:
Ingo Schommer 2012-01-03 22:17:28 +01:00
parent d9ad1e6e78
commit 97bff7e83d
6 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
admin/css/screen.css
View File

@ -90,7 +90,6 @@ form.nostyle .middleColumn { margin-left: 0; }
.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; display: block; width: 168px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; }
.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; }
.field span.readonly { padding-top: 8px; line-height: 16px; display: block; }
@ -377,8 +376,10 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.cms-dialog-content .clear { clear: both; }
/** Numeric labels */
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) */ }
label.numeric-label .label-flyout-indicator { 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; }
.step-label > * { display: inline-block; vertical-align: top; }
.step-label .flyout { height: 18px; font-size: 14px; font-weight: bold; -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: #667980; padding: 4px 3px 4px 6px; text-align: center; text-shadow: none; color: #fff; }
.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites/32x32-s8fc6dac693.png') 0 0 no-repeat; margin-right: 4px; }
.step-label .title { height: 18px; padding: 4px; }
/** 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. */
.cms .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }

BIN
admin/images/sprites/32x32-s8fc6dac693.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 B

BIN
admin/images/sprites/32x32/numeric-label.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

7
admin/scss/_forms.scss
View File

@ -123,13 +123,6 @@ form.nostyle {
line-height: $grid-vertical * 2;
font-weight: bold;
@include text-shadow(1px 1px 0 $color-text-shadow);
span {
display: block;
font-size: $font-base-size - 1;
color: lighten($color-text, 25%);
@include hide-text-overflow();
}
}
&.right {

1
admin/scss/_sprites.scss
View File

@ -9,6 +9,7 @@ $icon24: sprite-map("menu_icons/24x24/*.png");
$icon16: sprite-map("menu_icons/16x16/*.png");
$btn_icons: sprite-map("btn_icons/*.png", $spacing: 10px);
$sprites32: sprite-map("sprites/32x32/*.png", $spacing: 10px);
@mixin icons($sprite) {
background: $sprite;

43
admin/scss/_style.scss
View File

@ -922,31 +922,36 @@ body.cms-dialog {
/**
* Numeric labels
*/
label.numeric-label {
.step-label {
& > * {
display: inline-block;
vertical-align: top;
}
.flyout {
height: 26px - 2*4px; // minus padding
font-size: $font-base-size+2;
font-weight: bold;
float: left;
@include border-top-left-radius(3px);
@include border-bottom-left-radius(3px);
background-color: $color-dark-grey;
padding: 4px 8px 4px 3px;
text-align: right;
background-color: #667980; // hardcoding colour since its tied to the sprite
padding: 4px 3px 4px 6px;
text-align: center;
text-shadow: none;
color: #fff;
position: absolute;
width: 15px;
}
/* Numeric label icon (supports up to two-digit numbers) */
.label-flyout-indicator {
position: absolute;
left: 26px;
margin-top: -18px;
overflow: visible;
display: block;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-left: 7px dashed $color-dark-grey;
border-bottom: 11px solid transparent;
.arrow {
height: 26px;
width: 10px;
background: sprite($sprites32, numeric-label) no-repeat;
margin-right: 4px;
}
.title {
height: 26px - 2*4px; // minus padding
padding: 4px;
}
}