Skip to content

Commit 1cfe15b

Browse files
mattlewis92mattlewis92
committed
feat: add sass mixins for easier theming
BREAKING CHANGE: all 3 views now have a default white background set. If you were relying on it being transparant before you will need to override with css. Closes #858
1 parent f67afc6 commit 1cfe15b

File tree

7 files changed

+271
-90
lines changed

7 files changed

+271
-90
lines changed

‎.stylelintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"extends": "stylelint-config-standard",
33
"rules": {
4-
"no-descending-specificity": null
4+
"no-descending-specificity": null,
5+
"at-rule-no-unknown": null
56
}
67
}

‎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-colors: () !default;
4+
$cal-tooltip-colors: map-merge($cal-colors, $cal-tooltip-colors);
5+
6+
@mixin cal-tooltip-theme($overrides) {
7+
$theme: map-merge($cal-tooltip-colors, $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-colors);

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
$cal-event-color-primary: #1e90ff !default;
2+
$cal-event-color-secondary: #d1e8ff !default;
3+
$cal-border-color: #e1e1e1 !default;
4+
$cal-bg-primary: #fff !default;
5+
$cal-bg-secondary: #fafafa !default;
6+
$cal-bg-active: #ededed !default;
7+
$cal-today-bg: #e8fde7 !default;
8+
$cal-weekend-color: #8b0000 !default;
9+
$cal-badge-color: #b94a48 !default;
10+
$cal-white: #fff !default;
11+
$cal-gray: #555 !default;
12+
$cal-black: #000 !default;
13+
14+
$cal-colors: () !default;
15+
$cal-colors: map-merge(
16+
(
17+
event-color-primary: $cal-event-color-primary,
18+
event-color-secondary: $cal-event-color-secondary,
19+
border-color: $cal-border-color,
20+
bg-primary: $cal-bg-primary,
21+
bg-secondary: $cal-bg-secondary,
22+
bg-active: $cal-bg-active,
23+
today-bg: $cal-today-bg,
24+
weekend-color: $cal-weekend-color,
25+
badge-color: $cal-badge-color,
26+
white: $cal-white,
27+
gray: $cal-gray,
28+
black: $cal-black
29+
),
30+
$cal-colors
31+
);

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

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

41-
.cal-hour-segment:hover,
42-
.cal-drag-over .cal-hour-segment {
43-
background-color: #ededed;
44-
}
45-
4674
.cal-drag-active .cal-hour-segment {
4775
pointer-events: none;
4876
}
@@ -60,9 +88,7 @@
6088
.cal-event {
6189
padding: 5px;
6290
font-size: 12px;
63-
background-color: #d1e8ff;
64-
border: 1px solid #1e90ff;
65-
color: #1e90ff;
91+
border: 1px solid;
6692
box-sizing: border-box;
6793
overflow: hidden;
6894
text-overflow: ellipsis;
@@ -107,3 +133,5 @@
107133
}
108134
}
109135
}
136+
137+
@include cal-day-view-theme($cal-day-view-colors);

‎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 '../common/variables';
2+
3+
$cal-month-view-colors: () !default;
4+
$cal-month-view-colors: map-merge($cal-colors, $cal-month-view-colors);
5+
6+
@mixin cal-month-view-theme($overrides) {
7+
$theme: map-merge($cal-month-view-colors, $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-colors);

0 commit comments

Comments
 (0)