Skip to content

Commit

Permalink
Forms and Comments update KB page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimahuja
jimahuja committed Aug 9, 2019
1 parent e226ec5 commit 714ef55
Show file tree
Hide file tree
Showing 11 changed files with 174 additions and 77 deletions.
6 changes: 3 additions & 3 deletions packages/portal-style/src/components/_alert.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
.alert {
display: flex;
align-items: center;
border-width: 2px;

&.alert-icon {
padding-left: 60px;

.dp-po-icon {
margin: 0 10px 0 0;
display: inline-block;
display: inline-flex;
background: #fff;
border: 1px solid;
position: absolute;
Expand All @@ -21,6 +19,8 @@
border-bottom-left-radius: 4px;
font-size: 22px;
padding: 10px 0px;
justify-content: center;
align-items: center;
}
}
}
37 changes: 37 additions & 0 deletions packages/portal-style/src/components/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,41 @@
line-height: 0;
}
}

&-lg {
width: 254px;
max-width: 100%;
justify-content: center;
}

&-brand {
position: relative;
color: $white;

.dp-po-icon {
position: absolute;
left: 0;
height: 100%;
border-right: 1px solid $grey-light;
padding: 8px;
font-size: 26px;
}

span {
margin-left: 40px;
}

&:hover {
color: $white;
opacity: 0.8;
}
}

&-fb {
background: $facebook;
}

&-li {
background: $linkedin;
}
}
114 changes: 65 additions & 49 deletions packages/portal-style/src/components/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,7 @@
$self: &;
&-upload {
display: inline-flex;
align-items: center;
padding: 20px;
border: 2px dashed $grey-light;
border-radius: 3px;
cursor: pointer;
&:hover {
border-color: $brand-primary;
.dp-po-drag {
color: $brand-primary;
}
}
&>span {
margin: 0 15px;
font-size: 12px;
color: $grey-dark;
}
.dp-po-drag {
display: flex;
align-items: center;
color: $grey-dark;
.dp-po-icon {
margin: 0 10px 0 0;
}
}
}
}
Expand All @@ -54,16 +25,21 @@

.form-text {
font-size: 12px;
color: $grey-dark;
}
}


label {
font-size: 15px;
color: $grey-dark;
margin: 0 0 10px;
display: block;
}
}

.form-control {
background: $grey-lightest;
border: 2px solid $grey-light;
padding: 7px 15px;
font-size: $p2-font-size;
padding: 7px 15px 6px;
border-radius: 0;
height: auto;

Expand All @@ -80,22 +56,12 @@
&.form-error {
border-color: $danger;
}


}


label {
font-size: 15px;
color: $grey-dark;
margin: 0 0 10px;
display: block;
}

