Skip to content

Commit 447aea9

Browse files
mattlewis92mattlewis92
authored
feat: add sass mixins for easier theming
Closes #858
1 parent 864462b commit 447aea9

16 files changed

+516
-94
lines changed

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
*.css
44
CHANGELOG.md
55
build-tool-examples
6+
projects/angular-calendar/src/variables.scss

‎.stylelintrc

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
2-
"extends": "stylelint-config-standard",
2+
"extends": [
3+
"stylelint-config-standard",
4+
"stylelint-config-prettier"
5+
],
36
"rules": {
4-
"no-descending-specificity": null
7+
"no-descending-specificity": null,
8+
"at-rule-no-unknown": null
59
}
610
}

‎package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@
116116
"sinon-chai": "^3.3.0",
117117
"standard-version": "^5.0.0",
118118
"stylelint": "^9.10.1",
119+
"stylelint-config-prettier": "^4.0.0",
119120
"stylelint-config-standard": "^18.2.0",
120121
"ts-node": "^8.0.2",
121122
"tsickle": "0.34.0",

‎projects/angular-calendar/src/angular-calendar.scss

+7
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,10 @@
22
@import './modules/week/calendar-week-view';
33
@import './modules/day/calendar-day-view';
44
@import './modules/common/calendar-tooltip';
5+
6+
@mixin cal-theme($overrides) {
7+
@include cal-month-view-theme($overrides);
8+
@include cal-week-view-theme($overrides);
9+
@include cal-day-view-theme($overrides);
10+
@include cal-tooltip-theme($overrides);
11+
}

‎projects/angular-calendar/src/modules/common/calendar-tooltip.scss

+32-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,33 @@
1+
@import '../../variables';
2+
3+
$cal-tooltip-vars: () !default;
4+
$cal-tooltip-vars: map-merge($cal-vars, $cal-tooltip-vars);
5+
6+
@mixin cal-tooltip-theme($overrides) {
7+
$theme: map-merge($cal-tooltip-vars, $overrides);
8+
9+
.cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
10+
border-top-color: map-get($theme, black);
11+
}
12+
13+
.cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
14+
border-right-color: map-get($theme, black);
15+
}
16+
17+
.cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
18+
border-bottom-color: map-get($theme, black);
19+
}
20+
21+
.cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
22+
border-left-color: map-get($theme, black);
23+
}
24+
25+
.cal-tooltip-inner {
26+
color: map-get($theme, white);
27+
background-color: map-get($theme, black);
28+
}
29+
}
30+
131
.cal-tooltip {
232
position: absolute;
333
z-index: 1070;
@@ -29,7 +59,6 @@
2959
left: 50%;
3060
margin-left: -5px;
3161
border-width: 5px 5px 0;
32-
border-top-color: #000;
3362
}
3463

3564
.cal-tooltip.cal-tooltip-right {
@@ -42,7 +71,6 @@
4271
left: 0;
4372
margin-top: -5px;
4473
border-width: 5px 5px 5px 0;
45-
border-right-color: #000;
4674
}
4775

4876
.cal-tooltip.cal-tooltip-bottom {
@@ -55,7 +83,6 @@
5583
left: 50%;
5684
margin-left: -5px;
5785
border-width: 0 5px 5px;
58-
border-bottom-color: #000;
5986
}
6087

6188
.cal-tooltip.cal-tooltip-left {
@@ -68,15 +95,12 @@
6895
right: 0;
6996
margin-top: -5px;
7097
border-width: 5px 0 5px 5px;
71-
border-left-color: #000;
7298
}
7399

74100
.cal-tooltip-inner {
75101
max-width: 200px;
76102
padding: 3px 8px;
77-
color: #fff;
78103
text-align: center;
79-
background-color: #000;
80104
border-radius: 0.25rem;
81105
}
82106

@@ -87,3 +111,5 @@
87111
border-color: transparent;
88112
border-style: solid;
89113
}
114+
115+
@include cal-tooltip-theme($cal-tooltip-vars);

‎projects/angular-calendar/src/modules/day/calendar-day-view.scss

