Skip to content

Commit 0fc1abc

Browse files
mohamadadithyamohamadadithya
committed
clean and update css codes
1 parent 511db9c commit 0fc1abc

9 files changed

Lines changed: 654 additions & 652 deletions

File tree

‎dist/calendarify.cjs‎

Lines changed: 4 additions & 4 deletions
Large diffs are not rendered by default.

‎dist/calendarify.iife.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/calendarify.js‎

Lines changed: 565 additions & 565 deletions
Large diffs are not rendered by default.

‎dist/calendarify.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/calendarify.umd.cjs‎

Lines changed: 4 additions & 4 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "calendarify",
33
"private": false,
4-
"version": "2.0.0",
4+
"version": "2.0.1",
55
"type": "module",
66
"files": [
77
"dist/*.css",

‎src/main.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,14 @@ export default class Calendarify {
103103
this._datesWrapperEl = this._container.querySelector('.dates-wrapper') as HTMLAreaElement
104104
this._monthsWrapperEl = this._container.querySelector('.months-wrapper') as HTMLAreaElement
105105
this._yearsWrapperEl = this._container.querySelector('.years-wrapper') as HTMLAreaElement
106-
this._expandButton = this._container.querySelector('.navigation button[data-action="expand"]') as HTMLButtonElement
106+
this._expandButton = this._container.querySelector('.calendarify__navigations button[data-action="expand"]') as HTMLButtonElement
107107
this._dateButtons = this._container.querySelectorAll('.date-button') as NodeListOf<HTMLButtonElement>
108-
this._prevButton = this._container.querySelector('.navigation button[data-action="prev"]') as HTMLButtonElement
109-
this._nextButton = this._container.querySelector('.navigation button[data-action="next"]') as HTMLButtonElement
110-
this._calendarWrapper = this._container.querySelector('.calendar') as HTMLAreaElement
108+
this._prevButton = this._container.querySelector('.calendarify__navigations button[data-action="prev"]') as HTMLButtonElement
109+
this._nextButton = this._container.querySelector('.calendarify__navigations button[data-action="next"]') as HTMLButtonElement
110+
this._calendarWrapper = this._container.querySelector('.calendarify__calendar') as HTMLAreaElement
111111
this._quickButtons = this._container.querySelectorAll('.quick-actions button') as NodeListOf<HTMLButtonElement>
112112
this._wrapperEls = this._calendarWrapper.querySelectorAll('.wrapper:not(:last-child, :nth-child(3))') as NodeListOf<HTMLAreaElement>
113-
this._yearRangeButton = this._container.querySelector('.navigation button[data-action="year-range"]') as HTMLButtonElement
113+
this._yearRangeButton = this._container.querySelector('.calendarify__navigations button[data-action="year-range"]') as HTMLButtonElement
114114
}
115115

116116
public init() {

‎src/styles/main.scss‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646

4747
@import "reset";
4848

49-
.quick-actions {
49+
&__quick-actions {
5050
display: flex;
5151
align-items: center;
5252
flex-wrap: wrap;
@@ -68,70 +68,7 @@
6868
}
6969
}
7070

71-
.days-wrapper {
72-
@include grid(7, .3em);
73-
font-size: .9rem;
74-
margin-bottom: .6em;
75-
76-
li {
77-
text-align: center;
78-
font-weight: 500;
79-
}
80-
}
81-
82-
.dates-wrapper {
83-
@include grid(7, .3em);
84-
font-size: .9rem;
85-
86-
li {
87-
text-align: center;
88-
89-
button {
90-
width: 2.5em;
91-
height: 2.3em;
92-
border-radius: .8em;
93-
94-
&:is(.active) {
95-
background: var(--accentColor);
96-
color: white;
97-
font-weight: 600;
98-
}
99-
100-
&:not(.active):is(.holiday) {
101-
color: red;
102-
}
103-
104-
&:not(.active):is(.pre-holiday) {
105-
color: var(--accentColor);
106-
}
107-
108-
&:is(:disabled) {
109-
cursor: auto;
110-
color: hsl(0, 0%, 70%) !important;
111-
background: var(--background);
112-
font-weight: 400;
113-
}
114-
115-
&:not(.active, :disabled):hover {
116-
background: var(--clr-hover);
117-
}
118-
}
119-
}
120-
}
121-
122-
:where(.months-wrapper, .years-wrapper) {
123-
@include grid(4, .5em);
124-
125-
li {
126-
text-align: center;
127-
128-
& > button {
129-
@include buttonExpand;
130-
}
131-
}
132-
}
133-
134-
.navigation {
71+
&__navigations {
13572
ul {
13673
display: flex;
13774
align-items: center;
@@ -161,6 +98,71 @@
16198
}
16299
}
163100

101+
&__calendar {
102+
& > .days-wrapper {
103+
@include grid(7, .3em);
104+
font-size: .9rem;
105+
margin-bottom: .6em;
106+
107+
li {
108+
text-align: center;
109+
font-weight: 500;
110+
}
111+
}
112+
113+
& > .dates-wrapper {
114+
@include grid(7, .3em);
115+
font-size: .9rem;
116+
117+
li {
118+
text-align: center;
119+
120+
button {
121+
width: 2.5em;
122+
height: 2.3em;
123+
border-radius: .8em;
124+
125+
&:is(.active) {
126+
background: var(--accentColor);
127+
color: white;
128+
font-weight: 600;
129+
}
130+
131+
&:not(.active):is(.holiday) {
132+
color: red;
133+
}
134+
135+
&:not(.active):is(.pre-holiday) {
136+
color: var(--accentColor);
137+
}
138+
139+
&:is(:disabled) {
140+
cursor: auto;
141+
color: hsl(0, 0%, 70%) !important;
142+
background: var(--background);
143+
font-weight: 400;
144+
}
145+
146+
&:not(.active, :disabled):hover {
147+
background: var(--clr-hover);
148+
}
149+
}
150+
}
151+
}
152+
153+
& > :where(.months-wrapper, .years-wrapper) {
154+
@include grid(4, .5em);
155+
156+
li {
157+
text-align: center;
158+
159+
& > button {
160+
@include buttonExpand;
161+
}
162+
}
163+
}
164+
}
165+
164166
.d-none {
165167
display: none;
166168
}

‎src/utils/helpers.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ export class Helpers {
2626

2727
render() {
2828
this.container.innerHTML += `<div class="calendarify">
29-
<div class="quick-actions ${!this.quickActions ? 'd-none' : ''}">
29+
<div class="calendarify__quick-actions ${!this.quickActions ? 'd-none' : ''}">
3030
<button data-action="today">${this.locale.lang?.ui?.quickActions?.today}</button>
3131
<button data-action="tomorrow">${this.locale.lang?.ui?.quickActions?.tomorrow}</button>
3232
<button data-action="in-2-days">${this.locale.lang?.ui?.quickActions?.inTwoDays}</button>
3333
</div>
34-
<nav class="navigation">
34+
<nav class="calendarify__navigations">
3535
<ul>
3636
<li>
3737
<button data-action="prev" type="button"><i class="fas fa-fw fa-chevron-left"></i></button>
@@ -45,7 +45,7 @@ export class Helpers {
4545
</li>
4646
</ul>
4747
</nav>
48-
<div class="calendar">
48+
<div class="calendarify__calendar">
4949
<ul class="days-wrapper wrapper">
5050
${this.locale.lang?.weekdays?.map((day) => { return `<li>${day.slice(0, 3)}</li>` }).join("")}
5151
</ul>

0 commit comments

Comments
 (0)