arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-28 18:08:08 +00:00
Code Issues Releases Wiki Activity

more responsive top navigation

Browse Source
This commit is contained in:
slowbackspace 2019-01-24 18:48:37 +01:00
parent 4724e35b04
commit 81766f0a8f
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/Wallet/components/TopNavigationAccount/index.js
View File

@ -2,7 +2,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import React from 'react'; import React from 'react';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import colors from 'config/colors'; import colors from 'config/colors';
@ -24,6 +24,11 @@ const Wrapper = styled.div`
padding: 0px 30px 0 35px; padding: 0px 30px 0 35px;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
justify-content: space-between;
padding: 0px 16px;
}
`; `;
const StyledNavLink = styled(NavLink)` const StyledNavLink = styled(NavLink)`
@ -34,6 +39,15 @@ const StyledNavLink = styled(NavLink)`
padding: 20px 35px; padding: 20px 35px;
white-space: nowrap; white-space: nowrap;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
padding: 20px 10px;
}
@media screen and (max-width: ${SCREEN_SIZE.XS}) {
font-size: ${FONT_SIZE.BASE};
padding: 20px 10px;
}
&.active, &.active,
&:hover { &:hover {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;