Skip to content

Commit

Permalink
Upd
Browse files Browse the repository at this point in the history
  • Loading branch information
bogdanmir committed Jun 25, 2019
1 parent d62ba16 commit 93bb2ec
Show file tree
Hide file tree
Showing 46 changed files with 2,599 additions and 291 deletions.
85 changes: 85 additions & 0 deletions packages/style/docs/colours.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
id: colours
title: Colours
sidebar_label: Colours
---

<!-- background color -->
<div class="dp-Bg-ColorDemonstration Demonstration--border">
<h4>Primary colours</h4>
<div><div class="Bg-Color--primary"></div>brand-primary</div>
<div><div class="Bg-Color--grey-darkest"></div>grey-darkest</div>
<div><div class="Bg-Color--white"></div>white</div>
</div>

<div class="dp-Bg-ColorDemonstration">
<h4>Secondary colours</h4>
<div><div class="Bg-Color--grey-dark"></div>grey-dark</div>
<div><div class="Bg-Color--grey"></div>grey</div>
<div><div class="Bg-Color--grey-light"></div>grey-light</div>
<div><div class="Bg-Color--grey-lighter"></div>grey-lighter</div>
<div><div class="Bg-Color--grey-lightest"></div>grey-lightest</div>
</div>
<div class="dp-Bg-ColorDemonstration Demonstration--border">
<div><div class="Bg-Color--danger"></div>danger</div>
<div><div class="Bg-Color--warning"></div>warning</div>
<div><div class="Bg-Color--neutral"></div>neutral</div>
<div><div class="Bg-Color--success"></div>success</div>
<div><div class="Bg-Color--info"></div>info</div>
</div>

<div class="dp-Bg-ColorDemonstration">
<h4>Tertiary colours</h4>
<div><div class="Bg-Color--purple"></div>purple</div>
<div><div class="Bg-Color--pink"></div>pink</div>
</div>
<div class="dp-Bg-ColorDemonstration Demonstration--border">
<div><div class="Bg-Color--danger-light"></div>danger-light</div>
<div><div class="Bg-Color--warning-light"></div>warning-light</div>
<div><div class="Bg-Color--neutral-light"></div>neutral-light</div>
<div><div class="Bg-Color--success-light"></div>success-light</div>
<div><div class="Bg-Color--info-light"></div>info-light</div>
<div><div class="Bg-Color--purple-light"></div>purple-light</div>
<div><div class="Bg-Color--pink-light"></div>pink-light</div>
</div>

<div class="dp-Bg-ColorDemonstration">
<h4>Gradients</h4>
<div><div class="Bg-Gradients--fusia"></div>Fusia</div>
<div><div class="Bg-Gradients--violet"></div>Violet</div>
<div><div class="Bg-Gradients--indigo"></div>Indigo</div>
<div><div class="Bg-Gradients--blue"></div>Blue</div>
<div><div class="Bg-Gradients--cyan"></div>Cyan</div>
</div>
<div class="dp-Bg-ColorDemonstration Demonstration--border">
<div><div class="Bg-Gradients--sea"></div>Sea</div>
<div><div class="Bg-Gradients--grass"></div>Grass</div>
<div><div class="Bg-Gradients--yellow"></div>Yellow</div>
<div><div class="Bg-Gradients--rust"></div>Rust</div>
<div><div class="Bg-Gradients--rose"></div>Rose</div>
</div>

