fix(datetime): time picker uses new iOS 15 style (#23996)

resolves #23768
ionic-team · Oct 5, 2021 · 0ab37b5 · 0ab37b5
1 parent c204083
commit 0ab37b5
Show file tree

Hide file tree

Showing 14 changed files with 330 additions and 772 deletions.
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
@@ -139,55 +139,10 @@
   @include padding($datetime-ios-padding / 2, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
   font-size: 16px;
-  font-weight: 600;
-}
-
-:host .time-base {
-  @include border-radius($datetime-ios-time-border-radius, $datetime-ios-time-border-radius, $datetime-ios-time-border-radius, $datetime-ios-time-border-radius);
-  @include margin(0, $datetime-ios-padding / 2, 0, 0);
-
-  width: $datetime-ios-time-width;
-  height: $datetime-ios-time-height;
-}
-
-:host .time-column {
-  @include border-radius($datetime-ios-time-border-radius, $datetime-ios-time-border-radius, $datetime-ios-time-border-radius, $datetime-ios-time-border-radius);
-}
-
-:host .time-item {
-  line-height: $datetime-ios-time-height;
-}
-
-// Month and Year Picker
-// -----------------------------------
-
-:host .datetime-year-body .datetime-picker-col {
-  @include padding(0, $datetime-ios-padding, 0, $datetime-ios-padding);
-}
-
-:host .datetime-picker-before {
-  background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
 }
 
-:host .datetime-picker-after {
-  background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
-}
-
-:host .datetime-picker-highlight {
-  @include border-radius($datetime-ios-time-border-radius, $datetime-ios-time-border-radius, $datetime-ios-time-border-radius, $datetime-ios-time-border-radius);
-  @include position(50%, 0, 0, 0);
-  @include margin(0, auto, 0, auto);
-
-  position: absolute;
-
-  width: calc(100% - #{$datetime-ios-padding * 2});
-  height: 34px;
-
-  transform: translateY(-50%);
-
-  background: var(--ion-color-step-150, #eeeeef);
-
-  z-index: -1;
+:host .datetime-time .time-header {
+  font-weight: 600;
 }
 
 // Footer

diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
@@ -117,57 +117,8 @@
   color: #{$text-color-step-350};
 }
 
-:host .time-base {
-  @include border-radius($datetime-md-time-border-radius, $datetime-md-time-border-radius, $datetime-md-time-border-radius, $datetime-md-time-border-radius);
-  @include margin(0, $datetime-md-padding / 2, 0, 0);
-
-  width: $datetime-md-time-width;
-  height: $datetime-md-time-height;
-}
-
-:host .time-column {
-  @include border-radius($datetime-md-time-border-radius, $datetime-md-time-border-radius, $datetime-md-time-border-radius, $datetime-md-time-border-radius);
-}
-
-:host .time-item {
-  line-height: $datetime-md-time-height;
-}
-
-:host .time-ampm ion-segment {
-  @include border-radius($datetime-md-time-border-radius, $datetime-md-time-border-radius, $datetime-md-time-border-radius, $datetime-md-time-border-radius);
-
-  border: 1px solid rgba($text-color-rgb, 0.1);
-}
-
-:host .time-ampm ion-segment-button {
-  --indicator-height: 0px;
-  --background-checked: #{current-color(base, 0.1)};
-
-  min-height: $datetime-md-time-height + 2;
-}
-
-:host .time-ampm ion-segment-button.segment-button-checked {
-  background: var(--background-checked);
-}
-
 // Month and Year
 // -----------------------------------
-:host .datetime-picker-col {
-  @include border-radius($datetime-md-wheel-border-radius, $datetime-md-wheel-border-radius, $datetime-md-wheel-border-radius, $datetime-md-wheel-border-radius);
-  @include padding(null, $datetime-md-wheel-padding, null, $datetime-md-wheel-padding);
-}
-
-:host .picker-col-item {
-  font-size: 18px;
-}
-
-:host .datetime-picker-before {
-  background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%);
-}
-
-:host .datetime-picker-after {
-  background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%);
-}
 
 /**
  * Add some margin when only selecting month/year
@@ -194,7 +145,3 @@
 :host .datetime-view-buttons ion-button {
   color: $text-color-step-200;
 }
-
-:host .picker-col-item-active {
-  color: current-color(base);
-}
diff --git a/core/src/components/datetime/datetime.md.vars.scss b/core/src/components/datetime/datetime.md.vars.scss
@@ -15,18 +15,3 @@ $datetime-md-header-padding:           20px !default;
 
 /// @prop - Padding for content
 $datetime-md-padding:                  16px !default;
-
-/// @prop - Height of the time picker
-$datetime-md-time-height:              28px !default;
-
-/// @prop - Width of the time picker
-$datetime-md-time-width:               68px !default;
-
-/// @prop - Border radius of the time picker
-$datetime-md-time-border-radius:       4px !default;
-
-/// @prop - Border radius of the month and year wheel
-$datetime-md-wheel-border-radius:       8px !default;
-
-/// @prop - Padding of the month and year wheel
-$datetime-md-wheel-padding:             8px !default;