Make buttons into buttons.

This commit is contained in:
Chad Weider 2012-02-29 15:55:42 -08:00
parent 0369860b80
commit 17b9fa4f36
5 changed files with 65 additions and 50 deletions

View file

@ -52,12 +52,12 @@ a img
margin-left: 2px; margin-left: 2px;
} }
#editbar ul li a:hover { #editbar ul li button:hover {
background: #fff; background: #fff;
background: linear-gradient(#f4f4f4, #e4e4e4); background: linear-gradient(#f4f4f4, #e4e4e4);
} }
#editbar ul li a:active { #editbar ul li button:active {
background: #eee; background: #eee;
background: linear-gradient(#ddd, #fff); background: linear-gradient(#ddd, #fff);
box-shadow: 0 0 8px rgba(0,0,0,.1) inset; box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
@ -71,7 +71,7 @@ a img
width: 0px; width: 0px;
padding: 5px; padding: 5px;
} }
#editbar ul li a #editbar ul li button
{ {
background-color: #fff; background-color: #fff;
background-color: linear-gradient(#fff, #f0f0f0); background-color: linear-gradient(#fff, #f0f0f0);
@ -80,17 +80,13 @@ a img
color: #ccc; color: #ccc;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
min-height: 18px;
overflow: hidden; overflow: hidden;
padding: 4px 5px; padding: 5px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
min-width: 18px;
} }
#editbar ul li a .buttonicon #editbar ul li button .buttonicon {
{ margin: 0;
position: relative;
top: 1px;
} }
#editbar ul #editbar ul
@ -1155,8 +1151,8 @@ input[type=checkbox] {
#editbar ul li.separator { #editbar ul li.separator {
padding: 1px; padding: 1px;
} }
#editbar ul li a { #editbar ul li button {
padding: 4px 1px; padding: 5px 1px;
} }
} }
@ -1164,8 +1160,8 @@ input[type=checkbox] {
#editbar ul li.separator { #editbar ul li.separator {
padding: 3px; padding: 3px;
} }
#editbar ul li a { #editbar ul li button {
padding: 4px 3px; padding: 5px 3px;
} }
#users { #users {
right: 0; right: 0;

View file

@ -70,6 +70,25 @@
.topbarcenter, #docbar {display:none;} .topbarcenter, #docbar {display:none;}
#padmain {top:30px;} #padmain {top:30px;}
#editbarright {float:right;} #editbarright {float:right;}
#editbar ul > li > button
{
background-color: #fff;
background-color: linear-gradient(#fff, #f0f0f0);
border: 1px solid #ccc;
border-radius: 4px;
color: #ccc;
min-height: 29px;
cursor: pointer;
padding: 3px;
text-decoration: none;
min-width: 29px;
}
#editbar ul > li > button .buttonicon {
position: relative;
top: -1px;
margin: 0;
vertical-align: middle;
}
#returnbutton {color:#222; font-size:16px; line-height:29px; margin-top:0; padding-right:6px;} #returnbutton {color:#222; font-size:16px; line-height:29px; margin-top:0; padding-right:6px;}
#importexport {top:118px;} #importexport {top:118px;}
#importexport .popup {width:185px;} #importexport .popup {width:185px;}

View file

@ -724,11 +724,11 @@ var paduserlist = (function()
$("#myswatch").css({'background-color': myUserInfo.colorId}); $("#myswatch").css({'background-color': myUserInfo.colorId});
if ($.browser.msie && parseInt($.browser.version) <= 8) { if ($.browser.msie && parseInt($.browser.version) <= 8) {
$("#usericon a").css({'box-shadow': 'inset 0 0 30px ' + myUserInfo.colorId,'background-color': myUserInfo.colorId}); $("#usericon button").css({'box-shadow': 'inset 0 0 30px ' + myUserInfo.colorId,'background-color': myUserInfo.colorId});
} }
else else
{ {
$("#usericon a").css({'box-shadow': 'inset 0 0 30px ' + myUserInfo.colorId}); $("#usericon button").css({'box-shadow': 'inset 0 0 30px ' + myUserInfo.colorId});
} }
} }
}; };

View file