<!-- color -->
<div class="dp-ColorDemonstration">
<div class="Color--primary"></div>
<div class="Color--grey-darkest"></div>
<div class="Color--grey-dark"></div>
<div class="Color--grey"></div>
<div class="Color--grey-light"></div>
<div class="Color--grey-lighter"></div>
<div class="Color--grey-lightest"></div>
<div class="Color--danger"></div>
<div class="Color--warning"></div>
<div class="Color--neutral"></div>
<div class="Color--success"></div>
<div class="Color--info"></div>
<div class="Color--pink"></div>
<div class="Color--purple"></div>
<div class="Color--danger-light"></div>
<div class="Color--warning-light"></div>
<div class="Color--neutral-light"></div>
<div class="Color--success-light"></div>
<div class="Color--info-light"></div>
<div class="Color--pink-light"></div>
<div class="Color--purple-light"></div>
</div>
8 changes: 4 additions & 4 deletions packages/style/docs/components/dp-po-Buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ sidebar_label: Buttons
<div class="dp-po-ButtonItem-demo Large--ButtonItem-demo">
<span class="dp-po-ButtonTitle-demo">button/icon-text/large</span>
<button class="dp-po-Button Button--large Button--icon">
<span class="dp-po-Icon Icon--submit"></span>
<span class="dp-po-Icon Icon--submit Icon--primary"></span>
<span>text</span>
</button>
<button class="dp-po-Button Button--large Button--icon is-hover">
<span class="dp-po-Icon Icon--submit"></span>
<span class="dp-po-Icon Icon--submit Icon--primary"></span>
<span>text</span>
</button>
</div>
Expand Down Expand Up @@ -53,11 +53,11 @@ sidebar_label: Buttons
<div class="dp-po-ButtonItem-demo">
<div class="dp-po-ButtonTitle-demo">icon-text/small</div>
<button class="dp-po-Button Button--small Button--icon">
<span class="dp-po-Icon Icon--bolt"></span>
<span class="dp-po-Icon Icon--bolt Icon--grey"></span>
text
</button>
<button class="dp-po-Button Button--small Button--icon is-hover">
<span class="dp-po-Icon Icon--bolt"></span>
<span class="dp-po-Icon Icon--bolt Icon--grey"></span>
text
</button>
</div>
Expand Down
3 changes: 0 additions & 3 deletions packages/style/docs/components/dp-po-Cards.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ title: Cards
sidebar_label: Cards
---

<h2>CARDS</h2>

<h4>.card-atom</h4>

<div class="dp-po-card-atom card-atom--demo"></div>
Expand All @@ -22,7 +20,6 @@ sidebar_label: Cards
</div>
</div>


<h4>Hover</h4>

<div class="dp-po-card-atom is-hover">
Expand Down
4 changes: 2 additions & 2 deletions packages/style/docs/components/dp-po-Dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ sidebar_label: Dropdown
<span class="dp-po-dropdown-atom dp-po-search-expand">
<span class="dp-po-txt">Ticket/item</span>
<span class="dp-po-Icon-wrapper Icon--small">
<span class="dp-po-Icon Icon--clock Icon--primary"></span>
<span class="dp-po-Icon Icon--history Icon--primary"></span>
text
</span>
</span>
Expand All @@ -84,7 +84,7 @@ sidebar_label: Dropdown
<span class="dp-po-dropdown-atom dp-po-search-expand is-hover">
<span class="dp-po-txt">Ticket/item</span>
<span class="dp-po-Icon-wrapper Icon--small">
<span class="dp-po-Icon Icon--clock Icon--primary"></span>
<span class="dp-po-Icon Icon--history Icon--primary"></span>
text
</span>
</span>
Expand Down
16 changes: 8 additions & 8 deletions packages/style/docs/components/dp-po-Icontext.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ sidebar_label: Icontext
<h4>left-aligned</h4>

<h4>Large</h4>
<span class="dp-po-Icon-wrapper Icon--large">
<span class="dp-po-Icon Icon--light-primary Icon--getting-started">
<span class="dp-po-Icon-wrapper Wrapper--light-primary Icon--large">
<span class="dp-po-Icon Icon--getting-started Icon--primary-white">
<span class="dp-po-Badge Badge--small Badge--brand-primary Badge--bottom">0</span>
</span>
Text
</span>

