Actually I meant to say
2) :disabled, :active, :unvisited, :visited, :rtl are pseudo-classes that
represent a state and
3) overflow-next and overflow-prev, stop, join, join-overflow etc are pseudo
elements. As you mentioned all pseudo-elements can support many states and can
be in one or more states at the same time.
I have also attached a sample css that uses the styles referred to by the HTML
below. These need to be defined in the base-desktop.xss file.
SAMPLE STYLES FOR TRAIN
-----------------------
/***********************************
Train Styles
***********************************/
/* for the processTrain */
.af-train {
margin-left: auto;
margin-right: auto;
font-size:11px;
font-family:Tahoma;
}
/***********************************
Joins
***********************************/
/* for joins between the overflow icons and the stops */
.af|train::join-overflow {
min-width:20px;
width:100%;
height:1px;
}
/* join (between overflow and stop icons) in disabled state */
.af|train::join-overflow:disabled {
background-color: #A6B3C8;
}
/* join (between overflow and stop icons) in visited state */
.af|train::join-overflow:visited {
background-color: #72007C;
}
/* join (between overflow and stop icons) in unvisited state */
.af|train::join-overflow:unvisited {
background-color: #3463D3;
}
/* for joins between stops */
.af|train::join {
min-width:20px;
width:100%;
height: 1px;
}
/* join in visited state */
.af|train::join:visited {
background-color: #72007C;
}
/* join in unvisited state */
.af|train::join:unvisited {
background-color: #3463D3;
}
/* join in disabled state */
.af|train::join:disabled {
background-color: #A6B3C8;
}
/***********************************
Spacers
***********************************/
/* spacer used between stops */
.af|train::stop-spacer {
height: 1px;
width: 5px;
}
/* stop spacer in visited state */
.af|train::stop-spacer:visited {
background-color: #72007C;
}
/* stop spacer in unvisited state */
.af|train::stop-spacer:unvisited {
background-color: #3463D3;
}
/* stop spacer in disabled state */
.af|train::stop-spacer:disabled {
background-color: #A6B3C8;
}
/* spacer used between parent train and stops */
.af|train::parent-spacer {
height: 1px;
width: 5px;
}
/* spacer used for margins in the beginning and end of the train */
.af|train::margin-end,
.af|train::margin-start {
height: 1px;
width: 1px;
}
/***************************************
Icons: Parent Train, stop & Overflow
***************************************/
/* block that displays the parent start icon*/
.af|train::parent-start-icon-block
{
text-align:right;
}
/* block that displays the parent start icon*/
.af|train::parent-end-icon-block
{
text-align:left;
}
/* icon to indicate a parent process in the beginning of a sub train */
.af|train::parent-start-icon {
height:13px;
width:13px;
content:url(../images/stop-parent.png);
}
/* icon to indicate a parent process in the end of a sub train */
.af|train::parent-end-icon {
height:13px;
width:13px;
content:url(../images/stop-parent-end.png);
}
/* block that displays the overflow image */
.af|train::overflow-icon-block {
position:relative;top:-1px;
}
/* overflow start icon in visited state (indicates presence of previous steps)
*/
.af|train::overflow-start-icon:visited
{
height:13px;
width:13px;
content:url(../images/overflow-start-visited.png);
}
/* overflow start icon in disabled state (indicates presence of previous stops)
*/
.af|train::overflow-start-icon:disabled
{
height:13px;
width:13px;
content:url(../images/overflow-start-disabled.png);
}
/* overflow end icon in disabled state (indicates presence of more stops) */
.af|train::overflow-end-icon:disabled
{
height:13px;
width:13px;
content:url(../images/overflow-end-disabled.png);
}
/* overflow end icon in unvisited state (indicates presence of more stops) */
.af|train::overflow-end-icon:unvisited
{
height:13px;
width:13px;
content:url(../images/overflow-end-unvisited.png);
}
/* overflow end icon in visited state (indicates presence of visited stops in
the next set) */
.af|train::overflow-end-icon:visited
{
height:13px;
width:13px;
content:url(../images/overflow-end-unvisited.png);
}
/* block that displays a stop icon (active/disabled/visited/unvisited) */
.af|train::stop-icon-block
{
}
/* stop icon in visited state */
.af|train::stop-icon:visited {
height:13px;
width:13px;
content:url(../images/stop-visited.png);
}
/* stop icon in active state */
.af|train::stop-icon:active {
height:13px;
width:13px;
content:url(../images/stop-active.png);
}
/* stop icon in unvisited state */
.af|train::stop-icon:unvisited {
height:13px;
width:13px;
content:url(../images/stop-unvisited.png);
}
/* stop icon in disabled state */
.af|train::stop-icon:disabled {
height:13px;
width:13px;
content:url(../images/stop-disabled.png);
}
/************************************************
Labels and Links: parentTrain, overflow & stop
************************************************/
/*
content area in the beginning of the train, to display the parent process
name
*/
.af|train::parent-start-content
{
display:block;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align:right;
}
/* content area in the end of the train, to display the parent process name */
.af|train::parent-end-content
{
display:block;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align:left;
}
/*
content area to display the overflow label in the beginning and end of the
train
*/
.af|train::overflow-start-content,
.af|train::overflow-end-content
{
display:block;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align:center;
}
/* content area to display the stop name */
.af|train::stop-content
{
padding-left:2px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;
text-align:center;
}
/* content area that displays the name of the stop in visited state */
.af|train::stop-content:visited
{
}
/* block that displays the name of the stop in disabled state */
.af|train::stop-content:disabled
{
color:#737373;
}
/* block that displays the name of the stop in unvisited state */
.af|train::stop-content:unvisited
{
}
/* block that displays the name of the stop in active state */
.af|train::stop-content:active
{
font-weight:bold;
color:#000000;
text-align:center;
padding-left:5px;
padding-right:5px;
}
/* link for a stop */
.af|train::stop-link
{
text-decoration:none;
}
/* link for an unvisited stop */
.af|train::stop-link:unvisited
{
text-decoration:underline;
color:#003399;
}
/* link for an visited stop */
.af|train::stop-link:visited
{
text-decoration:underline;
color:#72007C;
}
/* link for an active stop */
.af|train::stop-link:active
{
color:#000000;
}
/* link for an disabled stop */
.af|train::stop-link:disabled
{
color:#737373;
}
/* link for an overflow in disabled state */
.af|train::overflow-link:disabled
{
text-decoration:none;
color:#737373;
}
/* link for an overflow in visited state */
.af|train::overflow-link:visited
{
text-decoration:underline;
color:#72007C;
}
/* link for an overflow in unvisited state */
.af|train::overflow-link:unvisited
{
text-decoration:underline;
color:#003399;
}
- Pavitra
-----Original Message-----
From: Simon Lessard [mailto:[EMAIL PROTECTED]
Sent: Tuesday, August 22, 2006 11:42 AM
To: [email protected]; [EMAIL PROTECTED]
Subject: Re: ADFFACES-60
Note taken, thanks Pavitra.
On 8/22/06, Pavitra Subramaniam <[EMAIL PROTECTED]> wrote:
>
> Hello Simon,
>
> Simon, I am delayed in providing a fix on Trinidad. Please go ahead
> with your solution but I would recommend we use the skin hooks we
> discussed earlier and agreed on (Email titled: Process Train Skin Selectors).
>
> 1) Can we use the word stop instead of station?
> 2) :disabled, :visited, :unvisited, :active are states and not pseudo
> elements.
> 3) overflow-next and overflow-prev are pseudo elements and should
> follow the convention - af|train::overflow-next,
> af|train::overflow-prev. For a full list of pseudo-elements, refer to my
> earlier email.
> 4) I have markup that makes use of one stop icon instead of 2 (left
> and right). I think we should do that and the example I have attached
> will provide a . Please see example for train HTML markup, below. If
> you need me to send you a sample CSS file, that uses these skin hooks,
> please let me know.
>
> Thanks
> Pavitra
>
> Sample HTML for train that uses one stop icon
> ---------------------------------------------
> <table cellpadding="0" cellspacing="0" border="0" class="af_train">
> <tbody>
> <tr>
> <!-- MARGIN -->
> <td rowspan="2"><div
> class="af|train::margin-start"><span></span></div></td>
>
> <!-- PARENT START -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td>
> <div class="af|train::parent-start-icon-block">
> <!-- af|train::parent-start-icon -->
> <img src="images\step_parent.png" alt="Process A:
> Step A"
> width="13px" height="13px"/>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div
> class="af|train::parent-spacer"><span></span></div></td>
>
> <!-- OVERFLOW START -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join-overflow"><span></span></div>
> </td>
> <td>
> <div class="af|train::overflow-icon-block">
> <!-- af|processTrain::overflow-start-visited-icon -->
> <img src="images\overflow_start_visited.png"
> alt="Previous Steps"
> width="7px" height="7px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join-overflow
> af|train::join-overflow:visited">
> <span></span></div></td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::step-spacer
> af|train::step-spacer:visited"><span></span></div></td>
>
> <!-- STEP -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join-overflow
> af|train::join-overflow:visited">
> <span></span></div></td>
> <td>
> <div class="af_train_step_icon_block">
> <img src="images\step_visited.png" alt="Visited Step:
> Step 1"
> width="13px" height="13px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join af_train_join_visited">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <!-- spacer -->
> <td>
> <div class="af_train_step_spacer af_train_step_spacer_visited">
> <span></span>
> </div>
> </td>
>
> <!-- STEP -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af_train_join af_train_join_visited">
> <span></span></div></td>
> <td>
> <div class="af_train_step_icon_block">
> <img src="images\step_active.png" alt="Active Step:
> Step 2"
> width="13px" height="13px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join af_train_join_unvisited">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af_train_step_spacer af_train_step_spacer_unvisited">
> <span></span>
> </div>
> </td>
>
> <!-- STEP -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af_train_join af_train_join_unvisited">
> <span></span></div></td>
> <td>
> <div class="af_train_step_icon_block">
> <img src="images\step_unvisited.png" alt="Unvisited
> Step: Step 3"
> width="13px" height="13px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join af_train_join_disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af_train_step_spacer
> af_train_step_spacer_disabled"><span></span></div></td>
>
> <!-- STEP -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af_train_join af_train_join_disabled">
> <span></span></div></td>
> <td>
> <div class="af_train_step_icon_block">
> <img src="images\step_disabled.png" alt="Disabled Step:
> Step 4"
> width="13px" height="13px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join af_train_join_disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af_train_step_spacer af_train_step_spacer_disabled">
> <span></span>
> </div>
> </td>
>
> <!-- STEP -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af_train_join af_train_join_disabled">
> <span></span>
> </div>
> </td>
> <td>
> <div class="af_train_step_icon_block">
> <img src="images\step_disabled.png" alt="Disabled Step:
> Step 5"
> width="13px" height="13px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join af_train_join_disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af_train_step_spacer af_train_step_spacer_disabled">
> <span></span>
> </div>
> </td>
>
> <!-- STEP -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af_train_join af_train_join_disabled">
> <span></span></div></td>
> <td>
> <div class="af_train_step_icon_block">
> <img src="images\step_disabled.png" alt="Disabled Step:
> Step 5"
> width="13px" height="13px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join_overflow
> af_train_join_overflow_disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af_train_step_spacer af_train_step_spacer_disabled">
> <span></span>
> </div>
> </td>
>
> <!-- OVERFLOW END -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af_train_join_overflow
> af_train_join_overflow_disabled">
> <span></span></div></td>
> <td style="width:1px;">
> <div class="af_train_overflow_icon_block">
> <img src="images\overflow_end_disabled.png"
> alt="Next Steps"
> width="7px" height="7px"/>
> </div>
> </td>
> <td width="50%">
> <div class="af_train_join_overflow">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af_train_parent_spacer"><span></span></div></td>
>
> <!-- PARENT END -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td>
> <div class="af_train_parent_end_icon_block">
> <img src="images\step_parent_end.png" alt="Process A:
> Step A"
> width="13px" height="13px"/>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td rowspan="2"><div
> class="af_train_margin_end"><span></span></div></td>
> </tr>
>
> <tr>
> <td>
> <div class="af_train_parent_start_content"></div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_overflow_start_content">
> <a href="" class="af_train_overflow_link_visited">Previous</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_step_content af_train_step_content_visited">
> <a href="" class="af_train_step_link
> af_train_step_link_visited">Step 1</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_step_content af_train_step_content_active">
> <a href="" class="af_train_step_link
> af_train_step_link_active">StepStepStep 2</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_step_content
> af_train_step_content_unvisited">
> <a href="" class="af_train_step_link
> af_train_step_link_unvisited">Step 3</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_step_content af_train_step_content_disabled">
> <a href="" class="af_train_step_link
> af_train_step_link_disabled">Step 4</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_step_content af_train_step_content_disabled">
> <a href="" class="af_train_step_link
> af_train_step_link_disabled">StepStepStep 5</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_step_content af_train_step_content_disabled">
> <a href="" class="af_train_step_link
> af_train_step_link_disabled">StepStep 6</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_overflow_end_content">
> <a href="" class="af_train_overflow_link_disabled">More</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af_train_parent_end_content"></div>
> </td>
>
> </tr>
> </tbody>
> </table>
>
> </body>
> </html>
>
>
>
> - Pavitra
>
> -----Original Message-----
> From: Simon Lessard [mailto:[EMAIL PROTECTED]
> Sent: Tuesday, August 22, 2006 10:59 AM
> To: Trinidad - Dev
> Subject: ADFFACES-60
>
> Hello,
>
> Anyone know if Pavitra is still working on the processTrain? If not
> I'll work on that issue and should be done with it tomorrow or so.
> I'll use the following hooks:
>
> af|train
> af|train::station
> af|train::station::join
> af|train::station::link
> af|train::station::left-icon
> af|train::station::right-icon
>
> The station will accept the following pseudoClass:
> :active (except on ::station::join since joins can only be visited or
> not) :disabled :overflow-next (except on ::station::join since joins
> can only be visited or
> not)
> :overflow-prev (except on ::station::join since joins can only be
> visited or
> not)
> :unvisited
> :visited
>
> And hopefully :disabled will be combinable with any of the other
> pseduClass.
>
> There's one thing I dislike though (and I think Jeanne does as well):
> the ::left-icon and ::right-icon. A single icon per station station
> would be far more interesting. However, I cannot find a way to
> generate markup code accepting one and not having a major drawback. So
> if someone feels inspired I would be glad to see a better solution.
>
> Note: I already tried the following solution (extract showing only
> active station code) <table class="af|train">
> <tr>
> <td class="af|train::station:visited::join"> </td>
> <td class="af|train::station:active" style="width:1em;"><img
> src="af|train::station:active::station-icon"/></td>
> <td class="af|train::station:unvisited::join"> </td>
> </tr>
> <tr>
> <td colspan="3" class="af|train::station:active"/>
> </tr>
> </table>
>
> The above code won't work if af|train::station:active specifies a
> width (Which happen to be very useful if you want equidistant
> stations)
>
>
> Regards,
>
> ~ Simon
>
>
>