@ -16,91 +16,91 @@
<div id="editbar"> <div id="editbar">
<ul id="menu_left"> <ul id="menu_left">
<li id="bold" data-key="bold"> <li id="bold" data-key="bold">
<a title="Bold (ctrl-B)"> <button title="Bold (ctrl-B)">
<span class="buttonicon buttonicon-bold"></span> <span class="buttonicon buttonicon-bold"></span>
</a> </button>
</li> </li>
<li id="italic" data-key="italic"> <li id="italic" data-key="italic">
<a title="Italics (ctrl-I)"> <button title="Italics (ctrl-I)">
<span class="buttonicon buttonicon-italic"></span> <span class="buttonicon buttonicon-italic"></span>
</a> </button>
</li> </li>
<li id="underline" data-key="underline"> <li id="underline" data-key="underline">
<a title="Underline (ctrl-U)"> <button title="Underline (ctrl-U)">
<span class="buttonicon buttonicon-underline"></span> <span class="buttonicon buttonicon-underline"></span>
</a> </button>
</li> </li>
<li id="strikethrough" data-key="strikethrough"> <li id="strikethrough" data-key="strikethrough">
<a title="Strikethrough"> <button title="Strikethrough">
<span class="buttonicon buttonicon-strikethrough"></span> <span class="buttonicon buttonicon-strikethrough"></span>
</a> </button>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li id="oderedlist" data-key="insertorderedlist"> <li id="oderedlist" data-key="insertorderedlist">
<a title="Toggle Ordered List"> <button title="Toggle Ordered List">
<span class="buttonicon buttonicon-insertorderedlist"></span> <span class="buttonicon buttonicon-insertorderedlist"></span>
</a> </button>
</li> </li>
<li id="unoderedlist" data-key="insertunorderedlist"> <li id="unoderedlist" data-key="insertunorderedlist">
<a title="Toggle Bullet List"> <button title="Toggle Bullet List">
<span class="buttonicon buttonicon-insertunorderedlist"></span> <span class="buttonicon buttonicon-insertunorderedlist"></span>
</a> </button>
</li> </li>
<li id="indent" data-key="indent"> <li id="indent" data-key="indent">
<a title="Indent"> <button title="Indent">
<span class="buttonicon buttonicon-indent"></span> <span class="buttonicon buttonicon-indent"></span>
</a> </button>
</li> </li>
<li id="outdent" data-key="outdent"> <li id="outdent" data-key="outdent">
<a title="Unindent"> <button title="Unindent">
<span class="buttonicon buttonicon-outdent"></span> <span class="buttonicon buttonicon-outdent"></span>
</a> </button>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li id="undo" data-key="undo"> <li id="undo" data-key="undo">
<a title="Undo (ctrl-Z)"> <button title="Undo (ctrl-Z)">
<span class="buttonicon buttonicon-undo"></span> <span class="buttonicon buttonicon-undo"></span>
</a> </button>
</li> </li>
<li id="redo" data-key="redo"> <li id="redo" data-key="redo">
<a title="Redo (ctrl-Y)"> <button title="Redo (ctrl-Y)">
<span class="buttonicon buttonicon-redo"></span> <span class="buttonicon buttonicon-redo"></span>
</a> </button>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li id="clearAuthorship" data-key="clearauthorship"> <li id="clearAuthorship" data-key="clearauthorship">
<a title="Clear Authorship Colors"> <button title="Clear Authorship Colors">
<span class="buttonicon buttonicon-clearauthorship"></span> <span class="buttonicon buttonicon-clearauthorship"></span>
</a> </button>
</li> </li>
</ul> </ul>
<ul id="menu_right"> <ul id="menu_right">
<li id="settingslink" data-key="settings"> <li id="settingslink" data-key="settings">
<a id="settingslink" title="Settings of this pad"> <button id="settingslink" title="Settings of this pad">
<span class="buttonicon buttonicon-settings"></span> <span class="buttonicon buttonicon-settings"></span>
</a> </button>
</li> </li>
<li id="importexportlink" data-key="import_export"> <li id="importexportlink" data-key="import_export">
<a title="Import/Export from/to different document formats"> <button title="Import/Export from/to different document formats">
<span class="buttonicon buttonicon-import_export"></span> <span class="buttonicon buttonicon-import_export"></span>
</a> </button>
</li> </li>
<li id="embedlink" data-key="embed"> <li id="embedlink" data-key="embed">
<a id="embedlink" title="Share and Embed this pad"> <button id="embedlink" title="Share and Embed this pad">
<span class="buttonicon buttonicon-embed"></span> <span class="buttonicon buttonicon-embed"></span>
</a> </button>
</li> </li>
<li class="separator"></li> <li class="separator"></li>
<li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'"> <li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'">
<a title="Show the history of this pad"> <button title="Show the history of this pad">
<span class="buttonicon buttonicon-history"></span> <span class="buttonicon buttonicon-history"></span>
</a> </button>
</li> </li>
<li id="usericon" data-key="showusers"> <li id="usericon" data-key="showusers">
<a title="Show connected users"> <button title="Show connected users">
<span class="buttonicon buttonicon-showusers" id="usericonback"></span> <span class="buttonicon buttonicon-showusers" id="usericonback"></span>
<span id="online_count">1</span> <span id="online_count">1</span>
</a> </button>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -129,9 +129,9 @@
<!-- termporary place holder--> <!-- termporary place holder-->
<ul> <ul>
<li onClick="window.padeditbar.toolbarClick('import_export');return false;"> <li onClick="window.padeditbar.toolbarClick('import_export');return false;">
<a id="exportlink" title="Export to different document formats"> <button id="exportlink" title="Export to different document formats">
<div class="buttonicon buttonicon-import_export"></div> <div class="buttonicon buttonicon-import_export"></div>
</a> </button>
</li> </li>
</ul> </ul>
<a id = "returnbutton">Return to pad</a> <a id = "returnbutton">Return to pad</a>