-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of github.com:xola/ui-kit
* 'master' of github.com:xola/ui-kit: ComboBox fixes (#62)
- Loading branch information
Showing
2 changed files
with
55 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,74 @@ | ||
/* Container */ | ||
.ui-combo-box__control { | ||
@apply p-0 font-sans text-base leading-base; | ||
@apply w-full border rounded placeholder-gray-dark hover:placeholder-gray-darker !text-gray-darker; | ||
@apply disabled:text-gray disabled:bg-gray-lighter hover:bg-gray-lighter hover:border-black; | ||
@apply border-gray-light; | ||
@apply p-0 font-sans text-base leading-base !text-gray-dark; /* These don't do much, added just in case */ | ||
@apply !rounded !border-gray-light; | ||
} | ||
|
||
/* Container hover */ | ||
.ui-combo-box__control:hover { | ||
@apply border-black !important; | ||
@apply !border-black bg-gray-lighter; | ||
} | ||
|
||
.ui-combo-box__input-container { | ||
@apply !text-gray-dark hover:text-gray-darker; | ||
/* Container focus */ | ||
.ui-combo-box__control:focus-within { | ||
@apply shadow-none !border-primary; | ||
} | ||
|
||
.border-danger .ui-combo-box__control { | ||
@apply !border-danger; | ||
} | ||
|
||
/* Placeholder text color */ | ||
.ui-combo-box__placeholder { | ||
@apply !text-gray-dark; | ||
} | ||
|
||
/* Placeholder hover */ | ||
.ui-combo-box__control:hover .ui-combo-box__placeholder { | ||
@apply !text-gray-darker; | ||
} | ||
|
||
.ui-combo-box__control--is-focused { | ||
@apply shadow-none outline-none ring-0 !border-primary; | ||
/* Menu shadow */ | ||
.ui-combo-box__menu { | ||
@apply !shadow-md; | ||
} | ||
|
||
/* Option focus */ | ||
.ui-combo-box__option--is-focused { | ||
@apply !bg-primary-lighter; | ||
@apply !bg-gray-lighter; | ||
} | ||
|
||
/* Option active */ | ||
.ui-combo-box__option--is-selected { | ||
@apply !bg-primary; | ||
@apply !bg-primary-light; | ||
} | ||
|
||
.ui-combo-box__input { | ||
@apply focus:ring-0; | ||
/* Input text color */ | ||
.ui-combo-box__input-container { | ||
@apply !text-gray-dark; | ||
} | ||
|
||
.ui-combo-box__indicator-separator { | ||
@apply hidden; | ||
/* Input hover */ | ||
.ui-combo-box__control:hover .ui-combo-box__input-container { | ||
@apply !text-gray-darker; | ||
} | ||
|
||
/* Dropdown icon size and color style */ | ||
.ui-combo-box__dropdown-indicator svg { | ||
@apply w-3.5 h-3.5 text-black; | ||
} | ||
|
||
/* Dropdown icon disabled */ | ||
.ui-combo-box--is-disabled svg { | ||
@apply text-gray; | ||
} | ||
|
||
/* Hide vertical separator */ | ||
.ui-combo-box__indicator-separator { | ||
@apply hidden; | ||
} | ||
|
||
/* Hide weird border when search input is focused */ | ||
.ui-combo-box__input:focus { | ||
box-shadow: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters