Astra_Addon_Offcanvas_Component_Loader::load_toggle_for_desktop_static_css()
Load static Toggle for Desktop CSS.
Description
Return
(string) static css for Toggle for Desktop.
Source
File: classes/builder/type/header/off-canvas/classes/class-astra-addon-offcanvas-component-loader.php
public static function load_toggle_for_desktop_static_css() {
if ( false === Astra_Icons::is_svg_icons() ) {
$toggle_for_desktop_static_css = '.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation ul.sub-menu .menu-item .menu-link:before,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation ul.sub-menu .menu-item .menu-link:before {
content: "\e900";
font-family: "Astra";
font-size: .65em;
text-decoration: inherit;
display: inline-block;
transform: translate(0, -2px) rotateZ(270deg);
margin-right: 5px;
}
.ast-desktop-header-content .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle::before {
font-weight: bold;
content: "\e900";
font-family: "Astra";
text-decoration: inherit;
display: inline-block;
}';
} else {
$toggle_for_desktop_static_css = '
.ast-desktop-popup-content .menu-link > .menu-text + .icon-arrow, .ast-desktop-popup-content .menu-link > .dropdown-menu-toggle, .ast-desktop-header-content .menu-link > .menu-text + .icon-arrow, .ast-desktop-header-content .menu-link > .dropdown-menu-toggle {
display: none;
}
.ast-desktop-popup-content .sub-menu .menu-link > .icon-arrow:first-of-type, .ast-desktop-header-content .sub-menu .menu-link > .icon-arrow:first-of-type {
display: inline-block;
margin-right: 5px;
}
.ast-desktop-popup-content .sub-menu .menu-link > .icon-arrow:first-of-type svg, .ast-desktop-header-content .sub-menu .menu-link > .icon-arrow:first-of-type svg {
top: .2em;
margin-top: 0px;
margin-left: 0px;
width: .65em;
transform: translate(0,-2px) rotateZ( 270deg );
}
.ast-desktop-popup-content .main-header-menu .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type, .ast-desktop-header-content .main-header-menu .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type {
display: inline-block;
}
.ast-desktop-popup-content .ast-submenu-expanded > .ast-menu-toggle, .ast-desktop-header-content .ast-submenu-expanded > .ast-menu-toggle {
transform: rotateX( 180deg );
}
#ast-desktop-header .ast-desktop-header-content .main-header-menu .sub-menu .menu-item.menu-item-has-children > .menu-link .icon-arrow svg {
position: relative;
right: 0;
top: 0;
transform: translate(0, 0%) rotate( 270deg );
}';
}
$toggle_for_desktop_static_css .= '
/** Toggle on Desktop Feature */
.ast-desktop-header-content .ast-builder-menu-mobile .ast-builder-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-builder-menu {
width: 100%;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-main-header-bar-alignment,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-main-header-bar-alignment {
display: block;
width: 100%;
flex: auto;
order: 4;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation {
width: 100%;
margin: 0;
line-height: 3;
flex: auto;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation {
display: block;
width: 100%;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-flex.main-header-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-flex.main-header-menu {
flex-wrap: wrap;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-menu {
border-top-width: 1px;
border-style: solid;
border-color: #eaeaea;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation li.menu-item,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation li.menu-item {
width: 100%;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation .menu-item .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation .menu-item .menu-link {
border-bottom-width: 1px;
border-color: #eaeaea;
border-style: solid;
}
.ast-builder-menu-mobile .main-navigation ul .menu-item .menu-link,
.ast-builder-menu-mobile .main-navigation ul .menu-item .menu-link {
padding: 0 20px;
display: inline-block;
width: 100%;
border: 0;
border-bottom-width: 1px;
border-style: solid;
border-color: #eaeaea;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
display: inline-block;
position: absolute;
font-size: inherit;
top: 0px;
right: 20px;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0 0.907em;
font-weight: normal;
line-height: inherit;
transition: all .2s;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children .sub-menu {
display: none;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu {
display: block;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-nav-menu .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-nav-menu .sub-menu {
line-height: 3;
}
.ast-desktop-header-content .ast-builder-menu-mobile .submenu-with-border .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .submenu-with-border .sub-menu {
border: 0;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-menu .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
border: 0;
width: auto;
left: auto;
right: auto;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .menu-link:after,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .menu-link:after {
display: none;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-submenu-expanded.menu-item .sub-menu,
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-submenu-expanded.menu-item .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu,
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .astra-full-megamenu-wrapper,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-submenu-expanded .astra-full-megamenu-wrapper {
box-shadow: unset;
opacity: 1;
visibility: visible;
transition: none;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .menu-link {
padding-left: 30px;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .sub-menu .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .sub-menu .menu-link {
padding-left: 40px;
}
.ast-desktop .main-header-menu > .menu-item .sub-menu:before,
.ast-desktop .main-header-menu > .menu-item .astra-full-megamenu-wrapper:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%);
}
.menu-toggle .ast-close-svg {
display: none;
}
.menu-toggle.toggled .ast-mobile-svg {
display: none;
}
.menu-toggle.toggled .ast-close-svg {
display: block;
}
/** Desktop Off-Canvas CSS */
.ast-desktop .ast-mobile-popup-drawer .ast-mobile-popup-inner {
max-width: 20%;
}
.ast-desktop .ast-mobile-popup-drawer.ast-mobile-popup-full-width .ast-mobile-popup-inner {
width: 100%;
max-width: 100%;
}
.ast-desktop .ast-mobile-popup-drawer .ast-mobile-popup-overlay {
visibility: hidden;
opacity: 0;
}
.ast-off-canvas-active body.ast-main-header-nav-open.ast-desktop {
overflow: auto;
}
body.admin-bar.ast-desktop .ast-mobile-popup-drawer .ast-mobile-popup-inner {
top: 32px;
}
/** Default Spacing for Mobile Header elements except Menu */
.ast-mobile-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),
.ast-desktop-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),
.ast-mobile-header-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),
.ast-desktop-header-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element) {
padding: 15px 20px;
}
.ast-header-break-point .main-navigation .menu-link {
border: 0;
}';
if ( is_rtl() ) {
$toggle_for_desktop_static_css .= '
/** Toggle on Desktop Feature */
.ast-desktop-header-content .ast-builder-menu-mobile .ast-builder-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-builder-menu {
width: 100%;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-main-header-bar-alignment,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-main-header-bar-alignment {
display: block;
width: 100%;
flex: auto;
order: 4;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation {
width: 100%;
margin: 0;
line-height: 3;
flex: auto;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation {
display: block;
width: 100%;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-flex.main-header-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-flex.main-header-menu {
flex-wrap: wrap;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-menu {
border-top-width: 1px;
border-style: solid;
border-color: #eaeaea;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation li.menu-item,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation li.menu-item {
width: 100%;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation .menu-item .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation .menu-item .menu-link {
border-bottom-width: 1px;
border-color: #eaeaea;
border-style: solid;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation ul .menu-item .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation ul .menu-item .menu-link {
padding: 0 20px;
display: inline-block;
width: 100%;
border: 0;
border-bottom-width: 1px;
border-style: solid;
border-color: #eaeaea;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
display: inline-block;
position: absolute;
font-size: inherit;
top: 0px;
left: 20px;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0 0.907em;
font-weight: normal;
line-height: inherit;
transition: all .2s;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children .sub-menu {
display: none;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu {
display: block;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-nav-menu .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-nav-menu .sub-menu {
line-height: 3;
}
.ast-desktop-header-content .ast-builder-menu-mobile .submenu-with-border .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .submenu-with-border .sub-menu {
border: 0;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-menu .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
border: 0;
width: auto;
right: auto;
left: auto;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .menu-link:after,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .menu-item-has-children > .menu-link:after {
display: none;
}
.ast-desktop-header-content .ast-builder-menu-mobile .ast-submenu-expanded.menu-item .sub-menu,
.ast-desktop-header-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .ast-submenu-expanded.menu-item .sub-menu,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-header-bar-navigation .toggled .menu-item-has-children .sub-menu {
box-shadow: unset;
opacity: 1;
visibility: visible;
transition: none;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .menu-link {
padding-right: 30px;
}
.ast-desktop-header-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .sub-menu .menu-link,
.ast-desktop-popup-content .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item .sub-menu .menu-link {
padding-right: 40px;
}
.ast-desktop .main-header-menu > .menu-item .sub-menu:before,
.ast-desktop .main-header-menu > .menu-item .astra-full-megamenu-wrapper:before {
position: absolute;
content: "";
top: 0;
right: 0;
width: 100%;
transform: translateY(-100%);
}
.menu-toggle .ast-close-svg {
display: none;
}
.menu-toggle.toggled .ast-mobile-svg {
display: none;
}
.menu-toggle.toggled .ast-close-svg {
display: block;
}
/** Desktop Off-Canvas CSS */
.ast-desktop .ast-mobile-popup-drawer .ast-mobile-popup-inner {
max-width: 20%;
}
.ast-desktop .ast-mobile-popup-drawer.ast-mobile-popup-full-width .ast-mobile-popup-inner {
width: 100%;
max-width: 100%;
}
.ast-desktop .ast-mobile-popup-drawer .ast-mobile-popup-overlay {
visibility: hidden;
opacity: 0;
}
.ast-off-canvas-active body.ast-main-header-nav-open.ast-desktop {
overflow: auto;
}
body.admin-bar.ast-desktop .ast-mobile-popup-drawer .ast-mobile-popup-inner {
top: 32px;
}
/** Default Spacing for Mobile Header elements except Menu */
.ast-mobile-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),
.ast-desktop-popup-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),
.ast-mobile-header-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element),
.ast-desktop-header-content .ast-builder-layout-element:not(.ast-builder-menu):not(.ast-header-divider-element) {
margin: 15px 20px;
}
.ast-header-break-point .main-navigation .menu-link {
border: 0;
}';
}
return $toggle_for_desktop_static_css;
}
Expand full source code Collapse full source code View on Trac
Changelog
| Version | Description |
|---|---|
| 3.3.0 | Introduced. |