Skip to content

Commit 62801fa

Browse files
stbuistbui
committed
refactor(css): 组件theme样式移植core中处理
1 parent c5ce417 commit 62801fa

29 files changed

Lines changed: 242 additions & 109 deletions

‎docs/start.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,11 @@ npm install -g @angular/cli
4343

4444
- https://nodejs.org/en/docs/
4545
- https://github.com/angular/angular-cli/wiki
46+
47+
## Material Resources
48+
49+
- [Material Palette](https://www.materialpalette.com/)
50+
- [Material Design Colors](https://www.materialui.co/colors)
51+
- [Material Design Dark Color Palette](https://designguidelines.withgoogle.com/wearos/style/color.html)
52+
- [Material Colors OSX Desktop App](https://github.com/romannurik/MaterialColorsApp)
53+
- [official resource](https://material.io/design/)

‎src/app/component/chat-widget/chat-widget.component.scss‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
display: flex;
3434
flex-direction: column;
3535
box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
36-
background: #2196f3;
3736
}
3837

3938
.chat-box-hidden {
@@ -101,7 +100,7 @@
101100

102101
.chat-message-date {
103102
font-size: 11px;
104-
color: #8D898D;
103+
color: #8d898d;
105104
padding: 5px;
106105
}
107106

@@ -127,17 +126,17 @@
127126
}
128127

129128
.chat-message-received .chat-message-text {
130-
background: #B9D6F2;
129+
background: #b9d6f2;
131130
margin-left: 50px;
132131
border-bottom-left-radius: 0;
133132
}
134133

135134
.chat-message-received .chat-message-text:before {
136135
position: absolute;
137-
content: " ";
136+
content: ' ';
138137
left: -10px;
139138
bottom: 0;
140-
border-right: solid 10px #B9D6F2;
139+
border-right: solid 10px #b9d6f2;
141140
border-top: solid 10px transparent;
142141
z-index: 0;
143142
}
@@ -161,17 +160,17 @@
161160
}
162161

163162
.chat-message-sent .chat-message-text {
164-
background: #84DCCF;
163+
background: #84dccf;
165164
margin-right: 50px;
166165
border-bottom-right-radius: 0;
167166
}
168167

169168
.chat-message-sent .chat-message-text:after {
170169
position: absolute;
171-
content: " ";
170+
content: ' ';
172171
right: -10px;
173172
bottom: 0;
174-
border-left: solid 10px #84DCCF;
173+
border-left: solid 10px #84dccf;
175174
border-top: solid 10px transparent;
176175
z-index: 0;
177176
}
@@ -204,11 +203,11 @@
204203
}
205204

206205
.red .chat-button {
207-
background: #DD0031;
206+
background: #dd0031;
208207
}
209208

210209
.red .chat-box {
211-
background: #DD0031;
210+
background: #dd0031;
212211
}
213212

214213
@media (min-width: 576px) {

‎src/app/component/chat-widget/chat-widget.theme.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@mixin stbui-chat-widget-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
.chat-box {
9+
background-color: mat-color($primary);
10+
11+
&.mat-primary {
12+
background-color: mat-color($primary);
13+
}
14+
15+
&.mat-accent {
16+
background-color: mat-color($accent);
17+
}
18+
&.mat-warn {
19+
background-color: mat-color($warn);
20+
}
21+
}
22+
}

‎src/app/component/core/theming/_all-theme.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import '../../pagination/pagination.theme';
2+
@import '../../date-picker/date-picker.theme';
3+
@import '../../notification/notification.theme';
4+
@import '../../message/message.theme';
5+
@import '../../dialog/dialog.theme';
6+
@import '../../chat-widget/chat-widget.theme';
7+
@import '../../tag-select/tag-select.theme';
8+
@import '../../loading/loading.theme';
9+
10+
@mixin stbui-theme($theme) {
11+
@include stbui-pagination-theme($theme);
12+
@include stbui-date-picker-theme($theme);
13+
@include stbui-chat-widget-theme($theme);
14+
@include stbui-notification-theme($theme);
15+
@include stbui-tag-select-theme($theme);
16+
@include stbui-message-theme($theme);
17+
@include stbui-dialog-theme($theme);
18+
@include stbui-loading-theme($theme);
19+
}

‎src/app/component/core/theming/prebuilt/blue-grey-deep-orange.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '~@angular/material/theming';
2+
@import '../all-theme';
3+
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-blue-grey, 700);
7+
$accent: mat-palette($mat-deep-orange, 500, A100, A400);
8+
$warn: mat-palette($mat-red, 600);
9+
10+
$theme: mat-light-theme($primary, $accent, $warn);
11+
12+
@include angular-material-theme($theme);
13+
@include stbui-theme($theme);

‎src/app/component/core/theming/prebuilt/blue-orange.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '~@angular/material/theming';
2+
@import '../all-theme';
3+
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-blue, 700);
7+
$accent: mat-palette($mat-orange, 800, A100, A400);
8+
$warn: mat-palette($mat-red, 600);
9+
10+
$theme: mat-light-theme($primary, $accent, $warn);
11+
12+
@include angular-material-theme($theme);
13+
@include stbui-theme($theme);

‎src/app/component/core/theming/prebuilt/deeppurple-amber.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '~@angular/material/theming';
2+
@import '../all-theme';
3+
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-deep-purple);
7+
$accent: mat-palette($mat-amber, A200, A100, A400);
8+
$warn: mat-palette($mat-red, 600);
9+
10+
$theme: mat-light-theme($primary, $accent, $warn);
11+
12+
@include angular-material-theme($theme);
13+
@include stbui-theme($theme);

‎src/app/component/core/theming/prebuilt/indigo-pink.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '~@angular/material/theming';
2+
@import '../all-theme';
3+
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-indigo, 500);
7+
$accent: mat-palette($mat-pink, A200, A100, A400);
8+
$warn: mat-palette($mat-red, 600);
9+
10+
$theme: mat-light-theme($primary, $accent, $warn);
11+
12+
@include angular-material-theme($theme);
13+
@include stbui-theme($theme);

‎src/app/component/core/theming/prebuilt/orange-light-blue.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '~@angular/material/theming';
2+
@import '../all-theme';
3+
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-orange, 800);
7+
$accent: mat-palette($mat-light-blue, 600, A100, A400);
8+
$warn: mat-palette($mat-red, 600);
9+
10+
$theme: mat-light-theme($primary, $accent, $warn);
11+
12+
@include angular-material-theme($theme);
13+
@include stbui-theme($theme);

‎src/app/component/core/theming/prebuilt/pink-bluegrey.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '~@angular/material/theming';
2+
@import '../all-theme';
3+
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-pink, 700, 500, 900);
7+
$accent: mat-palette($mat-blue-grey, A200, A100, A400);
8+
$warn: mat-palette($mat-red, 600);
9+
10+
$theme: mat-dark-theme($primary, $accent, $warn);
11+
12+
@include angular-material-theme($theme);
13+
@include stbui-theme($theme);

0 commit comments

Comments
 (0)