Skip to content

Commit c01f6c1

Browse files
shoudaosshoudaos
committed
added themes' colors and variables
1 parent 6f1ccda commit c01f6c1

File tree

15 files changed

+88
-51
lines changed

15 files changed

+88
-51
lines changed

‎src/app/layout/chat-sidebar/chat-message/chat-message.template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ <h6 class="title">
55
{{conversation.name}}
66
</a>
77
</h6>
8-
<ul class="message-list bg-gray-light">
8+
<ul class="message-list">
99
<li *ngFor="let message of conversation.messages | SearchPipe : searchMessage" class="message" [ngClass]="{'from-me': message.fromMe}">
1010
<span class="thumb-sm">
1111
<img class="rounded-circle" src="{{message.fromMe ? 'assets/img/avatar.png' : conversation.image}}" alt="...">

‎src/app/layout/navbar/navbar.template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
consists of three components:
6363
notifications, messages, progress. leave or add what's important for you.
6464
uses Sing's ajax-load plugin for async content loading. See #load-notifications-btn -->
65-
<app-notifications *dropdownMenu class="dropdown-menu dropdown-menu-right animated animated-last ladeInUp"></app-notifications>
65+
<app-notifications *dropdownMenu class="dropdown-menu dropdown-menu-right animated animated-last fadeInUp"></app-notifications>
6666
</li>
6767
<li class="nav-item dropdown navbar-settings" dropdown placement="bottom right">
6868
<a href="#" class="nav-link dropdown-toggle" dropdownToggle>

‎src/app/pages/ecommerce/product-detail/components/banner/banner.style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
overflow: hidden;
66

77
@include media-breakpoint-up(md) {
8-
box-shadow: $widget-shadow;
8+
box-shadow: var(--widget-shadow);
99
border-radius: $border-radius;
1010
margin-top: $content-padding;
1111
margin-bottom: $content-padding * 2;

‎src/app/pages/ecommerce/product-grid/product-card.style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
background-size: cover;
77
background-position: center;
88
position: relative;
9-
box-shadow: $widget-shadow;
9+
box-shadow: var(--widget-shadow);
1010
border-radius: $border-radius;
1111

1212
@include media-breakpoint-down(sm) {

‎src/app/pages/extra/calendar/calendar.style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ a.fc-event{
5151
border-radius: $border-radius;
5252
background-color: $white;
5353
border: 1px solid #ccc;
54-
box-shadow: $widget-shadow;
54+
box-shadow: var(--widget-shadow);
5555
}
5656
}
5757

‎src/app/pages/extra/search-results/search-results.style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.search-result-item{
2323
padding: 20px;
2424
background-color: $white;
25-
box-shadow: $widget-shadow;
25+
box-shadow: var(--widget-shadow);
2626
border-radius: $border-radius;
2727
@include clearfix();
2828

‎src/app/pages/extra/time-line/time-line.style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
border-radius: $border-radius;
134134
padding: 20px 20px 0;
135135
position: relative;
136-
box-shadow: $widget-shadow;
136+
box-shadow: var(--widget-shadow);
137137

138138
.timeline & {
139139
float: right;
@@ -228,7 +228,7 @@
228228
line-height: 37px;
229229
margin-left: -25px;
230230
background-color: $white;
231-
box-shadow: $widget-shadow;
231+
box-shadow: var(--widget-shadow);
232232
border: 7px solid $white;
233233
border-radius: 50%;
234234
text-align: center;

‎src/app/pages/profile/profile.style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@
182182
.activities &{
183183
margin-top: $spacer;
184184
width: 100%;
185-
box-shadow: $widget-shadow;
185+
box-shadow: var(--widget-shadow);
186186
}
187187
}
188188

‎src/app/styles/_base.scss

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ app, .app {
1414
bottom: 0;
1515
width: $sidebar-width;
1616
border-right: $sidebar-border;
17-
background-color: $sidebar-bg-color;
18-
color: $sidebar-color;
17+
background-color: var(--sidebar-bg-color);
18+
color: var(--sidebar-color);
1919

2020
.slimScrollBar{
2121
@include border-radius(0 !important);
@@ -68,7 +68,8 @@ app, .app {
6868
z-index: 1;
6969
height: $navbar-height;
7070
font-size: 13px;
71-
padding: 7px 10px 0;
71+
padding: 0;
72+
box-shadow: var(--navbar-shadow);
7273

7374
.navbar-nav .la {
7475
font-size: 1.42rem;
@@ -149,7 +150,7 @@ app, .app {
149150
transition: width $sidebar-transition-time ease-in-out;
150151

151152
a {
152-
color: $gray-800;
153+
color: var(--logo-color);
153154
padding: 0 5px;
154155
text-decoration: none;
155156
white-space: nowrap;
@@ -174,7 +175,7 @@ app, .app {
174175

175176
li a{
176177
display: block;
177-
color: $sidebar-color;
178+
color: var(--sidebar-color);
178179
text-decoration: none;
179180

180181
.toggle{
@@ -212,7 +213,7 @@ app, .app {
212213
line-height: 35px;
213214

214215
&:hover{
215-
background-color: $sidebar-item-hover-bg-color;
216+
background-color: var(--sidebar-item-hover-bg-color);;
216217
}
217218

218219
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px){
@@ -236,7 +237,6 @@ app, .app {
236237

237238
.fa, .glyphicon{
238239
font-size: 16px;
239-
color: rgba($sidebar-color, .7);
240240
}
241241

242242
.fa-database {
@@ -256,7 +256,7 @@ app, .app {
256256
}
257257

258258
> .open > a{
259-
background-color: lighten($sidebar-item-hover-bg-color, 2%);
259+
background-color: var(--sidebar-item-hover-bg-color);
260260
}
261261

262262
> li:last-child > a{
@@ -265,14 +265,18 @@ app, .app {
265265

266266
> .active > a{
267267
color: $sidebar-item-active-color;
268-
background-color: $sidebar-bg-color;
268+
background-color: var(--sidebar-bg-color);
269+
270+
&:hover {
271+
color: $sidebar-item-active-color;
272+
}
269273

270274
.icon{
271275
border-radius: 50%;
272276
background-color: $sidebar-item-active-color;
273277

274278
.fa, .glyphicon, .fi{
275-
color: $sidebar-bg-color;
279+
color: var(--sidebar-bg-color);
276280
}
277281
}
278282
}
@@ -284,7 +288,7 @@ app, .app {
284288
> li ul{
285289
padding: 1rem;
286290
font-size: 13px;
287-
background-color: $sidebar-action-bg;
291+
background-color: var(--sidebar-action-bg);
288292
list-style: none;
289293

290294
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px){
@@ -333,13 +337,13 @@ app, .app {
333337
margin: 35px 0 5px $sidebar-padding-horizontal;
334338
font-size: 14px;
335339
text-transform: uppercase;
336-
color: darken(color-yiq($sidebar-bg-color), 13%);
340+
color: var(--sidebar-nav-title-color);
337341

338342
opacity: 1;
339343
@include transition(opacity $sidebar-transition-time ease-in-out);
340344

341345
.action-link{
342-
color: $sidebar-color;
346+
color: var(--sidebar-color);
343347
float: right;
344348
margin-right: $sidebar-padding-horizontal + $sidebar-slim-scroll-width;
345349
margin-top: -1px;
@@ -477,12 +481,12 @@ app, .app {
477481
font-size: 16px;
478482
text-shadow: none;
479483
opacity: 1;
480-
color: $sidebar-color;
484+
color: var(--sidebar-color);
481485
}
482486
}
483487

484488
.progress{
485-
background-color: lighten($sidebar-bg-color, 10%);
489+
background-color: var(--sidebar-progress-bg-color);
486490
}
487491
}
488492

@@ -492,7 +496,7 @@ app, .app {
492496
bottom: 0;
493497
right: -$chat-sidebar-width;
494498
width: $chat-sidebar-width;
495-
background-color: $sidebar-bg-color;
499+
background-color: var(--chat-sidebar-bg-color);
496500
@include transition(right $sidebar-transition-time ease-in-out);
497501
}
498502

@@ -525,15 +529,15 @@ app, .app {
525529
top: 0;
526530
padding: 1rem;
527531
z-index: 3;
528-
background-color: $sidebar-bg-color;
532+
background-color: var(--chat-sidebar-bg-color);
529533

530534
.form-control {
531535
padding: 0.6rem 0.85rem;
532536
}
533537
}
534538

535539
.chat-sidebar-content{
536-
color: $sidebar-color;
540+
color: var(--sidebar-color);
537541
}
538542

539543

@@ -565,7 +569,7 @@ app, .app {
565569
display: flex;
566570
flex-direction: column;
567571
right: -100%;
568-
background-color: $sidebar-bg-color;
572+
background-color: var(--chat-sidebar-bg-color);
569573

570574
@include transition(right .2s ease-in-out);
571575

@@ -579,8 +583,6 @@ app, .app {
579583
> a{
580584
display: block;
581585
padding: $padding-large-vertical $padding-large-horizontal;
582-
background-color: rgba(255,255,255, .1);
583-
color: $gray-200;
584586
}
585587
}
586588

@@ -675,13 +677,15 @@ app, .app {
675677
align-items: center;
676678

677679
&:hover {
678-
background-color: $gray-100;
680+
background-color: var(--sidebar-action-bg);
679681
}
680682

681683
&.active{
684+
background: rgba($white, 0.1);
685+
682686
&:focus,
683687
&:hover{
684-
background-color: $gray-100;
688+
background-color: var(--sidebar-action-bg);
685689
}
686690

687691
.badge{
@@ -698,7 +702,7 @@ app, .app {
698702

699703
.thumb .status,
700704
.thumb-sm .status{
701-
border-color: $sidebar-bg-color;
705+
border-color: var(--chat-sidebar-bg-color);
702706
}
703707

704708
.message-preview{
@@ -724,7 +728,7 @@ app, .app {
724728

725729
.chat-notification{
726730
position: absolute;
727-
right: 25px;
731+
right: 15px;
728732
top: 45px;
729733
z-index: 20;
730734
margin-top: 3px;
@@ -773,8 +777,8 @@ app, .app {
773777

774778
.chat-notification-sing{
775779
position: absolute;
776-
top: 16px;
777-
left: 10px;
780+
top: 19px;
781+
right: 14px;
778782
display: inline-block;
779783
width: 8px;
780784
height: 8px;
@@ -833,7 +837,7 @@ app, .app {
833837
padding: $widget-padding-vertical $widget-padding-horizontal;
834838
background: $widget-bg-color;
835839
border-radius: $widget-border-radius;
836-
box-shadow: $widget-shadow;
840+
box-shadow: var(--widget-shadow);
837841

838842
> header{
839843
margin: (-$widget-padding-vertical) (-$widget-padding-horizontal);

‎src/app/styles/_bootstrap-override.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -905,7 +905,7 @@ legend {
905905
// Navbar Dasboard
906906
// --------------------------------------------------
907907
.navbar-dashboard {
908-
background-color: $navbar-dashboard-bg;
908+
background-color: var(--navbar-bg);
909909
border-color: $navbar-dashboard-border;
910910

911911
.navbar-brand {

‎src/app/styles/_libs-override.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ ngx-loading-bar {
199199
display: block;
200200
background: none;
201201
border-radius: $border-radius;
202-
box-shadow: $widget-shadow;
202+
box-shadow: var(--widget-shadow);
203203
}
204204

205205
/*************************************/

‎src/app/styles/_theme-variables.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
app-root {
2+
.sing-dashboard,
3+
.dashboard-light {
4+
--logo-color: #3c484f;
5+
6+
--sidebar-bg-color: #fff;
7+
--sidebar-color: #6c757d;
8+
--sidebar-action-bg: #f9fafe;
9+
10+
--sidebar-panel-bg-color: white;
11+
--sidebar-nav-title-color: #0e1113;
12+
13+
--widget-shadow-color: 153, 187, 221;
14+
15+
--navbar-bg: #f9fbfd; // $body-bg
16+
--navbar-shadow: none;
17+
}
18+
19+
.dashboard-dark {
20+
--logo-color: white;
21+
22+
--sidebar-bg-color: #313947;
23+
--sidebar-color: #a6b2c1;
24+
--sidebar-action-bg: #2e3542;
25+
26+
--sidebar-panel-bg-color: #2e3542;
27+
--sidebar-nav-title-color: #dedede;
28+
29+
--widget-shadow-color: 115, 162, 208;
30+
31+
--navbar-bg: #fff;
32+
--navbar-shadow: 0 15px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);
33+
}
34+
35+
// dependable variables
36+
.sing-dashboard {
37+
--chat-sidebar-bg-color: var(--sidebar-bg-color);
38+
--sidebar-progress-bg-color: var(--sidebar-action-bg);
39+
--sidebar-item-hover-bg-color: var(--sidebar-action-bg);
40+
--widget-shadow: 0 23px 20px -20px rgba(var(--widget-shadow-color), 0.1), 0 0 15px rgba(var(--widget-shadow-color), 0.06);
41+
}
42+
}

‎src/app/styles/_utils.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -420,8 +420,6 @@ $z-index-variants: (more: 1, less: -1, '10': 10, '-10': -10);
420420
@include bg-variant('.bg-transparent', rgba(0,0,0,0));
421421
@include bg-variant('.bg-white', $white);
422422

423-
@include bg-variant('.bg-sidebar', $sidebar-bg-color);
424-
425423
.bg-body, .bg-body-light, .bg-gray, .bg-gray-transparent, .bg-transparent,
426424
.bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-info{
427425
@include transition(background-color .15s ease-in-out);
@@ -448,7 +446,6 @@ $z-index-variants: (more: 1, less: -1, '10': 10, '-10': -10);
448446
@include text-emphasis-variant('.text-semi-muted', $gray-600);
449447
@include text-emphasis-variant('.text-gray-darker', $gray-900);
450448
@include text-emphasis-variant('.text-gray-lighter', $gray-200);
451-
@include text-emphasis-variant('.text-bg-sidebar', $sidebar-bg-color);
452449

453450
.background-cover {
454451
background-size: cover;

0 commit comments

Comments
 (0)