Skip to content

Commit

Permalink
fix picker styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@joakbjerk
joakbjerk committed Dec 4, 2024
1 parent 002b119 commit 6ba7fe7
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 112 deletions.
105 changes: 50 additions & 55 deletions ...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3841,52 +3841,6 @@ button .dnb-form-status__text {
left: -1rem;
top: var(--date-picker-input-height);
}
.dnb-date-picker--small .dnb-date-picker__container {
top: 1.5rem;
}
.dnb-date-picker--medium .dnb-date-picker__container {
top: 2.5rem;
}
.dnb-date-picker--large .dnb-date-picker__container {
top: 3rem;
}
.dnb-date-picker--show-input .dnb-date-picker__container {
left: 0;
}
.dnb-date-picker--right .dnb-date-picker__container {
left: auto;
right: -1rem;
}
.dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container {
left: auto;
right: 0;
}
.dnb-date-picker--opened .dnb-date-picker__container {
z-index: 100;
}
.dnb-date-picker--opened .dnb-date-picker__container:not(.dnb-date-picker--opened .dnb-date-picker__container--no-animation) {
animation: date-picker-slide-down 200ms ease-out 1 forwards;
}
html[data-visual-test] .dnb-date-picker--opened .dnb-date-picker__container, .dnb-date-picker--opened .dnb-date-picker__container--no-animation {
animation: date-picker-slide-down 1ms ease-out 1 forwards;
}
.dnb-date-picker--hidden .dnb-date-picker__container {
display: none;
}
.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container:not(.dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation) {
animation: date-picker-slide-up 150ms ease-out 1 forwards;
}
html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container, .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-picker__container--no-animation {
animation: date-picker-slide-up 1ms ease-out 1 forwards;
}
.dnb-date-picker__portal {
--date-picker-input-height: 2rem;
--date-picker-day-width: 2rem;
--date-picker-day-horizontal-spacing: 4px;
position: absolute;
z-index: 1000;
background-color: var(--color-white);
}
.dnb-date-picker__input,
.dnb-date-picker .dnb-input__input.dnb-date-picker__input, .dnb-core-style .dnb-date-picker__input {
display: inline-block;
Expand Down Expand Up @@ -4146,10 +4100,6 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
border: 1px solid var(--color-black-border);
background-color: var(--color-white);
}
.dnb-date-picker--right .dnb-date-picker__triangle {
left: auto;
right: 0;
}
.dnb-date-picker .rtl {
direction: rtl;
}
Expand Down Expand Up @@ -4248,6 +4198,56 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
to {
opacity: 0;
}
}
.dnb-date-picker__portal {
--date-picker-input-height: 2rem;
--date-picker-day-width: 2rem;
--date-picker-day-horizontal-spacing: 4px;
position: absolute;
left: 0;
z-index: 1000;
}
.dnb-date-picker__portal--small .dnb-date-picker__container {
top: 1.5rem;
}
.dnb-date-picker__portal--medium .dnb-date-picker__container {
top: 2.5rem;
}
.dnb-date-picker__portal--large .dnb-date-picker__container {
top: 3rem;
}
.dnb-date-picker__portal--show-input .dnb-date-picker__container {
left: 0;
}
.dnb-date-picker__portal--right .dnb-date-picker__container {
left: auto;
right: -1rem;
}
.dnb-date-picker__portal--show-input.dnb-date-picker__portal--right .dnb-date-picker__container {
left: auto;
right: 0;
}
.dnb-date-picker__portal--opened .dnb-date-picker__container {
z-index: 100;
}
.dnb-date-picker__portal--opened .dnb-date-picker__container:not(.dnb-date-picker__portal--opened .dnb-date-picker__container--no-animation) {
animation: date-picker-slide-down 200ms ease-out 1 forwards;
}
html[data-visual-test] .dnb-date-picker__portal--opened .dnb-date-picker__container, .dnb-date-picker__portal--opened .dnb-date-picker__container--no-animation {
animation: date-picker-slide-down 1ms ease-out 1 forwards;
}
.dnb-date-picker__portal--hidden .dnb-date-picker__container {
display: none;
}
.dnb-date-picker__portal:not(.dnb-date-picker__portal--opened) .dnb-date-picker__container:not(.dnb-date-picker__portal:not(.dnb-date-picker__portal--opened) .dnb-date-picker__container--no-animation) {
animation: date-picker-slide-up 150ms ease-out 1 forwards;
}
html[data-visual-test] .dnb-date-picker__portal:not(.dnb-date-picker__portal--opened) .dnb-date-picker__container, .dnb-date-picker__portal:not(.dnb-date-picker__portal--opened) .dnb-date-picker__container--no-animation {
animation: date-picker-slide-up 1ms ease-out 1 forwards;
}
.dnb-date-picker__portal--right .dnb-date-picker__triangle {
left: auto;
right: 0;
}"
`;

Expand Down Expand Up @@ -4276,11 +4276,6 @@ exports[`DatePicker scss have to match default theme snapshot 1`] = `
border-radius: 0.25rem;
background-color: var(--color-white);
}
.dnb-date-picker__portal {
box-shadow: var(--shadow-default);
border-radius: 0.25rem;
background-color: var(--color-white);
}
.dnb-date-picker__addon::after, .dnb-date-picker__calendar::after {
background-color: var(--color-black-8);
}
Expand Down
101 changes: 50 additions & 51 deletions packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,52 +74,6 @@
top: var(--date-picker-input-height);
}

