Skip to content

Commit 63a6223

Browse files
desig9steindesig9stein
committed
fix(calendar): update border-radius styles for date states across all themes
1 parent 2b3e239 commit 63a6223

File tree

4 files changed

+190
-59
lines changed

4 files changed

+190
-59
lines changed

‎src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ $border-size: rem(1px);
105105
height: var-get($theme, 'size');
106106
width: var-get($theme, 'size');
107107
background: var-get($theme, 'content-background');
108-
border-radius: var-get($theme, 'date-border-radius');
108+
border-radius: var-get($theme, 'date-range-border-radius');
109109
}
110110

111111
&::after {
@@ -115,6 +115,20 @@ $border-size: rem(1px);
115115
}
116116
}
117117

118+
&[part~='range'][part~='first'][part~='special'],
119+
&[part~='range'][part~='last'][part~='special'] {
120+
&::before {
121+
border-radius: var-get($theme, 'date-special-border-radius');
122+
}
123+
}
124+
125+
&[part~='range'][part~='first'][part~='current'],
126+
&[part~='range'][part~='last'][part~='current'] {
127+
&::before {
128+
border-radius: var-get($theme, 'date-current-border-radius');
129+
}
130+
}
131+
118132
&[part~='range'][part~='preview'][part~='first'],
119133
&[part~='range'][part~='preview'][part~='last'] {
120134
background: transparent;
@@ -178,6 +192,35 @@ $border-size: rem(1px);
178192
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) {
179193
color: var-get($theme, 'date-disabled-range-foreground');
180194
}
195+
196+
&[part~='first'],
197+
&[part~='last'] {
198+
border-radius: var-get($theme, 'date-range-border-radius');
199+
200+
&::after {
201+
border-radius: var-get($theme, 'date-range-border-radius');
202+
}
203+
}
204+
205+
&[part~='special'] {
206+
border-radius: var-get($theme, 'date-special-border-radius');
207+
208+
&::after {
209+
border-radius: var-get($theme, 'date-special-border-radius');
210+
}
211+
}
212+
213+
&[part~='current'] {
214+
border-radius: var-get($theme, 'date-current-border-radius');
215+
}
216+
217+
&[part~='special'][part~='current'] {
218+
border-radius: var-get($theme, 'date-current-border-radius');
219+
220+
&::after {
221+
border-radius: var-get($theme, 'date-current-border-radius');
222+
}
223+
}
181224
}
182225

183226
[part~='date-inner']:not([part~='inactive']) {
@@ -285,7 +328,6 @@ $border-size: rem(1px);
285328
position: absolute;
286329
z-index: 0;
287330
border: rem(1px) solid var-get($theme, 'date-special-border-color');
288-
border-radius: calc(var-get($theme, 'size') / 2);
289331
width: var-get($theme, 'size');
290332
height: var-get($theme, 'size');
291333
box-sizing: border-box;

‎src/components/calendar/themes/shared/fluent/days-view.fluent.scss‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,16 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
6868
height: var-get($theme, 'size');
6969
border-radius: var-get($theme, 'date-border-radius');
7070

71+
&::after {
72+
content: '';
73+
position: absolute;
74+
z-index: 0;
75+
border: $border-size solid transparent;
76+
border-radius: inherit;
77+
width: var-get($theme, 'inner-size');
78+
height: var-get($theme, 'inner-size');
79+
}
80+
7181
&[part~='inactive']:not([part~='selected'][part~='range']) {
7282
color: var-get($theme, 'inactive-color');
7383
}
@@ -78,16 +88,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
7888
}
7989
}
8090

81-
&::after {
82-
content: '';
83-
position: absolute;
84-
z-index: 0;
85-
border: $border-size solid transparent;
86-
border-radius: 50%;
87-
width: var-get($theme, 'inner-size');
88-
height: var-get($theme, 'inner-size');
89-
}
90-
9191
&[part~='disabled']:not([part~='special'],[part~='current'], [part~='disabled']) {
9292
color: var-get($theme, 'date-disabled-foreground');
9393
}
@@ -103,6 +103,30 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
103103

