feat(docs): footer was added (#193)

positive-js · Oct 25, 2019 · 5f18027 · 5f18027
1 parent ec038ed
commit 5f18027
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 3 deletions.
diff --git a/packages/docs/src/app/components/footer/_footer-theme.scss 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
@@ -0,0 +1,21 @@
+<div class="docs-footer">
+    <div class="docs-footer__wrapper">
+        <div class="docs-footer__text-wrapper">
+            <span class="docs-footer__text">© 2019 Positive Technologies</span>
+            <span class="docs-footer__text">Code licensed under an <a class="docs-footer__link">MIT-style License</a>.</span>
+        </div>
+        <div class="docs-footer__icon">
+            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                  viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
+                 xml:space="preserve">
+                <g>
+                    <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
+                        c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
+                        c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
+                        c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
+                        c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906		C438.536,184.851,428.728,148.168,409.132,114.573z"></path>
+                </g>
+            </svg>
+         </div>
+    </div>
+</div>
diff --git a/packages/docs/src/app/components/footer/footer.component.scss 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
@@ -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
@@ -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
@@ -9,3 +9,5 @@
     </article>
     <anchors></anchors>
 </main>
+
+<footer></footer>
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
@@ -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
@@ -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
@@ -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);