diff --git a/.angular-cli.json b/.angular-cli.json
index 1d617110..751b80b1 100644
--- a/.angular-cli.json
+++ b/.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",
diff --git a/package.json b/package.json
index 65dc87f6..79c1ba1f 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/@shared/shared.module.ts b/src/app/@shared/shared.module.ts
index faa8f2b7..94c30a2e 100644
--- a/src/app/@shared/shared.module.ts
+++ b/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 { }
diff --git a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss b/src/app/@theme/styles/gorgeous/gorgeous.theme.scss
index 075e306c..a40d0bcc 100644
--- a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss
+++ b/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);
diff --git a/src/app/@theme/styles/pure/pure.theme.scss b/src/app/@theme/styles/pure/pure.theme.scss
index a8408ccf..6f304e26 100644
--- a/src/app/@theme/styles/pure/pure.theme.scss
+++ b/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);
diff --git a/src/app/pages/editors/editors.module.ts b/src/app/pages/editors/editors.module.ts
index 0108012e..2322b7d2 100644
--- a/src/app/pages/editors/editors.module.ts
+++ b/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,
diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/ui-features/buttons/buttons.component.html
index 8113113f..22aa6a69 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.html
+++ b/src/app/pages/ui-features/buttons/buttons.component.html
@@ -5,7 +5,7 @@
Flat buttons
-
+
@@ -15,7 +15,7 @@
Raised buttons
-
+
@@ -25,7 +25,7 @@
Different sizes
-
+
@@ -35,7 +35,7 @@
Disabled
-
+
@@ -69,7 +69,7 @@
Large buttons
-
+
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index af89eef1..3f6b5208 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -1,63 +1,79 @@
: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 {
- margin: 0 0 0 -18px;
- padding: 0;
- padding-top: 6px;
- clear: both;
- li {
- margin: 0 0 12px 18px;
+
+ ul {
+ &.btn-list {
+ margin: 0 0 0 -18px;
padding: 0;
- list-style: none;
- float: left;
+ padding-top: 6px;
+ clear: both;
+
+ li {
+ margin: 0 0 12px 18px;
+ padding: 0;
+ list-style: none;
+ 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 {
- display: inline-block;
- width: 100%;
- line-height: 1;
- font-size: 14px;
- margin-bottom: 10px;
- margin-top: 10px;
+
+ span {
+ .button-title {
+ display: inline-block;
+ width: 100%;
+ line-height: 1;
+ 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 {
- .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-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 {
- display: flex;
+
+ .btn-group {
+ &.flex-dropdown {
+ display: flex;
+ }
}
}
}
diff --git a/yarn.lock b/yarn.lock
index d7501ce8..7fa1d7d3 100644
--- a/yarn.lock
+++ b/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"