1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-28 01:48:10 +00:00

more responsive top navigation

This commit is contained in:
slowbackspace 2019-01-24 18:48:37 +01:00
parent 4724e35b04
commit 81766f0a8f

View File

@ -2,7 +2,7 @@
import styled from 'styled-components';
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 { connect } from 'react-redux';
import colors from 'config/colors';
@ -24,6 +24,11 @@ const Wrapper = styled.div`
padding: 0px 30px 0 35px;
overflow-y: hidden;
overflow-x: auto;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
justify-content: space-between;
padding: 0px 16px;
}
`;
const StyledNavLink = styled(NavLink)`
@ -34,6 +39,15 @@ const StyledNavLink = styled(NavLink)`
padding: 20px 35px;
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,
&:hover {
transition: all 0.3s ease-in-out;