HighDots Forums  

SpryCollapsiblePanel

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss SpryCollapsiblePanel in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
dlipscombe
 
Posts: n/a

Default SpryCollapsiblePanel - 02-16-2009 , 12:07 PM






The summary pretty much says it all. The tab doesn't change when the cursor
hovers over it.

@charset "UTF-8";

/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
* default style, the CollapsiblePanel is responsible for drawing the borders
* around the widget.
*
* If you want to constrain the width of the CollapsiblePanel widget, set a
width on
* the CollapsiblePanel container. By default, our CollapsiblePanel expands
horizontally to fill
* up available space.
*
* The name of the class ("CollapsiblePanel") used in this selector is not
necessary
* to make the widget function. You can use any class name you want to style
the
* CollapsiblePanel container.
*/
.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-left: solid 1px #7DAADD;
border-right: solid 1px #7DAADD;
border-top: solid 1px #7DAADD;
border-bottom: solid 1px #7DAADD;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open or close the panel.
*
* The name of the class ("CollapsiblePanelTab") used in this selector is not
necessary
* to make the widget function. You can use any class name you want to style an
* CollapsiblePanel panel tab container.
*/
.CollapsiblePanelTab {
background-color: #FFF;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #039;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #7DAADD;
border-left-color: #7DAADD;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important
to note that
* you should never put any padding on the content area element if you plan to
* use the CollapsiblePanel's open/close animations. Placing a non-zero
padding on the content
* element can cause the CollapsiblePanel to abruptly grow in height while the
panels animate.
*
* The name of the class ("CollapsiblePanelContent") used in this selector is
not necessary
* to make the widget function. You can use any class name you want to style a
* CollapsiblePanel content container.
*/
.CollapsiblePanelContent {
margin: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #7DAADD;
border-left-color: #7DAADD;
background-color: #EBF2FA;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
* keyboard focus ring appears *inside* the tab instead of around the tab.
* This is an example of how to make the text within the anchor tag look
* like non-anchor (normal) text.
*/
.CollapsiblePanelTab a {
color: #039;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
background-color: #FFF;
}

/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "CollapsiblePanelOpen" is programatically added
and removed
* from panels as the user clicks on the tabs within the CollapsiblePanel.
*/
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #7DAADD;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #003399;
}

/* This is an example of how to change the appearance of the panel tab when the
* CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is
programatically added and removed
* whenever the CollapsiblePanel is closed.
*/

.CollapsiblePanelClosed .CollapsiblePanelTab {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: 003399;
background-color: #FFF; /* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover" is
programatically added
* and removed from panel tab containers as the mouse enters and exits the tab
container.
*/
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #7DAADD;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #039;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #7DAADD;
border-left-color: #7DAADD;
}

/* This is an example of how to change the appearance of all the panel tabs
when the
* CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is
programatically added and removed
* whenever the CollapsiblePanel gains or loses keyboard focus.
*/
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #7DAADD;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: 003399;
}


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.