From 91c780c25658e9f408622cfd2d86c31cbd1632d5 Mon Sep 17 00:00:00 2001 From: tibing Date: Wed, 26 Apr 2017 20:11:54 +0300 Subject: [PATCH] refactor(@theme): refactor styles structure --- .../base-header/base-header.component.scss | 5 + .../base-header/base-header.component.ts | 2 +- .../styles/gorgeous/gorgeous.theme.scss | 112 +----------------- .../gorgeous/nga-redefines/_nga-layout.scss | 72 +++++++++++ .../gorgeous/nga-redefines/_nga-menu.scss | 46 +++++++ .../gorgeous/nga-redefines/redefines.scss | 7 ++ .../pure/nga-redefines/_nga-layout.scss | 27 +++++ .../styles/pure/nga-redefines/_nga-menu.scss | 39 ++++++ .../styles/pure/nga-redefines/redefines.scss | 7 ++ src/app/@theme/styles/pure/pure.theme.scss | 62 +--------- src/app/pages/pages-menu.ts | 2 +- 11 files changed, 211 insertions(+), 170 deletions(-) create mode 100644 src/app/@theme/styles/gorgeous/nga-redefines/_nga-layout.scss create mode 100644 src/app/@theme/styles/gorgeous/nga-redefines/_nga-menu.scss create mode 100644 src/app/@theme/styles/gorgeous/nga-redefines/redefines.scss create mode 100644 src/app/@theme/styles/pure/nga-redefines/_nga-layout.scss create mode 100644 src/app/@theme/styles/pure/nga-redefines/_nga-menu.scss create mode 100644 src/app/@theme/styles/pure/nga-redefines/redefines.scss diff --git a/src/app/@theme/layouts/base-header/base-header.component.scss b/src/app/@theme/layouts/base-header/base-header.component.scss index 794f96a9..74f197a6 100644 --- a/src/app/@theme/layouts/base-header/base-header.component.scss +++ b/src/app/@theme/layouts/base-header/base-header.component.scss @@ -45,9 +45,14 @@ .logo { font-size: 1.7rem; + font-weight: bold; text-decoration: none; transition: all 0.2s ease; cursor: pointer; + + a { + font-weight: normal; + } } } diff --git a/src/app/@theme/layouts/base-header/base-header.component.ts b/src/app/@theme/layouts/base-header/base-header.component.ts index 6c1d5e62..ad30935a 100644 --- a/src/app/@theme/layouts/base-header/base-header.component.ts +++ b/src/app/@theme/layouts/base-header/base-header.component.ts @@ -9,7 +9,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service'; template: `
- +
diff --git a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss b/src/app/@theme/styles/gorgeous/gorgeous.theme.scss index 6244d60c..33ecb81c 100644 --- a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss +++ b/src/app/@theme/styles/gorgeous/gorgeous.theme.scss @@ -1,116 +1,10 @@ @import '../components'; @import 'gorgeous.variables'; + @import '~@nga/theme/styles/themes/nga.theme.default'; +@import 'nga-redefines/redefines'; @include nga-theme('gorgeous') { - $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68); - - * { - transition: all 0.1s; - } - - 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; - - a { - color: $nga-color-inverse !important; - - &:hover { - color: $nga-color-secondary !important; - } - } - } - - .right i { - color: #7d85b2; - - &:hover { - color: $nga-color-secondary; - } - } - } - - nga-sidebar { - z-index: 1; - background: transparent; - - .scrollable { - box-shadow: $layout-shadow; - margin-top: $nga-layout-padding; - border-top-right-radius: $nga-radius; - } - - 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; - } - } - - a { - display: flex; - align-items: center; - - transition: all 0.2s ease; - 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; - } - } - } - } - } - - 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; - - a { - color: #7d85b2 !important; - - &:hover { - color: $nga-color-secondary !important; - } - } - } - } + @include nga-theme-redefines(); @include custom-components-theme(); } \ No newline at end of file diff --git a/src/app/@theme/styles/gorgeous/nga-redefines/_nga-layout.scss b/src/app/@theme/styles/gorgeous/nga-redefines/_nga-layout.scss new file mode 100644 index 00000000..799e6c3a --- /dev/null +++ b/src/app/@theme/styles/gorgeous/nga-redefines/_nga-layout.scss @@ -0,0 +1,72 @@ +@mixin nga-layout-redefines { + $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68); + + /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; + + a { + color: $nga-color-inverse !important; + + &:hover { + color: $nga-color-secondary !important; + } + } + } + + .right i { + color: #7d85b2; + + &:hover { + color: $nga-color-secondary; + } + } + } + + nga-sidebar { + z-index: 1; + background: transparent; + + .scrollable { + 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; + + a { + color: #7d85b2 !important; + + &:hover { + color: $nga-color-secondary !important; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/@theme/styles/gorgeous/nga-redefines/_nga-menu.scss b/src/app/@theme/styles/gorgeous/nga-redefines/_nga-menu.scss new file mode 100644 index 00000000..34167da8 --- /dev/null +++ b/src/app/@theme/styles/gorgeous/nga-redefines/_nga-menu.scss @@ -0,0 +1,46 @@ +@mixin nga-menu-redefines { + /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; + } + } + } +} \ No newline at end of file diff --git a/src/app/@theme/styles/gorgeous/nga-redefines/redefines.scss b/src/app/@theme/styles/gorgeous/nga-redefines/redefines.scss new file mode 100644 index 00000000..750f48ec --- /dev/null +++ b/src/app/@theme/styles/gorgeous/nga-redefines/redefines.scss @@ -0,0 +1,7 @@ +@import 'nga-layout'; +@import 'nga-menu'; + +@mixin nga-theme-redefines { + @include nga-layout-redefines(); + @include nga-menu-redefines(); +} \ No newline at end of file diff --git a/src/app/@theme/styles/pure/nga-redefines/_nga-layout.scss b/src/app/@theme/styles/pure/nga-redefines/_nga-layout.scss new file mode 100644 index 00000000..ca562061 --- /dev/null +++ b/src/app/@theme/styles/pure/nga-redefines/_nga-layout.scss @@ -0,0 +1,27 @@ +@mixin nga-layout-redefines { + $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; + } + } +} \ No newline at end of file diff --git a/src/app/@theme/styles/pure/nga-redefines/_nga-menu.scss b/src/app/@theme/styles/pure/nga-redefines/_nga-menu.scss new file mode 100644 index 00000000..d62ac88f --- /dev/null +++ b/src/app/@theme/styles/pure/nga-redefines/_nga-menu.scss @@ -0,0 +1,39 @@ +@mixin nga-menu-redefines { + /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; + } + } + } +} \ No newline at end of file diff --git a/src/app/@theme/styles/pure/nga-redefines/redefines.scss b/src/app/@theme/styles/pure/nga-redefines/redefines.scss new file mode 100644 index 00000000..750f48ec --- /dev/null +++ b/src/app/@theme/styles/pure/nga-redefines/redefines.scss @@ -0,0 +1,7 @@ +@import 'nga-layout'; +@import 'nga-menu'; + +@mixin nga-theme-redefines { + @include nga-layout-redefines(); + @include nga-menu-redefines(); +} \ No newline at end of file diff --git a/src/app/@theme/styles/pure/pure.theme.scss b/src/app/@theme/styles/pure/pure.theme.scss index b6f39bd4..134db950 100644 --- a/src/app/@theme/styles/pure/pure.theme.scss +++ b/src/app/@theme/styles/pure/pure.theme.scss @@ -1,66 +1,10 @@ -@import '../components'; @import 'pure.variables'; +@import '../components'; +@import 'nga-redefines/redefines'; @import '~@nga/theme/styles/themes/nga.theme.default'; @include nga-theme('pure') { - $layout-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); - - * { - transition: all 0.1s; - } - - a, i { - @include hover-focus-active { - color: $nga-color-secondary !important; - text-decoration: none; - } - } - - nga-layout-header > nav { - box-shadow: $layout-shadow; - } - - nga-sidebar { - z-index: 1; - box-shadow: $layout-shadow; - - ul li { - &:first-child { - margin-top: 3rem; - } - - a { - display: flex; - align-items: center; - - transition: all 0.2s ease; - 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; - } - } - } - } - } - - nga-layout-footer > nav { - box-shadow: $layout-shadow; - border: none !important; - padding: 1.25rem; - } + @include nga-theme-redefines(); @include custom-components-theme(); } diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index bed9f41f..b78ad6cc 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -10,7 +10,7 @@ export const menuItems: List = List([ home: true, }, { - title: 'Features', + title: 'FEATURES', group: true, }, {