mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
412 lines
7.8 KiB
SCSS
412 lines
7.8 KiB
SCSS
@import "./datetime.vars";
|
|
|
|
// Datetime
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background: The primary background of the datetime component.
|
|
* @prop --background-rgb: The primary background of the datetime component in RGB format.
|
|
* @prop --title-color: The text color of the title.
|
|
*/
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
background: var(--background);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
:host(.datetime-size-fixed) {
|
|
width: auto;
|
|
max-width: 350px;
|
|
height: auto;
|
|
}
|
|
|
|
:host(.datetime-size-cover) {
|
|
width: 100%;
|
|
}
|
|
|
|
:host .calendar-body,
|
|
:host .datetime-year {
|
|
opacity: 0;
|
|
}
|
|
|
|
:host(:not(.datetime-ready)) .datetime-year {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host(.datetime-ready) .calendar-body {
|
|
opacity: 1;
|
|
}
|
|
|
|
:host(.datetime-ready) .datetime-year {
|
|
display: none;
|
|
|
|
opacity: 1;
|
|
}
|
|
/**
|
|
* Changing the physical order of the
|
|
* picker columns in the DOM is added
|
|
* work, so we just use `order` instead.
|
|
*
|
|
* The picker automatically configures
|
|
* the text alignment, so when switching
|
|
* the order we need to manually switch
|
|
* the text alignment too.
|
|
*/
|
|
:host .datetime-year .order-month-first .month-column {
|
|
order: 1;
|
|
}
|
|
|
|
:host .datetime-year .order-month-first .year-column {
|
|
order: 2;
|
|
}
|
|
|
|
:host .datetime-year .order-year-first .month-column {
|
|
order: 2;
|
|
|
|
text-align: end;
|
|
}
|
|
|
|
:host .datetime-year .order-year-first .year-column {
|
|
order: 1;
|
|
|
|
text-align: start;
|
|
}
|
|
|
|
// Calendar
|
|
// -----------------------------------
|
|
|
|
/**
|
|
* This allows the calendar to take
|
|
* up 100% of the remaining height.
|
|
* On iOS, if there are more than
|
|
* 5 rows of dates, the dates should
|
|
* be resized to fit into this
|
|
* container.
|
|
*/
|
|
:host .datetime-calendar,
|
|
:host .datetime-year {
|
|
display: flex;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
flex-flow: column;
|
|
}
|
|
|
|
:host(.show-month-and-year) .datetime-year {
|
|
display: flex;
|
|
}
|
|
|
|
/**
|
|
* Safari 14 has an issue where Intersection
|
|
* Observer is incorrectly fired when
|
|
* unhiding the calendar content.
|
|
* To workaround this, we set the opacity
|
|
* of the content to 0 and hide it offscreen.
|
|
*
|
|
* -webkit-named-image is something only WebKit supports
|
|
* so we use this to detect general WebKit support.
|
|
* aspect-ratio is only supported in Safari 15+
|
|
* so by checking lack of aspect-ratio support, we know
|
|
* that we are in a pre-Safari 15 browser.
|
|
*
|
|
* TODO(FW-554): Remove when iOS 14 support is dropped.
|
|
*/
|
|
@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)) {
|
|
:host(.show-month-and-year) .calendar-next-prev,
|
|
:host(.show-month-and-year) .calendar-days-of-week,
|
|
:host(.show-month-and-year) .calendar-body,
|
|
:host(.show-month-and-year) .datetime-time {
|
|
@include position(null, null, null, -99999px);
|
|
|
|
position: absolute;
|
|
|
|
/**
|
|
* Use visibility instead of
|
|
* opacity to ensure element
|
|
* cannot receive focus
|
|
*/
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* This support check two cases:
|
|
* 1. A WebKit browser that supports aspect-ratio (Safari 15+)
|
|
* 2. Any non-WebKit browser.
|
|
* Note that just overriding this display: none is not
|
|
* sufficient to resolve the issue mentioned above, which
|
|
* is why we do another set of @supports checks.
|
|
*/
|
|
@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
|
|
:host(.show-month-and-year) .calendar-next-prev,
|
|
:host(.show-month-and-year) .calendar-days-of-week,
|
|
:host(.show-month-and-year) .calendar-body,
|
|
:host(.show-month-and-year) .datetime-time {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
:host(.datetime-readonly),
|
|
:host(.datetime-disabled) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host(.datetime-disabled) {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/**
|
|
* Title should not wrap
|
|
* to the next line and should
|
|
* show ellipsis instead.
|
|
*/
|
|
:host .datetime-header .datetime-title {
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Calendar / Header / Action Buttons
|
|
// -----------------------------------
|
|
|
|
:host .datetime-action-buttons.has-clear-button {
|
|
width: 100%;
|
|
}
|
|
|
|
:host .datetime-action-buttons ion-buttons {
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/**
|
|
* Date/Year button should be on
|
|
* the opposite side of the component
|
|
* as the Next/Prev buttons
|
|
*/
|
|
:host .calendar-action-buttons {
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
:host .calendar-action-buttons ion-item,
|
|
:host .calendar-action-buttons ion-button {
|
|
--background: translucent;
|
|
}
|
|
|
|
:host .calendar-action-buttons ion-item ion-label {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
:host .calendar-action-buttons ion-item ion-icon {
|
|
@include padding(0, 0, 0, 4px);
|
|
}
|
|
|
|
// Calendar / Header / Days of Week
|
|
// -----------------------------------
|
|
:host .calendar-days-of-week {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
// Calendar / Body
|
|
// -----------------------------------
|
|
:host .calendar-body {
|
|
|
|
/**
|
|
* Show all calendar months inline
|
|
* and allow them to take up 100% of
|
|
* the free space. Do not use CSS Grid
|
|
* here as there are issues with nested grid
|
|
* on older browsers.
|
|
*/
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
scroll-snap-type: x mandatory;
|
|
|
|
/**
|
|
* Need to explicitly set overflow-y: hidden
|
|
* for older implementations of scroll snapping.
|
|
*/
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
|
|
// Hide scrollbars on Firefox
|
|
scrollbar-width: none;
|
|
|
|
/**
|
|
* Hide blue outline on calendar body
|
|
* when it is focused.
|
|
*/
|
|
outline: none;
|
|
}
|
|
|
|
:host .calendar-body .calendar-month {
|
|
/**
|
|
* Swiping should snap to at
|
|
* most one month at a time.
|
|
*/
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
|
|
flex-shrink: 0;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
:host .calendar-body .calendar-month-disabled {
|
|
/**
|
|
* Disables swipe gesture snapping for scroll-snap containers
|
|
*/
|
|
scroll-snap-align: none;
|
|
}
|
|
|
|
/**
|
|
* Hide scrollbars on Chrome and Safari
|
|
*/
|
|
:host .calendar-body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
:host .calendar-body .calendar-month-grid {
|
|
/**
|
|
* Create 7 columns for
|
|
* 7 days in a week.
|
|
*/
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
|
|
height: 100%;
|
|
}
|
|
|
|
/**
|
|
* Center the day text vertically
|
|
* and horizontally within its grid cell.
|
|
*/
|
|
:host .calendar-day {
|
|
@include padding(0px, 0px, 0px, 0px);
|
|
@include margin(0px, 0px, 0px, 0px);
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
border: none;
|
|
|
|
outline: none;
|
|
|
|
background: none;
|
|
color: currentColor;
|
|
|
|
cursor: pointer;
|
|
|
|
appearance: none;
|
|
|
|
z-index: 0;
|
|
}
|
|
|
|
:host .calendar-day[disabled] {
|
|
pointer-events: none;
|
|
|
|
opacity: 0.4;
|
|
}
|
|
|
|
:host .calendar-day:after {
|
|
@include border-radius(32px, 32px, 32px, 32px);
|
|
@include padding(4px, 4px, 4px, 4px);
|
|
/**
|
|
* Explicit position values are required here
|
|
* as pseudo element positioning is incorrect
|
|
* in older implementations of css grid.
|
|
*/
|
|
|
|
@include position(50%, null, null, 50%);
|
|
|
|
position: absolute;
|
|
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
content: " ";
|
|
|
|
z-index: -1;
|
|
}
|
|
|
|
// Time / Header
|
|
// -----------------------------------
|
|
|
|
:host .datetime-time {
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
:host(.datetime-presentation-time) .datetime-time {
|
|
@include padding(0);
|
|
}
|
|
|
|
:host ion-popover {
|
|
--height: 200px;
|
|
}
|
|
|
|
:host .time-header {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
:host .time-body {
|
|
@include border-radius(8px);
|
|
@include padding(6px, 12px, 6px, 12px);
|
|
|
|
display: flex;
|
|
|
|
border: none;
|
|
|
|
background: var(--ion-color-step-300, #edeef0);
|
|
|
|
color: $text-color;
|
|
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
|
|
cursor: pointer;
|
|
|
|
appearance: none;
|
|
}
|
|
|
|
:host .time-body-active {
|
|
color: current-color(base);
|
|
}
|
|
|
|
:host(.in-item) {
|
|
position: static;
|
|
}
|
|
|
|
// Year Picker
|
|
// -----------------------------------
|
|
:host(.show-month-and-year) .calendar-action-buttons ion-item {
|
|
--color: #{current-color(base)};
|
|
}
|