feat(ui-features): add the buttons page

.angular-cli.json

@@ -18,6 +18,7 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "styles": [
+        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
         "../node_modules/normalize.css/normalize.css",
         "../node_modules/font-awesome/scss/font-awesome.scss",
         "../node_modules/ionicons/scss/ionicons.scss",

package.json

@@ -43,6 +43,7 @@
     "ionicons": "2.0.1",
     "ng2-ckeditor": "1.1.6",
     "normalize.css": "6.0.0",
+    "roboto-fontface": "0.7.0",
     "rxjs": "5.1.1",
     "tether": "1.4.0",
     "tinymce": "4.5.7",

src/app/@shared/shared.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgaCardModule } from '@nga/theme';
-import { CKEditorModule } from 'ng2-ckeditor';
+import { NgaBootstrapModule } from '@nga/bootstrap';
 
 @NgModule ({
   exports: [
@@ -12,7 +12,7 @@ import { CKEditorModule } from 'ng2-ckeditor';
     ReactiveFormsModule,
     RouterModule,
     NgaCardModule,
-    CKEditorModule,
+    NgaBootstrapModule,
   ],
 })
 export class NgxSharedModule { }

src/app/@theme/styles/gorgeous/gorgeous.theme.scss

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
 @import '../components';
 @import 'variables';
 
@@ -5,7 +10,13 @@
 @import 'overrides/all';
 
 $theme-name: 'gorgeous';
+
+// @nga/theme module styles
 @include nga-theme($theme-name) {
   @include nga-theme-overrides($theme-name);
   @include custom-components-theme($theme-name);
 }
+
+// @nga/bootstrap module styles
+@import '~@nga/bootstrap/styles/themes/nga.theme.default';
+@include nga-bootstrap($theme-name);

src/app/@theme/styles/pure/pure.theme.scss

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
 @import 'variables';
 @import '../components';
 @import 'overrides/all';
@@ -5,7 +10,13 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
 $theme-name: 'pure';
+
+// @nga/theme module styles
 @include nga-theme($theme-name) {
   @include nga-theme-overrides($theme-name);
   @include custom-components-theme($theme-name);
 }
+
+// @nga/bootstrap module styles
+@import '~@nga/bootstrap/styles/themes/nga.theme.default';
+@include nga-bootstrap($theme-name);

src/app/pages/editors/editors.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { CKEditorModule } from 'ng2-ckeditor';
 
 import { NgxSharedModule } from '../../@shared/shared.module';
 