&--small &__container {
top: 1.5rem; // --input-height--small;
}
&--medium &__container {
top: 2.5rem; // --input-height--medium;
}
&--large &__container {
top: 3rem; // --input-height--large;
}

&--show-input &__container {
left: 0;
}

// alignment
&--right &__container {
left: auto;
right: -1rem;
}
&--show-input#{&}--right &__container {
left: auto;
right: 0;
}

&--opened &__container {
@include openDatePicker();
}
&--hidden &__container {
@include datePickerClosed();
}
&:not(#{&}--opened) &__container {
@include closeDatePicker();
}

&__portal {
// make variables available inside the portal
--date-picker-input-height: 2rem;
--date-picker-day-width: 2rem;
--date-picker-day-horizontal-spacing: 4px;

position: absolute;
z-index: 1000;

background-color: var(--color-white);
}

// stylelint-disable-next-line
&__input,
.dnb-input__input#{&}__input,
Expand Down Expand Up @@ -429,11 +383,6 @@
}
}

&--right &__triangle {
left: auto;
right: 0;
}

.rtl {
direction: rtl;

Expand Down Expand Up @@ -535,3 +484,53 @@
opacity: 0;
}
}

.dnb-date-picker__portal {
// make variables available inside the portal
--date-picker-input-height: 2rem;
--date-picker-day-width: 2rem;
--date-picker-day-horizontal-spacing: 4px;

position: absolute;
left: 0;
z-index: 1000;

&--small .dnb-date-picker__container {
top: 1.5rem; // --input-height--small;
}
&--medium .dnb-date-picker__container {
top: 2.5rem; // --input-height--medium;
}
&--large .dnb-date-picker__container {
top: 3rem; // --input-height--large;
}

&--show-input .dnb-date-picker__container {
left: 0;
}

// alignment
&--right .dnb-date-picker__container {
left: auto;
right: -1rem;
}
&--show-input#{&}--right .dnb-date-picker__container {
left: auto;
right: 0;
}

&--opened .dnb-date-picker__container {
@include openDatePicker();
}
&--hidden .dnb-date-picker__container {
@include datePickerClosed();
}
&:not(#{&}--opened) .dnb-date-picker__container {
@include closeDatePicker();
}

&--right .dnb-date-picker__triangle {
left: auto;
right: 0;
}
}
6 changes: 0 additions & 6 deletions packages/dnb-eufemia/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,6 @@
background-color: var(--color-white);
}

&__portal {
@include defaultDropShadow();
border-radius: 0.25rem;
background-color: var(--color-white);
}

&__addon,
&__calendar {
// border
Expand Down

0 comments on commit 6ba7fe7

Please sign in to comment.