Skip to content

Instantly share code, notes, and snippets.

@Mennez
Last active July 27, 2023 13:08
Show Gist options
  • Save Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90 to your computer and use it in GitHub Desktop.
Save Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90 to your computer and use it in GitHub Desktop.
This stylesheet allows you to use ng-select in clarity
/**
Clarity (http://clarity.design) (at the moment of writing) does not have an auto-complete/combobox component.
ng-select is currently one of the more popular angular2/4 packages for adding auto-complete components to an angular project.
This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms.
To get these styles applied to your ng-select component, declare your form component as follows:
<form clrForm>
<clr-input-container>
<label>Foo</label>
<ng-select clrInput [items]="exampleItems"></ng-select>
</clr-input-container>
</form>
*/
$ng-select-highlight: #3f51b5 !default;
$ng-select-primary-text: rgba(black, 0.87) !default;
$ng-select-primary-light-text: rgba(white, 0.87) !default;
$ng-select-secondary-text: rgba(black, 0.54) !default;
$ng-select-secondary-light-text: rgba(white, 0.54) !default;
$ng-select-disabled-text: rgba(black, 0.38) !default;
$ng-select-divider: rgba(black, 0.12) !default;
$ng-select-bg: #ffffff !default;
$dark-theme-highlight-color: #324f61;
.ng-select {
ng-select {
padding: 0;
height: auto;
max-height: none;
}
.clr-input-wrapper {
max-height: none;
clr-icon {
position: absolute;
right: -8px;
top: 0;
}
}
.ng-value-container {
.ng-value {
border-radius: 10px;
padding: 0 4px;
margin: 1px 2px;
line-height: 22px;
max-height: 22px;
}
.ng-value-icon {
margin-right: 4px;
margin-left: 8px;
&:first-of-type {
margin-left: 0;
}
display: inline-block;
}
}
.ng-select-multiple {
.ng-value-container {
.ng-value {
color: $ng-select-primary-light-text;
background: $ng-select-highlight;
padding: 0 8px;
}
}
.ng-input {
input {
padding: 0 0 0 4px;
}
}
}
.ng-clear-wrapper {
text-align: center;
margin-top: 2px;
}
}
.dark-theme {
.ng-select {
input, .ng-value, .ng-clear-wrapper {
color: $ng-select-primary-light-text;
}
}
.ng-select-multiple {
.ng-value-container {
.ng-value {
background: $dark-theme-highlight-color;
}
}
}
}
.ng-dropdown-panel {
background: $ng-select-bg;
left: 0;
&.ng-select-bottom {
top: calc(100%);
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px $ng-select-divider;
}
&.ng-select-top {
bottom: calc(100% - .84375em);
box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, .2), 0 -8px 10px 1px rgba(0, 0, 0, .14), 0 -3px 14px 2px $ng-select-divider;
}
&.multiple {
.ng-option {
&.selected {
background: $ng-select-bg;
}
&.marked {
background: rgba(0, 0, 0, .04);
}
}
}
.ng-dropdown-header {
border-bottom: 1px solid $ng-select-divider;
padding: 0 16px;
line-height: 3em;
min-height: 3em;
}
.ng-dropdown-footer {
border-top: 1px solid $ng-select-divider;
padding: 0 16px;
line-height: 3em;
min-height: 3em;
}
.ng-dropdown-panel-items {
.ng-optgroup {
user-select: none;
cursor: pointer;
line-height: 3em;
height: 3em;
padding: 0 16px;
color: $ng-select-secondary-text;
font-weight: 500;
&.ng-option-marked {
background: rgba(0, 0, 0, .04);
}
&.ng-option-disabled {
cursor: default;
}
&.ng-option-selected {
background: $ng-select-divider;
color: $ng-select-highlight;
}
}
.ng-option {
line-height: 3em;
min-height: 3em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 16px;
text-decoration: none;
position: relative;
color: $ng-select-primary-text;
text-align: left;
&.ng-option-marked {
background: rgba(0, 0, 0, .04);
color: $ng-select-primary-text;
}
&.ng-option-selected {
background: $ng-select-divider;
color: $ng-select-highlight;
}
&.ng-option-disabled {
color: $ng-select-disabled-text;
}
&.ng-option-child {
padding-left: 32px;
}
.ng-tag-label {
padding-right: 5px;
font-size: 80%;
font-weight: 400;
color: $ng-select-disabled-text;
}
}
}
}
@LeonardoFraga
Copy link

Hey Mennez, I'm trying to use your example but I'm don't have certain where I should place this file, can you give me a direction?
Now I'm using ".css" stylessheets in my app.

@gghildyal
Copy link

This no longer works with ng-select 2.20.5. Trying to use this inside a modal so that may be the reason, but the dropdown container isn't visible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment