From 185ce26beb5e933e97dafe623b8376d6cc05ab51 Mon Sep 17 00:00:00 2001 From: Iakovleva Margarita Date: Wed, 31 Jul 2019 17:06:08 +0300 Subject: [PATCH] feat(docs): footer was added (#193) --- .../app/components/footer/_footer-theme.scss | 34 ++++++++++++++++ .../components/footer/footer.component.html | 21 ++++++++++ .../components/footer/footer.component.scss | 40 +++++++++++++++++++ .../app/components/footer/footer.component.ts | 10 +++++ .../app/components/footer/footer.module.ts | 12 ++++++ .../main-layout/main-layout.component.html | 2 + .../main-layout/main-layout.component.scss | 2 +- .../main-layout/main-layout.module.ts | 4 +- packages/docs/src/main.scss | 8 +++- 9 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 packages/docs/src/app/components/footer/_footer-theme.scss create mode 100644 packages/docs/src/app/components/footer/footer.component.html create mode 100644 packages/docs/src/app/components/footer/footer.component.scss create mode 100644 packages/docs/src/app/components/footer/footer.component.ts create mode 100644 packages/docs/src/app/components/footer/footer.module.ts diff --git a/packages/docs/src/app/components/footer/_footer-theme.scss b/packages/docs/src/app/components/footer/_footer-theme.scss new file mode 100644 index 000000000..1553fa310 --- /dev/null +++ b/packages/docs/src/app/components/footer/_footer-theme.scss @@ -0,0 +1,34 @@ +@mixin mc-footer-theme($theme) { + $background: #fff; + $dodger_blue: #8c949e; + $celtic_blue: #2768bb; + $light_gray: #c6cacf; + + .docs-footer { + background-color: $background; + + &__wrapper { + border-top: 1px solid $light_gray; + } + + &__text-wrapper { color: $dodger_blue; } + + &__link { + color: $celtic_blue; + border-bottom: 1px solid $celtic_blue; + } + + &__icon { fill: $dodger_blue; } + } + +} + +@mixin mc-footer-typography($config) { + .docs-footer__text-wrapper { + @include mc-typography-level-to-styles($config, caption); + } + + .docs-footer__link { + @include mc-typography-level-to-styles($config, body); + } +} diff --git a/packages/docs/src/app/components/footer/footer.component.html b/packages/docs/src/app/components/footer/footer.component.html new file mode 100644 index 000000000..cde71e49b --- /dev/null +++ b/packages/docs/src/app/components/footer/footer.component.html @@ -0,0 +1,21 @@ +
+
+
+ © 2019 Positive Technologies + Code licensed under an MIT-style License. +
+
+ + + + + +
+
+
diff --git a/packages/docs/src/app/components/footer/footer.component.scss b/packages/docs/src/app/components/footer/footer.component.scss new file mode 100644 index 000000000..28b01dcd3 --- /dev/null +++ b/packages/docs/src/app/components/footer/footer.component.scss @@ -0,0 +1,40 @@ +.docs-footer { + position: fixed; + bottom: 0; + + width: 100%; + will-change: transform; + padding: { + left: 360px; + right: 360px; + }; + + &__wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + margin: { + right: 68px; + left: 68px; + }; + padding: { + top: 12px; + bottom: 12px; + }; + } + + &__text-wrapper { + display: flex; + flex-direction: column; + } + + &__link { display: inline-flex; } + + &__icon { + width: 23.3px; + height: 22.7px; + opacity: 0.8; + } +} diff --git a/packages/docs/src/app/components/footer/footer.component.ts b/packages/docs/src/app/components/footer/footer.component.ts new file mode 100644 index 000000000..8bf78ca61 --- /dev/null +++ b/packages/docs/src/app/components/footer/footer.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.scss'] +}) + +export class FooterComponent {} diff --git a/packages/docs/src/app/components/footer/footer.module.ts b/packages/docs/src/app/components/footer/footer.module.ts new file mode 100644 index 000000000..cd388cd27 --- /dev/null +++ b/packages/docs/src/app/components/footer/footer.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { FooterComponent } from './footer.component'; + + +@NgModule({ + imports: [CommonModule], + exports: [FooterComponent], + declarations: [FooterComponent] +}) +export class FooterModule {} diff --git a/packages/docs/src/app/components/main-layout/main-layout.component.html b/packages/docs/src/app/components/main-layout/main-layout.component.html index 6a4c1d1e1..a0224e9de 100644 --- a/packages/docs/src/app/components/main-layout/main-layout.component.html +++ b/packages/docs/src/app/components/main-layout/main-layout.component.html @@ -9,3 +9,5 @@ + + diff --git a/packages/docs/src/app/components/main-layout/main-layout.component.scss b/packages/docs/src/app/components/main-layout/main-layout.component.scss index 6821f7591..0621e48a5 100644 --- a/packages/docs/src/app/components/main-layout/main-layout.component.scss +++ b/packages/docs/src/app/components/main-layout/main-layout.component.scss @@ -10,7 +10,7 @@ margin-top: 64px; padding-left: 48px; padding-top: 20px; - padding-right: 350px; + padding-right: 360px; &__wrapper{ padding: 10px 0; diff --git a/packages/docs/src/app/components/main-layout/main-layout.module.ts b/packages/docs/src/app/components/main-layout/main-layout.module.ts index 96470c245..e5e0e4ee6 100644 --- a/packages/docs/src/app/components/main-layout/main-layout.module.ts +++ b/packages/docs/src/app/components/main-layout/main-layout.module.ts @@ -11,6 +11,7 @@ import { NavbarModule } from '../navbar'; import { SidenavModule } from '../sidenav/sidenav.module'; import { MainLayoutComponent } from './main-layout.component'; +import { FooterModule } from '../footer/footer.module'; @NgModule({ @@ -26,7 +27,8 @@ import { MainLayoutComponent } from './main-layout.component'; McDropdownModule, NavbarModule, - SidenavModule + SidenavModule, + FooterModule ], exports: [MainLayoutComponent], declarations: [MainLayoutComponent] diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss index 4286b34d5..8b32ce574 100644 --- a/packages/docs/src/main.scss +++ b/packages/docs/src/main.scss @@ -8,7 +8,7 @@ @import './styles/mosaic-fixed'; @import "~@ptsecurity/mosaic-icons/dist/styles/mc-icons.css"; @import 'app/components/navbar/navbar-theme'; - +@import 'app/components/footer/footer-theme'; $primary: mc-palette($mc-blue, 400, 500, 600); $second: mc-palette($mc-grey, 100, 300, 400); @@ -20,6 +20,8 @@ $warning: mc-palette($mc-yellow, 60, 200, 400); $theme: mc-light-theme($primary, $second, $error, $info, $success, $warning); +$config: mc-typography-config(); + // Include all typography for the components. @include mc-core(); @@ -31,3 +33,7 @@ $theme: mc-light-theme($primary, $second, $error, $info, $success, $warning); @include layout-padding-margin(); @include mc-navbar-theme($theme); + +@include mc-footer-theme($theme); + +@include mc-footer-typography($config);