Skip to content

Commit ca2d645

Browse files
sid-devspotsid-devspot
committed
Backup Push
1 parent c582d67 commit ca2d645

16 files changed

Lines changed: 502 additions & 41 deletions

‎projects/css-fusion/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dev.spot/css-fusion",
3-
"version": "0.0.4",
3+
"version": "0.0.5",
44
"description": "A library for reusable SCSS components and TypeScript functionalities.",
55
"main": "dist/css-fusion/bundles/css-fusion.umd.js",
66
"style": "dist/css-fusion/scss/main.scss",

‎projects/css-fusion/src/lib/scss/_calendar.scss‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
.calendar-container {
2+
width: 100%;
3+
max-width: 360px;
4+
border: 1px solid var(--calendar-bdr);
5+
background-color: var(--calendar-bg);
6+
padding: 1.4rem 1rem;
7+
border-radius: 1.2rem;
8+
font-family: "Quicksand", serif;
9+
10+
.header {
11+
display: flex;
12+
align-items: center;
13+
justify-content: space-between;
14+
margin: 0.4rem 0 2.4rem 0;
15+
padding: 0 1rem;
16+
17+
h3 {
18+
font-size: 1.8rem;
19+
font-weight: 600;
20+
}
21+
22+
.header-btns {
23+
display: flex;
24+
align-items: center;
25+
justify-content: flex-end;
26+
gap: 1.2rem;
27+
28+
p {
29+
cursor: pointer;
30+
font-weight: 500;
31+
}
32+
33+
button {
34+
border: 0.1rem solid var(--calendar-day-bdr) !important;
35+
background-color: var(--calendar-day-bg) !important;
36+
border-radius: 1rem;
37+
width: 3rem;
38+
height: 3rem;
39+
border: none;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
44+
}
45+
46+
.material-symbols-outlined {
47+
color: var(--app-theme-font) !important;
48+
}
49+
}
50+
}
51+
52+
.weekdays {
53+
margin-bottom: 1.8rem;
54+
font-weight: 600;
55+
}
56+
57+
.weekdays,
58+
.days {
59+
font-family: "Quicksand", serif;
60+
display: grid;
61+
grid-template-columns: repeat(7, 1fr);
62+
row-gap: 1rem;
63+
text-align: center;
64+
cursor: pointer;
65+
}
66+
67+
.day {
68+
font-family: "Quicksand", serif;
69+
border: 0.1rem solid var(--calendar-day-bdr);
70+
background-color: var(--calendar-day-bg);
71+
flex-shrink: 0;
72+
width: 3.8rem;
73+
height: 3.8rem;
74+
font-weight: 500;
75+
text-align: center;
76+
border-radius: 0.8rem;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
margin: auto;
81+
cursor: pointer;
82+
83+
&:hover {
84+
background-color: var(--calendar-day-bg-hover);
85+
}
86+
87+
&.empty {
88+
background: transparent;
89+
}
90+
}
91+
92+
.day.today {
93+
background-color: var(--app-theme-background) !important;
94+
color: #000 !important;
95+
}
96+
}
97+
98+
.calendar-container.horizontal {
99+
border: none;
100+
background-color: transparent;
101+
max-width: 100%;
102+
103+
.header {
104+
padding: 0 !important;
105+
margin: 0.4rem 0 1.4rem 0 !important;
106+
107+
.header-btns {
108+
button {
109+
background-color: var(--calendar-day-hz-bg) !important;
110+
}
111+
}
112+
}
113+
114+
.horizontal-scroll-wrapper {
115+
position: relative;
116+
display: flex;
117+
align-items: center;
118+
gap: 2rem;
119+
120+
.scroll-btn {
121+
background-color: var(--calendar-day-hz-bg);
122+
border: none;
123+
border-radius: 50%;
124+
width: 3rem;
125+
height: 3rem;
126+
display: flex;
127+
align-items: center;
128+
justify-content: center;
129+
z-index: 2;
130+
cursor: pointer;
131+
132+
&.left {
133+
margin-right: 0.6rem;
134+
}
135+
136+
&.right {
137+
margin-left: 0.6rem;
138+
}
139+
140+
span {
141+
font-size: 2rem;
142+
}
143+
}
144+
145+
.days {
146+
flex: 1;
147+
display: flex;
148+
overflow-x: auto;
149+
scroll-behavior: smooth;
150+
gap: 1rem;
151+
padding: 0.8rem 0;
152+
scrollbar-width: none;
153+
154+
&::-webkit-scrollbar {
155+
display: none;
156+
}
157+
}
158+
159+
.day {
160+
border: 0.1rem solid var(--calendar-day-bdr);
161+
background-color: var(--calendar-day-hz-bg);
162+
width: 4.4rem;
163+
height: 4.4rem;
164+
font-weight: 500;
165+
}
166+
167+
.day {
168+
&.empty {
169+
display: none;
170+
}
171+
}
172+
}
173+
}
174+
175+
.day.selected {
176+
border: 0.2rem solid var(--app-theme-background);
177+
background-color: var(--app-theme-font) !important;
178+
color: var(--app-theme-background) !important;
179+
font-weight: bold;
180+
}

