mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
301 lines
8.2 KiB
SCSS
301 lines
8.2 KiB
SCSS
@import "./datetime.scss";
|
|
@import "./datetime.ios.vars.scss";
|
|
@import "../../themes/ionic.globals.ios";
|
|
|
|
:host {
|
|
--background: #{ion-color(light, base)};
|
|
--background-rgb: #{ion-color(light, base, null, true)};
|
|
--title-color: #{$text-color-step-400};
|
|
}
|
|
|
|
:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
|
|
:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),
|
|
:host(.datetime-presentation-date:not(.datetime-prefer-wheel)) {
|
|
min-height: 350px;
|
|
}
|
|
|
|
// Header
|
|
// -----------------------------------
|
|
:host .datetime-header {
|
|
@include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
|
|
|
|
border-bottom: $datetime-ios-border-color;
|
|
|
|
font-size: dynamic-font-max(14px, 1.6);
|
|
}
|
|
|
|
:host .datetime-header .datetime-title {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
:host .datetime-header .datetime-selected-date {
|
|
@include margin(10px, null, null, null);
|
|
}
|
|
|
|
// Calendar / Header / Action Buttons
|
|
// -----------------------------------
|
|
.calendar-month-year-toggle {
|
|
@include padding(0px, 16px, 0px, #{$datetime-ios-padding});
|
|
|
|
min-height: 44px;
|
|
|
|
font-size: dynamic-font-max(16px, 1.6);
|
|
font-weight: 600;
|
|
|
|
&.ion-focused::after {
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
.calendar-month-year-toggle #toggle-wrapper {
|
|
@include margin(10px, 8px, 10px, 0);
|
|
}
|
|
|
|
:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
|
|
:host .calendar-action-buttons ion-buttons ion-button {
|
|
color: current-color(base);
|
|
}
|
|
|
|
:host .calendar-action-buttons ion-buttons {
|
|
@include padding($datetime-ios-padding * 0.5, 0, 0, 0);
|
|
}
|
|
|
|
:host .calendar-action-buttons ion-buttons ion-button {
|
|
@include margin(0, 0, 0, 0);
|
|
}
|
|
|
|
// Calendar / Header / Days of Week
|
|
// -----------------------------------
|
|
:host .calendar-days-of-week {
|
|
@include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5);
|
|
|
|
color: $text-color-step-700;
|
|
|
|
font-size: dynamic-font-max(12px, 1.6);
|
|
|
|
font-weight: 600;
|
|
|
|
line-height: 24px;
|
|
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@supports (border-radius: mod(1px, 1px)) {
|
|
.calendar-days-of-week .day-of-week {
|
|
/**
|
|
* When the computed font size is 24px
|
|
* we want the days of the week to only
|
|
* show the first letter of each day.
|
|
*
|
|
* We use the modulus operator to ensure
|
|
* that any font size less than 24px is
|
|
* unchanged (i.e. 16 % 24 = 16). If the
|
|
* font size is 24px then the remainder
|
|
* will be 0.
|
|
*/
|
|
$max-font-size: min(1rem, $datetime-dynamic-font-breakpoint);
|
|
$remainder: mod($max-font-size, $datetime-dynamic-font-breakpoint);
|
|
|
|
/**
|
|
* From here, we scale the remainder to get
|
|
* a width value larger than 20px.
|
|
* We then clamp the width to have a max width
|
|
* of 100% so that each element does not appear
|
|
* too wide if $width is a very large number.
|
|
*
|
|
* When the font size is >=24px then $remainder
|
|
* will be 0px. This results in $width being 0px
|
|
* since 0px * 10 is still 0px. We set a minimum
|
|
* width of 20px below so that the days of the
|
|
* week still show when the font size is >=24px
|
|
* and have a fixed width of 20px.
|
|
*
|
|
* The days of the week text on iOS have a maximum font size
|
|
* that is no larger than 20px, so setting a minimum width
|
|
* of 20px ensures that the text will always fit. (See font-size
|
|
* declaration in the .calendar-days-of-week block).
|
|
*/
|
|
$width: calc($remainder * 10);
|
|
width: clamp(20px, #{$width}, 100%);
|
|
|
|
/**
|
|
* We show the first letter of the week
|
|
* by setting the width small such that all other
|
|
* letters wrap to the next line. While we do have
|
|
* overflow: hidden to visually hide the overflowing
|
|
* text, we need to explicitly set the height of the
|
|
* container too otherwise it will increase as the text wraps.
|
|
*/
|
|
height: $datetime-dynamic-font-breakpoint;
|
|
|
|
/**
|
|
* The above width will cause
|
|
* all the other letters to overflow
|
|
* to other lines. The below code hides
|
|
* those additional letters so only
|
|
* the first letter is shown.
|
|
*/
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-day {
|
|
/**
|
|
* We use the modulus operator to ensure
|
|
* that any font size less than 24px is
|
|
* unchanged (i.e. 16 % 24 = 16). If the
|
|
* font size is 24px then the remainder
|
|
* will be 0.
|
|
*/
|
|
$maxFontSize: min(1rem, $datetime-dynamic-font-breakpoint);
|
|
$remainder: mod($maxFontSize, $datetime-dynamic-font-breakpoint);
|
|
|
|
/**
|
|
* From here, we scale the remainder. The purpose of
|
|
* scaling the remainder is to get a border radius
|
|
* large enough such that the element's
|
|
* shape is a circle.
|
|
*
|
|
* Note that when the font size is 24px
|
|
* then the remainder will be 0, so $radius
|
|
* will still be zero.
|
|
*/
|
|
$radius: calc($remainder * 10);
|
|
|
|
/**
|
|
* In the event that $radius is 0
|
|
* we use max() to ensure a minimum
|
|
* border radius of 8px which will
|
|
* give the day button the rounded
|
|
* rectangle appearance.
|
|
* For font sizes smaller than 24px
|
|
* the border radius will give a circle appearance.
|
|
*/
|
|
@include border-radius(max(8px, $radius));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* iOS <17 has a bug where the result of mod() is
|
|
* used incorrectly if used inside of another CSS function such
|
|
* as calc(). The first set of @support checks accounts for iOS <17.
|
|
* We check -webkit-named-image to ensure that non-WebKit browsers are ignored.
|
|
* The second set of @support checks account for all other browsers that
|
|
* do not support mod() yet.
|
|
*/
|
|
@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))) {
|
|
.calendar-days-of-week .day-of-week {
|
|
width: auto;
|
|
height: auto;
|
|
|
|
overflow: initial;
|
|
}
|
|
|
|
.calendar-day {
|
|
@include border-radius(32px);
|
|
}
|
|
}
|
|
|
|
// Calendar / Body
|
|
// -----------------------------------
|
|
:host .calendar-body .calendar-month .calendar-month-grid {
|
|
|
|
/**
|
|
* We need to apply the padding to
|
|
* each month grid item otherwise
|
|
* older versions of WebKit will consider
|
|
* this padding a snapping point if applied
|
|
* on .calendar-month
|
|
*/
|
|
@include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
|
|
|
|
align-items: center;
|
|
|
|
height: calc(100% - #{$datetime-ios-padding});
|
|
}
|
|
|
|
:host .calendar-day-wrapper {
|
|
@include padding(4px);
|
|
|
|
// This is required so that the calendar day wrapper
|
|
// will collapse instead of expanding to fill the button
|
|
height: 0;
|
|
|
|
min-height: dynamic-font(16px);
|
|
}
|
|
|
|
:host .calendar-day {
|
|
width: $datetime-ios-day-width;
|
|
min-width: $datetime-ios-day-width;
|
|
|
|
height: $datetime-ios-day-height;
|
|
|
|
font-size: dynamic-font-max(20px, 1.6);
|
|
}
|
|
|
|
.calendar-day.calendar-day-active {
|
|
background: current-color(base, 0.2);
|
|
|
|
font-size: dynamic-font-max(22px, 1.6);
|
|
}
|
|
|
|
/**
|
|
* Day that today but not selected
|
|
* should have ion-color for text color.
|
|
*/
|
|
:host .calendar-day.calendar-day-today {
|
|
color: current-color(base);
|
|
}
|
|
|
|
/**
|
|
* Day that is not today but
|
|
* is selected should have ion-color for
|
|
* text color and be bolder.
|
|
*/
|
|
:host .calendar-day.calendar-day-active {
|
|
color: current-color(base);
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
/**
|
|
* Day that is selected and is today
|
|
* should have base background color
|
|
* with contrast text.
|
|
*/
|
|
:host .calendar-day.calendar-day-today.calendar-day-active {
|
|
background: current-color(base);
|
|
color: current-color(contrast);
|
|
}
|
|
|
|
// Time / Header
|
|
// -----------------------------------
|
|
:host .datetime-time {
|
|
@include padding($datetime-ios-padding * 0.5, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
|
|
|
|
font-size: dynamic-font-max(16px, 1.6);
|
|
}
|
|
|
|
:host .datetime-time .time-header {
|
|
font-weight: 600;
|
|
}
|
|
|
|
// Footer
|
|
// -----------------------------------
|
|
:host .datetime-buttons {
|
|
@include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
|
|
|
|
border-top: $datetime-ios-border-color;
|
|
}
|
|
|
|
:host .datetime-buttons ::slotted(ion-buttons),
|
|
:host .datetime-buttons ion-buttons {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
:host .datetime-action-buttons {
|
|
width: 100%;
|
|
}
|