Skip to content

Commit

Permalink
Upd
Browse files Browse the repository at this point in the history
  • Loading branch information
@bogdanmir
bogdanmir committed Jul 19, 2019
1 parent 21a7aa4 commit d5771b0
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 66 deletions.
73 changes: 67 additions & 6 deletions packages/style/src/demo/full-demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -713,7 +713,8 @@ a:hover {
min-width: 273px;
position: absolute;
right: 0;
top: calc(100% + 12px);
/*top: calc(100% + 12px);*/
top: 56px;
width: max-content;
z-index: 3;
}
Expand Down Expand Up @@ -784,7 +785,7 @@ a:hover {
.dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-comments-wrap {
box-shadow: none;
margin-bottom: 0;
padding: 30px 0px 0px 43px;
padding: 20px 0px 0px 43px;
margin-top: 10px;
position: relative;
}
Expand All @@ -805,7 +806,8 @@ a:hover {
}

.dp-po-comments-item .dp-po-vote + .dp-po-dropdown-menu .dp-po-comments-wrap {
padding: 30px 0px 30px 43px;
/*padding: 30px 0px 30px 43px;*/
padding: 20px 0px 0 43px;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-comments-wrap.dp-po-reply-comment {
Expand Down Expand Up @@ -1613,11 +1615,14 @@ a:hover {

.dp-Template .dp-po-Info-wrap .dp-po-Info.Info--success {
background: var(--success-light);
margin-bottom: 20px;
}

.dp-po-form-registration .Forms--login .dp-po-registration-step {
/*open for demo forms*/

/*.dp-po-form-registration .Forms--login .dp-po-registration-step {
display: none;
}
}*/

.dp-po-list.comment--item {
position: relative;
Expand Down Expand Up @@ -1660,6 +1665,10 @@ a:hover {
margin-right: 5px;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-comments-agent .dp-po-comments-wrap {
padding-bottom: 20px;
}

/* mobile -v */

@media (max-width: 1280px) {
Expand Down Expand Up @@ -2108,9 +2117,15 @@ a:hover {
}

.dp-po-comments-item .dp-po-vote + .dp-po-dropdown-menu > li:after {
left: -9px;
left: -9px;
/*height: calc(100% + 1px);*/
top: 20px;
}

/* .dp-po-comments-item .dp-po-vote + .dp-po-dropdown-menu .dp-po-comments-item.dp-po-comments-agent + .dp-po-comments-item:after {
height: calc(100% - 20px);
}
*/
.dp-po-comments.comments-list + .dp-po-comments-wrap > .dp-po-comments-item .dp-po-comment-subtitle.subtitle--attachment {
color: var(--grey-darkest);
font: var(--p-2);
Expand Down Expand Up @@ -2140,6 +2155,7 @@ a:hover {
flex: 0 0 48%;
max-width: 48%;
max-height: 44px;
min-width: auto;
}

.dp-po-Upload-wrapper .dp-po-Upload {
Expand Down Expand Up @@ -2414,6 +2430,33 @@ a:hover {
width: 40px;
}

.dp-Template .dp-po-captcha .dp-po-Icon {
margin: 0 0 12px 10px;
}

.dp-Template .dp-po-Info-wrap .dp-po-Info {
padding: 15px 15px 15px 40px;
position: relative;
}

.dp-Template .dp-po-Info-wrap .dp-po-Info .dp-po-Icon {
position: absolute;
top: calc(50% - 12px);
left: 15px;
}

.dp-po-comments.dp-po-add-comments.is-active {
margin-bottom: 35px;
}

.dp-po-comments-wrap .dp-po-list.comment--item .dp-po-Upload-wrapper .dp-po-comment-subtitle {
margin: 0;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-comments-agent .dp-po-comments-wrap {
padding-bottom: 20px;
}

}

@media (max-width: 576px) {
Expand All @@ -2440,13 +2483,31 @@ a:hover {
}

.dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-subtitle {
/*position: relative;*/
}

.dp-po-comments-item {
position: relative;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap .label--time .dp-po-dropdown-menu {
width: 100%;
}

.dp-Template .dp-po-captcha .dp-po-Icon {
margin: 0 0 12px 5px;
}

.dp-po-comments-item .dp-po-vote + .dp-po-dropdown-menu > li:after {
left: -9px;
height: calc(100% + 2px);
top: 20px;
}

.dp-po-comments-item .dp-po-vote + .dp-po-dropdown-menu .dp-po-comments-item.dp-po-comments-agent + .dp-po-comments-item:after {
height: calc(100% - 20px);
}

}

@media (min-width: 992px) {
Expand Down
80 changes: 20 additions & 60 deletions packages/style/website/static/demos/kb-view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ <h2 class="dp-po-title dp-po-copy-clipboard">Dynamic Contact Forms <span class="
<!-- dots dropdown -->
<ul class="dp-po-dropdown-menu">
<!-- 1 -->
<li class="dp-po-comments-item">
<li class="dp-po-comments-item dp-po-comments-agent">
<div class="dp-po-subtitle">
<span class="dp-po-Avatar">
<img class="dp-po-Avatar-icon" src="../img/docs/avatar.png" alt="">
Expand Down Expand Up @@ -330,7 +330,6 @@ <h2 class="dp-po-title dp-po-copy-clipboard">Dynamic Contact Forms <span class="
</div>
</div>


<div class="dp-po-comments-item">
<div class="dp-po-subtitle">
<span class="dp-po-username">
Expand Down Expand Up @@ -437,23 +436,11 @@ <h6 class="dp-po-title">Attachments</h6>

</div>

<div class="dp-po-comments dp-po-add-comments is-active">
<!-- <div class="dp-po-comments dp-po-add-comments is-active">
Add comment <span class="dp-po-Icon Icon--caret-down Icon--primary dp-po-hidden-md"></span>
</div>
</div> -->
<div class="dp-po-comments-wrap dp-po-autorization-wrap">

<!-- valid tooltip -->
<div class="dp-po-registration-step dp-po-Info-wrap">
<div class="dp-po-Info Info--success dp-po-d-none">
<span class="dp-po-Icon Icon--check Icon--success"></span>
<span class="dp-po-info-txt">Thank you for validating your email address, you are now ready to add your comment.</span>
</div>
<div class="dp-po-Info Info--danger dp-po-d-none">
<span class="dp-po-Icon Icon--warning Icon--danger"></span>
<span class="dp-po-info-txt">Please validate your email address by following the link in the email sent to you. <a href="#" class="Resend--Link">Resend link?</a></span>
</div>
</div>

<!-- Registration form -->
<div class="dp-po-form-wrapper dp-po-form-registration">
<ul class="dp-po-title-tab is-active">
Expand Down Expand Up @@ -522,56 +509,29 @@ <h4 class="dp-po-title dp-po-hidden-md-up">Register</h4>
</div>
</form>

<!-- Demo -->
<!-- <form class="dp-po-list comment--item">
<span class="dp-po-subtitle">
<span class="dp-po-username">
<img class="dp-po-Avatar-icon" src="../img/docs/avatar.png" alt="">
Nick Green
</span>
<span class="dp-po-Button Button--small Button--secondary dp-po-reply-comment-close">Cancel</span>
</span>
<span class="dp-po-Forms Forms--Textarea">
<div class="dp-po-Textarea">
<span class="dp-po-comment-subtitle">Your comment<i class="Color--primary">*</i></span>
<span class="dp-po-Icon-resizer"></span>
<textarea name="text" placeholder="Enter comment"></textarea>
</div>
</span>
<div class="dp-po-Upload-wrapper">
<span class="dp-po-Icon Icon--attach dp-po-hidden-md-up"></span>
<span class="dp-po-comment-subtitle">Add attachment</span>
<span class="dp-po-Upload">
<span class="dp-po-Upload-item dp-po-Choose-btn">
<label for="file-upload">
<span class="dp-po-Icon Icon--file Icon--grey-dark"></span>
Choose a file
</label>
<input id="file-upload" type="file"/>
</span>
or
<span class="dp-po-Upload-item dp-po-Dragdrop-btn">
<span class="dp-po-Icon Icon--dragdrop"></span>
Drag and drop
</span>
</span>
</div>
<div class="dp-po-button-wrap">
<button class="dp-po-Button">Publish</button>
<span class="dp-po-CustomCheckbox CustomCheckbox--medium">
<input type="checkbox" class="dp-po-ControlInput" id="DemoPublishCheckbox-04"></input>
<label for="DemoPublishCheckbox-04">Subscribe</label>
</span>
</div>
</form> -->
</div>
</div>

<!-- valid tooltip -->
<div class="dp-po-registration-step dp-po-Info-wrap">
<!-- <div class="dp-po-Info Info--success dp-po-d-none"> -->
<div class="dp-po-Info Info--success">
<span class="dp-po-Icon Icon--check Icon--success"></span>
<span class="dp-po-info-txt">Thank you for validating your email address, you are now ready to add your comment.</span>
</div>
<!-- <div class="dp-po-Info Info--danger dp-po-d-none"> -->
<div class="dp-po-Info Info--danger">
<span class="dp-po-Icon Icon--warning Icon--danger"></span>
<span class="dp-po-info-txt">Please validate your email address by following the link in the email sent to you. <a href="#" class="Resend--Link">Resend link?</a></span>
</div>
</div>

</div>

<div class="dp-po-comments dp-po-add-comments is-active">
Add comment <span class="dp-po-Icon Icon--caret-down Icon--primary dp-po-hidden-md"></span>
</div>

<div class="dp-po-comments-wrap">
<!-- Demo -->
<form class="dp-po-list comment--item">
Expand Down

0 comments on commit d5771b0

Please sign in to comment.