‎projects/css-fusion/src/lib/scss/_menubar.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,6 @@
3939
cursor: pointer;
4040
}
4141

42-
.active-link {
43-
background-color: var(--menubar-active-bg) !important;
44-
color: var(--menubar-active-text) !important;
45-
}
46-
4742
.menubar-link-center {
4843
height: fit-content;
4944
display: flex;
@@ -71,6 +66,11 @@
7166
gap: 14px;
7267
padding-right: 20px;
7368
}
69+
70+
.active-link {
71+
background-color: var(--menubar-active-bg) !important;
72+
color: var(--menubar-active-text) !important;
73+
}
7474
}
7575

7676
.menubar-set-03 {

‎projects/css-fusion/src/lib/scss/_nav.scss‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
height: var(--app-layout-height);
66
font-family: var(--font-style);
77
background-color: var(--navbar-bg);
8-
border: 1.6px solid var(--navbar-bdr-full);
8+
border-right: 1.6px solid var(--navbar-bdr-full);
99
color: var(--navbar-font);
1010
display: grid;
1111
grid-template-rows: var(--navbar-set01-height) 1fr auto;
@@ -44,7 +44,6 @@
4444
}
4545

4646
h3 {
47-
font-size: var(--fontsize-medium);
4847
color: var(--navbar-font-set01);
4948
display: flex;
5049
align-items: center;
@@ -114,6 +113,14 @@
114113
.navbar-active {
115114
border: 1.5px solid var(--navbar-bdr-active);
116115
background-color: var(--navbar-bg-active);
116+
117+
.nav-icon {
118+
color: var(--navbar-icon-active);
119+
}
120+
121+
.nav-txt {
122+
color: var(--navbar-font-active);
123+
}
117124
}
118125

119126
&::-webkit-scrollbar {
@@ -181,8 +188,8 @@
181188
align-items: flex-start;
182189

183190
.user-info-name {
184-
font-size: 18px;
185-
line-height: 18px;
191+
font-size: 16px;
192+
line-height: 16px;
186193
}
187194

188195
.user-info-desc {

‎projects/css-fusion/src/lib/scss/_variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@
7676
--menubar-profile-title: #000;
7777
--menubar-profile-content: #393939;
7878
--menubar-curv: unset;
79+
--navbar-icon-active: #000;
80+
--navbar-font-active: #000;
7981

8082
// Nav
8183
--navbar-size: 260px;

‎projects/css-fusion/src/lib/scss/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// Components
44
@import "accordion";
55
@import "button";
6+
@import "calendar";
67
@import "card";
78
@import "dropdown";
89
@import "flex";

‎src/app/components/calendar/calendar.component.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div class="calendar-container" [ngClass]="{ horizontal: isHorizontalView }">
2+
<div class="header">
3+
<h3>{{ monthNames[currentMonth] }}, {{ currentYear }}</h3>
4+
<div class="header-btns">
5+
<button (click)="changeMonth(-1)">
6+
<span class="material-symbols-outlined"> chevron_left </span>
7+
</button>
8+
<p>Today</p>
9+
<button (click)="changeMonth(1)">
10+
<span class="material-symbols-outlined"> chevron_right </span>
11+
</button>
12+
</div>
13+
</div>
14+
15+
<!-- For vertical view -->
16+
<div class="days" *ngIf="!isHorizontalView">
17+
<div
18+
*ngFor="let day of daysInMonth"
19+
(click)="selectDay(day)"
20+
[class.empty]="day === 0"
21+
[class.today]="isToday(day)"
22+
[class.selected]="day === selectedDay"
23+
class="day"
24+
>
25+
{{ day === 0 ? "" : day }}
26+
</div>
27+
</div>
28+
29+
<!-- For horizontal view -->
30+
<div class="horizontal-scroll-wrapper" *ngIf="isHorizontalView">
31+
<button class="scroll-btn left" (click)="scrollDays('left')">
32+
<span class="material-symbols-outlined">chevron_left</span>
33+
</button>
34+
35+
<div class="days" #daysContainer>
36+
<div
37+
*ngFor="let day of daysInMonth"
38+
(click)="selectDay(day)"
39+
[class.empty]="day === 0"
40+
[class.today]="isToday(day)"
41+
[class.selected]="day === selectedDay"
42+
class="day"
43+
>
44+
{{ day === 0 ? "" : day }}
45+
</div>
46+
</div>
47+
48+
<button class="scroll-btn right" (click)="scrollDays('right')">
49+
<span class="material-symbols-outlined">chevron_right</span>
50+
</button>
51+
</div>
52+
</div>

‎src/app/components/calendar/calendar.component.scss‎

Whitespace-only changes.

‎src/app/components/calendar/calendar.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { CalendarComponent } from './calendar.component';
4+
5+
describe('CalendarComponent', () => {
6+
let component: CalendarComponent;
7+
let fixture: ComponentFixture<CalendarComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [CalendarComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(CalendarComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

0 commit comments

Comments
 (0)