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

Refactored tutorial_steps.

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-06 19:23:21 +02:00
committed by fabioberger
parent e6d2c7db88
commit fcf975a65c
1 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/website/ts/components/docs/tutorial_steps.tsx
View File

@@ -1,32 +1,23 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import React from 'react';
import styled from 'styled-components';
export interface Props {
interface ITutorialStepsProps {
children: React.ReactNode;
}
interface WrapperProps {}
export const TutorialSteps: React.FC<ITutorialStepsProps> = ({ children }) => <Wrapper>{children}</Wrapper>;
export const TutorialSteps: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper>{props.children}</Wrapper>
</>
);
TutorialSteps.defaultProps = {};
const Wrapper = styled.ol<WrapperProps>`
const Wrapper = styled.ol`
list-style-type: none;
counter-reset: tutorialSteps;
margin-bottom: 1.875rem;
li {
font-size: 1rem;
display: flex;
align-items: center;
counter-increment: tutorialSteps;
margin-bottom: 0.8333rem;
font-size: 1rem;
line-height: 1;
}
@@ -35,9 +26,9 @@ const Wrapper = styled.ol<WrapperProps>`
background-color: rgba(0, 174, 153, 0.1);
content: counter(tutorialSteps);
display: flex;
align-items: center;
justify-content: center;
font-feature-settings: 'tnum' on, 'lnum' on;
align-items: center;
width: 30px;
height: 30px;
margin-right: 1rem;