Upd

deskpro · Jul 17, 2019 · 4ca6e14 · 4ca6e14
1 parent 8aa80bc
commit 4ca6e14
Show file tree

Hide file tree

Showing 5 changed files with 621 additions and 2 deletions.
diff --git a/packages/style/src/demo/pdf-demo.css b/packages/style/src/demo/pdf-demo.css
@@ -0,0 +1,242 @@
+.dp-po-pdf .dp-po-Breadcrumbs-wrap {
+	border-top: 1px solid var(--grey-light);
+	border-bottom: 1px solid var(--grey-light);
+}
+
+.dp-po-pdf .dp-po-nav {
+	box-shadow: none;
+}
+
+.dp-po-pdf .dp-po-List.List--avatars li {
+	border: 5px solid var(--white);
+}
+
+.dp-po-pdf .dp-po-List-question li.is-active::after {
+	display: none;
+}
+
+.dp-po-pdf .dp-po-List.List--avatars li .dp-po-Avatar {
+	border: 2px solid var(--white);
+}
+
+.dp-po-pdf .dp-po-description-wrap .dp-IconsWrapper {
+	display: none;
+}
+
+.dp-po-pdf .dp-po-Logo-wrap .dp-po-Icon {
+	margin-left: 0;
+}
+
+.dp-po-pdf .dp-po-main .dp-po-Title-page {
+	margin-top: 38px;
+}
+
+.dp-po-pdf .dp-po-tex-wrap p {
+	margin-bottom: 28px;
+}
+
+.dp-po-pdf .dp-po-tex-wrap p a {
+	color: var(--grey-dark);
+	position: relative;
+}
+
+.dp-po-pdf .dp-po-tex-wrap ul {
+	padding-left: 45px;
+	margin-bottom: 0;
+}
+
+.dp-po-pdf  .dp-po-title.dp-po-copy-clipboard {
+	margin-top: 30px;
+}
+
+.dp-po-pdf .dp-po-tex-wrap {
+	box-shadow: none;
+	border: 1px solid var(--grey-light);
+	border-radius: 4px;
+	margin-top: 35px;
+	margin-bottom: 25px;
+	padding: 20px 30px 35px 30px;
+}
+
+.dp-po-pdf .dp-po-comments.comments-list + .dp-po-comments-wrap {
+	box-shadow: none;
+	border: 1px solid var(--grey-light);
+	border-radius: 0px 0px 4px 4px;
+}
+
+.dp-po-pdf .dp-po-List-question {
+	margin-left: 0;
+}
+
+.dp-po-pdf .dp-po-Tooltip-article-info {
+	display: none;
+}
+
+.dp-po-pdf .dp-po-Image-knowledgabse {
+	flex-direction: column;
+	border: 1px solid var(--grey);
+}
+
+.dp-po-pdf .dp-po-Image-knowledgabse img {
+	border: 1px solid var(--grey-light);
+	padding: 0;
+	margin: 10px;
+}
+
+.dp-po-pdf .dp-po-image-description {
+	background-color: var(--grey-lightest);
+	padding: 10px;
+}
+
+.dp-po-pdf .dp-po-glossary {
+	border-top: 1.5px solid var(--grey-light);
+	border-bottom: 1.5px solid var(--grey-light);
+	padding-bottom: 15px;
+}
+
+.dp-po-pdf .dp-po-link-wrapper  {
+	padding-bottom: 15px;
+}
+
+.dp-po-pdf .dp-po-glossary .dp-po-title,
+.dp-po-pdf .dp-po-link-wrapper .dp-po-title {
+	color: var(--grey);
+	font: var(--h-3);
+	margin: 22px 0 10px;
+}
+
+.dp-po-pdf .dp-po-link-wrapper ol {
+	padding-left: 20px;
+}
+
+.dp-po-pdf .dp-po-link-wrapper ol {
+	margin-bottom: 10px;
+}
+
+.dp-po-pdf .dp-po-glossary-item {
+	display: flex;
+	align-items: center;
+	font: var(--p-1);
+	margin-bottom: 10px;
+}
+
+.dp-po-pdf .dp-po-glossary .dp-po-label {
+	background-color: var(--info-light);
+	border-radius: 1px;
+	font: var(--p-1);
+	line-height: 1;
+	padding: 0 5px 3px;
+	margin-right: 8px;
+}
+
+.dp-po-pdf a .dp-po-num {
+	display: none;
+}
+
+@media (max-width: 992px) {
+
+	.dp-po-pdf .dp-po-Breadcrumbs-wrap .dp-po-Breadcrumbs .dp-po-Breadcrumb-item:first-child {
+		display: block;
+	}
+
+	.dp-po-pdf .dp-po-Breadcrumbs-wrap {
+		border-bottom: 0;
+	}
+
+	.dp-po-pdf .dp-po-mobile-subscribe {
+		display: none;
+	}
+
+	.dp-po-pdf .dp-po-tex-wrap {
+		border: 0;
+		border-top: 1px solid var(--grey-light);
+		border-radius: 0;
+		padding: 20px 0 35px 0;
+	}
+
+	.dp-po-pdf .dp-po-tex-wrap ul {
+		padding-left: 15px;
+	}
+
+	.dp-po-pdf .dp-po-Image-knowledgabse {
+		border: 0;
+	}
+
+	.dp-po-pdf .dp-po-Image-knowledgabse img {
+		margin: 0;
+	}
+
+	.dp-po-pdf .dp-po-md-collapse-content {
+		display: block !important;
+	}
+
+	.dp-po-pdf .dp-po-glossary {
+		border-bottom: 0;
+	}
+
+	.dp-po-pdf .dp-po-md-collapse-title.dp-po-title .dp-po-Icon {
+		display: none;
+	}
+
+	.dp-po-pdf .dp-po-comments.comments-list + .dp-po-comments-wrap {
+		border: none;
+	}
+
+	.dp-po-pdf .dp-po-link-wrapper {
+		display: none;
+	}
+
+	.dp-po-pdf .dp-po-glossary .dp-po-glossary-item,
+	.dp-po-pdf .dp-po-glossary .dp-po-label {
+		display: inline-block;
+	}
+
+	.dp-po-pdf .dp-po-footer {
+		border-top: 1.5px solid var(--grey-light);
+	}
+
+	.dp-po-pdf .dp-po-col-12 {
+		padding: 0;
+	}
+
+}
+
+@media (min-width: 992px) {
+
+	.dp-Template.dp-po-pdf .dp-po-main {
+		background-color: var(--white);
+	}
+
+	.dp-po-pdf a .dp-po-num {
+		text-transform: capitalize;
+		color: var(--grey-darkest);
+		font: var(--p-3-semibold);
+		display: contents;
+	}
+
+	.dp-po-pdf .dp-po-nav-control {
+		display: none;
+	}
+
+	.dp-po-pdf .dp-po-comments-wrap {
+		margin-bottom: 50px;
+	}
+
+	.dp-po-pdf .dp-po-comments-item {
+		padding: 20px 35px 5px 40px;
+	}
+
+	.dp-po-pdf .dp-po-comments-item:last-cild {
+		padding: 20px 35px 19px 40px;
+	}
+
+	.dp-po-pdf .dp-po-link-wrapper  {
+		border-bottom: 1.5px solid var(--grey-light);
+	}
+
+	.dp-po-pdf .dp-po-footer {
+		background-color: var(--white);
+		padding: 25px 0 50px;
+	}
+
+}
diff --git a/packages/style/src/style.css b/packages/style/src/style.css
@@ -37,6 +37,7 @@
 @import "demo/messenger-buttons-demo.css";
 @import "demo/messenger-Icons.css";
 @import "demo/pagination-demo.css";
+@import "demo/pdf-demo.css";
 @import "demo/scrollbar-demo.css";
 @import "demo/tableview-demo.css";
 @import "demo/tabs-demo.css";

diff --git a/packages/style/website/pages/en/index.js b/packages/style/website/pages/en/index.js
@@ -71,6 +71,7 @@ class HomeSplash extends React.Component {
           <h2>Demos</h2>
           <ul>
             <li><a href={pageUrl('demos/kb-view.html')}>KB View</a></li>
+            <li><a href={pageUrl('demos/kb-view-pdf.html')}>KB View PDF</a></li>
           </ul>
         </Demos>
       </div>