@@ -8,6 +9,7 @@ import { NgxEditorsRoutingModule, routedComponents } from './editors-routing.mod
   imports: [
     NgxSharedModule,
     NgxEditorsRoutingModule,
+    CKEditorModule,
   ],
   declarations: [
     ...routedComponents,

src/app/pages/ui-features/buttons/buttons.component.html

@@ -5,7 +5,7 @@
         Flat buttons
       </nga-card-header>
       <nga-card-body>
-        <ngx-flat-buttons></ngx-flat-buttons>
+        <ngx-flat-buttons class="button-panel"></ngx-flat-buttons>
       </nga-card-body>
     </nga-card>
   </div>
@@ -15,7 +15,7 @@
         Raised buttons
       </nga-card-header>
       <nga-card-body>
-        <ngx-raised-buttons></ngx-raised-buttons>
+        <ngx-raised-buttons class="button-panel"></ngx-raised-buttons>
       </nga-card-body>
     </nga-card>
   </div>
@@ -25,7 +25,7 @@
         Different sizes
       </nga-card-header>
       <nga-card-body>
-        <ngx-sized-buttons></ngx-sized-buttons>
+        <ngx-sized-buttons class="button-panel df-size-button-panel"></ngx-sized-buttons>
       </nga-card-body>
     </nga-card>
   </div>
@@ -35,7 +35,7 @@
         Disabled
       </nga-card-header>
       <nga-card-body>
-        <ngx-disabled-buttons></ngx-disabled-buttons>
+        <ngx-disabled-buttons class="button-panel"></ngx-disabled-buttons>
       </nga-card-body>
     </nga-card>
   </div>
@@ -69,7 +69,7 @@
         Large buttons
       </nga-card-header>
       <nga-card-body>
-        <ngx-large-buttons></ngx-large-buttons>
+        <ngx-large-buttons class="large-buttons-panel"></ngx-large-buttons>
       </nga-card-body>
     </nga-card>
   </div>

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -1,52 +1,64 @@
 :host {
   display: block;
+  font-size: 1rem;
+
   /deep/ {
     .basic-btns {
       padding-top: 8px;
       margin-bottom: -8px;
+
       h5 {
         line-height: 35px;
-        font-size: 12px;
+
         &.row-sm {
           line-height: 30px;
         }
+
         &.row-xs {
           line-height: 22px;
         }
       }
+
       & {
         .row {
           padding-bottom: 4px;
         }
       }
     }
+
     .btns-row {
       & {
         div {
           margin-bottom: 12px;
         }
       }
+
     }
     .btns-same-width-sm {
       .btn {
         width: 48px;
       }
     }
+
     .btns-same-width-md {
       .btn {
         width: 79px;
       }
     }
+
     .btns-same-width-lg {
       .btn {
         width: 112px;
       }
     }
-    ul.btn-list {
+
+    ul {
+      &.btn-list {
         margin: 0 0 0 -18px;
         padding: 0;
         padding-top: 6px;
         clear: both;
+
         li {
           margin: 0 0 12px 18px;
           padding: 0;
@@ -54,10 +66,14 @@
           float: left;
         }
       }
+    }
+
     .btn-group-wrapper {
       margin-bottom: 12px;
     }
+
     $btn-icon-size: 34px;
+
     .btn-icon {
       width: $btn-icon-size;
       height: $btn-icon-size;
@@ -65,64 +81,84 @@
       padding: 0;
       text-align: center;
     }
+
     .btn-group-example {
       float: left;
       margin-right: 30px;
       margin-bottom: 12px;
     }
+
     .btn-toolbar-example {
       float: left;
     }
+
     .progress-buttons-container {
       text-align: center;
-      font-size: 16px;
+
-      span.button-title {
+      span {
+        .button-title {
           display: inline-block;
           width: 100%;
           line-height: 1;
-        font-size: 14px;
           margin-bottom: 10px;
           margin-top: 10px;
         }
+      }
+
       .row + .row {
         margin-top: 30px;
       }
     }
+
     .button-panel {
       height: 315px;
+
       .btn {
         width: 150px;
       }
     }
+
     .large-buttons-panel {
       height: 202px;
     }
-    .button-panel.df-size-button-panel {
+
+    .button-panel {
+      &.df-size-button-panel {
         .btn-xs {
           width: 60px;
         }
+
         .btn-sm {
           width: 90px;
         }
+
         .btn-mm {
           width: 120px;
         }
+
         .btn-md {
           width: 150px;
         }
+
         .btn-xm {
           width: 175px;
         }
+
         .btn-lg {
           width: 200px;
         }
       }
+    }
+
     .button-wrapper {
       text-align: center;
       margin: 5px 0;
     }
-    .btn-group.flex-dropdown {
+
+    .btn-group {
+      &.flex-dropdown {
         display: flex;
       }
     }
+  }
 }

yarn.lock

@@ -4662,6 +4662,10 @@ ripemd160@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
 
+roboto-fontface@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/roboto-fontface/-/roboto-fontface-0.7.0.tgz#2f36464e5c99353e8427f55f1fca7be1a8a417d9"
+
 rsvp@^3.0.17:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.5.0.tgz#a62c573a4ae4e1dfd0697ebc6242e79c681eaa34"
@@ -5928,20 +5932,13 @@ write-file-stdout@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
 
-ws@1.1.1:
+ws@1.1.1, ws@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.1.tgz#082ddb6c641e85d4bb451f03d52f06eabdb1f018"
   dependencies:
     options ">=0.0.5"
     ultron "1.0.x"
 
-ws@^1.0.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
-  dependencies:
-    options ">=0.0.5"
-    ultron "1.0.x"
-
 wtf-8@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"