From 4e0ac7db36bb2a9dcc616f1df89741af68af9e15 Mon Sep 17 00:00:00 2001 From: E515964 Date: Wed, 26 Jun 2019 10:24:49 +0200 Subject: [PATCH 1/6] fix(select): change arrow position to absolute --- .../src/lib/select/styles/_select-base.scss | 30 ++++++++++++++++++- .../lib/select/styles/_select-variables.scss | 6 ++-- 2 files changed, 33 insertions(+), 3 deletions(-) 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..10deb9d2aa 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: 92px; + } + } &[aria-expanded='true'] { @include autocompleteInputActive(); @@ -29,23 +40,40 @@ } .sbb-select-arrow-wrapper { + @include absoluteCenterY(); + right: toPx($selectArrowRight); + @include svgIconColor($sbbColorGrey); width: toPx($selectArrowWidthHeight); height: toPx($selectArrowWidthHeight); @include publicOnly() { @include mq($from: desktop4k) { + right: toPx($selectArrowRight * $scalingFactor4k); width: toPx($selectArrowWidthHeight * $scalingFactor4k); height: toPx($selectArrowWidthHeight * $scalingFactor4k); } @include mq($from: desktop5k) { + right: 28px; width: toPx($selectArrowWidthHeight * $scalingFactor5k); height: toPx($selectArrowWidthHeight * $scalingFactor5k); } } &-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; } From 5c2d8858ac673eda2fcb308decb5990e9b05904a Mon Sep 17 00:00:00 2001 From: E515964 Date: Wed, 26 Jun 2019 11:22:57 +0200 Subject: [PATCH 2/6] fix(select): change test results The global stylesheet included in normal applications has the property box-sizing set. The tests do not have those elements. Therefore because the arrow has now position absolution the values have to be adapted. --- .../src/lib/select/select/select.component.spec.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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..f3a1fe1b9b 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'); @@ -2522,15 +2522,18 @@ describe('SelectComponent', () => { fixture.detectChanges(); const trigger = fixture.debugElement.query(By.css('.sbb-select-trigger')).nativeElement; + console.log(trigger.style.width); trigger.style.width = '200px'; fixture.componentInstance.isVisible = true; fixture.detectChanges(); + console.log(trigger.style.width); trigger.click(); + console.log(trigger.style.width); fixture.detectChanges(); const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(pane.style.minWidth).toBe('230px'); + expect(pane.style.minWidth).toBe('262px'); }); }); From 3d2f84745c8aaa6a7acb72392ccbc7f15d962255 Mon Sep 17 00:00:00 2001 From: E515964 Date: Wed, 26 Jun 2019 13:14:57 +0200 Subject: [PATCH 3/6] fix(select): remove debug outputs --- .../src/lib/select/select/select.component.spec.ts | 3 --- 1 file changed, 3 deletions(-) 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 f3a1fe1b9b..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 @@ -2522,14 +2522,11 @@ describe('SelectComponent', () => { fixture.detectChanges(); const trigger = fixture.debugElement.query(By.css('.sbb-select-trigger')).nativeElement; - console.log(trigger.style.width); trigger.style.width = '200px'; fixture.componentInstance.isVisible = true; fixture.detectChanges(); - console.log(trigger.style.width); trigger.click(); - console.log(trigger.style.width); fixture.detectChanges(); const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; From 1b45149d50d27bf3cae889b5b22c8a698d8d1a19 Mon Sep 17 00:00:00 2001 From: E515964 Date: Wed, 26 Jun 2019 13:54:49 +0200 Subject: [PATCH 4/6] fix(select): change gray color to fit style guide --- .../lib/autocomplete/styles/_autocomplete-variables.scss | 3 ++- .../angular-public/src/lib/option/styles/_option-base.scss | 4 ++++ .../angular-public/src/lib/select/styles/_select-base.scss | 7 ++++++- .../sbb-esta/angular-public/src/styles/common/_form.scss | 1 + 4 files changed, 13 insertions(+), 2 deletions(-) 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/styles/_select-base.scss b/projects/sbb-esta/angular-public/src/lib/select/styles/_select-base.scss index 10deb9d2aa..3f8e5068ff 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 @@ -43,11 +43,12 @@ @include absoluteCenterY(); right: toPx($selectArrowRight); - @include svgIconColor($sbbColorGrey); width: toPx($selectArrowWidthHeight); height: toPx($selectArrowWidthHeight); @include publicOnly() { + @include svgIconColor($sbbColorGrey); + @include mq($from: desktop4k) { right: toPx($selectArrowRight * $scalingFactor4k); width: toPx($selectArrowWidthHeight * $scalingFactor4k); @@ -61,6 +62,10 @@ } } + @include businessOnly() { + @include svgIconColor($sbbColorGranite); + } + &-rotate { transform-origin: toPx($selectArrowWidthHeight / 2) toPx($selectArrowWidthHeight / 4); 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; From 94f6f65590ff695274dcd521595f36b581115171 Mon Sep 17 00:00:00 2001 From: E515964 Date: Fri, 28 Jun 2019 09:17:10 +0200 Subject: [PATCH 5/6] fix(business/select): calculate 5k based on base values --- .../angular-public/src/lib/select/styles/_select-base.scss | 4 ++-- .../sbb-esta/angular-public/src/styles/typography/_form.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) 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 3f8e5068ff..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 @@ -15,7 +15,7 @@ } @include mq($from: desktop5k) { - padding-right: 92px; + padding-right: toPx($selectTriggerPaddingRight * $scalingFactor5k); } } @@ -56,7 +56,7 @@ } @include mq($from: desktop5k) { - right: 28px; + right: toPx($selectArrowRight * $scalingFactor5k); width: toPx($selectArrowWidthHeight * $scalingFactor5k); height: toPx($selectArrowWidthHeight * $scalingFactor5k); } 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..af7d50100d 100644 --- a/projects/sbb-esta/angular-public/src/styles/typography/_form.scss +++ b/projects/sbb-esta/angular-public/src/styles/typography/_form.scss @@ -65,11 +65,13 @@ @mixin nativeSelectBase { $selectArrowWidthHeight: 24; $selectNativeBackground: 'data:image/svg+xml,'; + $selectTriggerPaddingRight: 44; @include inputfields; cursor: pointer; align-items: center; width: 100%; + padding-right: toPx($selectTriggerPaddingRight); &:disabled { cursor: default; @@ -78,11 +80,13 @@ @include publicOnly() { background: url($selectNativeBackground) 97.5% no-repeat; @include mq($from: desktop4k) { + padding-right: toPx($selectTriggerPaddingRight * $scalingFactor4k); background-size: toPx($selectArrowWidthHeight * $scalingFactor4k); background-position-x: 96%; } @include mq($from: desktop5k) { + padding-right: toPx($selectTriggerPaddingRight * $scalingFactor5k); background-size: toPx($selectArrowWidthHeight * $scalingFactor5k); background-position-x: 94%; } From 5c6274df77e3bb6ce6aa9b3940c73067e8d296f5 Mon Sep 17 00:00:00 2001 From: E515964 Date: Fri, 28 Jun 2019 16:00:49 +0200 Subject: [PATCH 6/6] fix(select): change position of arrow when using native select --- .../src/styles/typography/_form.scss | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) 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 af7d50100d..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,8 +65,14 @@ @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; @@ -77,26 +83,21 @@ 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) { - padding-right: toPx($selectTriggerPaddingRight * $scalingFactor4k); background-size: toPx($selectArrowWidthHeight * $scalingFactor4k); - background-position-x: 96%; + background-position: center right toPx($selectArrowRight * $scalingFactor4k); } @include mq($from: desktop5k) { - padding-right: toPx($selectTriggerPaddingRight * $scalingFactor5k); 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() {