From 97bff7e83dfdcee876bfa2dee49c16712dde0dbd Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Tue, 3 Jan 2012 22:17:28 +0100 Subject: [PATCH] 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 --- admin/css/screen.css | 7 +-- admin/images/sprites/32x32-s8fc6dac693.png | Bin 0 -> 529 bytes admin/images/sprites/32x32/numeric-label.png | Bin 0 -> 1718 bytes admin/scss/_forms.scss | 7 --- admin/scss/_sprites.scss | 1 + admin/scss/_style.scss | 53 ++++++++++--------- 6 files changed, 34 insertions(+), 34 deletions(-) create mode 100644 admin/images/sprites/32x32-s8fc6dac693.png create mode 100644 admin/images/sprites/32x32/numeric-label.png diff --git a/admin/css/screen.css b/admin/css/screen.css index 444a13747..798972137 100755 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -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; } diff --git a/admin/images/sprites/32x32-s8fc6dac693.png b/admin/images/sprites/32x32-s8fc6dac693.png new file mode 100644 index 0000000000000000000000000000000000000000..309bc6fd7a7e6df1dd87ad7e91c2ac672e6fa048 GIT binary patch literal 529 zcmeAS@N?(olHy`uVBq!ia0vp^oIota!3-pWc-zE*)R_RE5Z9!#`lQPGZcHt!O)alZEpJS%s7tM=Ppxc7t!zrIs!uDgODnHWtE^3{1dEv!*$#vLUOs zCA+G=psum7zNx6Ot*W)Ns=c?qZ*pT#U;CtK?Net=p0jZByhU?YZJ57m!}5)rmv7p( zX8Z09yZ7%ra%}&pGl$M!J$C-e$+PFqUAuAR{=>V^UjP69Uodvw0ieHJN`m}?fm})f zL*b=AJ;x?ky!v~;OPFtk#MB0_XxCP; zb6<4SEA6-N-s*8J7Kd@5+}(>iBTAZw^~qP)X)tfT}T*L?Zi;NJw%5X9qK$0RRG(l(4?ton*v(FQd4sKLZ=5 z4I%8zWz$1JQc=zBi2C;EKR4BydKX?|Z4m`K_0al@^w`LmpJ`X!v4az7NKJSU{L}0WKTS9|cC37t@MBlgy#fY?i zZf8Ko2|Zs+FE_2u>ZFnD6U&X;;=y4~pJ<-eB|HPy9yLNX<}S-gc*r z6x%vV+WmQv<;x%@aZViCk^WPeW@mReIJyZT67^Oh*00XZ=^XRzgl5mP-9O?bz~W2!Fae=MvRT#?BV8U#K|PJd(Ke1LmO4s_jhjak*`URTVG z-1NTG@gT9?yi(h;ac~%9o*QBa3!>Jpv@kNi9UE3@AJ3G-RMUj=&Y?+iUe$SrW(WJI ziT6X~Gs_gVty9x}KTg&+zL4ggR)6nEC|}!s$ZfuHW-1|lASrKDal<&XYjSHIHe4!| zwO=y3*TN5WRrMww%`&1}zs)7WsX|)I)meW%1C;N@4kj3uRPEI5VtxATkdc?*LCo?x zir&=L>bmK-UrJtEyvVw(o6=fa+7mo<^T@~gY8|2Bp+ss~DZ793t${*AmI$U1JfA)w z_NFi%1|1E4k+?~o6Iw8r2zz3eKWwpgWhA`*+9+jqT|6`>MPE|T{QUmoHx=5C4)57O z5S4_sw|%nc@b6I2>zdQ2h;6Gr=h%{>i<`^?iqf6Od&w{>HU3eB{M|Op3-ywQKeqS( zbxWfHonV$F(Vy~6HXUuUZz9Cha#E?~(xy(jqSQ88(a@P&|EqXkezw$V8lQDl$Dmr= zBt96fvHr%dv|YZ}!5~1@f)!XW@x$p6?c=cI)JmJQY*B1PPSAQN=Vv&j0Pgdf_e*q@ zOZJdzO=$OaIWvamJh6`Z(eUqk3iReJY7~Pz&v{X7bQVkn z5EiWh02MYfEE0?i@W;|PEHstQiDjS#EUpp_05}0w>9QCg6)9lFvw2tn9<_+TD*c5p z28CRNfV=Ui$N(~u#7STv9ncQwjVJ;XiA3TO=sU0>9zXt@uKeLqJ3)|(#bEe+KALZj z<|M>nY@MB*F&phLc6K&Ogbgo=4N?U*Y@XRSlK*%-7(7}6lM6CAY~%tjHI|bI;!&uD zLQChHPC9L=4mU9&ez6LjhGE1rSPVAE!`Py2F-zpiTpXQ-U6i%z~ot6n<-eF{+6l4r1k3YDX&Wymhc4>~06K zHN53OgT3?h2|=BcTr&K4V>5o{jlKSeYcdG)Yc^7y!RPs@*X*5tcgXbd+DPl^D*NnNWv-DjnGuBBdgwNL0fnEU!U5DK(%W|VK8jq1a z4V&bAhVyq2hUYeyP{w zqvlm-nQna)f`LRP8hj`yKX5z>dO{-qaPVnLbVYbk8egcNS`@?bS22VJW@b|_*Ouq# znXPUjlP * { + display: inline-block; + vertical-align: top; } + .flyout { + height: 26px - 2*4px; // minus padding + font-size: $font-base-size+2; + font-weight: bold; + @include border-top-left-radius(3px); + @include border-bottom-left-radius(3px); + background-color: #667980; // hardcoding colour since its tied to the sprite + padding: 4px 3px 4px 6px; + text-align: center; + text-shadow: none; + color: #fff; + } + + .arrow { + height: 26px; + width: 10px; + background: sprite($sprites32, numeric-label) no-repeat; + margin-right: 4px; + } + + .title { + height: 26px - 2*4px; // minus padding + padding: 4px; + } + } \ No newline at end of file