From fa291f2fd550c573eb14f485f82b392840d82bef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 23 Mar 2018 11:56:36 +0100 Subject: [PATCH] Fixed header on small width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- .../themes/nextcloud_com/static/styles.css | 156 +----------------- 1 file changed, 7 insertions(+), 149 deletions(-) diff --git a/_shared_assets/themes/nextcloud_com/static/styles.css b/_shared_assets/themes/nextcloud_com/static/styles.css index 717443bf3..71f8c6daa 100644 --- a/_shared_assets/themes/nextcloud_com/static/styles.css +++ b/_shared_assets/themes/nextcloud_com/static/styles.css @@ -391,152 +391,13 @@ nav a { @media (max-width: 992px) { .nav .container .brand { padding-left: 15px; } - .nav .container .brand .logo { - height: 53px; - width: 71px; } - .nav .container .brand .logo.menu-open { - background: url(../img/logo/logo_white_sprite.png) 0 0 no-repeat; - height: 100px; - width: 140px; - display: inline-block; - zoom: 0.5; } - .nav .container .brand .logo.menu-open.hoverPlay { - background-position-x: 0; - -webkit-animation: play 2s steps(33) forwards; - -moz-animation: play 2s steps(33) forwards; - -ms-animation: play 2s steps(33) forwards; - -o-animation: play 2s steps(33) forwards; - animation: play 2s steps(33) forwards; } - .nav .container .brand .logo.menu-open.stopedAnimation { - background-position-x: -4620px; } - .nav .container .mobile-bg { - position: fixed; - background: #0082c9; - padding-top: 25px; - z-index: 7; - top: 0; - right: 0; - width: 0; - height: 0; - visibility: hidden; - overflow: hidden; - border-bottom-left-radius: 100%; - transition: all 0.6s ease; } - .nav .container .active { - opacity: 1; - visibility: visible; - width: 150%; - height: 150%; } - .nav .container .navbar-toggle { - color: white; - background-color: white; - border-radius: 50px; - width: 50px; - height: 50px; - margin-top: 0; - z-index: 8; - display: block; - margin-right: 0; - border: none; - float: right; } - .nav .container .navbar-toggle:hover { - transform: scale(1.1); - transition: transform 0.3s cubic-bezier(0.56, 1, 0.86, 1.39); - transition-property: transform; - transition-duration: 0.3s; - transition-timing-function: cubic-bezier(0.56, 1, 0.86, 1.39); - transition-delay: initial; } - .nav .container .nav__sections-wrapper { - margin: 0 auto; - display: inline-block; - position: absolute; - top: 90px; - z-index: 2; - padding: 0; } - .nav .container .nav__sections-wrapper .nav__sections { - display: none; - position: relative; - left: 0; - padding: 0; - visibility: hidden; } - .nav .container .nav__sections-wrapper .nav__sections .nav__section { - display: block; - opacity: 1; - margin: 0; - opacity: 0; - color: white; - padding: 0; - visibility: hidden; } - .nav .container .nav__sections-wrapper .nav__sections .nav__section:last-child { - font-weight: 500; } - .nav .container .nav__sections-wrapper .nav__sections .nav__section a { - color: white; - text-decoration: none; } - .nav .container .nav__sections-wrapper .nav__sections.active { - display: block; - color: white; - margin: 0; - visibility: visible; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section { - animation: fadeInRight .5s ease forwards; - animation-delay: .35s; - visibility: visible; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__label { - font-size: 20px; - line-height: 20px; - padding-left: 0; - font-weight: 400; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(2) { - animation-delay: .4s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(3) { - animation-delay: .45s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(4) { - animation-delay: .50s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(5) { - animation-delay: .55s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(6) { - animation-delay: .60s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(7) { - animation-delay: .65s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section:nth-of-type(8) { - animation-delay: .70s; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__links { - display: none; - position: relative; - padding: 0; - width: 100%; - padding: 0 10px 0 20px; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__links .nav__item { - margin-left: 0; } - .nav .container .nav__sections-wrapper .nav__sections.active .nav__section .nav__links .nav__item a { - font-size: 18px; - line-height: 18px; - color: white; - margin-left: 0; - font-weight: 300; } - .nav .container .nav__sections-wrapper .right-buttons { - position: relative; - padding: 0; - margin: 0; - opacity: 0; - transition: all 0.3s; } - .nav .container .nav__sections-wrapper .right-buttons.active { - opacity: 1; - transition-delay: .65s; } - .nav .container .nav__sections-wrapper .right-buttons.active .nav__label { - color: white; } - .nav .container .nav__sections-wrapper .right-buttons.active .ghost-btn a { - pointer-events: all; } - .nav .container .nav__sections-wrapper .right-buttons .ghost-btn { - font-size: 20px; - line-height: 20px; - padding-left: 0; - font-weight: 400; - display: block; - text-align: left; - padding-left: 0; - animation: fadeInRight .5s ease forwards; - pointer-events: none; } } + .nav .container .right-buttons { + left: 10%; + right: auto; + margin-top: 30px;} + .nav .container .nav__sections .nav__section { + padding-top: 0;} +} @keyframes fadeInRight { 0% { opacity: 0; @@ -550,9 +411,6 @@ nav a { .nav { padding-bottom: 70px; transition: all .2s ease-in; } - @media (max-width: 992px) { - .nav { - padding-bottom: 20px; } } .nav.no-shadow { box-shadow: none !important; } .nav.scrolled {