@scania/tegel/dist/collection/components/datetime/datetime.css

Tegel Design System

@supports selector(input::-webkit-datetime-edit) {
  .tds-datetime-input:not(:focus)::-webkit-datetime-edit,
  .tds-datetime-input-md:not(:focus)::-webkit-datetime-edit,
  .tds-datetime-input-sm:not(:focus)::-webkit-datetime-edit {
    color: var(--tds-datetime-placeholder-color);
  }
}
.tds-datetime-input[type=datetime-local] ~ .icon-time,
.tds-datetime-input-md[type=datetime-local] ~ .icon-time,
.tds-datetime-input-sm[type=datetime-local] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=date] ~ .icon-time,
.tds-datetime-input-md[type=date] ~ .icon-time,
.tds-datetime-input-sm[type=date] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=month] ~ .icon-time,
.tds-datetime-input-md[type=month] ~ .icon-time,
.tds-datetime-input-sm[type=month] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=week] ~ .icon-time,
.tds-datetime-input-md[type=week] ~ .icon-time,
.tds-datetime-input-sm[type=week] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=time] ~ .icon-datetime-local,
.tds-datetime-input-md[type=time] ~ .icon-datetime-local,
.tds-datetime-input-sm[type=time] ~ .icon-datetime-local {
  display: none;
}

.tds-datetime-input {
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--tds-datetime-color);
  background-color: var(--tds-datetime-background);
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
}
.tds-datetime-input * {
  box-sizing: border-box;
}
.tds-datetime-input:disabled {
  background-color: var(--tds-datetime-background-disabled);
  color: var(--tds-datetime-color-disabled);
  cursor: not-allowed;
}
.tds-datetime-input:disabled ~ .tds-datetime-label-inside {
  color: var(--tds-datetime-label-disabled);
}
.tds-datetime-input.iphone {
  padding: 0;
}

.tds-datetime-input-md,
.tds-datetime-input-sm {
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--tds-datetime-color);
  background-color: var(--tds-datetime-background);
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-16);
}
.tds-datetime-input-md *,
.tds-datetime-input-sm * {
  box-sizing: border-box;
}
.tds-datetime-input-md:disabled,
.tds-datetime-input-sm:disabled {
  background-color: var(--tds-datetime-background-disabled);
  color: var(--tds-datetime-color-disabled);
  cursor: not-allowed;
}
.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside,
.tds-datetime-input-sm:disabled ~ .tds-datetime-label-inside {
  color: var(--tds-datetime-label-disabled);
}
.tds-datetime-input-md.iphone,
.tds-datetime-input-sm.iphone {
  padding: 0;
}

.tds-datetime-container {
  border-radius: 4px 4px 0 0;
  display: flex;
  position: relative;
  height: 56px;
  box-sizing: border-box;
  background-color: var(--tds-datetime-background);
  border-bottom: 1px solid var(--tds-datetime-border-bottom);
  transition: border-bottom-color 200ms ease;
}
.tds-datetime-container:hover {
  border-bottom-color: var(--tds-datetime-border-bottom-hover);
}
.tds-form-datetime-md .tds-datetime-container {
  height: 48px;
}
.tds-form-datetime-sm .tds-datetime-container {
  height: 40px;
}

.tds-datetime-input-container {
  position: relative;
  width: 100%;
}
.tds-datetime-input-container .datetime-icon {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  pointer-events: none;
  color: var(--tds-datetime-icon);
}

.tds-datetime-label {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: block;
  margin-bottom: var(--tds-spacing-element-8);
  color: var(--tds-datetime-label-color);
}

.tds-datetime-label-inside {
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  position: absolute;
  pointer-events: none;
  color: var(--tds-datetime-label-inside-color);
  left: 16px;
}

.tds-form-datetime {
  display: block;
  min-width: 208px;
  background: unset;
}
.tds-form-datetime-nomin {
  min-width: auto;
}

.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input {
  padding-top: var(--tds-spacing-element-24);
  padding-bottom: 15px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
  top: 20px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input.iphone {
  padding: 0;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm {
  padding-top: var(--tds-spacing-element-20);
  padding-bottom: 11px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
  top: 16px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md.iphone,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm.iphone {
  padding: 0;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
  font: var(--tds-detail-07);
  letter-spacing: var(--tds-detail-07-ls);
  transition: 0.1s ease all;
  top: 8px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
  font: var(--tds-detail-07);
  letter-spacing: var(--tds-detail-07-ls);
  transition: 0.1s ease all;
  top: 12px;
}

.tds-datetime-focus .tds-datetime-input,
.tds-datetime-focus .tds-datetime-input-md,
.tds-datetime-focus .tds-datetime-input-sm {
  border-radius: 0;
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: inset 0 0 0 3px var(--tds-white);
  outline-offset: -2px;
  z-index: 1;
}
.tds-datetime-focus .tds-datetime-container {
  border-bottom: none;
}

.tds-datetime-helper {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: block;
  flex-basis: 100%;
  padding: var(--tds-spacing-element-4) 0;
  color: var(--tds-datetime-helper);
}
.tds-datetime-helper .tds-helper {
  display: inline-flex;
  gap: 8px;
}

.tds-form-datetime-disabled .tds-datetime-container {
  border-bottom-color: transparent;
}
.tds-form-datetime-disabled .datetime-icon tds-icon {
  color: var(--tds-datetime-icon-disabled);
}
.tds-form-datetime-disabled .tds-datetime-label {
  color: var(--tds-datetime-label-disabled);
  cursor: not-allowed;
}
.tds-form-datetime-disabled .tds-datetime-helper {
  color: var(--tds-datetime-helper-disabled);
}

.tds-form-datetime-success .tds-datetime-container {
  border-bottom-color: var(--tds-datetime-border-bottom-success);
  color: var(--tds-datetime-color-success);
}

.tds-form-datetime-error .tds-datetime-helper {
  color: var(--tds-datetime-helper-error);
}
.tds-form-datetime-error .tds-datetime-helper .tds-helper {
  display: flex;
  gap: var(--tds-spacing-element-8);
  flex-wrap: nowrap;
}
.tds-form-datetime-error .tds-datetime-container {
  border-bottom-color: var(--tds-datetime-border-bottom-error);
}

.tds-datetime-textcounter {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  color: var(--tds-datetime-textcounter);
  float: right;
}
.tds-datetime-textcounter .tds-datetime-textcounter-divider {
  letter-spacing: var(--tds-detail-05-ls);
  color: var(--tds-datetime-textcounter-divider);
}

/* Datetime picker icon remove testing */
input[type=datetime-local]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=month]::-webkit-inner-spin-button,
input[type=month]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=week]::-webkit-inner-spin-button,
input[type=week]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

@supports (-moz-appearance: none) {
  .type-datetime-local .icon-datetime-local,
  .type-date .icon-datetime-local {
    display: none;
  }
}