Skip to content

Commit

Permalink
IBX-2627: dropdown small styling issues (#382)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tischsoic
tischsoic authored Apr 25, 2022
1 parent 4e42870 commit 7079ace
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 63 deletions.
17 changes: 17 additions & 0 deletions src/bundle/Resources/public/js/scripts/core/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@
this.onPopoverShow = this.onPopoverShow.bind(this);
this.onPopoverHide = this.onPopoverHide.bind(this);
this.itemsPopoverContent = this.itemsPopoverContent.bind(this);
this.onSourceFocus = this.onSourceFocus.bind(this);
this.onSourceBlur = this.onSourceBlur.bind(this);

ibexa.helpers.objectInstances.setInstance(this.container, this);
}
Expand Down Expand Up @@ -283,6 +285,18 @@
return this.itemsContainer;
}

toggleSourceFocus(isFocused) {
this.container.classList.toggle('ibexa-dropdown--focused', isFocused);
}

onSourceFocus() {
this.toggleSourceFocus(true);
}

onSourceBlur() {
this.toggleSourceFocus(false);
}

init() {
if (this.container.dataset.initialized) {
console.warn('Dropdown has already been initialized!');
Expand All @@ -292,6 +306,9 @@

this.container.dataset.initialized = true;

this.sourceInput.addEventListener('focus', this.onSourceFocus, false);
this.sourceInput.addEventListener('blur', this.onSourceBlur, false);

const optionsCount = this.container.querySelectorAll('.ibexa-dropdown__source option').length;

if (!optionsCount) {
Expand Down
96 changes: 33 additions & 63 deletions src/bundle/Resources/public/scss/_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,24 +33,26 @@
align-items: center;
flex-wrap: wrap;
margin-bottom: 0;
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;

&:before,
&:after {
&::before,
&::after {
content: '';
position: absolute;
z-index: 1;
top: 50%;
width: calculateRem(10px);
height: calculateRem(1px);
background: $ibexa-color-dark;
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
}

&:before {
&::before {
transform: rotate(135deg);
right: calculateRem(12px);
}

&:after {
&::after {
transform: rotate(-135deg);
right: calculateRem(19px);
}
Expand All @@ -62,27 +64,24 @@
color: $ibexa-color-danger;
}

&:before {
border-color: $ibexa-color-danger transparent transparent transparent;
}

&:after {
border-color: $ibexa-color-danger-100 transparent transparent transparent;
&::before,
&::after {
background-color: $ibexa-color-danger;
}
}
}

&__remove-selection {
display: inherit;
position: absolute;
top: calc(50% + #{calculateRem(1px)});
top: 50%;
right: calculateRem(3px);
width: calculateRem(16px);
height: calculateRem(16px);
transform: translateY(-50%);

&:before,
&:after {
&::before,
&::after {
content: '';
width: calculateRem(1px);
height: calculateRem(11px);
Expand All @@ -92,11 +91,11 @@
left: 50%;
}

&:before {
&::before {
transform: translate(50%, -50%) rotate(-45deg);
}

&:after {
&::after {
transform: translate(50%, -50%) rotate(45deg);
}
}
Expand All @@ -106,12 +105,15 @@

margin-top: 0;
padding-left: calculateRem(8px);
padding-top: 0;
padding-bottom: 0;
margin-right: calculateRem(8px);
display: inline-block;
max-width: calculateRem(380px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
}

&__selected-item + &__selected-placeholder {
Expand Down Expand Up @@ -204,7 +206,7 @@
}

.ibexa-input {
margin-right: calculateRem(16px);
margin: 0 calculateRem(16px) 0 0;
}

.ibexa-icon {
Expand Down Expand Up @@ -262,76 +264,44 @@
}
}

&--is-disabled {
&--focused {
.ibexa-dropdown {
&__selection-info {
cursor: not-allowed;
border-color: $ibexa-color-dark-200;
background-color: $ibexa-color-light-300;
color: $ibexa-color-dark-300;

&:before {
border-color: $ibexa-color-dark-300 transparent transparent transparent;
}

&:after {
border-color: $ibexa-color-light-300 transparent transparent transparent;
}
}
}
}

&--is-focused {
.ibexa-dropdown {
&__selection-info {
color: $ibexa-color-dark;
border-color: $ibexa-color-primary;
box-shadow: 0 0 calculateRem(3px) 0 rgba($ibexa-color-primary, 0.75);

&:before {
border-color: $ibexa-color-dark transparent transparent transparent;
}

&:after {
border-color: $ibexa-color-white transparent transparent transparent;
}
}
}
}

&:not(&--is-disabled) {
&:not(&--disabled):not(.is-invalid) {
.ibexa-dropdown {
&__selection-info {
&:not(.is-invalid):hover {
&:hover {
border-color: $ibexa-color-primary;

&:before {
border-color: $ibexa-color-primary transparent transparent transparent;
}

&:after {
border-color: $ibexa-color-white transparent transparent transparent;
&::before,
&::after {
background-color: $ibexa-color-primary;
}
}
}
}
}

&.is-invalid {
&.is-invalid:not(&--disabled) {
.ibexa-dropdown {
&__selection-info {
color: $ibexa-color-danger;
background-image: none;
border-color: $ibexa-color-danger;
background-color: $ibexa-color-danger-100;

&:before {
border-color: $ibexa-color-danger transparent transparent transparent;
&::before,
&::after {
background-color: $ibexa-color-danger;
}
}

&:after {
border-color: $ibexa-color-danger-100 transparent transparent transparent;
}
&__selected-item {
color: $ibexa-color-danger;
}
}
}
Expand All @@ -358,13 +328,13 @@
&--disabled {
.ibexa-dropdown {
&__selection-info {
border: none;
border-color: transparent;
background: $ibexa-color-light-300;
cursor: not-allowed;

&::before,
&::after {
background: $ibexa-color-dark-400;
background-color: $ibexa-color-dark-400;
}
}
}
Expand Down

0 comments on commit 7079ace

Please sign in to comment.