UNPKG

@amsterdam/design-system-css

Version:

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

2 lines (1 loc) 2.03 kB
.ams-date-input{background-color:var(--ams-date-input-background-color);box-shadow:var(--ams-date-input-box-shadow);box-sizing:border-box;color:var(--ams-date-input-color);font-family:var(--ams-date-input-font-family);font-size:var(--ams-date-input-font-size);font-weight:var(--ams-date-input-font-weight);line-height:var(--ams-date-input-line-height);min-block-size:calc(var(--ams-date-input-font-size)*var(--ams-date-input-line-height) + 2*var(--ams-date-input-padding-block));min-inline-size:calc(8ch + 2*var(--ams-date-input-padding-inline));outline-offset:var(--ams-date-input-outline-offset);padding-block:var(--ams-date-input-padding-block);padding-inline:var(--ams-date-input-padding-inline);touch-action:manipulation;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-appearance:none;appearance:none;border:none;border-radius:0;margin-block:0}.ams-date-input:hover{box-shadow:var(--ams-date-input-hover-box-shadow)}.ams-date-input::-webkit-calendar-picker-indicator{appearance:none;background-image:var(--ams-date-input-calender-picker-indicator-background-image);cursor:var(--ams-date-input-calender-picker-indicator-cursor)}.ams-date-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-date-input-hover-calender-picker-indicator-background-image)}.ams-date-input:disabled{background-color:var(--ams-date-input-disabled-background-color);box-shadow:var(--ams-date-input-disabled-box-shadow);color:var(--ams-date-input-disabled-color);cursor:var(--ams-date-input-disabled-cursor)}.ams-date-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-date-input-disabled-calender-picker-indicator-background-image);visibility:visible}.ams-date-input:invalid,.ams-date-input[aria-invalid=true]{box-shadow:var(--ams-date-input-invalid-box-shadow)}.ams-date-input:invalid:hover,.ams-date-input[aria-invalid=true]:hover{box-shadow:var(--ams-date-input-invalid-hover-box-shadow)}/*# sourceMappingURL=date-input.css.map */