Merge pull request #322 from joefiorini/post-2.2--uiCodeReorg

UI code reorganization

.bowerrc

@@ -1,3 +1,3 @@
 {
-    "directory": "awx/ui/static/lib"
+    "directory": "awx/ui/client/lib"
 }

.gitignore

@@ -18,15 +18,15 @@ awx/main/fixtures
 awx/*.log
 tower/tower_warnings.log
 celerybeat-schedule
-awx/ui/static/docs
-awx/ui/dist
+awx/ui/static
+awx/ui/build_test
 
 # Python & setuptools
 __pycache__
-build
-deb-build
-rpm-build
-tar-build
+/build
+/deb-build
+/rpm-build
+/tar-build
 /dist
 *.egg-info
 *.py[c,o]

MANIFEST.in

@@ -3,7 +3,7 @@ recursive-include awx/static *.ico
 recursive-include awx/templates *.html
 recursive-include awx/api/templates *.md *.html
 recursive-include awx/ui/templates *.html
-recursive-include awx/ui/dist *
+recursive-include awx/ui/static *
 recursive-include awx/playbooks *.yml
 recursive-include awx/lib/site-packages *
 recursive-include config *
@@ -12,6 +12,7 @@ recursive-include config/rpm *
 recursive-exclude awx devonly.py*
 recursive-exclude awx/api/tests *
 recursive-exclude awx/main/tests *
+recursive-exclude awx/ui/client *
 recursive-exclude awx/settings local_settings.py*
 include tools/scripts/request_tower_configuration.sh
 include tools/scripts/ansible-tower-service

Makefile

@@ -4,9 +4,12 @@ OFFICIAL ?= no
 PACKER ?= packer
 GRUNT ?= $(shell [ -t 0 ] && echo "grunt" || echo "grunt --no-color")
 TESTEM ?= ./node_modules/.bin/testem
-BROCCOLI ?= ./node_modules/.bin/broccoli
+BROCCOLI_BIN ?= ./node_modules/.bin/broccoli
+MOCHA_BIN ?= ./node_modules/.bin/mocha
 NODE ?= node
 
+CLIENT_TEST_DIR ?= build_test
+
 # Get the branch information from git
 GIT_DATE := $(shell git log -n 1 --format="%ai")
 DATE := $(shell date -u +%Y%m%d%H%M)
@@ -83,7 +86,7 @@ MOCK_CFG ?=
 	develop refresh adduser syncdb migrate dbchange dbshell runserver celeryd \
 	receiver test test_coverage coverage_html ui_analysis_report test_ui test_jenkins dev_build \
 	release_build release_clean sdist rpmtar mock-rpm mock-srpm rpm-sign \
-	deb deb-src debian reprepro setup_tarball sync_ui \
+	deb deb-src debian reprepro setup_tarball sync_ui node-tests \
 	virtualbox-ovf virtualbox-centos-7 virtualbox-centos-6
 
 # Remove setup build files
@@ -105,9 +108,10 @@ clean-grunt:
 
 # Remove UI build files
 clean-ui:
-	rm -rf awx/ui/static/dist
+	rm -rf DEBUG
+	rm -rf awx/ui/build_test
+	rm -rf awx/ui/static/
 	rm -rf awx/ui/dist
-	rm -rf awx/ui/static/docs
 
 # Remove packer artifacts
 clean-packer:
@@ -291,11 +295,11 @@ ui_analysis_report: reports/ui_code node_modules Gruntfile.js
 
 reports/ui_code: node_modules clean-ui Brocfile.js bower.json Gruntfile.js
 	rm -rf reports/ui_code
-	$(BROCCOLI) build reports/ui_code -- --no-concat --no-tests --no-styles --no-sourcemaps
+	$(BROCCOLI_BIN) build reports/ui_code -- --no-concat --no-debug --no-styles --no-sourcemaps
 
 # Run UI unit tests
 test_ui: node_modules minjs_ci
-	$(TESTEM) ci --file testem.yml -R xunit
+	PATH=./node_modules/.bin:$(PATH) $(TESTEM) ci --file testem.yml -p 7359 -R xunit
 
 # Run API unit tests across multiple Python/Django versions with Tox.
 test_tox:
@@ -305,38 +309,43 @@ test_tox:
 test_jenkins:
 	$(PYTHON) manage.py jenkins -v2 --enable-coverage --project-apps-tests
 
-Gruntfile.js: packaging/grunt/Gruntfile.js
+Gruntfile.js: packaging/node/Gruntfile.js
 	cp $< $@
 
-Brocfile.js: packaging/grunt/Brocfile.js
+Brocfile.js: packaging/node/Brocfile.js
 	cp $< $@
 
-bower.json: packaging/grunt/bower.json
+bower.json: packaging/node/bower.json
 	cp $< $@
 
-package.json: packaging/grunt/package.template
+package.json: packaging/node/package.template
 	sed -e 's#%NAME%#$(NAME)#;s#%VERSION%#$(VERSION)#;s#%GIT_REMOTE_URL%#$(GIT_REMOTE_URL)#;' $< > $@
 
 sync_ui: node_modules Brocfile.js
-	$(NODE) tools/ui/timepiece.js awx/ui/dist -- --debug
+	$(NODE) tools/ui/timepiece.js awx/ui/static $(WATCHER_FLAGS) -- $(UI_FLAGS)
 
 # Update local npm install
 node_modules: package.json
 	npm install
 	touch $@
+	
+awx/ui/%: node_modules clean-ui Brocfile.js bower.json
+	$(BROCCOLI_BIN) build $@ -- $(UI_FLAGS)
 
-devjs: node_modules clean-ui Brocfile.js bower.json Gruntfile.js
-	$(BROCCOLI) build awx/ui/dist
+testjs: UI_FLAGS=--node-tests --no-concat --no-styles $(EXTRA_UI_FLAGS)
+testjs: awx/ui/build_test node-tests
 
-devjs_debug: node_modules clean-ui Brocfile.js bower.json Gruntfile.js
-	$(BROCCOLI) build awx/ui/dist -- --debug
+node-tests:
+	NODE_PATH=awx/ui/build_test $(MOCHA_BIN) --full-trace $(shell find  awx/ui/build_test -name '*-test.js')
+
+devjs: awx/ui/static
 
 # Build minified JS/CSS.
-minjs: node_modules clean-ui Brocfile.js
-	$(BROCCOLI) build awx/ui/dist -- --silent --no-debug --no-tests --compress --no-docs --no-sourcemaps
+minjs: UI_FLAGS=--silent --compress --no-docs --no-debug --no-sourcemaps $(EXTRA_UI_FLAGS)
+minjs: awx/ui/static node_modules clean-ui Brocfile.js
 
-minjs_ci: node_modules clean-ui Brocfile.js
-	$(BROCCOLI) build awx/ui/dist -- --no-debug --compress --no-docs
+minjs_ci: UI_FLAGS=--compress --no-docs --no-debug --browser-tests $(EXTRA_UI_FLAGS)
+minjs_ci: awx/ui/static node_modules clean-ui Brocfile.js
 
 # Check .js files for errors and lint
 jshint: node_modules Gruntfile.js

awx/settings/defaults.py

@@ -62,7 +62,7 @@ USE_L10N = True
 USE_TZ = True
 
 STATICFILES_DIRS = (
-    os.path.join(BASE_DIR, 'ui', 'dist'),
+    os.path.join(BASE_DIR, 'ui', 'static'),
     os.path.join(BASE_DIR, 'static'),
 )
 

awx/ui/client/assets/cowsay-about.html

@@ -17,7 +17,7 @@
             </div>
         </div>
         <div  class="col-xs-12 col-sm-7 text-center">
-            <img id="about-modal-titlelogo" src="static/img/ansible_tower_logo_minimalc.png"><br>
+            <img id="about-modal-titlelogo" src="/static/assets/ansible_tower_logo_minimalc.png"><br>
             <p>Copyright 2015.  All rights reserved.</p>
             <p>Ansible and Ansible Tower are registered trademarks of Ansible, Inc.</p>
             <br>

awx/ui/client/assets/custom-theme/jquery-ui-1.10.3.custom.css

@@ -608,7 +608,7 @@ button.ui-button::-moz-focus-inner {
 	height: 100%;
 }
 .ui-progressbar .ui-progressbar-overlay {
-	background: url("/static/css/custom-theme/images/animated-overlay.gif");
+	background: url("images/animated-overlay.gif");
 	height: 100%;
 	filter: alpha(opacity=25);
 	opacity: 0.25;
@@ -806,7 +806,7 @@ body .ui-tooltip {
 }
 .ui-widget-content {
 	border: 1px solid #a6c9e2;
-	background: #fcfdfd url(/static/css/custom-theme/images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
+	background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
 	color: #36454F;
 	font-weight: normal;
 }
@@ -815,7 +815,7 @@ body .ui-tooltip {
 }
 .ui-widget-header {
 	border: 1px solid #a6c9e2;
-	background: #ffffff url(/static/css/custom-theme/images/ui-bg_flat_50_ffffff_40x100.png) 50% 50% repeat-x;
+	background: #ffffff url(images/ui-bg_flat_50_ffffff_40x100.png) 50% 50% repeat-x;
 	color: #36454F;
 	font-weight: bold;
 }
@@ -829,7 +829,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
 	border: 1px solid #a6c9e2;
-	background: #ffffff url(/static/css/custom-theme/images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;
+	background: #ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;
 	font-weight: bold;
 	color: #0088cc;
 }
@@ -846,7 +846,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
 	border: 1px solid #e3e3e3;
-	background: #e5e3e3 url(/static/css/custom-theme/images/ui-bg_flat_75_e5e3e3_40x100.png) 50% 50% repeat-x;
+	background: #e5e3e3 url(images/ui-bg_flat_75_e5e3e3_40x100.png) 50% 50% repeat-x;
 	font-weight: bold;
 	color: #005580;
 }
@@ -861,7 +861,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
 	border: 1px solid #e3e3e3;
-	background: #f5f5f5 url(/static/css/custom-theme/images/ui-bg_inset-hard_100_f5f5f5_1x100.png) 50% 50% repeat-x;
+	background: #f5f5f5 url(images/ui-bg_inset-hard_100_f5f5f5_1x100.png) 50% 50% repeat-x;
 	font-weight: bold;
 	color: #36454F;
 }
@@ -878,7 +878,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid #fad42e;
-	background: #fbec88 url(/static/css/custom-theme/images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
+	background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
 	color: #363636;
 }
 .ui-state-highlight a,
@@ -890,7 +890,7 @@ body .ui-tooltip {
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #cd0a0a;
-	background: #fef1ec url(/static/css/custom-theme/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
+	background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
 	color: #cd0a0a;
 }
 .ui-state-error a,
@@ -936,27 +936,27 @@ body .ui-tooltip {
 }
 .ui-icon,
 .ui-widget-content .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_469bdd_256x240.png);
+	background-image: url(images/ui-icons_469bdd_256x240.png);
 }
 .ui-widget-header .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_36454F_256x240.png);
+	background-image: url(images/ui-icons_36454F_256x240.png);
 }
 .ui-state-default .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_0088cc_256x240.png);
+	background-image: url(images/ui-icons_0088cc_256x240.png);
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_217bc0_256x240.png);
+	background-image: url(images/ui-icons_217bc0_256x240.png);
 }
 .ui-state-active .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_36454F_256x240.png);
+	background-image: url(images/ui-icons_36454F_256x240.png);
 }
 .ui-state-highlight .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_2e83ff_256x240.png);
+	background-image: url(images/ui-icons_2e83ff_256x240.png);
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-	background-image: url(/static/css/custom-theme/images/ui-icons_cd0a0a_256x240.png);
+	background-image: url(images/ui-icons_cd0a0a_256x240.png);
 }
 
 /* positioning */
@@ -1169,14 +1169,14 @@ body .ui-tooltip {
 
 /* Overlays */
 .ui-widget-overlay {
-	background: #aaaaaa url(/static/css/custom-theme/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
+	background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
 	opacity: .3;
 	filter: Alpha(Opacity=30);
 }
 .ui-widget-shadow {
 	margin: -8px 0 0 -8px;
 	padding: 8px;
-	background: #aaaaaa url(/static/css/custom-theme/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
+	background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
 	opacity: .3;
 	filter: Alpha(Opacity=30);
 	border-radius: 8px;

awx/ui/client/assets/custom-theme/jquery-ui-1.10.3.custom.min.css

@@ -111,7 +111,7 @@ input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;pa
 .ui-menu .ui-menu-icon{position:static;float:right;}
 .ui-progressbar{height:2em;text-align:left;overflow:hidden;}
 .ui-progressbar .ui-progressbar-value{margin:-1px;height:100%;}
-.ui-progressbar .ui-progressbar-overlay{background:url("/static/css/custom-theme/images/animated-overlay.gif");height:100%;filter:alpha(opacity=25);opacity:0.25;}
+.ui-progressbar .ui-progressbar-overlay{background:url("images/animated-overlay.gif");height:100%;filter:alpha(opacity=25);opacity:0.25;}
 .ui-progressbar-indeterminate .ui-progressbar-value{background-image:none;}
 .ui-slider{position:relative;text-align:left;}
 .ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;}
@@ -148,19 +148,19 @@ body .ui-tooltip{border-width:2px;}
 .ui-widget{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;}
 .ui-widget .ui-widget{font-size:1em;}
 .ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{}
-.ui-widget-content{border:1px solid #a6c9e2;background:#fcfdfd url(/static/css/custom-theme/images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;color:#36454F;font-weight:normal;}
+.ui-widget-content{border:1px solid #a6c9e2;background:#fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;color:#36454F;font-weight:normal;}
 .ui-widget-content a{color:#0088cc;}
-.ui-widget-header{border:1px solid #a6c9e2;background:#ffffff url(/static/css/custom-theme/images/ui-bg_flat_50_ffffff_40x100.png) 50% 50% repeat-x;color:#36454F;font-weight:bold;}
+.ui-widget-header{border:1px solid #a6c9e2;background:#ffffff url(images/ui-bg_flat_50_ffffff_40x100.png) 50% 50% repeat-x;color:#36454F;font-weight:bold;}
 .ui-widget-header a{color:#36454F;}
-.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #a6c9e2;background:#ffffff url(/static/css/custom-theme/images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;font-weight:bold;color:#0088cc;}
+.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #a6c9e2;background:#ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;font-weight:bold;color:#0088cc;}
 .ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#0088cc;text-decoration:none;}
-.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #e3e3e3;background:#e5e3e3 url(/static/css/custom-theme/images/ui-bg_flat_75_e5e3e3_40x100.png) 50% 50% repeat-x;font-weight:bold;color:#005580;}
+.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #e3e3e3;background:#e5e3e3 url(images/ui-bg_flat_75_e5e3e3_40x100.png) 50% 50% repeat-x;font-weight:bold;color:#005580;}
 .ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited{color:#005580;text-decoration:none;}
-.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #e3e3e3;background:#f5f5f5 url(/static/css/custom-theme/images/ui-bg_inset-hard_100_f5f5f5_1x100.png) 50% 50% repeat-x;font-weight:bold;color:#36454F;}
+.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #e3e3e3;background:#f5f5f5 url(images/ui-bg_inset-hard_100_f5f5f5_1x100.png) 50% 50% repeat-x;font-weight:bold;color:#36454F;}
 .ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#36454F;text-decoration:none;}
-.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fad42e;background:#fbec88 url(/static/css/custom-theme/images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;color:#363636;}
+.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fad42e;background:#fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;color:#363636;}
 .ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636;}
-.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url(/static/css/custom-theme/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;color:#cd0a0a;}
+.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;color:#cd0a0a;}
 .ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a;}
 .ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a;}
 .ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:normal;}
@@ -168,13 +168,13 @@ body .ui-tooltip{border-width:2px;}
 .ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:alpha(opacity=35);background-image:none;}
 .ui-state-disabled .ui-icon{filter:alpha(opacity=35);}
 .ui-icon{width:16px;height:16px;}
-.ui-icon,.ui-widget-content .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_469bdd_256x240.png);}
-.ui-widget-header .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_36454F_256x240.png);}
-.ui-state-default .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_0088cc_256x240.png);}
-.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_217bc0_256x240.png);}
-.ui-state-active .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_36454F_256x240.png);}
-.ui-state-highlight .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_2e83ff_256x240.png);}
-.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(/static/css/custom-theme/images/ui-icons_cd0a0a_256x240.png);}
+.ui-icon,.ui-widget-content .ui-icon{background-image:url(images/ui-icons_469bdd_256x240.png);}
+.ui-widget-header .ui-icon{background-image:url(images/ui-icons_36454F_256x240.png);}
+.ui-state-default .ui-icon{background-image:url(images/ui-icons_0088cc_256x240.png);}
+.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(images/ui-icons_217bc0_256x240.png);}
+.ui-state-active .ui-icon{background-image:url(images/ui-icons_36454F_256x240.png);}
+.ui-state-highlight .ui-icon{background-image:url(images/ui-icons_2e83ff_256x240.png);}
+.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(images/ui-icons_cd0a0a_256x240.png);}
 .ui-icon-blank{background-position:16px 16px;}
 .ui-icon-carat-1-n{background-position:0 0;}
 .ui-icon-carat-1-ne{background-position:-16px 0;}
@@ -354,5 +354,5 @@ body .ui-tooltip{border-width:2px;}
 .ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:5px;}
 .ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:5px;}
 .ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:5px;}
-.ui-widget-overlay{background:#aaaaaa url(/static/css/custom-theme/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;filter:alpha(opacity=30);}
-.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaaaaa url(/static/css/custom-theme/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;filter:alpha(opacity=30);border-radius:8px;}
+.ui-widget-overlay{background:#aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;filter:alpha(opacity=30);}
+.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;filter:alpha(opacity=30);border-radius:8px;}