KB page cleanup and implemented new modules

packages/portal-style/gulpfile.js

@@ -22,7 +22,7 @@ const cssnano = require('cssnano');
 const files = {
   scssPath: 'src/**/*.scss',
   srcAssetsPath: 'src/assets/**/*',
-  websitePath: 'website/**/[^_]*.ejs',
+  websitePath: 'website/**/*.ejs',
   websiteStaticPath: 'website/static/**/*'
 };
 
@@ -50,7 +50,9 @@ function styleAssetsTask() {
 function ejsTask() {
   return src(files.websitePath)
     .pipe(ejs())
-    .pipe(rename({ extname: '.html' }))
+    .pipe(rename({
+      extname: '.html'
+    }))
     .pipe(dest('.build/portal-components/portal-style'))
     .pipe(connect.reload());
 }

packages/portal-style/src/components/_alert.scss

@@ -0,0 +1,26 @@
+.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;
+      background: #fff;
+      border: 1px solid;
+      position: absolute;
+      height: calc(100% + 4px);
+      width: 50px;
+      text-align: center;
+      left: -2px;
+      top: -2px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      font-size: 22px;
+      padding: 10px 0px;
+    }
+  }
+}

packages/portal-style/src/components/_breadcrumbs.scss

@@ -0,0 +1,53 @@
+.breadcrumb-outer {
+  border-bottom: 2px solid $grey-light;
+}
+
+.breadcrumb {
+  margin-left: -7px;
+
+  &-item {
+    color: $breadcrumb-inactive-color;
+    font-weight: bold;
+    font-size: $p2-font-size;
+    position: relative;
+
+    a {
+      padding: 7px;
+      display: inline-block;
+      text-decoration: none;
+      color: $breadcrumb-inactive-color;
+
+      &:after {
+        content: '';
+        width: calc(100% - 14px);
+        height: 2px;
+        background: $brand-primary;
+        position: absolute;
+        bottom: -2px;
+        left: 7px;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-item.active,
+  &-item:hover {
+    color: $breadcrumb-active-color;
+
+    a {
+      color: $breadcrumb-active-color;
+      position: relative;
+
+      &:after {
+        opacity: 1;
+      }
+
+    }
+
+    &:before {
+      color: $brand-primary;
+    }
+
+
+  }
+}

packages/portal-style/src/components/_buttons.scss

@@ -1,51 +1,12 @@
-.dp-po-button {
-  $self: &;
-  background: $brand-primary;
-  border-radius: 4px;
-  display: inline-block;
-  font-size: 15px;
-  font-weight: 700;
-  color: $white;
-  padding: 10px 25px;
-  text-decoration: none;
-  transition: 0.3s all;
-
-  &:hover {
-    background: rgba(58, 141, 222, 0.6);
-    color: $white;
-    text-decoration: none;
-  }
-
-  &#{$self}-large {
-    width: 250px;
-  }
-
-  &#{$self}-oauth {
-    padding: 0;
-    display: flex;
-    align-items: center;
-    width: 254px;
-
-    .fab {
-      font-size: 26px;
-      padding: 9px 10px;
-      border-right: 1px solid $grey-light;
-    }
-
-    span {
-      width: 100%;
-      text-align: center;
+.btn {
+  display: inline-flex;
+  align-items: center;
+
+  &-icon {
+    .dp-po-icon {
+      font-size: 20px;
+      margin-right: 10px;
+      line-height: 0;
     }
   }
-
-  &#{$self}-facebook {
-    background: $facebook;
-  }
-
-  &#{$self}-linkedin {
-    background: $linkedin;
-  }
 }
-
-
-.btn {}

packages/portal-style/src/components/_clipboard.scss

@@ -0,0 +1,17 @@
+.dp-po-clipboard {
+  &-link {
+    display: inline-block;
+  }
+
+  .dp-po-icon {
+    color: $brand-primary;
+    margin-left: 5px;
+    opacity: 0;
+  }
+
+  &:hover {
+    .dp-po-icon {
+      opacity: 1;
+    }
+  }
+}

packages/portal-style/src/components/_forms.scss

@@ -1,3 +1,4 @@
+/*
 .dp-po-form {
   $self: &;
 
@@ -40,7 +41,7 @@
   color: $grey;
 }
 
-
+*/
 
 
 .form-group {

packages/portal-style/src/components/_tooltip.scss

@@ -3,9 +3,7 @@
   position: relative;
   padding: 3px 5px;
 
-  &:after {
-    content: "\f05a";
-    font-family: "Font Awesome 5 Pro";
+  .dp-po-icon {
     position: absolute;
     right: 0;
     top: 0;
@@ -21,12 +19,13 @@
   border-radius: 4px;
   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
   padding: 10px;
-  width: 250px;
+  max-width: 250px;
   border: 1px solid $grey-light;
   font-family: $font-family-sans-serif;
   color: $grey-darkest;
   font-size: 12px;
   line-height: 1.5;
+  display: inline-block;
 
   p {
     margin: 0 0 5px;

packages/portal-style/src/elements/_title.scss

@@ -1,10 +1,12 @@
 .dp-po-title {
   display: inline-flex;
   align-items: center;
-  $self: &;
+  margin-bottom: 1rem;
+  $self: '.dp-po-title';
 
-  &-icon {
+  .dp-po-icon {
     margin: 0 10px 0 0;
+    font-size: $font-size-base * 1.666;
   }
 
   &-text {
@@ -17,8 +19,4 @@
       font-size: 23px;
     }
   }
-
-  &+.dp-po-block {
-    margin-top: 15px;
-  }
 }