Current Path : /home/theafprt/conviviality360.com/wp-content/themes/salient/css/off-canvas/ |
Current File : /home/theafprt/conviviality360.com/wp-content/themes/salient/css/off-canvas/simple-dropdown.css |
/* Theme Name: Salient Description: Off canvas menu set to "Simple Dropdown" in theme options */ #header-outer #mobile-menu { display: none; padding: 0; z-index: 1000; position: absolute; left: 0; top: calc(99% + 12px); width: 100%; } #header-outer #mobile-menu > .inner { max-height: 85vh; position: relative; overflow-y: auto; overflow-x: hidden; padding: 0; z-index: 1001; } #header-outer #mobile-menu:before { content: ''; display: block; position: absolute; top: 0; margin-left: -50vw; left: 50%; width: 100vw; height: 100%; background-color: #fff; } #header-outer[data-full-width="true"] #mobile-menu:before { margin-left: 0; left: -30px; width: calc(100vw + 60px); } body[data-header-color="dark"] #header-outer #mobile-menu:before { background-color: #000; } body[data-header-color="dark"] #mobile-menu ul li a, body[data-header-color="dark"] #header-outer #mobile-menu p { color: #fff; } #mobile-menu ul li a, #header-outer #mobile-menu p { color: #999; } #header-outer #mobile-menu .menu-items-wrap[data-has-secondary-text="false"] > ul:first-child, #header-outer #mobile-menu .menu-items-wrap[data-has-secondary-text="false"] > ul:first-child > li:first-child:before { -webkit-transition: opacity 0.2s ease, padding 0.2s ease; transition: opacity 0.2s ease, padding 0.2s ease; } #header-outer.transparent #mobile-menu .menu-items-wrap[data-has-secondary-text="false"] > ul:first-child { padding-top: 10px; } #header-outer.transparent #mobile-menu .menu-items-wrap[data-has-secondary-text="false"] > ul:first-child > li:first-child:before { opacity: 0; } #header-outer #mobile-menu ul, #header-outer #mobile-menu p { z-index: 10; position: relative; } #header-outer #mobile-menu ul li { position: relative; } #header-outer #mobile-menu ul li a { font-size: 14px; display: block; position: relative; padding: 15px 0; } #mobile-menu .inner ul ul > li > a span { opacity: 0; display: block; -webkit-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; } #mobile-menu .inner ul .visible > ul > li > a span { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } #mobile-menu .visible > ul > li:nth-child(2) > a span { transition-delay: 0.04s; } #mobile-menu .visible > ul > li:nth-child(3) > a span { transition-delay: 0.08s; } #mobile-menu .visible > ul > li:nth-child(4) > a span { transition-delay: 0.12s; } #mobile-menu .visible > ul > li:nth-child(5) > a span { transition-delay: 0.16s; } #mobile-menu .visible > ul > li:nth-child(6) > a span { transition-delay: 0.20s; } #mobile-menu .visible > ul > li:nth-child(7) > a span { transition-delay: 0.24s; } #mobile-menu .visible > ul > li:nth-child(8) > a span { transition-delay: 0.28s; } #mobile-menu .visible > ul > li:nth-child(9) > a span { transition-delay: 0.32s; } #mobile-menu .visible > ul > li:nth-child(10) > a span { transition-delay: 0.36s; } #mobile-menu .visible > ul > li:nth-child(11) > a span { transition-delay: 0.40s; } #mobile-menu .visible > ul > li:nth-child(12) > a span { transition-delay: 0.44s; } #mobile-menu .visible > ul > li:nth-child(13) > a span { transition-delay: 0.48s; } #mobile-menu .visible > ul > li:nth-child(14) > a span { transition-delay: 0.48s; } #mobile-menu .menu-items-wrap ul li:before { background-color: rgba(0,0,0,0.08); content: ''; display: block; position: absolute; top: -1px; width: 100%; left: 0; height: 1px; } #mobile-menu .menu-items-wrap > ul:last-child > li:last-child:after { background-color: rgba(0,0,0,0.08); content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; } body[data-header-color="dark"] #mobile-menu .menu-items-wrap ul li:before, body[data-header-color="dark"] #mobile-menu .menu-items-wrap > ul:last-child > li:last-child:after { background-color: rgba(255,255,255,0.15); } #header-outer #mobile-menu a > .sf-sub-indicator { right: 0px; position: absolute; left: auto; padding: 0; top: 50%; padding: 10px 0 10px 20px; color: inherit; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: auto; width: auto; } #header-outer #mobile-menu a > .sf-sub-indicator i { font-size: 20px; color: inherit; width: auto; -webkit-transition: color 0.2s ease, transform 0.4s ease; transition: color 0.2s ease, transform 0.4s ease; } #header-outer #mobile-menu .current-open-item > a > .sf-sub-indicator i { transform: rotate(180deg); } #header-outer #mobile-menu .bottom-text { padding: 20px 0 0; } #header-outer #mobile-menu ul li ul { display: none; } #header-outer #mobile-menu ul ul > li > a { margin-left: 20px; } #header-outer #mobile-menu ul ul ul > li > a { margin-left: 40px; } #header-outer #mobile-menu ul ul ul ul > li > a { margin-left: 60px; } #header-outer #mobile-menu ul ul ul ul ul > li > a { margin-left: 80px; } #header-outer #mobile-menu ul ul ul ul ul ul > li > a { margin-left: 100px; } #header-outer #mobile-menu .off-canvas-social-links li { display: inline-block; } #header-outer #mobile-menu .off-canvas-social-links li i { font-size: 18px; } #header-outer #mobile-menu .off-canvas-social-links li a { padding: 0 10px; } #header-outer #mobile-menu .off-canvas-social-links { margin-top: 20px; } #header-outer #mobile-menu .secondary-header-text p { margin-bottom: 0; padding: 0; line-height: 1.5em; } #header-outer #mobile-menu .secondary-header-text { padding: 15px; margin-bottom: 20px; margin-top: 20px; text-align: center; background-color: rgba(0,0,0,0.05); border-radius: 5px; position: relative; z-index: 10; } #header-outer #mobile-menu .secondary-header-text p a { color: inherit; } #header-outer #mobile-menu .below-menu-items-wrap > *:last-child { margin-bottom: 20px; } body[data-header-color="dark"] #header-outer #mobile-menu .secondary-header-text { background-color: rgba(255,255,255,0.05); } @media only screen and (min-width: 691px) { #header-outer #mobile-menu .secondary-header-text { display: none; } #header-outer #mobile-menu .secondary-header-items { display: none; } }