@dnb/eufemia/es/components/date-picker/style/dnb-date-picker.min.css

DNB Eufemia Design System UI Library

.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:0.25rem;align-items:center;column-gap:var(--spacing-small);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__container{background-color:var(--token-color-background-neutral);border-radius:var(--token-radius-sm);position:relative;top:auto;width:-webkit-min-content;width:min-content}.dnb-date-picker--inline .dnb-date-picker__container{box-shadow:var(--shadow-sharp)}.dnb-date-picker__container table{margin:0;position:relative;z-index:1}.dnb-date-picker__container table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker__container table.dnb-no-focus:focus{--border-color:var(--token-color-stroke-action-focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker__container:not(.dnb-date-picker__container--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{--input-padding--small:0.05rem;--input-padding--medium:0.05rem;--input-padding--large:0.05rem;padding:0 .0625rem}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin-right:-10px}}.dnb-core-style .dnb-date-picker__input--label-alignment-right,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--label-alignment-right,.dnb-date-picker__input--label-alignment-right{flex-flow:row-reverse;width:-webkit-fit-content;width:fit-content}.dnb-date-picker .dnb-segmented-field__section.dnb-date-picker__input,.dnb-date-picker .dnb-segmented-field__section.dnb-input__input.dnb-date-picker__input{margin-right:0;text-indent:0}.dnb-date-picker .dnb-segmented-field__section.dnb-date-picker__input:last-of-type,.dnb-date-picker .dnb-segmented-field__section.dnb-input__input.dnb-date-picker__input:last-of-type{width:auto}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.2rem}.dnb-segmented-field__fieldset:last-of-type .dnb-date-picker__input:last-of-type{--input-padding--small:0.25rem;--input-padding--medium:0.333rem;--input-padding--large:0.5rem;margin-right:2rem}.dnb-date-picker--small .dnb-segmented-field__fieldset:last-of-type .dnb-date-picker__input:last-of-type{margin-right:1.5rem}.dnb-date-picker--medium .dnb-segmented-field__fieldset:last-of-type .dnb-date-picker__input:last-of-type{margin-right:2.5rem}.dnb-date-picker--large .dnb-segmented-field__fieldset:last-of-type .dnb-date-picker__input:last-of-type{margin-right:3rem}.dnb-date-picker--large .dnb-segmented-field__fieldset:first-of-type .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker--medium .dnb-segmented-field__fieldset:first-of-type .dnb-input__input.dnb-date-picker__input:first-of-type{margin-left:.5rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;-webkit-user-select:none;user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{background-color:var(--token-color-stroke-neutral-subtle);bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker__header{--gap:0.25rem;flex-flow:row wrap;gap:var(--gap);justify-content:space-between;line-height:var(--line-height-basis);min-height:2.5rem;-webkit-user-select:text;user-select:text}.dnb-date-picker__header:after{background-color:var(--token-color-stroke-neutral-subtle)}.dnb-date-picker__header--only-month-label{justify-content:center;margin-bottom:1rem}.dnb-date-picker__header__row{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;min-width:60%}.dnb-date-picker__header__row--year{min-width:calc(40% - var(--gap))}.dnb-date-picker__header__title{color:var(--token-color-text-neutral);font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);text-align:center;text-transform:capitalize}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{background-color:var(--token-color-stroke-neutral-subtle);bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{color:var(--token-color-text-neutral);font-weight:var(--font-weight-medium);padding-bottom:.5rem;padding-top:1.5rem;text-transform:capitalize}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center;text-align:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker__day--today .dnb-button{font-weight:var(--font-weight-medium)}.dnb-date-picker__day--today .dnb-button:after{background-color:currentcolor;border-radius:50%;bottom:.1875rem;content:"";height:.2188em;pointer-events:none;position:absolute;width:.2188em}.dnb-date-picker__day--inactive .dnb-button,.dnb-date-picker__day--preview .dnb-button,.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover){background-color:transparent}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):after,.dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date),.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):after,.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date){background-color:var(--token-color-background-action-hover-subtle)}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button,.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button{background-color:var(--token-color-background-action);color:var(--token-color-text-neutral-inverse)}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover,.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover{box-shadow:none}html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]){--border-color:var(--token-color-stroke-action-pressed);--border-width:0.125rem;background-color:var(--token-color-background-neutral);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--token-color-text-action)}html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:active:not([disabled]){background-color:var(--token-color-background-action-hover-subtle);border:transparent;box-shadow:none;color:var(--token-color-text-action-pressed)}html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date:not(.dnb-date-picker__day--end-date).dnb-date-picker__day--within-selection .dnb-button:active:not([disabled]){border-radius:50% 0 0 50%}html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date:not(.dnb-date-picker__day--start-date).dnb-date-picker__day--within-selection .dnb-button:active:not([disabled]){border-radius:0 50% 50% 0}.dnb-date-picker__day--disabled .dnb-button{-webkit-text-decoration:line-through;text-decoration:line-through}.dnb-date-picker__day--inactive .dnb-button{color:var(--token-color-text-neutral-alternative)}.dnb-date-picker__day--disabled .dnb-button[disabled],.dnb-date-picker__day--inactive .dnb-button[disabled]{box-shadow:none}html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[disabled]{cursor:default}.dnb-date-picker__header__nav .dnb-button:not(:hover):not(:focus-visible){box-shadow:none}.dnb-date-picker__header__nav .dnb-button:hover:not(:active):not(:focus-visible){background-color:var(--token-color-background-neutral)}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis);margin-right:0}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]),.dnb-date-picker__fieldset:not([class*=space__top]){margin-top:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]),.dnb-date-picker__fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]),.dnb-date-picker__fieldset:not([class*=space__left]){margin-left:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]),.dnb-date-picker__fieldset:not([class*=space__right]){margin-right:0}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;padding:0}.dnb-date-picker__portal{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:0.25rem;--popover-z-index:calc(var(--modal-z-index) + 10);line-height:var(--date-picker-input-height)}.dnb-date-picker__portal .dnb-popover{--popover-border-radius:var(--token-radius-sm);box-shadow:var(--shadow-sharp)}.dnb-date-picker--open .dnb-button--input-button.dnb-button--selected{--button-color-bg--default:var(--button-color-bg--active);--button-color-icon--default:var(--button-color-icon--active);--button-input-separator-color--default:var(
    --button-input-separator-color--active
  )}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}