From 1f0817da151eb6413c533aea3c0f495cb86ec999 Mon Sep 17 00:00:00 2001 From: YourivHDenHaag Date: Wed, 28 Aug 2024 13:52:29 +0200 Subject: [PATCH] fix: add select icon to component --- components/Select/src/index.scss | 5 +++++ proprietary/Components/src/utrecht/select.tokens.json | 3 +++ 2 files changed, 8 insertions(+) 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}" },