diff --git a/components/Select/src/index.scss b/components/Select/src/index.scss index 00d00ac24..c9c31e925 100644 --- a/components/Select/src/index.scss +++ b/components/Select/src/index.scss @@ -4,6 +4,11 @@ box-sizing: var(--denhaag-select-box-sizing); max-block-size: var(--denhaag-select-max-block-size); + &.utrecht-select { + background-position: center right + var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end)); + } + &:hover, &--hover { background-color: var(--denhaag-select-hover-background-color); diff --git a/proprietary/Components/src/utrecht/select.tokens.json b/proprietary/Components/src/utrecht/select.tokens.json index 28bb884a2..f9493ba9f 100644 --- a/proprietary/Components/src/utrecht/select.tokens.json +++ b/proprietary/Components/src/utrecht/select.tokens.json @@ -2,6 +2,9 @@ "utrecht": { "select": { "background-color": { "value": "{utrecht.form-control.background-color}" }, + "background-image": { + "value": "url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z' fill='currentColor'/%3E%3C/svg%3E%0A\")" + }, "border-block-end-width": {}, "border-bottom-width": { "value": "auto" }, "border-color": { "value": "{utrecht.form-control.border-color}" },