<h4>Medium</h4>
<span class="dp-po-Icon-wrapper Icon--medium">
<span class="dp-po-Icon Icon--brand-primary Icon--guides"></span>
<span class="dp-po-Icon-wrapper Icon--medium Wrapper--brand-primary">
<span class="dp-po-Icon Icon--guides Icon--white"></span>
Text
</span>

Expand All @@ -29,15 +29,15 @@ sidebar_label: Icontext
<h4>centred-stacked</h4>

<h4>Large</h4>
<span class="dp-po-Icon-wrapper Icon--large Icon--centred-stacked">
<span class="dp-po-Icon Icon--light-primary Icon--elephant">
<span class="dp-po-Icon-wrapper Wrapper--light-primary Icon--large Icon--centred-stacked">
<span class="dp-po-Icon Icon--elephant">
<span class="dp-po-Badge Badge--small Badge--brand-primary Badge--bottom">0</span>
</span>
Text
</span>

<h4>Medium</h4>
<span class="dp-po-Icon-wrapper Icon--medium Icon--centred-stacked">
<span class="dp-po-Icon Icon--light-primary Icon--article"></span>
<span class="dp-po-Icon-wrapper Wrapper--light-primary Icon--medium Icon--centred-stacked">
<span class="dp-po-Icon Icon--article Icon--primary-white"></span>
Text
</span>
2 changes: 1 addition & 1 deletion packages/style/docs/components/dp-po-Information.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ sidebar_label: Information

<h4>Warning</h4>
<div class="dp-po-Info Info--danger">
<span class="dp-po-Icon Icon--Exclamation Icon--danger"></span>
<span class="dp-po-Icon Icon--warning Icon--danger"></span>
<span class="dp-po-info-txt">Angel investor leverage freemium iteration analytics ecosystem innovator network effects hackathon creative direct ...</span>
</div>
2 changes: 1 addition & 1 deletion packages/style/docs/components/dp-po-Labels.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ sidebar_label: Labels & Badges

<h4>label/time-ago</h4>
<span class="dp-po-label label--time">
<span class="dp-po-Icon Icon--clock Icon--primary"></span>
<span class="dp-po-Icon Icon--history Icon--primary"></span>
text
</span>

Expand Down
14 changes: 7 additions & 7 deletions packages/style/docs/components/dp-po-Lists.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ sidebar_label: Lists
<span class="dp-po-subtitle ">
<span class="dp-po-Avatar"><img class="dp-po-Avatar-icon" src="../../img/docs/avatar.png"></span>
Name Surname
<span class="dp-po-Icon Icon--ticket-created"></span>
<span class="dp-po-Icon Icon--date Icon--grey"></span>
DD MMM YYYY
<span class="dp-po-Icon Icon--text-created"></span>
<span class="dp-po-Icon Icon--comment Icon--grey"></span>
00
</span>
<input type="" name="" placeholder="Text">
Expand All @@ -22,11 +22,11 @@ sidebar_label: Lists
<form class="dp-po-list dp-po-title-list-item small--title-list-item">
<span class="dp-po-title-item">
<span class="label-knowledgebase">
<span class="dp-po-Icon Icon--knowledgebase"></span>
<span class="dp-po-Icon Icon--knowledgebase Icon--grey"></span>
Content
</span>
<span class="dp-po-label label--time">
<span class="dp-po-Icon Icon--clock Icon--primary"></span>
<span class="dp-po-Icon Icon--history Icon--primary"></span>
text
</span>
</span>
Expand All @@ -36,14 +36,14 @@ sidebar_label: Lists
<h4>large-icon-list-item</h4>
<form class="dp-po-list dp-po-title-list-item large--title-list-item">
<a href="#" download="" class="dp-po-zip">
<img src="../../img/docs/zip-file.svg" alt="download"/>
<span class="dp-po-Icon Icon--zip-file-left"></span>
</a>
<span>
<span class="dp-po-title-item">Title</span>
<span class="dp-po-large-input">
<input type="" name="" placeholder="Name Surname" class="dp-po-input-avatar">
<span class="dp-po-label label--time-box">
<span class="dp-po-Icon Icon--clock Icon--primary"></span>
<span class="dp-po-Icon Icon--history Icon--primary"></span>
00 hrs
</span>
</span>
Expand All @@ -63,7 +63,7 @@ sidebar_label: Lists
Name Surnam
</span>
<span class="dp-po-label label--time-box">
<span class="dp-po-Icon Icon--clock Icon--primary"></span>
<span class="dp-po-Icon Icon--history Icon--primary"></span>
00 hrs
</span>
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/style/docs/components/dp-po-Popups.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_label: Pop ups