+47-17
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,48 @@
1+
@import '../../variables';
2+
3+
$cal-day-view-vars: () !default;
4+
$cal-day-view-vars: map-merge($cal-vars, $cal-day-view-vars);
5+
6+
@mixin cal-day-view-theme($overrides) {
7+
$theme: map-merge($cal-day-view-vars, $overrides);
8+
9+
.cal-day-view {
10+
background-color: map-get($theme, bg-primary);
11+
12+
.cal-hour-rows {
13+
border-color: map-get($theme, border-color);
14+
}
15+
16+
.cal-hour:nth-child(odd) {
17+
background-color: map-get($theme, bg-secondary);
18+
}
19+
20+
.cal-hour:not(:last-child) .cal-hour-segment,
21+
.cal-hour:last-child :not(:last-child) .cal-hour-segment {
22+
border-bottom-color: map-get($theme, border-color);
23+
}
24+
25+
.cal-hour-segment:hover,
26+
.cal-drag-over .cal-hour-segment {
27+
background-color: map-get($theme, bg-active);
28+
}
29+
30+
.cal-event {
31+
background-color: map-get($theme, event-color-secondary);
32+
border-color: map-get($theme, event-color-primary);
33+
color: map-get($theme, event-color-primary);
34+
}
35+
}
36+
}
37+
138
.cal-day-view {
239
.cal-hour-rows {
340
width: 100%;
4-
border: solid 1px #e1e1e1;
5-
overflow-x: scroll;
41+
border: solid 1px;
42+
overflow-x: auto;
643
position: relative;
744
}
845

9-
.cal-hour:nth-child(odd) {
10-
background-color: #fafafa;
11-
}
12-
1346
/* stylelint-disable-next-line selector-type-no-unknown */
1447
mwl-calendar-day-view-hour-segment, /* fix for https://github.com/mattlewis92/angular-calendar/issues/260*/
1548
.cal-hour-segment {
@@ -22,14 +55,16 @@
2255

2356
.cal-hour:not(:last-child) .cal-hour-segment,
2457
.cal-hour:last-child :not(:last-child) .cal-hour-segment {
25-
border-bottom: thin dashed #e1e1e1;
58+
border-bottom: thin dashed;
2659
}
2760

2861
.cal-time {
2962
font-weight: bold;
30-
padding-top: 5px;
3163
width: 70px;
32-
text-align: center;
64+
height: 100%;
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
3368
}
3469

3570
.cal-hour-segment.cal-after-hour-start {
@@ -38,11 +73,6 @@
3873
}
3974
}
4075

41-
.cal-hour-segment:hover,
42-
.cal-drag-over .cal-hour-segment {
43-
background-color: #ededed;
44-
}
45-
4676
.cal-drag-active .cal-hour-segment {
4777
pointer-events: none;
4878
}
@@ -60,9 +90,7 @@
6090
.cal-event {
6191
padding: 5px;
6292
font-size: 12px;
63-
background-color: #d1e8ff;
64-
border: 1px solid #1e90ff;
65-
color: #1e90ff;
93+
border: 1px solid;
6694
box-sizing: border-box;
6795
overflow: hidden;
6896
text-overflow: ellipsis;
@@ -107,3 +135,5 @@
107135
}
108136
}
109137
}
138+
139+
@include cal-day-view-theme($cal-day-view-vars);

‎projects/angular-calendar/src/modules/month/calendar-month-view.scss

