Source: components/short-codes/_animations.scss, line 5
Various Classes that can be used for animations
| Class | Utility |
|---|---|
| wdpk-fadeInRightBig | Check the animations on the following link Check All Animations Here |
| wdpk-fadeInUp | Check the animations on the following link Check All Animations Here |
| wdpk-fadeInUpBig | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOut | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutDown | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutDownBig | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutLeft | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutLeftBig | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutRight | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutRightBig | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutUp | Check the animations on the following link Check All Animations Here |
| wdpk-fadeOutUpBig | Check the animations on the following link Check All Animations Here |
| wdpk-flipInX | Check the animations on the following link Check All Animations Here |
| wdpk-flipInY | Check the animations on the following link Check All Animations Here |
| wdpk-flipOutX | Check the animations on the following link Check All Animations Here |
| wdpk-flipOutY | Check the animations on the following link Check All Animations Here |
| wdpk-lightSpeedIn | Check the animations on the following link Check All Animations Here |
| wdpk-lightSpeedOut | Check the animations on the following link Check All Animations Here |
| wdpk-rotateIn | Check the animations on the following link Check All Animations Here |
| wdpk-rotateInDownLeft | Check the animations on the following link Check All Animations Here |
| wdpk-rotateInDownRight | Check the animations on the following link Check All Animations Here |
| wdpk-rotateInUpLeft | Check the animations on the following link Check All Animations Here |
| wdpk-rotateInUpRight | Check the animations on the following link Check All Animations Here |
| wdpk-rotateOut | Check the animations on the following link Check All Animations Here |
| wdpk-rotateOutDownLeft | Check the animations on the following link Check All Animations Here |
| wdpk-rotateOutDownRight | Check the animations on the following link Check All Animations Here |
| wdpk-rotateOutUpLeft | Check the animations on the following link Check All Animations Here |
| wdpk-rotateOutUpRight | Check the animations on the following link Check All Animations Here |
| wdpk-hinge | Check the animations on the following link Check All Animations Here |
| wdpk-rollIn | Check the animations on the following link Check All Animations Here |
| wdpk-rollOut | Check the animations on the following link Check All Animations Here |
| wdpk-zoomIn | Check the animations on the following link Check All Animations Here |
| wdpk-zoomInDown | Check the animations on the following link Check All Animations Here |
| wdpk-zoomInLeft | Check the animations on the following link Check All Animations Here |
| wdpk-zoomInRight | Check the animations on the following link Check All Animations Here |
| wdpk-zoomInUp | Check the animations on the following link Check All Animations Here |
| wdpk-zoomOut | Check the animations on the following link Check All Animations Here |
| wdpk-zoomOutDown | Check the animations on the following link Check All Animations Here |
| wdpk-zoomOutLeft | Check the animations on the following link Check All Animations Here |
| wdpk-zoomOutRight | Check the animations on the following link Check All Animations Here |
| wdpk-zoomOutUp | Check the animations on the following link Check All Animations Here |
| wdpk-slideInDown | Check the animations on the following link Check All Animations Here |
| wdpk-slideInLeft | Check the animations on the following link Check All Animations Here |
| wdpk-slideInRight | Check the animations on the following link Check All Animations Here |
| wdpk-slideInUp | Check the animations on the following link Check All Animations Here |
| wdpk-slideOutDown | Check the animations on the following link Check All Animations Here |
| wdpk-slideOutLeft | Check the animations on the following link Check All Animations Here |
| wdpk-slideOutRight | Check the animations on the following link Check All Animations Here |
| wdpk-slideOutUp | Check the animations on the following link Check All Animations Here |
Source: globals/_default-styling-wdpk.scss, line 8
Classes that can be assigned to any component thoughout the theme and have been defined with a Global Scope in the theme.
| Class | Utility |
|---|---|
| wdpk-facebook | Class assigned to facebook icon to assign the set backgrodun color for the social network |
| wdpk-twitter | Class assigned to twitter icon to assign the set backgrodun color for the social network |
| wdpk-google | Class assigned to Google icon to assign the set backgrodun color for the social network |
| wdpk-youtube | Class assigned to YouTube icon to assign the set backgrodun color for the social network |
| wdpk-linkedin | Class assigned to LinkedIn icon to assign the set backgrodun color for the social network |
| wdpk-behance | Class assigned to Behance icon to assign the set backgrodun color for the social network |
| wdpk-dribble | Class assigned to Dribble icon to assign the set backgrodun color for the social network |
| wdpk-pinterest | Class assigned to Pinterest icon to assign the set backgrodun color for the social network |
| wdpk-rss | Class assigned to RSS icon to assign the set backgrodun color for the social network |
Source: components/header/_header-main.scss, line 5
Classes for Header
| Class | Utility |
|---|---|
| wdpk-header-container | This is a mandatory class for the header which encapsulates the Primary Menu , Topbar as well as the Bottom Bar |
| wdpk-navbar | Main class for creating a primary menu in the header |
| wdpk-nav-wrap | Class used for wrapping a div around the primary menu and assigns important layout properties |
| wdpk-menu-extras | Class assigned to the dic around the extras in the primary menu. Extras include links with Icon such as Social Links, Cart Link, Search Link etc |
| wdpk-menu-cart | Class Assign specifically to the Shopping cart item in the header |
| wdpk-menu-cart-items | Class assigned to the number of items being displayed on the shopping cart icon |
| wdpk-menu-search | Class assigned to the search icon in the header |
| wdpk-menu-extra-item | Every item in the extras section needs to have this class to inherit the properties set in SCSS variables |
| wdpk-nav-branding | Class assigned to the wraopper around the logo in the primary menu |
| wdpk-menu | The parent wrapper class assigned to the dropdown menu ul element which is a child element of one of the li elements in the primary menu |
| wdpk-hasDropdown | Identifier class to signal the existence of a dropdown menu for an item. Must be assigned to all the elements of the primary menu which have a dropdwon menu |
| wdpk-menu-container | The container class for the dropdown menu which inherits the style properties from SCSS |
| wdpk-dropDown | The class for dropdwon 'ul' element which further has list items |
| wdpk-dropDown-item | The class assigned to each dropdown element in the dropdown menu to inherit the properties of assigned to drodpwn elements in SCSS |
| wdpk-hasSubMenu | Assigned to each <a> tag in dropdown menu which has a sub dropdown menu |
Source: components/header/_top-bar.scss, line 5
Classes for Topbar. There are specific classes for certain social networks to assign background colors. Classes with same properties can be created to add any social network of your choice.
| Class | Utility |
|---|---|
| wdpk-topbar-wrapper | Class for the wrapping div of the Topbar |
| wdpk-topbar-item | Class for the each item of the Topbar |
| wdpk-topbar-menu | Class assigned to the menu of the Topbar |
| wdpk-facebook | Class assigned to facebook icon in the Topbar |
| wdpk-twitter | Class assigned to twitter icon in the Topbar |
| wdpk-google | Class assigned to Google icon in the Topbar |
| wdpk-youtube | Class assigned to YouTube icon in the Topbar |
| wdpk-linkedin | Class assigned to LinkedIn icon in the Topbar |
| wdpk-behance | Class assigned to Behance icon in the Topbar |
| wdpk-dribble | Class assigned to Dribble icon in the Topbar |
| wdpk-pinterest | Class assigned to Pinterest icon in the Topbar |
| wdpk-rss | Class assigned to RSS icon in the Topbar |
Source: components/header/_mobile-header.scss, line 5
Classes for Mobile Header
| Class | Utility |
|---|---|
| wdpk-mobile-header | Added to the container div of the mobile header |
| wdpk-menu-icon | Class for the mobile menu toggle icon in the mobile header |
| wdpk-mobile-header-branding | Class for the logo of the mobile header |
Source: components/short-codes/_sidebar.scss, line 5
Classes for Sidebar.
| Class | Utility |
|---|---|
| wdpk-sidebar | Parent class assigned to the wrapper div of the sidebar |
| wdpk-sidebar-section | Class assigned to each section of the sidebar |
| wdpk-sidebar-left | Assign this class to the wrapper div if the sidebar is on the left side |
| wdpk-sidebar-right | Assign this class to the wrapper div if the sidebar is on the right side |