Fixing some layout issues
This commit is contained in:
@ -210,6 +210,7 @@ type KeyData = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const MaxWidth = styled(Flex)`
|
const MaxWidth = styled(Flex)`
|
||||||
|
padding: 0 60px;
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
`;
|
`;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color, layout } from 'styles/constants';
|
import { color } from 'styles/constants';
|
||||||
import type { User, Team } from 'types';
|
import type { User, Team } from 'types';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
|
|
||||||
@ -37,7 +37,7 @@ const TeamName = styled.div`
|
|||||||
|
|
||||||
const Header = styled(Flex)`
|
const Header = styled(Flex)`
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: ${layout.padding};
|
padding: 16px 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -49,8 +49,8 @@ const Header = styled(Flex)`
|
|||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
left: ${layout.hpadding};
|
left: 24px;
|
||||||
right: ${layout.hpadding};
|
right: 24px;
|
||||||
background: rgba(0,0,0,.075);
|
background: rgba(0,0,0,.075);
|
||||||
height: 1px;
|
height: 1px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -4,7 +4,7 @@ import { observable } from 'mobx';
|
|||||||
import { observer, inject } from 'mobx-react';
|
import { observer, inject } from 'mobx-react';
|
||||||
import Flex from 'components/Flex';
|
import Flex from 'components/Flex';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { color, layout, fontWeight } from 'styles/constants';
|
import { color, fontWeight } from 'styles/constants';
|
||||||
|
|
||||||
import SidebarLink from './SidebarLink';
|
import SidebarLink from './SidebarLink';
|
||||||
import DropToImport from 'components/DropToImport';
|
import DropToImport from 'components/DropToImport';
|
||||||
@ -152,7 +152,7 @@ const Header = styled(Flex)`
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: ${color.slate};
|
color: ${color.slate};
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
padding: 0 ${layout.hpadding};
|
padding: 0 24px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CollectionAction = styled.a`
|
const CollectionAction = styled.a`
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NavLink } from 'react-router-dom';
|
import { NavLink } from 'react-router-dom';
|
||||||
import { layout, color, fontWeight } from 'styles/constants';
|
import { color, fontWeight } from 'styles/constants';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const activeStyle = {
|
const activeStyle = {
|
||||||
@ -16,7 +16,7 @@ const styleComponent = component => styled(component)`
|
|||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
margin: 5px ${layout.hpadding};
|
margin: 5px 24px;
|
||||||
color: ${color.slateDark};
|
color: ${color.slateDark};
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -354,10 +354,13 @@ const DropHere = styled(Flex)`
|
|||||||
|
|
||||||
const Meta = styled(Flex)`
|
const Meta = styled(Flex)`
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: ${layout.padding};
|
padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Container = styled(Flex)`
|
const Container = styled(Flex)`
|
||||||
|
Reference in New Issue
Block a user