@progressio_resources/gravity-design-system 2.4.1 → 2.4.3

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/lib/styles/components/_datepicker.scss +52 -27
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progressio_resources/gravity-design-system",
3
3
  "description": "Gravity Design System",
4
- "version": "2.4.1",
4
+ "version": "2.4.3",
5
5
  "license": "SEE LICENSE IN LIBRARY-LICENSE",
6
6
  "peerDependencies": {
7
7
  "@angular/common": "^16.2.12",
package/src/lib/styles/components/_datepicker.scss CHANGED
@@ -7,6 +7,10 @@ $datepicker-min-width: 15rem;
7
7
 
8
8
  bs-datepicker-container {
9
9
  z-index: 1;
10
+
11
+ .bs-datepicker-container {
12
+ padding: 0;
13
+ }
10
14
  }
11
15
 
12
16
  .gravity-datepicker-dialog {
@@ -65,11 +69,13 @@ bs-datepicker-container {
65
69
  .current {
66
70
  @extend .hr-label, .md-regular;
67
71
 
72
+ align-items: center;
68
73
  background-color: var(--bg-calendar-nav-primary);
69
74
  border: none;
70
75
  border-radius: $border-radius-rounded;
71
76
  color: var(--on-bg-calendar-nav-primary);
72
77
  cursor: pointer;
78
+ display: flex;
73
79
  height: 2rem;
74
80
  outline: none;
75
81
  padding-inline: map-get($spacing-values, sm);
@@ -88,8 +94,7 @@ bs-datepicker-container {
88
94
  }
89
95
 
90
96
  .bs-datepicker-body {
91
- @extend .hr-label, .sm-regular;
92
-
97
+ min-height: fit-content;
93
98
  min-width: $datepicker-min-width;
94
99
  padding: 0.625rem;
95
100
 
@@ -105,8 +110,11 @@ bs-datepicker-container {
105
110
  text-align: center;
106
111
 
107
112
  span {
108
- display: block;
113
+ align-items: center;
114
+ border-radius: $border-radius-rounded;
115
+ display: flex;
109
116
  height: 2rem;
117
+ justify-content: center;
110
118
  line-height: 2rem;
111
119
  }
112
120
  }
@@ -115,55 +123,72 @@ bs-datepicker-container {
115
123
 
116
124
  bs-days-calendar-view .bs-datepicker-body table {
117
125
  th {
126
+ @extend .hr-label, .sm-regular;
127
+
128
+ color: var(--on-bg-calender-primary);
118
129
  font-style: italic;
119
130
  height: 2rem;
120
131
  width: 2rem;
121
132
  }
122
133
 
123
134
  td {
124
- width: 2rem;
135
+ span {
136
+ @extend .hr-label, .sm-regular;
125
137
 
126
- &:not(:has(span.is-other-month)):not(:has(span.selected)):not(:has(span.disabled)):hover {
127
- background-color: var(--bg-number-calendar-hover-primary);
128
- color: var(--number-calendar-hover-primary);
129
- }
138
+ &.is-highlighted:not(.disabled):not(.selected) {
139
+ background-color: var(--bg-number-calendar-hover-primary);
140
+ color: var(--number-calendar-hover-primary);
141
+ }
130
142
 
131
- &:has(span.selected) {
132
- background-color: var(--bg-number-calendar-pressed-primary);
133
- color: var(--number-calendar-pressed-primary);
134
- }
143
+ &.selected {
144
+ background-color: var(--bg-number-calendar-pressed-primary);
145
+ color: var(--number-calendar-pressed-primary);
146
+ }
147
+
148
+ &.is-other-month {
149
+ color: var(--number-calendar-disabled-primary);
135
150
 
136
- &:has(span.is-other-month) {
137
- color: var(--number-calendar-disabled-primary);
151
+ &.is-active-other-month {
152
+ background-color: transparent;
153
+ }
154
+ }
155
+
156
+ &.disabled {
157
+ color: var(--number-calendar-disabled-primary);
158
+ }
138
159
  }
139
160
 
140
161
  &:has(span.disabled) {
141
- color: var(--number-calendar-disabled-primary);
142
162
  cursor: not-allowed;
143
163
  }
144
-
145
- span {
146
- width: 2rem;
147
- }
148
164
  }
149
165
  }
150
166
 
151
167
  bs-month-calendar-view,
152
168
  bs-years-calendar-view {
153
169
  .bs-datepicker-body table td {
154
- &:not(.disabled):hover {
170
+ &.disabled {
171
+ cursor: not-allowed;
172
+
173
+ span {
174
+ color: var(--number-calendar-disabled-primary);
175
+ }
176
+ }
177
+
178
+ &.is-highlighted:not(.disabled):not(.selected) span:not(.selected) {
155
179
  background-color: var(--bg-number-calendar-hover-primary);
156
180
  color: var(--number-calendar-hover-primary);
157
181
  }
158
182
 
159
- &.disabled {
160
- color: var(--number-calendar-disabled-primary);
161
- cursor: not-allowed;
162
- }
183
+ span {
184
+ @extend .hr-label, .sm-regular;
185
+ border-radius: $border-radius-rounded;
186
+ margin: 0 !important;
163
187
 
164
- &.selected {
165
- background-color: var(--bg-number-calendar-pressed-primary);
166
- color: var(--number-calendar-pressed-primary);
188
+ &.selected {
189
+ background-color: var(--bg-number-calendar-pressed-primary) !important;
190
+ color: var(--number-calendar-pressed-primary) !important;
191
+ }
167
192
  }
168
193
  }
169
194
  }