Changeset 9350

Timestamp:

06/28/07 03:49:50 (17 months ago)

Author:

bill

Message:

Specify icons in buttons via CSS rather than <img> tag.
The CSS for icons is either in tundra.css (for the editor icons),
or in the customer's css file (for custom icons).

Toolbar buttons have an icon and text defined but you can control which shows up
via CSS rules (the text needs to show up if dijit_a11y is set). Haven't created
those rules yet though, so for now both icon and text show up.

Need to doublecheck a11y stuff; I think I might have broken it.

Refs #3455.

When MenuItem? is converted to extend Button it will inherit this method of
setting icons.

Location:

dijit/trunk

Files:

• form/Button.js (modified) (2 diffs)
• form/templates/Button.html (modified) (1 diff)
• form/templates/ComboButton.html (modified) (1 diff)
• form/templates/DropDownButton.html (modified) (1 diff)
• templates/buttons/sep.gif (deleted)
• tests/css/dijitTests.css (modified) (1 diff)
• tests/form/test_Button.html (modified) (4 diffs)
• tests/test_Toolbar.html (modified) (3 diffs)
• themes/tundra/images/editor.gif (moved) (moved from dijit/trunk/templates/buttons/aggregate.gif)
• themes/tundra/tundra.css (modified) (5 diffs)

dijit/trunk/form/Button.js

@@ -22 +22 @@
                 label: "",
 
+                // iconClass: String
+                //      class to apply to div in button to make it display an icon
+                iconClass: "",
+
                 type: "button",
                 baseClass: "dijitButton",
                 templatePath: dojo.moduleUrl("dijit.form", "templates/Button.html"),
+
+                // TODO: set button's title to this.containerNode.innerText
 
                 onClick: function(/*Event*/ e){
@@ -39 +45 @@
                                 setTimeout(function(){_this.domNode.style.display=oldDisplay;},1);
                         }
+                        // TODO: set button's title to this.containerNode.innerText
                 }               
         }

dijit/trunk/form/templates/Button.html

@@ -4 +4 @@
         ><button class="dijitStretch dijitButtonNode dijitButtonContents"
                 tabIndex="${tabIndex}" type="${type}" id="${id}" name="${name}" alt="${alt}"
-                dojoAttachPoint="containerNode;focusNode">${label}</button
+                ><div class="dijitInline ${iconClass}"></div
+                ><span class="dijitButtonContents" dojoAttachPoint="containerNode;focusNode">${label}</span
+        ></button
 ></div></div>

dijit/trunk/form/templates/ComboButton.html

@@ -6 +6 @@
         <tr>
                 <td     class="dijitStretch dijitButtonContents dijitButtonNode"
-                        tabIndex="${tabIndex}" dojoAttachPoint="containerNode;focusNode"
+                        tabIndex="${tabIndex}"
                         dojoAttachEvent="onklick:_onButtonClick"
                         waiRole="button">
-                        ${label}
+                        <div class="dijitInline ${iconClass}"></div>
+                        <span class="dijitButtonContents" dojoAttachPoint="containerNode;focusNode" id="${id}_label">${label}</span>
                 </td>
                 <td class='dijitReset dijitRight dijitButtonNode dijitDownArrowButton'

dijit/trunk/form/templates/DropDownButton.html

@@ -3 +3 @@
         ><div class='dijitRight'>
         <button tabIndex="${tabIndex}" class="dijitStretch dijitButtonNode" type="${type}" id="${id}" name="${name}" alt="${alt}"
-        dojoAttachPoint="popupStateNode;focusNode" waiRole="button" waiState="haspopup-true;labelledby-${id}_label"
-                ><span class="dijitButtonContents" dojoAttachPoint="containerNode" id="${id}_label">${label}</span
+                ><div class="dijitInline ${iconClass}"></div
+                ><span class="dijitButtonContents"      dojoAttachPoint="containerNode;popupStateNode;focusNode"
+                 waiRole="button" waiState="haspopup-true;labelledby-${id}_label" id="${id}_label">${label}</span
                 ><span class='dijitA11yDownArrow'>&#9660;</span>
         </button>

