Google Git
Sign in
eclipse / rap / org.eclipse.rap.tools / 6e554c127af289fba83b64102e02e0dbce55f4e4 / . / bundles / org.eclipse.rap.doc / guide / reference / theming / Properties.html
blob: c5dc9e7d8d0071622762a518bf34ecb5f049f586 [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="copyright" content="Copyright (c) 2007, 2021 EclipseSource. This page is made available under license. For full details see the LEGAL in the documentation book that contains this page."/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS Property Reference</title>
<style type="text/css">
h2 {
margin: 20px 0 5px;
padding: 5px 10px;
background-color: #ccccff;
border: 1px solid black;
}
h3 {
margin: 15px 0 5px;
padding: 5px 10px;
background-color: #eeeeff;
border: 1px solid black;
}
ul {
list-style-type: none;
padding: 0;
margin: 8px 0 8px 18px;
}
li {
margin: -1px 0 0;
padding: 2px 5px;
border: 1px solid black;
}
h2 + p {
margin: 10px 0 5px 12px;
}
h3 + p {
margin: 8px 0 3px 24px;
}
.css-name {
font-weight: bold;
color: #0000aa;
}
.css-desc {
margin: 1px 0 2px 20px;
}
</style>
</head>
<body>
<h2>CSS Property Reference</h2>
<p>
This is a description of CSS properties recognized by RAP and their admissible values.
</p>
<h3><a name="animation"/>animation</h3>
<p>
Defines one or more animated effects.
</p>
<p>
Any number of animations can be set at once, separated by commas.
To disables all animations, set only <code>none</code>.
</p>
<p>
Format: <code><a href="#format/animation-name">&lt;animation-name&gt;</a>
<a href="#format/animation-duration">&lt;animation-duration&gt;</a>
<a href="#format/animation-timing-function">&lt;animation-timing-function&gt;</a>
(, <a href="#format/animation-name">&lt;animation-name&gt;</a>
<a href="#format/animation-duration">&lt;animation-duration&gt;</a>
<a href="#format/animation-timing-function">&lt;animation-timing-function&gt;</a> )*
| none</code>
</p>
<p>
Examples:
</p>
<ul>
<li><code>animation: none;</code></li>
<li><code>animation: hoverOut 500ms ease-out;</code></li>
<li><code>animation: fadeIn 200ms linear, fadeOut 400ms ease-out;</code></li>
<li><code>animation: flyInTop 500ms ease-out, flyOutBottom 500ms ease-in;</code></li>
</ul>
<h4><a name="format/animation-name"/>&lt;animation-name&gt;</h4>
<p>
References the name of an effect the widget supports. (See the <code>animation</code>-description of the individual widgets.)
Unsupported effects will be ignored. (However the effect might be supported in the future and then not be ignored anymore.)
If the given effects contradict each other (e.g. <code>fadeIn</code> and <code>slideIn</code>), the widget may use either one.
</p>
Currently existing effects:
<ul>
<li><code>hoverIn</code>, <code>hoverOut</code>
<p>
Animates the transition of the background when the mouse is moved over
(<code>hover-in</code>) or leaves (<code>hover-out</code>) the widget.
Requires that the pseudo class <code>hover</code> is used to define the
alternate background.
The effect only works between two background colors or two gradients.
The gradients should have the same number of colors.
Other changes like the border or text-color are currently not animated.
</p>
</li>
<li><code>fadeIn</code>, <code>fadeOut</code>
<p>
Animates the emergence (<code>fadeIn</code>) or disappearance (<code>fadeOut</code>) of a widget by gradually changing its opacity.
</p>
</li>
<li><code>slideIn</code>, <code>slideOut</code>
<p>
Animates the emergence (<code>slideIn</code>) or disappearance (<code>slideOut</code>) of a widget by gradually changing its height.
</p>
</li>
<li><code>flyInTop</code>, <code>flyInRight</code>, <code>flyInBottom</code>, <code>flyInLeft</code>, <code>flyOutTop</code>, <code>flyOutRight</code>, <code>flyOutBottom</code>, <code>flyOutLeft</code>
<p>
Animates the emergence (<code>flyIn</code>) or disappearance (<code>flyOut</code>) of a widget by gradually changing its origin point until it reaches the target coordinates.
</p>
</li>
</ul>
<h4><a name="format/animation-duration"/>&lt;animation-duration&gt;</h4>
<p>
The duration of the effect in seconds or milliseconds.
</p>
<p>
Format: positive integer, immediately followed by <code>s</code> or <code>ms</code>.
</p>
<h4><a name="format/animation-timing-function"/>&lt;animation-timing-function&gt;</h4>
<p>
Describes how the animation progresses over time.
</p>
<p>
Valid values are:
<code>ease</code>,
<code>linear</code>,
<code>ease-in</code>,
<code>ease-out</code> and
<code>ease-in-out</code>.
</p>
<h3><a name="background-color"/>background-color</h3>
<p>
Defines the color used as the background of the element:
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/rgb-color">&lt;rgb-color&gt;</a>
| <a href="#format/rgba-color">&lt;rgba-color&gt;</a>
| transparent</code>
</p>
<p>
Semi-transparent backgrounds may not be supported on all widgets, in which case the alpha channel
of the <code>rgba-color</code> format will
be ignored. If support for <code>rgba-color</code> is present, it is explicitly noted on the element.
</p>
<h3><a name="background-image"/>background-image</h3>
<p>
Defines either an image or a color-gradient to cover the background of a widget.
May also be <code>none</code>, in this case <a name="#background-color">background-color</a> will be used.
</p>
<p>
Format: <code><a href="#format/image-url">&lt;image-url&gt;</a>
| <a href="#format/color-gradient">&lt;color-gradient&gt;</a>
| none</code>
</p>
<p>
Examples:
</p>
<ul>
<li><code>background-image: none;</code></li>
<li><code>background-image: url( path/my-image.png );</code></li>
<li><pre><code>background-image: gradient(
linear, left top, left bottom,
from( #ffffff ),
color-stop( 48%, #f0f0f0 ),
color-stop( 52%, #e0e0e0 ),
to( #ffffff )
);</code></pre></li>
</ul>
<h4><a name="format/image-url"/>&lt;image-url&gt;</h4>
Supported image-formats are <code>jpeg</code>, <code>gif</code> and <code>png</code>.
The path is relative to the root of the bundle.
<p>
Format: <code>url(</code>, followed by the path and filename, followed by <code>)</code>.
</p>
<h4><a name="format/color-gradient"/>&lt;color-gradient&gt;</h4>
<p>
Format: <code>gradient(</code>, followed by a list of comma-separated arguments, followed by <code>)</code>.
</p>
<p>
The first three arguments define the type and direction of the gradient.
RAP currently only supports linear vertical gradients from the top to the bottom and
linear vertical gradients from left to right.
Therefore these arguments have to be either exactly "<code>linear, left top, left bottom</code>"
or exactly "<code>linear, left top, right top</code>".
Any other arguments will produce an error.
</p>
<p>
After this, the colors are defined.
At least two colors have to be given, using <code>from( COLOR )</code> and <code>to( COLOR )</code>.
Between these two, any number of colors may be defined using <code>color-stop( POSITION, COLOR )</code>.
</p>
<p>
<code>POSITION</code> is a ascending percentage value.
<br/>
<code>COLOR</code> is <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/rgb-color">&lt;rgb-color&gt;</a></code>.
</p>
<p>
For the same widget, <code>background-image</code> should not be combined with any
<code>background-color</code> other than <code>transparent</code>,
as the behavior of RAP for this case is not defined and may differ from case to case.
</p>
<h3><a name="border"/>border</h3>
<p>
Used to define the border that is drawn around a widget or a part of a widget.
</p>
<p>
Format: <code><a href="#format/border-width">&lt;border-width&gt;</a>
<a href="#format/border-style">&lt;border-style&gt;</a>
<a href="#format/border-color">&lt;border-color&gt;</a></code>
</p>
<p>
All 3 values are optional, though at least one must be given.
</p>
<p>
Examples:
</p>
<ul>
<li><code>border: none;</code></li>
<li><code>border: 1px solid red;</code></li>
<li><code>border: 3px outset;</code></li>
</ul>
<h4><a name="format/border-width"/>&lt;border-width&gt;</h4>
<p>
The width of the border. Defaults to <code>0px</code>.
</p>
<p>
Format: <code><a href="#format/dimension">&lt;dimension&gt;</a></code>
</p>
<h4><a name="format/border-style"/>&lt;border-style&gt;</h4>
<p>
One of the following values:
<code>solid</code>,
<code>dotted</code>,
<code>dashed</code>,
<code>hidden</code>,
<code>double</code>,
<code>inset</code>,
<code>outset</code>,
<code>groove</code>,
<code>ridge</code>,
<code>none</code>.<br/>
Defaults to <code>solid</code>.
</p>
<p>
Note that if <a href="#border-radius"><code>border-radius</code></a> of the same widget has a
value larger than <code>0px</code>, any <code>border-style</code> other than
<code>none</code> or <code>hidden</code> is interpreted as <code>solid</code>.
</p>
<h4><a name="format/border-color"/>&lt;border-color&gt;</h4>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/rgb-color">&lt;rgb-color&gt;</a>
| transparent</code><br/>
Is <code>black</code> by default.
</p>
<h3><a name="border-top"/>border-top</h3>
<p>
See <a href="#border">border</a>.
</p>
<h3><a name="border-bottom"/>border-bottom</h3>
<p>
See <a href="#border">border</a>.
</p>
<h3><a name="border-left"/>border-left</h3>
<p>
See <a href="#border">border</a>.
</p>
<h3><a name="border-right"/>border-right</h3>
<p>
See <a href="#border">border</a>.
</p>
<h3><a name="border-radius"/>border-radius</h3>
<p>
Defines the four radii of a rounded border.
</p>
<p>
Format: <code><a href="#format/box-dimension">&lt;box-dimension&gt;</a></code>
</p><p>
Note that in this case the box-dimension values stand for
<code>top-left top-right bottom-right bottom-left</code>.
</p>
<h3><a name="border-color"/>border-color</h3>
<p>
Defines only the color of the border.
</p>
<p>
Format: <code><a href="#format/border-color">&lt;border-color&gt;</a></code>
</p>
<h3><a name="background-gradient-color"/>background-gradient-color</h3>
<p>
This property is currently ignored.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a> | <a href="#format/hex-color">&lt;hex-color&gt;</a> | <a href="#format/rgb-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="border-top-color"/>border-top-color</h3>
<p>
Defines only the color of the upper border.
</p>
<p>
Format: <code><a href="#format/border-color">&lt;border-color&gt;</a></code>
</p>
<h3><a name="border-bottom-color"/>border-bottom-color</h3>
<p>
Defines only the color of the lower border.
</p>
<p>
Format: <code><a href="#format/border-color">&lt;border-color&gt;</a></code>
</p>
<h3><a name="box-shadow"/>box-shadow</h3>
<p>
Used to define the shadow that is drawn behind the widget.
</p>
<p>
Format: <code> &lt;shadow&gt; | none</code>
</p>
<h4><a name="format/b-shadow"/>&lt;shadow&gt;</h4>
<p>
Format: <code> <a href="#format/dimension">&lt;dimension&gt;</a> <a href="#format/dimension">&lt;dimension&gt;</a> (<a href="#format/dimension">&lt;dimension&gt;</a> (<a href="#format/dimension">&lt;dimension&gt;</a>)?)? <a href="#format/shadow-color">&lt;shadow-color&gt;</a></code>
</p>
<ul>
<li> The first value defines the horizontal offset of the shadow. May be negative.</li>
<li> The second value defines the vertical offset of the shadow. May be negative.</li>
<li> The optional third value defines the radius of the blur effect. Negative values are not allowed. The default value is 0px.</li>
<li> The optional fourth value defines the spread of the shadow. It is currently not supported and therefore must be 0px. The default value is 0px.</li>
<li> The final value defines the color of the shadow. </li>
</ul>
<p>
Examples:
</p>
<ul>
<li> box-shadow: 5px 5px black; </li>
<li> box-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 ); </li>
<li> box-shadow: 5px 5px 2px 0px #FF00FF; </li>
</ul>
<h4><a name="format/shadow-color"/>&lt;shadow-color&gt;</h4>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/rgb-color">&lt;rgb-color&gt;</a>
| <a href="#format/rgba-color">&lt;rgba-color&gt;</a></code>
</p>
<h4><a name="format/rgba-color"/>&lt;rgba-color&gt;</h4>
Like the <a href="#format/rgb-color">&lt;rgb-color&gt;</a> notation, but with one more parameter
for opacity as used in the <a href="#opacity">opacity</a> attribute.
<p>
Examples:
</p>
<ul>
<li><code>color: rgba( 255, 128, 0, 0.33 );</code></li>
<li><code>color: rgba( 100%, 50%, 0%, 1 );</code></li>
</ul>
<h3><a name="text-shadow"/>text-shadow</h3>
<p>
Used to define the shadow that is drawn behind the widget text.
Note: Internet Explorer does not support text shadow.
</p>
<p>
Format: <code> &lt;text-shadow&gt; | none</code>
</p>
<h4><a name="format/t-shadow"/>&lt;text-shadow&gt;</h4>
<p>
Format: <code> <a href="#format/dimension">&lt;dimension&gt;</a>
<a href="#format/dimension">&lt;dimension&gt;</a>
(<a href="#format/dimension">&lt;dimension&gt;</a>)?
<a href="#format/shadow-color">&lt;shadow-color&gt;</a></code>
</p>
<ul>
<li> The first value defines the horizontal offset of the shadow. May be negative.</li>
<li> The second value defines the vertical offset of the shadow. May be negative.</li>
<li> The optional third value defines the radius of the blur effect. Negative values are not allowed. The default value is 0px.</li>
<li> The final value defines the color of the shadow. </li>
</ul>
<p>
Examples:
</p>
<ul>
<li> text-shadow: 2px 2px black; </li>
<li> text-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 ); </li>
<li> text-shadow: 1px 1px 0 #FF00FF; </li>
</ul>
<h3><a name="color"/>color</h3>
<p>
The color used for foreground-elements, e.g. Text.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/rgb-color">&lt;rgb-color&gt;</a>
| inherit</code>
</p>
<h4><a name="format/named-color"/>&lt;named-color&gt;</h4>
<p>
Valid color-names are:
<em>black</em>,
<em>gray</em>,
<em>silver</em>,
<em>white</em>,
<em>maroon</em>,
<em>red</em>,
<em>purple</em>,
<em>fuchsia</em>,
<em>green</em>,
<em>lime</em>,
<em>navy</em>,
<em>blue</em>,
<em>olive</em>,
<em>yellow</em>,
<em>teal</em>,
<em>aqua</em>.
</p>
<h4><a name="format/hex-color"/>&lt;hex-color&gt;</h4>
<p>
The format in hexadecimal notation is a <code>#</code> immediately followed by
either three or six hexadecimal characters.
The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb)
by replicating digits, not by adding zeros.
</p>
<p>
Examples:
</p>
<ul>
<li><code>color: #FF8800;</code></li>
<li><code>color: #F80; /* same as above */</code></li>
</ul>
<h4><a name="format/rgb-color"/>&lt;rgb-color&gt;</h4>
The format in the rgb notation is <code>rgb(</code>,
followed by a comma-separated list of three numerical values
(either integer or percentage), followed by <code>)</code>.
The integer value 255 corresponds to 100%.
<p>
Examples:
</p>
<ul>
<li><code>color: rgb( 255, 128, 0 );</code></li>
<li><code>color: rgb( 100%, 50%, 0% ); /* same as above */</code></li>
</ul>
<h3><a name="cursor"/>cursor</h3>
<p>
Defines a the form of the mouse pointer over a certain widget.
</p>
<p>
Format: <code><a href="#format/cursor-type">&lt;cursor-type&gt;</a>
| <a href="#format/image-url">&lt;image-url&gt;</a></code>
</p>
<h4><a name="format/cursor-type"/>&lt;cursor-type&gt;</h4>
<p>
One of the following: <code>default</code>, <code>wait</code>, <code>crosshair</code>,
<code>help</code>, <code>move</code>, <code>text</code>, <code>pointer</code>,
<code>e-resize</code>, <code>n-resize</code>, <code>w-resize</code>, <code>s-resize</code>,
<code>ne-resize</code>, <code>se-resize</code>, <code>nw-resize</code>, <code>sw-resize</code>,
<code>col-resize</code>, <code>row-resize</code>, <code>progress</code>, <code>not-allowed</code>,
<code>no-drop</code>.
</p>
<h3><a name="font"/>font</h3>
<p>
The font used to render the text.
</p>
<p>
Format: <code>(<a href="#format/font-style">&lt;font-style&gt;</a>)?
(<a href="#format/font-weight">&lt;font-weight&gt;</a>)?
<a href="#format/font-size">&lt;font-size&gt;</a>
<a href="#format/font-family">&lt;font-family&gt;</a></code>
</p>
<h4><a name="format/font-style"/>&lt;font-style&gt;</h4>
<p>
Optional value, may be <code>normal</code> or <code>italic</code>.
Is <code>normal</code> by default.
</p>
<h4><a name="format/font-weight"/>&lt;font-weight&gt;</h4>
<p>
Optional value, may be <code>normal</code> or <code>bold</code>.
Default is <code>normal</code>.
</p>
<h4><a name="format/font-size"/>&lt;font-size&gt;</h4>
<p>
Height of the text in pixels. See <a href="#format/dimension">&lt;dimension&gt;</a>.
</p>
<h4><a name="format/font-family"/>&lt;font-family&gt;</h4>
<p>
Name of the font that should be used.
Is ignored if the font is not available on the client-system.<br/>
Several comma-seperated values can be given.
The order is relevant, as the first available font will be used.<br/>
Font names containing any white spaces must be quoted.
</p>
<p>
As a fallback mechanism, one of the following generic fonts should be given
as the last value:
<code>serif</code>,
<code>sans-serif</code>,
<code>cursive</code>,
<code>fantasy</code>,
<code>monospace</code>.
</p>
<p>
For the color of the text, the <code>color</code>-property is used.
Effects can be added using <code>text-decoration</code>.
</p>
<p>
Examples:
</p>
<ul>
<li><code>font: italic bold 16px serif;</code></li>
<li><code>font: 11px 'Segoe UI', Corbel, Calibri, Tahoma, 'Lucida Sans Unicode', sans-serif;</code></li>
</ul>
<h3><a name="height"/>height</h3>
<p>
A dimension that defines the height of certain parts of a widget.
</p>
<p>
Format: <a href="#format/dimension">&lt;dimension&gt;</a>
</p>
<h4><a name="format/dimension"/>&lt;dimension&gt;</h4>
<p>
A non-negative integer with <code>px</code> as unit. May be zero.
</p>
<p>
Examples:
</p>
<ul>
<li><code>0px</code></li>
<li><code>20px</code></li>
<li><code>100px</code></li>
</ul>
<h3><a name="margin"/>margin</h3>
<p>
Defines the distance between the element and its surroundings.
</p>
<p>
Format: <code><a href="#format/box-dimension">&lt;box-dimension&gt;</a></code>
</p>
<h4><a name="format/box-dimension"/>&lt;box-dimension&gt;</h4>
<p>
Defines four dimensions, in the order of <code>top right bottom left</code>.
</p>
<ul>
<li>
When only one value is given, it is used for all four dimension.
</li>
<li>
When two values are given, the first is used for <code>top</code> and <code>bottom</code>,
the second for <code>left</code> and <code>right</code>.
</li>
<li>
When three values are given, the first value is used for <code>top</code>, the second for
<code>left</code> and <code>right</code>, and the third for <code>bottom</code>.
</li>
</ul>
<p>
Examples:
</p>
<ul>
<li><code>padding: 0px;</code></li>
<li><code>margin: 3px 5px 3px 5px;</code></li>
<li><code>margin: 3px 5px; /* same as above */</code></li>
<li><code>border-radius: 5px;</code></li>
</ul>
<h3><a name="opacity"/>opacity</h3>
<p>
A rational number between (and including) 0 and 1 without a unit.
</p>
<p>
Examples:
</p>
<ul>
<li><code>opacity: 1;</code></li>
<li><code>opacity: 0.764467;</code></li>
<li><code>opacity: 0;</code></li>
</ul>
<h3><a name="padding"/>padding</h3>
<p>
Defines the distance between the elements border and its content.
</p>
<p>
Format: <code><a href="#format/box-dimension">&lt;box-dimension&gt;</a></code>
</p>
<h3><a name="rwt-fontlist"/>rwt-fontlist</h3>
<p>
The font list returned by Display#getFontList().
</p>
<p>
See <a href="#font">font</a>
</p>
<h3><a name="rwt-error-image"/>rwt-error-image</h3>
<p>
Defines an RWT system image.
</p>
<p>
Format: <code><a href="#format/image-url">&lt;image-url&gt;</a></code>
</p>
<h3><a name="rwt-information-image"/>rwt-information-image</h3>
<p>
Defines an RWT system image.
</p>
<p>
Format: <code><a href="#format/image-url">&lt;image-url&gt;</a></code>
</p>
<h3><a name="rwt-working-image"/>rwt-working-image</h3>
<p>
Defines an RWT system image.
</p>
<p>
Format: <code><a href="#format/image-url">&lt;image-url&gt;</a></code>
</p>
<h3><a name="rwt-question-image"/>rwt-question-image</h3>
<p>
Defines an RWT system image.
</p>
<p>
Format: <code><a href="#format/image-url">&lt;image-url&gt;</a></code>
</p>
<h3><a name="rwt-warning-image"/>rwt-warning-image</h3>
<p>
Defines an RWT system image.
</p>
<p>
Format: <code><a href="#format/image-url">&lt;image-url&gt;</a></code>
</p>
<h3><a name="rwt-shadow-color"/>rwt-shadow-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="rwt-highlight-color"/>rwt-highlight-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="rwt-darkshadow-color"/>rwt-darkshadow-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="rwt-lightshadow-color"/>rwt-lightshadow-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="rwt-thinborder-color"/>rwt-thinborder-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="rwt-selectionmarker-color"/>rwt-selectionmarker-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="rwt-infobackground-color"/>rwt-infobackground-color</h3>
<p>
Defines an RWT system color.
</p>
<p>
Format: <code><a href="#format/named-color">&lt;named-color&gt;</a>
| <a href="#format/hex-color">&lt;hex-color&gt;</a>
| <a href="#format/named-color">&lt;rgb-color&gt;</a></code>
</p>
<h3><a name="spacing"/>spacing</h3>
<p>
A dimension that defines the distance between certain parts of a widget.
</p>
<p>
Format: <a href="#format/dimension">&lt;dimension&gt;</a>
</p>
<h3><a name="text-decoration"/>text-decoration</h3>
<p>
Additional decorative effects to render a text with.
</p>
<p>
Format: <code>underline | overline | line-through | none</code>
</p>
<p>
Examples:
</p>
<ul>
<li><code>text-decoration: line-through;</code></li>
</ul>
<h3><a name="width"/>width</h3>
<p>
A dimension that defines the width of certain parts of a widget.
</p>
<p>
Format: <a href="#format/dimension">&lt;dimension&gt;</a>
</p>
</body>
</html>