@ionic/core
Version:
Base components for Ionic
88 lines (80 loc) • 2.13 kB
CSS
:host {
/**
* @prop --padding-top: Padding top of the datetime
* @prop --padding-end: Padding end of the datetime
* @prop --padding-bottom: Padding bottom of the datetime
* @prop --padding-start: Padding start of the datetime
*
* @prop --placeholder-color: Color of the datetime placeholder
*/
padding-left: var(--padding-start);
padding-right: var(--padding-end);
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
display: flex;
position: relative;
min-width: 16px;
min-height: 1.2em;
font-family: var(--ion-font-family, inherit);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
z-index: 2; }
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
:host {
padding-left: unset;
padding-right: unset;
-webkit-padding-start: var(--padding-start);
padding-inline-start: var(--padding-start);
-webkit-padding-end: var(--padding-end);
padding-inline-end: var(--padding-end); } }
:host(.in-item) {
position: static; }
:host(.datetime-placeholder) {
color: var(--placeholder-color); }
:host(.datetime-disabled) {
opacity: .3;
pointer-events: none; }
:host(.datetime-readonly) {
pointer-events: none; }
button {
left: 0;
top: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
position: absolute;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
appearance: none;
outline: none; }
:host-context([dir=rtl]) button {
right: 0; }
button::-moz-focus-inner {
border: 0; }
.datetime-text {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: inherit;
text-overflow: inherit;
text-transform: inherit;
text-align: inherit;
white-space: inherit;
color: inherit;
flex: 1;
min-height: inherit;
direction: ltr;
overflow: inherit; }
:host {
--placeholder-color: var(--ion-color-step-400, #999999);
--padding-top: 10px;
--padding-end: 8px;
--padding-bottom: 10px;
--padding-start: 16px; }