Commit 4fcfbc95 authored Nov 15, 2011 by Rene Saarsoo

Fix toolbar and button backrounds for Opera.

Instead of generating the background images with `secha slice`
just disabled them and defaulting to background color.

Looks much better now.

It should also work for IE, but haven't tested.

parent a252127e

template/app/view/examples/Inline.js

+0 −1

Original line number	Diff line number	Diff line
		@@ -24,7 +24,6 @@ Ext.define('Docs.view.examples.Inline', {
		xtype: 'toolbar',
		dock: 'top',
		height: 30,
		style: 'background: none;',
		items: [
		{
		iconCls: 'code',

template/resources/sass/_examples.scss

+5 −0

Original line number	Diff line number	Diff line
		@@ -5,6 +5,11 @@
		margin-bottom: 10px;
		// add padding to make right scrollbar visible
		padding-right: 25px;
		// Hide toolbar background completely.
		// !important is needed to hide the background image
		// that is created for browsers like IE and Opera.
		.x-toolbar {
		background: none !important; }
		// Inline example component buttons
		span.x-btn-inner {
		line-height: 12px;

template/resources/sass/docs-ext.scss

+14 −0

Original line number	Diff line number	Diff line
		@@ -21,3 +21,17 @@ $grid-row-cell-selected-background-color: #D9E8FB;
		// The value can either be true, in which case the image path will be "../images/"
		// or a string, of where the path is
		$relative-image-path-for-uis: true; // defaults to "../images/" when true

		// For browsers not supporting gradients: Opera, IE.
		// Hide the toolbar/button background images of the default blue theme.
		// In theory we should generate the images using `sencha slice`,
		// but because we only need them for toolbar/button, it is simpler
		// to just downgrade the presentation for these browsers.
		.x-nlg {
		.x-toolbar-default {
		background-image: none !important; }

		.x-btn-default-toolbar-small-focus,
		.x-btn-default-toolbar-small-over,
		.x-btn-default-toolbar-small-pressed {
		background-image: none; } }