.form-check {
.dp-po-form-check {
padding: 0;

&-label {
label {
position: relative;
margin: 0;
padding: 0 0 0 30px;
Expand All @@ -117,10 +83,15 @@ label {
}

&:after {
content: "\f00c";
font-family: "Font Awesome 5 Pro";
content: "";
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.21 4.81a.602.602 0 0 1 0-.751l.097-.112a.423.423 0 0 1 .65 0l1.688 1.95 4.43-5.12a.423.423 0 0 1 .65 0l.097.112a.602.602 0 0 1 0 .752L2.645 7.625.21 4.811z' fill='%233a8dde'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 11px auto;
width: 20px;
height: 20px;
display: block;
left: 2px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
Expand All @@ -141,3 +112,48 @@ label {
}
}
}

.dp-po-form-upload {
&-wrap {
display: inline-flex;
align-items: center;
padding: 20px;
border: 2px dashed $grey-light;
border-radius: 3px;
cursor: pointer;

&:hover {
border-color: $brand-primary;

.dp-po-drag {
color: $brand-primary;
}
}

&>span {
margin: 0 15px;
font-size: 12px;
color: $grey-dark;
}

.dp-po-drag {
display: flex;
align-items: center;
color: $grey-dark;

.dp-po-icon {
margin: 0 10px 0 0;
}
}
}
}

.dp-po-form-captcha {
&-text {
border: 2px dashed $grey-light;
width: 100%;
height: 40px;
border-radius: 4px;
}

}
8 changes: 8 additions & 0 deletions packages/portal-style/src/modules/_comments.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,17 @@
$self: '.dp-po-comments';

&-add {
position: relative;

.dp-po-form {
padding: 0 0 0 40px;
}

&-cancel {
position: absolute;
right: 0;
top: 0;
}
}

&-wrap {
Expand Down
6 changes: 5 additions & 1 deletion packages/portal-style/src/modules/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,13 @@ body {
align-items: start;
justify-content: space-around;

.dp-po-button {
.btn {
margin-bottom: 20px;
}

.dp-po-oauth {
margin: 0 30px;
}
}

.dp-po-icon {
Expand Down
4 changes: 2 additions & 2 deletions packages/portal-style/src/variables/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $button2-font-size: $font-size-base * 0.666 !default; // 12px
$button3-font-size: $font-size-base * 0.555 !default; // 10px

$primary: $brand-primary !default;
$secondary: $grey-darkest !default;
$secondary: $grey !default;
$light: $grey-light !default;
$dark: $grey-darkest !default;

Expand Down Expand Up @@ -84,7 +84,7 @@ $btn-padding-x: 20px;
$btn-padding-y: 11px;


$btn-padding-y-lg: 11px;
$btn-padding-y-lg: 10px;
$btn-padding-x-lg: 20px;
$btn-font-size-lg: $p2-font-size;

Expand Down
34 changes: 21 additions & 13 deletions packages/portal-style/website/demos/_partials/_comments-add-form.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<div class="dp-po-comments-add">
<div class="dp-po-comments-add-cancel">
<a href="javascript:voic(0)" class="btn btn-outline-secondary">Cancel</a>
</div>
<div class="dp-po-avatar">
<img src="/portal-components/portal-style/static/img/docs/avatar.png" />
<strong>Nick Green</strong>
Expand All @@ -8,28 +11,33 @@
<label for="exampleFormControlTextarea1">Your comment *</label>
<textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Enter Comment"></textarea>
</div>
<div class="form-group">
<div class="form-group dp-po-form-upload">
<label for="exampleFormControlFile1">Add attachment</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
<div class="dp-po-form-element">
<label class="dp-po-form-label">Add attachment</label>
<div class="dp-po-form-upload">
<div class="dp-po-button">
<i class="fal fa-file-alt"></i>
<!--<input type="file" class="form-control-file" id="exampleFormControlFile1">-->
<div class="dp-po-form-upload-wrap">
<div class="btn btn-icon btn-outline-secondary">
<i class="dp-po-icon fal fa-file-alt"></i>
Choose a file
</div>
<span>or</span>
<div class="dp-po-drag">
<i class="fal fa-box-up"></i>
<i class="dp-po-icon far fa-expand-arrows"></i>
Drag and drop
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Subscribe</label>
<div class="row align-items-center">
<div class="col-sm-2">
<input type="submit" class="btn btn-primary" value="Publish" />
</div>
<div class="col-sm-4">
<div class="form-group dp-po-form-check mb-0">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Subscribe</label>
</div>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Publish" />


</form>
</div>
8 changes: 8 additions & 0 deletions packages/portal-style/website/demos/_partials/_comments-add.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@
<h2 class="dp-po-title-text dp-po-title-small">Add Comment</h2>
</div>
<div class="dp-po-block">
<div class="alert alert-icon alert-danger" role="alert">
<i class="dp-po-icon far fa-envelope"></i> Please validate your email address by following the link in the
email sent to you. <a href="#" class="alert-link"> Resend link?</a>
</div>
<div class="alert alert-icon alert-success" role="alert">
<i class="dp-po-icon far fa-check"></i> Thank you for validating your email address, you are now ready to
add your comment. Long content testing with some <a href="#" class="alert-link">links</a> in between
</div>
<%- include('_comments-add-form.ejs'); %>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions packages/portal-style/website/demos/_partials/_form-login-social.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
</div>

<div class="dp-po-oauth">
<a href="" class="dp-po-button dp-po-button-oauth dp-po-button-facebook">
<i class="fab fa-facebook-square"></i>
<a href="" class="btn btn-icon btn-fb btn-lg btn-brand">
<i class="dp-po-icon fab fa-facebook-square"></i>
<span>Log-in with facebook</span>
</a>
<a href="" class="dp-po-button dp-po-button-oauth dp-po-button-linkedin">
<i class="fab fa-linkedin"></i>
<a href="" class="btn btn-icon btn-li btn-lg btn-brand">
<i class="dp-po-icon fab fa-linkedin"></i>
<span>Log-in with linkedin</span>
</a>
</div>
Expand Down
8 changes: 4 additions & 4 deletions packages/portal-style/website/demos/_partials/_form-login.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="loginForm">
<label class="form-check-label" for="loginForm">Stay logged in</label>
<div class="form-group dp-po-form-check">
<input type="checkbox" class="form-check-input" id="loginCheck">
<label class="form-check-label" for="loginCheck">Stay logged in</label>
</div>
<button type="submit" class="btn btn-primary">Log in</button>
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
</form>
</section>

0 comments on commit 714ef55

Please sign in to comment.