Selector Name |
Description |
Conditions |
.AFActiveDataColor:alias |
Active data background color when twinkle is on. |
Only used by alta skins. |
.AFCalendarTodayBackgroundColor:alias |
Background color of the element that represents today in
the Calendar. |
Only used by alta skins. |
.AFCodeEditorAreaActiveColor:alias |
Background color for code editor active area. |
Only used by alta skins. |
.AFCodeEditorAreaHighlightColor:alias |
Code editor highlight color. |
Only used by alta skins. |
.AFCodeEditorBackgroundColor:alias |
Background color for the code editor. |
Only used by alta skins. |
.AFCodeEditorBackgroundDisabledColor:alias |
Code Editor disabled background color. |
Only used by alta skins. |
.AFCodeEditorBackgroundReadOnlyColor:alias |
Code Editor read only background color. |
Only used by alta skins. |
.AFCodeEditorBorderColor:alias |
Code Editor border color. |
Only used by alta skins. |
.AFCodeEditorErrorColor:alias |
Color to distinguish errors in code editor. |
Only used by alta skins. |
.AFCodeEditorLineGutterBackgroundColor:alias |
Background color in the code editor Line Gutter. |
Only used by alta skins. |
.AFCodeEditorLineGutterBorderColor:alias |
Border color for the code editor Line Gutter. |
Only used by alta skins. |
.AFCodeEditorLineNumberBorderColor:alias |
Border color for the code editor Line Number column. |
Only used by alta skins. |
.AFCodeEditorTextColor:alias |
Color for the text in the code editor. |
Only used by alta skins. |
.AFCodeEditorTextDisabledColor:alias |
Color for the disabled text in the code editor. |
Only used by alta skins. |
.AFCodeEditorToolbarBackgroundColor:alias |
Background color for the toolbar in the code editor |
Only used by alta skins. |
.AFCodeEditorWarningColor:alias |
Color to distinguish warnings in code editor. |
Only used by alta skins. |
.AFDateDisabledColor:alias |
Color used for numeral text of for disabled days in the
inputDate component. It is lighter than the default font color. |
Only used by alta skins. |
.AFDateNextColor:alias |
Next date color. |
Only used by alta skins. |
.AFErrorColor:alias |
Color to distinguish errors. |
Only used by alta skins. |
.AFFreezeLineColor:alias |
Freeze line color. |
Only used by alta skins. |
.AFPageStampTextColor:alias |
Page stamp text color. |
Only used by alta skins. |
.AFPanelBoxCoreLightColor:alias |
Background color used in the panel box. |
Only used by alta skins. |
.AFPanelBoxCoreMediumColor:alias |
Background color used in the panel box. |
Only used by alta skins. |
.AFSliderDisabledColor:alias |
Color used for disabled tick mark in the slider. It is
lighter than the default font color. |
Only used by alta skins. |
.AFSwatchBorderColor:alias |
Swatch border color. |
Only used by alta skins. |
.AFWarningColor:alias |
Color to distinguish warnings. |
Only used by alta skins. |
.AFSelectBorderColor:alias |
Border color of select components. |
Only used by alta skins. |
.AFSelectActiveBorderColor:alias |
Border color of select components in active state. |
Only used by alta skins. |
.AFSelectBackgroundActiveColor:alias |
Background color of select components in active state. |
Only used by alta skins. |
.AFSelectSelectedMarkerBackgroundColor:alias |
Background color of selected marker element of select
components. |
Only used by alta skins. |
Selector Name |
Description |
Conditions |
.AFTextForeground:alias |
Specifies the color of the font for text. |
Only used by fusion skins. |
.AFLightTextForeground:alias |
Specifies the color of lighter text in the page, typically
used
against darker themes background. |
Only used by fusion skins. |
.AFLightLabelTextForeground:alias |
Specifies the color of lighter label text in the page,
typically used
against darker themes background. |
Only used by fusion skins. |
.AFTextBackground:alias |
Specifies the background-color of the font for
text. |
Only used by fusion skins. |
.AFErrorTextForeground:alias |
Style that is used for the color of error text. |
Only used by fusion skins. |
.AFInstructionText |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFInstructionTextDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFFieldText |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFFieldTextDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFFieldTextLTR |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFFieldTextLTRDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFPhoneFieldText |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFPhoneFieldTextDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFPostalCodeFieldText |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFPostalCodeFieldTextDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFAddressFieldText |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFAddressFieldTextDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFDataText |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFDataTextDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFDataNumber |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFDataNumberDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFFieldNumber |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
.AFFieldNumberDisabled |
Built-in style that can be used as a styleClass
attribute value. To style input components, you
would use the style classes that end in
'Marker'. See skinning doc for af:inputText for
details. |
Selector Name |
Description |
Conditions |
.AFPanelBoxHeaderStartDefault:alias |
Alias for the style for the start corner in the header
of the panel box and region.
Usually the curve image. |
Only used by fusion skins. |
.AFPanelBoxHeaderEndDefault:alias |
Alias for the style for the end corner in the header of
the panel box and region.
Usually the curved image. |
Only used by fusion skins. |
.AFPanelBoxHeaderCenterDefault:alias |
Alias for the style for the center area in the header
of the panel box and region. |
Only used by fusion skins. |
.AFPanelBoxFooterStartDefault:alias |
Alias for the style for the start corner in the footer
of the panel box and region.
Usually the curved image. |
Only used by fusion skins. |
.AFPanelBoxFooterEndDefault:alias |
Alias for the style for the end corner in the footer of
the panel box and region.
Usually the curve image. |
Only used by fusion skins. |
.AFPanelBoxFooterCenterDefault:alias |
Alias for the style for the center area in the footer
of the panel box and region. |
Only used by fusion skins. |
.AFPanelBoxContentCenterDefault:alias |
Alias for the style for the content area of the panel
box and region. |
.AFPanelBoxHeaderCoreDefault:alias |
Alias to change the properties on the panelBox
header for the panelBox whose "ramp" is set to
"core" and "color" is set to "default". Using
this style class significantly simplifies the
work required to style the header. Instead of
changing three classes (for header-start,
header, header-end) you only need to change
this one. The region component uses this alias
as well. |
.AFPanelBoxContentCoreDefault:alias |
Alias to change the properties on the panelBox
content for the panelBox whose "ramp" is set to
"core" and "color" is set to "default". The
region component uses this alias as well. |
.AFPanelBoxHeaderCoreLight:alias |
Same as .AFPanelBoxHeaderCoreDefault:alias, but
for color=light. |
.AFPanelBoxContentCoreLight:alias |
Same as .AFPanelBoxContentCoreDefault:alias,
but for color=light. |
.AFPanelBoxHeaderCoreMedium:alias |
Same as .AFPanelBoxHeaderCoreDefault:alias, but
for color=medium. |
.AFPanelBoxContentCoreMedium:alias |
Same as .AFPanelBoxContentCoreDefault:alias,
but for color=medium. |
.AFPanelBoxHeaderCoreDark:alias |
Same as .AFPanelBoxHeaderCoreDefault:alias, but
for color=dark. |
.AFPanelBoxContentCoreDark:alias |
Same as .AFPanelBoxContentCoreDefault:alias,
but for color=dark. |
.AFPanelBoxHeaderHighlightDefault:alias |
Alias to change the properties on the panelBox
header for the panelBox whose "ramp" is set to
"highlight" and "color" is set to "default".
Using this style class significantly simplifies
the work required to style the header. Instead
of changing three classes (for header-start,
header, header-end) you only need to change
this one. The region component uses this alias
as well. |
.AFPanelBoxContentHighlightDefault:alias |
Alias to change the properties on the panelBox
content for the panelBox whose "ramp" is set to
"highlight" and "color" is set to "default".
The region component uses this alias as well. |
.AFPanelBoxHeaderHighlightLight:alias |
Same as
.AFPanelBoxHeaderHighlightDefault:alias, but
for color=light. |
.AFPanelBoxContentHighlightLight:alias |
Same as
.AFPanelBoxContentHighlightDefault:alias, but
for color=light. |
.AFPanelBoxHeaderHighlightMedium:alias |
Same as
.AFPanelBoxHeaderHighlightDefault:alias, but
for color=medium. |
.AFPanelBoxContentHighlightMedium:alias |
Same as
.AFPanelBoxContentHighlightDefault:alias, but
for color=medium. |
.AFPanelBoxHeaderHighlightDark:alias |
Same as
.AFPanelBoxHeaderHighlightDefault:alias, but
for color=dark. |
.AFPanelBoxContentHighlightDark:alias |
Same as
.AFPanelBoxContentHighlightDefault:alias, but
for color=dark. |
.AFPanelBoxHeaderStart:alias |
Alias to change the dom element at the start of
the header. Use this alias to modify the CSS
properties that are needed for all
ramp/background of panelBoxes. Common CSS
properties are padding and border. |
Only used by fusion skins. |
.AFPanelBoxHeaderCenter:alias |
Alias to change the dom element at the center
of the header. Use this alias to modify the CSS
properties that are needed for all
ramp/background of panelBoxes. Common CSS
properties for the header center dom element
are width and font information. |
Only used by fusion skins. |
.AFPanelBoxHeaderEnd:alias |
Alias to change the dom element at the end of
the header. Use this alias to modify the CSS
properties that are needed for all
ramp/background of panelBoxes. Common CSS
properties are padding and border. |
Only used by fusion skins. |
Selector Name |
Description |
Conditions |
.AFTabAboveStartUnselectedBackground:alias |
Selector used only in the blafplus and fusion skins to
define the background-image of the
above start portion of an unselected level 3 section of a tab created by af:navigationPane
hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabAboveMiddleUnselectedBackground:alias |
Selector used only in the blafplus and fusion skins to
define the background-image of the
above middle portion of an unselected level 3 section of a tab created by
af:navigationPane hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabAboveEndUnselectedBackground:alias |
Selector used only in the blafplus and fusion skins to
define the background-image of the
above end portion of an unselected level 3 section of a tab created by af:navigationPane
hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabBelowStartUnselectedBackground:alias |
Selector used only in the blafplus and fusion skins to
define the background-image of the
below start portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabBelowMiddleUnselectedBackground:alias |
Selector used only in the blafplus and fusion skins to
define the background-image of the
below middle portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabBelowEndUnselectedBackground:alias |
Selector used only in the blafplus and fusion skins to
define the background-image of the
below end portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabAboveStartUnselectedDisabledBackground:alias |
Selector used only in the fusion skins to define the
background-image of the disabled
above start portion of an unselected level 3 section of a tab created by af:navigationPane
hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabAboveMiddleUnselectedDisabledBackground:alias
|
Selector used only in the fusion skins to define the
background-image of the disabled
above middle portion of an unselected level 3 section of a tab created by
af:navigationPane hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabAboveEndUnselectedDisabledBackground:alias |
Selector used only in the fusion skins to define the
background-image of the disabled
above end portion of an unselected level 3 section of a tab created by af:navigationPane
hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabBelowStartUnselectedDisabledBackground:alias |
Selector used only in the fusion skins to define the
background-image of the disabled
below start portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabBelowMiddleUnselectedDisabledBackground:alias
|
Selector used only in the fusion skins to define the
background-image of the disabled
below middle portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabBelowEndUnselectedDisabledBackground:alias |
Selector used only in the fusion skins to define the
background-image of the disabled
below end portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabAboveStartUnselectedHoverBackground:alias |
Selector used only in the blafplus skins to define the
background-image of the hover
above start portion of an unselected level 3 section of a tab created by af:navigationPane
hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabAboveMiddleUnselectedHoverBackground:alias |
Selector used only in the blafplus skins to define the
background-image of the hover
above middle portion of an unselected level 3 section of a tab created by
af:navigationPane hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabAboveEndUnselectedHoverBackground:alias |
Selector used only in the blafplus skins to define the
background-image of the hover
above end portion of an unselected level 3 section of a tab created by af:navigationPane
hint="tabs"
or af:panelTabbed. |
Only used by fusion skins. |
.AFTabBelowStartUnselectedHoverBackground:alias |
Selector used only in the blafplus skins to define the
background-image of the hover
below start portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabBelowMiddleUnselectedHoverBackground:alias |
Selector used only in the blafplus skins to define the
background-image of the hover
below middle portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
.AFTabBelowEndUnselectedHoverBackground:alias |
Selector used only in the blafplus skins to define the
background-image of the hover
below end portion of an unselected level 3 section of a tab created by af:panelTabbed.
|
Only used by fusion skins. |
Selector Name |
Description |
Conditions |
.AFTabRemoveImageDisclosed:alias |
The disclosed tab remove image. |
.AFTabRemoveImageUndisclosed:alias |
The undisclosed tab remove image. |
.AFTabRemoveImageHover:alias |
The hover remove image (mouseover on an enabled remove
image). |
.AFTabRemoveImageActive:alias |
The active remove image (mousedown on an enabled remove
image). |
.AFTabDisabledRemoveImage:alias |
The tab remove image shown on disabled tabs. |
.AFTabRemoveImageDisabledDisclosed:alias |
The tab remove image shown on disclosed tabs that have
remove feature set to disabled. |
.AFTabRemoveImageDisabledUndisclosed:alias |
The tab remove image shown on undisclosed tabs that
have remove feature set to disabled. |
.AFDynamicHelpIconStyle:alias |
Style that is used for the dynamic help icon.
Includes .AFClickableImageAnchor:alias |
.AFDynamicHelpIconStyleActive:alias |
Style that is used for the dynamic help icon in
the active state. |
.AFDynamicHelpIconStyleHover:alias |
Style that is used for the dynamic help icon in
the hover state. |
.AFDynamicHelpIconStyleDisabled:alias |
Style that is used for the dynamic help icon in
the disabled state. |
.AFRequiredIconStyle |
A style class that styles the required icon for
form components. You cannot currently style
this icon for each component. |
.AFDisclosedIconStyle:alias |
The disclosed icon used in components like panelBox,
region, panelAccordion,
query and showDetailheader. |
.AFDisclosedIconStyleHover:alias |
The disclosed icon for hover state used in components
like panelBox, region, panelAccordion,
query and showDetailheader. |
.AFDisclosedIconStyleActive:alias |
The disclosed icon for active state used in components
like panelBox, region, panelAccordion,
query and showDetailheader. |
.AFUndisclosedIconStyle:alias |
The undisclosed icon used in components like panelBox,
region, panelAccordion,
query and showDetailheader. |
.AFUndisclosedIconStyleHover:alias |
The undisclosed icon for hover state used in components
like panelBox, region, panelAccordion,
query and showDetailheader |
.AFUndisclosedIconStyleActive:alias |
The undisclosed icon for active state used in
components like panelBox, region, panelAccordion,
query and showDetailheader. |
.AFMaximizedIconStyle:alias |
The maximize icon used in panelBox. |
.AFMaximizedIconStyleActive:alias |
The maximize icon for active state used in panelBox.
|
.AFMaximizedIconStyleHover:alias |
The maximize icon for hover state used in panelBox.
|
.AFMaximizedIconStyleDarkBackground:alias |
The maximize icon used with dark background in
panelBox. |
.AFUnmaximizedIconStyle:alias |
The unmaximize icon used in panelBox. |
.AFUnmaximizedIconStyleActive:alias |
The unmaximize icon for active state used in panelBox.
|
.AFUnmaximizedIconStyleHover:alias |
The unmaximize icon for hover state used in panelBox.
|
.AFUnmaximizedIconStyleDarkBackground:alias |
The unmaximize icon used with dark background in
panelBox. |
.AFBarSeparator:alias |
Specifies the separator bar used by af|menuBar,
af|toolbar, and af|query. The separator bar is used to demarcate
the end of a group of buttons (components) from the beginning
of another group. |
.AFDropDownIconBorder:alias |
Border of the dropdown cells for the blafplus skins.
Generally the dropdown cells do not have borders in the fusion skins. |
.AFDropDownIconBorderHover:alias |
Border of the dropdown cells when hovering for the
blafplus skins. Generally the dropdown cells do not have borders in the fusion skins. |
.AFDropDownIconBorderActive:alias |
Border of the dropdown cells when active for the
blafplus skins. Generally the dropdown cells do not have borders in the fusion skins. |
.AFDataCollectionStatusMessage:alias |
Styles the status message that shows up when
the user scrolls a data collection type
component (i.e., table and tree). |
.AFStartTextAlign:alias |
Sets the text-align property to "left" for
left-to-right reading direction and "right" for
right-to-left reading direction. |
.AFEndTextAlign:alias |
Sets the text-align property to "right" for
left-to-right reading direction and "left" for
right-to-left reading direction. |
.AFEndPadding:alias |
Sets the padding property to pad on the "right" for
left-to-right reading direction and "left" for
right-to-left reading direction. e.g,: padding:
0px 8px 0px 0px; (for "right" padding). This is
used in the .AFLabel:alias. |
.AFStartPadding:alias |
Sets the padding property to pad on the "left" for
left-to-right reading direction and "right" for
right-to-left reading direction. e.g,:
padding: 0px 0px 0px 8px; (for "left" padding). |
.AFClickableImageAnchor:alias |
Specifies the CSS properties needed to display
an image which is clickable and which has
inline-mode display. This style should be
applied on an empty anchor, i.e. no text
between the <a> and </a> tags. The
attributes control the appearance, e.g.
font-size and padding-right give the image room
to display inline. By default, this alias is
included in style selectors that use 16x16
images and need to display inline
background-images for both IE and Firefox. To
customize, you can include this alias in your
selector and override its properties. For
example, you can change font-size and
padding-right for an image with different
height and width, or you can set "display:
block" together with height, width attributes
to display in block mode. |
.AFConveyorBeltImageHorizontalStart:alias |
Styles the conveyor belt indicator at the start side of
a horizontal list |
.AFConveyorBeltImageHorizontalStartHover:alias |
Styles the conveyor belt indicator at the start side of
a horizontal list on hover |
.AFConveyorBeltImageHorizontalStartDepressed:alias |
Styles the conveyor belt indicator at the start side of
a horizontal list on depress |
.AFConveyorBeltImageHorizontalStartDisabled:alias |
Styles the disabled conveyor belt indicator at the
start side of a horizontal list |
.AFConveyorBeltImageHorizontalEnd:alias |
Styles the conveyor belt indicator at the end side of a
horizontal list |
.AFConveyorBeltImageHorizontalEndHover:alias |
Styles the conveyor belt indicator at the end side of a
horizontal list on hover |
.AFConveyorBeltImageHorizontalEndDepressed:alias |
Styles the conveyor belt indicator at the end side of a
horizontal list on depress |
.AFConveyorBeltImageHorizontalEndDisabled:alias |
Styles the disabled conveyor belt indicator at the end
side of a horizontal list |
.AFConveyorBeltImageVerticalTop:alias |
Styles the conveyor belt indicator at the top of a
vertical list |
.AFConveyorBeltImageVerticalTopHover:alias |
Styles the conveyor belt indicator at the top of a
vertical list on hover |
.AFConveyorBeltImageVerticalTopDepressed:alias |
Styles the conveyor belt indicator at the top of a
vertical list on depress |
.AFConveyorBeltImageVerticalBottom:alias |
Styles the conveyor belt indicator at the bottom of a
vertical list |
.AFConveyorBeltImageVerticalBottomHover:alias |
Styles the conveyor belt indicator at the bottom of a
vertical list on hover |
.AFConveyorBeltImageVerticalBottomDepressed:alias |
Styles the conveyor belt indicator at the bottom of a
vertical list on depress |
.AFDroplistImage:alias |
Styles the droplist indicator used with conveyor belt
|
.AFDroplistImageHover:alias |
Styles the droplist indicator used with conveyor belt
on hover |
.AFDroplistImageDepressed:alias |
Styles the droplist indicator used with conveyor belt
on depress |
.AFOverflowImageHorizontalStart:alias |
Styles the overflow indicator at the start side of a
horizontal list |
.AFOverflowImageHorizontalStartHover:alias |
Styles the overflow indicator at the start side of a
horizontal list on hover |
.AFOverflowImageHorizontalStartDepressed:alias |
Styles the overflow indicator at the start side of a
horizontal list on depress |
.AFOverflowImageHorizontalEnd:alias |
Styles the overflow indicator at the end side of a
horizontal list |
.AFOverflowImageHorizontalEndHover:alias |
Styles the overflow indicator at the end side of a
horizontal list on hover |
.AFOverflowImageHorizontalEndDepressed:alias |
Styles the overflow indicator at the end side of a
horizontal list on depress |
.AFOverflowImageVerticalStart:alias |
Styles the overflow indicator at the start side of a
vertical list |
.AFOverflowImageVerticalStartHover:alias |
Styles the overflow indicator at the start side of a
vertical list on hover |
.AFOverflowImageVerticalStartDepressed:alias |
Styles the overflow indicator at the start side of a
vertical list on depress |
.AFOverflowImageVerticalEnd:alias |
Styles the overflow indicator at the end side of a
vertical list |
.AFOverflowImageVerticalEndHover:alias |
Styles the overflow indicator at the end side of a
vertical list on hover |
.AFOverflowImageVerticalEndDepressed:alias |
Styles the overflow indicator at the end side of a
vertical list on depress |
.AFLinkIEWorkaround |
Built-in style that can be used as a styleClass
attribute value to work around the IE bug in
which the bottom 1px of image is clipped in
some use-cases. Users should set
styleClass="AFLinkIEWorkaround" on the clipping
commandImageLink |
.AFHideBorder |
A marker style class that can be used to turn
off borders that components have assigned to
their root elements. This cannot and will not
affect borders that are applied to internal
elements of components nor for components whose
borders are applied via inline styles or from
skin definitions with high specificity weights. |
.AFContentCell |
This selector specifies the content element of a
label/content pair of html elements.
Not often used as a selector by itself but in addition
to other component selectors, usually for alignment
padding. |
.AFStretchWidth |
A marker style class that will declaratively
stretch a component horizontally in a wide
flowing container. This style class should be
used instead of attempting to use a percentage
width as an inlineStyle width to stretch a
component horizontally. Features: Automatically
applies stretching to just the components that
can be stretched horizontally. Provides a work
around for a bug in Internet Explorer 7. In
this browser, a horizontally-stretched
component can cause a horizontal scroll bar to
appear. This scroll bar lets you scroll the
distance equal to the width of the vertical
scroll bar. This scroll bar should not appear
at all. To work around this issue, this style
class will use a smaller stretched width in
order to reduce the chance of encountering this
bug. If your component is already being
stretched both horizontally and vertically by
its parent component, then this style class
will not be needed (it would be redundant). |
.AFLabelTopAlign |
Marker style class to help top align the label element rendered by panelLabelAndMessage
component. This is helpful to align the labels of components like selectOneRadio and
selectManyCheckbox when rendered in vertical mode.
|
.AFAuxiliaryStretchWidth |
A marker style class that will declaratively
stretch a component horizontally in a narrow
flowing container. This style class should be
used instead of attempting to use a percentage
width as an inlineStyle width to stretch a
component horizontally. Features: Automatically
applies stretching to just the components that
can be stretched horizontally. Provides a work
around for a bug in Internet Explorer 7. In
this browser, a horizontally-stretched
component can cause a horizontal scroll bar to
appear. This scroll bar lets you scroll the
distance equal to the width of the vertical
scroll bar. This scroll bar should not appear
at all. To work around this issue, this style
class will use a smaller stretched width in
order to reduce the chance of encountering this
bug. If your component is already being
stretched both horizontally and vertically by
its parent component, then this style class
will not be needed (it would be redundant). |
.AFBrandingBar |
A style class used for a branding bar container
(e.g. on an af:panelBorderLayout or horizontal
af:panelGroupLayout). This typically defines
the height of the bar and optionally border
decoration. |
.AFBrandingBarCompact |
A style class used for a branding bar that
is compacted due to size of application navigation bar.
|
.AFBrandingBarTall |
A style class used for a branding bar that
is taller than the normal. This is used when there is Application Navigation
Bar in the Branding Bar. |
.AFBrandingLogoTitleContainer |
A style class used for styling the logo and
title container. |
.AFBrandingLogo |
A style class used for styling the branding logo alone
|
.AFAppNavbarContainer |
A style class used for styling the container of buttons
that appear on
an application navigation bar |
.AFAppNavbarButton |
A style class used for a styling the buttons that
appear on
an application navigation bar |
.AFGlobalNavbarButton |
A style class used for a styling the golbal toolbar.
This buttons border
and background is transparent. The text color depends on the background. |
.AFFooterBar |
A style class used for a styling the Footer container.
A typical
definiton includes height and margin. |
.AFBrandingBarItem |
A style class used for a container (e.g. an
af:panelGroupLayout) for items inside of the
branding bar container. This typically defines
the height of the items inside of the bar. If
you place other components in these items, you
want need to define styles to adjust their
padding-top, e.g. if you use an
af:navigationPane hint="buttons", you may want
to provide a skin definition of ".AFBrandingBar
af|navigationPane-buttons" where you provide a
padding-top. Similarly, if you use an
af:statusIndicator, you may want to provide a
definition of ".AFBrandingBar
af|statusIndicator" where you provide a
padding-top. |
.AFBrandingBarLogo |
A style class used as a decorative branding
logo (e.g. on an af:spacer) placed inside of a
branding bar item wrapper. This typically
defines a background-image and dimensions of
the image that the logo needs to consume.
Note: The style uses background image which will
not render under high contrast mode in some browsers.
|
.AFBrandingBarLogoLarge |
Similar to AFBrandingBarLogo. But shows a larger logo.
This is used when the branding bar is taller.
|
.AFBrandingBarTitle |
A style class used for title text (e.g. on an
af:outputText) placed inside of a branding bar
item wrapper. This typically defines a
font-family, a font-size, and a padding-top if
you want to tweak the alignment of the text and
the logo. |
.AFBrandingSplitter |
A style class used on a splitter that separates out the
branding area. This
typically is placed on a panelSplitter so that the background of the middle splitter area
can
be assigned to match the background branding color. |
.AFModalGlassPane |
When the af:dialog and af:panelWindow
components are used in modal mode, a div is
created that lies between the primary window
and the modal popup window. This global style
is assigned to the div creating the effect of a
glass pane. Adjusting the background-color of
this style will change the look of the modal
glass. |
.AFMaskingFrame |
This style is used by the inline popups to
prevent bleed-through of content found below
the floating elements. The style is assigned to
a dynamically created iframe. Blending is
adjusted using the opacity attribute. |
.AFStampContainer |
Style to apply to a container of stamps as
defined by the key notation, page stamp and
header legend UI guidelines. |
.AFTwinkleBackground:alias |
Specifies the background of active data when
twinkle is on. |
Only used by fusion skins. |
.AFTwinkleForeground:alias |
Specifies the foreground of active data when
twinkle is on. |
Only used by fusion skins. |
.AFInlineSelected:alias |
Alias used in *:inline-selected |
.AFStatusIconStyle:alias |
This style is for the element that contains a
.AFStatusIcon:alias
icon (e.g. carousel, inlineFrame).
If you are editing this alias, you should also edit
.AFStatusIcon:alias and .AFBackgroundImageStatus:alias since
components will choose among these icons automatically under the
necessary circumstances.
This typically defines a background-image to an alpha-transparent
image that lets a binary-transparent animated status-icon image blend
well on any background when these 2 images are stacked. It also
typically defines a width and height are for the dimensions of this
element. |
.AFBackgroundImageStatus:alias |
This style is for an element that displays a loading
status icon when
the other loading status icon selectors (.AFStatusIcon:alias and
.AFStatusIconStyle:alias) cannot be used (like an inlineFrame that
isn't being stretched by its parent component).
If you are editing this alias, you should also edit
.AFStatusIcon:alias and .AFStatusIconStyle:alias since components
will choose among these icons automatically under the necessary
circumstances.
This typically defines a background-image that references a single
image file that is animated and binary-transparent. However, in
browsers that support it, you can use this to define multiple
concurrent background images where one image is animated and
binary-transparent and the other image is non-animated and
alpha-transparent so that the overall combined icon will blend
smoothly with whatever coloring is behind the icon. |
.AFAutoSuggestItemsContainer |
Style class on container for the suggested items |
.AFAutoSuggestItem |
Style class on each of the suggested items |
.AFAutoSuggestMoreLink |
Style to apply on the More... label rendered in the
auto suggest popup |
.AFAutoSuggestBusyStyle |
Style Class of the busy icon shown in the autosuggest
popup while fetching data.
This style also uses the .AFBackgroundImageStatus:alias rule ref. |
.AFTaskStampTextLabel |
Selector used to apply to a task stamp text label. This
selector
is used for implementation of blafplus Page Stamp specification. |
.AFTaskStampTextValue |
Selector used to apply to a task stamp text value. This
selector
is used for implementation of blafplus Page Stamp specification. |
.AFUserStampTextLabel |
Selector used to apply to a user stamp text label. This
selector
is used for implementation of blafplus Page Stamp specification. |
.AFUserStampTextValue |
Selector used to apply to a user stamp text value. This
selector
is used for implementation of blafplus Page Stamp specification. |
.AFUserStampSeparator |
Selector used to apply to a user stamp label and value
separator.
This selector is used for implementation of blafplus Page Stamp specification. |
.AFUserStampSwitcher |
Selector used to apply to a user stamp switcher.
This selector is used for implementation of blafplus Page Stamp specification. |
.AFKeyNotationText |
Selector used to apply to key notation main text.
This selector is used for implementation of blafplus Key Notation specification. |
.AFSmallBorderRadius:alias |
Specifies a small border radius. |
.AFMediumBorderRadius:alias |
Specifies a medium border radius. |
.AFLargeBorderRadius:alias |
Specifies a large border radius. |
.AFExtraLargeBorderRadius:alias |
Specifies an extra large border radius. |
Style Selectors |
Description |
Conditions |
.AFCalendarLightBackground:alias |
alias for the background color for the light
portions of the calendar. |
.AFCalendarTodayBackground:alias |
alias for the background color for today's date
|
.AFCalendarTodayHeaderBackground:alias |
alias for the background color for headers for
today's date |
.AFCalendarActiveDayHeaderBackground:alias |
alias for the background color for headers for
the active day |
.AFCalendarCategory1 |
Calendar color scheme 1 |
.AFCalendarCategory1LightColor:alias |
Light color configuration for calendar color
scheme 1 |
.AFCalendarCategory1MediumColor:alias |
Medium color configuration for calendar color
scheme 1 |
.AFCalendarCategory1TextColor:alias |
Text color configuration for calendar color
scheme 1 |
.AFCalendarCategory2 |
Calendar color scheme 2 |
.AFCalendarCategory2LightColor:alias |
Light color configuration for calendar color
scheme 2 |
.AFCalendarCategory2MediumColor:alias |
Medium color configuration for calendar color
scheme 2 |
.AFCalendarCategory2TextColor:alias |
Text color configuration for calendar color
scheme 2 |
.AFCalendarCategory3 |
Calendar color scheme 3 |
.AFCalendarCategory3LightColor:alias |
Light color configuration for calendar color
scheme 3 |
.AFCalendarCategory3MediumColor:alias |
Medium color configuration for calendar color
scheme 3 |
.AFCalendarCategory3TextColor:alias |
Text color configuration for calendar color
scheme 3 |
.AFCalendarCategory4 |
Calendar color scheme 4 |
.AFCalendarCategory4LightColor:alias |
Light color configuration for calendar color
scheme 4 |
.AFCalendarCategory4MediumColor:alias |
Medium color configuration for calendar color
scheme 4 |
.AFCalendarCategory4TextColor:alias |
Text color configuration for calendar color
scheme 4 |
.AFCalendarCategory5 |
Calendar color scheme 5 |
.AFCalendarCategory5LightColor:alias |
Light color configuration for calendar color
scheme 5 |
.AFCalendarCategory5MediumColor:alias |
Medium color configuration for calendar color
scheme 5 |
.AFCalendarCategory5TextColor:alias |
Text color configuration for calendar color
scheme 5 |
.AFCalendarCategory6 |
Calendar color scheme 6 |
.AFCalendarCategory6LightColor:alias |
Light color configuration for calendar color
scheme 6 |
.AFCalendarCategory6MediumColor:alias |
Medium color configuration for calendar color
scheme 6 |
.AFCalendarCategory6TextColor:alias |
Text color configuration for calendar color
scheme 6 |
.AFCalendarCategory7 |
Calendar color scheme 7 |
.AFCalendarCategory7LightColor:alias |
Light color configuration for calendar color
scheme 7 |
.AFCalendarCategory7MediumColor:alias |
Medium color configuration for calendar color
scheme 7 |
.AFCalendarCategory7TextColor:alias |
Text color configuration for calendar color
scheme 7 |
.AFCalendarCategory8 |
Calendar color scheme 8 |
.AFCalendarCategory8LightColor:alias |
Light color configuration for calendar color
scheme 8 |
.AFCalendarCategory8MediumColor:alias |
Medium color configuration for calendar color
scheme 8 |
.AFCalendarCategory8TextColor:alias |
Text color configuration for calendar color
scheme 8 |
.AFCalendarCategory9 |
Calendar color scheme 9 |
.AFCalendarCategory9LightColor:alias |
Light color configuration for calendar color
scheme 9 |
.AFCalendarCategory9MediumColor:alias |
Medium color configuration for calendar color
scheme 9 |
.AFCalendarCategory9TextColor:alias |
Text color configuration for calendar color
scheme 9 |
.AFCalendarCategory10 |
Calendar color scheme 10 |
.AFCalendarCategory10LightColor:alias |
Light color configuration for calendar color
scheme 10 |
.AFCalendarCategory10MediumColor:alias |
Medium color configuration for calendar color
scheme 10 |
.AFCalendarCategory10TextColor:alias |
Text color configuration for calendar color
scheme 10 |
.AFCalendarCategory11 |
Calendar color scheme 11 |
.AFCalendarCategory11LightColor:alias |
Light color configuration for calendar color
scheme 11 |
.AFCalendarCategory11MediumColor:alias |
Medium color configuration for calendar color
scheme 11 |
.AFCalendarCategory11TextColor:alias |
Text color configuration for calendar color
scheme 11 |
.AFCalendarCategory12 |
Calendar color scheme 11 |
.AFCalendarCategory12LightColor:alias |
Light color configuration for calendar color
scheme 12 |
.AFCalendarCategory12MediumColor:alias |
Medium color configuration for calendar color
scheme 12 |
.AFCalendarCategory12TextColor:alias |
Text color configuration for calendar color
scheme 12 |
.AFShortDuration |
Marker selector to identify short (sub-24 hour)
duration
activities when they are rendered in the top region in day and week view. |
af|calendar |
The selector on the root dom element of the
component. |
af|calendar::view |
style the portion of the calendar
showing a particular view, meaning the
part of the calendar that does not
include the toolbar. |
af|calendar::toolbar-display-range |
style the date range string in the
toolbar |
af|calendar::toolbar-prev-next-button-style |
style the prev-next buttons in the
toolbar |
af|calendar::header-all-day-container |
day and week view: style area
containing header and all day activity
area |
af|calendar::all-day-container |
day and week view:style container for
the all day area |
af|calendar::time-activity-grid-container |
day and week view:style container for
the time column and timed activity
'grid' |
af|calendar::activity-grid-column |
day and week view: style container for
the activity grid column |
af|calendar::time-column |
day and week view: style time column |
af|calendar::time-cell |
day and week view: style cell in time
column |
af|calendar::time-text |
day and week view:style text in time
column |
af|calendar::hgrid-minor |
day and week view: style the minor
horizontal grid lines. |
af|calendar::hgrid-major |
day and week view: style the major
horizontal grid lines. |
af|calendar::day-of-week |
day and week view: style the day of the
week. |
af|calendar::time-activity-container |
day and week view: style for the
container of a time based activity |
af|calendar::time-activity-header |
day and week view: style for the header
portion of a time based activity |
af|calendar::time-activity-content |
day and week view:style for the content
portion of a time based activity |
af|calendar::time-activity-resize-grip |
day and week view: style for the resize
grip on a time based activity. The
background image can be styled to
change the grip image. |
af|calendar::time-activity-resize |
day and week view: style for the resize
grip on a time based activity. |
af|calendar::all-day-activity |
day, week and month: style on all day
activity container |
af|calendar::all-day-activity-text |
day, week and month: style on text in
all day activity |
af|calendar::duration-activity-text |
day and week: style on text in
short duration activity |
af|calendar::all-day-activity-time |
day, week and month: style on time in
'all day' activity. For skinning
purposes 'all day' can also apply to
multiday timed activities |
af|calendar::day |
day: style for the day root container |
af|calendar::day-date-header |
day: style for the day date header |
af|calendar::day-header-row |
day: style for the header area in day
view |
af|calendar::day-header-row-misc |
day: Provides styling for custom text in the day
view header. To style the custom header for today's
date you could do something like
"af|calendar::day-header-row:today
af|calendar::day-header-row-misc{background-color:blue}" |
af|calendar::week |
week: style for the week root container |
af|calendar::week-header-row |
week: style for the header row in week
view |
af|calendar::week-date-header |
week: style for the week date header |
af|calendar::week-header-cell |
week: style for the header cell in week
view. The 'today' pseudo-class is
applied to this style for today's date. |
af|calendar::week-header-cell-misc |
week: Provides styling for the custom text in the
week view header. To style the custom header
for today's date you could do something like
"af|calendar::week-header-cell:today
af|calendar::week-header-cell-misc{background-color:blue}" |
af|calendar::week-header-day-link |
week: style for the day links in the
header |
af|calendar::week-vgrid |
week: style for the vertical grid in
week |
af|calendar::month |
month: style for the month root
container |
af|calendar::month-header-row |
month: style for the month header row |
af|calendar::month-header-cell |
month: style for the cells in the month
header row. |
af|calendar::month-grid |
month: style for the month grid
container |
af|calendar::month-grid-cell |
month: style for a cell in the month
grid. |
af|calendar::month-grid-cell-date-header |
month: style for the month date header |
af|calendar::month-grid-cell-header |
month: style for the header area of a
month grid cell. To style the cell
header for today's date you could do
something like
"af|calendar::month-grid-cell:today
af|calendar::month-grid-cell-header{background-color:orange}" |
af|calendar::month-grid-cell-header-misc |
month: style for miscellaneous text
that can be added to the month grid
cell header using the calendar's
dateCustomizer attribute. |
af|calendar::month-grid-cell-header-day-link |
month: style for the month grid cell
header day of the month link |
af|calendar::month-overflow-link |
month: style for the overflow link
which appears if there are too many
activities to show. |
af|calendar::month-time-activity |
month: style applied to time activity
in month view. This is for single day
time activities. A mulitiday time
activity will not use this style,
because for skinning purposes a
multiday time activity uses 'all-day'
styles. |
af|calendar::list |
list: style for the list root container |
af|calendar::list-row |
list: style for a row in the list view |
af|calendar::list-cell |
list: style for a cell in the list view |
af|calendar::list-activity-icons-cell |
list: style for the cell holding activity icons
like recurring, reminder etc in the list view |
af|calendar::list-activity-provider-name-cell
|
list: style for the cell containing the provider
name in the list view |
af|calendar::list-day-of-week-date-header |
list: style for the list day of the week header
|
af|calendar::list-day-of-week-column |
list: style for the day of the week
column |
af|calendar::list-day-of-week-column-misc |
list: Provides styling for the custom text
beneath
the day of the week in the left list column.
To style the custom header for today's date you
could do something like "af|calendar::list-row:today
af|calendar::list-day-of-week-column-misc{background-color:blue}" |
af|calendar::list-day-of-month-column |
list: style for the day of the month
column |
af|calendar::list-time-column |
list: style for the time column |
af|calendar::list-day-of-month-link |
list: style for the day of the month
link |
af|calendar::list-title-link |
list: style for the title link |
af|calendar::list-swatch-container |
list: style for the calendar provider
color swatch |
af|calendar::list-date-separator |
list: style for the separator between
days |
Icon Selectors |
Description |
af|calendar::toolbar-day-icon |
Icon for the 'day' toolbar button. |
af|calendar::toolbar-day-hover-icon |
Icon for the 'day' toolbar button when
hovering. |
af|calendar::toolbar-day-active-icon |
Icon for the 'day' toolbar button when
active. |
af|calendar::toolbar-week-icon |
Icon for the 'week' toolbar button. |
af|calendar::toolbar-week-hover-icon |
Icon for the 'week' toolbar button when
hovering. |
af|calendar::toolbar-week-active-icon |
Icon for the 'week' toolbar button when
active. |
af|calendar::toolbar-month-icon |
Icon for the 'month' toolbar button. |
af|calendar::toolbar-month-hover-icon |
Icon for the 'month' toolbar button
when hovering. |
af|calendar::toolbar-month-active-icon |
Icon for the 'month' toolbar button
when active. |
af|calendar::toolbar-list-icon |
Icon for the 'list' toolbar button. |
af|calendar::toolbar-list-hover-icon |
Icon for the 'list' toolbar button when
hovering. |
af|calendar::toolbar-list-active-icon |
Icon for the 'list' toolbar button when
active. |
af|calendar::toolbar-prev-icon |
Icon for the 'previous' toolbar button
which moves the date back. |
af|calendar::toolbar-prev-hover-icon |
Hover icon for the 'previous' toolbar
button which moves the date back. |
af|calendar::toolbar-prev-active-icon |
Active icon for the 'previous' toolbar
button which moves the date back. |
af|calendar::toolbar-next-icon |
Icon for the 'next' toolbar button
which moves the date forward. |
af|calendar::toolbar-next-hover-icon |
Hover icon for the 'next' toolbar
button which moves the date forward. |
af|calendar::toolbar-next-active-icon |
Active icon for the 'next' toolbar
button which moves the date forward. |
af|calendar::reminder-light-icon |
Icon indicating an activity has a
reminder.This is the light version of
the icon, which will be placed on a
dark background. |
af|calendar::reminder-dark-icon |
Icon indicating an activity has a
reminder.This is the dark version of
the icon, which will be placed on a
light background. |
af|calendar::recurring-light-icon |
Icon indicating an activity is
recurring.This is the light version of
the icon, which will be placed on a
dark background. |
af|calendar::recurring-dark-icon |
Icon indicating an activity is
recurring.This is the dark version of
the icon, which will be placed on a
light background. |
af|calendar::recurring-change-light-icon |
Icon indicating an activity is no
longer part of a recurring series.This
is the light version of the icon, which
will be placed on a dark background. |
af|calendar::recurring-change-dark-icon |
Icon indicating an activity is no
longer part of a recurring series.This
is the dark version of the icon, which
will be placed on a light background. |
af|calendar::all-day-activity-prev-icon |
In day, week, and month views the icon
indicating an activity continues from a
previous date. |
af|calendar::all-day-activity-next-icon |
In day, week, and month views the icon
indicating an activity will continue to
a later date. |
af|calendar::list-activity-prev-icon |
In list view, the icon indicating an
activity continues from a previous date. |
af|calendar::list-activity-next-icon |
In list view, the icon indicating an
activity will continue to a later date. |
Style Selectors |
Description |
Conditions |
af|carousel |
Styles the root dom element of the component.
Typically a background-color, color, width
dimension, or non-percent height dimension
would be defined in this selector. |
af|carousel::view |
Styles the wrapper around all
carouselItem components. Typically a
border or shadow style would be defined
in this selector but only for the
one-by-one pseudo-class, never for the
circular pseudo-class. Includes the .AFCarouselItemBorder:alias for the one-by-one
pseudo-class. |
af|carousel::control-area |
Styles the wrapper around all
spin controls, item text, and spin info when the
control area is non-full. Typically a
border or shadow style and background color would be
defined in this selector but usually only for the
vertical pseudo-class in combination with small or compact. |
af|carousel::item |
Styles the wrapper around each
carouselItem component. Typically a
border or shadow style would be defined
in this selector but only for the
circular pseudo-class, never for the
one-by-one pseudo-class. Includes the .AFCarouselItemBorder:alias for the circular
pseudo-class. |
af|carousel::item-overlay |
Styles the element that covers every
carouselItem except for the current
item (since only the current item
should be interactive to the user;
clicking the overlay will cause the
carousel to spin to this particular
item). Typically a background-color
would be defined in this selector. |
af|carousel::item-text |
Styles the text for the current item in
the carousel. Typically a
background-color, color, font-family,
font-size, font-weight, border,
padding, or shadow style would be
defined in this selector. |
af|carousel::spin-info |
Styles the text that identifies the
current item number and the total
number of items that the carousel has
(if known). Typically a color,
font-family, font-size, font-weight
would be defined in this selector. The
pseudo-class :vertical is used when the
carousel orientation is set to vertical.
There is a pseudo-class for :small but not
:compact because this info is not present
when compact. |
af|carousel::spin-bar |
Styles the bar that appears behind the
spin thumb, representing the list of
items in the carousel. Typically a
background-image, background-repeat,
background-position would be defined in
this selector. For a horizontal
orientation, a non-auto left, right,
and height and auto top, bottom, and
width would be defined. For a vertical
orientation, a non-auto top, bottom,
and width and auto left, right, and
width would be defined to configure the
sizing of the bar. These dimensions
should correspond to those of the
previous and next icons so they appear
adjacent to the bar. The pseudo-class
:vertical is used when the carousel
orientation is set to vertical and
:disabled is used when the carousel is
disabled. |
af|carousel::spin-h-previous-icon-style |
Style of the horizontally-oriented
previous button icon used with the
carousel component. This icon is
intended to appear next to the spin
bar. The selector icon is specified as
a background-image in this key. For the
:ltr pseudo-class, a right style would
be defined in this selector. For the
:rtl pseudo-class, a left style would
be defined in this selector. |
af|carousel::spin-h-next-icon-style |
Style of the horizontally-oriented next
button icon used with the carousel
component. This icon is intended to
appear next to the spin bar. The
selector icon is specified as a
background-image in this key. For the
:ltr pseudo-class, a left style would
be defined in this selector. For the
:rtl pseudo-class, a right style would
be defined in this selector. |
af|carousel::spin-h-thumb-icon-style |
Style of the horizontally-oriented spin
thumb button icon used with the
carousel component. This icon is used
for identifying where the current item
resides along the spin slider bar. The
selector icon is specified as a
background-image, width, and height in
this key. |
af|carousel::spin-v-previous-icon-style |
Style of the vertically-oriented
previous button icon used with the
carousel component. This icon is
intended to appear next to the spin
bar. The selector icon is specified as
a background-image in this key. A
bottom style would be defined in this
selector. |
af|carousel::spin-v-next-icon-style |
Style of the vertically-oriented next
button icon used with the carousel
component. This icon is intended to
appear next to the spin bar. The
selector icon is specified as a
background-image in this key. A top
style would be defined in this selector. |
af|carousel::spin-v-thumb-icon-style |
Style of the vertically-oriented spin
thumb button icon used with the
carousel component. This icon is used
for identifying where the current item
resides along the spin slider bar. The
selector icon is specified as a
background-image, width, and height in
this key. |
af|carousel::status-icon-style |
This style is for the element that contains the
status-icon
(if used). This typically defines a background-image to an
alpha-transparent image that lets a binary-transparent
animated status-icon image blend well on any background
when these 2 images are stacked. Also typically a width
and height are defined for the dimensions of this
container. It is suggested to use the
.AFStatusIconStyle:alias rule ref in this
selector. |
af|carousel::status-message |
Styles the status message that shows up
when the user spins the carousel.
Includes the
.AFDataCollectionStatusMessage:alias. |
.AFCarouselItemBorder:alias |
Styles the border or shadows around the carousel
item or view (depending on how the items are
displayed). |
Style Selectors |
Description |
Conditions |
af|chooseDate |
The selector on the root dom element of the
component. |
af|chooseDate::ampm |
Style on the root element of the AM/PM
radio buttons within chooseDate. |
af|chooseDate::ampm-content |
The appearance of the AM/PM radio
buttons within chooseDate. For example,
this can be set to a different
font-size. |
af|chooseDate::ampm-content-input |
The appearance of an individual AM/PM radio
button within chooseDate. Used mostly for alignment. |
af|chooseDate::ampm-item-text |
Style on the item text associated with
the AM/PM radio buttons. |
af|chooseDate::choice-list |
Style on the root element of the
dropdown month selector and the
dropdown timezone selector. |
af|chooseDate::choice-list-content |
Styles the appearance of the dropdown
month selector and the dropdown
timezone selector. For example, this
can be set to a different font size. |
af|chooseDate::choice-list-dropdown |
Styles the background of the dropdown
icon. |
af|chooseDate::choice-list-dropdown-icon-style
|
Styles the dropdown icon for the month
selector and the timezone selector. The
icon is specified as a background-image
in this key. To override the default
icon, set -tr-inhibit: background-image
in the dropdown-icon-style and define
the override icon for the
dropdown-icon. Includes
.AFClickableImageAnchor:alias |
af|chooseDate::calendar-grid |
Styles the appearance of the date picker grid.
|
af|chooseDate::days-row |
Styles the appearance of the dates
within the calendar grid. Individual
day types (previous or next month,
selected, regular) can override the
properties defined here. For example,
this can be set to a uniform font-size
for all the days. |
af|chooseDate::decrement-cell |
Styles the decrement-cell of the
inputNumberSpinbox
internal child component used for changing the year. |
af|chooseDate::increment-cell |
Styles the increment-cell of the
inputNumberSpinbox
internal child component used for changing the year. |
af|chooseDate::month-year-row |
Styles the appearance of the row
containing the Month and Year selectors
above the calendar grid. For example,
this can be used to set a background
color or height. |
af|chooseDate::next-month-arrow |
Styles the next-month icon. You
can put a background-image here. Tip:
If you skin the background-image, you
may also want to skin it for :hover and
:active. |
af|chooseDate::next-month-arrow-cell |
Styles the next-month icon cell. This cell is
commonly
used for gradient styles for buttons that have gradients.
|
af|chooseDate::next-month-day |
Styles the appearance of the table cell
for dates in the next month. For
example, you can add background color
or border to the cell. |
af|chooseDate::prev-month-arrow |
Styles the previous-month icon.
You can put a background-image here.
Tip: If you skin the background-image,
you may also want to skin it for :hover
and :active. |
af|chooseDate::prev-month-arrow-cell |
Styles the previous-month icon cell.
cell. This cell is commonly used for
gradient styles for buttons that have gradients. |
af|chooseDate::prev-month-day |
Styles the appearance of the table cell
for dates in the previous month. For
example, you can add background color
or border to the cell. |
af|chooseDate::regular-day |
Styles the appearance of the table cell
for dates in the current month. For
example, you can add background color
or border to the cell. |
af|chooseDate::spinbox |
The root style for spinboxes within
chooseDate (year, hours, minutes,
seconds). |
af|chooseDate::spinbox-content |
The appearance of the spinboxes within
chooseDate (year, hours, minutes,
seconds). For example, this can be set
to a different font-size. |
af|chooseDate::spinbox-incrementor-icon-style
|
Uses background-image to set the
increment image for the spinboxes
within chooseDate (year, hours,
minutes, seconds). If you want to use
text instead of a background-image, you
can use
af|chooseDate::spinbox-incrementor-icon
{content:"Text"}. |
af|chooseDate::spinbox-decrementor-icon-style
|
Uses background-image to set the
decrement image for the spinboxes
within chooseDate (year, hours,
minutes, seconds). If you want to use
text instead of a background-image, you
can use
af|chooseDate::spinbox-decrementor-icon
{content:"Text"}. |
af|chooseDate::time-selectors-row |
Styles the appearance of the row
containing the Hour, Minute, Second
time selectors. For example, this can
be used to set a background color or
height. |
af|chooseDate::timezone-selectors-row |
Styles the appearance of the row
containing the Timezone dropdown
selector. For example, this can be used
to set a height. |
af|chooseDate::today |
Styles the appearance of the table cell
for the current date (today). For
example, you can add background color
or border to the cell. |
af|chooseDate::week-header-cell |
The appearance of individual cells in
the weekday header. For example, this
can be set to have a different width or
padding. |
af|chooseDate::week-header-row |
The appearance of the weekday headers
of the calendar. For example, this can
be set to a different font-size or
background color. |
af|chooseDate::spinwheel-time-selectors-row |
Styles the appearance of the
spinwheel time selectors row |
af|chooseDate::footer-button-date |
Styles the appearance of the
select date toggle button in the footer of the picker dialog |
af|chooseDate::footer-button-time |
Styles the appearance of the
select time toggle button in the footer of the picker dialog |
af|chooseDate::now-row |
Styles the appearance of the
today/now button in the picker dialog |
af|chooseDate::navigator-row |
Styles the appearance of the
year/month selection rows in the navigation panel |
af|chooseDate::navigator-cell |
Styles the appearance of the
year/month selection cells in the navigation panel |
af|chooseDate::time-separator |
Styles the appearance of the time
separator character ':' shown between
the hours/minutes/seconds display. |
af|chooseDate::year-selector-cell |
Styles the cell that contains the spinbox that is
used
to select the year. |
Style Selectors |
Description |
Conditions |
af|column |
This is the base selector for the component. |
af|column::column-header-cell |
Styles the column header cell. This
includes .AFTableCellPadding:alias and
.AFTableCellHeaderBorder:alias. |
af|column::column-header-cell-content |
Styles the content in a header cell. |
af|column::column-header-table |
The table(s) used for the column headers.
This selector can be used to provide a single gradient background for all table
column headers. |
af|column::select-all-header |
Styles the column header cell used to do select
all for a table with multiple
row selection enabled. |
af|column::row-column-header-cell |
Styles the column header cell that is a row
header as well. |
af|column::column-footer-cell |
Styles the column footer cell. This
includes .AFTableCellPadding:alias and
.AFTableCellHeaderBorder:alias. |
af|column::context |
Placed around the context facet
content. A compound selector like
"af|column::context af|contextInfo" can
be used to control padding so that the
icon doesn't overlap the column content |
af|column::row-header-cell |
Styles the row header cell that has
current focus. This includes
.AFTableCellPadding:alias and
.AFTableCellHeaderBorder:alias.
To style a highlighted row's header cell,
use "af|table::data-row:highlighted af|column::row-header-cell". |
af|column::data-cell |
Styles a column's data cell that is not
banded. To style a selected row's data
cell, use "af|table::data-row:selected
af|column::data-cell." To style a
selected column's non-banded data cell,
use "af|column::data-cell:selected".
This includes .AFTableCellPadding:alias
and .AFTableCellDataBorder:alias. To style a highlighted row's data cell,
use "af|table::data-row:highlighted af|column::data-cell". To
style a data cell as a subtotal cell,
use
"af|column::data-cell.AFTableCellSubtotal"
in your skin definition and
styleClass="AFTableCellSubtotal" in the
tag (typically this value would come
from an EL expression since not every
cell would be a subtotal cell). |
af|column::banded-data-cell |
Styles a column's data cell that is
banded. To style a selected row's
banded data cell, use
"af|table::data-row:selected
af|column::banded-data-cell". This
includes .AFTableCellPadding:alias and
.AFTableCellDataBorder:alias.
To style a highlighted column's banded data cell,
use "af|table::data-row:highlighted af|column::banded-data-cell". |
af|column::detail-cell |
Styles a cell representing the state
(disclosed/undisclosed) of the detail
stamp for a given row. This includes
.AFTableCellPadding:alias and
.AFTableCellHeaderBorder:alias. |
af|column::detail-column-header-cell |
Styles a column header cell above the
cells representing the state
(disclosed/undisclosed) of the detail
stamp. This includes
.AFTableCellPadding:alias and
.AFTableCellHeaderBorder:alias. |
af|column::dynamic-help-icon-style |
Styles the dynamic help icon. By
default the dynamic-help-icon is null,
and this style has a background-image
that you can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|column::filter-clear-all-icon-style |
Styles the icon associated with clearing the
filter fields,
when displayed with the -tr-display-filter-clear-icon directive for tables.
The image is set as a background-image that you can override.
Supports :hover and :active pseudo-classes.
|
af|column::column-filter-cell |
Styles a column's filter cell. |
af|column::sort-ascending-icon-style |
Styles the icon used for the sort
ascending indicator. The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
sort-ascending-icon-style and define
the icon for the sort-ascending-icon.
Tip: If you skin the background-image,
you may also want to skin it for :hover
and :active. |
af|column::sort-descending-icon-style |
Styles the icon used for the sort
descending indicator. The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
sort-descending-icon-style and define
the override icon for the
sort-descending-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover and :active. |
af|column::sorted-ascending-icon-style |
Styles the icon used for the sorted
ascending indicator. The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
sorted-ascending-icon-style and define
the override icon for the
sorted-ascending-icon. |
af|column::sorted-descending-icon-style |
Style of the icon used for the sorted
descending indicator. The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
sorted-descending-icon-style and define
the override icon for the
sorted-descending-icon. |
af|column::filter-clear-all-icon-style |
Styles the icon used for the clearing all filter
fields
in the table filter row. The icon is specified as a
background-image in this key. To use text or an img
element instead of a background-image, set
-tr-inhibit: background-image in the filter-clear-all-icon-style
and define the icon for the filter-clear-all-icon. |
Style Selectors |
Description |
Conditions |
af|commandMenuItem |
Selector that renders on the root dom element
of the component. |
af|commandMenuItem::bar-item |
Style applied to a commandMenuItem
present on a menubar. The
commandMenuItem is further defined by 2
major sections, the
"bar-item-icon-style" which contains
the optional icon attribute and the
"bar-item-text" which contains the menu
text. |
af|commandMenuItem::bar-item-icon-style |
Style applied to a bar item's icon
container, which is the part of the bar
item before its text. The icon is
specified as an optional attribute on
the commandMenuItem. |
af|commandMenuItem::bar-item-radio-icon-style
|
Style on the radio icon for a radio
type command menu item shown on a menu
bar. The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
bar-item-radio-icon-style and define
the icon for the bar-item-radio-icon
key. |
af|commandMenuItem::bar-item-check-icon-style
|
Style on the check icon for a check
type command menu item shown on a menu
bar. The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
bar-item-check-icon-style and define
the icon for the bar-item-check-icon
key. |
af|commandMenuItem::bar-item-access-key |
Style on the access key character of a
commandMenuItem, as shown on the menu
bar. Includes the
.AFFormAccessKeyStyle:alias. |
af|commandMenuItem::bar-item-text |
Style applied to the commandMenuItem's
text, as shown on the menu bar. |
af|commandMenuItem::bar-item-antonym-text-default
|
Style applied to the text of an antonym
type commandMenuItem in its default
state, as shown on the menu bar. |
af|commandMenuItem::bar-item-antonym-text-selected |
Style applied to the selected text of
an antonym type commandMenuItem in its
selected state, as shown on the menu
bar. |
af|commandMenuItem::menu-item |
Style applied to a commandMenuItem
present on a menu. The menu item is
further defined by 4 major sections,
the "menu-item-icon-style" which
contains the optional icon attribute,
the "menu-item-text" which contains the
menu item text, the
"menu-item-accelerator" which contains
the menu item accelerator, and the
"menu-item-open-indicator" which is the
empty space corresponding to where a
submenu's open indicator appears. |
af|commandMenuItem::menu-item-icon-style |
Style applied to a commandMenuItem's
icon container, which is the part of
the commandMenuItem before its text.
The icon is specified as an optional
attribute on the commandMenuItem. |
af|commandMenuItem::menu-item-access-key |
Style on the access key character of a
commandMenuItem present on a menu.
Includes the
.AFFormAccessKeyStyle:alias. |
af|commandMenuItem::menu-item-text |
Style applied to the commandMenuItem's
text, as shown inside a menu. For an
antonym type commandMenuItem, the
menu-item-antonym-text-default and
menu-item-antonym-text-selected keys
are used instead. |
af|commandMenuItem::menu-item-antonym-text-default |
Style applied to the text of an antonym
type commandMenuItem (shown inside a
menu) in its default state. |
af|commandMenuItem::menu-item-antonym-text-selected |
Style applied to the selected text of
an antonym type commandMenuItem (shown
inside a menu) in its selected state. |
af|commandMenuItem::menu-item-accelerator |
Style on the part of the
commandMenuItem (shown inside a menu)
containing its accelerator keyboard
shortcut. |
af|commandMenuItem::menu-item-open-indicator |
Style on the part of the
commandMenuItem (shown inside a menu)
where an open icon would go. Because
commandMenuItems do not open into
nested submenus, this is an empty
section at the end of the menu item. |
af|commandMenuItem::menu-item-radio-icon-style
|
Style on the radio icon for a radio
type command menu item shown inside a
menu. The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
menu-item-radio-icon-style and define
the icon for the menu-item-radio-icon
key. |
af|commandMenuItem::menu-item-check-icon-style
|
Style on the check icon for a check
type command menu item shown inside a
menu. The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
menu-item-check-icon-style and define
the icon for the menu-item-check-icon
key. |
Style Selectors |
Description |
Conditions |
af|dialog |
Selector that renders on the root dom element
of the component. |
af|dialog::resize-ghost |
The selector applied to the element
temporarily created to animate a mouse
drag resize. The element is a div with
absolute positioning that floats above
the dialog getting resized. The border,
background color and opacity are
attributes that a custom skin might
want to adjust. |
af|dialog::main |
Selector for the main element of this
dialog. This selector is used in
conjunction with the pseudo-class :drag
on the root element and af|dialog::main
to achieve an drag look for the dialog. |
af|dialog::inactive-background |
Selector for displaying the background
when the dialog is not the active
window. This selector is used in
conjunction with the pseudo-class
:inactive on the root element and
af|dialog::main to achieve an inactive
look for the dialog. For e.g.
"af|dialog::inactive-background{background-color:#FFFFFF;}
af|dialog:inactive
af|dialog::main{opacity:0.5;} @agent ie
{af|dialog:inactive
af|dialog::main{filter:alpha(opacity:50);}"
sets the background to white and lets
it bleed into the dialog by setting its
opacity to 50%. |
af|dialog::header-start |
The style for the starting cell of the
header. Generally this is the
decoration on the left side of the
screen and can be used to create
rounded edges. |
af|dialog::header |
Styles the "header" element. This
element surrounds the header text, icon
and close regions. |
af|dialog::header-end |
The style for the ending cell of the
header. Generally this is the
decoration on the right side of the
screen and can be used to create
rounded edges. |
af|dialog::footer-start |
|
af|dialog::footer |
The style for the center cell of the
footer. |
af|dialog::footer-end |
The style for the ending cell of the
footer. Generally this is the
decoration on the right side of the
screen and can be used to create
rounded edges. |
af|dialog::content-start |
The style for the starting of the
content. This will be located directly
below the af|dialog::header-start key,
above the af|dialog::footer-start key
and before the af|dialog::content key. |
af|dialog::content |
The style for the content region of the
dialog. This is the area where the
components children will be rendered.
It is located directly below the
af|dialog::header key, above the
af|dialog::footer and after the
af|dialog::content-start key. |
af|dialog::content-center |
The center of the dialog is marked with
this style. It is contained in the
af|dialog::content node. Padding and
color can be adjusted with this style
but overflow is managed
programmatically. Use of this style is
conditional on property values
stretchChildren=first or resize=on. |
af|dialog::content-end |
The style for the ending of the
content. This will be located directly
below the af|dialog::header-end key,
above the af|dialog::footer-end key and
after the af|dialog::content key. |
af|dialog::resize-icon-region |
Styles the region around the resize
icon in af|dialog::footer and aligned
to end in LTR. It can be used to set
paddings, margins around the resize
icon. |
af|dialog::resize-icon-style |
The style for the resize icon located
in the af|dialog::resize-icon-region. |
af|dialog::icon-region |
Styles the region around the window
icon in af|dialog::header and aligned
to start. It can be used to set
paddings, margins around the title icon. |
af|dialog::title |
Styles the title of the dialog. |
af|dialog::help-link-container |
A style containing the "dynamic help"
for the window. It will only be
displayed if assigned a helpTopicId and
will be positioned after the
af|dialog::title and before the
af|dialog::close-icon-style/af|dialog::pin-icon-style
within af|dialog::header. |
af|dialog::dynamic-help-icon-style |
Style the dynamic help icon located
within the help-link-container. By
default the dynamic-help-icon is null,
and this style has a background-image
that you can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|dialog::close-icon-region |
Styles the region around
af|dialog::close-icon-style in
af|dialog::header and aligned to end.
It can be used to set paddings, margins
around the title icon. |
af|dialog::close-icon-style |
Style on the dialog's close icon. The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the close-icon-style and define the
icon for the close-icon key. |
af|dialog::pin-icon-region |
Styles the region around
af|dialog::pin-icon-style in
af|dialog::header and aligned to end.
It can be used to set paddings, margins
around the title icon. |
af|dialog::pin-icon-style |
Style on the dialog's pin icon. The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the pin-icon-style and define the
icon for the pin-icon key. |
af|dialog::footer-button |
Styles the root element of the button in the
footer of the
dialog. Note that this skin selector is only present when
the skin selector -tr-button-type is set to 'old', and the
footer buttons are rendered as af:commandButtons. When the
-tr-button-type is set to 'unified', the footer buttons are
rendered as af:buttons and have the default stylings for
af:button applied, so that footer buttons have the same
look and feel as all other buttons. Please note that for
commandButtons :active and :focus
pseudo-classes do not work in IE7. IE7
also does not allow disabled af:commandButtons to
be styled. It is recommended that you
use the .AFButton*:alias selectors as a
shortcut to skin all button components
the same. Tip: If you skin the
background-image, you may also want to
skin it for :hover, :active and :focus. |
af|dialog::footer-button-affirmative |
Styles the root element of the "Yes" and "OK"
buttons
in the footer of the dialog. These buttons are dependent
on the dialog components type property.
Please note that for commandButtons :active and :focus
pseudo-classes do not work in IE7. IE7
also does not allow disabled af:commandButtons to
be styled. It is recommended that you
use the .AFButton*:alias selectors as a
shortcut to skin all button components
the same. Tip: If you skin the
background-image, you may also want to
skin it for :hover, :active and :focus. |
af|dialog::footer-button-cancel |
Styles the root element of the "Cancel" button
in the footer of the dialog. This button is dependent
on the dialog components type property.
Please note that for commandButtons :active and :focus
pseudo-classes do not work in IE7. IE7
also does not allow disabled af:commandButtons to
be styled. It is recommended that you
use the .AFButton*:alias selectors as a
shortcut to skin all button components
the same. Tip: If you skin the
background-image, you may also want to
skin it for :hover, :active and :focus. |
af|dialog::footer-button-no |
Styles the root element of the "No" button
in the footer of the dialog. This button is dependent
on the dialog components type property.
Please note that for commandButtons :active and :focus
pseudo-classes do not work in IE7. IE7
also does not allow disabled af:commandButtons to
be styled. It is recommended that you
use the .AFButton*:alias selectors as a
shortcut to skin all button components
the same. Tip: If you skin the
background-image, you may also want to
skin it for :hover, :active and :focus. |
af|dialog::footer-button-icon-style |
When -tr-button-type is set to 'old', styles the
footer
commandButton icon, if there is an icon on the
commandButton. |
af|dialog::footer-button-access-key |
When -tr-button-type is set to 'old', styles the
access
key text of the footer commandButton. This includes the
.AFButtonAccessKeyStyle:alias style. |
Style Selectors |
Description |
Conditions |
af|inputFile |
Style on the root element of the
af:inputFile
component. |
af|inputFile::access-key |
Style on the access key for the label
of the af:inputFile component. For
example, underline the access key.
Includes .AFFormAccessKeyStyle:alias. |
af|inputFile::content |
Style on the content of the
af:inputFile component. |
af|inputFile::multiple-content |
Style on the content of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-content
|
Style on the content of the upload
area of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-content-container |
Style on the content container of the
upload area of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-pane
|
Style on the upload pane of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-filelist |
Style on the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-dropzone |
Style on the drop zone of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-drag
|
Style on the drag color of the drop
zone of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-filename |
Style on the filenames in the upload
file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-filesize |
Style on the file sizes in the upload
file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progress |
Style on the upload progress bar area
in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progress-done |
Style on the upload progress done
text in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progress-failed |
Style on the upload progress failed
text in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-action
|
Style on the upload action area
(cancel, retry and delete) in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progressbar-determinate |
Style on the determinate upload
progress bar in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progressbar-determinate-start-label |
Style on the determinate upload
progress bar start label in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progressbar-determinate-end-label |
Style on the determinate upload
progress bar end label in the upload file list of the
af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-toolbar
|
Style on the upload toolbar (which
contains the Upload/Stop Uploading button) of the
af:inputFile component in multiple file mode. |
af|inputFile::text |
Style on the link text on the
af:inputFile component. |
af|inputFile::dynamic-help-icon-style
|
Style the dynamic help icon. By
default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|inputFile::label |
Style on the label of the
af:inputFile
component. This includes .AFLabel:alias
style selector. :disabled::label
includes .AFLabelDisabled:alias. |
af|inputFile::multiple-upload-cancel-button |
Icon for the upload cancel button of
the af:inputFile
component in multiple file mode. |
af|inputFile::multiple-upload-retry-button |
Icon for the upload retry button of
the af:inputFile
component in multiple file mode. |
af|inputFile::multiple-upload-delete-button |
Icon for the upload delete button of
the af:inputFile
component in multiple file mode. |
Style Selectors |
Description |
Conditions |
af|inputNumberSlider |
Style on the root element of the
component. |
af|inputNumberSlider::access-key |
Style on the access key for the label
of the af:inputNumberSlider component.
For example, underline the access key.
Includes .AFFormAccessKeyStyle:alias. |
af|inputNumberSlider::content |
Style on the content of the
component.
Common properties are height and border
colors. |
af|inputNumberSlider::dynamic-help-icon-style |
Style the dynamic help icon. By
default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|inputNumberSlider::label |
Style on the label of the
af:inputNumberSlider component. This
includes .AFLabel:alias style selector.
:disabled::label includes
.AFLabelDisabled:alias. |
af|inputNumberSlider::plus-icon-style
|
Uses background-image to set the
increment image (+). If you want to use
text instead of a background-image, you
can use af|inputNumberSlider::plus-icon
{content:"Text"}. |
af|inputNumberSlider::minus-icon-style |
Uses background-image to set the
decrement image (-). If you want to use
text instead of a background-image, you
can use
af|inputNumberSlider::minus-icon
{content:"Text"}. |
af|inputNumberSlider::play-icon-style
|
Uses background-image to set the
play button image. If you want to use
text instead of a background-image, you
can use af|inputNumberSlider::play-icon
{content:"Text"}. |
af|inputNumberSlider::pause-icon-style |
Uses background-image to set the
pause button image. If you want to use
text instead of a background-image, you
can use af|inputNumberSlider::pause-icon
{content:"Text"}. |
af|inputNumberSlider::bar |
Styles the bar size of the slider.
|
af|inputNumberSlider::bar-outer-border |
Styles the outer border. This
combined
with the
af|inputNumberSlider::bar-inner-border
gives the bar area a sunken effect |
af|inputNumberSlider::bar-inner-border |
Styles the inner border. This
combined
with the
af|inputNumberSlider::bar-outer-border
gives the bar area a sunken effect |
af|inputNumberSlider::thumb-icon-style |
Uses background-image to show the
currently selected value in the slider.
If you want to use text instead of a
background-image, you can use
af|inputNumberSlider::thumb-icon
{content:"Text"}. |
af|inputNumberSlider::thumb-value-line |
Styles the line drawn from the thumb
to
the displayed value of the current
thumb position. |
af|inputNumberSlider::thumb-value
|
Styles the value of the current thumb
position. |
af|inputNumberSlider::ticks |
Styles the basic tick marks for the
slider. This is used to set the
positioning of the ticks. |
af|inputNumberSlider::major-tick |
Styles the major tick marks for the
slider. This tick is normally longer
than the minor ticks marks. The major
tick marks position are defined by the
majorIncrement attribute of the
component. |
af|inputNumberSlider::minor-tick |
Styles the minor tick marks for the
slider. The minor tick marks position
are defined by the minorIncrement
attribute on the component. If this
attribute is not defined these ticks
are not rendered. |
af|inputNumberSlider::zero-tick |
Styles the zero tick marks for the
slider. This is only rendered if the
slider has a range that crosses the
zero point. |
af|inputNumberSlider::tick-value |
Styles the value for major tick marks
for the slider. |
af|inputNumberSlider::tick-value-zero
|
Styles the value of the zero tick
mark
for the slider. This is only rendered
if the slider has a range that crosses
the zero point. |
Style Selectors |
Description |
Conditions |
af|inputRangeSlider |
Style on the root element of the
component. |
af|inputRangeSlider::access-key |
Style on the access key for the label
of the af:inputRangeSlider component.
For example, underline the access key.
Includes .AFFormAccessKeyStyle:alias. |
af|inputRangeSlider::content |
Style on the content of the
component.
Common properties are height and border
colors. |
af|inputRangeSlider::dynamic-help-icon-style |
Style the dynamic help icon. By
default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|inputRangeSlider::label |
Style on the label of the
af:inputRangeSlider component. This
includes .AFLabel:alias style selector.
:disabled::label includes
.AFLabelDisabled:alias. |
af|inputRangeSlider::plus-icon-style
|
Uses background-image to set the
increment image (+). If you want to use
text instead of a background-image, you
can use af|inputRangeSlider::plus-icon
{content:"Text"}. |
af|inputRangeSlider::minus-icon-style
|
Uses background-image to set the
decrement image (-). If you want to use
text instead of a background-image, you
can use af|inputRangeSlider::minus-icon
{content:"Text"}. |
af|inputRangeSlider::play-icon-style
|
Uses background-image to set the
play button image. If you want to use
text instead of a background-image, you
can use af|inputNumberSlider::play-icon
{content:"Text"}. |
af|inputRangeSlider::pause-icon-style
|
Uses background-image to set the
pause button image. If you want to use
text instead of a background-image, you
can use af|inputNumberSlider::pause-icon
{content:"Text"}. |
af|inputRangeSlider::bar |
Styles the bar size of the slider.
|
af|inputRangeSlider::bar-outer-border
|
Styles the outer border. This
combined
with the
af|inputRangeSlider::bar-inner-border
gives the bar area a sunken effect. |
af|inputRangeSlider::bar-inner-border
|
Styles the inner border. This
combined
with the
af|inputRangeSlider::bar-outer-border
gives the bar area a sunken effect. |
af|inputRangeSlider::highlight |
Styles the region contained within
the
bar between the minimum and maximum
thumb values of the current range. |
af|inputRangeSlider::range |
Styles the portion of the bar that
is between the two range values. |
af|inputRangeSlider::thumb-icon-style
|
Uses background-image to show the
currently selected value in the slider.
If you want to use text instead of a
background-image, you can use
af|inputNumberSlider::thumb-icon
{content:"Text"}. Two of these will be
rendered for the range to represent the
minimum and maximum value of the Range. |
af|inputRangeSlider::thumb-value-line
|
Styles the line drawn from the thumb
to
the displayed value of the current
minimum and maximum thumb positions. |
af|inputRangeSlider::thumb-value |
Styles the value of the current
minimum
and maximum thumb positions. |
af|inputRangeSlider::ticks |
Styles the basic tick marks for the
slider. This is used to set the
positioning of the ticks. |
af|inputRangeSlider::major-tick |
Styles the major tick marks for the
slider. This tick is normally longer
than the minor ticks marks. The major
tick marks position are defined by the
majotIncreament attribute of the
component. |
af|inputRangeSlider::minor-tick |
Styles the minor tick marks for the
slider. The minor tick marks position
are defined by the minorIncrement
attribute on the component. If this
attribute is not defined these ticks
are not rendered. |
af|inputRangeSlider::zero-tick |
Styles the zero tick marks for the
slider. This is only rendered if the
slider has a range that crosses the
zero point. |
af|inputRangeSlider::tick-value |
Styles the value for major tick marks
for the slider. |
af|inputRangeSlider::tick-value-zero
|
Styles the value of the zero tick
mark
for the slider. This is only rendered
if the slider has a range that crosses
the zero point. |
Style Selectors |
Description |
Conditions |
af|inputSearch |
Style on the root element of the af:inputSearch component.
|
af|inputSearch::access-key |
Style on the access key for the label
of the af:inputSearch component. For
example, underline the access key.
Includes .AFFormAccessKeyStyle:alias. |
af|inputSearch::content |
Style on the content of the
af:inputSearch component. You can set the
width of the content piece that will be
used when the columns attribute on
af:inputSearch is not set. |
af|inputSearch::context-content |
Style that goes around both the
context
facet and the content. Can be used to
control the content padding when the
context facet is set, For
example:af|inputSearch::context-content
af|inputSearch::content{padding-left:7px;} |
af|inputSearch::dynamic-help-icon-style |
Style the dynamic help icon. By
default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|inputSearch::label |
Style on the label of the
af:inputSearch
component. This includes .AFLabel:alias
style selector. :disabled::label
includes .AFLabelDisabled:alias. |
af|inputSearch::button |
Style on the associated button |
af|inputSearch::selections-button
|
Style on the selected list count
button |
af|inputSearch::input-container |
Style on the container of content and the associated button
|
af|inputSearch::list-items-container
|
Style on the suggestions popup
content if the
suggestions display mode is of type list |
af|inputSearch::loading-indicator
|
Style on the loading indicator |
af|inputSearch::server-filtering-indicator |
Style on the loading indicator shown
when the client filtered results
are displayed and server filtering is still in progress |
af|inputSearch::no-suggestions-message |
Style on the no suggestions message
|
af|inputSearch::row-items-container
|
Style on the suggestions popup
content if the
suggestions display mode is of type table |
af|inputSearch::suggestion-list-item
|
Style on the each suggestion item if
the
suggestions display mode is of type list |
af|inputSearch::suggestion-row-header
|
Style on the header of the
suggestions list if the
suggestions display mode is of type table |
af|inputSearch::suggestion-row-item
|
Style on the each suggestion item if
the
suggestions display mode is of type table |
af|inputSearch::suggestion-item-matching-text |
Style on the matched portion of the
suggestion
item's text |
af|inputSearch::suggestions-container
|
Style on the suggestions popup |
.AFTltWrapper |
The styleclass around the element
wrapped around the developer provided template.
Currently used only in multi-select mode. |
.AFTltSideAlign |
Styleclass to align two elements
side-by-sde in list templating |
.AFTltCheckboxCntnr |
Styleclass on wrapper element of
checkbox in multi-selection mode |
.AFTltCheckbox |
Styleclass on native checkbox element
in multi-selection mode |
.AFTltCheckbox |
Styleclass on native checkbox element
in multi-selection mode |
.AFTltVirtualCheckbox |
Styleclass on skinned checkbox in
multi-selection mode |
Style Selectors |
Description |
Conditions |
af|menu |
Selector that renders on the root dom
element
of the component. Menu supports further styling
with the :disabled, :highlighted and :depressed
pseudo-classes. The part of the menu that
appears on the menu bar or in a menu (as a
submenu) is not only highlighted on mouseover,
but also when it is selected with the keyboard,
so we therefore use the :highlighted and
:depressed pseudo-classes over the CSS-2.1
:hover, :active and :disabled style classes. |
af|menu::bar-item |
Style applied to the menu bar item
that
is shown on a menubar (when a menu is
located on a menubar). The menu bar
item is further defined by 3 major
sections, the "bar-item-icon-style"
which contains the optional icon
attribute, the "bar-item-text" which
contains the menu text, and the
"bar-item-open-icon-style" which
contains the icon that opens the menu
itself. |
af|menu::bar-item-icon-style |
Style applied to a menu bar item's
icon
container, which is the part of the
menu bar item before its text. The icon
is specified as an optional attribute
on the menu. |
af|menu::bar-item-access-key |
Style on the access key character of
a
menu, as shown on the menu bar.
Includes the
.AFFormAccessKeyStyle:alias. |
af|menu::bar-item-text |
Style applied to the menu's text, as
shown on the menu bar. |
af|menu::bar-item-open-icon-style
|
For menus that appear in a menubar,
this is the style on the menu's open
icon (i.e., the drop down menu icon).
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
bar-item-open-icon-style and define the
icon for the bar-item-open-icon key. |
af|menu::child-container |
Style applied to the menu container
that appears when you open a menu. The
menu container contains the child
contents, called menu items, of the
menu. These menu items can be either
additional menus, called submenus,
commandMenuItems, or goMenuItems. |
af|menu::scroll-content |
Style applied to the menu scroll
container. |
af|menu::scroll-up-cell |
Style on the cell that contains the
scroll up icon. This cell is only
present in a menu when there are more
menu items present than the menu's
maximum item setting. |
af|menu::scroll-up-icon-style |
Style on the scroll up icon that is
present in a menu when there are more
menu items present than the menu's
maximum item setting. The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
scroll-up-icon-style and define the
icon for the scroll-up-icon key. |
af|menu::scroll-down-cell |
Style on the cell that contains the
scroll down icon. This cell is only
present in a menu when there are more
menu items present than the menu's
maximum item setting. |
af|menu::scroll-down-icon-style |
Style on the scroll down icon that is
present in a menu when there are more
menu items present than the menu's
maximum item setting. The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
scroll-down-icon-style and define the
icon for the scroll-down-icon key. |
af|menu::submenu |
Style applied to the submenu item
inside a menu (when a menu is located
inside another menu). The submenu is
further defined by 4 major sections,
the "submenu-icon-style" which contains
the optional icon attribute, the
"submenu-text" which contains the menu
text, the "submenu-accelerator" which
is the empty space corresponding to
where a commandMenuItem's or
goMenuItem's accelerator appears, and
the "submenu-open-indicator" which is
the space where the open indicator
("submenu-open-icon-style") appears. |
af|menu::submenu-icon-style |
Style applied to a submenu's icon
container, for submenus that have
assigned icons. The icon is specified
as an attribute on the menu. |
af|menu::submenu-text |
Style applied to the submenu's text,
as
shown inside the menu. |
af|menu::submenu-access-key |
Style on the access key character of
the submenu, as shown inside the menu.
Includes the
.AFFormAccessKeyStyle:alias. |
af|menu::submenu-accelerator |
Style on the part of the submenu
where
an accelerator keyboard shortcut would
go. CommandMenu Items (which can also
appear inside menus) have accelerators
while menus do not. Because menus do
not have accelerators, this is just an
empty section near the end of the
submenu item. |
af|menu::submenu-open-indicator |
Style on the section of the submenu
that contains its open icon for opening
the nested submenu. The
submenu-open-icon-style, which contains
the actual icon image, is a child of
this element. |
af|menu::submenu-open-icon-style |
Style for a submenu open icon, which
is
present when you have menus inside of
menus (nested submenus). The icon is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
-tr-inhibit: background-image in the
submenu-open-icon-style and define the
icon for the submenu-open-icon key. |
af|menu::separator-row |
Style on the row inside a menu that
contains a separator. Menus have
separators when they have grouped menu
items inside the menu. |
af|menu::separator |
Style on the separator line itself.
The
separator stretches across most of the
separator-row, but not the space on the
left where optional icons go. |
af|menu::detachable-header |
The header row for a detachable menu.
Contains the
detachable-header-content-center and
af|panelWindow::close-icon-style. When
attached, the header shows a detach
grip. When detached, the header appears
similar to a panelWindow header. |
af|menu::detachable-header-content-center |
The center content for the detachable
header row. When attached, contains the
detach-handle and spans the header row.
When detached, contains a
af|panelWindow::title and shares the
header row with the
af|panelWindow::close-icon-style. |
af|menu::detach-handle |
Style on the top of a detachable menu
where a user can grab and drag the
detachable menu. |
af|menu::detach-grip |
For a detachable menu, this is the
style on the part of the detachable
handle where the grip image is located.
This image is a background image for
this style and can be customized by
specifying an alternate background
image. |
af|menu::fetching-message |
Styling on the 'data fetching...'
text
message that briefly appears when a
menu that has contentDelivery set to
lazy is first opened. This message is
displayed while the menu information is
retrieved from the server. |
Style Selectors |
Description |
Conditions |
af|navigationPane |
Styles the root dom element of the
component. |
af|navigationPane-bar |
Style on the root dom element of the
component
for hint as "bar". |
af|navigationPane-bar::link |
Style on the link of
commandNavigationItem, when it is used
inside a navigationPane with hint
"bar". Tip: If you skin the
background-image, you may also want to
skin it for :hover. |
af|navigationPane-bar::access-key
|
Style on the access key character of
commandNavigationItem, when it is used
inside a navigationPane with hint
"bar". Includes
.AFFormAccessKeyStyle:alias |
af|navigationPane-bar::icon-style
|
Style on the icon of
commandNavigationItem, when it is used
inside a navigationPane with hint "bar" |
af|navigationPane-bar::separator-icon-style |
Style of the icon used as the bar
item
separator. And icon can be specified as
a background-image in this key.
Alternately, you can use tr-inhibit:
background-image and instead define the
override icon. |
af|navigationPane-bar::body |
Styles the container which encloses
both the navigationPane bar content and
the overflow indicator. |
af|navigationPane-bar::content |
Styles the container which encloses
the
navigationPane bar content (excluding
the overflow indicator). |
af|navigationPane-bar::start-overflow-indicator |
Style on the start overflow
indicator
that is present when the bar items are
overflowed beyond the first item
displayed. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-bar::end-overflow-indicator |
Style on the end overflow indicator
that is present when the bar items are
overflowed beyond the last item
displayed. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-buttons |
Style on the root dom element of the
component
for hint as "buttons". |
af|navigationPane-buttons::link |
Style on the link of
commandNavigationItem, when it is used
inside a navigationPane with hint
"buttons". Tip: If you skin the
background-image, you may also want to
skin it for :hover, :active and
:disabled. |
af|navigationPane-buttons::access-key |
Style on the access key character of
commandNavigationItem, when it is used
inside a navigationPane with hint
"buttons". Includes
.AFFormAccessKeyStyle:alias |
af|navigationPane-buttons::icon-style |
Style on the icon of
commandNavigationItem, when it is used
inside a navigationPane with hint
"buttons" |
af|navigationPane-buttons::separator-icon-style |
Style of the icon used as the
buttons
item separator. And icon can be
specified as a background-image in this
key. Alternately, you can use
tr-inhibit: background-image and
instead define the override icon. |
af|navigationPane-choice |
Style on the root dom element of the
component
for hint as "choice". |
af|navigationPane-choice::label |
Style on the label of navigationPane
with hint "choice". This includes
.AFLabelTextForeground:alias.
:disabled::label includes
.AFLabelTextForegroundDisabled:alias. |
af|navigationPane-choice::link |
Style on the link of
commandNavigationItem, when it is used
inside a navigationPane with hint
"choice". This includes
.AFTextForeground:alias,
.AFLinkForeground:alias,
.AFDefaultFont:alias and
.AFStartTextAlign:alias style
selectors. Tip: If you skin the
background-image, you may also want to
skin it for :hover, :active, :focus,
etc. |
af|navigationPane-choice::dropdown-cell |
Style on the cell of dropdown icon
for
gradient style. This includes
.AFButtonGradient:alias,
AFDropDownIconBorder:alias,
.AFButtonGradientHover:alias,
.AFButtonGradientActive:alias and
.AFDropDownIconBorderActive:alias style
selectors. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-choice::dropdown-icon-style |
Styles the dropdown icon of the
navigationPane component with hint
"choice". By default the dropdown-icon
is null, and this style has a
background-image that you can override.
Includes .AFClickableImageAnchor:alias.
Tip: If you skin the background-image,
you may also want to skin it for s. |
af|navigationPane-choice::access-key
|
Style on the access key character of
commandNavigationItem, when it is used
inside a navigationPane with hint
"choice". Includes
.AFFormAccessKeyStyle:alias |
af|navigationPane-choice::icon-style
|
Style on the icon of
commandNavigationItem, when it is used
inside a navigationPane with hint
"choice" |
af|navigationPane-list |
Style on the root dom element of the
component
for hint as "list". |
af|navigationPane-list::bullet |
Style on the cell which contains the
bullet for list of the component with
hint "list". The bullet image is
specified as a background-image in this
key. To use text or an img element
instead of a background-image, set
{-tr-inhibit: background-image} in this
style and define the icon using the
bullet-icon, icon selector. |
af|navigationPane-list::link |
Style on the link of
commandNavigationItem, when it is used
inside a navigationPane with hint
"list". Tip: You may also want to skin
:hover. |
af|navigationPane-list::access-key
|
Style on the access key character of
commandNavigationItem, when it is used
inside a navigationPane with hint
"list". Includes
.AFFormAccessKeyStyle:alias |
af|navigationPane-list::icon-style
|
Style on the icon of
commandNavigationItem, when it is used
inside a navigationPane with hint "list" |
af|navigationPane-tabs |
Style on the root dom element of the
component
for hint as "tabs". |
af|navigationPane-tabs::header |
Style on the tab bar container of
the
component for hint as "tabs". |
af|navigationPane-tabs::tab |
Style on the tabs in the
navigationPane
component for hint as tabs. |
af|navigationPane-tabs::tab-start
|
Style on the start of the tabs used
with the navigationPane component for
hint as tabs. To provide an alternate
skinning of the tabs, specify alternate
background images to the ::tab-start,
::tab-end, and ::tab-content. Alternate
styling styling of :disabled and
:selected states can be done as well.
Styling with a border is not supported
(doing this will result in browser
compatibility issues based on em
sizing). Here is an example of a full
reskinning of the tabs:
af|navigationPane-tabs::tab-start
{width: 10px;
background-image:url('/images/tab_top_left_black.png');}
af|navigationPane-tabs::tab-end {width:
10px;
background-image:url('/images/tab_top_right_black.png');}
af|navigationPane-tabs::tab-content
{background-image:url('/images/tab_top_middle_black.png');}
af|navigationPane-tabs::tab:disabled
af|navigationPane-tabs::tab-start
{background-image:url('/images/tab_top_left_red.png');}
af|navigationPane-tabs::tab:disabled
af|navigationPane-tabs::tab-end
{background-image:url('/images/tab_top_right_red.png');}
af|navigationPane-tabs::tab:disabled
af|navigationPane-tabs::tab-content
{background-image:url('/images/tab_top_middle_red.png');}
af|navigationPane-tabs::tab:selected
af|navigationPane-tabs::tab-start
{background-image:url('/images/tab_top_left_blue.png');}
af|navigationPane-tabs::tab:selected
af|navigationPane-tabs::tab-end
{background-image:url('/images/tab_top_right_blue.png');}
af|navigationPane-tabs::tab:selected
af|navigationPane-tabs::tab-content
{background-image:url('/images/tab_top_middle_blue.png');} |
Only used by fusion skins. |
af|navigationPane-tabs::tab-end |
Style on the end of the tabs used
with
the navigationPane component for hint
as tabs. To provide an alternate
skinning of the tabs, you will want to
specify alternate background images to
the ::tab-start, ::tab-end, and
::tab-content. Styling with a border is
not supported (doing this will result
in browser compatibility issues based
on em sizing). See the definition for
::tab-start for a full example. |
Only used by fusion skins. |
af|navigationPane-tabs::tab-content
|
Style on the middle of the tabs used
with the navigationPane component for
hint as tabs. To provide an alternate
skinning of the tabs, you will want to
specify alternate background images to
the ::tab-start, ::tab-end, and
::tab-content. Styling with a border is
not supported (doing this will result
in browser compatibility issues based
on em sizing). See the definition for
::tab-start for a full example. |
af|navigationPane-tabs::tab-link
|
Style on the anchor (link) part of
the
tabs used with the navigationPane
component for hint as tabs. Disabled
tabs do not have a tab-link selector. |
af|navigationPane-tabs::body |
Styles the container which encloses
both the navigationPane tabs content
and the overflow indicator. |
af|navigationPane-tabs::content |
Styles the container which encloses
the navigationPane tabs
content (excluding the overflow indicator). This element is
only present when overflow compressed layout is enabled. |
af|navigationPane-tabs::conveyor-belt-container |
Style for container of drop list
items. |
af|navigationPane-tabs::start-overflow-indicator |
Style on the start overflow
indicator
that is present when the toolbar tabs
have compressed layout mode of overflow.
Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::end-overflow-indicator |
Style on the end overflow indicator
that is present when the toolbar tabs
have compressed layout mode of overflow.
Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::start-conveyor-belt-indicator |
Style on the start conveyor belt
indicator
that is present when the toolbar tabs
have compressed layout mode of conveyor belt. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::end-conveyor-belt-indicator |
Style on the end conveyor belt
indicator
that is present when the toolbar tabs
have compressed layout mode of conveyor belt. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::droplist-indicator |
Style on the droplist indicator
that is present when the toolbar tabs
have compressed layout mode of conveyor belt or overflow droplist.
Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::disclosed-remove-icon-style |
If item removal is enabled, this is
the
style of the remove icon used on a
selected tab item. The icon is
specified as a background-image in this
key. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::undisclosed-remove-icon-style |
If item removal is enabled, this is
the
style of the remove icon used on a
nonselected tab item. The icon is
specified as a background-image in this
key. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|navigationPane-tabs::disclosed-remove-disabled-icon-style |
If item removal is enabled, this is
the
style of the disabled remove icon used on a
disclosed tab item that is set to remove
disabled. The icon is specified as a background-image in this
key. |
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style |
If item removal is enabled, this is
the
style of the disabled remove icon used on an
undisclosed tab item that is set to remove
disabled. The icon is specified as a background-image in this
key. |
af|navigationPane-tabs::access-key
|
Style on the access key character of
commandNavigationItem, when it is used
inside a navigationPane with hint
"tabs". Includes
.AFFormAccessKeyStyle:alias |
af|navigationPane-tabs::icon-style
|
Style on the icon of
commandNavigationItem, when it is used
inside a navigationPane with hint "tabs" |
Style Selectors |
Description |
Conditions |
af|panelAccordion |
Selector that renders on the root
dom element
of the component. The root style contains
-tr-header-height and -tr-overflow-height skin
properties to specify the heights of the header
and overflow. If your top/bottom borders for the headers
are bigger than 1px per header total, use the -tr-header-border-height
property to set it. |
af|panelAccordion::access-key |
Style on the access-key for the
label.
Includes .AFFormAccessKeyStyle:alias. |
af|panelAccordion::drop-target |
Style of the drop target of the
panel
accordion that is shown while
reordering panels with the mouse. |
af|panelAccordion::ghost |
Style on the parent element of the
header and content elements that are
being dragged during item reordering
using the mouse. |
af|panelAccordion::header |
Style on the various headers
included
in the panelAccordion component. |
af|panelAccordion::header-subsequent
|
Style on the subsequent headers (all
except the first) included in the
panelAccordion component. |
af|panelAccordion::header-start |
Style on the beginning of the
header.
By default contains the start image
(background-image CSS property) for the
header, as well as the image width
(width CSS property). If you are
replacing the start image through the
background-image property, you should
set the corresponding width property as
well. |
Only used by fusion skins. |
af|panelAccordion::header-disclose
|
Style on the part of the header that
contains the disclose/undisclose button. |
af|panelAccordion::undisclosed-icon-style |
Style on the icon that is shown when
the panel is undisclosed (collapsed).
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
undisclosed-icon-style and define the
icon for the undisclosed-icon key. |
af|panelAccordion::disclosed-icon-style |
Style on the icon that is shown when
the panel is disclosed (expanded). The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the disclosed-icon-style and define the
icon for the disclosed-icon key. |
af|panelAccordion::icon-style |
Style on the image that corresponds
to
the showDetailItem icon in the header. |
af|panelAccordion::header-title |
Style on the title element in the
header. |
af|panelAccordion::header-toolbar
|
Style on the container for the
header
toolbar. |
af|panelAccordion::header-toolbar
|
Style on the container for the
header
toolbar. |
af|panelAccordion::header-end |
Style on the end of the header. By
default contains the ending image
(background-image CSS property) for the
header, as well as the image width
(width CSS property). If you are
replacing the ending image through the
background-image property, you should
set the corresponding width property as
well. |
Only used by fusion skins. |
af|panelAccordion::body-content |
Style on the body root element for
disclosed showDetailItems in the
panelAccordion. For example you could
change the background-color or the
border. |
af|panelAccordion::top-overflow-indicator |
Style on the top overflow indicator
that is present when the accordion
showDetailItems are overflowed beyond
the top of the panelAccordion. Tip: If
you skin the background-image, you may
also want to skin it for :hover and
:active. |
af|panelAccordion::bottom-overflow-indicator |
Style on the bottom overflow
indicator
that is present when the accordion
showDetailItems are overflowed beyond
the bottom of the panelAccordion. Tip:
If you skin the background-image, you
may also want to skin it for :hover and
:active. |
af|panelAccordion::resize-divider
|
Styles the vertical resize divider
for
each disclosed detail item. The height,
cursor and background color of the
resize divider bar can be changed using
this style. |
.AFPanelAccordionHeaderBackground:alias |
Used by the fusion skins to skin the
background image of the panelAccordion header |
.AFPanelAccordionHeaderDisclosedBackground:alias |
Used by the fusion skins to skin the
background image of the panelAccordion disclosed header |
.AFPanelAccordionBodyMultipleBackgroundImage:alias |
Used by the fusion skins to skin
multiple background-images in the af|panelAccordion::body-content
pseudo-element when the browser supports multiple background images.
This is unused in older browsers that do not support multiple
background-images. |
Style Selectors |
Description |
Conditions |
af|panelBox |
The selector on the root dom element
of this
component. The root style contains default
setting of the width of the panel Box to 100%. |
af|panelBox::header-start |
Style the start side of the header
of
the panel box. Used to render rounded
corners for the panelBox. This includes
the .AFPanelBoxHeader* alias, for
example
af|panelBox::header-start:core:default
includes
.AFPanelBoxHeaderCoreDefault:alias. |
Only used by fusion skins. |
af|panelBox::header-center |
Style the center side of the header
of
the panel box. Used to render rounded
corners for the panelBox. This includes
the .AFPanelBoxHeader* alias, for
example
af|panelBox::header-center:core:default
includes
.AFPanelBoxHeaderCoreDefault:alias. |
Only used by fusion skins. |
af|panelBox::header-text |
Style the container of the header
element. |
af|panelBox::header-element |
Style the header element that
contains the header text. |
af|panelBox::header-end |
Style the end side of the header of
the
panel box. Used to render rounded
corners for the panelBox. This includes
the .AFPanelBoxHeader* alias, for
example
af|panelBox::header-end:core:default
includes
.AFPanelBoxHeaderCoreDefault:alias. |
Only used by fusion skins. |
af|panelBox::center |
Style the center area of the panel
box
that wraps the content area of the
panel box. The "center" wrapper
provides potentially different padding
than the content area so that people
can set padding to zero in the
contentStyle attribute and not mess
anything up with the built-in minimum
padding (e.g. for shadows that might be
present in a background image behind
the content). |
af|panelBox::content |
Style the content area of the panel
box. This includes the
.AFPanelBoxContent* alias, for example
af|panelBox::content:core:default
includes
.AFPanelBoxContentCoreDefault:alias. |
af|panelBox::footer-start |
Style the start side of the footer
of
the panel box (used only if
-tr-footer-height is not 0px). Used to
render rounded corners for the
panelBox. This includes the
.AFPanelBoxFooter* alias, for example
af|panelBox::footer-start:core:default
includes
.AFPanelBoxFooterCoreDefault:alias. |
Only used by fusion skins. |
af|panelBox::footer-center |
Style the center side of the footer
of
the panel box (used only if
-tr-footer-height is not 0px). Used to
render rounded corners for the
panelBox. This includes the
.AFPanelBoxFooter* alias, for example
af|panelBox::footer-center:core:default
includes
.AFPanelBoxFooterCoreDefault:alias. |
Only used by fusion skins. |
af|panelBox::footer-end |
Style the end side of the footer of
the
panel box (used only if
-tr-footer-height is not 0px). Used to
render rounded corners for the
panelBox. This includes the
.AFPanelBoxFooter* alias, for example
af|panelBox::footer-end:core:default
includes
.AFPanelBoxFooterCoreDefault:alias. |
Only used by fusion skins. |
af|panelBox::icon-style |
Style to support an icon to the left
of
the header title |
af|panelBox::disclosure-link |
Selector for the anchor element that
contains the disclosure icon. |
af|panelBox::undisclosed-icon-style
|
Style on the icon that is shown when
the panel is undisclosed (collapsed).
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
undisclosed-icon-style and define the
icon for the undisclosed-icon key. |
af|panelBox::disclosed-icon-style
|
Style on the icon that is shown when
the panel is disclosed (expanded). The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the disclosed-icon-style and define the
icon for the disclosed-icon key. |
af|panelBox::unmaximized-icon-style
|
Style on the icon that is shown when
the panel is maximized.
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
unmaximize-icon-style and define the
icon for the unmaximize-icon key. |
af|panelBox::maximized-icon-style
|
Style on the icon that is shown when
the panel is normal size. The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the maximize-icon-style and define the
icon for the maximize-icon key. |
af|panelBox::maximize-link |
Selector for the anchor element that
contains the maximize icon. |
af|panelBox::disclosure-icon-container |
Styles the container for the
disclosure
icon. |
af|panelBox::instruction-text |
Styles the text that might come from
the helpTopicId. |
af|panelBox::dynamic-help-icon-style
|
Styles the dynamic help icon. By
default the dynamic-help-icon is null,
and this style has a background-image
that you can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
Style Selectors |
Description |
Conditions |
af|panelTabbed |
Selector that renders on the root
dom element
of the component. |
af|panelTabbed::access-key |
Style on the access-key for the
label.
Includes .AFFormAccessKeyStyle:alias. |
af|panelTabbed::header-start |
Selector for the top left (top right
for RTL). The property "-tr-width" is
supported to specify the width. The
height is taken from the height of the
header. |
Only used by fusion skins. |
af|panelTabbed::header |
Style on the header of the
panelTabbed
component. This is the container for
the "above" tabs. When tabs are in the
header, the height of this header will
come from the height specified in the
"-tr-tab-bar-height" property.
Otherwise, the height from the property
"-tr-height" defined in this selector
is used (for a header-specific empty
bar height) or if not defined, a
generic height from the
"-tr-empty-bar-height" property is used. |
af|panelTabbed::header-center |
Selector for the area between the
footer-start and footer-end areas.
Typically, this defines a background
image between the start and end corner
images, particularly useful if
-tr-tab-bar-layout is set to "full".
The height is taken from the height of
the header. |
Only used by fusion skins. |
af|panelTabbed::header-end |
Selector for the top right (top left
for RTL). The property "-tr-width" is
supported to specify the width. The
height is taken from the height of the
header. |
Only used by fusion skins. |
af|panelTabbed::content |
Style on the wrapper element of the
body content (area between the
header and footer bars) of the panelTabbed
component. |
af|panelTabbed::body-start |
Selector for the left side (right
side
for RTL). The property "-tr-width" is
supported to specify the width. The
height is taken from the height of the
body. |
af|panelTabbed::body |
Style on the body of the panelTabbed
component. This is the area between the
header and footer bars. |
af|panelTabbed::body-end |
Selector for the right side (left
side
for RTL). The property "-tr-width" is
supported to specify the width. The
height is taken from the height of the
body. |
af|panelTabbed::footer-start |
Selector for the bottom left (bottom
right for RTL). The property
"-tr-width" is supported to specify the
width. The height is taken from the
height of the footer. |
Only used by fusion skins. |
af|panelTabbed::footer |
Style on the footer of the
panelTabbed
component. This is the container for
the "below" tabs. When tabs are in the
footer, the height of this footer will
come from the height specified in the
"-tr-tab-bar-height" property noted
below. Otherwise, the height from the
property "-tr-height" defined in this
selector is used (for a footer-specific
empty bar height) or if not defined, a
generic height from the
"-tr-empty-bar-height" property noted
below is used. |
af|panelTabbed::footer-center |
Selector for the area between the
footer-start and footer-end areas.
Typically, this defines a background
image between the start and end corner
images, particularly useful if
-tr-tab-bar-layout is set to "full".
The height is taken from the height of
the footer. |
Only used by fusion skins. |
af|panelTabbed::footer-end |
Selector for the bottom right
(bottom
left for RTL). The property "-tr-width"
is supported to specify the width. The
height is taken from the height of the
footer. |
Only used by fusion skins. |
af|panelTabbed::tabs |
Style around the vertically
positioned tabs. |
af|panelTabbed::tab |
Style on the tabs in the panelTabbed
component. This applies to tabs in both
the header and the footer. |
af|panelTabbed::tab-start |
Style on the start of the tabs used
with the panelTabbed component. This
applies to tabs in both the header and
the footer. To provide an alternate
skinning of the tabs, you will want to
specify alternate background images to
the ::tab-start, ::tab-end, and
::tab-content. You will also probably
want to specify separate changes for
the ::header and the ::footer, and you
may want to specify alternate styling
for :disabled and :selected states as
well. Styling with a border is not
supported (doing this will result in
browser compatibility issues based on
em sizing). Here is an example of a
full reskinning of the tabs:
af|panelTabbed::header
af|panelTabbed::tab-start {width: 10px;
background-image:url('/images/tab_top_left_black.png');}
af|panelTabbed::header
af|panelTabbed::tab-end {width: 10px;
background-image:url('/images/tab_top_right_black.png');}
af|panelTabbed::header
af|panelTabbed::tab-content
{background-image:url('/images/tab_top_middle_black.png');}
af|panelTabbed::footer
af|panelTabbed::tab-start {width: 10px;
background-image:url('/images/tab_bottom_left_black.png');}
af|panelTabbed::footer
af|panelTabbed::tab-end {width: 10px;
background-image:url('/images/tab_bottom_right_black.png');}
af|panelTabbed::footer
af|panelTabbed::tab-content
{background-image:url('/images/tab_bottom_middle_black.png');}
af|panelTabbed::header
af|panelTabbed::tab:disabled
af|panelTabbed::tab-start
{background-image:url('/images/tab_top_left_red.png');}
af|panelTabbed::header
af|panelTabbed::tab:disabled
af|panelTabbed::tab-end
{background-image:url('/images/tab_top_right_red.png');}
af|panelTabbed::header
af|panelTabbed::tab:disabled
af|panelTabbed::tab-content
{background-image:url('/images/tab_top_middle_red.png');}
af|panelTabbed::footer
af|panelTabbed::tab:disabled
af|panelTabbed::tab-start
{background-image:url('/images/tab_bottom_left_red.png');}
af|panelTabbed::footer
af|panelTabbed::tab:disabled
af|panelTabbed::tab-end
{background-image:url('/images/tab_bottom_right_red.png');}
af|panelTabbed::footer
af|panelTabbed::tab:disabled
af|panelTabbed::tab-content
{background-image:url('/images/tab_bottom_middle_red.png');}
af|panelTabbed::header
af|panelTabbed::tab:selected
af|panelTabbed::tab-start
{background-image:url('/images/tab_top_left_blue.png');}
af|panelTabbed::header
af|panelTabbed::tab:selected
af|panelTabbed::tab-end
{background-image:url('/images/tab_top_right_blue.png');}
af|panelTabbed::header
af|panelTabbed::tab:selected
af|panelTabbed::tab-content
{background-image:url('/images/tab_top_middle_blue.png');}
af|panelTabbed::footer
af|panelTabbed::tab:selected
af|panelTabbed::tab-start
{background-image:url('/images/tab_bottom_left_blue.png');}
af|panelTabbed::footer
af|panelTabbed::tab:selected
af|panelTabbed::tab-end
{background-image:url('/images/tab_bottom_right_blue.png');}
af|panelTabbed::footer
af|panelTabbed::tab:selected
af|panelTabbed::tab-content
{background-image:url('/images/tab_bottom_middle_blue.png');} |
Only used by fusion skins. |
af|panelTabbed::tab-end |
Style on the end of the tabs used
with
the panelTabbed component. This applies
to tabs in both the header and the
footer. To provide an alternate
skinning of the tabs, you will want to
specify alternate background images to
the ::tab-start, ::tab-end, and
::tab-content. You will also probably
want to specify separate changes for
the ::header and the ::footer, and you
may want to specify alternate styling
for :disabled and :selected states as
well. Styling with a border is not
supported (doing this will result in
browser compatibility issues based on
em sizing). See the definition for
::tab-start for a full example. |
Only used by fusion skins. |
af|panelTabbed::tab-content |
Style on the middle of the tabs used
with the panelTabbed component. This
applies to tabs in both the header and
the footer. To provide an alternate
skinning of the tabs, you will want to
specify alternate background images to
the ::tab-start, ::tab-end, and
::tab-content. You will also probably
want to specify separate changes for
the ::header and the ::footer, and you
may want to specify alternate styling
for :disabled and :selected states as
well. Styling with a border is not
supported (doing this will result in
browser compatibility issues based on
em sizing). See the definition for
::tab-start for a full example. |
af|panelTabbed::tab-text-link |
Style on the anchor (link) part of
the
tabs used with the panelTabbed
component. This applies to tabs in both
the header and the footer. |
af|panelTabbed::icon-style |
Style on the icons (if present) in
the
tabs used with the panelTabbed
component. This applies to tabs in both
the header and the footer. |
af|panelTabbed::start-overflow-indicator |
Style on the start overflow
indicator
that is present when the toolbar tabs
have compressed layout mode of overflow.
Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::end-overflow-indicator |
Style on the end overflow indicator
that is present when the toolbar tabs
have compressed layout mode of overflow.
Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::start-conveyor-belt-indicator |
Style on the start conveyor belt
indicator
that is present when the toolbar tabs
have compressed layout mode of conveyor belt. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::end-conveyor-belt-indicator |
Style on the end conveyor belt
indicator
that is present when the toolbar tabs
have compressed layout mode of conveyor belt. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::droplist-indicator
|
Style on the droplist indicator
that is present when the toolbar tabs
have compressed layout mode of conveyor belt or overflow droplist.
Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::top-conveyor-belt-indicator |
Style on the top conveyor belt
indicator that is present when the tabs
are vertical and are in a compressed layout. Tip: If you skin the
background-image,
you may also want to skin it for :hover and :active. |
af|panelTabbed::bottom-conveyor-belt-indicator |
Style on the bottom conveyor belt
indicator that is present when the tabs
are vertical and are in a compressed layout. Tip: If you skin the
background-image,
you may also want to skin it for :hover and :active. |
af|panelTabbed::conveyor-belt-container |
Style on the conveyor belt droplist
popup container. |
af|panelTabbed::toggle |
Style on the toggle tab text icon
container. |
af|panelTabbed::toggle-icon-style
|
If toggle tab text icon is enabled,
this is the
style of the toggle icon used on a
vertical tab list. The icon is
specified as a background-image in this
key. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::disclosed-remove-icon-style |
If tab removal is enabled, this is
the
style of the remove icon used on a
disclosed tab item. The icon is
specified as a background-image in this
key. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::undisclosed-remove-icon-style |
If tab removal is enabled, this is
the
style of the remove icon used on an
undisclosed tab item. The icon is
specified as a background-image in this
key. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active. |
af|panelTabbed::disclosed-remove-disabled-icon-style |
If tab removal is enabled, this is
the
style of the disabled remove icon used on a
disclosed tab item that is set to remove
disabled. The icon is specified as a background-image in this
key. |
af|panelTabbed::undisclosed-remove-disabled-icon-style |
If tab removal is enabled, this is
the
style of the disabled remove icon used on an
undisclosed tab item that is set to remove
disabled. The icon is specified as a background-image in this
key. |
Style Selectors |
Description |
Conditions |
af|panelWindow |
Selector that renders on the root
dom element
of the component. |
af|panelWindow::resize-ghost |
The selector applied to the element
temporarily created to animate a mouse
drag resize. The element is a div with
absolute positioning that floats above
the dialog getting resized. The border,
background color and opacity are
attributes that a custom skin might
want to adjust. |
af|panelWindow::main |
Selector for the main element of
this
panelWindow. This selector along with
the pseudo-classes :drag and :inactive
on the root element can be used to
customize the inactive and drag states
of the panelWindow. For e.g.
"af|panelWindow:drag
af|panelWindow::main{opacity:0.15;}
@agent ie {af|panelWindow:drag
af|panelWindow::main{filter:alpha(opacity:15);}}"
changes the drag state of the
panelWindow so that it is only 15%
opaque. |
af|panelWindow::inactive-background
|
Selector for displaying the
background
when the panelWindow is not the active
window. This selector is used in
conjunction with the pseudo-class
:inactive on the root element and
af|panelWindow::main to achieve an
inactive look for the panelWindow. For
e.g.
"af|panelWindow::inactive-background{
background-color:#FFFFFF;}
af|panelWindow:inactive
af|panelWindow::main{opacity:0.5;}
@agent ie {af|panelWindow:inactive
af|panelWindow::main{filter:alpha(opacity:50);}"
sets the background to white and lets
it bleed into the panelWindow by
setting its opacity to 50%. |
af|panelWindow::header-start |
The style for the starting cell of
the
header. Generally this is the
decoration on the left side of the
screen and can be used to create
rounded edges. |
af|panelWindow::header |
Styles the "header" element. This
element surrounds the header text, icon
and close regions. |
af|panelWindow::header-end |
The style for the ending cell of the
header. Generally this is the
decoration on the right side of the
screen and can be used to create
rounded edges. |
af|panelWindow::footer-start |
The style for the starting cell of
the
footer. Generally this is the
decoration on the left side of the
screen and can be used to create
rounded edges. |
af|panelWindow::footer |
The style for the center cell of the
footer. |
af|panelWindow::footer-end |
The style for the ending cell of the
footer. Generally this is the
decoration on the right side of the
screen and can be used to create
rounded edges. |
af|panelWindow::content-start |
The style for the starting of the
content. This will be located directly
below the af|panelWindow::header-start
key, above the
af|panelWindow::footer-start key and
before the af|panelWindow::content key. |
af|panelWindow::content |
The style for the content region of
the
panelWindow. This is the area where the
components children will be rendered.
It is located directly below the
af|panelWindow::header key, above the
af|panelWindow::footer and after the
af|panelWindow::content-start key. |
af|panelWindow::content-center |
The center of the panelWindow is
marked
with this style. It is contained in the
af|panelWindow::content node. Padding
and color can be adjusted with this
style but overflow is managed
programmatically. Use of this style is
conditional on property values
stretchChildren=first or resize=on. |
af|panelWindow::content-end |
The style for the ending of the
content. This will be located directly
below the af|panelWindow::header-end
key, above the
af|panelWindow::footer-end key and
after the af|panelWindow::content key. |
af|panelWindow::resize-icon-region
|
Styles the region around the end
corner
resize icon in af|panelWindow::footer
and aligned to end in LTR. It can be
used to set paddings, margins around
the resize icon. |
af|panelWindow::resize-icon-style
|
The style for the resize icon
located
in the
af|panelWindow::resize-icon-region. |
af|panelWindow::icon-region |
Styles the region around the window
icon in af|panelWindow::header and
aligned to start. It can be used to set
paddings, margins around the title icon. |
af|panelWindow::title |
Styles the title of the panelWindow.
|
af|panelWindow::help-link-container
|
A style containing the "dynamic
help"
for the window. It will only be
displayed if assigned a helpTopicId and
will be positioned after the
af|panelWindow::title and before
af|panelWindow::close-icon-region/af|panelWindow::pin-icon-region
within af|panelWindow::header. |
af|panelWindow::dynamic-help-icon-style |
Style the dynamic help icon located
within the help-link-container. By
default the dynamic-help-icon is null,
and this style has a background-image
that you can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|panelWindow::close-icon-region
|
Styles the region around the end
corner
close icon aligned to end in LTR. It can be
used to set borders, margins, and background colors for
the close icon region. |
af|panelWindow::close-icon-style
|
Style on the panelWindow's close
icon.
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
close-icon-style and define the icon
for the close-icon key. |
af|panelWindow::pin-icon-region |
Styles the region around the end
corner
pin icon aligned to end in LTR. It can be
used to set borders, margins, and background colors for
the pin icon region. |
af|panelWindow::pin-icon-style |
Style on the panelWindow's pin icon.
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
pin-icon-style and define the icon
for the pin-icon key. |
Style Selectors |
Description |
Conditions |
af|query |
Styles the root element of the
af:query
component. |
af|query::button |
Styles the buttons of the query
component. Note that this skin selector is only present when
the skin selector -tr-button-type is set to 'old', and the
query buttons are rendered as af:commandButtons. When the
-tr-button-type is set to 'unified', the query buttons are
rendered as af:buttons and have the default stylings for
af:button applied, so that query buttons have the same
look and feel as all other buttons. Tip: If you skin this
selector's background-image, you may
also want to skin it for :hover,
:active, :focus. The :disabled state is
currently not supported. Please note
that for buttons :active and :focus
pseudo-classes do not work in IE7. IE7
also does not allow disabled buttons to
be styled. It is recommended that you
use the .AFButton*:alias selectors as a
shortcut to skin all button components
the same. |
af|query::button-access-key |
When -tr-button-type is set to
'old', styles the access
key text of the query commandButton. This includes the
.AFButtonAccessKeyStyle:alias style. |
af|query::content$ |
Styles the content region of the
query
component. This includes the area that
displays the queryCriteria and the
footers. It is located directly below
the af|query::title$ key. The value for
$ is a number between 0 and 5
signifying the six header types. The
number is determined by the depth of
the query within other headers. If
query is nested within one panelHeader,
for e.g. then $ will be 1. |
af|query::content-footer |
Styles the footer region that
encloses
any content specified by the footer
facet and any content that is rendered,
by default, by the query component. |
af|query::criteria |
Styles the container that encloses
the
conjunction and the criterion search
fields |
af|query::criteria-column |
Styles each columns of the criterion
rows, like vertical-align:top and
text-align. |
af|query::criterion |
Styles each search field based on a
criterion. A search field consists of
the label, operator, value and an
optional delete icon. |
af|query::criterion-label |
Styles the label of the search
field.
Also supports the rtl pseudo-class |
af|query::criterion-content |
Styles the content of the search
field,
that includes the operator and value
inside. |
af|query::criterion-delete-icon-cell
|
Styles the cell that encloses the
delete icon within a criterion. This
includes .AFEndPadding:alias style
selector. |
af|query::criterion-delete-icon-style |
Styles the delete icon. The delete
icon
is specified as a background-image in
this key. Includes
.AFClickableImageAnchor:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover and
:active. |
af|query::criterion-indexed-icon-style |
Styles the indexed icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover and :active. |
af|query::instruction-text |
Styles the text that might come from
the helpTopicId. |
af|query::dynamic-help-icon-style
|
Styles the dynamic help icon. By
default the dynamic-help-icon is null,
and this style has a background-image
that you can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active, and :disabled. |
af|query::disclosure-link |
Selector for the anchor element that
contains the disclosure icon. |
af|query::undisclosed-icon-style
|
Style on the icon that is shown when
the panel is undisclosed (collapsed).
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
undisclosed-icon-style and define the
icon for the undisclosed-icon key. |
af|query::disclosed-icon-style |
Style on the icon that is shown when
the panel is disclosed (expanded). The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the disclosed-icon-style and define the
icon for the disclosed-icon key. |
af|query::disclosure-icon-container
|
Styles the container for the
disclosure
icon. |
af|query::disclosure-icon-style |
Styles the anchor element containing
the specified icon if messageType is
set to null. Otherwise the icon
associated with the message type is
displayed in the container. Tip: If you
skin the background-image, you may also
want to skin it for :hover and :active. |
af|query::footer-facet-content-style
|
Styles the cell that contains the
footer facet content (or the default
Add Fields button). |
af|query::info |
Applied to the element containing
the
"* required" stamp on the query
component. |
af|query::title$ |
Styles the main part of the header.
It
is the section that immediately follows
the "af|query::title-start$" key. The
value for $ is a number between 0 and 5
signifying the six header types. |
af|query::title-end$ |
Styles the ending cell of the
header.
Generally this is the decoration on the
right side of the search panel and can
be used to create rounded edges. The
value for $ is a number between 0 and 5
signifying the six header types. |
af|query::title-table |
The style for the table containing
the
header. Generally this will not be
modified, but this allows for more
flexible skinning of the title in
general so that under certain
curcumstances, it can be styled to
match the content container. This style
class supports the :disclosed
pseudo-class when the query component
is disclosed. |
af|query::title-text$ |
Styles the header text inside the
title
element specified by the
af|query::title$ key. Available
pseudo-classes are :error, :warning,
:info:, :confirmation and are set
according to the message type. If no
message type is specified or message
type is set to none then none of these
pseudo-classes will be present. |
af|query::title-start$ |
Styles the starting cell of the
header.
Generally this is the decoration on the
left side of the search panel and can
be used to create rounded edges. |
af|query::move-top-icon-style |
Styles move top button in reorder
dialog |
af|query::move-up-icon-style |
Styles move up button in reorder
dialog |
af|query::move-bottom-icon-style
|
Styles move bottom button in reorder
dialog |
af|query::move-down-icon-style |
Styles move down button in reorder
dialog |
af|query::separator-icon-style |
Style of the icon used as the bar
item separator. |
af|query::group-criterion-cell |
Styles the cell of each group of
search fields inthe search panel |
af|query::group-criterion-name-text
|
Styles the name of the "Search
Field" group |
af|query::group-criterion-name-cell
|
Styles the cell that encloses the
name of the "Search Field" group |
af|query::group-criterion-delete-icon-cell |
Styles the cell that encloses the
delete icon within a criterion. |
af|query::reorder-search-tree |
Styles the reorder tree in the
reorder dialog . |
.AFBetweenSeparatorIcon:alias |
Specifies the icon between the two
components that get rendered
when the 'Between ..." operator is chosen for the search field of the
af:query component. |
Style Selectors |
Description |
Conditions |
af|region |
Selector that renders on the root
dom element
of the component. |
af|region::header-start |
Style the start side of the header
of
the region. Used to render rounded
corners for the region. The
pseudo-classes correspond with the ramp
and background attributes of the
panelBox component though no such
attribute exists for the region
component. For example, the ramp is set
to "core" and background set to
"default" the style used for this is
"af|region::header-start:core:default".
This includes the .AFPanelBoxHeader*
alias, for example
af|region::header-start:core:default
includes
.AFPanelBoxHeaderCoreDefault:alias. |
af|region::header-center |
Style the center side of the header
of
the region. Used to render rounded
corners for the region. The
pseudo-classes correspond with the ramp
and background attributes of the
panelBox component though no such
attribute exists for the region
component. This includes the
.AFPanelBoxHeader* alias, for example
af|region::header-center:core:default
includes
.AFPanelBoxHeaderCoreDefault:alias. |
af|region::header-text |
Style the container of the header
element. |
af|region::header-element |
Style the header element that
contains the header text. |
af|region::header-end |
Style the end side of the header of
the
region. Used to render rounded corners
for the region. The pseudo-classes
correspond with the ramp and background
attributes of the panelBox component
though no such attribute exists for the
region component. This includes the
.AFPanelBoxHeader* alias, for example
af|region::header-end:core:default
includes
.AFPanelBoxHeaderCoreDefault:alias. |
af|region::center |
Style the center area of the region
that wraps the content area of the
region. The "center" wrapper provides
potentially different padding than the
content area so that people can set
padding to zero in the contentStyle
attribute and not mess anything up with
the built-in minimum padding (e.g. for
shadows that might be present in a
background image behind the content).
The pseudo-classes correspond with the
ramp and background attributes of the
panelBox component though no such
attribute exists for the region
component. |
af|region::content |
Style the content area of the
region.
The pseudo-classes correspond with the
ramp and background attributes of the
panelBox component though no such
attribute exists for the region
component. This includes the
.AFPanelBoxContent* alias, for example
af|region::content:core:default
includes
.AFPanelBoxContentCoreDefault:alias. |
af|region::footer-start |
Style the start side of the footer
of
the region (used only if
-tr-footer-height is not 0px). Used to
render rounded corners for the region.
The pseudo-classes correspond with the
ramp and background attributes of the
panelBox component though no such
attribute exists for the region
component. For example, the ramp is set
to "core" and background set to
"default" the style used for this is
"af|region::footer-start:core:default".
This includes the .AFPanelBoxFooter*
alias, for example
af|region::footer-start:core:default
includes
.AFPanelBoxFooterCoreDefault:alias. |
af|region::footer-center |
Style the center side of the footer
of
the region (used only if
-tr-footer-height is not 0px). Used to
render rounded corners for the region.
The pseudo-classes correspond with the
ramp and background attributes of the
panelBox component though no such
attribute exists for the region
component. This includes the
.AFPanelBoxFooter* alias, for example
af|region::footer-center:core:default
includes
.AFPanelBoxFooterCoreDefault:alias. |
af|region::footer-end |
Style the end side of the footer of
the
region (used only if -tr-footer-height
is not 0px). Used to render rounded
corners for the region. The
pseudo-classes correspond with the ramp
and background attributes of the
panelBox component though no such
attribute exists for the region
component. This includes the
.AFPanelBoxFooter* alias, for example
af|region::footer-end:core:default
includes
.AFPanelBoxFooterCoreDefault:alias. |
af|region::disclosure-link |
Selector for the anchor element that
contains the disclosure icon. |
af|region::undisclosed-icon-style
|
Style on the icon that is shown when
the panel is undisclosed (collapsed).
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
undisclosed-icon-style and define the
icon for the undisclosed-icon key. |
af|region::disclosed-icon-style |
Style on the icon that is shown when
the panel is disclosed (expanded). The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the disclosed-icon-style and define the
icon for the disclosed-icon key. |
af|region::maximize-icon-container
|
Styles the container for the
maximize
icon. |
af|region::maximize-link |
Selector for the anchor element that
contains the maximize icon. |
af|region::unmaximized-icon-style
|
Style on the icon that is shown when
the panel is maximized.
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
unmaximize-icon-style and define the
icon for the unmaximize-icon key. |
af|region::maximized-icon-style |
Style on the icon that is shown when
the panel is normal size. The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the maximize-icon-style and define the
icon for the maximize-icon key. |
af|region::instruction-text |
Styles the text that might come from
the helpTopicId. |
af|region::dynamic-help-icon-style
|
Styles the dynamic help icon. By
default the dynamic-help-icon is null,
and this style has a background-image
that you can override. Available
pseudo-classes are :disabled:hover,
:hover and :active. Includes
.AFDynamicHelpIconStyle:alias. |
Icon Selectors |
Description |
af|richTextEditor::changed-icon |
The icon that will render when the
changed attribute is true. Includes
.AFChangedIcon:alias. |
af|richTextEditor::dynamic-help-icon
|
Icon that can be used instead of a
background-image on
af|richTextEditor::dynamic-help-icon-style.
By default this is null. If you use
this
af|richTextEditor::dynamic-help-icon-style
can then be used for background colors,
etc. |
af|richTextEditor::add-link-active-icon |
Icon for the add-link button in
active state. |
af|richTextEditor::add-link-disabled-icon |
Icon for the add-link button in
disabled state. |
af|richTextEditor::add-link-hover-icon |
Icon for the add-link button in
hover state. |
af|richTextEditor::add-link-icon
|
Icon for add link button. |
af|richTextEditor::bold-active-icon
|
Icon for bold button in active
state. |
af|richTextEditor::bold-disabled-icon |
Icon for bold button in disabled
state. |
af|richTextEditor::bold-hover-icon
|
Icon for bold button in hover state.
|
af|richTextEditor::bold-icon |
Icon for bold button. |
af|richTextEditor::clear-styling-active-icon |
Icon for clear-style button in
active state. |
af|richTextEditor::clear-styling-disabled-icon |
Icon for clear-style button in
disabled state. |
af|richTextEditor::clear-styling-hover-icon |
Icon for clear-style button in hover
state. |
af|richTextEditor::clear-styling-icon |
Icon for clear-style button. |
af|richTextEditor::indent-active-icon |
Icon for indent button in active
state. |
af|richTextEditor::indent-disabled-icon |
Icon for indent button in disabled
state. |
af|richTextEditor::indent-hover-icon
|
Icon for indent button in hover
state. |
af|richTextEditor::indent-icon |
Icon for indent button. |
af|richTextEditor::italic-active-icon |
Icon for italic button in active
state. |
af|richTextEditor::italic-disabled-icon |
Icon for italic button in disabled
state. |
af|richTextEditor::italic-hover-icon
|
Icon for italiv button in hover
state. |
af|richTextEditor::italic-icon |
Icon for italic button. |
af|richTextEditor::justify-center-active-icon |
Icon for justify-center button in
active state. |
af|richTextEditor::justify-center-disabled-icon |
Icon for justify-center button in
disabled state. |
af|richTextEditor::justify-center-hover-icon |
Icon for justify-center button in
hover state. |
af|richTextEditor::justify-center-icon |
Icon for justify-center button. |
af|richTextEditor::justify-full-active-icon |
Icon for justify-full button in
active state. |
af|richTextEditor::justify-full-disabled-icon |
Icon for justify-full button in
disabled state. |
af|richTextEditor::justify-full-hover-icon |
Icon for justify-full button in
hover state. |
af|richTextEditor::justify-full-icon
|
Icon for justify-full button. |
af|richTextEditor::justify-left-active-icon |
Icon for justify-left button in
active state. |
af|richTextEditor::justify-left-disabled-icon |
Icon for justify-left button in
disabled state. |
af|richTextEditor::justify-left-hover-icon |
Icon for justify-left button in
hover state. |
af|richTextEditor::justify-left-icon
|
Icon for justify-left button. |
af|richTextEditor::justify-right-active-icon |
Icon for justify-right button in
active state. |
af|richTextEditor::justify-right-disabled-icon |
Icon for justify-right button in
disabled state. |
af|richTextEditor::justify-right-hover-icon |
Icon for justify-right button in
hover state. |
af|richTextEditor::justify-right-icon |
Icon for justify-right button. |
af|richTextEditor::list-ordered-active-icon |
Icon for list-ordered button in
active state. |
af|richTextEditor::list-ordered-disabled-icon |
Icon for list-ordered button in
disabled state. |
af|richTextEditor::list-ordered-hover-icon |
Icon for list-ordered button in
hover state. |
af|richTextEditor::list-ordered-icon
|
Icon for list-ordered button. |
af|richTextEditor::list-unordered-active-icon |
Icon for list-unordered button in
active state. |
af|richTextEditor::list-unordered-disabled-icon |
Icon for list-unordered button in
disabled state. |
af|richTextEditor::list-unordered-hover-icon |
Icon for list-unordered button in
hover state. |
af|richTextEditor::list-unordered-icon |
Icon for list-unordered button. |
af|richTextEditor::mode-code-active-icon |
Icon for mode-code button in active
state. |
af|richTextEditor::mode-code-disabled-icon |
Icon for mode-code button in
disabled state. |
af|richTextEditor::mode-code-hover-icon |
Icon for mode-code button in hover
state. |
af|richTextEditor::mode-code-icon
|
Icon for mode-code button. |
af|richTextEditor::mode-rich-text-active-icon |
Icon for mode-rich-text button in
active state. |
af|richTextEditor::mode-rich-text-disabled-icon |
Icon for mode-rich-text button in
disabled state. |
af|richTextEditor::mode-rich-text-hover-icon |
Icon for mode-rich-text button in
hover state. |
af|richTextEditor::mode-rich-text-icon |
Icon for mode-rich-text button. |
af|richTextEditor::redo-active-icon
|
Icon for redo button in active
state. |
af|richTextEditor::redo-disabled-icon |
Icon for redo button in disabled
state. |
af|richTextEditor::redo-hover-icon
|
Icon for redo button in hover state.
|
af|richTextEditor::redo-icon |
Icon for redo button. |
af|richTextEditor::remove-link-disabled-icon |
Icon for remove-link button in
disabled state. |
af|richTextEditor::remove-link-hover-icon |
Icon for remove-link button in hover
state. |
af|richTextEditor::remove-link-icon
|
Icon for remove-link button. |
af|richTextEditor::strikethrough-active-icon |
Icon for strikethrough button in
active state. |
af|richTextEditor::strikethrough-disabled-icon |
Icon for strikethrough button in
disabled state. |
af|richTextEditor::strikethrough-hover-icon |
Icon for strikethrough button in
hover state. |
af|richTextEditor::strikethrough-icon |
Icon for strikethrough button. |
af|richTextEditor::subscript-active-icon |
Icon for subscript button in active
state. |
af|richTextEditor::subscript-disabled-icon |
Icon for subscript button in
disabled state. |
af|richTextEditor::subscript-hover-icon |
Icon for subscript button in hover
state. |
af|richTextEditor::subscript-icon
|
Icon for subscript button. |
af|richTextEditor::superscript-active-icon |
Icon for superscript button in
active state. |
af|richTextEditor::superscript-disabled-icon |
Icon for superscript button in
disabled state. |
af|richTextEditor::superscript-hover-icon |
Icon for superscript button in hover
state. |
af|richTextEditor::superscript-icon
|
Icon for superscript button. |
af|richTextEditor::underline-active-icon |
Icon for underline button in active
state. |
af|richTextEditor::underline-disabled-icon |
Icon for underline button in
disabled state. |
af|richTextEditor::underline-hover-icon |
Icon for underline button in hover
state. |
af|richTextEditor::underline-icon
|
Icon for underline button. |
af|richTextEditor::undo-active-icon
|
Icon for undo button in active
state. |
af|richTextEditor::undo-disabled-icon |
Icon for undo button in disabled
state. |
af|richTextEditor::undo-hover-icon
|
Icon for undo button in hover state.
|
af|richTextEditor::undo-icon |
Icon for undo button. |
af|richTextEditor::unindent-active-icon |
Icon for unindent button in active
state. |
af|richTextEditor::unindent-disabled-icon |
Icon for unindent button in disabled
state. |
af|richTextEditor::unindent-hover-icon |
Icon for unindent button in hover
state. |
af|richTextEditor::unindent-icon
|
Icon for unindent button. |
Style Selectors
|
Description |
Conditions |
af|selectManyShuttle |
The selector on the root dom
element of the
component. |
af|selectManyShuttle::access-key |
Style on the access-key for
the label.
Includes .AFFormAccessKeyStyle:alias. |
af|selectManyShuttle::container |
Styles the containers in the
shuttle. |
af|selectManyShuttle::content
|
Styles the containers in the
shuttle. |
af|selectManyShuttle::content-input |
Styles the checkboxes inside
the
shuttle containers. |
af|selectManyShuttle::desc-area |
Styles the item description
inside the
description box. |
af|selectManyShuttle::desc-cell |
Styles the description box.
|
af|selectManyShuttle::description |
Styles the description header
in the
description box. |
af|selectManyShuttle::dynamic-help-icon-style |
Style the dynamic help icon.
By default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::header
|
Styles the leading and
trailing header. |
af|selectManyShuttle::icon-container |
Styles the icon area between
the
containers. |
af|selectManyShuttle::icon-label |
Styles the label of the
move/remove
icons. |
af|selectManyShuttle::label
|
Style on the label of the
af:selectManyShuttle component. |
af|selectManyShuttle::item
|
Style on the items in the
SelectManyShuttle. |
af|selectManyShuttle::item-label |
Styles the label of the items,
that are
present in the containers. |
af|selectManyShuttle::move-horizontal |
Style of the background
gradient of the
horizontal move icon. Tip: If you skin
the background gradient, you may also want
to skin it for :hover, :active and :disabled. |
af|selectManyShuttle::move-horizontal-icon-style |
Style of the horizontal move
icon. The
move icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-horizontal-icon-style and define
the override icon for the
move-horizontal-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active and :disabled. |
af|selectManyShuttle::move-vertical |
Style of the background
gradient of the
vertical move icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::move-vertical-icon-style |
Style of the vertical move
icon. The
move icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-vertical-icon-style and define the
override icon for the
move-vertical-icon. Tip:
If you skin the background-image, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::moveall-horizontal |
Style of the background
gradient of the
horizontal moveall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::moveall-horizontal-icon-style |
Style of the horizontal
moveall icon.
The moveall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
moveall-horizontal-icon-style and
define the override icon for the
moveall-horizontal-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active and
:disabled. |
af|selectManyShuttle::moveall-vertical |
Style of the background
gradient of the
vertical moveall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::moveall-vertical-icon-style |
Style of the vertical moveall
icon. The
moveall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
moveall-vertical-icon-style and define
the override icon for the
moveall-vertical-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active, and
:disabled. |
af|selectManyShuttle::options
|
Styles the container values.
|
af|selectManyShuttle::remove-horizontal |
Style of the background
gradient of the
horizontal remove icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::remove-horizontal-icon-style |
Style of the horizontal remove
icon.
The remove icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
remove-horizontal-icon-style and define
the override icon for the
remove-horizontal-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
af|selectManyShuttle::remove-vertical |
Style of the background
gradient of the
vertical remove icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::remove-vertical-icon-style |
Style of the vertical remove
icon. The
remove icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
remove-vertical-icon-style and define
the override icon for the
remove-vertical-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active, and
:disabled. |
af|selectManyShuttle::removeall-horizontal |
Style of the background
gradient of the
horizontal removeall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::removeall-horizontal-icon-style |
Style of the horizontal
removeall icon.
The removeall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
removeall-horizontal-icon-style and
define the override icon for the
removeall-horizontal-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
af|selectManyShuttle::removeall-vertical |
Style of the background
gradient of the
vertical removeall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectManyShuttle::removeall-vertical-icon-style |
Style of the vertical
removeall icon.
The removeall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
removeall-vertical-icon-style and
define the override icon for the
removeall-vertical-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
Style Selectors
|
Description |
Conditions |
af|selectOrderShuttle |
The selector on the root dom
element of the
component. |
af|selectOrderShuttle::access-key |
Style on the access-key for
the label.
Includes .AFFormAccessKeyStyle:alias. |
af|selectOrderShuttle::container |
Styles the containers in the
shuttle. |
af|selectOrderShuttle::content
|
Styles the containers in the
shuttle. |
af|selectOrderShuttle::content-input |
Styles the checkboxes inside
the
shuttle containers. |
af|selectOrderShuttle::desc-area |
Styles the item description
inside the
description box. |
af|selectOrderShuttle::desc-cell |
Styles the description box.
|
af|selectOrderShuttle::description |
Styles the description header
in the
description box. |
af|selectOrderShuttle::dynamic-help-icon-style |
Style the dynamic help icon.
By default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active, and :disabled. |
af|selectOrderShuttle::header
|
Styles the leading and
trailing header. |
af|selectOrderShuttle::icon-container |
Styles the icon area between
the
containers. |
af|selectOrderShuttle::icon-label |
Styles the label of the
move/remove
icons. |
af|selectOrderShuttle::label
|
Style on the label of the
af:selectOrderShuttle component. |
af|selectOrderShuttle::item
|
Style on the items in the
SelectOrderShuttle. |
af|selectOrderShuttle::item-label |
Styles the label of the items,
that are
present in the containers. |
af|selectOrderShuttle::move-bottom-icon-style |
Style of the move-bottom icon.
The
move-bottom icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-bottom-icon-style and define the
override icon for the move-bottom-icon.
Tip: If you skin the background-image,
you may also want to skin it for
:hover, :active, and :disabled. |
af|selectOrderShuttle::move-down-icon-style |
Style of the move-down icon.
The
move-down icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-down-icon-style and define the
override icon for the move-down-icon.
Tip: If you skin the background-image,
you may also want to skin it for
:hover, :active, and :disabled. |
af|selectOrderShuttle::move-horizontal |
Style of the background
gradient of the
horizontal move icon. Tip: If you skin
the background gradient, you may also want
to skin it for :hover, :active and :disabled. |
af|selectOrderShuttle::move-horizontal-icon-style |
Style of the horizontal move
icon. The
move icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-horizontal-icon-style and define
the override icon for the
move-horizontal-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active, and
:disabled. |
af|selectOrderShuttle::move-top-icon-style |
Style of the move-top icon.
The
move-top icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-top-icon-style and define the
override icon for the move-top-icon.
Tip: If you skin the background-image,
you may also want to skin it for
:hover, :active, and :disabled. |
af|selectOrderShuttle::move-up-icon-style |
Style of the move-up icon. The
move-up
icon is specified as a background-image
in this key. To override the default
icon, set -tr-inhibit: background-image
in the move-up-icon-style and define
the override icon for the move-up-icon.
Tip: If you skin the background-image,
you may also want to skin it for
:hover, :active, and :disabled. |
af|selectOrderShuttle::move-vertical |
Style of the background
gradient of the
vertical move icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::move-vertical-icon-style |
Style of the vertical move
icon. The
move icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
move-vertical-icon-style and define the
override icon for the
move-vertical-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active, and
:disabled. |
af|selectOrderShuttle::moveall-horizontal |
Style of the background
gradient of the
horizontal moveall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::moveall-horizontal-icon-style |
Style of the horizontal
moveall icon.
The moveall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
moveall-horizontal-icon-style and
define the override icon for the
moveall-horizontal-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
af|selectOrderShuttle::moveall-vertical |
Style of the background
gradient of the
vertical moveall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::moveall-vertical-icon-style |
Style of the vertical moveall
icon. The
moveall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
moveall-vertical-icon-style and define
the override icon for the
moveall-vertical-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active, and
:disabled. |
af|selectOrderShuttle::options
|
Styles the container values.
|
af|selectOrderShuttle::remove-horizontal |
Style of the background
gradient of the
horizontal remove icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::remove-horizontal-icon-style |
Style of the horizontal remove
icon.
The remove icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
remove-horizontal-icon-style and define
the override icon for the
remove-horizontal-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
af|selectOrderShuttle::remove-vertical |
Style of the background
gradient of the
vertical remove icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::remove-vertical-icon-style |
Style of the vertical remove
icon. The
remove icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
remove-vertical-icon-style and define
the override icon for the
remove-vertical-icon. Tip: If you skin
the background-image, you may also want
to skin it for :hover, :active, and
:disabled. |
af|selectOrderShuttle::removeall-horizontal |
Style of the background
gradient of the
horizontal removeall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::removeall-horizontal-icon-style |
Style of the horizontal
removeall icon.
The removeall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
removeall-horizontal-icon-style and
define the override icon for the
removeall-horizontal-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
af|selectOrderShuttle::removeall-vertical |
Style of the background
gradient of the
vertical removeall icon. Tip: If you skin
the background gradient, you
may also want to skin it for :hover,
:active and :disabled. |
af|selectOrderShuttle::removeall-vertical-icon-style |
Style of the vertical
removeall icon.
The removeall icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image in the
removeall-vertical-icon-style and
define the override icon for the
removeall-vertical-icon. Tip: If you
skin the background-image, you may also
want to skin it for :hover, :active,
and :disabled. |
Icon Selectors
|
Description |
af|selectOrderShuttle::changed-icon |
The icon that will render when
the
changed attribute is true. Includes
.AFChangedIcon:alias. |
af|selectOrderShuttle::dynamic-help-icon |
Icon that can be used instead
of a
background-image on
af|selectOrderShuttle::dynamic-help-icon-style.
By default this is null. If you use
this
af|selectOrderShuttle::dynamic-help-icon-style
can then be used for background colors,
etc. |
af|selectOrderShuttle::move-bottom-disabled-icon |
Overrides the default disabled
move-bottom icon. |
af|selectOrderShuttle::move-bottom-icon |
Overrides the default
move-bottom icon. |
af|selectOrderShuttle::move-down-disabled-icon |
Overrides the default disabled
move-down icon. |
af|selectOrderShuttle::move-down-icon |
Overrides the default
move-down icon. |
af|selectOrderShuttle::move-horizontal-disabled-icon |
Overrides the default disabled
horizontal move icon. |
af|selectOrderShuttle::move-horizontal-icon |
Overrides the default
horizontal move
icon. |
af|selectOrderShuttle::move-top-disabled-icon |
Overrides the default disabled
move-top
icon. |
af|selectOrderShuttle::move-top-icon |
Overrides the default move-top
icon. |
af|selectOrderShuttle::move-up-disabled-icon |
Overrides the default disabled
move-up
icon. |
af|selectOrderShuttle::move-up-icon |
Overrides the default move-up
icon. |
af|selectOrderShuttle::move-vertical-disabled-icon |
Overrides the default disabled
vertical
move icon. |
af|selectOrderShuttle::move-vertical-icon |
Overrides the default vertical
move
icon. |
af|selectOrderShuttle::moveall-horizontal-disabled-icon |
Overrides the default disabled
horizontal moveall icon. |
af|selectOrderShuttle::moveall-horizontal-icon |
Overrides the default
horizontal
moveall icon. |
af|selectOrderShuttle::moveall-vertical-disabled-icon |
Overrides the default disabled
vertical
moveall icon. |
af|selectOrderShuttle::moveall-vertical-icon |
Overrides the default vertical
moveall
icon. |
af|selectOrderShuttle::remove-horizontal-disabled-icon |
Overrides the default disabled
horizontal remove icon. |
af|selectOrderShuttle::remove-horizontal-icon |
Overrides the default
horizontal remove
icon. |
af|selectOrderShuttle::remove-vertical-disabled-icon |
Overrides the default disabled
vertical
remove icon. |
af|selectOrderShuttle::remove-vertical-icon |
Overrides the default vertical
remove
icon. |
af|selectOrderShuttle::removeall-horizontal-disabled-icon |
Overrides the default disabled
horizontal removeall icon. |
af|selectOrderShuttle::removeall-horizontal-icon |
Overrides the default
horizontal
removeall icon. |
af|selectOrderShuttle::removeall-vertical-disabled-icon |
Overrides the default disabled
vertical
removeall icon. |
af|selectOrderShuttle::removeall-vertical-icon |
Overrides the default vertical
removeall icon. |
Style Selectors
|
Description |
Conditions |
af|showDetailHeader |
Selector that renders on the
root dom element
of the component. |
af|showDetailHeader::title-table |
The style for the table
containing the
header. Generally this will not be
modified, but this allows for more
flexible skinning of the title in
general so that under certain
curcumstances, it can be styled to
match the content container. This style
class supports the :disclosed
pseudo-class when the header is
disclosed. |
af|showDetailHeader::title-start$ |
The style for the starting
cell of the
header. Generally this is the
decoration on the left side of the
screen and can be used to create
rounded edges. The value for "$" is a
number between 1 and 5 signifying the
five header types. |
Only used by fusion skins.
|
af|showDetailHeader::title$
|
The style for the main part of
the
header. It is the section that
immediately follows the
"af|showDetailHeader::title-start$"
key. The value for $ is a number
between 1 and 5 signifying the five
header types. |
af|showDetailHeader::title-end$ |
The style for the ending cell
of the
header. Generally this is the
decoration on the right side of the
screen and can be used to create
rounded edges. It will immediately
follow the The value for "$" is a
number between 1 and 5 signifying the
five header types. |
Only used by fusion skins.
|
af|showDetailHeader::disclosure-icon-container |
Applied to the container for
the
disclosure icon. |
af|showDetailHeader::undisclosed-icon-style |
Style on the icon that is
shown when
the panel is undisclosed (collapsed).
The icon is specified as a
background-image in this key. To use
text or an img element instead of a
background-image, set -tr-inhibit:
background-image in the
undisclosed-icon-style and define the
icon for the undisclosed-icon key. |
af|showDetailHeader::disclosed-icon-style |
Style on the icon that is
shown when
the panel is disclosed (expanded). The
icon is specified as a background-image
in this key. To use text or an img
element instead of a background-image,
set -tr-inhibit: background-image in
the disclosed-icon-style and define the
icon for the disclosed-icon key. |
af|showDetailHeader::disclosure-link |
Selector for the anchor
element that
contains the disclosure icon. |
af|showDetailHeader::icon-style |
Applied to the element
containing the
specified icon if messageType is set to
null. Otherwise the icon associated
with the message type is displayed in
the container. |
af|showDetailHeader::title-text$ |
Styles the "header" element
inside the
title of the element specified by the
af|showDetailHeader::title$ key. This
element surrounds the header text. The
value for "x" is a number between 1 and
5 signifying the five header types.If
no message type is specified or message
type is set to none then none of these
pseudo-classes will be present. |
af|showDetailHeader::context-container |
The style for the element
containing
the contents of the context facet. This
will be placed directly after the
header text. |
af|showDetailHeader::instruction-text |
Styles the text that might
come from
the helpTopicId. |
af|showDetailHeader::dynamic-help-icon-style |
Style the dynamic help icon.
By default
the dynamic-help-icon is null, and this
style has a background-image that you
can override. Includes
.AFDynamicHelpIconStyle:alias. Tip: If
you skin the background-image, you may
also want to skin it for :hover,
:active, and :disabled. |
af|showDetailHeader::toolbar
|
This is a potential sub
section of the
"af|showDetailHeader::titlex". It
applies to end-aligned toolbars in the
title section. This section is only
present if there is either a toolbar or
menuBar facet (or both) included in the
showDetailHeader. |
af|showDetailHeader::help-link-container |
If there is "dynamic help" for
this
header, and there is not a help topic
with dynamic content, then this style
pertains to the element containing the
dynamic help link. This will be place
directly after the context facet. |
af|showDetailHeader::info |
Applied to the element
containing the
contents of the "info" facet. When help
is available, this element may also
contain the contents of the legend. |
af|showDetailHeader::content$
|
The style for the content
region of the
header. This is the area where the
components children will be rendered.
It is located directly below the
af|showDetailHeader::title$ key. The
value for $ is a number between 1 and 5
signifying the five header types. |
Style
Selectors |
Description |
Conditions
|
af|table |
Styles the root dom element of the component.
Use the .AFTableCellPadding:alias and
.AFTableCellData:alias to set padding and
.AFTableCellData:alias and
.AFTableCellHeaderBorder:alias to set borders.
All table cells, data and headers, include the
.AFTableCellPadding:alias. Header cells also
include .AFTableCellHeaderBorder:alias. Data
cells also include .AFTableCellData:alias.
Please note that when no vertical grid lines
are present in the table extra padding may need
to be added to the AFTableCellData:alias to
compensate for the
.AFTableCellHeaderBorder:alias (and
-tr-border-right-width property). For e.g. to
increase the padding of the data header cells
in the table to 8px you extend the skin
selectors like below. Remember that the simple
skin's CSS properties are the base, and you are
extending them, so there is no need to redefine
any CSS properties that you are not changing.:
/* change the -tr-padding-left-width and
-tr-padding-right-width to 8px */
af|table {
-tr-padding-left-width: 8;
-tr-padding-right-width: 8;
}
/* a table cell (Header and data cell) includes this
alias, so change the padding-left
and padding-right to 8px to match the -tr-padding
properties */
.AFTableCellPadding:alias {
padding-left:8px;
padding-right:8px;
}
/* data-cell and banded-data-cell include this alias
as well as the .AFTableCellPadding:alias.
.AFTableCellPadding:alias is also in the header cells.
For the case when there
is no vertical gridline, we need to add an extra pixel
to the padding to compensate for no border.
If we didn't do this, the header that has a border and
the data cells that don not would not line up.*/
.AFTableCellData:alias {
/* Use 1px more for padding to compensate for lack of
borders in the data cells
but their presence in the column headers*/
padding-right: 9px;
}
/* When we have a vertical line in the table cell, we
don't need the
extra pixel we put in .AFTableCellData:alias */
.AFTableCellDataVGrid:alias {
padding-right: 8px;
}
|
af|table::column-resize-indicator |
Styles the column resize
indicator when
the user resizes a column in the table. |
af|table::data-row |
Styles the row of the
table that has
data (as opposed to the header). Use
this selector as an ancestor to
af|column::data-cell or
af|column::banded-data-cell. |
af|table::status-message
|
Styles the status
message that shows up
when the user scrolls the table.
Includes the
.AFDataCollectionStatusMessage:alias. |
af|table::record-range-footer |
Style used for record
range in
printable pages. |
af|table::detail-area-cell |
Style for the area where
the detail
stamp is rendered. This includes the
.AFTableCellDataHGridBorder:alias. |
af|table::disclosed-icon-style |
Style of the disclosed
icon used with
the detailStamp facet in table. The
disclosed icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image and
define the override icon for the
disclosed-icon. Includes
.AFClickableImageAnchor:alias |
af|table::undisclosed-icon-style |
Style of the undisclosed
icon used with
the detailStamp facet in table. The
undisclosed icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image and
define the override icon for the
undisclosed-icon. Includes
.AFClickableImageAnchor:alias |
af|table::navbar |
Used to style the record
navigation bar on tablet devices. |
af|table::navbar-page-input |
Used to style the page
input of navigation bar. |
af|table::navbar-row-range-text |
Used to style message
displaying the number of rows in the record navigation bar.
Please use .AFTableNavBarRowRangeText:alias instead. |
af|table::navbar-separator |
Used to style the
separator that separates the number of records message from
the page navgation icons/links. Please use
.AFTableNavBarSeparator:alias instead. |
af|table::navbar-page-container |
Used to style the
container of the page navigation links. Please use
.AFTableNavBarPageContainer:alias instead. |
af|table::navbar-gap-page |
Used to style the
element indicating gaps in the page links. Please use
.AFTableNavBarPageGap:alias instead. |
af|table::navbar-current-page |
Used to style element
indicating the current page in the page links displayed in
the record navigation bar. Please use
.AFTableNavBarCurrentPage:alias instead. |
af|table::navbar-page-link |
Used to style a link
indicating a navigation page displayed in the record
navigation bar. Please use .AFTableNavBarPageLink:alias
instead. |
af|table::navbar-previous-page-icon-style |
Use aliases
.AFTableNavBarPreviousPageIconStyle:alias,
.AFTableNavBarPreviousPageIconStyleDisabled:alias and
.AFTableNavBarPreviousPageIconStyleActivated:alias |
af|table::navbar-first-page-icon-style |
Use aliases
.AFTableNavBarFirstPageIconStyle:alias,
.AFTableNavBarFirstPageIconStyleDisabled:alias and
.AFTableNavBarFirstPageIconStyleActivated:alias |
af|table::navbar-next-page-icon-style |
Use aliases
.AFTableNavBarNextPageIconStyle:alias,
.AFTableNavBarNextPageIconStyleDisabled:alias and
.AFTableNavBarNextPageIconStyleActivated:alias |
af|table::navbar-last-page-icon-style |
Use aliases
.AFTableNavBarLastPageIconStyle:alias,
.AFTableNavBarLastPageIconStyleDisabled:alias and
.AFTableNavBarLastPageIconStyleActivated:alias |
.AFTableCellPadding:alias |
Specifies the padding of
the cell in a
column/table. If you want to change the padding
of a cell, do it with this alias instead of
with selectors af|column::column-header-cell,
af|column::column-footer-cell,
af|column::row-header-cell,
af|column::data-cell, and
af|column::banded-data-cell. This way you only
have to change it in one place. The
padding-right and padding-left defined here
must match the af|table's skin property
-tr-padding-left-width,
-tr-padding-right-width. Note that when the
header has borders and there are no borders in
the table data area, then
.AFTableCellData:alias also needs padding set
and it needs to compensate for the no borders
to keep things lined up. |
.AFTableCellData:alias
|
Specifies the border and
padding of the data
cell in a table. If you want to change the
right/left border of a cell, do it with this
alias instead of with selectors
af|column::data-cell and
af|column::banded-data-cell. This way you only
have to change it in one place. The
border-right and border-left defined here must
match the af|table's skin property
-tr-border-left-width, -tr-border-right-width.
Padding is also set in this alias. By default,
the padding-right is one pixel more than that
in -tr-padding-right to compensate for no
borders. |
.AFTableCellHeaderBorder:alias |
Specifies the borders of
the table row header
and column header cells. The border-right and
border-left defined here must match the
af|table's skin property -tr-border-left-width,
-tr-border-right-width |
.AFTableCellHeaderBackground:alias |
Specifies the background
of the table row header
and column header cells. |
.AFTableCellFooterBorder:alias |
Specifies the borders of
the table row header
and column header cells. The border-right and
border-left defined here must match the
af|table's skin property -tr-border-left-width,
-tr-border-right-width |
.AFTableCellFooterBackground:alias |
Specifies the background
of the table row footer
and column footer cells. |
.AFTableCellBandedBackground:alias |
Specifies the background
of the af|column::banded-data-cell. |
.AFTableCellDataHGrid:alias |
Specifies the border and
padding for data cells
when horizontal gridding is enabled. |
.AFTableCellDataVGrid:alias |
Specifies the border and
padding for data cells
when vertical gridding is enabled. |
.AFTableCellDataVHGrid:alias |
Specifies the border and
padding for data cells
when both horizontal and vertical gridding is
enabled. Includes .AFTableCellDataHGrid:alias
and .AFTableCellDataVGrid:alias. |
.AFTableCellFrozenBorder:alias |
Specifies the right edge
border for column
cells that are at frozen. e.g. border-right:
1px solid #9900FF;. Specify
.AFTableCellFrozenBorder:alias:rtl as
border-left: 1px solid #9900FF;border-right:
none; |
.AFTableCellFrozenBorderToEnd:alias |
Specifies the right edge
border for column
cells that are at frozen. e.g. border-right:
1px solid #9900FF;. Specify
.AFTableCellFrozenBorderToEnd:alias:rtl as
border-left: 1px solid #9900FF;border-right:
none; |
.AFTableCellDataSelected:alias |
Specifies the style on
the selected data cells;
e.g. background-color. This is a shortcut for
"af|table::data-row:selected
af|column::data-cell" and
"af|column::data-cell:selected" |
.AFTableCellDataSelectedFocused:alias |
Specifies the style on
the selected data cells
that are part of currently active row; e.g.
background-color. The active row is the one
that was last selected by the user. The active
row is valid only when the table has focus.
This is a shortcut for
"af|table::data-row:selected:focused
af|column::data-cell". |
.AFTableCellDataSelectedBanded:alias |
Specifies the style on
the selected, banded
data cells; e.g. background-color. This is a
shortcut for "af|table::data-row:selected
af|column::banded-data-cell" and
"af|column::banded-data-cell:selected" |
.AFTableCellDataSelectedBandedFocused:alias |
Specifies the style on
the selected, banded
data cells that are part of currently active
row; e.g. background-color. The active row is
the one that was last selected by the user. The
active row is valid only when the table has
focus. This is a shortcut for
"af|table::data-row:selected:focused
af|column::banded-data-cell". |
.AFTableCellDataSelectedInactive:alias |
Specifies the style on
the selected, inactive
data cells; e.g. background-color. |
.AFTableCellDataSelectedBandedInactive:alias |
Specifies the style on
the selected, inactive,
banded data cells; e.g. background-color. |
.AFTableCellDataDropTargetColor:alias |
Specifies the background
color for data cells
that are a drop target during DnD operation. |
.AFTableHeaderCellDataDropTargetColor:alias |
Specifies the background
color for header cells
that are a drop target during DnD operation. |
.AFTableCellSubtotal
|
Specifies the style on
the subtotal cell.
To style a data cell as a subtotal cell,
use
"af|column::data-cell.AFTableCellSubtotal"
in your skin definition and
styleClass="AFTableCellSubtotal" in the
tag (typically this value would come
from an EL expression since not every
cell would be a subtotal cell). |
.AFTableNavBarRowRangeText:alias |
Used to style message
displaying the number of rows in the record navigation bar.
|
.AFTableNavBarSeparator:alias |
Used to style the
separator that separates the number of records message from
the page navgation icons/links. |
.AFTableNavBarPageContainer:alias |
Used to style the
container of the page navigation links. |
.AFTableNavBarPageGap:alias |
Used to style the
element indicating gaps in the page links. |
.AFTableNavBarCurrentPage:alias |
Used to style element
indicating the current page in the page links displayed in
the record navigation bar. |
.AFTableNavBarPageLink:alias |
Used to style a link
indicating a navigation page displayed in the record
navigation bar. |
.AFTableNavBarPreviousPageIconStyle:alias |
Style of the previous
page icon used in the record navigation bar.
This icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image and
define the override icon for the
navbar-previous-page-icon. Includes
.AFClickableImageAnchor:alias. |
.AFTableNavBarFirstPageIconStyle:alias |
Style of the first page
icon used in the record navigation bar.
This icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image and
define the override icon for the
navbar-previous-page-icon. Includes
.AFClickableImageAnchor:alias. |
.AFTableNavBarNextPageIconStyle:alias |
Style of the next page
icon used in the record navigation bar.
This icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image and
define the override icon for the
navbar-previous-page-icon. Includes
.AFClickableImageAnchor:alias. |
.AFTableNavBarLastPageIconStyle:alias |
Style of the last page
icon used in the record navigation bar.
This icon is specified as a
background-image in this key. To
override the default icon, set
-tr-inhibit: background-image and
define the override icon for the
navbar-previous-page-icon. Includes
.AFClickableImageAnchor:alias. |
.AFTableNavBarPreviousPageIconStyleDisabled:alias |
Used to style the
disabled state of the previous page icon used in the record
navigation bar. |
.AFTableNavBarFirstPageIconStyleDisabled:alias |
Used to style the
disabled state of the first page icon used in the record
navigation bar. |
.AFTableNavBarNextPageIconStyleDisabled:alias |
Used to style the
disabled state of the next page icon used in the record
navigation bar. |
.AFTableNavBarLastPageIconStyleDisabled:alias |
Used to style the
disabled state of the last page icon used in the record
navigation bar. |
.AFTableNavBarPreviousPageIconStyleActivated:alias |
Used to style the
clicked state of the previous page icon used in the record
navigation bar. |
.AFTableNavBarFirstPageIconStyleActivated:alias |
Used to style the
clicked state of the frist page icon used in the record
navigation bar. |
.AFTableNavBarNextPageIconStyleActivated:alias |
Used to style the
clicked state of the next page icon used in the record
navigation bar. |
.AFTableNavBarLastPageIconStyleActivated:alias |
Used to style the
clicked state of the last page icon used in the record
navigation bar. |
.AFC2EContentFocus:alias
|
Used for the C2E content
focus style. |
.AFC2EContentHover:alias
|
Used for the C2E content
focus style. |
.AFC2EContentTransparent:alias |
Used to style away the
background and border of the component's content. |
.AFC2EIconFocus:alias
|
Used for the C2E icon
when the component has focus. |
.AFC2EIconHover:alias
|
Used for the C2E icon
when the component has hover. for C2E icon, it's the same as
focus. |
.AFC2EIconStyleFocus:alias |
Used for the C2E
icon-style when the component has focus. |
.AFC2EIconStyleHover:alias |
Used for the C2E
icon-style when the component has hover. for C2E icon, it's
the same as focus. |
.AFC2EIconStyleTransparent:alias |
Used to style away the
component's icon style element, if needed. |
.AFC2EIconTransparent:alias |
Used by components that
have an icon selector. |
Style
Selectors |
Description |
Conditions
|
af|train |
Top level style class
for the entire train
component. With alta v1.1 responsive design based new
version of
train is supported. By default train compliant with alta
v1.1
responsive design requirement will be rendered.
Even though some selectors are retained in new train, due to
dom
structure changes to support flex based layout and
animation, new
selectors are added and many modified. Please note since new
responsive
design based train is the way forward, all the selectors
which
are shared between the two verisons are marked as shared
between
two versions. The ones which are not supported with new
train
version will be marked as not supported with new responsive
mode.
|
af|train::body |
Styles the container
which encloses
both the train content and the start
and end overflow indicators.
Not supported with new responsive mode. |
af|train::start-overflow-indicator |
Styles the start
overflow indicator.
The start indicator is specified using
a background-image.
Not supported with new responsive mode. |
af|train::end-overflow-indicator |
Styles the end overflow
indicator. The
end indicator is specified using a
background-image.
Not supported with new responsive mode. |
af|train::content |
Styles the container
which encloses the
train content (excluding the overflow
indicators). |
af|train::parent-start
|
Styles the block that
encloses the
parent-start elements, such as its icon
and label. Shared between the two versions
of train. |
af|train::parent-end
|
Styles the block that
encloses the
parent-end elements, such as its icon
and label. Shared between the two versions
of train. |
af|train::parent-start-icon-cell |
Styles the cell that
displays the
parent start icon.
Not supported with new responsive mode. |
af|train::parent-end-icon-cell |
Styles the cell that
displays the
parent end icon.
Not supported with new responsive mode. |
af|train::parent-start-content |
Styles the cell that
displays the
parent process name at the beginning of
the train. Shared between the two versions
of train. |
af|train::parent-end-content |
Styles the cell that
displays the
parent process name at the end of the
train. Shared between the two versions
of train. |
af|train::stop-container
|
Styles the main outer
container for individual train stops. |
af|train::stop-connector
|
Styles individual stop
connectors which are disconnected on initial rendering.
These connectors are joined on click using join animation.
|
af|train::join |
Styles all joins between
stops.
Not supported with new responsive mode. |
af|train::stop |
Cell that encloses all
the stop
elements including icon and content. |
af|train::join-wrapper
|
Styles the outer node of
the join fill(draw animation)
which runs through the train stops.
|
af|train::join-node |
Styles the join fill
node(draw animation)which runs through the train stops.
The height of this node is 100% of the train height with a
2px width.
Join animation draws through this node to connect the train
stops.
|
af|train::join-fill |
Join fill animation
which draws through the
stops with a transition time of 1s.
|
af|train::stop-icon-cell
|
Styles the cell that
displays the stop
icon. Shared between the two versions of train. |
af|train::stop-icon-selected |
Used to set the
background image for
the selected stop.
Not supported with new responsive mode. |
af|train::stop-icon-disabled |
Used to set the
background image for a
disabled stop.
Not supported with new responsive mode. |
af|train::stop-icon-unvisited |
To set the background
image for an
unvisited enabled stop. Tip: If you
skin the background-image, you may also
want to skin it for :hover and :active.
Not supported with new responsive mode. |
af|train::stop-icon-visited |
To set the background
image for a
visited stop. Tip: If you skin the
background-image, you may also want to
skin it for :hover and :active.
Not supported with new responsive mode. |
af|train::stop-index-selected |
Styles the stop index
block when selected,
Which displays the numbered stop. |
af|train::stop-index-disabled |
Styles the stop index
block when disabled,
Which displays the numbered stop. |
af|train::stop-index-unvisited |
Styles the unvisited
stop index block,
Which displays the numbered stop. |
af|train::stop-index-visited |
Styles the visited stop
index block,
Which displays a check mark image to indicate the stop is
visited.
Visited stop index block displays a check mark CSS
background image
instead of a numbered stop.
|
af|train::stop-content
|
Content block that
displays the stop name.
Shared between the two versions of train. |
af|train::stop-link |
To skin all links that
display the stop
name.
Shared between the two versions of train. |
af|train::stop-icon-error |
To set the background
image for a stop
that is in error. This is overlaid on
top of the stop icon.
Shared between the two versions of train. |
af|train::stop-icon-warning |
To set the background
image for a stop
that has a warning. This is overlaid on
top of the stop icon.
Shared between the two versions of train. |
af|train::stop-icon-information |
To set the background
image for a stop
that has some information. This is
overlaid on top of the stop icon. |
af|train::stop-icon-confirmation |
To set the background
image for a stop
that has a confirmation status. This is
overlaid on top of the stop icon.
Shared between the two versions of train. |
af|train-vertical |
Top level class for the
train in the vertical
layout. -vertical is used as a hint on the
af|train root skin rather than a pseudo-class.
This is because the layout of the vertical
train is different from the horizontal and
requires different skin selectors, hence they
cannot be shared between the two.
With alta v1.1 responsive design based new version of
train is supported. By default train compliant with alta
v1.1
responsive design requirement will be rendered. Even though
some
selectors are retained in the new train rendering, due to
dom
structure changes to support flex based layout and
animation, new
selectors are added and many modified. Please note, since
new responsive
design based train is the way forward, all the selectors
which
are shared between the two verisons are marked as shared
between
two versions. The ones which are not supported with new
train
version will be marked as not supported with new responsive
mode. |
af|train-vertical::body
|
Styles the container
which encloses
both the train content and the top
and bottm overflow indicators.
Not supported with new responsive mode. |
af|train-vertical::top-overflow-indicator |
Styles the top overflow
indicator.
The top indicator is specified using
a background-image.
Not supported with new responsive mode. |
af|train-vertical::bottom-overflow-indicator |
Styles the bottom
overflow indicator. The
bottom indicator is specified using a
background-image.
Not supported with new responsive mode. |
af|train-vertical::parent-start-icon-cell |
For the cell that
displays the
parent-start-icon.
Not supported with new responsive mode. |
af|train-vertical::parent-end-icon-cell |
For the cell that
displays the
parent-end-icon.
Not supported with new responsive mode. |
af|train-vertical::parent-start-content |
For the cell that
displays the label of
the parent train at the top of the
vertical train.
Shared between the two versions
of train. |
af|train-vertical::parent-end-content |
For the cell that
displays the label of
the parent train at the bottom of the
vertical train.
Shared between the two versions
of train. |
af|train-vertical::join
|
For joins between stops
in the vertical
train. Use pseudo-classes :disabled,
:unvisited, :train-visited to style
joins before a disabled
unvisited-enabled and visited-enabled
(including the currently selected stop)
respectively.
Not supported with new responsive mode. |
af|train-vertical::join-wrapper |
Styles the outer node of
the join fill(draw animation)which
runs through the train stops.
|
af|train-vertical::join-node |
Styles the join fill
node(draw animation)which runs through the train stops.
The width of this node is 100% of the train width with a 2px
height.
Join animation draws through this node to connect the train
stops.
|
af|train-vertical::join-fill |
Join fill animation
which draws through the
stop with a transition time of 1s.
|
af|train-vertical::stop
|
For a cell that displays
the entire
stop info. Only used in the vertical
layout.
Shared between the two versions
of train. |
af|train-vertical::stop-icon-cell |
For the cell that
displays the stop
icon. Shared between the two versions
of train. |
af|train-vertical::stop-icon-selected |
To set the background
image for the
currently selected stop.
Not supported with new responsive mode. |
af|train-vertical::stop-icon-disabled |
To set the background
image for a
disabled stop.
Not supported with new responsive mode. |
af|train-vertical::stop-icon-unvisited |
To set the background
image for an
unvisited enabled stop. Tip: If you
skin the background-image, you may also
want to skin it for :hover and :active.
Not supported with new responsive mode. |
af|train-vertical::stop-icon-visited |
To set the background
image for a
visited enabled stop. Tip: If you skin
the background-image, you may also want
to skin it for :hover and :active.
Not supported with new responsive mode. |
af|train-vertical::stop-index-selected |
Supported in Alta v1.1
version of train only. Styles the stop index block when
selected,
Which displays the numbered stop. |
af|train-vertical::stop-index-disabled |
Supported in Alta v1.1
version of train only. Styles the stop index block when
disabled,
Which displays the numbered stop. |
af|train-vertical::stop-index-unvisited |
Supported in Alta v1.1
version of train only. Styles the unvisited stop index
block,
Which displays the numbered stop. |
af|train-vertical::stop-index-visited |
Supported in Alta v1.1
version of train only. Styles the visited stop index block,
Which displays a check mark image to indicate the stop is
visited.
Visited stop index block displays a check mark CSS
background image
instead of a numbered stop.
|
af|train-vertical::stop-content |
For the cell that
displays the label of
the stop, in a vertical train.
Shared between the two versions
of train.
|
af|train-vertical::stop-link |
For the link that
displays the label of
the stop, in a vertical train.
Shared between the two versions
of train. |
af|train-vertical::stop-icon-error |
To set the background
image for a stop
that is in error (for vertical train).
This is overlaid on top of the stop
icon.
Shared between the two versions
of train. |
af|train-vertical::stop-icon-warning |
To set the background
image for a stop
that has a warning (for vertical
train). This is overlaid on top of the
stop icon.
Shared between the two versions
of train. |
af|train-vertical::stop-icon-information |
To set the background
image for a stop
that has some information (for vertical
train). This is overlaid on top of the
stop icon.
Shared between the two versions
of train. |
af|train-vertical::stop-icon-confirmation |
To set the background
image for a stop
that has a confirmation status (for
vertical train). This is overlaid on
top of the stop icon.
Shared between the two versions
of train. |
.AFTrainDefault:alias
|
This alias is included
in both af|train and af|train-vertical, so it is
a convenience if you need to style both selectors the same,
you can use this alias. |
Icon
Selectors |
Description |
af|train::start-overflow-icon |
Overrides the
start-overflow-indicator
background image with an icon (high
contrast mode). Icons can be text or
img elements, e.g.
af|train::start-overflow-icon {content
"X"} or af|train::start-overflow-icon
{content: url(...)}. Use this key
instead of the start-overflow-indicator
key to define the override icon. To
inhibit the background-image, set
-tr-inhibit: background-image in the
start-overflow-indicator key.
Not supported with new responsive mode. |
af|train::end-overflow-icon |
Overrides the
end-overflow-indicator
background image with an icon (high
contrast mode). Icons can be text or
img elements, e.g.
af|train::end-overflow-icon {content
"X"} or af|train::end-overflow-icon
{content: url(...)}. Use this key
instead of the end-overflow-indicator
key to define the override icon. To
inhibit the background-image, set
"-tr-inhibit: background-image" in the
end-overflow-indicator key.
Not supported with new responsive mode. |
af|train::parent-start-icon |
This icon is displayed
in the beginning
of a train to indicate that the current
train is a subtrain.
Shared between the two versions of train. |
af|train::parent-end-icon |
This icon is displayed
in the end of a
train to indicate that the current
train is a subtrain.
Shared between the two versions of train. |
af|train::selected-stop-icon |
Train Stop icon for the
currently
selected stop. This can be used instead
of a background-image on
af|train::stop-icon-selected . By
default this is null.
Not supported with new responsive mode. |
af|train::disabled-stop-icon |
Train Stop icon for a
disabled stop.
This can be used instead of a
background-image on
af|train::stop-icon-disabled . By
default this is null. |
af|train::unvisited-stop-icon |
Train Stop icon for an
unvisited
enabled stop. This can be used instead
of a background-image on
af|train::stop-icon-unvisited . By
default this is null.
Not supported with new responsive mode. |
af|train::visited-stop-icon |
Train Stop icon for a
visited enabled
stop. This can be used instead of a
background-image on
af|train::stop-icon-visited . By
default this is null.
Not supported with new responsive mode. |
af|train::stop-error-icon |
Message alert icon for a
stop that is
in error. This is overlaid on top of
the stop icon. This can be used instead
of a background-image on
af|train::stop-icon-error . By default
this is null.
Not supported with new responsive mode. |
af|train::stop-warning-icon |
Message alert icon for a
stop that has
a warning. This is overlaid on top of
the stop icon. This can be used instead
of a background-image on
af|train::stop-icon-warning .By default
this is null.
Not supported with new responsive mode. |
af|train::stop-information-icon |
Message alert icon for a
stop that has
some information. This is overlaid on
top of the stop icon. This can be used
instead of a background-image on
af|train::stop-icon-information . By
default this is null. |
af|train::stop-confirmation-icon |
Message alert icon for a
stop that has
a confirmation status. This is overlaid
on top of the stop icon. This can be
used instead of a background-image on
af|train::stop-icon-confirmation . By
default this is null.
Not supported with new responsive mode. |
af|train-vertical::top-overflow-icon |
Overrides the
top-overflow-indicator
background image with an icon (high
contrast mode). Icons can be text or
img elements, e.g.
af|train-vertical::top-overflow-icon {content
"X"} or af|train-vertical::top-overflow-icon
{content: url(...)}. Use this key
instead of the top-overflow-indicator
key to define the override icon. To
inhibit the background-image, set
-tr-inhibit: background-image in the
top-overflow-indicator key.
Not supported with new responsive mode. |
af|train-vertical::bottom-overflow-icon |
Overrides the
bottom-overflow-indicator
background image with an icon (high
contrast mode). Icons can be text or
img elements, e.g.
af|train::bottom-overflow-icon {content
"X"} or af|train-vertical::bottom-overflow-icon
{content: url(...)}. Use this key
instead of the bottom-overflow-indicator
key to define the override icon. To
inhibit the background-image, set
"-tr-inhibit: background-image" in the
bottom-overflow-indicator key.
Not supported with new responsive mode. |
af|train-vertical::parent-start-icon |
This icon is displayed
at the top of
the train to indicate that the current
train is a subTrain of another train.
Shared between the two versions
of train. |
af|train-vertical::parent-end-icon |
This icon is displayed
at the bottom of
the train to indicate that the current
train is a subTrain of another train.
Shared between the two versions
of train. |
af|train-vertical::selected-stop-icon |
Train Stop icon for the
currently
selected stop (for vertical train).This
can be used instead of a
background-image on
af|train-vertical::stop-icon-selected .
By default this is null.
Not supported with new responsive mode. |
af|train-vertical::disabled-stop-icon |
Train Stop icon for a
disabled stop
(for vertical train).This can be used
instead of a background-image on
af|train-vertical::stop-icon-disabled .
By default this is null.
Not supported with new responsive mode. |
af|train-vertical::unvisited-stop-icon |
Train Stop icon for an
unvisited
enabled stop (for vertical train).This
can be used instead of a
background-image on
af|train-vertical::stop-icon-unvisited
. By default this is null.
Not supported with new responsive mode. |
af|train-vertical::visited-stop-icon |
Train Stop icon for a
visited enabled
stop (for vertical train).This can be
used instead of a background-image on
af|train-vertical::stop-icon-visited .
By default this is null.
Not supported with new responsive mode. |
af|train-vertical::stop-error-icon |
Message alert icon for a
stop that is
in error (for vertical train). This is
overlaid on top of the stop icon. This
can be used instead of a
background-image on
af|train-vertical::stop-icon-error . By
default this is null.
Not supported with new responsive mode. |
af|train-vertical::stop-warning-icon |
Message alert icon for a
stop that has
a warning (for vertical train). This is
overlaid on top of the stop icon. This
can be used instead of a
background-image on
af|train-vertical::stop-icon-warning .
By default this is null.
Not supported with new responsive mode. |
af|train-vertical::stop-information-icon |
Message alert icon for a
stop that has
some information (for vertical train).
This is overlaid on top of the stop
icon. This can be used instead of a
background-image on
af|train-vertical::stop-icon-information
. By default this is null.
Not supported with new responsive mode. |
af|train-vertical::stop-confirmation-icon |
Message alert icon for a
stop that has
a confirmation (for vertical train).
This is overlaid on top of the stop
icon. This can be used instead of a
background-image on
af|train-vertical::stop-icon-confiramtion
. By default this is null.
Not supported with new responsive mode. |