+68-32
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,72 @@
1+
@import '../../variables';
2+
3+
$cal-month-view-vars: () !default;
4+
$cal-month-view-vars: map-merge($cal-vars, $cal-month-view-vars);
5+
6+
@mixin cal-month-view-theme($overrides) {
7+
$theme: map-merge($cal-month-view-vars, $overrides);
8+
9+
.cal-month-view {
10+
background-color: map-get($theme, bg-primary);
11+
12+
.cal-cell-row:hover {
13+
background-color: map-get($theme, bg-secondary);
14+
}
15+
16+
.cal-cell-row .cal-cell:hover,
17+
.cal-cell.cal-has-events.cal-open {
18+
background-color: map-get($theme, bg-active);
19+
}
20+
21+
.cal-days {
22+
border-color: map-get($theme, border-color);
23+
}
24+
25+
.cal-day-cell:not(:last-child) {
26+
border-right-color: map-get($theme, border-color);
27+
}
28+
29+
.cal-days .cal-cell-row {
30+
border-bottom-color: map-get($theme, border-color);
31+
}
32+
33+
.cal-day-badge {
34+
background-color: map-get($theme, badge-color);
35+
color: map-get($theme, white);
36+
}
37+
38+
.cal-event {
39+
background-color: map-get($theme, event-color-primary);
40+
border-color: map-get($theme, event-color-secondary);
41+
color: map-get($theme, white);
42+
}
43+
44+
.cal-day-cell.cal-weekend .cal-day-number {
45+
color: map-get($theme, weekend-color);
46+
}
47+
48+
.cal-day-cell.cal-today {
49+
background-color: map-get($theme, today-bg);
50+
}
51+
52+
.cal-day-cell.cal-drag-over {
53+
background-color: darken(map-get($theme, bg-active), 5%) !important;
54+
}
55+
56+
.cal-open-day-events {
57+
color: map-get($theme, white);
58+
background-color: map-get($theme, gray);
59+
box-shadow: inset 0 0 15px 0 rgba(map-get($theme, black), 0.5);
60+
}
61+
}
62+
}
63+
164
.cal-month-view {
265
.cal-header {
366
text-align: center;
467
font-weight: bolder;
568
}
669

7-
.cal-cell-row:hover {
8-
background-color: #fafafa;
9-
}
10-
1170
.cal-header .cal-cell {
1271
padding: 5px 0;
1372
overflow: hidden;
@@ -16,13 +75,8 @@
1675
white-space: nowrap;
1776
}
1877

19-
.cal-cell-row .cal-cell:hover,
20-
.cal-cell.cal-has-events.cal-open {
21-
background-color: #ededed;
22-
}
23-
2478
.cal-days {
25-
border: 1px solid #e1e1e1;
79+
border: 1px solid;
2680
border-bottom: 0;
2781
}
2882

@@ -53,24 +107,22 @@
53107
}
54108

55109
.cal-day-cell:not(:last-child) {
56-
border-right: 1px solid #e1e1e1;
110+
border-right: 1px solid;
57111
}
58112

59113
.cal-days .cal-cell-row {
60-
border-bottom: 1px solid #e1e1e1;
114+
border-bottom: 1px solid;
61115
}
62116

63117
.cal-day-badge {
64118
margin-top: 18px;
65119
margin-left: 10px;
66-
background-color: #b94a48;
67120
display: inline-block;
68121
min-width: 10px;
69122
padding: 3px 7px;
70123
font-size: 12px;
71124
font-weight: 700;
72125
line-height: 1;
73-
color: white;
74126
text-align: center;
75127
white-space: nowrap;
76128
vertical-align: middle;
@@ -102,9 +154,6 @@
102154
border-radius: 50%;
103155
display: inline-block;
104156
margin: 2px;
105-
background-color: #1e90ff;
106-
border-color: #d1e8ff;
107-
color: #fff;
108157
}
109158

110159
.cal-day-cell.cal-in-month.cal-has-events {
@@ -116,27 +165,12 @@
116165
cursor: default;
117166
}
118167

119-
.cal-day-cell.cal-weekend .cal-day-number {
120-
color: darkred;
121-
}
122-
123-
.cal-day-cell.cal-today {
124-
background-color: #e8fde7;
125-
}
126-
127168
.cal-day-cell.cal-today .cal-day-number {
128169
font-size: 1.9em;
129170
}
130171

131-
.cal-day-cell.cal-drag-over {
132-
background-color: darken(#ededed, 5%) !important;
133-
}
134-
135172
.cal-open-day-events {
136173
padding: 15px;
137-
color: white;
138-
background-color: #555;
139-
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
140174
}
141175

142176
.cal-open-day-events .cal-event {
@@ -167,3 +201,5 @@
167201
}
168202
}
169203
}
204+
205+
@include cal-month-view-theme($cal-month-view-vars);

0 commit comments

Comments
 (0)