Pull request #230: RED-1439

Merge in RED/ui from RED-1439 to master

* commit '9be7c5c87b776a69b9bba37f9c2a192bcb5eb282':
  Paligo styles build command
  Finished styles
  Footer styles
  Paligo styles for homepage & search results

.gitignore

@@ -39,3 +39,5 @@ testem.log
 Thumbs.db
 
 version.properties
+
+paligo-styles/style.css*

apps/red-ui/src/assets/styles/red-variables.scss

@@ -9,6 +9,8 @@ $grey-5: #d3d5da;
 $grey-6: #f0f1f4;
 $grey-7: #9398a0;
 $grey-8: #f9fafb;
+$grey-9: #f5f5f7;
+$grey-10: #313d4e;
 
 $blue-1: #4875f7;
 $blue-2: #48c9f7;

package.json

@@ -14,6 +14,7 @@
     "affected:test": "nx affected:test",
     "build": "nx build",
     "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --configuration production",
+    "build-paligo-styles": "mkdir -p dist/paligo-styles && sass paligo-styles/style.scss > dist/paligo-styles/redacto-theme.css && cp -r apps/red-ui/src/assets/font dist/paligo-styles/fonts",
     "dep-graph": "nx dep-graph",
     "e2e": "nx e2e",
     "format": "nx format:write",
@@ -63,6 +64,7 @@
     "ngx-toastr": "^14.0.0",
     "papaparse": "^5.3.1",
     "rxjs": "~6.6.7",
+    "sass": "^1.35.1",
     "scroll-into-view-if-needed": "^2.2.28",
     "streamsaver": "^2.0.5",
     "tslib": "^2.2.0",

paligo-styles/fonts.scss

@@ -0,0 +1,34 @@
+@font-face {
+    font-family: 'OpenSans Extrabold';
+    src: url('../../fonts/OpenSans-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 300;
+    src: url('../../fonts/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 400;
+    src: url('../../fonts/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 500;
+    src: url('../../fonts/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 600;
+    src: url('../../fonts/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 700;
+    src: url('../../font/Inter-VariableFont.ttf') format('truetype');
+}

paligo-styles/footer.scss

@@ -0,0 +1,26 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import 'mixin';
+
+.portal-footer,
+.site-footer {
+    border-top: 1px solid $grey-4;
+    padding: 0;
+
+    &.portal-footer {
+        margin-top: 100px;
+    }
+
+    .inner {
+        margin: 0;
+        padding: 8px 0 64px 0;
+        @include paragraph;
+
+        > * {
+            padding: 0;
+        }
+
+        .copyright:after {
+            content: ' knecon AG';
+        }
+    }
+}

paligo-styles/header.scss

@@ -0,0 +1,45 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import 'mixin';
+
+.portal-header {
+    z-index: 1;
+    height: 450px;
+
+    h1 {
+        @include heading-1;
+        margin-top: 68px;
+        margin-bottom: 40px;
+    }
+
+    .portal-search {
+        max-width: 600px;
+        margin: auto;
+        position: relative;
+
+        @include search-input;
+
+        .search-field {
+            padding: 12px 17px;
+        }
+
+        .btn {
+            position: absolute;
+            right: 0;
+            padding: 11px 18px;
+            background-color: transparent;
+            color: $accent;
+            cursor: pointer;
+            border-radius: 0 8px 8px 0;
+
+            &:hover {
+                background-color: $primary;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .portal-header h1 {
+        @include heading-2;
+    }
+}

paligo-styles/homepage.scss

@@ -0,0 +1,37 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import 'mixin';
+
+.portal-publications,
+.featured-content-label {
+    display: none;
+}
+
+.portal-contents {
+    margin-top: 100px;
+    margin-bottom: 0;
+
+    .inner {
+        margin: 0;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 24px;
+
+        &::before {
+            content: none;
+        }
+    }
+}
+
+.publication-contents {
+    @include card;
+}
+
+@media only screen and (max-width: 768px) {
+    .portal-contents .inner {
+        grid-template-columns: 1fr;
+    }
+
+    .publication-contents:first-child {
+        grid-column: auto;
+    }
+}

paligo-styles/manual-sidebar.scss

@@ -0,0 +1,71 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import 'mixin';
+
+.site-sidebar {
+    background-color: $grey-1;
+
+    .logo {
+        padding: 24px 0 30px 0 !important;
+    }
+}
+
+.site-sidebar-search {
+    padding: 0 24px;
+
+    @include search-input;
+
+    .search-field {
+        padding: 7px 13px;
+    }
+}
+
+.nav-site-sidebar {
+    margin-top: 16px;
+
+    .topic-link {
+        padding-top: 11px;
+        padding-bottom: 11px;
+        font-size: 14px;
+        line-height: 18px;
+        color: #d3d5da;
+
+        &:hover {
+            background-color: $grey-10;
+        }
+    }
+
+    .active > .topic-link {
+        background-color: $grey-10;
+    }
+
+    .active > a {
+        color: $white;
+        font-weight: 600;
+    }
+
+    > li {
+        > a {
+            padding-left: 24px;
+        }
+
+        > ul > li {
+            > a {
+                padding-left: 32px;
+            }
+
+            > ul > li > a {
+                padding-left: 40px;
+            }
+        }
+    }
+}
+
+.toc {
+    .glyphicon {
+        top: 5px;
+    }
+
+    > li > .topic-link > .glyphicon {
+        margin-top: 4px;
+    }
+}

paligo-styles/manual.scss

@@ -0,0 +1,105 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import 'manual-sidebar';
+
+.toolbar {
+    box-shadow: none;
+    padding: 21px 24px;
+    margin-bottom: 50px;
+}
+
+.breadcrumb {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 600;
+
+    a {
+        color: $grey-1;
+
+        &:hover {
+            color: $red-1;
+            text-decoration: underline;
+        }
+    }
+
+    .breadcrumb-node {
+        color: $red-1;
+    }
+}
+
+main article {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+#topic-content > section > .titlepage h2.title {
+    margin: 0 0 24px;
+    @include heading-3;
+}
+
+.image-viewport {
+    margin: auto;
+
+    img {
+        margin: 16px auto;
+        box-shadow: 0 3px 12px 5px rgb(40 50 65 / 14%);
+    }
+}
+
+.pager {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    padding: 0;
+}
+
+.pager li > a,
+.pager li > span {
+    @include button;
+}
+
+.warning,
+.note,
+.important,
+.caution,
+.tip {
+    margin-top: 32px;
+    margin-bottom: 32px;
+    padding: 16px 24px 16px 68px;
+    background-color: $white;
+    border-left: 4px solid $red-1;
+
+    &:before {
+        color: $red-1;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        left: 24px;
+        top: calc(50% - 15px);
+    }
+
+    h3 {
+        padding: 0;
+        @include heading-5;
+        margin-bottom: 8px;
+    }
+
+    p {
+        line-height: 20px;
+    }
+}
+
+.topic-content > section > p {
+    margin: 24px 0;
+}
+
+.section-toc {
+    @include card;
+
+    li:first-child {
+        margin-top: 16px;
+    }
+
+    li:last-child {
+        margin-bottom: 8px;
+    }
+}

paligo-styles/mixin.scss

@@ -0,0 +1,126 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+
+@mixin search-input {
+    .search-field {
+        width: 100%;
+        border: 1px solid $grey-5;
+        border-radius: 8px;
+        background-color: $white;
+    }
+
+    .search-field::placeholder {
+        opacity: 0.7;
+    }
+
+    .search-field,
+    .search-field::placeholder {
+        color: $accent;
+        font-size: 14px;
+        line-height: 18px;
+    }
+}
+
+@mixin heading-1 {
+    font-size: 64px;
+    font-weight: 300;
+    line-height: 87px;
+}
+
+@mixin heading-2 {
+    font-size: 42px;
+    font-weight: 300;
+    line-height: 57px;
+}
+
+@mixin heading-3 {
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 43px;
+}
+
+@mixin heading-4 {
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 36px;
+}
+
+@mixin heading-5 {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+@mixin lead-paragraph {
+    font-size: 18px;
+    line-height: 30px;
+}
+
+@mixin paragraph {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+@mixin button {
+    color: $red-1;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 19px;
+    text-transform: uppercase;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+
+    &:hover {
+        text-decoration: underline;
+        background-color: transparent;
+        color: $red-1;
+    }
+}
+
+@mixin card {
+    padding: 24px 40px;
+    border: 1px solid $grey-4;
+    width: 100%;
+    margin: 0;
+    background-color: $white;
+    border-radius: 4px;
+
+    &:first-child {
+        grid-column: 1 / span 2;
+    }
+
+    h4.featured-title,
+    .section-toc-title {
+        color: $accent;
+        @include heading-4;
+        margin: 0;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        margin: 4px 0;
+
+        &:first-child {
+            margin-top: 20px;
+        }
+
+        &:last-child {
+            margin-bottom: 40px;
+        }
+
+        a {
+            color: $primary;
+            @include paragraph;
+        }
+    }
+
+    h4 span,
+    li::before {
+        display: none;
+    }
+}

paligo-styles/search.scss

@@ -0,0 +1,55 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import 'mixin';
+
+.portal-search-result {
+    background-color: $grey-9;
+}
+
+.search-container {
+    padding-bottom: 100px;
+
+    h2 {
+        @include heading-2;
+    }
+}
+
+.portal-search-result {
+    padding: 0;
+    margin-top: 80px;
+}
+
+ul.searchresults {
+    border: 1px solid $grey-4;
+    background-color: $white;
+    border-radius: 4px;
+    margin-top: 32px;
+
+    .search-highlight {
+        font-style: normal;
+    }
+}
+
+li.searchresultitem {
+    margin: 0 32px;
+    border-bottom: 1px solid $grey-4;
+    padding: 32px 8px;
+}
+
+.searchresultitem.selected-searchresultitem {
+    background-color: transparent;
+    border-radius: 0;
+}
+
+.searchresulttitle {
+    @include heading-4;
+    color: $accent;
+}
+
+.searchresultsnippet {
+    margin: 16px 0;
+    color: $accent;
+}
+
+.search-result-breadcrumbs {
+    color: $primary;
+}

paligo-styles/style.scss

@@ -0,0 +1,37 @@
+@import '../apps/red-ui/src/assets/styles/red-variables';
+@import '../apps/red-ui/src/assets/styles/red-mixins';
+@import 'fonts';
+@import 'header';
+@import 'homepage';
+@import 'search';
+@import 'footer';
+@import 'manual';
+@import 'mixin';
+
+body {
+    color: $accent;
+    background-color: $grey-9;
+    font-family: 'Inter', sans-serif;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    pre {
+        margin: 0;
+        font-family: 'Inter', sans-serif;
+    }
+
+    @include scroll-bar;
+
+    h3 {
+        @include heading-3;
+    }
+
+    p {
+        @include paragraph;
+    }
+}

yarn.lock

@@ -12339,6 +12339,13 @@ sass@^1.32.8:
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
 
+sass@^1.35.1:
+  version "1.35.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd"
+  integrity sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"