feat(datetime): add ionic theme styles to time label (#29829)

Issue number: internal
---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

No `ionic` theme styles for the datetime time label

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Adds styles to the time label for the `ionic` theme

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


[Preview](https://ionic-framework-6m937m00k-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)
This commit is contained in:
Tanner Reits
2024-09-04 09:08:49 -04:00
committed by GitHub
parent 6aa47d363f
commit 9a8c49ae7f
7 changed files with 27 additions and 0 deletions

View File

@@ -173,3 +173,30 @@
.calendar-day:active {
background: globals.$ionic-color-primary-300;
}
// Time / Header
// -----------------------------------
:host .datetime-time {
@include globals.padding(globals.$ionic-space-100, globals.$ionic-space-400);
height: globals.$ionic-scale-800;
}
:host .datetime-time .time-header {
@include globals.typography(globals.$ionic-action-lg);
color: globals.$ionic-color-neutral-800;
}
:host .datetime-time button {
@include globals.padding(globals.$ionic-space-0, globals.$ionic-space-200);
@include globals.typography(globals.$ionic-body-md-medium);
@include globals.border-radius(globals.$ionic-border-radius-full);
display: flex;
align-items: center;
background-color: globals.$ionic-color-neutral-100;
color: globals.$ionic-color-neutral-1200;
}

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB