fix(select): change arrow trigger position to absolute (#60)

sbb-design-systems · Jul 1, 2019 · 92512c2 · 92512c2
1 parent 7b21600
commit 92512c2
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 16 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -65,34 +65,39 @@
 @mixin nativeSelectBase {
   $selectArrowWidthHeight: 24;
   $selectNativeBackground: 'data:image/svg+xml,<svg version="1.1" id="_x30__1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;fill: %23666;" xml:space="preserve"><path d="M7.7,10.7L8.4,10l3.6,3.6l3.6-3.6l0.7,0.7L12,15L7.7,10.7z"/></svg>';
+  $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() {