vault/ui/app/styles/core/select.scss
Vault Automation 796c5fb294
[HDS-5060] UI: Align typography styles to HDS tokens (#10193) (#10360)
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
2025-10-23 16:37:36 -04:00

87 lines
2.1 KiB
SCSS

@use '../utils/mixins';
@use '../utils/size_variables';
/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
select {
width: 100%;
}
.select select {
background-color: var(--token-color-surface-faint);
box-shadow: 0 3px 1px rgba(hsl(0, 0%, 4%), 0.12);
border: 1px solid var(--token-color-palette-neutral-300);
border-radius: var(--token-border-radius-x-small);
color: var(--token-color-foreground-faint);
cursor: pointer;
display: block;
font-size: 1em;
height: 2.5rem;
max-width: 100%;
outline: none;
padding-bottom: calc(0.375em - 1px);
padding-left: size_variables.$spacing-10;
padding-right: size_variables.$spacing-10;
padding-top: calc(0.375em - 1px);
text-rendering: auto !important;
@include mixins.until(size_variables.$desktop) {
font-size: var(--token-typography-body-300-font-size);
}
&::placeholder {
opacity: 0.5;
}
&:active,
&:focus,
&:focus-visible,
&.is-active {
border-color: var(--token-color-palette-blue-200);
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
}
}
.select select:not([multiple]) {
padding-right: size_variables.$spacing-36;
}
.select select[disabled] {
border-color: var(--token-color-palette-neutral-300);
background-color: var(--token-color-palette-neutral-100);
color: var(--token-color-foreground-disabled);
cursor: not-allowed;
user-select: none;
&:hover {
border-color: var(--token-color-palette-neutral-300);
}
}
.select {
display: inline-block;
height: 2.5rem;
max-width: 100%;
position: relative;
vertical-align: top;
}
.select::after {
content: svg-uri(
'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor"/></svg>'
);
border: 0;
display: block;
height: 24px;
margin: 0;
pointer-events: none;
position: absolute;
right: size_variables.$spacing-8;
top: 50%;
transform: translateY(-50%);
width: 24px;
z-index: 4;
}