dijit/trunk/tests/css/dijitTests.css

@@ -10 +10 @@
         margin:0 0 1em 0;
 }
+
+/* Icons used in the tests */
+
+.plusIcon, .plusBlockIcon {
+        background-image: url(../images/plus.gif);
+        width: 16px;
+        height: 16px;
+}
+.plusBlockIcon {
+        display: block;
+}
+.noteIcon {
+        background-image: url(../images/note.gif);
+        width: 20px;
+        height: 20px;
+}
+.flatScreenIcon {
+        background-image: url(../images/flatScreen.gif);
+        width: 32px;
+        height: 32px;
+}

dijit/trunk/tests/form/test_Button.html

@@ -43 +43 @@
                                 color: ThreeDHighlight;
                         }
-
                 </style>
         </head>
@@ -59 +58 @@
                 </p>
                 <div class="box">
-                        <button id="1465" dojoType="dijit.form.Button" onClick='logMessage("clicked simple")'>
-                                <img src="../images/plus.gif" width="16" height="16"> Create
+                        <button id="1465" dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' iconClass="plusIcon">
+                                Create
                         </button>
                         <span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>
-                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")'>
-                                <img src="../images/plus.gif" width="16" height="16"><br>Create
-                        </button>
-                        <button dojoType="dijit.form.DropDownButton" dropDownId='editMenu'>
-                                <img src="../images/note.gif" width="20" height="20"> Edit
-                        </button>
-                        <button dojoType="dijit.form.DropDownButton" dropDownId='editMenu'>
-                                <img src="../images/note.gif" width="20" height="20"><br>Edit
-                        </button>
-                        <button dojoType="dijit.form.DropDownButton" dropDownId='colorPalette'>
-                                <img src="../images/note.gif" width="20" height="20"> Color
-                        </button>
-                        <button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onClick='logMessage("clicked combo save")'>
-                                <img src="../images/note.gif" width="20" height="20"> Save
-                        </button>
-                        <button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onclick='logMessage("clicked combo save")'>
-                                <img src="../images/note.gif" width="20" height="20"><br>Save
-                        </button>
-                        <button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' disabled='true'>
-                                <img src="../images/plus.gif" width="16" height="16"> Disabled
-                        </button>
-                        <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button selected='+arguments[0]);">
-                                <img src="../images/plus.gif" width="16" height="16"> Toggle me
+                        <button dojoType="dijit.form.DropDownButton" dropDownId='editMenu' iconClass="noteIcon">
+                                Edit
+                        </button>
+                        <button dojoType="dijit.form.DropDownButton" dropDownId='colorPalette' iconClass="noteIcon">
+                                Color
+                        </button>
+                        <button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onClick='logMessage("clicked combo save")'
+                                        iconClass="plusBlockIcon">
+                                Save
+                        </button>
+                        <button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' disabled='true' iconClass="plusIcon">
+                                Disabled
+                        </button>
+                </div>
+                <br clear=both>
+                <h2>Toggle buttons</h2>
+                <p>The button CSS as well as the icon CSS can change on toggle </p>
+                <div class="box">
+                        <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button selected='+arguments[0]);" iconClass="dijitCheckboxIcon">
+                                Toggle me
+                        </button>
+                        <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button selected='+arguments[0]);" iconClass="dijitRadioIcon">
+                                Toggle me
                         </button>
                 </div>
@@ -94 +93 @@
                 These buttons size to their content (just like &lt;button&gt;).</p>
                 <div class="box">
-                        <button dojoType="dijit.form.Button" onclick='logMessage("big");'>
-                                <img src="../images/flatScreen.gif" width="32" height="32">
+                        <button dojoType="dijit.form.Button" onclick='logMessage("big");' iconClass="flatScreenIcon">
                                 <span style="font-size:xx-large">big</span>
                         </button>
@@ -166 +164 @@
                 </div>
                 <div class="box" style="display:none;" id="hiddenNode">
