Wave UI stylesheet demo

This is a test page showing off my wave CSS. It is entirely written in CSS3--no unnecessary extra images like the wave client used to have. Feel free to look at the source code of this page. The main class used for a box like this is the “wave-panel” class. That is not limited to <div>s In that you can optionally put a <div> with the “wave-titlebar” class to get a Google Wave-style title bar. Then one or more “wave-section”s. You can also use the “wave-section-blue” class to create a section like the ones at the bottom of the contacts, search, and wave panels in the Google Wave client (and like the one at the bottom of the next panel).

Buttons

Making wave-like buttons is much easier than with the gadget API's wave.ui. Any <button> element will automatically be styled like a wave button. Here are some for you to try:

If you inspect them you will see that they require no additional code to create.

Now on to dialogs. Click this button to continue:

wave-panels in tables This demonstrates the same “wave-panel” class used in a <td> instead of a <div>.	Cell 2 You can use the same “wave-titlebar” and “wave-section” classes.
Cell 3 As you can see, my styles work well on elements other than <div>s.
Toolbars and search boxes You can easily insert a Wave-like search box like this: Just add an <input> of type "text" with the “wave-searchbox” class. A toolbar can be used like a section (a <div> or other element inside a wave-panel), but with the class “wave-toolbar”. You can also insert one in a section by adding a width in the style attribute. You may also want to add a border-radius to make it look nice :) <button>s in wave-toolbars will automatically be styled as toolbar buttons, but be sure not to leave spaces between them. Here is an example You can also add smaller toolbars using the “wave-small-toolbar” class. They resemble the original Wave reply/edit buttons. These ones display inline by default. They can also automatically fade out when you are not hovering (I may remove this--let me know if you do not like it). I recommend setting them to float:right, but you do not have to.

Dialog Demo

Dialogs work like panels. You have the titlebar (optional) and sections. The difference (besides the visual ones) is that they are set to be absolutely positioned and sized. They are also set to be hidden by default.

You can see that the ability to use tables allows you to align panels nicely, like in Google's client.