crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed ordered list styles

Browse Source
This commit is contained in:
Piotr Janosz
2019-08-21 13:31:29 +02:00
committed by fabioberger
parent b17d12fe23
commit 078af36e0e
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/website/ts/components/docs/mdx/ordered_list.tsx
View File

@@ -1,29 +1,31 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { docs} from 'ts/style/docs'; import { docs } from 'ts/style/docs';
export const OrderedList = styled.ol` export const OrderedList = styled.ol`
list-style-type: none; list-style: none;
counter-reset: tutorialSteps; counter-reset: steps;
margin-bottom: ${docs.marginBottom}; margin-bottom: ${docs.marginBottom};
li { li {
display: flex; position: relative;
counter-increment: tutorialSteps; counter-increment: steps;
padding-left: 48px;
margin-bottom: 0.8333rem; margin-bottom: 0.8333rem;
font-size: 1rem; font-size: 1rem;
line-height: 30px; line-height: 30px;
}
li:before { &:before {
border-radius: 50%; display: flex;
background-color: rgba(0, 174, 153, 0.1); align-items: center;
content: counter(tutorialSteps); justify-content: center;
display: flex; position: absolute;
align-items: center; left: 0;
justify-content: center; content: counter(steps);
min-width: 30px; border-radius: 50%;
height: 30px; background-color: rgba(0, 174, 153, 0.1);
margin-right: 1rem; min-width: 30px;
height: 30px;
}
} }
`; `;