Skip to content

Instantly share code, notes, and snippets.

@rob3c
Forked from Mennez/clarity-ng-select.scss
Created November 19, 2019 20:08
Show Gist options
  • Save rob3c/9a279e5e1316ed5d1ded1316e252364b to your computer and use it in GitHub Desktop.
Save rob3c/9a279e5e1316ed5d1ded1316e252364b 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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment