Skip to content

Commit 326b794

Browse files
enriquezreneenriquezrene
committed
fix: #257 fixing colors
1 parent 705c72b commit 326b794

File tree

6 files changed

+178
-117
lines changed

6 files changed

+178
-117
lines changed

‎src/app/modules/shared/components/clock/clock.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
<i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
33
</div>
44
<div *ngIf="displayTime" class="col text-dark">
5-
<h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
5+
<h3 style="font-weight: bold;">{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
66
</div>

‎src/app/modules/shared/components/navbar/navbar.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="navbar navbar-fixed-top h-100 border-bottom">
1+
<nav class="navbar navbar-fixed-top h-100">
22
<div class="col-10 text-center">
33
<app-clock></app-clock>
44
</div>

‎src/app/modules/shared/components/sidebar/sidebar.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<!-- Sidebar -->
33
<div id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
44
<div class="text-center my-5">
5-
<img src="assets/img/ioet-logo-light.png" width="70" height="auto" class="img-fluid" alt="Ioet logo" />
5+
<img src="assets/img/ioet.png" width="70" height="auto" class="img-fluid" alt="ioet logo" />
66
</div>
77
<div class="container">
88
<a
99
*ngFor="let item of itemsSidebar"
1010
[routerLink]="item.route"
1111
routerLinkActive=""
12-
class="item-hover text-white item"
12+
class="item-hover item"
1313
>
1414
<i class="{{ item.icon }}"></i> {{ item.text }}</a
1515
>

‎src/app/modules/shared/components/sidebar/sidebar.component.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55

66
#sidebar-wrapper {
77
flex: 0 0 14.5rem;
8-
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
9-
background-image: $background-gradient-pantone;
8+
// box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
9+
background-color: #f4f5f7;
1010
z-index: 1;
1111
margin-left: -15rem;
1212
-webkit-transition: margin 0.25s ease-out;
@@ -30,8 +30,9 @@
3030
}
3131

3232
.background-item-sidebar-active,
33+
3334
.item-hover:hover {
34-
background-color: $item-background;
35+
color: #16BAC5;
3536
}
3637
}
3738

