AlkantarClanX12
Current Path : /home/thanudqk/128shen.com/wp-content/themes/darcie/sass/Navigation/ |
Current File : /home/thanudqk/128shen.com/wp-content/themes/darcie/sass/Navigation/_menus.scss |
a { text-decoration: none; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } .main-navigation > ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { margin: 0; position: relative; } .site-header .social-navigation ul { text-align: center; } .main-navigation .menu-item-has-children > a, .main-navigation .page_item_has_children > a { padding-right: 49px; } .main-navigation a { display: block; line-height: 2; letter-spacing: 0; text-decoration: none; } .search-container { padding: 21px; } .main-navigation a, #primary-menu-wrapper .search-container { padding: 7px 30px; } .navigation-default .main-navigation ul ul a { font-weight: 400; letter-spacing: 0; text-transform: capitalize; opacity: 0.75; padding: 5px 20px 5px 28px; } .navigation-default .main-navigation ul ul a:hover { opacity: 1; } .navigation-default .main-navigation { clear: both; border: none; } .main-navigation ul.toggled-on { box-shadow: none; border-top: none; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; right: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation ul ul .current_page_item > a, .main-navigation ul ul .current-menu-item > a { font-weight: 500; } #primary-search-wrapper, #social-menu-wrapper { display: none; } .menu-inside-wrapper { position: fixed; right: -100%; top: 100%; max-width: 100%; visibility: hidden; -webkit-transition: all 0.4s; transition: all 0.4s; top: 0; height: 100vh; z-index: 99; width: 100%; overflow-y: auto; } .menu-open .menu-inside-wrapper { right: 0; } #social-menu-wrapper .menu-inside-wrapper, #primary-search-wrapper .menu-inside-wrapper { max-width: 350px; } .is-open .menu-inside-wrapper { right: 0; visibility: visible; } body { transition: all 0.4s; position: relative; left: 0; } body.menu-open { overflow-y: hidden; width: 100%; left: -300px; } body.menu-open::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background-color: rgba(0, 0, 0, 0.5); z-index: 99; } .menu-toggle { background-color: transparent; display: block; font-weight: 400; line-height: 1; margin: 0 auto; text-shadow: none; background-image: none; } .menu-toggle:hover, .menu-toggle:focus, .menu-toggle.selected { background-image: none; background-color: transparent; } .selected.menu-toggle .icon-bars, .selected.menu-toggle .icon-share, .menu-toggle .icon-close, .selected.menu-toggle .icon-search { display: none; } .selected.menu-toggle .icon-close { display: inline-block; } #primary-search-wrapper .menu-toggle, #social-menu-wrapper .menu-toggle { background-image: none; border: none; display: inline-block; height: 42px; letter-spacing: 0; padding: 0; -webkit-text-shadow: none; text-shadow: none; text-align: center; width: 42px; border-radius: 0; } .absolute-header .site-identity { display: inline-block; } /* Dropdown Toggle */ .dropdown-toggle { background-image: none; background-color: transparent; border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; display: block; font-size: 18px; font-size: 1.125rem; right: 0; line-height: 1.172; margin: 0 auto; padding: 14px 19px; position: absolute; text-shadow: none; top: 0; } .site-footer-menu .dropdown-toggle { display: none; } body button.dropdown-toggle:hover, body button.dropdown-toggle:focus { background: transparent; background-image: none; } .dropdown-toggle:focus { outline: thin dotted; } .dropdown-toggle.toggled-on .icon { -ms-transform: rotate(-180deg); /* IE 9 */ -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */ transform: rotate(-180deg); } .main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon, .main-navigation ul a > .icon { display: none; } .main-navigation ul { list-style-type: none; margin: 0; } .absolute-header .main-navigation ul.sub-menu a, .navigation-modern.absolute-header .main-navigation ul.sub-menu a, .absolute-header .main-navigation ul.children a, .navigation-modern.absolute-header .main-navigation ul.children a { text-align: left; line-height: 1.56; } .navigation-horizontal .main-navigation ul.sub-menu a > .icon, .navigation-horizontal .main-navigation ul.children a > .icon { padding-left: 0; padding-right: 0; float: left; } .main-navigation ul ul { display: none; margin-left: 0.875em; } .main-navigation ul .toggled-on { display: block; } #primary-search-wrapper > .social-navigation { display: none; float: left; } #menu-toggle { border: none; border-radius: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-direction: row; } .menu-label { transition: 0.3s; display: inline-block; margin-left: 7px; margin-top: 0; } @media (orientation: portrait) { #primary-menu-wrapper .menu-toggle .icon { width: 25px; height: 25px; padding: 3px; transition: 0.3s; } } @media screen and (orientation: landscape) and (min-device-width: 480px) and (max-device-width: 982px) { #feature-slider-section .entry-title, .custom-header-media .section-title, .custom-header-media .section-title, body.color-scheme-music.home .header-media .section-title, body.color-scheme-music #feature-slider-section .entry-title, body.color-scheme-wedding.home .header-media .section-title, body.color-scheme-wedding #feature-slider-section .entry-title body.color-scheme-corporate.home .header-media .section-title, body.color-scheme-corporate #feature-slider-section .entry-title, body.color-scheme-ecommerce.home .header-media .section-title, body.color-scheme-ecommerce #feature-slider-section .entry-title { font-size: 24px; font-size: 1.5rem; } #feature-slider-section .active .entry-container .view-more, .sticky-playlist-enabled .scroll-down { display: none; } } .mobile-social-search { clear: both; } .social-navigation, .social-links-menu { font-size: 16px; font-size: 1rem; padding: 0; } .social-navigation .icon { height: 20px; width: 16px; vertical-align: middle; } .social-navigation .search-container .icon { top: 0px; } .social-navigation ul, .social-links-menu ul { list-style: none; list-style-type: none; margin: 0; } .social-navigation li, .social-links-menu li { display: inline-block; margin: 0; } .social-navigation a, .social-links-menu a { background-color: transparent; display: inline-block; font-size: 16px; font-size: 1rem; margin: 2px 3px; position: relative; padding: 0; text-align: center; height: 36px; width: 36px; display: flex; align-items: center; justify-content: center; } .site-footer-menu .wrapper > nav { margin-bottom: 21px; text-align: center; } .social-floating-navigation { position: absolute; display: none; top: 70vh; left: 10px; -webkit-transform: rotate(-90deg) translateX(0); -moz-transform: rotate(-90deg) translateX(0); -ms-transform: rotate(-90deg) translateX(0); -o-transform: rotate(-90deg) translateX(0); transform: rotate(-90deg) translateX(0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; z-index: 999; } .social-floating-navigation:not(.hide-label) .social-navigation a { font-size: 12px; font-size: 0.75rem; width: auto; height: auto; position: relative; margin: 0 14px; } .social-floating-navigation:not(.hide-label) .social-navigation .icon { margin-right: 7px; top: 4px; width: 12px; height: 12px; } .social-floating-navigation:not(.hide-label) .social-navigation li + li a:after { content: ""; position: absolute; top: 50%; left: -21px; width: 5px; height: 5px; border-radius: 50%; margin-top: -2px; } .social-floating-navigation.hide-label .social-navigation a > span, .social-floating-navigation.hide-label .social-navigation li + li a:after { display: none; } .menu-toggle.search-toggle.open + .menu-inside-wrapper { opacity: 1; visibility: visible; } #primary-search-wrapper .menu-inside-wrapper { position: absolute; } .search-inside-wrapper { position: fixed; width: 100%; top: 5%; left: 0; background: rgba(51, 51, 51, 0.647); height: 100vh; z-index: 999; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s; transition: all 0.4s; display: flex; justify-content: center; align-items: center; } .search-wrapper-open .search-inside-wrapper { opacity: 1; visibility: visible; top: 0; } .search-content button svg.icon { width: 22px; height: 22px; } .search-content { height: 80%; width: 1400px; margin: 0 10%; max-width: 100%; padding: 10% 7%; } .search-content .search-container { padding: 0; margin-bottom: 35px; input { font-size: 32px; font-size: 2rem; border: 2px solid; border-top: none; border-left: none; border-right: none; padding: 14px 0; } } .search-tags a { border: 2px solid; padding: 7px 21px; border-radius: 22px; margin-top: 20px; display: inline-block; margin-right: 10px; } button.close-submit { position: absolute; right: 17px; bottom: 20px; padding: 14px; border-radius: 50%; } #primary-search-wrapper .menu-toggle-wrapper { padding: 0; } .menu-social-container { margin: 15px 30px; } // .navigation-modern #primary-menu-wrapper .menu-inside-wrapper { // max-width: 350px; // position: fixed; // width: 300px; // padding: 56px 0; // height: 100vh; // } .close-toggle { margin-left: auto; margin-bottom: 7px; font-weight: 400; } .admin-bar #primary-menu-wrapper .menu-inside-wrapper { padding-top: 63px; } body.menu-open #page { overflow: visible; }