members-explorer and page content styling

Author: ShukantPal

common/config/rush/pnpm-lock.yaml

@@ -56,10 +56,10 @@ export default connect(({explorerOpen}) => ({
 
   return (
     <div className="explorer" style={{
-      display: !isOpen ? "none" : undefined,
       minWidth: !isOpen ? "0px" : undefined,
       width: !isOpen ? "0px" : undefined,
       overflowX: !isOpen ? "hidden" : undefined,
+      transitionDuration: "200ms",
     }}>
       <ExplorerHeader isOpen={isOpen} toggleOpen={toggleOpen} />
       <TreeView

packages/webdoc-default-template/src/app/components/Explorer/index.js

@@ -1,7 +1,32 @@
+@import "themes";
+
 .document {
+  font-size: .875em;
+  line-height: 1.4em;
   width: 100%;
 
-  &__title {
+  &__breadcrumb {
+    a {
+      color: $colorText;
+      text-decoration: underline;
+    }
+
+    > *:last-child {
+      color: $colorPrimary;
+    }
+  }
+
+  > .document__title {
     font-size: 3em;
+    line-height: 1.4em;
+    margin: 18px 0;
+  }
+
+  > .document__brief, > .document__description {
+    margin-left: 8px;
+  }
+
+  > * {
+    margin: 10px 0;
   }
 }

packages/webdoc-default-template/src/styles/document.scss

@@ -23,7 +23,6 @@ a {
   @include flex($flex-direction: column);
 
   color: $colorPrimaryText;
-  background-color: $colorPrimary;
 
   font-family: Roboto, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: $textSizeMain;
@@ -52,29 +51,43 @@ a {
       }
 
       max-width: 400px;
-      height: 100%;
       overflow: auto;
     }
 
     &-members-explorer {
       min-width: 200px;
     }
-    &-members-explorer > *:first-child, &-content > *:first-child {
+    &-members-explorer > *:first-child {
+      margin-top: 68px;
+    }
+    &-content > *:first-child {
       margin-top: 8px;
     }
     &-members-explorer > *:last-child, &-content > *:last-child {
       margin-bottom: 8px;
     }
 
     &-content {
-      width: 0;
+      color: $colorText;
+      font-family: Arial, Roboto, sans-serif;
       flex-grow: 2;
       flex-shrink: 1;
       height: 100%;
       overflow-x: hidden;// TODO: Slight horizontal scrolling pops up for some reason
       overflow-y: auto;
-      max-width: 900px;
-      padding: 0 8px;
+      max-width: 800px;
+      padding-left: 67px;
+      padding-right: 83px;
+      width: 0;
+    }
+    &-content > *:first-child {
+      margin-top: 24px;
+    }
+    &-r-divider {
+      border: 1px solid $colorPrimaryLight;
+      margin: 0;
+      margin-top: 68px;
+      height: 67vh;
     }
   }
 }

packages/webdoc-default-template/src/styles/global.scss

@@ -1,22 +1,43 @@
 @import "./scss-utils/all";
+@import "themes";
 
 
 .page-members-explorer {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+
   &-category {
+    margin-left: 16px;
+    margin-bottom: 7px;
+
     &__title {
-      color: black;
-      font-weight: 500;
+      font-weight: 700;
+      margin-bottom: 7px;
     }
 
     &__items {
-      @include normalize(true);
+      margin-left: 12px;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: 0;
+      list-style: none;
     }
-
   }
 
   &__item {
+    align-items: center;
+    border-radius: 8px 0 0 8px;
+    display: flex;
     font-weight: 400;
+    height: 15px;
     line-height: 1.5;
+    padding-left: 2px;
+    vertical-align: middle;
+
+    a {
+      color: $colorText;
+    }
 
     &:hover {
       background-color: rgba(0, 0, 0, 0.04);

packages/webdoc-default-template/src/styles/members-explorer.scss

@@ -1,31 +1,51 @@
+@import "themes";
 @import "vars";
 
 
 .members {
   &__category {
-    font-size: 2em;
+    font-size: 1.5em;
+    font-weight: bold;
+    line-height: 1.4em;
+    padding: 8px;
+  }
+
+  > hr {
+    border: 2px solid $colorSheetSecondary
+  }
+
+  > * {
+    margin-top: 10px;
+    margin-bottom: 10px;
   }
 }
 
 .member {
   position: relative;
-
-  width: 100%;
   padding-bottom: 12px;
+  width: 100%;
+
+  &__title {
+    align-items: center;
+    display: flex;
+    margin-left: 12px;
+    margin-bottom: 10px;
 
-  &:not(:last-child) {
-    &:after {
-      content: '';
-      position: absolute;
-      width: 69%;
-      height: 1px;
-      background-color: $colorBorders;
+    > a {
+      height: 16px;
+    }
 
-      left: 50%;
-      transform: translateX(-50%);
+    > span {
+      font-size: 1.3em;
+      margin-left: 8px;
+      line-height: 1.4em;
     }
   }
 
+  &__brief, &__description, > .table-wrapper {
+    margin-left: 8px;
+  }
+
   & > .signature {
     margin-bottom: 8px;
   }