Fixes mobile styles
This commit is contained in:
Andy Tudhope
parent
7e2ce29698
commit
894866c2e6
|
|
@ -1,35 +1,42 @@
|
|||
<header id="general-menu">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<a href="https://status.im/"></a>
|
||||
</div>
|
||||
<nav>
|
||||
{{ partial('partial/shared-partials/partials/header-nav') }}
|
||||
</nav>
|
||||
<a class="logo" href={{url_for_lang('/')}}></a>
|
||||
{{ partial('partial/shared-partials/partials/header-nav') }}
|
||||
</div>
|
||||
<a href="#" class="mobile-menu-trigger">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4 7C4 6.44727 4.44775 6 5 6H19C19.5522 6 20 6.44727 20 7C20 7.28516 19.8811 7.54102 19.6903 7.72266C19.5109 7.89453 19.2677 8 19 8H5C4.44775 8 4 7.55273 4 7ZM4 17C4 16.4473 4.44775 16 5 16H19C19.1147 16 19.2251 16.0195 19.3278 16.0547C19.463 16.1016 19.5851 16.1777 19.687 16.2734C19.8798 16.4551 20 16.7129 20 17C20 17.5527 19.5522 18 19 18H5C4.44775 18 4 17.5527 4 17ZM5 11C4.44775 11 4 11.4473 4 12C4 12.5527 4.44775 13 5 13H15C15.3312 13 15.6249 12.8398 15.8068 12.5918C15.9282 12.4258 16 12.2207 16 12C16 11.6387 15.8087 11.3223 15.5221 11.1465C15.3701 11.0527 15.1913 11 15 11H5Z" fill="black"></path> </svg>
|
||||
</a>
|
||||
<div class="btns">
|
||||
<a href="#" class="chat">Status Chat</a>
|
||||
</div>
|
||||
</header>
|
||||
<div id="general-menu-mobile">
|
||||
<div class="mobile-menu-container-inner">
|
||||
<div class="mobile-menu-header">
|
||||
<div class="logo">
|
||||
<a href="/"><span>status</span></a>
|
||||
</div>
|
||||
<a href="#" class="close">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<nav></nav>
|
||||
<div class="header-right">
|
||||
<a href="http://get.status.im/chat/public/status-incubate" class="button button--secondary" style="margin-right: 8px">Join Status Chat</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="general-menu-backdrop"></div>
|
||||
|
||||
<div class="mobile-nav-wrap">
|
||||
<div class="mobile-nav-inner">
|
||||
<a class="logo" href={{url_for_lang('/')}}></a>
|
||||
<a class="icon-close mobile-nav-close" href="#"></a>
|
||||
<ul class="mobile-nav">
|
||||
<li><a href="https://our.status.im/tag/incubate/">Blog</a></li>
|
||||
<li><a href="https://status.im/docs">Docs</a></li>
|
||||
<li class="item--dropdown item--to-show">
|
||||
<span>Projects</span>
|
||||
<ul class="mobile-sub-nav">
|
||||
<li><a href="https://incubate.status.im/" class="">Incubate</a></li>
|
||||
<li><a href="https://nimbus.status.im/" class="">Nimbus</a></li>
|
||||
<li><a href="https://embark.status.im/" class="">Embark</a></li>
|
||||
<li><a href="https://hardwallet.status.im/" class="">Keycard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://status.im/contribute/" class="">Contribute</a></li>
|
||||
</ul>
|
||||
<div class="mobile-nav-footer">
|
||||
<a href="http://get.status.im/chat/public/status-incubate" class="button button--secondary">Join Status Chat</a>
|
||||
</div>
|
||||
<header class="dropdown">
|
||||
<nav>
|
||||
{{ partial('partial/shared-partials/partials/header-nav') }}
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<div class="popup-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="popup-wrap popup-wrap--community">
|
||||
<div class="popup popup--community">
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 100498f37bca143184217d3531d33bd5c78f22f0
|
||||
Subproject commit 4a37794713b071c7e946c13aeecc32d04d9e5463
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99428 8.46391L4.45664 4.93465C4.07198 4.5509 3.43505 4.54715 3.04453 4.93675C2.65128 5.32906 2.65306 5.95707 3.04243 6.34552L7.28927 10.5823C7.48126 10.7738 7.73609 10.8707 7.99176 10.8713C8.2508 10.8737 8.50495 10.7762 8.69929 10.5823L12.9461 6.34552C13.3308 5.96177 13.3346 5.32635 12.944 4.93675C12.5508 4.54443 11.9213 4.54621 11.5319 4.93465L7.99428 8.46391Z" fill="#BBC1C5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 537 B |
|
|
@ -1,29 +1,15 @@
|
|||
// let ScrollOver = require("./lib/ScrollOver.js")
|
||||
// let animateScroll = require("./lib/animatescroll.js")
|
||||
// let d3 = require("d3")
|
||||
|
||||
$(document).ready(function () {
|
||||
var months = {'01':'Jan', '02':'Feb', '03':'Mar', '04':'Apr', '05':'May', '06':'Jun', '07':'Jul', '08':'Aug', '09':'Sep', '10':'Oct', '11':'Nov', '12':'Dec'};
|
||||
let url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';
|
||||
var urlBase = [location.protocol, '//', location.host, location.pathname].join('');
|
||||
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
// Fixes Parallax effect and div to popup overlapping with the main menu options
|
||||
$('div#container').append($('.popup-wrap.popup-wrap--community')[0])
|
||||
$('div#container').append($('.popup-wrap.popup-wrap--projects')[0])
|
||||
|
||||
$(window).on('resize', function(event) {
|
||||
w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
setMenu(w);
|
||||
});
|
||||
|
||||
function setMenu(w) {
|
||||
if (w < 1199) {
|
||||
console.log("mobile")
|
||||
$('#general-menu nav ul').appendTo('#general-menu-mobile nav');
|
||||
} else {
|
||||
$('#general-menu-mobile nav ul').appendTo('#general-menu nav');
|
||||
};
|
||||
function getWords(str) {
|
||||
return str.split(/\s+/).slice(0,25).join(" ");
|
||||
}
|
||||
|
||||
setMenu(w);
|
||||
var months = {'01':'Jan', '02':'Feb', '03':'Mar', '04':'Apr', '05':'May', '06':'Jun', '07':'Jul', '08':'Aug', '09':'Sep', '10':'Oct', '11':'Nov', '12':'Dec'};
|
||||
url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
|
|
@ -53,39 +39,23 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
|
||||
function getWords(str) {
|
||||
return str.split(/\s+/).slice(0,25).join(" ");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
let heroImage = document.querySelectorAll(".hero-image")[0]
|
||||
|
||||
if(heroImage) {
|
||||
setTimeout(function(){
|
||||
addClassToElement(heroImage, "active")
|
||||
}, 200)
|
||||
}
|
||||
|
||||
/* Popups */
|
||||
|
||||
let community = document.querySelectorAll(".item--dropdown-community")[0]
|
||||
let projects = document.querySelectorAll(".item--dropdown-projects")[0]
|
||||
let mobileMenu = document.querySelectorAll(".mobile-menu-trigger")[0]
|
||||
|
||||
let popups = document.querySelectorAll('.popup-wrap')
|
||||
let popups = document.querySelectorAll(".popup-wrap")
|
||||
let overlays = document.querySelectorAll(".popup-overlay")
|
||||
let popupMenu = document.querySelectorAll("#general-menu-mobile")[0]
|
||||
|
||||
let closeButtons = document.querySelectorAll(".popup__button--close,#general-menu-mobile .close")
|
||||
let closeButtons = document.querySelectorAll(".popup__button--close")
|
||||
|
||||
let activePopup = null;
|
||||
let activeOverlay = null;
|
||||
|
||||
community.addEventListener('click', function(event){
|
||||
showPopup(popups[0])
|
||||
event.preventDefault()
|
||||
|
||||
showPopup(popups[0])
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
projects.addEventListener('click', function(event){
|
||||
|
|
@ -93,11 +63,6 @@ projects.addEventListener('click', function(event){
|
|||
event.preventDefault()
|
||||
})
|
||||
|
||||
mobileMenu.addEventListener('click', function(event) {
|
||||
showPopup(popupMenu)
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
closeButtons.forEach((button) => {
|
||||
button.addEventListener('click', closeActivePopup)
|
||||
})
|
||||
|
|
@ -112,15 +77,10 @@ function showPopup(whichPopup) {
|
|||
}
|
||||
|
||||
function closeActivePopup() {
|
||||
console.log("test")
|
||||
removeClassFromElement(activePopup, "popup--shown");
|
||||
activePopup = null;
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
removeClassFromElement(activePopup, "")
|
||||
}
|
||||
|
||||
/* Code highlighting */
|
||||
|
||||
function highlight() {
|
||||
|
|
@ -150,7 +110,7 @@ function highlight() {
|
|||
})
|
||||
|
||||
/* Mobile Nav */
|
||||
/*
|
||||
|
||||
let moreLink = document.querySelectorAll(".item--more")[0]
|
||||
|
||||
let nav = document.querySelectorAll(".mobile-nav-wrap")[0]
|
||||
|
|
@ -174,7 +134,6 @@ function showNav() {
|
|||
function closeNav() {
|
||||
removeClassFromElement(nav, "mobile-nav--shown");
|
||||
}
|
||||
*/
|
||||
|
||||
/*--- Utils ---*/
|
||||
function addClassToElement(element, className) {
|
||||
|
|
@ -189,4 +148,4 @@ function removeClassFromElement(element, className) {
|
|||
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ')
|
||||
}
|
||||
return element
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +1,16 @@
|
|||
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
|
||||
// let ScrollOver = require("./lib/ScrollOver.js")
|
||||
// let animateScroll = require("./lib/animatescroll.js")
|
||||
// let d3 = require("d3")
|
||||
|
||||
$(document).ready(function () {
|
||||
var months = { '01': 'Jan', '02': 'Feb', '03': 'Mar', '04': 'Apr', '05': 'May', '06': 'Jun', '07': 'Jul', '08': 'Aug', '09': 'Sep', '10': 'Oct', '11': 'Nov', '12': 'Dec' };
|
||||
let url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';
|
||||
var urlBase = [location.protocol, '//', location.host, location.pathname].join('');
|
||||
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
// Fixes Parallax effect and div to popup overlapping with the main menu options
|
||||
$('div#container').append($('.popup-wrap.popup-wrap--community')[0]);
|
||||
$('div#container').append($('.popup-wrap.popup-wrap--projects')[0]);
|
||||
|
||||
$(window).on('resize', function (event) {
|
||||
w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
setMenu(w);
|
||||
});
|
||||
|
||||
function setMenu(w) {
|
||||
if (w < 1199) {
|
||||
console.log("mobile");
|
||||
$('#general-menu nav ul').appendTo('#general-menu-mobile nav');
|
||||
} else {
|
||||
$('#general-menu-mobile nav ul').appendTo('#general-menu nav');
|
||||
};
|
||||
function getWords(str) {
|
||||
return str.split(/\s+/).slice(0, 25).join(" ");
|
||||
}
|
||||
|
||||
setMenu(w);
|
||||
var months = { '01': 'Jan', '02': 'Feb', '03': 'Mar', '04': 'Apr', '05': 'May', '06': 'Jun', '07': 'Jul', '08': 'Aug', '09': 'Sep', '10': 'Oct', '11': 'Nov', '12': 'Dec' };
|
||||
url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
|
|
@ -53,31 +39,16 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
function getWords(str) {
|
||||
return str.split(/\s+/).slice(0, 25).join(" ");
|
||||
}
|
||||
});
|
||||
|
||||
let heroImage = document.querySelectorAll(".hero-image")[0];
|
||||
|
||||
if (heroImage) {
|
||||
setTimeout(function () {
|
||||
addClassToElement(heroImage, "active");
|
||||
}, 200);
|
||||
}
|
||||
|
||||
/* Popups */
|
||||
|
||||
let community = document.querySelectorAll(".item--dropdown-community")[0];
|
||||
let projects = document.querySelectorAll(".item--dropdown-projects")[0];
|
||||
let mobileMenu = document.querySelectorAll(".mobile-menu-trigger")[0];
|
||||
|
||||
let popups = document.querySelectorAll('.popup-wrap');
|
||||
let popups = document.querySelectorAll(".popup-wrap");
|
||||
let overlays = document.querySelectorAll(".popup-overlay");
|
||||
let popupMenu = document.querySelectorAll("#general-menu-mobile")[0];
|
||||
|
||||
let closeButtons = document.querySelectorAll(".popup__button--close,#general-menu-mobile .close");
|
||||
let closeButtons = document.querySelectorAll(".popup__button--close");
|
||||
|
||||
let activePopup = null;
|
||||
let activeOverlay = null;
|
||||
|
|
@ -92,11 +63,6 @@ projects.addEventListener('click', function (event) {
|
|||
event.preventDefault();
|
||||
});
|
||||
|
||||
mobileMenu.addEventListener('click', function (event) {
|
||||
showPopup(popupMenu);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener('click', closeActivePopup);
|
||||
});
|
||||
|
|
@ -111,15 +77,10 @@ function showPopup(whichPopup) {
|
|||
}
|
||||
|
||||
function closeActivePopup() {
|
||||
console.log("test");
|
||||
removeClassFromElement(activePopup, "popup--shown");
|
||||
activePopup = null;
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
removeClassFromElement(activePopup, "");
|
||||
}
|
||||
|
||||
/* Code highlighting */
|
||||
|
||||
function highlight() {
|
||||
|
|
@ -149,22 +110,20 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
/* Mobile Nav */
|
||||
/*
|
||||
let moreLink = document.querySelectorAll(".item--more")[0]
|
||||
|
||||
let nav = document.querySelectorAll(".mobile-nav-wrap")[0]
|
||||
let navOverlay = document.querySelectorAll(".mobile-nav-overlay")[0]
|
||||
let navCloseButton = document.querySelectorAll(".mobile-nav-close")[0]
|
||||
let moreLink = document.querySelectorAll(".item--more")[0];
|
||||
|
||||
let nav = document.querySelectorAll(".mobile-nav-wrap")[0];
|
||||
let navOverlay = document.querySelectorAll(".mobile-nav-overlay")[0];
|
||||
let navCloseButton = document.querySelectorAll(".mobile-nav-close")[0];
|
||||
|
||||
moreLink.addEventListener('click', function(event){
|
||||
showNav()
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
navCloseButton.addEventListener('click', closeNav)
|
||||
navOverlay.addEventListener('click', closeNav)
|
||||
moreLink.addEventListener('click', function (event) {
|
||||
showNav();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
navCloseButton.addEventListener('click', closeNav);
|
||||
navOverlay.addEventListener('click', closeNav);
|
||||
|
||||
function showNav() {
|
||||
addClassToElement(nav, "mobile-nav--shown");
|
||||
|
|
@ -173,7 +132,6 @@ function showNav() {
|
|||
function closeNav() {
|
||||
removeClassFromElement(nav, "mobile-nav--shown");
|
||||
}
|
||||
*/
|
||||
|
||||
/*--- Utils ---*/
|
||||
function addClassToElement(element, className) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,238 +1,207 @@
|
|||
$header-padding-normal:10px;
|
||||
$header-padding-max:30px;
|
||||
$logo-size:50px;
|
||||
|
||||
#header {
|
||||
position: relative;
|
||||
padding: $header-padding-normal 0;
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
.header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
height: 56px;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin: 24px 0 0 -600px;
|
||||
}
|
||||
|
||||
#header-inner {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
width: 1190px;
|
||||
margin-left: -120px;
|
||||
@media mq-mobile {
|
||||
justify-content: center;
|
||||
}
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button--header {
|
||||
margin-top: 7px;
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#logo-wrap-page {
|
||||
flex: 0;
|
||||
-webkit-flex: none;
|
||||
margin-top: 8px;
|
||||
width: 200px;
|
||||
.logo {
|
||||
display: block;
|
||||
width: 146px;
|
||||
height: 56px;
|
||||
background-image: url(../img/logo-status.svg);
|
||||
background-size: 146px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#logo {
|
||||
//hide-text()
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
// end hide-text()
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-image: url(../img/logo_white.svg);
|
||||
text-decoration: none;
|
||||
margin: -20px 0 0 30px;
|
||||
background-color: #5EC12F;
|
||||
border-radius: 50%;
|
||||
background-size: 22px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
.mobile-nav-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
z-index: 400;
|
||||
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.mobile-nav-wrap.mobile-nav--shown {
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.mobile-nav-inner {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $colorWhite;
|
||||
box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066);
|
||||
z-index: 600;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -25px ,0) scaleY(.94);
|
||||
visibility: hidden;
|
||||
transition: visibility .5s linear 0s, opacity .1s linear, transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425);
|
||||
}
|
||||
|
||||
.mobile-nav--shown .mobile-nav-inner {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -5px ,0) scaleY(1);
|
||||
}
|
||||
|
||||
.mobile-nav-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(120, 135, 148, .25);
|
||||
z-index: 500;
|
||||
|
||||
opacity: 0;
|
||||
transition-delay: .2s;
|
||||
transform: translate3d(0, 0 ,0) scale(1);
|
||||
visibility: hidden;
|
||||
transition: visibility .5s linear 0s, opacity .4s ease;
|
||||
}
|
||||
|
||||
.mobile-nav--shown .mobile-nav-overlay {
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0 ,0) scale(1);
|
||||
}
|
||||
|
||||
.mobile-nav-wrap .logo {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mobile-nav-wrap .icon-close {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 40px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../img/icon-close.svg);
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
padding: 0 24px 16px 24px;
|
||||
}
|
||||
|
||||
.mobile-nav li a,
|
||||
.mobile-nav li span {
|
||||
color: $colorBlack;
|
||||
display: block;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.mobile-sub-nav li a {
|
||||
color: $colorGray;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
|
||||
.mobile-nav-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 0;
|
||||
margin: 0 24px;
|
||||
border-top: 1px solid rgba(232, 235, 236, 1)
|
||||
}
|
||||
|
||||
.mobile-nav-footer .button {
|
||||
display: block;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 32px;
|
||||
nav {
|
||||
ul {
|
||||
li {
|
||||
float: left;
|
||||
margin: 8px;
|
||||
position: relative;
|
||||
a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
&:focus {
|
||||
color: rgba(255, 255,255,1);
|
||||
}
|
||||
a {
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
& > ul {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
left: 0;
|
||||
padding: 10px 5px 5px 5px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
li {
|
||||
float: none;
|
||||
width: 8.125em;
|
||||
a {
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown:before,
|
||||
.dropdown:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.dropdown nav ul li ul li a:link,
|
||||
.dropdown nav ul li ul li a:visited {
|
||||
color: #8d99a4;
|
||||
.main-nav li {
|
||||
margin: 16px 12px 12px 12px;
|
||||
}
|
||||
|
||||
#search-input-wrap {
|
||||
display: none;
|
||||
height: 40px;
|
||||
width: 180px;
|
||||
background-color: #ff9c00;
|
||||
border-radius: 22px;
|
||||
padding: 0 12px;
|
||||
align-items: center;
|
||||
transition: 0.2s;
|
||||
&.on {
|
||||
display: flex;
|
||||
@media mq-mobile {
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
&.standalone {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
width: 180px;
|
||||
background-color: $colorWhite;
|
||||
}
|
||||
.main-nav li.item--dropdown{
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
#search-input-icon {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 0 2px 0 0;
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
@media mq-mobile {
|
||||
height: auto;
|
||||
}
|
||||
.main-nav li.item--more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-input-wrap.active #search-input-icon {
|
||||
color: $colorNavy;
|
||||
.main-nav li.item--more a{
|
||||
color: $colorGray
|
||||
}
|
||||
|
||||
#search-input-wrap.active #search-input {
|
||||
color: $colorNavy;
|
||||
.main-nav li a {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
background: none;
|
||||
width: 126px;
|
||||
height: 24px;
|
||||
font-size: 15px;
|
||||
color: $colorWhite;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
@media mq-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#search-input-wrap.active #search-input {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#search-input::-webkit-input-placeholder {
|
||||
color:rgba(255, 255, 255, .4);
|
||||
}
|
||||
|
||||
#search-input::-moz-placeholder {
|
||||
color:rgba(255, 255, 255, .4);
|
||||
}
|
||||
|
||||
#search-input:-ms-input-placeholder {
|
||||
color:rgba(255, 255, 255, .4);
|
||||
}
|
||||
|
||||
#search-input:-moz-placeholder {
|
||||
color:rgba(255, 255, 255, .4);
|
||||
}
|
||||
|
||||
#search-input-wrap .algolia-autocomplete .ds-dropdown-menu {
|
||||
@media (max-width: 560px) {
|
||||
min-width: 400px;
|
||||
}
|
||||
@media (max-width: 470px) {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
#lang-select-wrap {
|
||||
display: none;
|
||||
position: relative;
|
||||
@media mq-normal {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#lang-select-label {
|
||||
color: $colorWhite;
|
||||
opacity: 0.7;
|
||||
font-family: $FontTitle;
|
||||
line-height: $logo-size;
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
#lang-select {
|
||||
opacity: 0;
|
||||
.main-nav li.item--dropdown a::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-appearance: menulist-button;
|
||||
font-size: inherit;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
padding: 0 8px 0 8px;
|
||||
top: 3px;
|
||||
right: -24px;
|
||||
background-image: url(../img/icon-arrow-down.svg);
|
||||
transition: transform .2s ease;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
|
||||
.main-nav li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main-nav li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.main-nav a:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.main-nav a:visited {
|
||||
//TODO
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
color: $colorBlack;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-specific-menu {
|
||||
|
|
@ -240,7 +209,7 @@ $logo-size:50px;
|
|||
width: 100%;
|
||||
padding: 11px 0 0 20px;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
margin: 0 auto;
|
||||
margin: 90px auto 0px;
|
||||
span {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
|
@ -263,3 +232,89 @@ $logo-size:50px;
|
|||
.active {
|
||||
color: $colorIncubate;
|
||||
}
|
||||
|
||||
@media (max-width: 1248px) {
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 24px 0 0 0;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 24px 0 0 0;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
|
||||
.logo {
|
||||
width: 121px;
|
||||
height: 46px;
|
||||
background-size: 121px;
|
||||
}
|
||||
|
||||
.main-nav li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-nav li.item--to-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-nav li.item--more {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-nav li {
|
||||
margin: 16px 8px 12px 8px;
|
||||
}
|
||||
|
||||
.main-nav li.item--dropdown{
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.header {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main-nav li {
|
||||
margin-top: 24px
|
||||
}
|
||||
|
||||
.site-specific-menu {
|
||||
margin: 130px auto 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
@import "highlight";
|
||||
@import "index";
|
||||
@import "page";
|
||||
@import "mobile_nav";
|
||||
@import "popup";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,164 +0,0 @@
|
|||
$toggle-width: 25px;
|
||||
$toggle-height: $toggle-width * 0.8;
|
||||
$toggle-line: 2px;
|
||||
$transition-duration: 0.4s;
|
||||
$lang-select-height: 40px;
|
||||
|
||||
.mobile-menu-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mobile-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $mobile-nav-width;
|
||||
left: $mobile-nav-width * -1;
|
||||
height: 100%;
|
||||
background: $colorNavy;
|
||||
transition: transition-duration;
|
||||
font-family: $FontTitle;
|
||||
.mobile-nav-on & {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-nav-inner {
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: $lang-select-height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#mobile-nav-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: $gutter-width;
|
||||
width: $toggle-width;
|
||||
height: $toggle-height;
|
||||
margin: auto;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
&:active, .mobile-nav-on & {
|
||||
opacity: 1;
|
||||
}
|
||||
@media mq-normal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-toggle-bar {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $toggle-line;
|
||||
transition: transition-duration;
|
||||
transform-origin: 0;
|
||||
border-radius: $toggle-line;
|
||||
&:first-child {
|
||||
top: 0;
|
||||
.mobile-nav-on & {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: ($toggle-height - $toggle-line) * 0.5;
|
||||
.mobile-nav-on & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
top: $toggle-height - $toggle-line;
|
||||
.mobile-nav-on & {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mobile-nav-title {
|
||||
color: $colorLink;
|
||||
font-weight: bold;
|
||||
padding: 10px 15px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
border-top: 1px solid #444;
|
||||
margin-top: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#mobile-lang-select-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: $colorNavy;
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
|
||||
#mobile-lang-select-label {
|
||||
line-height: $lang-select-height;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-lang-select {
|
||||
-webkit-appearance: menulist-button;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
transition: transition-duration;
|
||||
height: 100%;
|
||||
// overflow: auto
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.mobile-nav-on & {
|
||||
transform: translateX(mobile-nav-width);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-nav-dimmer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
transition: opacity transition-duration, transform 0s transition-duration;
|
||||
.mobile-nav-on & {
|
||||
width: 100%;
|
||||
opacity: 0.7;
|
||||
transform: translateX(-100%);
|
||||
transition: opacity transition-duration;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue