%PDF- %PDF-
Direktori : /home/emergentqj/jugement/wp-content/themes/Newspaper/mobile/includes/less_files/ |
Current File : /home/emergentqj/jugement/wp-content/themes/Newspaper/mobile/includes/less_files/menu.less |
/* Mobile main menu */ .td-header-wrap { background-color: #222; color: #fff; height: 60px; position: relative; z-index: 9998; width: 100%; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } // open menu icon #td-top-mobile-toggle { display: inline-block; i { font-size: 26px; height: 60px; width: 60px; line-height: 64px; display: inline-block; color: #fff; } } // logo .td-main-menu-logo { display: block; margin-right: 0; height: 0; float: left; a { line-height: 46px; } img { margin: auto; bottom: 0; top: 0; left: 0; right: 0; position: absolute; padding: 6px 0; max-height: 60px; max-width: 250px; @media(max-width: 320px){ max-width: 210px; } } } /* Search */ // search icon .td-search-icon { position: absolute; right: 0; top: 0; i { height: 60px; width: 60px; line-height: 64px; font-size: 22px; margin-right: 2px; color: #fff; } } // search container .td-search-wrap { padding: 0; position: absolute; width: 100%; height: auto; top: 0; text-align: center; z-index: 9999; visibility: hidden; color: #fff; // live search .td_module_wrap { text-align: left; } .entry-title a { color: #fff; } .td-post-date { color: #ddd; } .td-search-form { margin-bottom: 30px; } .td-aj-search-results { margin: 0 5%; text-align: left; } .td-module-thumb { top: auto; // fix the live search display image left: auto; } .result-msg { margin: 0 5%; a { display: block; text-align: center; width: 100%; text-transform: uppercase; line-height: 50px; color: #000; border: none; .box-shadow(0 0 8px rgba(0, 0, 0, 0.36)); margin: 30px 0 30px; font-size: 17px; border-radius: 0; background-color: #fff; opacity: 0.8; } } } // search background .td-search-background { background-repeat: no-repeat; background-size: cover; background-position: center top; position: fixed; display: block; width: 100%; height: 113%; z-index: 9999; .transition(all 0.5s cubic-bezier(.79,.14,.15,.86)); .transform(translate3d(100%, 0, 0)); visibility: hidden; &:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.98; background: #333145; background: -moz-linear-gradient(top, #333145 0%, #b8333e 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #333145), color-stop(100%, #b8333e)); background: -webkit-linear-gradient(top, #333145 0%, #b8333e 100%); background: -o-linear-gradient(top, #333145 0%, #b8333e 100%); background: -ms-linear-gradient(top, #333145 0%, #b8333e 100%); background: linear-gradient(to bottom, #333145 0%, #b8333e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333145', endColorstr='#b8333e', GradientType=0 ); } } // close button .td-search-close { text-align: right; z-index: 1000; .td-icon-close-mobile { height: 70px; width: 70px; line-height: 70px; font-size: 21px; color: #fff; position: relative; top: 4px; right: 0; } } // search form .td-drop-down-search { opacity: 0; visibility: hidden; .transition(all 0.5s ease 0s); -webkit-backface-visibility: hidden; // fix the live search display text position: relative; .btn { display: none; } } // search field #td-header-search { color: #fff; font-weight: bold; font-size: 28px; height: 40px; line-height: 36px; border: 0; background: transparent; outline: 0; margin: 8px 0; text-align: center; } .td-search-input { margin: 0 5%; position: relative; span { opacity: 0.8; font-size: 12px; } &:before, &:after { content: ''; position: absolute; display: block; width: 100%; height: 1px; background-color: #fff; bottom: 0; left: 0; opacity: 0.2; } &:after { opacity: 0.8; .transform(scaleX(0)); .transition(transform 0.5s ease 0.8s); } } // animation // search opened class .td-search-opened .td-search-opened { position: relative; #wpadminbar { position: fixed !important; } #td-outer-wrap { position: fixed; .transform(scale3d(0.9, 0.9, 0.9)); .box-shadow(0 0 46px); } .td-drop-down-search { opacity: 1; visibility: visible; .transition(all 0.5s ease 0.3s); } .td-search-background { .transform(translate3d(0, 0, 0)); visibility: visible; } .td-search-input:after { .transform(scaleX(1)); } // menu admin bar &.admin-bar .td-search-wrap { padding-top: 0; } } /* Search opened menu with admin bar */ .admin-bar .td-search-wrap { padding-top: 32px; } @media(max-width: 767px){ .admin-bar .td-search-wrap { padding-top: 46px; } } /* Mobile opened menu with admin bar */ .admin-bar #td-mobile-nav { padding-top: 32px; } @media(max-width: 767px){ .admin-bar #td-mobile-nav { padding-top: 46px; } } // menu background .td-menu-background { background-repeat: no-repeat; background-size: cover; background-position: center top; position: fixed; display: block; width: 100%; height: 113%; z-index: 9999; .transition(transform 0.5s cubic-bezier(.79,.14,.15,.86)); .transform(translate3d(-100%, 0, 0)); &:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.98; background: #333145; background: -moz-linear-gradient(top, #333145 0%, #b8333e 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #333145), color-stop(100%, #b8333e)); background: -webkit-linear-gradient(top, #333145 0%, #b8333e 100%); background: -o-linear-gradient(top, #333145 0%, #b8333e 100%); background: -ms-linear-gradient(top, #333145 0%, #b8333e 100%); background: linear-gradient(to bottom, #333145 0%, #b8333e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333145', endColorstr='#b8333e', GradientType=0 ); } } // container #td-mobile-nav { padding: 0; position: absolute; width: 100%; top: 0; z-index: 9999; .transition(transform 0.5s cubic-bezier(.79,.14,.15,.86)); .transform(translate3d(-99%, 0, 0)); // hack IOS top open smooth left: -1%; // prevent when the menu higher then content height: 1px; overflow: hidden; } // top bar .td-menu-socials-wrap { position: relative; .td-icon-font { color: #fff; } } .td-menu-socials { padding: 0 65px 0 20px; overflow: hidden; height: 60px; .td-social-icon-wrap { margin: 20px 5px 0 0; i { border: none; background-color: transparent; } } } .td-mobile-close{ position: absolute; right: 0; top: 0; z-index: 1000; .td-icon-close-mobile { height: 70px; width: 70px; line-height: 70px; font-size: 21px; color: #fff; top: 4px; position: relative; } } // mobile menu .td-mobile-content { padding: 20px 20px 0; } .td-mobile-container { padding-bottom: 20px; } /* menu content */ .td-mobile-content { // font awesome in menu .fa { margin-right: 10px; min-width: 22px !important; display: inline-block; font-size: 18px; text-align: center; position: relative; top: -1px; } .sub-menu .fa { min-width: 16px !important; font-size: 13px; } ul { list-style: none; margin: 0; padding: 0; } li { float:none; margin-left: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; a { display: block; line-height: 21px; font-size: 21px; color: #fff; margin-left: 0; padding: 12px 45px 12px 12px; font-weight: bold; } } .td-icon-menu-right { position: absolute; cursor: pointer; top: 3px; right: -7px; z-index: 1000; font-size: 14px; padding: 12px 15px; float: right; color: #fff; -webkit-transform-origin: 50% 50% 0px; -moz-transform-origin: 50% 50% 0px; -o-transform-origin: 50% 50% 0px; transform-origin: 50% 50% 0px; .transition(transform 0.3s ease); .transform(rotate(-90deg)); &:before { content: '\e83d'; } } // animation sub-menu .td-sub-menu-open { > a i { .transform(rotate(0deg)); } > ul { display: block; max-height: 1000px; opacity: 0.9; } } /* first submenu */ .sub-menu { max-height: 0; overflow: hidden; opacity: 0; .transition(max-height 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1)); .td-icon-menu-right { font-size: 11px; right: -6px; top: 1px; color: #fff; } a { padding: 9px 36px 9px 36px !important; line-height: 19px; font-size: 16px; font-weight: normal; } /* 2nd level submenu */ .sub-menu { a { padding-left: 55px !important; } /* 3rd level submenu */ .sub-menu { a { padding-left: 74px !important; } } } } // mobile menu active .current-menu-item > a, .current-menu-ancestor > a { color: #73C7E3; } /* hide the icons */ .menu_icon { display: none; } /* reposition the main menu */ .menu-item-has-children { a { width: 100%; z-index: 1; } } .td-link-element-after { position: relative; } } // menu opened class .td-menu-mob-open-menu .td-menu-mob-open-menu { position: relative; #wpadminbar { position: fixed !important; } #td-outer-wrap { position: fixed; .transform(scale3d(0.9, 0.9, 0.9)); .box-shadow(0 0 46px); } #td-mobile-nav { // prevent when the menu higher then content height: auto; overflow: auto; .transform(translate3d(0, 0, 0)); // hack IOS top open smooth left: 0; } .td-menu-background { .transform(translate3d(0, 0, 0)); } // menu admin bar &.admin-bar #td-mobile-nav { padding-top: 0; } }