r1088 - in trunk: tests/static themes/base
Author: scottjehl
Date: Wed Dec 10 16:03:51 2008
New Revision: 1088
Added:
trunk/tests/static/overlay.html (contents, props changed)
Modified:
trunk/themes/base/ui.core.css
trunk/themes/base/ui.theme.css
Log:
- added overlay.html static demo to demonstrate the positionTo iframefix +
shadow markup. It's actually not static, but a js demo with our markup
recommendations, since we found it easier to communicate our recommendation
that way.
- edited ui-widget-overlay and ui-widget-shadow in theme.css
- added ui-helper-zfix to core.css for iframe fix needs
Comment tokens and TR levers for the overlay classes will be added tomorrow.
Added: trunk/tests/static/overlay.html
==============================================================================
--- (empty file)
+++ trunk/tests/static/overlay.html Wed Dec 10 16:03:51 2008
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+<head>
+ <title>jQuery UI Dialog Static Markup Test Page</title>
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="static_helpers.js"></script>
+ <script type="text/javascript">
+
+
+ //overlay sample plugin ( to become part of positionTo )
+ $.fn.overlay = function(){
+ var that = this;
+ //overlay widget markup
+ var overlay = $('<div class="ui-overlay">'+
+ '<iframe class="ui-helper-zfix" src="#" frameborder="0"></iframe>'+
+ '<div class="ui-widget-overlay"></div>'+
+ '<div class="ui-widget-shadow ui-corner-all"></div>'+
+ '</div>');
+ //ui-widget-shadow gets set to exact widget dims and offset (TL).
Shadow appearance/thickness is handled in ui.theme.css through margins and
padding
+ overlay.find('.ui-widget-shadow')
+ .width( $(that)[0].offsetWidth )
+ .height( $(that)[0].offsetHeight )
+ .css({
+ position: 'absolute',
+ left: $(that)[0].offsetLeft,
+ top: $(that)[0].offsetTop
+ });
+ $(that).before(overlay);
+ return this;
+ };
+
+ //call overlay
+ $(function(){
+ $('.ui-dialog').overlay();
+ });
+ </script>
+</head>
+<body style="font-size: 62.5%;">
+
+
+
+
+
+<!-- ui-dialog -->
+<div class="ui-dialog ui-widget ui-widget-content ui-corner-all"
style="position: absolute; left: 300px; top: 200px; width: 300px; ">
+ <div class="ui-dialog-titlebar ui-widget-header ui-corner-all
ui-helper-clearfix">
+ <span class="ui-dialog-title">This is my title</span>
+ <a href="#" class="ui-dialog-titlebar-close ui-corner-all"
title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
+ </div>
+ <div class="ui-dialog-content ui-widget-content" style="height: 13em;">
+ I'm in a dialog!
+ </div>
+ <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
+ <button class="ui-state-default ui-priority-primary
ui-corner-all">Primary</button>
+ <button class="ui-state-default ui-priority-secondary
ui-corner-all">Secondary</button>
+ <button class="ui-state-default ui-state-disabled
ui-corner-all">Disabled</button>
+ </div>
+ <div class="ui-resizable-n ui-resizable-handle"></div>
+ <div class="ui-resizable-s ui-resizable-handle"></div>
+ <div class="ui-resizable-e ui-resizable-handle"></div>
+ <div class="ui-resizable-w ui-resizable-handle"></div>
+ <div class="ui-resizable-ne ui-resizable-handle"></div>
+ <div class="ui-resizable-se ui-resizable-handle ui-icon
ui-icon-grip-diagonal-se"></div>
+ <div class="ui-resizable-sw ui-resizable-handle"></div>
+ <div class="ui-resizable-nw ui-resizable-handle"></div>
+</div>
+
+</body>
+</html>
Modified: trunk/themes/base/ui.core.css
==============================================================================
--- trunk/themes/base/ui.core.css (original)
+++ trunk/themes/base/ui.core.css Wed Dec 10 16:03:51 2008
@@ -11,4 +11,5 @@
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0;
line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
}
.ui-helper-clearfix:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; display: block; }
-* html .ui-helper-clearfix { height: 1%; }
\ No newline at end of file
+* html .ui-helper-clearfix { height: 1%; }
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position:
absolute; opacity: 0; filter:Alpha(Opacity=0); }
\ No newline at end of file
Modified: trunk/themes/base/ui.theme.css
==============================================================================
--- trunk/themes/base/ui.theme.css (original)
+++ trunk/themes/base/ui.theme.css Wed Dec 10 16:03:51 2008
@@ -13,7 +13,6 @@
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/
url(images/ffffff_40x100_textures_02_glass_75.png)/*{bgImgUrlContent}*/ 0
0/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color:
#222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
-.ui-widget-overlay { background: #aaaaaa/*{borderColorContent}*/;
opacity: .3; filter:Alpha(Opacity=30); }
/* Interaction states
----------------------------------*/
@@ -221,6 +220,8 @@
/* Misc visuals
----------------------------------*/
+
+/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/;
-webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/;
-webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 4px/*{cornerRadius}*/; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/; }
@@ -229,4 +230,8 @@
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
-webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 4px/*{cornerRadius}*/;}
.ui-corner-right { -moz-border-radius-topright: 4px/*{cornerRadius}*/;
-webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
-webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 4px/*{cornerRadius}*/; }
.ui-corner-left { -moz-border-radius-topleft: 4px/*{cornerRadius}*/;
-webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/; }
-.ui-corner-all { -moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/; border-radius:
4px/*{cornerRadius}*/;}
\ No newline at end of file
+.ui-corner-all { -moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/; border-radius:
4px/*{cornerRadius}*/;}
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%;
height: 100%; background: #aaaaaa/*tbd overlayColor*/;
opacity: .3;filter:Alpha(Opacity=30)/*tbd overlayOpacity*/; }
+.ui-widget-shadow { margin: -4px/*tbd shadowOffset*/ 0 0 -4px/*tbd
shadowOffset*/; padding: 4px/*tbd shadowWidth*/; background: #aaaaaa/*tbd
shadowColor*/; opacity:.1;filter:Alpha(Opacity=15);/*tbd shadowOpacity*/ }
\ No newline at end of file