File manager - Edit - /home/ferretapmx/public_html/templates/shaper_helixultimate/scss/offcanvas.scss
Back
#offcanvas-toggler { display: inline-flex; align-items: center; height: $header_height; line-height: $header_height; font-size: 20px; >span { &:hover { color: #fff; } } } .offcanvas-init { overflow-x: hidden; position: relative; } .offcanvas-active { .offcanvas-overlay { visibility: visible; opacity: 1; } } .offcanvas-overlay { background: rgba(0, 0, 0, 0.7); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; z-index: 9999; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .body-wrapper { position: relative; -webkit-transition: 0.4s; transition: 0.4s; backface-visibility: hidden; } .close-offcanvas { position: absolute; top: 25px; z-index: 1; } .offcanvas-menu { width: $offcanvas_width; height: 100%; position: fixed; top: 60px; overflow: inherit; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 10000; #offcanvas-toggler { display: none !important; } .logo-sticky { display: none !important; } .offcanvas-inner { padding: 25px; // Make offcanvas scrollable max-height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; .header-modules { margin-left: 0px; } .finder { margin-bottom: 10px; } .sp-sign-in { position: relative; top: 10px; .signin-text { display: none !important; } } .sp-profile-wrapper { .user-text { display: none !important; } } .sp-contact-info, .social-icons { font-size: 14px; >li>a { opacity: 0.7; &:hover, &:focus { opacity: 1; } } } .sp-contact-info { margin-top: 20px; >li:not(:last-child) { margin-bottom: 10px; } } .sp-module { padding: 0; margin: 0; &:not(:last-child) { margin-right: 20px; } .sp-module-title { font-size: 1rem; font-weight: bold; } &:not(:last-child) { margin-bottom: 20px; } //search width .awesomplete { width: 210px; } } ul.menu { &, ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; margin: 0; margin: 0 0 15px 0; list-style: none; } >li { border: 0; padding: 0; margin: 0; position: relative; overflow: hidden; display: block; >a, >span { display: block; font-size: 18px; padding: 10px 0px; position: relative; line-height: 18px; opacity: 0.7; transition: 0.3s; &:hover { opacity: 1; } } ul.menu-child { display: none; } &.menu-parent { >a, >.menu-separator { >.menu-toggler { display: block; position: absolute; top: 50%; cursor: pointer; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 10px; &:after { font-family: $font_awesome_font_family; font-weight: 900; } } } & li.menu-parent { >a { position: relative; display: block; } .menu-toggler { right: -10px; display: block; position: absolute; top: 50%; cursor: pointer; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 2px 10px; &:after { font-family: $font_awesome_font_family; font-weight: 900; } } } &.menu-parent-open { >a, >.menu-separator { >.menu-toggler { &:after { font-family: $font_awesome_font_family; content: "\f107"; font-weight: 900; } } } >.nav-header { >.menu-toggler { &:after { font-family: $font_awesome_font_family; content: "\f107"; font-weight: 900; } } } } >.nav-header { >.menu-toggler { display: block; position: absolute; top: 50%; cursor: pointer; transform: translateY(-50%); -webkit-transform: translateY(-50%); &:after { font-family: $font_awesome_font_family; font-weight: 900; } } } } >ul { display: none; li { a { font-size: 15px; padding: 4px 0px; line-height: 18px; font-weight: 400; } } } } } } // border-menu &.border-menu { .offcanvas-inner ul.menu { >li { border-bottom: 1px solid rgba(32, 31, 31, 0.1); margin-bottom: 0; >a, >.nav-header { padding: 15px 30px 15px 10px; } } // ul { // padding-bottom: 15px; // } } } // center alignment &.center-alignment { .offcanvas-inner { padding: 0px 15px; } } } body { &.ltr { #offcanvas-toggler { &.offcanvas-toggler-right { float: right; margin-left: 20px; } &.offcanvas-toggler-left { float: left; margin-right: 20px; } } &.offcanvs-position-left { .body-wrapper { left: 0; } .offcanvas-menu { left: -$offcanvas_width; top: 0; } &.offcanvas-active { .offcanvas-menu { left: 0; top: 0; } } } &.offcanvs-position-right { .body-wrapper { right: 0; } .offcanvas-menu { right: -$offcanvas_width; top: 0; } &.offcanvas-active { .offcanvas-menu { right: 0; top: 0; } } } .close-offcanvas { right: 15px; } .offcanvas-menu { .offcanvas-inner { ul.menu { >li { &.menu-parent { >a, >.menu-separator { >.menu-toggler { right: -10px; } } >.nav-header { >.menu-toggler { right: 0; } } } ul { margin-left: 10px; } } } } } } } body.ltr { .offcanvas-menu.offcanvas-arrow-left { .offcanvas-inner { ul.menu { >li { /* top level item */ >a, >span, >.nav-header { padding-left: 40px; } &.menu-parent { >a>.menu-toggler, >.menu-separator>.menu-toggler, >.nav-header>.menu-toggler { left: 0; right: auto; padding: 10px; transform: translateY(-50%); } } ul { margin-left: 10px; >li { /* nested items */ >a { padding-left: 32px; } &.menu-parent { .menu-toggler { left: 0; right: auto; padding: 2px 10px; transform: translateY(-50%); } } } } } } } } .offcanvas-menu.center-alignment { .offcanvas-inner { ul.menu>li ul>li>a { padding-left: 0px; } } } } /* Default show closed arrow */ .offcanvas-menu .menu-toggler::after { content: "\f105"; } /* down arrow when submenu is open */ .offcanvas-menu li.menu-parent.menu-parent-open>a>.menu-toggler::after, .offcanvas-menu li.menu-parent.menu-parent-open>.menu-separator>.menu-toggler::after, .offcanvas-menu li.menu-parent.menu-parent-open>.nav-header>.menu-toggler::after, .offcanvas-menu li.menu-parent[aria-expanded="true"]>a>.menu-toggler::after, .offcanvas-menu li.menu-parent[aria-expanded="true"]>.menu-separator>.menu-toggler::after, .offcanvas-menu li.menu-parent[aria-expanded="true"]>.nav-header>.menu-toggler::after { content: "\f107"; }
| ver. 1.4 |
Github
|
.
| PHP 8.2.32 | Generation time: 0.06 |
proxy
|
phpinfo
|
Settings