mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
There are other vars named brd, but I think border is clearer and doesn't need to be abreviated here.
142 lines
2.4 KiB
SCSS
142 lines
2.4 KiB
SCSS
.ts-wrapper {
|
|
min-height: initial;
|
|
}
|
|
|
|
.ts-wrapper.multi {
|
|
.ts-control {
|
|
box-shadow: none;
|
|
border-color: $pale-blue;
|
|
|
|
&:focus {
|
|
border-color: $spree-green;
|
|
}
|
|
|
|
[data-value] {
|
|
text-shadow: none;
|
|
background-image: none;
|
|
background-repeat: initial;
|
|
box-shadow: none;
|
|
background-color: $spree-blue;
|
|
}
|
|
}
|
|
|
|
.ts-control > div {
|
|
border: none;
|
|
background-color: $spree-blue;
|
|
}
|
|
}
|
|
|
|
.ts-wrapper.plugin-remove_button .item .remove {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ts-dropdown {
|
|
margin-top: 0;
|
|
|
|
.option {
|
|
min-height: 2.25em;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.ts-wrapper.single .ts-control,
|
|
.ts-dropdown.single {
|
|
border-color: $color-tbl-border;
|
|
}
|
|
|
|
.ts-control,
|
|
.ts-wrapper.single.input-active .ts-control {
|
|
cursor: pointer;
|
|
padding: 6px 8px;
|
|
outline: 0 !important;
|
|
min-height: 2.5em;
|
|
}
|
|
|
|
.ts-wrapper.single .ts-control {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.ts-wrapper.inline,
|
|
.ts-wrapper.inline.input-active {
|
|
width: fit-content;
|
|
|
|
.ts-control {
|
|
padding-right: 2rem;
|
|
}
|
|
}
|
|
|
|
.ts-wrapper.single .ts-control {
|
|
box-shadow: none;
|
|
background-image: none;
|
|
background-color: $white;
|
|
}
|
|
|
|
.ts-wrapper.primary.focus .ts-control,
|
|
.ts-wrapper.primary .ts-control {
|
|
background-color: $spree-blue;
|
|
border-color: $spree-blue;
|
|
color: $white;
|
|
|
|
&:after {
|
|
border-color: $white transparent transparent transparent;
|
|
}
|
|
}
|
|
|
|
.ts-wrapper .select-multiple {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ts-wrapper.dropdown-active.primary .ts-control {
|
|
background-color: $spree-green;
|
|
border-color: $spree-green;
|
|
color: $white;
|
|
|
|
&:after {
|
|
border-color: transparent transparent $white transparent;
|
|
}
|
|
}
|
|
|
|
.dropdown-input-wrap {
|
|
padding: 0.2em;
|
|
position: relative;
|
|
|
|
&:before {
|
|
@extend [class^="icon-"];
|
|
@extend .icon-search;
|
|
|
|
position: absolute;
|
|
opacity: 0.4;
|
|
line-height: 2em;
|
|
left: 0.75em;
|
|
}
|
|
|
|
.dropdown-input {
|
|
outline: 0;
|
|
padding: 4px 6px;
|
|
border: 1px solid $spree-green;
|
|
border-radius: 0.3em;
|
|
padding-left: 1.75em;
|
|
}
|
|
}
|
|
|
|
.ts-wrapper.no-search {
|
|
.dropdown-input-wrap {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ts-dropdown .create:hover,
|
|
.ts-dropdown #admin-menu li.selected a.create,
|
|
#admin-menu li.selected .ts-dropdown a.create,
|
|
.ts-dropdown .option:hover,
|
|
.ts-dropdown #admin-menu li.selected a.option,
|
|
#admin-menu li.selected .ts-dropdown a.option,
|
|
.ts-dropdown .active {
|
|
background-color: $spree-blue;
|
|
color: $white;
|
|
}
|
|
|
|
.ts-dropdown [data-selectable] .highlight {
|
|
background: rgba(149, 180, 255, 0.26);
|
|
}
|