-                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")'>
-                                <img src="../images/plus.gif" width="16" height="16"> Create
-                        </button>
-                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")'>
-                                <img src="../images/plus.gif" width="16" height="16"> Create
+                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")' iconClass="plusIcon">
+                                Create
+                        </button>
+                        <button dojoType="dijit.form.Button" onclick='logMessage("clicked simple")' iconClass="plusIcon">
+                                Create
                         </button>
                 </div>

dijit/trunk/tests/test_Toolbar.html

@@ -20 +20 @@
                 function init(){
                         var toolbar = new dijit.Toolbar({}, dojo.byId("toolbar2"));
-                        dojo.forEach(["cut", "copy", "paste"], function(title){
-                                var refNode = document.createElement("span");
-                                refNode.innerHTML = "<img src=\"../templates/buttons/"+title+".gif\"></img>";
-                                var button = new dijit.form.Button({id: "toolbar2."+title, title: title}, refNode);
+                        dojo.forEach(["Cut", "Copy", "Paste"], function(label){
+                                var button = new dijit.form.Button({id: "toolbar2."+label, label: label, iconClass: "dijitEditorIcon"+label});
                                 toolbar.addChild(button);
                         });
@@ -48 +46 @@
         <div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette" style="display: none" palette="3x4" onColorSelect="console.log(this.selectedColor);"></div>
 
-<!-- TODO: enhance buttons to use background images -->
     <div id="toolbar1" dojoType="dijit.Toolbar"
-            ><div dojoType="dijit.form.Button" id="toolbar1.cut" title="Cut"><img src="images/cut.gif"></img></div
-            ><div dojoType="dijit.form.Button" id="toolbar1.copy" title="Copy"><img src="images/copy.gif"></img></div
-            ><div dojoType="dijit.form.Button" id="toolbar1.paste" title="Paste"><img src="images/paste.gif"></img></div
+            ><div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIconCut">Cut</div
+            ><div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIconCopy">Copy</div
+            ><div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIconPaste">Paste</div
 
-            ><span dojoType="dijit.ToolbarSeparator"><img src="../templates/buttons/sep.gif"></img></span
+            ><span dojoType="dijit.ToolbarSeparator"></span
 
-            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" title="Bold"><img src="../templates/buttons/bold.gif"></img></div
-            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" title="Italic"><img src="../templates/buttons/italic.gif"></img></div
-            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.underline" title="Underline"><img src="../templates/buttons/underline.gif"></img></div
-            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.strikethrough" title="Strikethrough"><img src="../templates/buttons/strikethrough.gif"></img></div
+            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIconBold">Bold</div
+            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIconItalic">Italic</div
+            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.underline" iconClass="dijitEditorIconUnderline">Underline</div
+            ><div dojoType="dijit.form.ToggleButton" id="toolbar1.strikethrough" iconClass="dijitEditorIconStrikethrough">Strikethrough</div
 
 ><!--
@@ -65 +62 @@
 
             <span dojo:type="ToolbarButtonGroup" name="justify" defaultButton="justifyleft" preventDeselect="true">
-                <div dojoType="dijit.form.Button">justifyleft.gif" toggleItem="true" name="justifyleft"/>
-                <div dojoType="dijit.form.Button">justifycenter.gif" toggleItem="true" name="justifycenter"/>
-                <div dojoType="dijit.form.Button">justifyright.gif" toggleItem="true" name="justifyright"/>
-                <div dojoType="dijit.form.Button">justifyfull.gif" toggleItem="true" name="justifyfull"/>
-            </span>
+                <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIconJustifyLeft" name="justify">Left</div>
+                <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIconJustifyRight" name="justify">Right</div>
+                <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIconJustifyCenter" name="justify">Center</div>
+             </span>
 
-            --><span dojoType="dijit.ToolbarSeparator"><img src="../templates/buttons/sep.gif"></img></span
+            --><span dojoType="dijit.ToolbarSeparator">&nbsp;</span
 
-            ><div dojoType="dijit.form.Button" id="toolbar1.insertorderedlist" title="Ordered list"><img src="../templates/buttons/insertorderedlist.gif"></img></div
-            ><div dojoType="dijit.form.Button" id="toolbar1.insertunorderedlist" title="Unordered list"><img src="../templates/buttons/insertunorderedlist.gif"></img></div
-            ><div dojoType="dijit.form.Button" id="toolbar1.indent" title="Indent"><img src="../templates/buttons/indent.gif"></img></div
-            ><div dojoType="dijit.form.Button" id="toolbar1.outdent" title="Outdent"><img src="../templates/buttons/outdent.gif"></img></div
+            ><div dojoType="dijit.form.Button" id="toolbar1.insertorderedlist" iconClass="dijitEditorIconInsertOrderedList">Ordered list</div
+            ><div dojoType="dijit.form.Button" id="toolbar1.insertunorderedlist" iconClass="dijitEditorIconInsertUnorderedList">Unordered list</div
+            ><div dojoType="dijit.form.Button" id="toolbar1.indent" iconClass="dijitEditorIconIndent">Indent</div
+            ><div dojoType="dijit.form.Button" id="toolbar1.outdent" iconClass="dijitEditorIconOutdent">Outdent</div
 
-            ><span dojoType="dijit.ToolbarSeparator"><img src="../templates/buttons/sep.gif"></img></span
-                        ><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" dropDownId="toolbar1.colorPalette" title="Change background color"><img src="../templates/buttons/backcolor.gif"></img></div
-            ><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" dropDownId="toolbar1.colorPalette" title="Change foreground color"><img src="../templates/buttons/forecolor.gif"></img></div
+            ><span dojoType="dijit.ToolbarSeparator"></span
+                        ><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" dropDownId="toolbar1.colorPalette" iconClass="dijitEditorIconBackColor">Background</div
+            ><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" dropDownId="toolbar1.colorPalette" iconClass="dijitEditorIconForeColor">Foreground</div
     ></div>
 

dijit/trunk/themes/tundra/tundra.css

@@ -105 +105 @@
         margin: 1px;
         border: 1px solid transparent;
-        background: none;
 }
 .tundra .dijitToolbar .dijitButtonHover .dijitButtonNode,
@@ -115 +114 @@
 .tundra .dijitToolbar .dijitToggleButtonSelected .dijitButtonNode {
         border-color: #366dba;
+}
+.dijitToolbarSeparator {
+        background-image: url(images/editor.gif);
+        height: 18px;
+        width: 18px;
 }
 
@@ -216 +220 @@
 
 /*
- *  Checkbox and Radio
+ *  Checkbox and Radio Widgets,
+ *      and the CSS to embed a checkbox or radio icon inside a ToggleButton.
  *
  *      Order of images in the default sprite (from L to R, checkbox and radio in same image):
@@ -234 +239 @@
 */
 .tundra .dijitCheckbox,
-.tundra .dijitRadio {
+.tundra .dijitRadio,
+.tundra .dijitCheckboxIcon,             /* inside a toggle button */
+.tundra .dijitRadioIcon {               /* inside a toggle button */
         background-image: url('images/checkmark.png'); /* checkbox sprite image */
         width: 16px;
         height: 16px;
 }
-.tundra .dijitCheckbox { background-position: -16px; }
-.tundra .dijitCheckboxSelected { background-position: 0px; }
-.tundra .dijitCheckboxSelectedDisabled { background-position: -32px; }
-.tundra .dijitCheckboxDisabled { background-position: -48px; }
-.tundra .dijitCheckboxSelectedHover { background-position: -64px; }
-.tundra .dijitCheckboxHover { background-position: -80px; }
-
-.tundra .dijitRadio { background-position: -112px; }
-.tundra .dijitRadioSelected { background-position: -96px; }
-.tundra .dijitRadioSelectedDisabled { background-position: -128px; }
-.tundra .dijitRadioDisabled { background-position: -144px; }
-.tundra .dijitRadioSelectedHover { background-position: -160px; }
-.tundra .dijitRadioHover { background-position: -176px; }
+
+.tundra .dijitCheckbox,
+.tundra .dijitToggleButton .dijitCheckboxIcon {
+        /* unchecked */
+        background-position: -16px;
+}
+ 
+.tundra .dijitCheckboxSelected,
+.tundra .dijitToggleButtonSelected .dijitCheckboxIcon {
+        /* checked */
+        background-position: 0px;
+}
+
+.tundra .dijitCheckboxSelectedDisabled,
+.tundra .dijitToggleButtonSelectedDisabled .dijitCheckboxIcon {
+        /* disabled but selected */
+        background-position: -32px;
+}
+
+.tundra .dijitCheckboxDisabled,
+.tundra .dijitToggleButtonDisabled .dijitCheckboxIcon {
+        /* disabled */
+        background-position: -48px;
+}
+
+.tundra .dijitCheckboxSelectedHover,
+.tundra .dijitToggleButtonSelectedHover .dijitCheckboxIcon,
+.tundra .dijitToggleButtonSelectedActive .dijitCheckboxIcon {
+        /* selected and being hovered over, or being pressed to uncheck */
+        background-position: -64px;
+}
+
+.tundra .dijitCheckboxHover,
+.tundra .dijitToggleButtonHover .dijitCheckboxIcon,
+.tundra .dijitToggleButtonActive .dijitCheckboxIcon {
+        /* unselected, but being hovered over or being pressed */
+        background-position: -80px;
+}
+
+.tundra .dijitRadio,
+.tundra .dijitToggleButton .dijitRadioIcon {
+        /* unselected */
+        background-position: -112px;
+}
+
+.tundra .dijitRadioSelected,
+.tundra .dijitToggleButtonSelected .dijitRadioIcon {
+        /* selected */
+        background-position: -96px;
+}
+
+.tundra .dijitRadioSelectedDisabled,
+.tundra .dijitToggleButtonSelectedDisabled .dijitRadioIcon {
+        /* selected but disabled */
+        background-position: -128px;
+}
+
+.tundra .dijitRadioDisabled,
+.tundra .dijitToggleButtonDisabled .dijitRadioIcon {
+        /* unselected and disabled */
+        background-position: -144px;
+}
+
+.tundra .dijitRadioSelectedHover,
+.tundra .dijitToggleButtonSelectedHover .dijitRadioIcon,
+.tundra .dijitToggleButtonSelectedActive .dijitRadioIcon {
+        /* selected but hovering over it or pressing it */
+        background-position: -160px;
+}
+
+.tundra .dijitRadioHover,
+.tundra .dijitToggleButtonHover .dijitRadioIcon,
+.tundra .dijitToggleButtonActive .dijitRadioIcon {
+        /* hovering over or pressing an unselected radio button */
+        background-position: -176px;
+}
 
 /* Menu */
@@ -985 +1055 @@
 }
 
+/**** ICONS *****/
+
+.tundra .dijitEditorIconSep,
+.tundra .dijitEditorIconBackColor,
+.tundra .dijitEditorIconBold,
+.tundra .dijitEditorIconCancel,
+.tundra .dijitEditorIconCopy,
+.tundra .dijitEditorIconCreateLink,
+.tundra .dijitEditorIconCut,
+.tundra .dijitEditorIconDelete,
+.tundra .dijitEditorIconForeColor,
+.tundra .dijitEditorIconHiliteColor,
+.tundra .dijitEditorIconIndent,
+.tundra .dijitEditorIconInsertHorizontalRule,
+.tundra .dijitEditorIconInsertImage,
+.tundra .dijitEditorIconInsertOrderedList,
+.tundra .dijitEditorIconInsertTable,
+.tundra .dijitEditorIconInsertUnorderedList,
+.tundra .dijitEditorIconItalic,
+.tundra .dijitEditorIconJustifycenter,
+.tundra .dijitEditorIconJustifyfull,
+.tundra .dijitEditorIconJustifyleft,
+.tundra .dijitEditorIconJustifyright,
+.tundra .dijitEditorIconLeftToRight,
+.tundra .dijitEditorIconListBulletIndent,
+.tundra .dijitEditorIconListBulletOutdent,
+.tundra .dijitEditorIconListNumIndent,
+.tundra .dijitEditorIconListNumOutdent,
+.tundra .dijitEditorIconOutdent,
+.tundra .dijitEditorIconPaste,
+.tundra .dijitEditorIconRedo,
+.tundra .dijitEditorIconRemoveFormat,
+.tundra .dijitEditorIconRightToLeft,
+.tundra .dijitEditorIconSave,
+.tundra .dijitEditorIconSpace,
+.tundra .dijitEditorIconStrikethrough,
+.tundra .dijitEditorIconSubscript,
+.tundra .dijitEditorIconSuperscript,
+.tundra .dijitEditorIconUnderline,
+.tundra .dijitEditorIconUndo,
+.tundra .dijitEditorIconWikiword {
+        background-image: url('images/editor.gif'); /* editor icons sprite image */
+        width: 18px;
+        height: 18px;
+        display: block;         /* optional: if unspecified icon will be inline */
+        text-align: center;
+}
+.tundra .dijitEditorIconSep { background-position: 0px; }
+.tundra .dijitEditorIconBackColor { background-position: -18px; }
+.tundra .dijitEditorIconBold { background-position: -36px; }
+.tundra .dijitEditorIconCancel { background-position: -54px; }
+.tundra .dijitEditorIconCopy { background-position: -72px; }
+.tundra .dijitEditorIconCreateLink { background-position: -90px; }
+.tundra .dijitEditorIconCut { background-position: -108px; }
+.tundra .dijitEditorIconDelete { background-position: -126px; }
+.tundra .dijitEditorIconForeColor { background-position: -144px; }
+.tundra .dijitEditorIconHiliteColor { background-position: -162px; }
+.tundra .dijitEditorIconIndent { background-position: -180px; }
+.tundra .dijitEditorIconInsertHorizontalRule { background-position: -198px; }
+.tundra .dijitEditorIconInsertImage { background-position: -216px; }
+.tundra .dijitEditorIconInsertOrderedList { background-position: -234px; }
+.tundra .dijitEditorIconInsertTable { background-position: -252px; }
+.tundra .dijitEditorIconInsertUnorderedList { background-position: -270px; }
+.tundra .dijitEditorIconItalic { background-position: -288px; }
+.tundra .dijitEditorIconJustifycenter { background-position: -306px; }
+.tundra .dijitEditorIconJustifyfull { background-position: -324px; }
+.tundra .dijitEditorIconJustifyleft { background-position: -342px; }
+.tundra .dijitEditorIconJustifyright { background-position: -360px; }
+.tundra .dijitEditorIconLeftToRight { background-position: -378px; }
+.tundra .dijitEditorIconListBulletIndent { background-position: -396px; }
+.tundra .dijitEditorIconListBulletOutdent { background-position: -414px; }
+.tundra .dijitEditorIconListNumIndent { background-position: -432px; }
+.tundra .dijitEditorIconListNumOutdent { background-position: -450px; }
+.tundra .dijitEditorIconOutdent { background-position: -468px; }
+.tundra .dijitEditorIconPaste { background-position: -486px; }
+.tundra .dijitEditorIconRedo { background-position: -504px; }
+.tundra .dijitEditorIconRemoveFormat { background-position: -522px; }
+.tundra .dijitEditorIconRightToLeft { background-position: -540px; }
+.tundra .dijitEditorIconSave { background-position: -558px; }
+.tundra .dijitEditorIconSpace { background-position: -576px; }
+.tundra .dijitEditorIconStrikethrough { background-position: -594px; }
+.tundra .dijitEditorIconSubscript { background-position: -612px; }
+.tundra .dijitEditorIconSuperscript { background-position: -630px; }
+.tundra .dijitEditorIconUnderline { background-position: -648px; }
+.tundra .dijitEditorIconUndo { background-position: -666px; }
+.tundra .dijitEditorIconWikiword { background-position: -684px; }
+