diff --git a/projects/sbb-esta/angular-public/src/lib/autocomplete/styles/_autocomplete-variables.scss b/projects/sbb-esta/angular-public/src/lib/autocomplete/styles/_autocomplete-variables.scss index 0b0e644347..c23ace1734 100644 --- a/projects/sbb-esta/angular-public/src/lib/autocomplete/styles/_autocomplete-variables.scss +++ b/projects/sbb-esta/angular-public/src/lib/autocomplete/styles/_autocomplete-variables.scss @@ -11,9 +11,10 @@ $autocompleteColor: $sbbColorGrey; $autocompleteInputActiveBorderBottomColor: $sbbColorCloud; @if $sbbBusiness { - $autocompleteBorder: 1px solid $sbbColorGrey; + $autocompleteBorder: 1px solid $sbbColorGranite; $autocompleteShadow: 0 4px 0 rgba(0, 0, 0, 0.15); $autocompleteShadowReverse: 0 -4px 0 rgba(0, 0, 0, 0.15); + $autocompleteColor: $sbbColorGranite; } $autocompleteBorderTopReverse: $autocompleteBorder; diff --git a/projects/sbb-esta/angular-public/src/lib/option/styles/_option-base.scss b/projects/sbb-esta/angular-public/src/lib/option/styles/_option-base.scss index c509959c9d..aea38c34ed 100644 --- a/projects/sbb-esta/angular-public/src/lib/option/styles/_option-base.scss +++ b/projects/sbb-esta/angular-public/src/lib/option/styles/_option-base.scss @@ -31,6 +31,10 @@ @if $selectMode == true { cursor: default; color: $sbbColorGrey; + + @include businessOnly() { + color: $sbbColorGranite; + } } &:first-of-type { diff --git a/projects/sbb-esta/angular-public/src/lib/select/select/select.component.spec.ts b/projects/sbb-esta/angular-public/src/lib/select/select/select.component.spec.ts index a4113f68e9..f98da683b6 100644 --- a/projects/sbb-esta/angular-public/src/lib/select/select/select.component.spec.ts +++ b/projects/sbb-esta/angular-public/src/lib/select/select/select.component.spec.ts @@ -2370,7 +2370,7 @@ describe('SelectComponent', () => { ); const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(pane.style.minWidth).toEqual('330px'); + expect(pane.style.minWidth).toEqual('362px'); expect(fixture.componentInstance.select.panelOpen).toBe(true); expect(overlayContainerElement.textContent).toContain('Steak'); @@ -2530,7 +2530,7 @@ describe('SelectComponent', () => { fixture.detectChanges(); const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(pane.style.minWidth).toBe('230px'); + expect(pane.style.minWidth).toBe('262px'); }); }); diff --git a/projects/sbb-esta/angular-public/src/lib/select/styles/_select-base.scss b/projects/sbb-esta/angular-public/src/lib/select/styles/_select-base.scss index 73df78c3ee..d8f786908d 100644 --- a/projects/sbb-esta/angular-public/src/lib/select/styles/_select-base.scss +++ b/projects/sbb-esta/angular-public/src/lib/select/styles/_select-base.scss @@ -3,10 +3,21 @@ @mixin selectBase { .sbb-select-trigger { @include inputfields; + position: relative; cursor: pointer; display: flex; align-items: center; - padding-right: $selectTriggerPaddingRight; + padding-right: toPx($selectTriggerPaddingRight); + + @include publicOnly() { + @include mq($from: desktop4k) { + padding-right: toPx($selectTriggerPaddingRight * $scalingFactor4k); + } + + @include mq($from: desktop5k) { + padding-right: toPx($selectTriggerPaddingRight * $scalingFactor5k); + } + } &[aria-expanded='true'] { @include autocompleteInputActive(); @@ -29,23 +40,45 @@ } .sbb-select-arrow-wrapper { - @include svgIconColor($sbbColorGrey); + @include absoluteCenterY(); + right: toPx($selectArrowRight); + width: toPx($selectArrowWidthHeight); height: toPx($selectArrowWidthHeight); @include publicOnly() { + @include svgIconColor($sbbColorGrey); + @include mq($from: desktop4k) { + right: toPx($selectArrowRight * $scalingFactor4k); width: toPx($selectArrowWidthHeight * $scalingFactor4k); height: toPx($selectArrowWidthHeight * $scalingFactor4k); } @include mq($from: desktop5k) { + right: toPx($selectArrowRight * $scalingFactor5k); width: toPx($selectArrowWidthHeight * $scalingFactor5k); height: toPx($selectArrowWidthHeight * $scalingFactor5k); } } + @include businessOnly() { + @include svgIconColor($sbbColorGranite); + } + &-rotate { + transform-origin: toPx($selectArrowWidthHeight / 2) toPx($selectArrowWidthHeight / 4); + + @include publicOnly() { + @include mq($from: desktop4k) { + transform-origin: toPx($selectArrowWidthHeight * $scalingFactor4k / 2) toPx($selectArrowWidthHeight * $scalingFactor4k / 4); + } + + @include mq($from: desktop5k) { + transform-origin: toPx($selectArrowWidthHeight * $scalingFactor5k / 2) toPx($selectArrowWidthHeight * $scalingFactor5k / 4); + } + } + transform: rotate(180deg); } } diff --git a/projects/sbb-esta/angular-public/src/lib/select/styles/_select-variables.scss b/projects/sbb-esta/angular-public/src/lib/select/styles/_select-variables.scss index cc909efaf3..93b2e73202 100644 --- a/projects/sbb-esta/angular-public/src/lib/select/styles/_select-variables.scss +++ b/projects/sbb-esta/angular-public/src/lib/select/styles/_select-variables.scss @@ -2,8 +2,10 @@ $selectMaxWidth: 480; $selectArrowWidthHeight: 24; -$selectTriggerPaddingRight: 12px; +$selectArrowRight: 12; +$selectTriggerPaddingRight: 44; @if $sbbBusiness { - $selectTriggerPaddingRight: 6px; + $selectTriggerPaddingRight: 38; + $selectArrowRight: 6; } diff --git a/projects/sbb-esta/angular-public/src/styles/common/_form.scss b/projects/sbb-esta/angular-public/src/styles/common/_form.scss index 39a68dc0d7..066b5eecaf 100644 --- a/projects/sbb-esta/angular-public/src/styles/common/_form.scss +++ b/projects/sbb-esta/angular-public/src/styles/common/_form.scss @@ -55,6 +55,7 @@ @include businessOnly() { border-width: 1px; + color: $sbbColorGranite; &:focus { border-color: $sbbColorGranite; diff --git a/projects/sbb-esta/angular-public/src/styles/typography/_form.scss b/projects/sbb-esta/angular-public/src/styles/typography/_form.scss index ed05669e62..0a6188168a 100644 --- a/projects/sbb-esta/angular-public/src/styles/typography/_form.scss +++ b/projects/sbb-esta/angular-public/src/styles/typography/_form.scss @@ -65,34 +65,39 @@ @mixin nativeSelectBase { $selectArrowWidthHeight: 24; $selectNativeBackground: 'data:image/svg+xml,'; + $selectArrowRight: 12; + $selectTriggerPaddingRight: 44; + + @include businessOnly() { + $selectArrowRight: 6; + $selectTriggerPaddingRight: 38; + } @include inputfields; cursor: pointer; align-items: center; width: 100%; + padding-right: toPx($selectTriggerPaddingRight); &:disabled { cursor: default; } + background: url($selectNativeBackground) no-repeat; + background-position: center right toPx($selectArrowRight); + background-size: toPx($selectArrowWidthHeight); + @include publicOnly() { - background: url($selectNativeBackground) 97.5% no-repeat; @include mq($from: desktop4k) { background-size: toPx($selectArrowWidthHeight * $scalingFactor4k); - background-position-x: 96%; + background-position: center right toPx($selectArrowRight * $scalingFactor4k); } @include mq($from: desktop5k) { background-size: toPx($selectArrowWidthHeight * $scalingFactor5k); - background-position-x: 94%; + background-position: center right toPx($selectArrowRight * $scalingFactor5k); } } - - @include businessOnly() { - background: url($selectNativeBackground) 98.7% no-repeat; - } - - background-size: toPx($selectArrowWidthHeight); } @mixin sbbTimeInputField() {