feat(select): Eva style

src/app/playground-components.ts

@@ -895,10 +895,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         name: 'Select Multiple',
       },
       {
-        path: 'select-outline.component',
-        link: '/select/select-outline.component',
-        component: 'SelectOutlineComponent',
-        name: 'Select Outline',
+        path: 'select-filled.component',
+        link: '/select/select-filled.component',
+        component: 'SelectFilledComponent',
+        name: 'Select Filled',
       },
       {
         path: 'select-placeholder.component',
@@ -930,6 +930,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'SelectStatusComponent',
         name: 'Select Status',
       },
+      {
+        path: 'select-interactive.component',
+        link: '/select/select-interactive.component',
+        component: 'SelectInteractiveComponent',
+        name: 'Select Interactive',
+      },
     ],
   },
   {

src/framework/theme/components/select/_select-filled.scss

@@ -0,0 +1,66 @@
+@mixin select-filled {
+  nb-select.appearance-filled .select-button {
+    background-color: nb-theme(select-filled-background-color);
+    border-color: nb-theme(select-filled-border-color);
+    border-style: nb-theme(select-filled-border-style);
+    border-width: nb-theme(select-filled-border-width);
+    color: nb-theme(select-filled-text-color);
+
+    &.placeholder {
+      color: nb-theme(select-filled-placeholder-text-color);
+    }
+
+    &:focus {
+      border-color: nb-theme(select-filled-focus-border-color);
+    }
+    &:hover {
+      background-color: nb-theme(select-filled-hover-background-color);
+      border-color: nb-theme(select-filled-hover-border-color);
+    }
+    &[disabled] {
+      color: nb-theme(select-filled-disabled-text-color);
+      background-color: nb-theme(select-filled-disabled-background-color);
+      border-color: nb-theme(select-filled-disabled-border-color);
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-select.appearance-filled.size-#{$size} .select-button {
+      padding: nb-theme(select-filled-#{$size}-padding);
+    }
+    .appearance-filled.size-#{$size} {
+      nb-option-group .option-group-title,
+      nb-option {
+        padding: nb-theme(select-option-filled-#{$size}-padding);
+      }
+      nb-option-group nb-option {
+        padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding);
+      }
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    nb-select.appearance-filled.status-#{$status} .select-button {
+      background-color: nb-theme(select-filled-#{$status}-background-color);
+      border-color: nb-theme(select-filled-#{$status}-border-color);
+      color: nb-theme(select-filled-#{$status}-text-color);
+
+      &.placeholder {
+        color: nb-theme(select-filled-#{$status}-placeholder-text-color);
+      }
+
+      &:focus {
+        background-color: nb-theme(select-filled-#{$status}-focus-background-color);
+        border-color: nb-theme(select-filled-#{$status}-focus-border-color);
+      }
+      &:hover {
+        background-color: nb-theme(select-filled-#{$status}-hover-background-color);
+        border-color: nb-theme(select-filled-#{$status}-hover-border-color);
+      }
+      &[disabled] {
+        background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
+        border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
+      }
+    }
+  }
+}

src/framework/theme/components/select/_select-hero.scss

@@ -0,0 +1,77 @@
+@mixin select-hero {
+  nb-select.appearance-hero .select-button {
+    $left-color: nb-theme(select-hero-left-background-color);
+    $right-color: nb-theme(select-hero-right-background-color);
+    background-image: linear-gradient(to right, $left-color, $right-color);
+    border-color: nb-theme(select-hero-border-color);
+    border-style: nb-theme(select-hero-border-style);
+    border-width: nb-theme(select-hero-border-width);
+    color: nb-theme(select-hero-text-color);
+
+    &.placeholder {
+      color: nb-theme(select-hero-placeholder-text-color);
+    }
+
+    &:focus {
+      $left-color: nb-theme(select-hero-focus-left-background-color);
+      $right-color: nb-theme(select-hero-focus-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+    }
+    &:hover {
+      $left-color: nb-theme(select-hero-hover-left-background-color);
+      $right-color: nb-theme(select-hero-hover-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+    }
+    &[disabled] {
+      color: nb-theme(select-hero-disabled-text-color);
+      $left-color: nb-theme(select-hero-disabled-left-background-color);
+      $right-color: nb-theme(select-hero-disabled-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-select.appearance-hero.size-#{$size} .select-button {
+      padding: nb-theme(select-hero-#{$size}-padding);
+    }
+    .appearance-hero.size-#{$size} {
+      nb-option-group .option-group-title,
+      nb-option {
+        padding: nb-theme(select-option-hero-#{$size}-padding);
+      }
+      nb-option-group nb-option {
+        padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding);
+      }
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    nb-select.appearance-hero.status-#{$status} .select-button {
+      $left-color: nb-theme(select-hero-#{$status}-left-background-color);
+      $right-color: nb-theme(select-hero-#{$status}-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+      color: nb-theme(select-hero-#{$status}-text-color);
+
+      &.placeholder {
+        color: nb-theme(select-hero-#{$status}-placeholder-text-color);
+      }
+
+      &:focus {
+        $left-color: nb-theme(select-hero-#{$status}-focus-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-focus-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
+      &:hover {
+        $left-color: nb-theme(select-hero-#{$status}-hover-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-hover-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
+      &[disabled] {
+        color: nb-theme(select-hero-#{$status}-disabled-text-color);
+        $left-color: nb-theme(select-hero-#{$status}-disabled-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-disabled-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
+    }
+  }
+}

src/framework/theme/components/select/_select-outline.scss

@@ -0,0 +1,55 @@
+@mixin select-outline {
+  nb-select.appearance-outline .select-button {
+    background-color: nb-theme(select-outline-background-color);
+    border-color: nb-theme(select-outline-border-color);
+    border-style: nb-theme(select-outline-border-style);
+    border-width: nb-theme(select-outline-border-width);
+    color: nb-theme(select-outline-text-color);
+
+    &.placeholder {
+      color: nb-theme(select-outline-placeholder-text-color);
+    }
+
+    &:focus {
+      border-color: nb-theme(select-outline-focus-border-color);
+    }
+    &:hover {
+      border-color: nb-theme(select-outline-hover-border-color);
+    }
+    &[disabled] {
+      color: nb-theme(select-outline-disabled-text-color);
+      background-color: nb-theme(select-outline-disabled-background-color);
+      border-color: nb-theme(select-outline-disabled-border-color);
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    nb-select.appearance-outline.status-#{$status} .select-button {
+      border-color: nb-theme(select-outline-#{$status}-border-color);
+      &.selected {
+        background-color: nb-theme(select-option-outline-#{$status}-selected-background-color);
+      }
+      &:focus {
+        border-color: nb-theme(select-outline-#{$status}-focus-border-color);
+      }
+      &:hover {
+        border-color: nb-theme(select-outline-#{$status}-hover-border-color);
+      }
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-select.appearance-outline.size-#{$size} .select-button {
+      padding: nb-theme(select-outline-#{$size}-padding);
+    }
+    .appearance-outline.size-#{$size} {
+      nb-option-group .option-group-title,
+      nb-option {
+        padding: nb-theme(select-option-outline-#{$size}-padding);
+      }
+      nb-option-group nb-option {
+        padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding);
+      }
+    }
+  }
+}