From e5f3f211f9ed4bbfeab006ee73f738c2ddff1166 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Sat, 6 May 2017 20:32:00 +0300 Subject: [PATCH] refactor(styles): huge styles refactoring --- .../header/_header.component.theme.scss | 7 --- .../components/header/header.component.ts | 8 ++-- src/app/@theme/styles/cosmic/_variables.scss | 0 .../cosmic.theme.scss} | 8 ++-- .../overrides/_nga-layout.scss | 19 ++------ .../styles/cosmic/overrides/_nga-menu.scss | 14 ++++++ .../{gorgeous => cosmic}/overrides/all.scss | 0 .../@theme/styles/gorgeous/_variables.scss | 21 --------- .../styles/gorgeous/overrides/_nga-menu.scss | 46 ------------------- .../light.theme.scss} | 7 ++- .../@theme/styles/light/overrides/all.scss | 2 + src/app/@theme/styles/pure/_variables.scss | 17 ------- .../styles/pure/overrides/_nga-layout.scss | 27 ----------- .../styles/pure/overrides/_nga-menu.scss | 39 ---------------- src/app/@theme/styles/pure/overrides/all.scss | 7 --- src/app/pages/pages.component.ts | 6 +-- src/app/pages/pages.module.ts | 2 +- 17 files changed, 34 insertions(+), 196 deletions(-) create mode 100644 src/app/@theme/styles/cosmic/_variables.scss rename src/app/@theme/styles/{pure/pure.theme.scss => cosmic/cosmic.theme.scss} (87%) rename src/app/@theme/styles/{gorgeous => cosmic}/overrides/_nga-layout.scss (68%) create mode 100644 src/app/@theme/styles/cosmic/overrides/_nga-menu.scss rename src/app/@theme/styles/{gorgeous => cosmic}/overrides/all.scss (100%) delete mode 100644 src/app/@theme/styles/gorgeous/_variables.scss delete mode 100644 src/app/@theme/styles/gorgeous/overrides/_nga-menu.scss rename src/app/@theme/styles/{gorgeous/gorgeous.theme.scss => light/light.theme.scss} (83%) create mode 100644 src/app/@theme/styles/light/overrides/all.scss delete mode 100644 src/app/@theme/styles/pure/_variables.scss delete mode 100644 src/app/@theme/styles/pure/overrides/_nga-layout.scss delete mode 100644 src/app/@theme/styles/pure/overrides/_nga-menu.scss delete mode 100644 src/app/@theme/styles/pure/overrides/all.scss diff --git a/src/app/@theme/components/header/_header.component.theme.scss b/src/app/@theme/components/header/_header.component.theme.scss index 2d0dc933..3607ff69 100644 --- a/src/app/@theme/components/header/_header.component.theme.scss +++ b/src/app/@theme/components/header/_header.component.theme.scss @@ -1,11 +1,4 @@ @mixin base-header-theme($theme-name) { /deep/ header { - .logo > a { - color: $nga-color-secondary !important; - - @include hover-focus-active { - color: $nga-color-inverse !important; - } - } } } diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index 20049326..a29c0a55 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/src/app/@theme/components/header/header.component.ts @@ -18,7 +18,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service'; - + @@ -49,10 +49,10 @@ export class HeaderComponent { } switchTheme() { - if (this.themeService.currentTheme == 'pure') { - this.themeService.changeTheme('gorgeous'); + if (this.themeService.currentTheme == 'light') { + this.themeService.changeTheme('cosmic'); } else { - this.themeService.changeTheme('pure'); + this.themeService.changeTheme('light'); } } } diff --git a/src/app/@theme/styles/cosmic/_variables.scss b/src/app/@theme/styles/cosmic/_variables.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/@theme/styles/pure/pure.theme.scss b/src/app/@theme/styles/cosmic/cosmic.theme.scss similarity index 87% rename from src/app/@theme/styles/pure/pure.theme.scss rename to src/app/@theme/styles/cosmic/cosmic.theme.scss index 24028aef..d98716b3 100644 --- a/src/app/@theme/styles/pure/pure.theme.scss +++ b/src/app/@theme/styles/cosmic/cosmic.theme.scss @@ -3,13 +3,13 @@ * 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 'variables'; + +@import '~@nga/theme/styles/themes/nga.theme.cosmic'; @import 'overrides/all'; -@import '~@nga/theme/styles/themes/nga.theme.default'; - -$theme-name: 'pure'; +$theme-name: 'cosmic'; // @nga/theme module styles @include nga-theme($theme-name) { diff --git a/src/app/@theme/styles/gorgeous/overrides/_nga-layout.scss b/src/app/@theme/styles/cosmic/overrides/_nga-layout.scss similarity index 68% rename from src/app/@theme/styles/gorgeous/overrides/_nga-layout.scss rename to src/app/@theme/styles/cosmic/overrides/_nga-layout.scss index 314666a4..a70df92a 100644 --- a/src/app/@theme/styles/gorgeous/overrides/_nga-layout.scss +++ b/src/app/@theme/styles/cosmic/overrides/_nga-layout.scss @@ -1,20 +1,9 @@ -@mixin nga-layout-override($theme-name) { - $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68); +@mixin nga-layout-override($theme-name) {; + // TODO: refactor this /deep/ .layout { - a { - @include hover-focus-active { - color: $nga-color-secondary !important; - text-decoration: none; - } - } nga-layout-header > nav { - box-shadow: $layout-shadow; - - i:hover { - color: $nga-color-secondary; - } .left { color: $nga-color-inverse; @@ -42,19 +31,17 @@ background: transparent; .scrollable { - box-shadow: $layout-shadow; + //box-shadow: $layout-shadow; margin-top: $nga-layout-padding; border-top-right-radius: $nga-radius; } } nga-layout-footer > nav { - $footer-text: #7d85b2; $footer-link: $nga-color-secondary; border: none !important; padding: 1.25rem; - box-shadow: $layout-shadow; .created-by { color: #7d85b2; diff --git a/src/app/@theme/styles/cosmic/overrides/_nga-menu.scss b/src/app/@theme/styles/cosmic/overrides/_nga-menu.scss new file mode 100644 index 00000000..85076d63 --- /dev/null +++ b/src/app/@theme/styles/cosmic/overrides/_nga-menu.scss @@ -0,0 +1,14 @@ +@mixin nga-menu-override($theme-name) { + /deep/ nga-menu { + > ul > li:first-child { + a { + background-image: linear-gradient(to right, #664dd9, #9d52f2) !important; + box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important; + margin: 1rem; + border-radius: $nga-radius; + height: 3.5rem; + color: $nga-color-inverse; + } + } + } +} diff --git a/src/app/@theme/styles/gorgeous/overrides/all.scss b/src/app/@theme/styles/cosmic/overrides/all.scss similarity index 100% rename from src/app/@theme/styles/gorgeous/overrides/all.scss rename to src/app/@theme/styles/cosmic/overrides/all.scss diff --git a/src/app/@theme/styles/gorgeous/_variables.scss b/src/app/@theme/styles/gorgeous/_variables.scss deleted file mode 100644 index 16802604..00000000 --- a/src/app/@theme/styles/gorgeous/_variables.scss +++ /dev/null @@ -1,21 +0,0 @@ -$nga-color-default: #2f2e66; -$nga-color-secondary: #a1a1e6; -$nga-color-inverse: white; - -$nga-foreground: $nga-color-inverse; -$nga-background: #20274f; - -$nga-foreground-inverse: $nga-color-secondary; - -$nga-layout-padding: 2.5rem; - -$nga-header-height: 4.725rem; -$nga-header-padding: 1.25rem; - -$nga-footer-height: $nga-header-height; - -$nga-sidebar-width: 16.25rem; -$nga-sidebar-width-compact: 3.45rem; -$nga-sidebar-padding: 0; - -$nga-card-background: $nga-color-default; \ No newline at end of file diff --git a/src/app/@theme/styles/gorgeous/overrides/_nga-menu.scss b/src/app/@theme/styles/gorgeous/overrides/_nga-menu.scss deleted file mode 100644 index cb49b8f7..00000000 --- a/src/app/@theme/styles/gorgeous/overrides/_nga-menu.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin nga-menu-override($theme-name) { - /deep/ nga-menu { - ul li { - &:first-child { - a { - background-image: linear-gradient(to right, #664dd9, #9d52f2) !important; - box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important; - margin: 1rem; - border-radius: $nga-radius; - height: 3.5rem; - color: $nga-color-inverse; - } - } - - a, - & > span.menu-group { - display: flex; - align-items: center; - - transition: all 0.2s ease; - padding: 0.375rem 0 0.375rem 1rem; - color: $nga-color-secondary; - - &.active { - background: $nga-background; - font-weight: bold; - } - - i { - font-size: 2rem; - margin-right: 1.25rem; - - &:first-child { - display: flex; - justify-content: center; - } - } - } - - & > span.menu-group { - color: $nga-color-inverse; - font-size: 1rem; - } - } - } -} diff --git a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss b/src/app/@theme/styles/light/light.theme.scss similarity index 83% rename from src/app/@theme/styles/gorgeous/gorgeous.theme.scss rename to src/app/@theme/styles/light/light.theme.scss index e37af511..73f58877 100644 --- a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss +++ b/src/app/@theme/styles/light/light.theme.scss @@ -4,12 +4,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ @import '../components'; -@import 'variables'; - -@import '~@nga/theme/styles/themes/nga.theme.default'; @import 'overrides/all'; -$theme-name: 'gorgeous'; +@import '~@nga/theme/styles/themes/nga.theme.light'; + +$theme-name: 'light'; // @nga/theme module styles @include nga-theme($theme-name) { diff --git a/src/app/@theme/styles/light/overrides/all.scss b/src/app/@theme/styles/light/overrides/all.scss new file mode 100644 index 00000000..28a3e83c --- /dev/null +++ b/src/app/@theme/styles/light/overrides/all.scss @@ -0,0 +1,2 @@ +@mixin nga-theme-overrides($theme-name) { +} diff --git a/src/app/@theme/styles/pure/_variables.scss b/src/app/@theme/styles/pure/_variables.scss deleted file mode 100644 index f2dace35..00000000 --- a/src/app/@theme/styles/pure/_variables.scss +++ /dev/null @@ -1,17 +0,0 @@ -$nga-color-default: white; -$nga-color-secondary: #b5bbd5; -$nga-color-inverse: #7d85b2; - -$nga-foreground: $nga-color-inverse; -$nga-background: #edf1f7; - -$nga-header-height: 4.725rem; -$nga-header-padding: 1.25rem; - -$nga-footer-height: $nga-header-height; - -$nga-sidebar-width: 16.25rem; -$nga-sidebar-width-compact: 3.45rem; -$nga-sidebar-padding: 0; - -$nga-user-picture-background: $nga-background; \ No newline at end of file diff --git a/src/app/@theme/styles/pure/overrides/_nga-layout.scss b/src/app/@theme/styles/pure/overrides/_nga-layout.scss deleted file mode 100644 index 0d63db97..00000000 --- a/src/app/@theme/styles/pure/overrides/_nga-layout.scss +++ /dev/null @@ -1,27 +0,0 @@ -@mixin nga-layout-override($theme-name) { - $layout-border-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); - - /deep/ .layout { - a, i { - @include hover-focus-active { - color: $nga-color-secondary !important; - text-decoration: none; - } - } - - nga-layout-header > nav { - box-shadow: $layout-border-shadow; - } - - nga-sidebar { - z-index: 1; - box-shadow: $layout-border-shadow; - } - - nga-layout-footer > nav { - box-shadow: $layout-border-shadow; - border: none !important; - padding: 1.25rem; - } - } -} diff --git a/src/app/@theme/styles/pure/overrides/_nga-menu.scss b/src/app/@theme/styles/pure/overrides/_nga-menu.scss deleted file mode 100644 index f653cd03..00000000 --- a/src/app/@theme/styles/pure/overrides/_nga-menu.scss +++ /dev/null @@ -1,39 +0,0 @@ -@mixin nga-menu-override($theme-name) { - /deep/ nga-menu { - ul li { - transition: all 0.2s ease; - - &:first-child { - margin-top: 3rem; - } - - a, & > span.menu-group { - display: flex; - align-items: center; - padding: 0.375rem 0 0.375rem 1rem; - color: $nga-color-inverse; - - &.active { - color: $nga-color-inverse !important; - background: $nga-background; - font-weight: bold; - } - - i { - font-size: 2rem; - margin-right: 1.25rem; - - &:first-child { - display: flex; - justify-content: center; - } - } - } - - & > span.menu-group { - opacity: 0.8; - font-size: 1rem; - } - } - } -} diff --git a/src/app/@theme/styles/pure/overrides/all.scss b/src/app/@theme/styles/pure/overrides/all.scss deleted file mode 100644 index 47637813..00000000 --- a/src/app/@theme/styles/pure/overrides/all.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'nga-layout'; -@import 'nga-menu'; - -@mixin nga-theme-overrides($theme-name) { - @include nga-layout-override($theme-name); - @include nga-menu-override($theme-name); -} diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 681385b2..27c81ddf 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import 'style-loader!../@theme/styles/gorgeous/gorgeous.theme.scss'; -import 'style-loader!../@theme/styles/pure/pure.theme.scss'; +import 'style-loader!../@theme/styles/cosmic/cosmic.theme.scss'; +import 'style-loader!../@theme/styles/light/light.theme.scss'; @Component({ selector: 'ngx-pages', template: ` - + `, diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index f2f3a0a4..7486d228 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -22,7 +22,7 @@ const PAGES_COMPONENTS = [ @NgModule({ imports: [ - NgaThemeModule.forRoot({ name: 'gorgeous' }), + NgaThemeModule.forRoot({ name: 'cosmic' }), NgaSidebarModule.forRoot(), NgaMenuModule.forRoot({ items: menuItems }), PagesRoutingModule,