Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 116 insertions, 0 deletions

diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss
new file mode 100644
index 000000000..307060ac3
--- /dev/null
+++ b/web/sass-files/sass/layout/_markdown.scss
@@ -0,0 +1,116 @@
+@charset 'UTF-8';
+
+.markdown__heading {
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.markdown__paragraph-inline {
+    display: inline;
+
+    + .markdown__paragraph-inline {
+        margin-left: 4px;
+    }
+}
+
+#post-list {
+    .markdown-inline-img {
+        -moz-force-broken-image-icon: 1;
+        max-height: 500px;
+        height: 500px;
+    }
+}
+
+.post-body--code {
+    position: relative;
+
+    pre {
+        margin-bottom: 0;
+        word-break: normal;
+        overflow: auto;
+        word-wrap: normal;
+    }
+}
+
+.post-body--code__language {
+    -webkit-transform: translate3d(0,0,0);
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #fff;
+    background: #21586d;
+    padding: 4px 10px 5px 10px;
+    font-size: 13px;
+    opacity: .7;
+    z-index: 5;
+}
+
+.post__body {
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: 15px 0 16px;
+        background-color: #e7e7e7;
+        border: 0 none;
+        @include opacity(.2);
+    }
+
+    code {
+        white-space: pre;
+    }
+
+    .codespan__pre-wrap {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.markdown__table {
+    background: #fff;
+    margin: 5px 0 10px;
+
+    th,
+    td {
+        padding: 6px 13px;
+        border: 1px solid #ddd;
+    }
+
+    tbody tr {
+        background: #fff;
+
+        &:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+}
+blockquote {
+    border: none;
+    position: relative;
+    font-size: 16px;
+    padding: 10px 10px 10px 38px;
+    margin-bottom: 0;
+
+    &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        text-decoration: inherit;
+        content: '\f10d';
+        left: 8px;
+        top: 5px;
+        position: absolute;
+        font-size: 20px;
+        @include opacity(.6);
+    }
+}
+pre {
+    border: none;
+    margin: 5px 0;
+    color: inherit;
+}
+code {
+    background: #fff;
+    color: inherit;
+}