@anglr/datetime 5.0.0-beta.20221020182702 → 5.0.0-beta.20221020191430

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/styles/components/_date-time-picker.scss +23 -30
  3. package/styles/core/_mixins.scss +14 -0
  4. package/styles/core/_theme.scss +38 -0
  5. package/styles/themes/dark.scss +10 -0
  6. package/version.bak +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anglr/datetime",
3
- "version": "5.0.0-beta.20221020182702",
3
+ "version": "5.0.0-beta.20221020191430",
4
4
  "description": "Angular library for datetime manipulation components",
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/styles/components/_date-time-picker.scss CHANGED
@@ -5,8 +5,9 @@
5
5
  display: block;
6
6
  position: absolute;
7
7
 
8
- background-color: #FFFFFF;
9
- border: 1px solid #333333;
8
+ background-color: var(--datetime-date-time-picker-background);
9
+ border: 1px solid var(--datetime-date-time-picker-border);
10
+ color: var(--datetime-date-time-picker-foreground);
10
11
  border-radius: 6px;
11
12
  z-index: 123;
12
13
  padding: 4px 8px;
@@ -43,12 +44,13 @@
43
44
  border-radius: 4px;
44
45
  border-width: 1px;
45
46
  border-style: solid;
46
- border-color: transparent;
47
+ border-color: var(--datetime-date-time-picker-period-datum-border);
47
48
  }
48
49
 
49
50
  .active
50
51
  {
51
- border-color: transparent;
52
+ border-color: var(--datetime-date-time-picker-active-border);
53
+ background-color: var(--datetime-date-time-picker-active-background);
52
54
  }
53
55
 
54
56
  .fas
@@ -63,43 +65,34 @@
63
65
  .clickable
64
66
  {
65
67
  transition: all 200ms;
66
- }
67
68
 
68
- .clickable:hover
69
- {
70
- border-color: transparent;
71
- cursor: pointer;
69
+ &:hover
70
+ {
71
+ border-color: var(--datetime-date-time-picker-clickable-hover-border);
72
+ cursor: pointer;
73
+ background-color: var(--datetime-date-time-picker-clickable-hover-background);
74
+ }
72
75
  }
73
76
 
74
77
  .disabled
75
78
  {
76
79
  opacity: 0.4;
77
80
  border-radius: 0;
78
- }
79
-
80
- .disabled:hover
81
- {
82
- cursor: not-allowed;
83
- }
84
-
85
- .today
86
- {
87
- border-color: #0077ff;
88
- }
89
81
 
90
- .active
91
- {
92
- background-color: #00c3ff;
93
- }
82
+ &:hover
83
+ {
84
+ cursor: not-allowed;
85
+ }
94
86
 
95
- .clickable:hover
96
- {
97
- background-color: #00e7ff;
87
+ &:not(.active)
88
+ {
89
+ background-color: var(--datetime-date-time-picker-disabled-background);
90
+ }
98
91
  }
99
92
 
100
- .disabled:not(.active)
93
+ .today
101
94
  {
102
- background-color: #CFCFCF;
95
+ border-color: var(--datetime-date-time-picker-today-border);
103
96
  }
104
97
  }
105
98
 
@@ -146,7 +139,7 @@
146
139
 
147
140
  .weekend
148
141
  {
149
- color: #850000;
142
+ color: var(--datetime-day-picker-weekend-foreground);
150
143
  }
151
144
  }
152
145
  }
package/styles/core/_mixins.scss CHANGED
@@ -6,6 +6,20 @@
6
6
 
7
7
  @mixin buildThemeColors($theme)
8
8
  {
9
+ @if $theme
10
+ {
11
+ --datetime-date-time-picker-background: #{map.get(map.get($theme, 'dateTimePicker'), 'background')};
12
+ --datetime-date-time-picker-border: #{map.get(map.get($theme, 'dateTimePicker'), 'border')};
13
+ --datetime-date-time-picker-foreground: #{map.get(map.get($theme, 'dateTimePicker'), 'foreground')};
14
+ --datetime-date-time-picker-period-datum-border: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'periodDatum'), 'border')};
15
+ --datetime-date-time-picker-active-border: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'active'), 'border')};
16
+ --datetime-date-time-picker-active-background: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'active'), 'background')};
17
+ --datetime-date-time-picker-clickable-hover-background: #{map.get(map.get(map.get(map.get($theme, 'dateTimePicker'), 'clickable'), 'hover'), 'background')};
18
+ --datetime-date-time-picker-clickable-hover-border: #{map.get(map.get(map.get(map.get($theme, 'dateTimePicker'), 'clickable'), 'hover'), 'border')};
19
+ --datetime-date-time-picker-disabled-background: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'disabled'), 'background')};
20
+ --datetime-date-time-picker-today-border: #{map.get(map.get(map.get($theme, 'dateTimePicker'), 'today'), 'border')};
21
+ --datetime-day-picker-weekend-foreground: #{map.get(map.get(map.get($theme, 'dayPicker'), 'weekend'), 'foreground')};
22
+ }
9
23
  }
10
24
 
11
25
  @mixin buildThemeCss
package/styles/core/_theme.scss CHANGED
@@ -1,3 +1,41 @@
1
1
  $defaultTheme:
2
2
  (
3
+ dateTimePicker:
4
+ (
5
+ background: #FFFFFF,
6
+ border: #333333,
7
+ foreground: #111111,
8
+ periodDatum:
9
+ (
10
+ border: transparent,
11
+ ),
12
+ active:
13
+ (
14
+ border: transparent,
15
+ background: #00c3ff,
16
+ ),
17
+ clickable:
18
+ (
19
+ hover:
20
+ (
21
+ background: #00e7ff,
22
+ border: transparent,
23
+ ),
24
+ ),
25
+ disabled:
26
+ (
27
+ background: #CFCFCF,
28
+ ),
29
+ today:
30
+ (
31
+ border: #0077ff,
32
+ ),
33
+ ),
34
+ dayPicker:
35
+ (
36
+ weekend:
37
+ (
38
+ foreground: #850000,
39
+ ),
40
+ ),
3
41
  );
package/styles/themes/dark.scss CHANGED
@@ -4,6 +4,16 @@
4
4
 
5
5
  $_darkDefaultTheme:
6
6
  (
7
+ dateTimePicker:
8
+ (
9
+ background: #111111,
10
+ border: #EAEAEA,
11
+ foreground: #FAFAFA,
12
+ disabled:
13
+ (
14
+ background: #5B5B5B,
15
+ ),
16
+ ),
7
17
  );
8
18
 
9
19
  @function defineTheme($colors: (), $font: 'Inter')
package/version.bak CHANGED
@@ -1 +1 @@
1
- 5.0.0-beta.20221020182702
1
+ 5.0.0-beta.20221020191430