mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
128 lines
3.1 KiB
SCSS
128 lines
3.1 KiB
SCSS
@use "../../themes/native/native.globals" as globals;
|
|
@use "./datetime.common";
|
|
|
|
// Datetime: Native Styles
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background-rgb: The primary background of the datetime component in RGB format.
|
|
* @prop --title-color: The text color of the title.
|
|
*
|
|
* @prop --wheel-highlight-background: The background of the highlight under the selected
|
|
* item when using a wheel style layout, or in the month/year picker for grid style layouts.
|
|
* @prop --wheel-highlight-border-radius: The border radius of the highlight under the selected
|
|
* item when using a wheel style layout, or in the month/year picker for grid style layouts.
|
|
* @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`.
|
|
*/
|
|
}
|
|
|
|
:host(.datetime-size-fixed:not(.datetime-prefer-wheel)) {
|
|
max-width: 350px;
|
|
}
|
|
|
|
/**
|
|
* This ensures that the picker is appropriately
|
|
* sized and never truncates the text.
|
|
*/
|
|
:host(.datetime-size-fixed.datetime-prefer-wheel) {
|
|
min-width: 350px;
|
|
max-width: max-content;
|
|
}
|
|
|
|
:host .calendar-action-buttons ion-button {
|
|
--background: transparent;
|
|
}
|
|
|
|
/**
|
|
* Center the day text vertically
|
|
* and horizontally within its grid cell.
|
|
*/
|
|
.calendar-day {
|
|
@include globals.border-radius(50%);
|
|
|
|
font-family: globals.$font-family-base;
|
|
}
|
|
|
|
:host .calendar-day[disabled] {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.calendar-day:focus {
|
|
background: globals.current-color(base, 0.2);
|
|
|
|
box-shadow: 0px 0px 0px 4px globals.current-color(base, 0.2);
|
|
}
|
|
|
|
// Time / Header
|
|
// -----------------------------------
|
|
|
|
:host(.datetime-presentation-time) .datetime-time {
|
|
@include globals.padding(0);
|
|
}
|
|
|
|
:host ion-popover {
|
|
--height: 200px;
|
|
}
|
|
|
|
:host .time-body {
|
|
@include globals.border-radius(8px);
|
|
@include globals.padding(6px, 12px, 6px, 12px);
|
|
|
|
background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
|
|
|
|
color: globals.$text-color;
|
|
}
|
|
|
|
:host .time-body-active {
|
|
color: globals.current-color(base);
|
|
}
|
|
|
|
// Year Picker
|
|
// -----------------------------------
|
|
|
|
:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
|
|
color: globals.current-color(base);
|
|
}
|
|
|
|
.calendar-month-year-toggle {
|
|
&::after {
|
|
@include globals.button-state();
|
|
|
|
transition: opacity 15ms linear, background-color 15ms linear;
|
|
|
|
z-index: -1;
|
|
}
|
|
|
|
&.ion-focused::after {
|
|
background: currentColor;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.calendar-month-year-toggle ion-icon {
|
|
@include globals.padding(0, 0, 0, 4px);
|
|
}
|
|
|
|
// Picker Custom Variables
|
|
// -----------------------------------
|
|
|
|
ion-picker {
|
|
--highlight-background: var(--wheel-highlight-background);
|
|
--highlight-border-radius: var(--wheel-highlight-border-radius);
|
|
--fade-background-rgb: var(--wheel-fade-background-rgb);
|
|
}
|
|
|
|
// Calendar / Footer / Action Buttons
|
|
// -----------------------------------
|
|
|
|
:host .datetime-action-buttons ion-buttons {
|
|
justify-content: space-between;
|
|
}
|