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