Spry

CSS code for the Sliding Panels widget

The SprySlidingPanels.css file contains the rules that style the Sliding Panels widget. You can edit these rules to style the widget’s look and feel. The names of the rules in the CSS file correspond directly to the names of the classes specified in the widget’s HTML code.

Note: You can replace style-related class names in the SprySlidingPanels.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget, as CSS code is not required for widget functionality.

The default functionality for the behaviors classes at the end of the style sheet are defined in the SprySlidingPanels.js JavaScript library file. You can change the default functionality by adding properties and values to the behavior rules in the CSS style sheet.

When altering the CSS, keep in mind that the size of the widget opening (the tag styled by the SlidingPanels rule) and the size of the content panels (the tags styled by the SlidingPanelsContent rule) should always be the same to ensure proper visibility.

The following is the CSS code for the SprySlidingPanels.css file:

/*Sliding Panels styling classes*/	
.SlidingPanels {
	position: relative;
	width: 100%;
	height: 400px;
	padding: 0px;
	border: none;
}
.SlidingPanelsContentGroup {
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: none;
}
.SlidingPanelsContent {
	width: 100%;
	height: 400px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	border: none;
}
.SlidingPanelsAnimating * {
	overflow: hidden !important;
}
.SlidingPanelsCurrentPanel {
}
.SlidingPanelsFocused {
}

The SprySlidingPanels.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.