@@ -40,7 +41,10 @@
4041
grid-gap: 20px;
4142
justify-content: center;
4243
align-self: center;
44+
4345
.item {
46+
font-size: medium;
47+
color: #555164;
4448
display: grid;
4549
grid-template-columns: 30px 100px;
4650
align-items: center;

‎src/styles/colors.scss‎

Lines changed: 118 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,118 @@
1-
$danger-color: #ff3948;
2-
3-
$secondary-pantone: #fd927d;
4-
5-
$background-pantone: linear-gradient(
6-
to right top,
7-
#ff3663,
8-
#ff3b5a,
9-
#ff4051,
10-
#ff4748,
11-
#ff4d3e,
12-
#fe5039,
13-
#fd5335,
14-
#fc5630,
15-
#fc5630,
16-
#fc5630,
17-
#fc5630,
18-
#fc5630
19-
);
20-
21-
$background-gradient-items: linear-gradient(
22-
to right,
23-
#ff3948,
24-
#ff384d,
25-
#ff3752,
26-
#ff3657,
27-
#ff365c,
28-
#ff385a,
29-
#ff3b59,
30-
#ff3d57,
31-
#ff434e,
32-
#ff4944,
33-
#fe4f3a,
34-
#fc5630
35-
);
36-
37-
$succes-color: linear-gradient(
38-
to left bottom,
39-
#ff3948,
40-
#ff3f44,
41-
#fe443f,
42-
#fe4a3b,
43-
#fd4f36,
44-
#fd5134,
45-
#fc5432,
46-
#fc5630,
47-
#fc5630,
48-
#fc5630,
49-
#fc5630,
50-
#fc5630
51-
);
52-
53-
// ** user directly
54-
55-
$background-gradient-pantone: $background-pantone;
56-
57-
$item-background: $secondary-pantone;
58-
59-
$title-card-header-background: $background-pantone;
60-
61-
$button-primary-color: $succes-color;
62-
63-
$button-secondary-color: $danger-color;
64-
65-
$list-item-selected: $background-gradient-items;
66-
67-
$header: $danger-color;
68-
69-
$modal-button-primary: $button-secondary-color;
70-
71-
$modal-button-secondary: #00bcbd;
1+
// $danger-color: #ff3948;
2+
3+
// $secondary-pantone: #fd927d;
4+
5+
// $background-pantone: linear-gradient(
6+
// to right top,
7+
// #ff3663,
8+
// #ff3b5a,
9+
// #ff4051,
10+
// #ff4748,
11+
// #ff4d3e,
12+
// #fe5039,
13+
// #fd5335,
14+
// #fc5630,
15+
// #fc5630,
16+
// #fc5630,
17+
// #fc5630,
18+
// #fc5630
19+
// );
20+
21+
// $background-gradient-items: linear-gradient(
22+
// to right,
23+
// #ff3948,
24+
// #ff384d,
25+
// #ff3752,
26+
// #ff3657,
27+
// #ff365c,
28+
// #ff385a,
29+
// #ff3b59,
30+
// #ff3d57,
31+
// #ff434e,
32+
// #ff4944,
33+
// #fe4f3a,
34+
// #fc5630
35+
// );
36+
37+
38+
// bootstrap-colors
39+
// $primary: linear-gradient(to left bottom,
40+
// #00BAEE,
41+
// #2480FF);
42+
43+
// $secondary: linear-gradient(to left bottom,
44+
// #555164,
45+
// #555164);
46+
47+
// $success: linear-gradient(to left bottom,
48+
// #555164,
49+
// #555164);
50+
51+
// $warning: linear-gradient(to left bottom,
52+
// #FF5E0A,
53+
// #FF5E0A);
54+
55+
// $info: linear-gradient(to left bottom,
56+
// #00BAEE,
57+
// #00BAEE);
58+
59+
// $primary: #00BAEE;
60+
61+
// $background-gradient-pantone: $background-pantone;
62+
63+
// $item-background: $secondary-pantone;
64+
65+
// $title-card-header-background: $background-pantone;
66+
67+
// $button-primary-color: $primary;
68+
69+
// $button-secondary-color: $danger-color;
70+
71+
// $list-item-selected: $background-gradient-items;
72+
73+
// $header: $danger-color;
74+
75+
// $modal-button-primary: $button-secondary-color;
76+
77+
// $modal-button-secondary: #00bcbd;
78+
79+
80+
$font-size-base: 0.9rem;
81+
82+
$dark: #5c4e63;
83+
$primary: #00BAEE;
84+
$secondary: #555164;
85+
$success: #00CC6C;
86+
$warning: #FF5E0A;
87+
$info: #00BAEE;
88+
89+
.bg-primary,
90+
.btn-primary,
91+
.badge-primary,
92+
.alert-primary {
93+
background-color: $primary;
94+
border: none;
95+
}
96+
97+
.bg-secondary,
98+
.btn-secondary,
99+
.badge-secondary,
100+
.alert-secondary {
101+
background-image: linear-gradient(to right, #00cc6c, #00bcbd);
102+
border: none;
103+
}
104+
105+
.thead-orange {
106+
background-image: $primary;
107+
color: white;
108+
}
109+
110+
.custom-pagination ::ng-deep .ngx-pagination .current {
111+
background-image: $primary;
112+
border-radius: 8px;
113+
}
114+
115+
.btn:focus,
116+
.btn:active {
117+
border: none;
118+
}

‎src/styles/themes/_orange-theme.scss‎

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,51 @@
11
@import '../colors.scss';
22

3-
$font-size-base: 0.9rem;
4-
5-
$primary: #fc5630;
6-
$secondary: #16bac5;
7-
$success: #16bac5;
8-
$info: #30bced;
9-
$light: #ffffff;
10-
$dark: #5c4e63;
11-
12-
.bg-primary,
13-
.btn-primary,
14-
.badge-primary,
15-
.alert-primary {
16-
background-image: $background-pantone;
17-
border: none;
18-
}
19-
20-
.bg-secondary,
21-
.btn-secondary,
22-
.badge-secondary,
23-
.alert-secondary {
24-
background-image: linear-gradient(to right, #00cc6c, #00bcbd);
25-
border: none;
26-
}
27-
28-
.thead-orange {
29-
background-image: $background-pantone;
30-
color: white;
31-
}
32-
33-
.custom-pagination ::ng-deep .ngx-pagination .current {
34-
background-image: $background-pantone;
35-
border-radius: 8px;
36-
}
37-
38-
.btn:focus,
39-
.btn:active {
40-
border: none;
41-
}
3+
// $font-size-base: 0.9rem;
4+
5+
6+
// $secondary: #00BCBD;
7+
// $success: #16bac5;
8+
// $info: #30bced;
9+
// $light: #ffffff;
10+
// $dark: #5c4e63;
11+
12+
// $primary: #00BAEE;
13+
14+
// $secondary: #555164;
15+
16+
// $success: #00CC6C;
17+
18+
// $warning: #FF5E0A;
19+
20+
// $info: #00BAEE;
21+
22+
// .bg-primary,
23+
// .btn-primary,
24+
// .badge-primary,
25+
// .alert-primary {
26+
// background-color: $primary;
27+
// border: none;
28+
// }
29+
30+
// .bg-secondary,
31+
// .btn-secondary,
32+
// .badge-secondary,
33+
// .alert-secondary {
34+
// background-image: linear-gradient(to right, #00cc6c, #00bcbd);
35+
// border: none;
36+
// }
37+
38+
// // .thead-orange {
39+
// // background-image: $background-pantone;
40+
// // color: white;
41+
// // }
42+
43+
// .custom-pagination ::ng-deep .ngx-pagination .current {
44+
// background-image: $background-pantone;
45+
// border-radius: 8px;
46+
// }
47+
48+
// .btn:focus,
49+
// .btn:active {
50+
// border: none;
51+
// }

0 commit comments

Comments
 (0)