104104
&[part~='range'] {
105105
height: 100%;
106+
border-radius: var-get($theme, 'date-range-border-radius');
107+
}
108+
109+
&[part~='selected'][part~='first'][part~='last'] {
110+
border-radius: var-get($theme, 'date-range-border-radius');
111+
}
112+
113+
&[part~='special'] {
114+
&::after {
115+
border-radius: var-get($theme, 'date-special-border-radius');
116+
}
117+
}
118+
119+
&[part~='current'] {
120+
&::before {
121+
border-radius: var-get($theme, 'date-current-border-radius');
122+
}
123+
}
124+
125+
&[part~='current'][part~='special'] {
126+
&::before,
127+
&::after {
128+
border-radius: var-get($theme, 'date-current-border-radius');
129+
}
106130
}
107131
}
108132

@@ -128,7 +152,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
128152
position: absolute;
129153
z-index: 0;
130154
border: $border-size solid transparent;
131-
border-radius: 50%;
132155
width: var-get($theme, 'inner-size');
133156
height: var-get($theme, 'inner-size');
134157
}
@@ -137,33 +160,24 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
137160
&[part~='selected'][part~='first'][part~='last'] {
138161
background: transparent;
139162
border-color: var-get($theme, 'date-range-preview-border-color');
140-
border-radius: var-get($theme, 'date-range-border-radius');
141163
}
142164

