ui: tab dividers (#321)

* ui: tab dividers

* fix: hide dividers on mobile
This commit is contained in:
Daniel 2022-06-10 09:38:09 +02:00 committed by GitHub
parent da99a3e5ea
commit 53c88ce45a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions

View file

@ -51,6 +51,7 @@ const CenterNav = ({ makerRunning, cjRunning, onClick }) => {
{t('navbar.tab_receive')}
</NavLink>
</rb.Nav.Item>
<div className="d-none d-md-flex align-items-center center-nav-link-divider">»</div>
<rb.Nav.Item className="d-flex align-items-stretch">
<NavLink
to={routes.jam}
@ -65,6 +66,7 @@ const CenterNav = ({ makerRunning, cjRunning, onClick }) => {
</div>
</NavLink>
</rb.Nav.Item>
<div className="d-none d-md-flex align-items-center center-nav-link-divider">/</div>
<rb.Nav.Item className="d-flex align-items-stretch">
<NavLink
to={routes.earn}
@ -79,6 +81,7 @@ const CenterNav = ({ makerRunning, cjRunning, onClick }) => {
</div>
</NavLink>
</rb.Nav.Item>
<div className="d-none d-md-flex align-items-center center-nav-link-divider">»</div>
<rb.Nav.Item className="d-flex align-items-stretch">
<NavLink
to={routes.send}

View file

@ -301,15 +301,18 @@ main {
@media only screen and (min-width: 768px) {
.center-nav-link {
min-width: 80px;
padding: 8px 0 !important;
padding: 8px 1.5rem !important;
}
.center-nav-link.active {
padding: 8px 0 6px 0 !important;
padding: 8px 1.5rem 6px 1.5rem !important;
border-bottom: 2px solid black;
}
.center-nav-link-divider {
color: #bbbbbb;
}
.leading-nav-link {
padding: 8px !important;
}