navbar responsive rework
This commit is contained in:
Felix Hamann
parent
8a0b0c9788
commit
9ccc4f04ed
@ -129,6 +129,21 @@ h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
.main {
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
|
||||
@ -2,33 +2,33 @@ $newline never
|
||||
<div .navbar-container>
|
||||
<nav .navbar.js-sticky-navbar>
|
||||
|
||||
<div .navbar__logo>
|
||||
<a href="/" .navbar__logo>
|
||||
|
||||
<ul .navbar-left__list.list--inline>
|
||||
<ul .navbar__list.list--inline>
|
||||
$forall menuType <- menuTypes
|
||||
$case menuType
|
||||
$of NavbarAside (MenuItem label mIcon route _)
|
||||
<li .navbar-left__list-item :highlight route:.navbar-left__list-item--active>
|
||||
<a .navbar-left__link-wrapper href=@{route}>
|
||||
<li .navbar__list-item :highlight route:.navbar__list-item--active>
|
||||
<a .navbar__link-wrapper href=@{route}>
|
||||
<i .fas.fa-#{fromMaybe "none" mIcon}>
|
||||
<div .navbar-left__link-label>#{label}
|
||||
<div .navbar__link-label>#{label}
|
||||
$of _
|
||||
|
||||
<ul .navbar-right__list.list--inline>
|
||||
<ul .navbar__list.list--inline>
|
||||
$forall menuType <- menuTypes
|
||||
$case menuType
|
||||
$of NavbarRight (MenuItem label mIcon route _)
|
||||
<li .navbar-right__list-item :Just route == mcurrentRoute:.navbar-right__list-item--active>
|
||||
<a .navbar-right__link-wrapper href=@{route}>
|
||||
<li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
|
||||
<a .navbar__link-wrapper href=@{route}>
|
||||
$if isJust mIcon
|
||||
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
|
||||
<div .navbar-right__link-label>#{label}
|
||||
<div .navbar__link-label>#{label}
|
||||
$of NavbarSecondary (MenuItem label mIcon route _)
|
||||
<li .navbar-right__list-item.navbar-right__list-item--secondary :Just route == mcurrentRoute:.navbar-right__list-item--active>
|
||||
<a .navbar-right__link-wrapper href=@{route}>
|
||||
<li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
|
||||
<a .navbar__link-wrapper href=@{route}>
|
||||
$if isJust mIcon
|
||||
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
|
||||
<div .navbar-right__link-label>#{label}
|
||||
<div .navbar__link-label>#{label}
|
||||
$of _
|
||||
|
||||
<div .navbar__pushdown>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
padding-right: 5vw;
|
||||
padding-left: 20px;
|
||||
padding-right: 2vw;
|
||||
padding-left: calc(24% + 40px);
|
||||
background: var(--color-darker); /* Old browsers */
|
||||
background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
@ -21,24 +21,32 @@
|
||||
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.navbar {
|
||||
padding-left: 90px;
|
||||
padding-left: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.navbar {
|
||||
padding-left: 20px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 20px;
|
||||
transition: all .2s ease;
|
||||
transform-origin: left;
|
||||
width: 0px;
|
||||
color: var(--color-lightwhite);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-lightwhite);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: 'UniWorkY';
|
||||
@ -49,41 +57,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
.navbar__logo {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 425px) {
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.navbar__logo {
|
||||
transform: scale(0.3);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right__list {
|
||||
align-self: flex-end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-right__list-item {
|
||||
position: relative;
|
||||
transition: background-color .1s ease;
|
||||
|
||||
.glyphicon {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.glyphicon::before {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right__link-wrapper {
|
||||
/* links */
|
||||
.navbar__link-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -93,54 +82,110 @@
|
||||
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
||||
}
|
||||
|
||||
.navbar-right__link-label {
|
||||
.navbar__link-label {
|
||||
transition: opacity .2s ease;
|
||||
padding: 0 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar-right__list-item--secondary {
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.navbar__link-label {
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
.navbar__link-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* navbar list */
|
||||
.navbar__list {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* list item */
|
||||
.navbar__list-item {
|
||||
position: relative;
|
||||
transition: background-color .1s ease;
|
||||
|
||||
.glyphicon {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.glyphicon::before {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.fas {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
.navbar__list-item {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__list-item--secondary {
|
||||
margin-left: 20px;
|
||||
color: var(--color-grey);
|
||||
}
|
||||
.navbar-right__list-item--secondary + .navbar-right__list-item--secondary {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.navbar__list-item--secondary {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__list-item--secondary + .navbar__list-item--secondary {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.navbar-right__list-item--active {
|
||||
.navbar__list-item--active {
|
||||
background-color: var(--color-lightwhite);
|
||||
color: var(--color-dark);
|
||||
|
||||
.navbar-right__link-wrapper {
|
||||
.navbar__link-wrapper {
|
||||
color: var(--color-dark);
|
||||
}
|
||||
}
|
||||
.navbar-right__list-item--active .navbar-right__link-wrapper {
|
||||
|
||||
.navbar__list-item--active .navbar__link-wrapper {
|
||||
pointer-events: none;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-wrapper {
|
||||
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
|
||||
background-color: var(--color-darker);
|
||||
color: var(--color-lightwhite);
|
||||
}
|
||||
.navbar-right__list-item--secondary .navbar-right__link-wrapper {
|
||||
|
||||
.navbar__list-item--secondary .navbar__link-wrapper {
|
||||
color: var(--color-grey);
|
||||
}
|
||||
|
||||
/* left navbar list */
|
||||
.navbar-left__list {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sticky state */
|
||||
.navbar--sticky {
|
||||
height: var(--header-height-collapsed);
|
||||
z-index: 100;
|
||||
|
||||
.navbar-right__link-wrapper {
|
||||
.navbar__link-wrapper {
|
||||
height: var(--header-height-collapsed);
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__pushdown {
|
||||
@ -160,7 +205,7 @@
|
||||
height: var(--header-height-collapsed);
|
||||
}
|
||||
|
||||
.navbar-right__link-wrapper {
|
||||
.navbar__link-wrapper {
|
||||
height: var(--header-height-collapsed);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user