Skip to content
Browse files

Improved style for toolbar

Active elements are no longer yellow, instead a discreete border is
appended. Additionally there are more space between menu elements.

To achieve proper spacing, it was necessary to slightly change the toolbar
HTML structure. It is now wrapped in a div element. This does not seem to cause
any side-effects.
  • Loading branch information...
1 parent 6be1012 commit db0c2fc1b4014c322ec8cecee7bdf0950c989727 @stianlik stianlik committed Jan 17, 2013
Showing with 9 additions and 11 deletions.
  1. +5 −5 jquery.wysiwyg.css
  2. +4 −6 jquery.wysiwyg.js
View
10 jquery.wysiwyg.css
@@ -3,11 +3,11 @@ div.wysiwyg * { margin: 0; padding: 0; }
div.wysiwyg ul.toolbar li.jwysiwyg-custom-command { overflow: hidden; }
-div.wysiwyg ul.toolbar { list-style: none; border-bottom: 1px solid #ccc; float: left; width: 100%; padding: 0; }
-div.wysiwyg ul.toolbar li { display: block; float: left; width: 18px; height: 18px; padding: 0; border: 1px solid transparent; margin: 0px; text-indent: -5000px; background: url('jquery.wysiwyg.gif') no-repeat -640px -800px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
-div.wysiwyg ul.toolbar li.separator { background: none; width: 1px; height: 20px; margin: 0 4px 0px 5px; border: none; border-left: 1px solid #ccc; }
-div.wysiwyg ul.toolbar li.wysiwyg-button-hover, div.wysiwyg ul.toolbar li.active { background-color: #DDD; border: 1px solid transparent; }
-div.wysiwyg ul.toolbar li.active { background-color: rgb(255, 255, 64); border: 1px solid rgb(208, 208, 208); border-left-color: #aaa; border-top-color: #aaa; height: 18px; width: 18px; padding: -1px 0 0 -1px; margin: 0; }
+div.wysiwyg div.toolbar-wrap { width: 100%; border-bottom: 1px solid #ccc; }
+div.wysiwyg ul.toolbar { list-style: none; float: left; padding: 0 3px 0 3px; margin: 0; }
+div.wysiwyg ul.toolbar li { display: block; float: left; width: 18px; height: 18px; padding: 0; border: 1px solid transparent; margin: 3px 0 3px 0; text-indent: -5000px; background: url('jquery.wysiwyg.gif') no-repeat -640px -800px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
+div.wysiwyg ul.toolbar li.separator { background: none; width: 1px; height: 20px; margin: 3px 4px 3px 5px; border: none; border-left: 1px solid #ccc; }
+div.wysiwyg ul.toolbar li.wysiwyg-button-hover,div.wysiwyg ul.toolbar li.active { background-color: transparent; width: 18px; height: 18px; border: 1px solid rgb(208, 208, 208); border-left-color: #aaa; border-top-color: #aaa; }
div.wysiwyg ul.toolbar li.disabled { background-color: transparent; opacity: 0.5; filter:alpha(opacity=50); cursor: auto; }
div.wysiwyg ul.toolbar li.bold { background-position: -1px -15px; }
View
10 jquery.wysiwyg.js
@@ -1357,14 +1357,12 @@ html: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o
var self = this.self,
stylesheet,
growHandler,
- saveHandler;
+ saveHandler,
+ toolbarWrapEl;
+ toolbarWrapEl = $('<div class="toolbar-wrap"><div style="clear: both"><!-- --></div>').prepend(self.ui.toolbar);
self.ui.appendControls();
- self.element.append(self.ui.toolbar)
- .append($("<div><!-- --></div>")
- .css({
- clear: "both"
- }))
+ self.element.append(toolbarWrapEl)
.append(self.editor)
.append(self.original);

0 comments on commit db0c2fc

Please sign in to comment.
Something went wrong with that request. Please try again.