143-
&[part~='selected'] {
165+
166+
&[part~='selected']:not([part~='range']) {
144167
color: var-get($theme, 'date-selected-foreground');
145168
background: var-get($theme, 'date-selected-background');
169+
border-color: var-get($theme, 'date-selected-border-color');
146170

147171
&:hover {
148172
color: var-get($theme, 'date-selected-hover-foreground');
149173
background: var-get($theme, 'date-selected-hover-background');
150-
}
151-
152-
&:focus {
153-
color: var-get($theme, 'date-selected-focus-foreground');
154-
background: var-get($theme, 'date-selected-focus-background');
155-
}
156-
}
157-
158-
&[part~='selected']:not(&[part~='range']) {
159-
border-color: var-get($theme, 'date-selected-border-color');
160-
161-
&:hover {
162174
border-color: var-get($theme, 'date-selected-hover-border-color');
163175

164176
}
165177

166178
&:focus {
179+
color: var-get($theme, 'date-selected-focus-foreground');
180+
background: var-get($theme, 'date-selected-focus-background');
167181
border-color: var-get($theme, 'date-selected-focus-border-color');
168182
}
169183
}
@@ -186,31 +200,14 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
186200

187201
&[part~='selected'][part~='first'],
188202
&[part~='selected'][part~='last'] {
189-
border-top-color: var-get($theme, 'date-range-border-color');
190-
border-bottom-color: var-get($theme, 'date-range-border-color');
203+
border-inline-color: transparent;
191204

192205
&:hover,
193206
&:focus {
194207
border-inline-start-color: transparent;
195208
}
196209
}
197210

198-
&[part~='selected'][part~='first'] {
199-
border-color: transparent;
200-
border-start-start-radius: var-get($theme, 'date-range-border-radius');
201-
border-end-start-radius: var-get($theme, 'date-range-border-radius');
202-
border-start-end-radius: var-get($theme, 'date-border-radius');
203-
border-end-end-radius: var-get($theme, 'date-border-radius');
204-
}
205-
206-
&[part~='selected'][part~='last'] {
207-
border-color: transparent;
208-
border-start-end-radius: var-get($theme, 'date-range-border-radius');
209-
border-end-end-radius: var-get($theme, 'date-range-border-radius');
210-
border-start-start-radius: var-get($theme, 'date-border-radius');
211-
border-end-start-radius: var-get($theme, 'date-border-radius');
212-
}
213-
214211
&[part~='selected'] {
215212
&:hover {
216213
background: var-get($theme, 'date-selected-range-hover-background');
@@ -269,7 +266,6 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
269266
z-index: -1;
270267
width: var-get($theme, 'inner-size');
271268
height: var-get($theme, 'inner-size');
272-
border-radius: 50%;
273269
background: var-get($theme, 'date-current-background');
274270
border-color: var-get($theme, 'date-current-border-color');
275271
}
@@ -369,12 +365,16 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
369365
}
370366

371367
&:hover {
368+
color: var-get($theme, 'date-current-hover-foreground');
369+
372370
&::after {
373371
border-color: var-get($theme, 'date-selected-current-hover-foreground');
374372
}
375373
}
376374

377375
&:focus {
376+
color: var-get($theme, 'date-current-focus-foreground');
377+
378378
&::after {
379379
border-color: var-get($theme, 'date-selected-current-focus-foreground');
380380
}
@@ -394,22 +394,13 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
394394

395395
&[part~='first'],
396396
&[part~='last'] {
397-
&::after {
398-
width: $fake-bg-size;
399-
}
400-
401397
background: transparent;
402398

403399
&::before,
404400
&::after {
405401
height: var-get($theme, 'size');
406402
}
407403

408-
&::after {
409-
background: var-get($theme, 'date-selected-range-background');
410-
border-block: $border-size solid var-get($theme, 'date-selected-range-background');
411-
}
412-
413404
&::before {
414405
content: '';
415406
position: absolute;
@@ -418,11 +409,19 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
418409
z-index: 3;
419410
pointer-events: none;
420411
}
412+
413+
&::after {
414+
width: $fake-bg-size;
415+
background: var-get($theme, 'date-selected-range-background');
416+
border-block: $border-size solid var-get($theme, 'date-selected-range-background');
417+
}
421418
}
422419

423420
&[part~='first'] {
424421
&::after {
425422
inset-inline-start: $fake-bg-position;
423+
border-start-start-radius: var-get($theme, 'date-range-border-radius');
424+
border-end-start-radius: var-get($theme, 'date-range-border-radius');
426425
}
427426

428427
&::before {
@@ -438,6 +437,12 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
438437
}
439438

440439
&[part~='last'] {
440+
&::after {
441+
inset-inline-end: $fake-bg-position;
442+
border-start-end-radius: var-get($theme, 'date-range-border-radius');
443+
border-end-end-radius: var-get($theme, 'date-range-border-radius');
444+
}
445+
441446
&::before {
442447
inset-inline-start: initial;
443448
border-inline: $border-size solid;

‎src/components/calendar/themes/shared/indigo/days-view.indigo.scss‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
6565
height: var-get($theme, 'size');
6666
width: var-get($theme, 'size');
6767
background: var-get($theme, 'content-background');
68-
border-radius: var-get($theme, 'date-border-radius');
68+
border-radius: var-get($theme, 'date-range-border-radius');
6969
}
7070

7171
&::after {
@@ -74,6 +74,20 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
7474
}
7575
}
7676

77+
&[part~='range'][part~='first'][part~='special'],
78+
&[part~='range'][part~='last'][part~='special'] {
79+
&::before {
80+
border-radius: var-get($theme, 'date-special-border-radius');
81+
}
82+
}
83+
84+
&[part~='range'][part~='first'][part~='current'],
85+
&[part~='range'][part~='last'][part~='current'] {
86+
&::before {
87+
border-radius: var-get($theme, 'date-current-border-radius');
88+
}
89+
}
90+
7791
&[part~='range'][part~='preview'] {
7892
background: transparent;
7993
border-top: $border-width dashed var-get($theme, 'date-range-preview-border-color');
@@ -124,6 +138,35 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
124138
&[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview']) {
125139
color: var-get($theme, 'date-disabled-range-foreground');
126140
}
141+
142+
&[part~='first'],
143+
&[part~='last'] {
144+
border-radius: var-get($theme, 'date-range-border-radius');
145+
146+
&::after {
147+
border-radius: var-get($theme, 'date-range-border-radius');
148+
}
149+
}
150+
151+
&[part~='special'] {
152+
border-radius: var-get($theme, 'date-special-border-radius');
153+
154+
&::after {
155+
border-radius: var-get($theme, 'date-special-border-radius');
156+
}
157+
}
158+
159+
&[part~='current'] {
160+
border-radius: var-get($theme, 'date-current-border-radius');
161+
}
162+
163+
&[part~='special'][part~='current'] {
164+
border-radius: var-get($theme, 'date-current-border-radius');
165+
166+
&::after {
167+
border-radius: var-get($theme, 'date-current-border-radius');
168+
}
169+
}
127170
}
128171

129172
[part~='date-inner']:not([part~='inactive']) {
@@ -396,7 +439,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
396439
position: absolute;
397440
z-index: 0;
398441
border: rem(2px) solid transparent;
399-
border-radius: inherit;
400442
width: var-get($theme, 'inner-size');
401443
height: var-get($theme, 'inner-size');
402444
box-sizing: border-box;

0 commit comments

Comments
 (0)