<h4>pop-up/icon-text</h4>
<span class="dp-po-Popup Popup--icon">
<span class="dp-po-Icon Icon--approve Icon--success"></span>
<span class="dp-po-Icon Icon--complete Icon--success"></span>
You have successfully subscribed to this category
<span class="dp-po-iconClose"></span>
</span>
8 changes: 4 additions & 4 deletions packages/style/docs/components/dp-po-Tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ sidebar_label: Tables
</div>
<div class="dp-po-TableItem">
Department
<span class="dp-po-Icon Icon--sort"></span>
<span class="dp-po-Icon Icon--sort Icon--primary"></span>
</div>
<div class="dp-po-TableItem">
Created
<span class="dp-po-Icon Icon--sort"></span>
<span class="dp-po-Icon Icon--sort Icon--primary"></span>
</div>
<div class="dp-po-TableItem">
Last activity
<span class="dp-po-Icon Icon--sort"></span>
<span class="dp-po-Icon Icon--sort Icon--primary"></span>
</div>
<div class="dp-po-TableItem">
Rating
Expand All @@ -50,7 +50,7 @@ sidebar_label: Tables
</div>
<div class="dp-po-TableItem">
<img class="dp-po-Avatar-icon" src="../../img/docs/avatar-circular.png" alt="">
<img class="dp-po-Avatar-icon Avatar--smile" src="../../img/docs/smile.svg" alt="">
<span class="dp-po-Icon Icon--face-smile Icon--success"></span>
</div>
</div>
<!-- tables/chat-row -->
Expand Down
59 changes: 59 additions & 0 deletions packages/style/docs/elements/dp-po-Icons.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
id: dp-po-Icons
title: Icons
sidebar_label: Icons
---

<div class="dp-IconsWrapper">
<span><span class="dp-po-Icon Icon--history"></span>history</span>
<span><span class="dp-po-Icon Icon--ticket"></span>ticket</span>
<span><span class="dp-po-Icon Icon--check"></span>check</span>
<span><span class="dp-po-Icon Icon--caret-down"></span>caret-down</span>
<span><span class="dp-po-Icon Icon--caret-up"></span>caret-up</span>
<span><span class="dp-po-Icon Icon--caret-right"></span>caret-right</span>
<span><span class="dp-po-Icon Icon--caret-left"></span>caret-left</span>
<span><span class="dp-po-Icon Icon--knowledgebase"></span>knowledgebase</span>
<span><span class="dp-po-Icon Icon--guides"></span>guides</span>
<span><span class="dp-po-Icon Icon--date"></span>date</span>
<span><span class="dp-po-Icon Icon--news"></span>news</span>
<span><span class="dp-po-Icon Icon--getting-started"></span>getting-started</span>
<span><span class="dp-po-Icon Icon--find"></span>find</span>
<span><span class="dp-po-Icon Icon--user"></span>user</span>
<span><span class="dp-po-Icon Icon--sort"></span>sort</span>
<span><span class="dp-po-Icon Icon--close"></span>close</span>
<span><span class="dp-po-Icon Icon--feedback"></span>feedback</span>
<span><span class="dp-po-Icon Icon--comment"></span>comment</span>
<span><span class="dp-po-Icon Icon--article"></span>article</span>
<span><span class="dp-po-Icon Icon--agent"></span>agent</span>
<span><span class="dp-po-Icon Icon--server"></span>server</span>
<span><span class="dp-po-Icon Icon--billing"></span>billing</span>
<span><span class="dp-po-Icon Icon--feedback-alt"></span>feedback-alt</span>
<span><span class="dp-po-Icon Icon--anchor"></span>anchor</span>
<span><span class="dp-po-Icon Icon--alert"></span>alert</span>
<span><span class="dp-po-Icon Icon--zip-file-rigth"></span>zip-file</span>
<span><span class="dp-po-Icon Icon--app-file"></span>app-file</span>
<span><span class="dp-po-Icon Icon--zip-file-left"></span>zip-file</span>
<span><span class="dp-po-Icon Icon--download"></span>download</span>
<span><span class="dp-po-Icon Icon--file"></span>file</span>
<span><span class="dp-po-Icon Icon--drag-drop"></span>drag-drop</span>
<span><span class="dp-po-Icon Icon--complete"></span>complete</span>
<span><span class="dp-po-Icon Icon--edit"></span>edit</span>
<span><span class="dp-po-Icon Icon--submit"></span>submit</span>
<span><span class="dp-po-Icon Icon--list"></span>list</span>
<span><span class="dp-po-Icon Icon--status-change"></span>status-change</span>
<span><span class="dp-po-Icon Icon--votes"></span>votes</span>
<span><span class="dp-po-Icon Icon--reload"></span>reload</span>
<span><span class="dp-po-Icon Icon--warning"></span>warning</span>
<span><span class="dp-po-Icon Icon--code"></span>code</span>
<span><span class="dp-po-Icon Icon--share"></span>share</span>
<span><span class="dp-po-Icon Icon--rss"></span>rss</span>
<span><span class="dp-po-Icon Icon--rate-support"></span>rate-support</span>
<span><span class="dp-po-Icon Icon--info"></span>info</span>
<span><span class="dp-po-Icon Icon--print"></span>print</span>
<span><span class="dp-po-Icon Icon--pdf-file"></span>pdf-file</span>
<span><span class="dp-po-Icon Icon--face-smile"></span>face/smile</span>
<span><span class="dp-po-Icon Icon--face-sad"></span>face/sad</span>
<span><span class="dp-po-Icon Icon--refresh"></span>refresh</span>
<span><span class="dp-po-Icon Icon--bolt"></span>bolt</span>
<span><span class="dp-po-Icon Icon--subscribe"></span>subscribe</span>
</div>
22 changes: 22 additions & 0 deletions packages/style/docs/elements/dp-po-Messenger-Icons.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
id: dp-po-Messenger-Icons
title: Messenger-Icons
sidebar_label: Messenger-Icons
---

<div class="dp-IconsWrapper Messenger-Icons">
<span><span class="dp-po-Icon Icon--search"></span>search</span>
<span><span class="dp-po-Icon Icon--go-primary"></span>go to primary</span>
<span><span class="dp-po-Icon Icon--face-smile"></span>insert emoticon</span>
<span><span class="dp-po-Icon Icon--go-secondary"></span>go to secondary</span>
<span><span class="dp-po-Icon Icon--attach"></span>attach</span>
<span><span class="dp-po-Icon Icon--caret-down"></span>menu open</span>
<span><span class="dp-po-Icon Icon--mute"></span>mute</span>
<span><span class="dp-po-Icon Icon--caret-left"></span>back</span>
<span><span class="dp-po-Icon Icon--send"></span>send</span>
<span><span class="dp-po-Icon Icon--close-primary"></span>close primary</span>
<span><span class="dp-po-Icon Icon--mail"></span>mail</span>
<span><span class="dp-po-Icon Icon--close"></span>close secondary</span>
<span><span class="dp-po-Icon Icon--profile"></span>profile</span>
<span><span class="dp-po-Icon Icon--log-in"></span>log-in</span>
</div>
Loading

0 comments on commit 93bb2ec

Please sign in to comment.