javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: --range-background css variable

Browse Source
This commit is contained in:
Sean Perkins
2024-01-19 21:07:09 -05:00
parent 0ddd5d51a4
commit 2813725dab
3 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/datetime/datetime.ios.scss
View File

@@ -5,6 +5,7 @@
:host {
--background: var(--ion-color-light, #ffffff);
--background-rgb: var(--ion-color-light-rgb);
--range-background: #{current-color(base, 0.1)};
--title-color: #{$text-color-step-400};
}
@@ -222,7 +223,7 @@
}
:host .calendar-day-wrapper {
@include padding(4px);
@include padding(2px);
// This is required so that the calendar day wrapper
// will collapse instead of expanding to fill the button
@@ -315,16 +316,16 @@
position: relative;
&:not(.calendar-day-range-start):not(.calendar-day-range-end) {
background: current-color(base, 0.1);
background: var(--range-background);
}
&.calendar-day-range-start,
&.calendar-day-range-end {
.calendar-day {
background: var(--ion-color-base);
&.calendar-day-range-start .calendar-day,
&.calendar-day-range-end .calendar-day {
background: var(--ion-color-base);
color: var(--ion-color-contrast);
}
color: var(--ion-color-contrast);
z-index: 1;
}
&.calendar-day-range-start:not(.calendar-day-range-end)::after,
@@ -346,12 +347,12 @@
&.calendar-day-range-start::after {
@include position(null, 0, null, null);
background: current-color(base, 0.1);
background: var(--range-background);
}
&.calendar-day-range-end::before {
@include position(null, null, null, 0);
background: current-color(base, 0.1);
background: var(--range-background);
}
}

10
core/src/components/datetime/datetime.md.scss
View File

@@ -4,6 +4,7 @@
:host {
--background: var(--ion-color-step-100, #ffffff);
--range-background: #{current-color(base, 0.1)};
--title-color: #{current-color(contrast)};
}
@@ -174,7 +175,12 @@
position: relative;
&:not(.calendar-day-range-start):not(.calendar-day-range-end) {
background: current-color(base, 0.1);
background: var(--range-background);
}
&.calendar-day-range-start .calendar-day,
&.calendar-day-range-end .calendar-day {
z-index: 1;
}
&.calendar-day-range-start:not(.calendar-day-range-end)::after,
@@ -184,7 +190,7 @@
width: 50%;
height: 100%;
background: current-color(base, 0.1);
background: var(--range-background);
content: " ";
}

2
core/src/components/datetime/datetime.scss
View File

@@ -16,6 +16,8 @@
* @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
* when using a wheel style layout, or in the month/year picker for grid style layouts. Must
* be in RGB format, e.g. `255, 255, 255`.
*
* @prop --range-background: The background of the range track between a start and end date.
*/
display: flex;