@rolemodel/optics
Version:
Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.
73 lines (66 loc) • 1.97 kB
CSS
/* Design System Overrides */
.ts-wrapper {
/* Control */
.ts-control {
min-height: var(--op-input-height-large);
align-items: center;
border: none;
border-radius: var(--op-radius-large);
background-color: var(--op-color-neutral-plus-max);
box-shadow: var(--op-border-all) var(--op-color-border);
color: var(--op-color-neutral-on-plus-max);
font-size: var(--op-font-x-small);
font-weight: var(--op-font-weight-light);
line-height: var(--op-line-height-base);
}
/* Active control */
&.dropdown-active {
.ts-control {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
/* Dropdown */
.ts-dropdown {
border: none;
margin: 0;
border-bottom-left-radius: var(--op-radius-large);
border-bottom-right-radius: var(--op-radius-large);
box-shadow: var(--op-border-all) var(--op-color-border);
contain: paint;
.option,
.create {
&.active {
background-color: var(--op-color-primary-plus-seven);
color: var(--op-color-primary-on-plus-seven);
}
}
}
/* Item */
&.multi {
.ts-control > div {
padding: var(--op-space-3x-small) var(--op-space-x-small);
border-radius: var(--op-radius-medium);
margin: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
background-color: var(--op-color-primary-base);
color: var(--op-color-primary-on-base);
&.active {
background-color: var(--op-color-primary-plus-two);
color: var(--op-color-primary-on-plus-two);
}
}
}
/* Dropdown Arrow */
&.single,
&.multi,
&.single.input-active,
&.multi.input-active {
.ts-control {
/* Highly specific SVG data image for the dropdown arrow. */
background-image: var(--op-encoded-images-dropdown-arrow);
background-position-x: calc(100% - var(--op-space-small));
background-position-y: center;
background-repeat: no-repeat;
}
}
}