feat(select): Eva style (#2106)

akveo · Nov 28, 2019 · 7355d65 · 7355d65
1 parent 16ae5b2
commit 7355d65
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 82 deletions.
diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss
@@ -7,6 +7,8 @@
   @each $size in nb-get-sizes() {
     nb-select.appearance-filled.size-#{$size} .select-button {
       padding: nb-theme(select-filled-#{$size}-padding);
+      @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+      @include nb-rtl(padding-left, nb-theme(select-icon-offset));
     }
     .appearance-filled.size-#{$size} {
       nb-option-group .option-group-title,

diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss
@@ -6,6 +6,8 @@
   @each $size in nb-get-sizes() {
     nb-select.appearance-hero.size-#{$size} .select-button {
       padding: nb-theme(select-hero-#{$size}-padding);
+      @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+      @include nb-rtl(padding-left, nb-theme(select-icon-offset));
     }
     .appearance-hero.size-#{$size} {
       nb-option-group .option-group-title,

diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
@@ -66,6 +66,8 @@
   @each $size in nb-get-sizes() {
     nb-select.appearance-outline.size-#{$size} .select-button {
       padding: nb-theme(select-outline-#{$size}-padding);
+      @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+      @include nb-rtl(padding-left, nb-theme(select-icon-offset));
     }
     .appearance-outline.size-#{$size} {
       nb-option-group .option-group-title,

diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss
@@ -32,14 +32,6 @@
     border-width: nb-theme(select-options-list-border-width);
     overflow: hidden;
 
-    &.top {
-      border-bottom: none;
-    }
-
-    &.bottom {
-      border-top: none;
-    }
-
     & > .options-list {
       margin: 0;
       padding: 0;
@@ -69,7 +61,8 @@
 
   @each $size in nb-get-sizes() {
     nb-select.size-#{$size} .select-button,
-    .size-#{$size} nb-option {
+    .size-#{$size} nb-option,
+    .size-#{$size} nb-option-group {
       font-size: nb-theme(select-#{$size}-text-font-size);
       font-weight: nb-theme(select-#{$size}-text-font-weight);
       line-height: nb-theme(select-#{$size}-text-line-height);
@@ -96,17 +89,10 @@
     nb-select.shape-#{$shape} .select-button {
       border-radius: nb-theme(select-#{$shape}-border-radius);
     }
+  }
 
-    .options-list-container.shape-#{$shape} {
-      &.bottom {
-        border-bottom-left-radius: nb-theme(select-#{$shape}-border-radius);
-        border-bottom-right-radius: nb-theme(select-#{$shape}-border-radius);
-      }
-      &.top {
-        border-top-left-radius: nb-theme(select-#{$shape}-border-radius);
-        border-top-right-radius: nb-theme(select-#{$shape}-border-radius);
-      }
-    }
+  .options-list-container {
+    border-radius: nb-theme(select-rectangle-border-radius);
   }
 
   nb-option-group,
@@ -120,6 +106,10 @@
     }
   }
 
+  nb-option-group {
+    color: nb-theme(select-group-option-text-color);
+  }
+
   nb-option {
     &.selected {
       background-color: nb-theme(select-option-selected-background-color);
@@ -128,10 +118,31 @@
     &:focus {
       background-color: nb-theme(select-option-focus-background-color);
       color: nb-theme(select-option-focus-text-color);
+
+      &.selected {
+        background-color: nb-theme(select-option-selected-focus-background-color);
+        color: nb-theme(select-option-selected-focus-text-color);
+      }
     }
     &:hover {
       background-color: nb-theme(select-option-hover-background-color);
       color: nb-theme(select-option-hover-text-color);
+
+      &.selected {
+        background-color: nb-theme(select-option-selected-hover-background-color);
+        color: nb-theme(select-option-selected-hover-text-color);
+      }
+    }
+
+    &.multiple {
+      &.selected {
+        background-color: nb-theme(select-option-background-color);
+        color: nb-theme(select-option-text-color);
+      }
+      &:focus {
+        background-color: nb-theme(select-option-focus-background-color);
+        color: nb-theme(select-option-focus-text-color);
+      }
     }
   }
 

diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts
@@ -93,6 +93,7 @@ export class NbOptionComponent<T> implements OnDestroy, NbFocusableOption {
     return this.elementRef.nativeElement.textContent;
   }
 
+  @HostBinding('class.multiple')
   get multiple() {
     return this.parent.multiple;
   }

diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss
@@ -22,15 +22,6 @@
       }
     }
   }
-
-  .select-button.bottom {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .select-button.top {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
 }
 
 :host(.full-width) {

diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -723,6 +723,7 @@ export class NbSelectComponent<T> implements AfterViewInit, AfterContentInit, On
   overlayPosition: NbPosition = '' as NbPosition;
 
   protected ref: NbOverlayRef;
+  protected optionsOverlayOffset = 8;
 
   protected triggerStrategy: NbTriggerStrategy;
 
@@ -786,7 +787,6 @@ export class NbSelectComponent<T> implements AfterViewInit, AfterContentInit, On
     const classes = [
       `appearance-${this.appearance}`,
       `size-${this.size}`,
-      `shape-${this.shape}`,
       `status-${this.status}`,
       this.overlayPosition,
     ];
@@ -990,7 +990,7 @@ export class NbSelectComponent<T> implements AfterViewInit, AfterContentInit, On
     return this.positionBuilder
       .connectedTo(this.button)
       .position(NbPosition.BOTTOM)
-      .offset(0)
+      .offset(this.optionsOverlayOffset)
       .adjustment(NbAdjustment.VERTICAL);
   }
 

diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
@@ -1742,23 +1742,29 @@ $eva-mapping: (
   select-disabled-cursor: default,
   select-min-width: 13rem,
   select-options-list-max-height: 20rem,
-  select-options-list-shadow: shadow,
+  select-options-list-shadow: none,
   select-options-list-border-style: solid,
-  select-options-list-border-width: 0,
+  select-options-list-border-width: 0.0625rem,
+  select-group-option-text-color: text-hint-color,
   select-outline-width: outline-width,
   select-outline-color: outline-color,
+  select-icon-offset: 2rem,
 
   select-text-font-family: text-subtitle-font-family,
   select-placeholder-text-font-family: text-paragraph-font-family,
 
   select-option-background-color: background-basic-color-1,
   select-option-text-color: text-basic-color,
-  select-option-selected-background-color: background-basic-color-1,
-  select-option-selected-text-color: text-primary-color,
-  select-option-focus-background-color: background-basic-color-1,
-  select-option-focus-text-color: text-primary-focus-color,
-  select-option-hover-background-color: background-basic-color-1,
-  select-option-hover-text-color: text-primary-hover-color,
+  select-option-focus-background-color: color-basic-transparent-200,
+  select-option-focus-text-color: text-basic-color,
+  select-option-hover-background-color: color-basic-transparent-100,
+  select-option-hover-text-color: text-basic-color,
+  select-option-selected-background-color: color-primary-transparent-200,
+  select-option-selected-text-color: text-basic-color,
+  select-option-selected-focus-background-color: color-primary-transparent-300,
+  select-option-selected-focus-text-color: text-basic-color,
+  select-option-selected-hover-background-color: color-primary-transparent-100,
+  select-option-selected-hover-text-color: text-basic-color,
   select-option-disabled-background-color: background-basic-color-1,
   select-option-disabled-text-color: text-disabled-color,
 
@@ -1804,13 +1810,13 @@ $eva-mapping: (
   select-outline-border-style: solid,
   select-outline-border-width: 1px,
 
-  select-outline-tiny-padding: 0.1875rem 1.125rem,
-  select-outline-small-padding: 0.1875rem 1.125rem,
-  select-outline-medium-padding: 0.4375rem 1.125rem,
-  select-outline-large-padding: 0.6875rem 1.125rem,
-  select-outline-giant-padding: 0.9375rem 1.125rem,
+  select-outline-tiny-padding: 0.1875rem 1rem,
+  select-outline-small-padding: 0.1875rem 1rem,
+  select-outline-medium-padding: 0.4375rem 1rem,
+  select-outline-large-padding: 0.6875rem 1rem,
+  select-outline-giant-padding: 0.9375rem 1rem,
 
-  select-outline-basic-icon-color: text-basic-color,
+  select-outline-basic-icon-color: text-hint-color,
   select-outline-basic-text-color: text-basic-color,
   select-outline-basic-placeholder-text-color: text-hint-color,
   select-outline-basic-background-color: background-basic-color-2,
@@ -1824,7 +1830,7 @@ $eva-mapping: (
   select-outline-basic-disabled-icon-color: text-disabled-color,
   select-outline-basic-disabled-text-color: text-disabled-color,
 
-  select-outline-primary-icon-color: text-basic-color,
+  select-outline-primary-icon-color: text-hint-color,
   select-outline-primary-text-color: text-basic-color,
   select-outline-primary-placeholder-text-color: text-hint-color,
   select-outline-primary-background-color: background-basic-color-2,
@@ -1838,7 +1844,7 @@ $eva-mapping: (
   select-outline-primary-disabled-icon-color: text-disabled-color,
   select-outline-primary-disabled-text-color: text-disabled-color,
 
-  select-outline-success-icon-color: text-basic-color,
+  select-outline-success-icon-color: text-hint-color,
   select-outline-success-text-color: text-basic-color,
   select-outline-success-placeholder-text-color: text-hint-color,
   select-outline-success-background-color: background-basic-color-2,
@@ -1852,7 +1858,7 @@ $eva-mapping: (
   select-outline-success-disabled-icon-color: text-disabled-color,
   select-outline-success-disabled-text-color: text-disabled-color,
 
-  select-outline-info-icon-color: text-basic-color,
+  select-outline-info-icon-color: text-hint-color,
   select-outline-info-text-color: text-basic-color,
   select-outline-info-placeholder-text-color: text-hint-color,
   select-outline-info-background-color: background-basic-color-2,
@@ -1866,7 +1872,7 @@ $eva-mapping: (
   select-outline-info-disabled-icon-color: text-disabled-color,
   select-outline-info-disabled-text-color: text-disabled-color,
 
-  select-outline-warning-icon-color: text-basic-color,
+  select-outline-warning-icon-color: text-hint-color,
   select-outline-warning-text-color: text-basic-color,
   select-outline-warning-placeholder-text-color: text-hint-color,
   select-outline-warning-background-color: background-basic-color-2,
@@ -1880,7 +1886,7 @@ $eva-mapping: (
   select-outline-warning-disabled-icon-color: text-disabled-color,
   select-outline-warning-disabled-text-color: text-disabled-color,
 
-  select-outline-danger-icon-color: text-basic-color,
+  select-outline-danger-icon-color: text-hint-color,
   select-outline-danger-text-color: text-basic-color,
   select-outline-danger-placeholder-text-color: text-hint-color,
   select-outline-danger-background-color: background-basic-color-2,
@@ -1937,22 +1943,22 @@ $eva-mapping: (
   select-group-option-outline-large-start-padding: 2.25rem,
   select-group-option-outline-giant-start-padding: 2.75rem,
 
-  select-options-list-outline-basic-border-color: border-primary-color-2,
-  select-options-list-outline-primary-border-color: color-primary-default,
-  select-options-list-outline-success-border-color: color-success-default,
-  select-options-list-outline-info-border-color: color-info-default,
-  select-options-list-outline-warning-border-color: color-warning-default,
-  select-options-list-outline-danger-border-color: color-danger-default,
-  select-options-list-outline-control-border-color: color-control-default,
+  select-options-list-outline-basic-border-color: border-basic-color-4,
+  select-options-list-outline-primary-border-color: border-basic-color-4,
+  select-options-list-outline-success-border-color: border-basic-color-4,
+  select-options-list-outline-info-border-color: border-basic-color-4,
+  select-options-list-outline-warning-border-color: border-basic-color-4,
+  select-options-list-outline-danger-border-color: border-basic-color-4,
+  select-options-list-outline-control-border-color: border-basic-color-4,
 
   select-filled-border-style: solid,
   select-filled-border-width: 1px,
 
-  select-filled-tiny-padding: 0.1875rem 1.125rem,
-  select-filled-small-padding: 0.1875rem 1.125rem,
-  select-filled-medium-padding: 0.4375rem 1.125rem,
-  select-filled-large-padding: 0.6875rem 1.125rem,
-  select-filled-giant-padding: 0.9375rem 1.125rem,
+  select-filled-tiny-padding: 0.1875rem 1rem,
+  select-filled-small-padding: 0.1875rem 1rem,
+  select-filled-medium-padding: 0.4375rem 1rem,
+  select-filled-large-padding: 0.6875rem 1rem,
+  select-filled-giant-padding: 0.9375rem 1rem,
 
   select-filled-basic-background-color: color-basic-default,
   select-filled-basic-border-color: color-basic-default-border,
@@ -2070,24 +2076,24 @@ $eva-mapping: (
   select-option-filled-giant-padding: select-filled-giant-padding,
   select-group-option-filled-giant-padding-start: 2.75rem,
 
-  select-options-list-filled-basic-border-color: border-primary-color-2,
-  select-options-list-filled-primary-border-color: color-primary-default,
-  select-options-list-filled-success-border-color: color-success-default,
-  select-options-list-filled-info-border-color: color-info-default,
-  select-options-list-filled-warning-border-color: color-warning-default,
-  select-options-list-filled-danger-border-color: color-danger-default,
-  select-options-list-filled-control-border-color: color-basic-default,
+  select-options-list-filled-basic-border-color: border-basic-color-4,
+  select-options-list-filled-primary-border-color: border-basic-color-4,
+  select-options-list-filled-success-border-color: border-basic-color-4,
+  select-options-list-filled-info-border-color: border-basic-color-4,
+  select-options-list-filled-warning-border-color: border-basic-color-4,
+  select-options-list-filled-danger-border-color: border-basic-color-4,
+  select-options-list-filled-control-border-color: border-basic-color-4,
 
-  select-hero-tiny-padding: 0.25rem 1.125rem,
-  select-hero-small-padding: 0.25rem 1.125rem,
-  select-hero-medium-padding: 0.5rem 1.125rem,
-  select-hero-large-padding: 0.75rem 1.125rem,
-  select-hero-giant-padding: 1rem 1.125rem,
+  select-hero-tiny-padding: 0.25rem 1rem,
+  select-hero-small-padding: 0.25rem 1rem,
+  select-hero-medium-padding: 0.5rem 1rem,
+  select-hero-large-padding: 0.75rem 1rem,
+  select-hero-giant-padding: 1rem 1rem,
 
   select-hero-basic-left-background-color: color-basic-200,
   select-hero-basic-right-background-color: color-basic-default,
-  select-hero-basic-icon-color: text-basic-color,
-  select-hero-basic-text-color: text-basic-color,
+  select-hero-basic-icon-color: color-basic-800,
+  select-hero-basic-text-color: color-basic-800,
   select-hero-basic-placeholder-text-color: text-hint-color,
 
   select-hero-basic-focus-left-background-color: color-basic-300,
@@ -2193,13 +2199,13 @@ $eva-mapping: (
   select-option-hero-giant-padding: select-hero-giant-padding,
   select-group-option-hero-giant-padding-start: 2.75rem,
 
-  select-options-list-hero-basic-border-color: border-primary-color-2,
-  select-options-list-hero-primary-border-color: color-primary-default,
-  select-options-list-hero-success-border-color: color-success-default,
-  select-options-list-hero-info-border-color: color-info-default,
-  select-options-list-hero-warning-border-color: color-warning-default,
-  select-options-list-hero-danger-border-color: color-danger-default,
-  select-options-list-hero-control-border-color: color-control-default,
+  select-options-list-hero-basic-border-color: border-basic-color-4,
+  select-options-list-hero-primary-border-color: border-basic-color-4,
+  select-options-list-hero-success-border-color: border-basic-color-4,
+  select-options-list-hero-info-border-color: border-basic-color-4,
+  select-options-list-hero-warning-border-color: border-basic-color-4,
+  select-options-list-hero-danger-border-color: border-basic-color-4,
+  select-options-list-hero-control-border-color: border-basic-color-4,
 
   datepicker-text-color: text-basic-color,
   datepicker-background-color: background-basic-color-1,