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 @@
+
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);