Custom Styling
These pages document some custom-made CSS components.
- Accordion Fix
- A fix for accordions inside
.wsu-content - Alerts
- Custom alert styles and a system for managing alerts
- Button Colors
- Some additional button colors that aren't provided by the WDS by default
- Centering
- A utility class for centering elements
- Charts
- Styling for use with charts
- Choices.js
- Styling for using the Choices.js library with the WSU WDS
- Columns
- A custom column system that's more flexible than the one provided by the WDS
- Copy Text Button
- A component with a button to easily copy some text to the clipboard
- Custom Properties
- CSS custom properties for colors and sizes
- Details Accordion
-
An accordion using a
<details>element with styling to match the WSU WDS accordion - Details Tree
- Styling for displaying a tree structure
- Dialog
-
Styles for a
<dialog>element to look like the WDS provided modal component - Disabled Link
- Styles to disable a link
- Empty State
- A component to use a placeholder when no information is available
- Environment Banner
- The banner at the bottom of the sidebar that indicates which environment the application is running in
- Expandable Table Rows
- Tools and styling to enable hiding and showing table rows
- Footer Button
- Styling for buttons in the site footer
- Footer Version
- Display the application version in the footer
- Forms
- Custom changes to forms
- Full Width
- A utility class for setting an element's width to 100%
- Icons
- Some additions to the WDS icons
- Loading Icon
- A loading icon based on the WSU cougar head
- Loading Placeholder
- A placeholder to use when loading data
- Margin Bleed
- Bleed elements into the margin to make it wider than the main content
- No Access Links
- Mark links with an icon to indicate the user doesn't have access to that URL
- Overflow Wrapper
- A wrapper for elements that may be wider than the viewport
- Pagination
- Custom additions to the WDS's pagination component
- Prefix/Postfix
- Some styling not included with the WDS for adding prefixes and postfixes to inputs
- Quick Links
- Styling for quick links in ASIS sites
- Selection List
- A list that indicates selected items
- Steps
- Custom components for lists of steps
- Striped List
- Styling for a list in dark/light rows similar to a striped table
- Tabs
- Split content into separate tabs
- Tags
- A tag displaying extra info about something
- Text Divider
- Similar to an
<hr />, but with text - Validation Errors
- Styling for ASP.NET Core's validation errors