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

DNB Eufemia Design System UI Library

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