Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ember power select for postcss
:root {
/* Backgrounds --ember-power-select-background-color: #ffffff; */
--ember-power-select-disabled-background-color: #eeeeee;
--ember-power-select-multiple-selection-background-color: #e4e4e4;
--ember-power-select-highlighted-background: #5897fb;
--ember-power-select-selected-background: #dddddd;
--ember-power-select-text-color: inherit;
/* Texts --ember-power-select-text-color: inherit; */
--ember-power-select-placeholder-color: #999999;
--ember-power-select-highlighted-color: #ffffff;
--ember-power-select-disabled-option-color: #999999;
--ember-power-select-multiple-selection-color: #333333;
--ember-power-select-border-color: #cccccc;
/* Borders --ember-power-select-border-color: #aaaaaa; */
--ember-power-select-focus-border-color: var(--ember-power-select-border-color);
--ember-power-select-default-border: 1px solid var(--ember-power-select-border-color);
--ember-power-select-default-focus-border: 1px solid var(--ember-power-select-focus-border-color);
--ember-power-select-default-border-radius: 0.2em;
--ember-power-select-search-input-border-radius: inherit;
--ember-power-select-trigger-default-border-radius: inherit;
--ember-power-select-focus-box-shadow: none;
--ember-power-select-background-color: inherit;
--ember-power-select-trigger-border: var(--ember-power-select-default-border);
--ember-power-select-trigger-border-top: var(--ember-power-select-trigger-border);
--ember-power-select-trigger-border-bottom: var(--ember-power-select-trigger-border);
--ember-power-select-trigger-border-right: var(--ember-power-select-trigger-border);
--ember-power-select-trigger-border-left: var(--ember-power-select-trigger-border);
--ember-power-select-active-trigger-border: var(--ember-power-select-default-focus-border);
--ember-power-select-active-trigger-border-top: var(--ember-power-select-active-trigger-border);
--ember-power-select-active-trigger-border-bottom: var(--ember-power-select-active-trigger-border);
--ember-power-select-active-trigger-border-right: var(--ember-power-select-active-trigger-border);
--ember-power-select-active-trigger-border-left: var(--ember-power-select-active-trigger-border);
--ember-power-select-dropdown-border: var(--ember-power-select-default-focus-border);
--ember-power-select-search-field-border: var(--ember-power-select-default-border);
--ember-power-select-search-field-focus-border: var(--ember-power-select-default-focus-border);
--ember-power-select-dropdown-top-border: var(--ember-power-select-dropdown-border);
--ember-power-select-dropdown-right-border: var(--ember-power-select-dropdown-border);
--ember-power-select-dropdown-bottom-border: var(--ember-power-select-dropdown-border);
--ember-power-select-dropdown-left-border: var(--ember-power-select-dropdown-border);
--ember-power-select-dropdown-box-shadow: none;
--ember-power-select-dropdown-contiguous-border: none;
--ember-power-select-multiple-option-border-color: gray;
--ember-power-select-multiple-option-border: 1px solid var(--ember-power-select-multiple-option-border-color);
/* Borders radius --ember-power-select-default-border-radius: 4px; */
/* General border radius --ember-power-select-trigger-default-border-radius: var(--ember-power-select-default-border-radius); */
--ember-power-select-dropdown-default-border-radius: var(--ember-power-select-default-border-radius);
--ember-power-select-opened-border-radius: 0;
/* Border radius of the side of the dropdown and the trigger where they touch --ember-power-select-search-input-border-radius: 0; */
--ember-power-select-multiple-option-border-radius: var(--ember-power-select-default-border-radius);
/* Other --ember-power-select-focus-box-shadow: none; */
--ember-power-select-dropdown-margin: 0;
/* Margin between the dropdown and the trigger --ember-power-select-dropdown-box-shadow: none; */
--ember-power-select-line-height: 1.75;
--ember-power-select-trigger-icon-color: var(--ember-power-select-border-color);
--ember-power-select-clear-btn-margin: 25px;
--ember-power-select-option-padding: 8px;
--ember-power-select-number-of-visible-options: 7;
--ember-power-select-focus-outline: null;
--ember-power-select-trigger-ltr-padding: 1em;
--ember-power-select-trigger-rtl-padding: 0 0 0 16px;
--ember-power-select-multiple-option-padding: 0 4px;
--ember-power-select-multiple-option-line-height: 1.45;
--ember-basic-dropdown-content-background-color: var(--ember-power-select-background-color);
}
.ember-basic-dropdown-content {
position: absolute;
width: auto;
z-index: 1000;
background-color: var(--ember-basic-dropdown-content-background-color);
}
/* Trigger */
.ember-power-select-trigger {
position: relative;
box-sizing: border-box;
border-top: var(--ember-power-select-trigger-border-top);
border-bottom: var(--ember-power-select-trigger-border-bottom);
border-right: var(--ember-power-select-trigger-border-right);
border-left: var(--ember-power-select-trigger-border-left);
border-radius: var(--ember-power-select-trigger-default-border-radius);
background-color: var(--ember-power-select-background-color);
line-height: var(--ember-power-select-line-height);
overflow-x: hidden;
text-overflow: ellipsis;
min-height: var(--ember-power-select-line-height);
user-select: none;
color: var(--ember-power-select-text-color);
/* Minimum clearfix for modern browsers */
&:after {
content: "";
display: table;
clear: both;
}
}
.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
border-top: var(--ember-power-select-active-trigger-border-top);
border-bottom: var(--ember-power-select-active-trigger-border-bottom);
border-right: var(--ember-power-select-active-trigger-border-right);
border-left: var(--ember-power-select-active-trigger-border-left);
box-shadow: var(--ember-power-select-focus-box-shadow);
}
.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded="true"] {
border-bottom-left-radius: var(--ember-power-select-opened-border-radius);
border-bottom-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded="true"] {
border-top-left-radius: var(--ember-power-select-opened-border-radius);
border-top-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-power-select-placeholder {
color: var(--ember-power-select-placeholder-color);
display: block;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ember-power-select-status-icon {
position: absolute;
display: inline-block;
width: 0;
height: 0;
top: 0;
bottom: 0;
margin: auto;
/* Vertical center trick! border-style: solid; */
border-width: 7px 4px 0 4px;
border-color: var(--ember-power-select-trigger-icon-color) transparent transparent transparent;
.ember-basic-dropdown-trigger[aria-expanded="true"] & {
transform: rotate(180deg);
}
}
.ember-power-select-clear-btn {
position: absolute;
cursor: pointer;
}
/* Multiple select */
.ember-power-select-trigger-multiple-input {
font-family: inherit;
font-size: inherit;
border: none;
display: inline-block;
line-height: inherit;
-webkit-appearance: none;
outline: none;
padding: 0;
float: left;
background-color: transparent;
text-indent: 2px;
&:disabled {
background-color: var(--ember-power-select-disabled-background-color);
}
/* There's a browser bug where this selectos cannot be chained with commas */
&::placeholder {
opacity: 1;
color: var(--ember-power-select-placeholder-color);
}
&::-webkit-input-placeholder {
opacity: 1;
color: var(--ember-power-select-placeholder-color);
}
&::-moz-placeholder {
opacity: 1;
color: var(--ember-power-select-placeholder-color);
}
&::-ms-input-placeholder {
opacity: 1;
color: var(--ember-power-select-placeholder-color);
}
}
.ember-power-select-multiple-options {
padding: 0;
margin: 0;
}
.ember-power-select-multiple-option {
border: var(--ember-power-select-multiple-option-border);
border-radius: var(--ember-power-select-multiple-option-border-radius);
color: var(--ember-power-select-multiple-selection-color);
background-color: var(--ember-power-select-multiple-selection-background-color);
padding: var(--ember-power-select-multiple-option-padding);
box-sizing: border-box;
display: inline-block;
line-height: var(--ember-power-select-multiple-option-line-height);
float: left;
margin: 2px 0 2px 3px;
}
.ember-power-select-multiple-remove-btn {
cursor: pointer;
&:not(:hover) {
opacity: 0.5;
}
}
/* Search bar */
.ember-power-select-search {
padding: 4px;
box-sizing: border-box;
}
.ember-power-select-search-input {
border: var(--ember-power-select-search-field-border);
border-radius: var(--ember-power-select-search-input-border-radius);
width: 100%;
font-size: inherit;
line-height: inherit;
padding: 0 5px;
box-sizing: border-box;
&:focus {
border: var(--ember-power-select-search-field-focus-border);
box-shadow: var(--ember-power-select-focus-box-shadow);
}
}
/* Dropdown */
.ember-power-select-dropdown {
border-left: var(--ember-power-select-dropdown-left-border);
border-right: var(--ember-power-select-dropdown-right-border);
line-height: var(--ember-power-select-line-height);
border-radius: var(--ember-power-select-dropdown-default-border-radius);
box-shadow: var(--ember-power-select-dropdown-box-shadow);
overflow: hidden;
color: var(--ember-power-select-text-color);
}
.ember-power-select-dropdown.ember-basic-dropdown-content--above {
border-top: var(--ember-power-select-dropdown-top-border);
border-bottom: var(--ember-power-select-dropdown-contiguous-border);
border-bottom-left-radius: var(--ember-power-select-opened-border-radius);
border-bottom-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
border-top: var(--ember-power-select-dropdown-contiguous-border);
border-bottom: var(--ember-power-select-dropdown-bottom-border);
border-top-left-radius: var(--ember-power-select-opened-border-radius);
border-top-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
/* Dropdown when rendered in place width: 100%; */
}
/* Options */
.ember-power-select-options {
list-style: none;
margin: 0;
padding: 0;
user-select: none;
-webkit-user-select: none;
&[role="listbox"] {
overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
-webkit-overflow-scrolling: touch;
}
}
.ember-power-select-option {
cursor: pointer;
padding: 0 var(--ember-power-select-option-padding);
}
.ember-power-select-group[aria-disabled="true"] {
color: var(--ember-power-select-disabled-option-color);
cursor: not-allowed;
}
.ember-power-select-group[aria-disabled="true"] .ember-power-select-option,
.ember-power-select-option[aria-disabled="true"] {
color: var(--ember-power-select-disabled-option-color);
pointer-events: none;
cursor: not-allowed;
}
.ember-power-select-option[aria-selected="true"] {
background-color: var(--ember-power-select-selected-background);
}
.ember-power-select-option[aria-current="true"] {
background-color: var(--ember-power-select-highlighted-background);
color: var(--ember-power-select-highlighted-color);
}
/* Groups */
.ember-power-select-group-name {
cursor: default;
font-weight: bold;
}
/* Disabled styles */
.ember-power-select-trigger[aria-disabled=true] {
background-color: var(--ember-power-select-disabled-background-color);
}
/* LTR styles */
.ember-power-select-trigger {
padding: var(--ember-power-select-trigger-ltr-padding);
}
.ember-power-select-selected-item, .ember-power-select-placeholder {
margin-left: 8px;
}
.ember-power-select-status-icon {
right: 5px;
}
.ember-power-select-clear-btn {
right: var(--ember-power-select-clear-btn-margin);
}
.ember-power-select-group {
.ember-power-select-group {
.ember-power-select-group-name {
padding-left: calc(3 * var(--ember-power-select-option-padding));
}
.ember-power-select-option {
padding-left: calc(5 * var(--ember-power-select-option-padding));
}
}
.ember-power-select-option {
padding-left: calc(3 * var(--ember-power-select-option-padding));
}
.ember-power-select-group-name {
padding-left: var(--ember-power-select-option-padding);
}
}
/* RTL styles */
.ember-power-select-trigger[dir=rtl] {
padding: var(--ember-power-select-trigger-rtl-padding);
.ember-power-select-selected-item, .ember-power-select-placeholder {
margin-right: 8px;
}
.ember-power-select-multiple-option {
float: right;
}
.ember-power-select-trigger-multiple-input {
float: right;
}
.ember-power-select-status-icon {
left: 5px;
right: initial;
}
.ember-power-select-clear-btn {
left: var(--ember-power-select-clear-btn-margin);
right: initial;
}
}
.ember-power-select-dropdown[dir=rtl] {
.ember-power-select-group {
.ember-power-select-group {
.ember-power-select-group-name {
padding-right: calc(3 * var(--ember-power-select-option-padding));
}
.ember-power-select-option {
padding-right: calc(5 * var(--ember-power-select-option-padding));
}
}
.ember-power-select-option {
padding-right: calc(3 * var(--ember-power-select-option-padding));
}
.ember-power-select-group-name {
padding-right: calc(var(--ember-power-select-option-padding));
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.