Skip to content

Commit

Permalink
Upd KB page
Browse files Browse the repository at this point in the history
  • Loading branch information
bogdanmir committed Jul 1, 2019
1 parent ab58807 commit a9f4c24
Show file tree
Hide file tree
Showing 54 changed files with 2,343 additions and 1,988 deletions.
10 changes: 6 additions & 4 deletions packages/style/docs/components/dp-po-Breadcrumbs.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ sidebar_label: Breadcrumbs
</ul> -->

<h4>Hover</h4>
<ul class="dp-po-Breadcrumbs Breadcrumbs-demo">
<li class="dp-po-Breadcrumb-item is-hover"><a href="" class="dp-po-Breadcrumb-link">Text</a></li>
<li class="dp-po-Breadcrumb-item"><a href="" class="dp-po-Breadcrumb-link">Article</a></li>
</ul>
<div class="dp-po-Breadcrumbs-wrap">
<ul class="dp-po-Breadcrumbs Breadcrumbs-demo">
<li class="dp-po-Breadcrumb-item is-hover"><a href="" class="dp-po-Breadcrumb-link">Text</a></li>
<li class="dp-po-Breadcrumb-item"><a href="" class="dp-po-Breadcrumb-link">Article</a></li>
</ul>
</div>

<!--
<h4>Hover</h4>
Expand Down
2 changes: 1 addition & 1 deletion packages/style/docs/elements/dp-po-Icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Icons
sidebar_label: Icons
---

<div class="dp-IconsWrapper">
<div class="dp-po-IconsWrapper Icons-Demo">
<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>
Expand Down
3 changes: 1 addition & 2 deletions packages/style/docs/elements/dp-po-Messenger-Icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ id: dp-po-Messenger-Icons
title: Messenger-Icons
sidebar_label: Messenger-Icons
---

<div class="dp-IconsWrapper Messenger-Icons">
<div class="dp-po-IconsWrapper Icons-Demo 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>
Expand Down
20 changes: 13 additions & 7 deletions packages/style/src/Icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ svg { fill: var(--grey); }
}

.dp-po-IconsWrapper.Icons-Demo > span {
flex: 0 0 14.2%;
padding-bottom: 30px;
display: flex;
align-items: center;
font: var(--b-2);
color: var(--grey-darkest);
display: flex;
flex: 0 0 14.2%;
font: var(--b-2);
padding-bottom: 30px;
}

.dp-po-IconsWrapper .dp-po-Icon {
Expand All @@ -55,12 +55,18 @@ svg { fill: var(--grey); }

/* Messenger - Icons */

.dp-po-IconsWrapper.Messenger-Icons {
display: flex;
flex-wrap: wrap;
max-width: 400px;
}

.dp-po-IconsWrapper.Messenger-Icons > span {
flex: 0 0 50%;
max-width: 400px;
margin-bottom: 15px;
}

.Messenger-Icons .dp-po-Icon {
width: 36px;
height: 36px;
}
width: 36px;
}
68 changes: 34 additions & 34 deletions packages/style/src/arrows.css
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
/* arrow */

.dp-po-arrow {
position: relative;
display: inline-block;
cursor: pointer;
width: 8px;
height: 12px;
cursor: pointer;
display: inline-block;
height: 12px;
position: relative;
width: 8px;
}

.dp-po-arrow:before,
.dp-po-arrow:after {
content: "";
position: absolute;
background-color: var(--grey);
width: 1px;
height: 7px;
.dp-po-arrow::before,
.dp-po-arrow::after {
background-color: var(--grey);
content: "";
height: 7px;
position: absolute;
width: 1px;
}

.dp-po-arrow.arrow--brand-primary:before,
.dp-po-arrow.arrow--brand-primary:after {
background-color: var(--brand-primary);
.dp-po-arrow.arrow--brand-primary::before,
.dp-po-arrow.arrow--brand-primary::after {
background-color: var(--brand-primary);
}

.dp-po-arrow:before {
top: 0;
left: 50%;
transform: rotate(-45deg);
.dp-po-arrow::before {
left: 50%;
top: 0;
transform: rotate(-45deg);
}

.dp-po-arrow:after {
bottom: 0;
left: 50%;
transform: rotate(45deg);
.dp-po-arrow::after {
bottom: 0;
left: 50%;
transform: rotate(45deg);
}

.dp-po-arrow.arrow--left {
transform: rotate(180deg);
transform: rotate(180deg);
}

.dp-po-arrow.arrow--bottom {
transform: rotate(90deg);
transform: rotate(90deg);
}

.dp-po-arrow.arrow--top {
transform: rotate(-90deg);
transform: rotate(-90deg);
}

/*arrow avatars*/
/* arrow avatars */

.dp-po-Avatar .dp-po-arrow {
width: 10px;
height: 15px;
height: 15px;
width: 10px;
}

.dp-po-Avatar .dp-po-arrow:before,
.dp-po-Avatar .dp-po-arrow:after {
height: 10px;
.dp-po-Avatar .dp-po-arrow::before,
.dp-po-Avatar .dp-po-arrow::after {
height: 10px;
}

.dp-po-Avatar .dp-po-arrow:before {
top: -2px;
.dp-po-Avatar .dp-po-arrow::before {
top: -2px;
}
32 changes: 16 additions & 16 deletions packages/style/src/colours.css
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
.dp-Bg-ColorDemonstration {
display: flex;
flex-wrap: wrap
flex-wrap: wrap;
}

.dp-Bg-ColorDemonstration > div {
flex: 0 0 14%;
display: flex;
align-items: center;
font: var(--s-2);
color: #050505;
display: flex;
flex: 0 0 14%;
font: var(--s-2);
}

.dp-Bg-ColorDemonstration div > div {
min-width: 40px;
height: 40px;
border-radius: 3px;
height: 40px;
margin: 6px;
min-width: 40px;
}

.dp-Bg-ColorDemonstration h4 {
Expand Down Expand Up @@ -120,43 +120,43 @@
/* background color */

.Bg-Gradients--fusia {
background: linear-gradient(270deg, #E16AFF 0.91%, #DC68F8 14.56%, #CE61E5 34.18%, #B856C6 57.4%, #99469B 83.16%, #833B7C 99.46%);
background: linear-gradient(270deg, #e16aff 0.91%, #dc68f8 14.56%, #ce61e5 34.18%, #b856c6 57.4%, #99469b 83.16%, #833b7c 99.46%);
}

.Bg-Gradients--violet {
background: linear-gradient(270deg, #9E8EF1 0.87%, #9788E6 15.36%, #8477C9 40.73%, #665C9A 73.72%, #4B4471 99.5%);
background: linear-gradient(270deg, #9e8ef1 0.87%, #9788e6 15.36%, #8477c9 40.73%, #665c9a 73.72%, #4b4471 99.5%);
}

.Bg-Gradients--indigo {
background: linear-gradient(270deg, #6F88FC 0.87%, #6C85F8 20.01%, #617EEC 39.44%, #5071D7 59.01%, #3760BB 78.67%, #184A97 98.24%, #164894 99.5%);
background: linear-gradient(270deg, #6f88fc 0.87%, #6c85f8 20.01%, #617eec 39.44%, #5071d7 59.01%, #3760bb 78.67%, #184a97 98.24%, #164894 99.5%);
}

.Bg-Gradients--blue {
background: linear-gradient(90deg, #3467A4 0%, #3A8DDE 49.48%, #77B5E7 100%);
background: linear-gradient(90deg, #3467a4 0%, #3a8dde 49.48%, #77b5e7 100%);
}

.Bg-Gradients--cyan {
background: linear-gradient(270deg, #2FB1DB 0.87%, #2971AE 99.5%);
background: linear-gradient(270deg, #2fb1db 0.87%, #2971ae 99.5%);
}

.Bg-Gradients--sea {
background: linear-gradient(270deg, #8AF0FC 0.87%, #6EC6CF 31.41%, #2A5E5E 99.5%);
background: linear-gradient(270deg, #8af0fc 0.87%, #6ec6cf 31.41%, #2a5e5e 99.5%);
}

.Bg-Gradients--grass {
background: linear-gradient(270deg, #31EAA6 0.91%, #34E59F 23.4%, #3DD88C 55.7%, #4BC36D 93.77%, #4DBF68 99.42%);
background: linear-gradient(270deg, #31eaa6 0.91%, #34e59f 23.4%, #3dd88c 55.7%, #4bc36d 93.77%, #4dbf68 99.42%);
}

.Bg-Gradients--yellow {
background: linear-gradient(270deg, #F5D16D 0.91%, #F5CC66 18.72%, #F4BD53 44.31%, #F3A534 74.44%, #F28D15 99.5%);
background: linear-gradient(270deg, #f5d16d 0.91%, #f5cc66 18.72%, #f4bd53 44.31%, #f3a534 74.44%, #f28d15 99.5%);
}

.Bg-Gradients--rust {
background: linear-gradient(270deg, #FF8F6D 0.91%, #FB8966 19.14%, #F07953 45.33%, #DE5F34 76.18%, #CD4718 99.5%);
background: linear-gradient(270deg, #ff8f6d 0.91%, #fb8966 19.14%, #f07953 45.33%, #de5f34 76.18%, #cd4718 99.5%);
}

.Bg-Gradients--rose {
background: linear-gradient(270deg, #FF4C85 0.99%, #F8497F 21.34%, #E5416D 50.57%, #C6334F 85.01%, #B72C41 99.5%);
background: linear-gradient(270deg, #ff4c85 0.99%, #f8497f 21.34%, #e5416d 50.57%, #c6334f 85.01%, #b72c41 99.5%);
}

/* color */
Expand Down
30 changes: 15 additions & 15 deletions packages/style/src/components/dp-po-Information.css
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
.dp-po-Info {
display: flex;
font: var(--p-2-bold);
color: var(--grey-darkest);
border: 1px solid var(--brand-primary);
border-left: 5px solid var(--brand-primary);
background-color: var(--grey-lightest);
border-radius: 6px;
width: 100%;
max-width: 670px;
padding: 15px;
background-color: var(--grey-lightest);
border: 1px solid var(--brand-primary);
border-left: 5px solid var(--brand-primary);
border-radius: 6px;
color: var(--grey-darkest);
display: flex;
font: var(--p-2-bold);
max-width: 670px;
padding: 15px;
width: 100%;
}

.dp-po-Info .dp-po-info-txt {
padding-left: 15px;
padding-left: 15px;
}

.dp-po-Info.Info--danger {
border: 1px solid var(--danger);
border-left: 5px solid var(--danger);
border: 1px solid var(--danger);
border-left: 5px solid var(--danger);
}

.dp-po-Info .dp-po-Icon {
min-width: 23px;
height: 23px;
height: 23px;
min-width: 23px;
}
60 changes: 30 additions & 30 deletions packages/style/src/components/dp-po-avatars.css
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
.dp-po-Avatar {
display: flex;
align-items: center;
align-items: center;
display: flex;
}

.dp-po-Avatar-icon {
width: 23px;
height: 23px;
cursor: pointer;
cursor: pointer;
height: 23px;
width: 23px;
}

.dp-po-Avatar-name {
font: var(--h-6);
color: var(--grey-darkest);
margin-left: 10px;
color: var(--grey-darkest);
font: var(--h-6);
margin-left: 10px;
}

/*Avatar--medium*/
/* Avatar--medium */

.dp-po-Avatar.Avatar--medium .dp-po-Avatar-icon {
width: 28px;
height: 28px;
height: 28px;
width: 28px;
}

.dp-po-Avatar.Avatar--medium .dp-po-Avatar-name {
font: var(--h-5-medium);
font: var(--h-5-medium);
}

/*Avatar--small*/
/* Avatar--small */

.dp-po-Avatar.Avatar--circle.Avatar--small .dp-po-Avatar-icon {
width: 25px;
height: 25px;
height: 25px;
width: 25px;
}

.dp-po-Avatar-name + .dp-po-arrow {
margin-left: 10px;
margin-left: 10px;
}

/*avatar/circular*/
/* avatar/circular */

.dp-po-Avatar.Avatar--circle .dp-po-Avatar-icon {
border-radius: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
height: 30px;
width: 30px;
}

/*Avatar name*/
/* Avatar name */

.Avatar--name {
color: var(--white);
font: var(--p-2-bold);
text-transform: uppercase;
background-color: var(--grey);
border-radius: 50%;
min-width: 30px;
height: 30px;
justify-content: center;
}
background-color: var(--grey);
border-radius: 50%;
color: var(--white);
font: var(--p-2-bold);
height: 30px;
justify-content: center;
min-width: 30px;
text-transform: uppercase;
}

0 comments on commit a9f4c24

Please sign in to comment.