From 62801fae9cfd08b64d57624ae66671fd4996758e Mon Sep 17 00:00:00 2001 From: stbui Date: Sun, 5 Aug 2018 20:33:48 +0800 Subject: [PATCH] =?UTF-8?q?refactor(css):=20=E7=BB=84=E4=BB=B6theme?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=A7=BB=E6=A4=8Dcore=E4=B8=AD=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/start.md | 8 +++++ .../chat-widget/chat-widget.component.scss | 19 +++++----- .../chat-widget/chat-widget.theme.scss | 22 ++++++++++++ .../component/core/theming/_all-theme.scss | 19 ++++++++++ .../prebuilt/blue-grey-deep-orange.scss | 13 +++++++ .../core/theming/prebuilt/blue-orange.scss | 13 +++++++ .../theming/prebuilt/deeppurple-amber.scss | 13 +++++++ .../core/theming/prebuilt/indigo-pink.scss | 13 +++++++ .../theming/prebuilt/orange-light-blue.scss | 13 +++++++ .../core/theming/prebuilt/pink-bluegrey.scss | 13 +++++++ .../core/theming/prebuilt/purple-green.scss | 13 +++++++ .../core/theming/prebuilt/teal-orange.scss | 13 +++++++ .../date-picker/date-picker.theme.scss | 2 +- src/app/component/dialog/dialog.theme.scss | 2 +- .../component/loading/loading.component.scss | 1 - src/app/component/loading/loading.theme.scss | 21 +++++++++++ src/app/component/message/message.theme.scss | 2 +- .../notification/notification.component.html | 9 ++--- .../notification/notification.theme.scss | 24 ++++++------- src/app/component/notification/public-api.ts | 2 +- .../pagination/pagination.theme.scss | 2 +- .../tag-select/tag-select.component.scss | 10 ------ .../tag-select/tag-select.theme.scss | 18 +++++++--- src/scss/_app-theme.scss | 18 ---------- src/scss/{_color.scss => _theming.scss} | 3 +- src/scss/index.scss | 11 +++--- src/scss/text.scss | 19 ---------- .../variables/{_theme.scss => _palette.scss} | 0 src/styles.scss | 35 ++++++++++++------- 29 files changed, 242 insertions(+), 109 deletions(-) create mode 100644 src/app/component/core/theming/_all-theme.scss create mode 100644 src/app/component/core/theming/prebuilt/blue-grey-deep-orange.scss create mode 100644 src/app/component/core/theming/prebuilt/blue-orange.scss create mode 100644 src/app/component/core/theming/prebuilt/deeppurple-amber.scss create mode 100644 src/app/component/core/theming/prebuilt/indigo-pink.scss create mode 100644 src/app/component/core/theming/prebuilt/orange-light-blue.scss create mode 100644 src/app/component/core/theming/prebuilt/pink-bluegrey.scss create mode 100644 src/app/component/core/theming/prebuilt/purple-green.scss create mode 100644 src/app/component/core/theming/prebuilt/teal-orange.scss create mode 100644 src/app/component/loading/loading.theme.scss delete mode 100644 src/scss/_app-theme.scss rename src/scss/{_color.scss => _theming.scss} (91%) rename src/scss/variables/{_theme.scss => _palette.scss} (100%) diff --git a/docs/start.md b/docs/start.md index 35fd778..fe15e21 100644 --- a/docs/start.md +++ b/docs/start.md @@ -43,3 +43,11 @@ npm install -g @angular/cli - https://nodejs.org/en/docs/ - https://github.com/angular/angular-cli/wiki + +## Material Resources + +- [Material Palette](https://www.materialpalette.com/) +- [Material Design Colors](https://www.materialui.co/colors) +- [Material Design Dark Color Palette](https://designguidelines.withgoogle.com/wearos/style/color.html) +- [Material Colors OSX Desktop App](https://github.com/romannurik/MaterialColorsApp) +- [official resource](https://material.io/design/) \ No newline at end of file diff --git a/src/app/component/chat-widget/chat-widget.component.scss b/src/app/component/chat-widget/chat-widget.component.scss index 8f09e10..c655b88 100644 --- a/src/app/component/chat-widget/chat-widget.component.scss +++ b/src/app/component/chat-widget/chat-widget.component.scss @@ -33,7 +33,6 @@ display: flex; flex-direction: column; box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); - background: #2196f3; } .chat-box-hidden { @@ -101,7 +100,7 @@ .chat-message-date { font-size: 11px; - color: #8D898D; + color: #8d898d; padding: 5px; } @@ -127,17 +126,17 @@ } .chat-message-received .chat-message-text { - background: #B9D6F2; + background: #b9d6f2; margin-left: 50px; border-bottom-left-radius: 0; } .chat-message-received .chat-message-text:before { position: absolute; - content: " "; + content: ' '; left: -10px; bottom: 0; - border-right: solid 10px #B9D6F2; + border-right: solid 10px #b9d6f2; border-top: solid 10px transparent; z-index: 0; } @@ -161,17 +160,17 @@ } .chat-message-sent .chat-message-text { - background: #84DCCF; + background: #84dccf; margin-right: 50px; border-bottom-right-radius: 0; } .chat-message-sent .chat-message-text:after { position: absolute; - content: " "; + content: ' '; right: -10px; bottom: 0; - border-left: solid 10px #84DCCF; + border-left: solid 10px #84dccf; border-top: solid 10px transparent; z-index: 0; } @@ -204,11 +203,11 @@ } .red .chat-button { - background: #DD0031; + background: #dd0031; } .red .chat-box { - background: #DD0031; + background: #dd0031; } @media (min-width: 576px) { diff --git a/src/app/component/chat-widget/chat-widget.theme.scss b/src/app/component/chat-widget/chat-widget.theme.scss index e69de29..b730f54 100644 --- a/src/app/component/chat-widget/chat-widget.theme.scss +++ b/src/app/component/chat-widget/chat-widget.theme.scss @@ -0,0 +1,22 @@ +@mixin stbui-chat-widget-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .chat-box { + background-color: mat-color($primary); + + &.mat-primary { + background-color: mat-color($primary); + } + + &.mat-accent { + background-color: mat-color($accent); + } + &.mat-warn { + background-color: mat-color($warn); + } + } +} diff --git a/src/app/component/core/theming/_all-theme.scss b/src/app/component/core/theming/_all-theme.scss new file mode 100644 index 0000000..d192b85 --- /dev/null +++ b/src/app/component/core/theming/_all-theme.scss @@ -0,0 +1,19 @@ +@import '../../pagination/pagination.theme'; +@import '../../date-picker/date-picker.theme'; +@import '../../notification/notification.theme'; +@import '../../message/message.theme'; +@import '../../dialog/dialog.theme'; +@import '../../chat-widget/chat-widget.theme'; +@import '../../tag-select/tag-select.theme'; +@import '../../loading/loading.theme'; + +@mixin stbui-theme($theme) { + @include stbui-pagination-theme($theme); + @include stbui-date-picker-theme($theme); + @include stbui-chat-widget-theme($theme); + @include stbui-notification-theme($theme); + @include stbui-tag-select-theme($theme); + @include stbui-message-theme($theme); + @include stbui-dialog-theme($theme); + @include stbui-loading-theme($theme); +} diff --git a/src/app/component/core/theming/prebuilt/blue-grey-deep-orange.scss b/src/app/component/core/theming/prebuilt/blue-grey-deep-orange.scss new file mode 100644 index 0000000..98c764f --- /dev/null +++ b/src/app/component/core/theming/prebuilt/blue-grey-deep-orange.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-blue-grey, 700); +$accent: mat-palette($mat-deep-orange, 500, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/blue-orange.scss b/src/app/component/core/theming/prebuilt/blue-orange.scss new file mode 100644 index 0000000..fbcd113 --- /dev/null +++ b/src/app/component/core/theming/prebuilt/blue-orange.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-blue, 700); +$accent: mat-palette($mat-orange, 800, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/deeppurple-amber.scss b/src/app/component/core/theming/prebuilt/deeppurple-amber.scss new file mode 100644 index 0000000..98b14ae --- /dev/null +++ b/src/app/component/core/theming/prebuilt/deeppurple-amber.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-deep-purple); +$accent: mat-palette($mat-amber, A200, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/indigo-pink.scss b/src/app/component/core/theming/prebuilt/indigo-pink.scss new file mode 100644 index 0000000..2a6d30a --- /dev/null +++ b/src/app/component/core/theming/prebuilt/indigo-pink.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-indigo, 500); +$accent: mat-palette($mat-pink, A200, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/orange-light-blue.scss b/src/app/component/core/theming/prebuilt/orange-light-blue.scss new file mode 100644 index 0000000..c4f08e2 --- /dev/null +++ b/src/app/component/core/theming/prebuilt/orange-light-blue.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-orange, 800); +$accent: mat-palette($mat-light-blue, 600, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/pink-bluegrey.scss b/src/app/component/core/theming/prebuilt/pink-bluegrey.scss new file mode 100644 index 0000000..6de37fa --- /dev/null +++ b/src/app/component/core/theming/prebuilt/pink-bluegrey.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-pink, 700, 500, 900); +$accent: mat-palette($mat-blue-grey, A200, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-dark-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/purple-green.scss b/src/app/component/core/theming/prebuilt/purple-green.scss new file mode 100644 index 0000000..dcad0b9 --- /dev/null +++ b/src/app/component/core/theming/prebuilt/purple-green.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-purple, 700, 500, 800); +$accent: mat-palette($mat-green, A200, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-dark-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/core/theming/prebuilt/teal-orange.scss b/src/app/component/core/theming/prebuilt/teal-orange.scss new file mode 100644 index 0000000..d814f9c --- /dev/null +++ b/src/app/component/core/theming/prebuilt/teal-orange.scss @@ -0,0 +1,13 @@ +@import '~@angular/material/theming'; +@import '../all-theme'; + +@include mat-core(); + +$primary: mat-palette($mat-teal, 700); +$accent: mat-palette($mat-orange, 800, A100, A400); +$warn: mat-palette($mat-red, 600); + +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); +@include stbui-theme($theme); diff --git a/src/app/component/date-picker/date-picker.theme.scss b/src/app/component/date-picker/date-picker.theme.scss index 23839b5..857ab4c 100644 --- a/src/app/component/date-picker/date-picker.theme.scss +++ b/src/app/component/date-picker/date-picker.theme.scss @@ -1,4 +1,4 @@ -@mixin date-picker-theme($theme) { +@mixin stbui-date-picker-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); diff --git a/src/app/component/dialog/dialog.theme.scss b/src/app/component/dialog/dialog.theme.scss index ce1c215..9191e01 100644 --- a/src/app/component/dialog/dialog.theme.scss +++ b/src/app/component/dialog/dialog.theme.scss @@ -1,4 +1,4 @@ -@mixin dialog-theme($theme) { +@mixin stbui-dialog-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); diff --git a/src/app/component/loading/loading.component.scss b/src/app/component/loading/loading.component.scss index 70666cb..73337e8 100644 --- a/src/app/component/loading/loading.component.scss +++ b/src/app/component/loading/loading.component.scss @@ -18,7 +18,6 @@ height: 96px; line-height: 96px; margin: 10px auto; - background: #3F51B5; text-align: center; border-radius: 2px; box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .22) diff --git a/src/app/component/loading/loading.theme.scss b/src/app/component/loading/loading.theme.scss new file mode 100644 index 0000000..2f3b46a --- /dev/null +++ b/src/app/component/loading/loading.theme.scss @@ -0,0 +1,21 @@ +@mixin stbui-loading-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .logo { + background-color: mat-color($primary); + + &.mat-primary { + background-color: mat-color($primary); + } + &.mat-accent { + background-color: mat-color($accent); + } + &.mat-warn { + background-color: mat-color($warn); + } + } +} diff --git a/src/app/component/message/message.theme.scss b/src/app/component/message/message.theme.scss index 0ab3aa7..70be809 100644 --- a/src/app/component/message/message.theme.scss +++ b/src/app/component/message/message.theme.scss @@ -1,4 +1,4 @@ -@mixin message-theme($theme) { +@mixin stbui-message-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); diff --git a/src/app/component/notification/notification.component.html b/src/app/component/notification/notification.component.html index f584c55..019d174 100644 --- a/src/app/component/notification/notification.component.html +++ b/src/app/component/notification/notification.component.html @@ -1,9 +1,4 @@ - + {{data.title}} @@ -12,4 +7,4 @@ - + \ No newline at end of file diff --git a/src/app/component/notification/notification.theme.scss b/src/app/component/notification/notification.theme.scss index 0bee211..0fe22fb 100644 --- a/src/app/component/notification/notification.theme.scss +++ b/src/app/component/notification/notification.theme.scss @@ -1,4 +1,4 @@ -@mixin notification-theme($theme) { +@mixin stbui-notification-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); @@ -7,17 +7,15 @@ .notification { background-color: mat-color($primary); - } - .notification-info { - background-color: mat-color($primary); - } - .notification-primary { - background-color: mat-color($primary); - } - .notification-success { - background-color: mat-color($accent); - } - .notification-warn { - background-color: mat-color($warn); + + &.mat-primary { + background-color: mat-color($primary); + } + &.mat-accent { + background-color: mat-color($accent); + } + &.mat-warn { + background-color: mat-color($warn); + } } } diff --git a/src/app/component/notification/public-api.ts b/src/app/component/notification/public-api.ts index e6e811f..10908a7 100644 --- a/src/app/component/notification/public-api.ts +++ b/src/app/component/notification/public-api.ts @@ -9,4 +9,4 @@ export * from './notification-container'; export * from './notification.component'; export * from './notification.config'; export * from './notification.ref'; -export * from './notification.animation'; +export * from './notification.animation'; diff --git a/src/app/component/pagination/pagination.theme.scss b/src/app/component/pagination/pagination.theme.scss index 43267a2..2e1a742 100644 --- a/src/app/component/pagination/pagination.theme.scss +++ b/src/app/component/pagination/pagination.theme.scss @@ -1,4 +1,4 @@ -@mixin pagination-theme($theme) { +@mixin stbui-pagination-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); diff --git a/src/app/component/tag-select/tag-select.component.scss b/src/app/component/tag-select/tag-select.component.scss index 69252d0..2326c65 100644 --- a/src/app/component/tag-select/tag-select.component.scss +++ b/src/app/component/tag-select/tag-select.component.scss @@ -57,13 +57,3 @@ } } } - -// theme -.tag-select { - &-item { - > a.active { - background-color: #3f51b5; - color: white; - } - } -} diff --git a/src/app/component/tag-select/tag-select.theme.scss b/src/app/component/tag-select/tag-select.theme.scss index fe037e5..b546b43 100644 --- a/src/app/component/tag-select/tag-select.theme.scss +++ b/src/app/component/tag-select/tag-select.theme.scss @@ -1,8 +1,16 @@ -.tag-select { - &-item { - > a.active { - background-color: #3f51b5; - color: white; +@mixin stbui-tag-select-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .tag-select { + &-item { + > a.active { + background-color: mat-color($primary); + color: #fff; + } } } } diff --git a/src/scss/_app-theme.scss b/src/scss/_app-theme.scss deleted file mode 100644 index 370b912..0000000 --- a/src/scss/_app-theme.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '~@angular/material/theming'; -@import '../app/component/pagination/pagination.theme'; -@import '../app/component/date-picker/date-picker.theme'; -@import '../app/component/notification/notification.theme'; -@import '../app/component/message/message.theme'; - -@mixin stbui-app-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - $background: map_get($theme, background); - $foreground: map_get($theme, foreground); - - @include pagination-theme($theme); - @include date-picker-theme($theme); - @include notification-theme($theme); - @include message-theme($theme); -} diff --git a/src/scss/_color.scss b/src/scss/_theming.scss similarity index 91% rename from src/scss/_color.scss rename to src/scss/_theming.scss index 85bac51..68a19e3 100644 --- a/src/scss/_color.scss +++ b/src/scss/_theming.scss @@ -1,6 +1,7 @@ +@import './variables/palette'; + @mixin stbui-theme-color() { @each $name, $color in $stbui-theme-colors { - .stbui-background-#{$name} { color: mat-color($color, default-contrast) !important; background-color: mat-color($color, default) !important; diff --git a/src/scss/index.scss b/src/scss/index.scss index a30b27b..d088b32 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,7 +1,4 @@ -@import "variables/theme"; - -@import "text"; -@import "box"; -@import "button"; -@import "table"; -@import "color"; +@import 'text'; +@import 'box'; +@import 'button'; +@import 'table'; diff --git a/src/scss/text.scss b/src/scss/text.scss index 0a9329a..4276cf5 100644 --- a/src/scss/text.scss +++ b/src/scss/text.scss @@ -15,22 +15,3 @@ .text-white { color: #fff; } - -.primary-text-color { - -} -.secondary-text-color { - -} -.primary-color-dark { - -} -.primary-color { - -} -.primary-color-light { - -} -.accent-color { - -} diff --git a/src/scss/variables/_theme.scss b/src/scss/variables/_palette.scss similarity index 100% rename from src/scss/variables/_theme.scss rename to src/scss/variables/_palette.scss diff --git a/src/styles.scss b/src/styles.scss index a50ba3f..a9bdec9 100755 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,5 @@ -@import '~@angular/material/_theming'; +@import '~@angular/material/theming'; +@import './app/component/core/theming/all-theme'; // ngx-datatable @import '~@swimlane/ngx-datatable/release/index.css'; @@ -7,21 +8,20 @@ // ngx-dnd @import '~@swimlane/ngx-dnd/release/index.css'; - @include mat-core(); $primary: mat-palette($mat-indigo); $accent: mat-palette($mat-pink, A200, A100, A400); $warn: mat-palette($mat-red); $theme: mat-light-theme($primary, $accent, $warn); -@import "scss/index"; -@import "scss/app-theme"; +@import './scss/index'; +@import './scss/theming'; @include angular-material-theme($theme); -@include stbui-app-theme($theme) +@include stbui-theme($theme); @include stbui-theme-color(); - -html, body { +html, +body { min-height: 100%; height: 100%; line-height: normal; @@ -39,16 +39,25 @@ mat-sidenav-container { height: 100%; } -.mat-sidenav-content::-webkit-scrollbar, body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .main-container::-webkit-scrollbar { +.mat-sidenav-content::-webkit-scrollbar, +body::-webkit-scrollbar, +mat-sidenav.sidenav::-webkit-scrollbar, +.main-container::-webkit-scrollbar { height: 6px; - width: 6px + width: 6px; } -.mat-sidenav-content::-webkit-scrollbar-trac, body::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-trac, .main-container::-webkit-scrollbar-trac { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) +.mat-sidenav-content::-webkit-scrollbar-trac, +body::-webkit-scrollbar-track, +mat-sidenav.sidenav::-webkit-scrollbar-trac, +.main-container::-webkit-scrollbar-trac { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } -.mat-sidenav-content::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .main-container::-webkit-scrollbar-thumb { +.mat-sidenav-content::-webkit-scrollbar-thumb, +body::-webkit-scrollbar-thumb, +mat-sidenav.sidenav::-webkit-scrollbar-thumb, +.main-container::-webkit-scrollbar-thumb { background-color: #6e6e6e; - outline: 1px solid #333 + outline: 1px solid #333; }