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

Tegel Design System

.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::placeholder {
  opacity: 1;
  color: var(--tds-datetime-placeholder);
}
.tds-datetime-input:focus::placeholder {
  color: var(--tds-datetime-placeholder-color-focus);
}
.tds-datetime-input:disabled {
  background-color: var(--tds-datetime-background-disabled);
  color: var(--tds-datetime-color-disabled);
  cursor: not-allowed;
}
.tds-datetime-input:disabled::placeholder {
  color: var(--tds-datetime-placeholder-disabled);
}
.tds-datetime-input:disabled ~ .tds-datetime-label-inside {
  color: var(--tds-datetime-label-disabled);
}

.tds-datetime-input-md {
  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 * {
  box-sizing: border-box;
}
.tds-datetime-input-md::placeholder {
  opacity: 1;
  color: var(--tds-datetime-placeholder);
}
.tds-datetime-input-md:focus::placeholder {
  color: var(--tds-datetime-placeholder-color-focus);
}
.tds-datetime-input-md:disabled {
  background-color: var(--tds-datetime-background-disabled);
  color: var(--tds-datetime-color-disabled);
  cursor: not-allowed;
}
.tds-datetime-input-md:disabled::placeholder {
  color: var(--tds-datetime-placeholder-disabled);
}
.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside {
  color: var(--tds-datetime-label-disabled);
}

.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-sm * {
  box-sizing: border-box;
}
.tds-datetime-input-sm::placeholder {
  opacity: 1;
  color: var(--tds-datetime-placeholder);
}
.tds-datetime-input-sm:focus::placeholder {
  color: var(--tds-datetime-placeholder-color-focus);
}
.tds-datetime-input-sm:disabled {
  background-color: var(--tds-datetime-background-disabled);
  color: var(--tds-datetime-color-disabled);
  cursor: not-allowed;
}
.tds-datetime-input-sm:disabled::placeholder {
  color: var(--tds-datetime-placeholder-disabled);
}
.tds-datetime-input-sm:disabled ~ .tds-datetime-label-inside {
  color: var(--tds-datetime-label-disabled);
}

.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-datetime-label-inside.iphone {
  left: 8px !important;
}

.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::placeholder {
  color: transparent;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ::placeholder {
  color: transparent;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--tds-datetime-placeholder-color-focus);
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md {
  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 {
  top: 16px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md::placeholder {
  color: transparent;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ::placeholder {
  color: transparent;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--tds-datetime-placeholder-color-focus);
}
.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-sm ~ .tds-datetime-label-inside {
  top: 16px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm::placeholder {
  color: transparent;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ::placeholder {
  color: transparent;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--tds-datetime-placeholder-color-focus);
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .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-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-bar {
  position: absolute;
  width: 100%;
}
.tds-datetime-bar::before, .tds-datetime-bar::after {
  content: "";
  height: 2px;
  top: 54px;
  width: 0;
  position: absolute;
  background: var(--tds-datetime-bar);
  transition: 0.35s ease all;
}
.tds-form-datetime-md .tds-datetime-bar::before, .tds-form-datetime-md .tds-datetime-bar::after {
  top: 46px;
}
.tds-form-datetime-sm .tds-datetime-bar::before, .tds-form-datetime-sm .tds-datetime-bar::after {
  top: 40px;
}
.tds-datetime-bar::before {
  left: 50%;
}
.tds-datetime-bar::after {
  right: 50%;
}
.tds-datetime-focus .tds-datetime-bar::before, .tds-datetime-focus .tds-datetime-bar::after {
  width: 50%;
}

.tds-datetime-helper {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: block;
  flex-basis: 100%;
  padding-top: var(--tds-spacing-element-4);
  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-success .tds-datetime-container {
  border-bottom-color: var(--tds-datetime-border-bottom-success);
  color: var(--tds-datetime-color-success);
}
.tds-form-datetime-success .tds-datetime-bar::before, .tds-form-datetime-success .tds-datetime-bar::after {
  background: var(--tds-datetime-bar-sucess);
}

.tds-form-datetime-error .tds-datetime-helper {
  color: var(--tds-datetime-helper-error);
}
.tds-form-datetime-error .tds-datetime-container {
  border-bottom-color: var(--tds-datetime-border-bottom-error);
}
.tds-form-datetime-error .tds-datetime-bar::before, .tds-form-datetime-error .tds-datetime-bar::after {
  background: var(--tds-datetime-bar-error);
}
.tds-form-datetime-error .datetime-icon tds-icon {
  color: var(--tds-datetime-icon-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;
  }
}