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

DNB Eufemia Design System UI Library

.eufemia-scope--10_104_0 .dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;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--10_104_0 .dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.eufemia-scope--10_104_0 .dnb-date-picker__row{display:inline-flex}.eufemia-scope--10_104_0 .dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.eufemia-scope--10_104_0 .dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.eufemia-scope--10_104_0 .dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.eufemia-scope--10_104_0 .dnb-date-picker__triangle,.eufemia-scope--10_104_0 .dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.eufemia-scope--10_104_0 .dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.eufemia-scope--10_104_0 .dnb-date-picker__container{position:relative;top:auto;width:-webkit-min-content;width:min-content}.eufemia-scope--10_104_0 .dnb-date-picker__container table{margin:0;position:relative;z-index:1}.eufemia-scope--10_104_0 .dnb-date-picker__container table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .eufemia-scope--10_104_0 .dnb-date-picker__container table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--10_104_0 .dnb-date-picker__container:not(.dnb-date-picker__container--show-footer) .dnb-date-picker__calendar:after{content:none}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input:not(:root){margin:0}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input,.eufemia-scope--10_104_0 .dnb-date-picker__input{text-indent:-2px}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input:not(:root){margin:0 -4px}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.eufemia-scope--10_104_0 .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.eufemia-scope--10_104_0 .dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.eufemia-scope--10_104_0 .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.eufemia-scope--10_104_0 .dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.eufemia-scope--10_104_0 .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.eufemia-scope--10_104_0 .dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.eufemia-scope--10_104_0 .dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__input--label-alignment-right,.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input--label-alignment-right,.eufemia-scope--10_104_0 .dnb-date-picker__input--label-alignment-right{flex-flow:row-reverse;width:-webkit-fit-content;width:fit-content}.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.eufemia-scope--10_104_0 .dnb-date-picker__input:first-of-type{margin-left:.8rem}.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.eufemia-scope--10_104_0 .dnb-date-picker__input:last-of-type{margin-right:2.2rem}.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__shell{display:none}.eufemia-scope--10_104_0 .dnb-date-picker--show-input .dnb-input__shell{display:flex}.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.eufemia-scope--10_104_0 .dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.eufemia-scope--10_104_0 .dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.eufemia-scope--10_104_0 .dnb-date-picker__views{display:flex;-webkit-user-select:none;user-select:none}@media screen and (max-width:60em){.eufemia-scope--10_104_0 .dnb-date-picker__views{flex-direction:column}}.eufemia-scope--10_104_0 .dnb-date-picker__calendar{padding:1rem;position:relative}.eufemia-scope--10_104_0 .dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.eufemia-scope--10_104_0 .dnb-date-picker__header{line-height:var(--line-height-basis);min-height:2.5rem;-webkit-user-select:text;user-select:text}.eufemia-scope--10_104_0 .dnb-date-picker__addon,.eufemia-scope--10_104_0 .dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.eufemia-scope--10_104_0 .dnb-date-picker__addon:after,.eufemia-scope--10_104_0 .dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.eufemia-scope--10_104_0 .dnb-date-picker__addon{display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.eufemia-scope--10_104_0 .dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.eufemia-scope--10_104_0 .dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.eufemia-scope--10_104_0 .dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.eufemia-scope--10_104_0 .dnb-date-picker__days,.eufemia-scope--10_104_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--10_104_0 .dnb-date-picker__day,.eufemia-scope--10_104_0 .dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.eufemia-scope--10_104_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--10_104_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--10_104_0 .dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.eufemia-scope--10_104_0 .dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.eufemia-scope--10_104_0 .dnb-date-picker__day--selectable:hover{z-index:2}.eufemia-scope--10_104_0 .dnb-date-picker__day--end-date .dnb-button,.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date .dnb-button{z-index:1}.eufemia-scope--10_104_0 .dnb-date-picker__day--end-date,.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date{position:relative}.eufemia-scope--10_104_0 .dnb-date-picker__day--end-date:after,.eufemia-scope--10_104_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--10_104_0 .dnb-date-picker__day--start-date:after{left:auto;right:0}.eufemia-scope--10_104_0 .dnb-date-picker__day--end-date:after{left:0;right:auto}.eufemia-scope--10_104_0 .dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.eufemia-scope--10_104_0 .dnb-date-picker .rtl{direction:rtl}.eufemia-scope--10_104_0 .dnb-date-picker .rtl .dnb-date-picker__next:before,.eufemia-scope--10_104_0 .dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.eufemia-scope--10_104_0 .dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.eufemia-scope--10_104_0 .dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.eufemia-scope--10_104_0 .dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis);margin-right:0}@media screen and (max-width:40em){.eufemia-scope--10_104_0 .dnb-date-picker{flex-wrap:wrap}.eufemia-scope--10_104_0 .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.eufemia-scope--10_104_0 .dnb-date-picker--stretch{display:flex;flex-grow:1}.eufemia-scope--10_104_0 .dnb-date-picker--stretch .dnb-date-picker__inner,.eufemia-scope--10_104_0 .dnb-date-picker--stretch .dnb-date-picker__shell,.eufemia-scope--10_104_0 .dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.eufemia-scope--10_104_0 .dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.eufemia-scope--10_104_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--10_104_0 .dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.eufemia-scope--10_104_0 .dnb-responsive-component .dnb-date-picker__helper{display:none}}.eufemia-scope--10_104_0 .dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]),.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__top]){margin-top:0}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]),.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__bottom]){margin-bottom:0}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]),.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__left]){margin-left:0}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]),.eufemia-scope--10_104_0 .dnb-date-picker__fieldset:not([class*=space__right]){margin-right:0}.eufemia-scope--10_104_0 .dnb-core-style .dnb-date-picker__fieldset,.eufemia-scope--10_104_0 .dnb-date-picker__fieldset{border:none;padding:0}.eufemia-scope--10_104_0 .dnb-date-picker__portal{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;--popover-z-index:calc(var(--modal-z-index) + 10);line-height:var(--date-picker-input-height)}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}