feat(select): more border and icon theme properties (#1468)

akveo · May 28, 2019 · 9e1c604 · 9e1c604
1 parent 8ca1cc0
commit 9e1c604
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 1 deletion.
diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss
@@ -20,9 +20,21 @@
       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);
+
+      nb-icon {
+        color: nb-theme(select-filled-disabled-icon-color);
+      }
+    }
+
+    nb-icon {
+      color: nb-theme(select-filled-icon-color);
     }
   }
 
+  .options-list-container.appearance-filled {
+    border-color: nb-theme(select-options-list-filled-border-color);
+  }
+
   @each $size in nb-get-sizes() {
     nb-select.appearance-filled.size-#{$size} .select-button {
       padding: nb-theme(select-filled-#{$size}-padding);
@@ -60,7 +72,19 @@
         background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
         border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
         color: nb-theme(select-filled-#{$status}-disabled-text-color);
+
+        nb-icon {
+          color: nb-theme(select-filled-#{$status}-disabled-icon-color);
+        }
+      }
+
+      nb-icon {
+        color: nb-theme(select-filled-#{$status}-icon-color);
       }
     }
+
+    .options-list-container.appearance-filled.status-#{$status} {
+      border-color: nb-theme(select-options-list-filled-#{$status}-border-color);
+    }
   }
 }
diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss
@@ -20,9 +20,21 @@
       color: nb-theme(select-hero-disabled-text-color);
       background-color: nb-theme(select-hero-disabled-background-color);
       background-image: none;
+
+      nb-icon {
+        color: nb-theme(select-hero-disabled-icon-color);
+      }
+    }
+
+    nb-icon {
+      color: nb-theme(select-hero-icon-color);
     }
   }
 
+  .options-list-container.appearance-hero {
+    border-color: nb-theme(select-options-list-hero-border-color);
+  }
+
   @each $size in nb-get-sizes() {
     nb-select.appearance-hero.size-#{$size} .select-button {
       padding: nb-theme(select-hero-#{$size}-padding);
@@ -63,7 +75,19 @@
         color: nb-theme(select-hero-#{$status}-disabled-text-color);
         background-color: nb-theme(select-hero-#{$status}-disabled-background-color);
         background-image: none;
+
+        nb-icon {
+          color: nb-theme(select-hero-#{$status}-disabled-icon-color);
+        }
+      }
+
+      nb-icon {
+        color: nb-theme(select-hero-#{$status}-icon-color);
       }
     }
+
+    .options-list-container.appearance-hero.status-#{$status} {
+      border-color: nb-theme(select-options-list-hero-#{$status}-border-color);
+    }
   }
 }
diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
@@ -10,6 +10,17 @@
       color: nb-theme(select-outline-placeholder-text-color);
     }
 
+    &.top {
+      border-top-color: nb-theme(select-outline-adjacent-border-color);
+      border-top-style: nb-theme(select-outline-adjacent-border-style);
+      border-top-width: nb-theme(select-outline-adjacent-border-width);
+    }
+    &.bottom {
+      border-bottom-color: nb-theme(select-outline-adjacent-border-color);
+      border-bottom-style: nb-theme(select-outline-adjacent-border-style);
+      border-bottom-width: nb-theme(select-outline-adjacent-border-width);
+    }
+
     &:focus {
       border-color: nb-theme(select-outline-focus-border-color);
     }
@@ -20,7 +31,19 @@
       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);
+
+      nb-icon {
+        color: nb-theme(select-outline-disabled-icon-color);
+      }
     }
+
+    nb-icon {
+      color: nb-theme(select-outline-icon-color);
+    }
+  }
+
+  .options-list-container.appearance-outline {
+    border-color: nb-theme(select-options-list-outline-border-color);
   }
 
   @each $status in nb-get-statuses() {
@@ -36,6 +59,10 @@
         border-color: nb-theme(select-outline-#{$status}-disabled-border-color);
       }
     }
+
+    .options-list-container.appearance-outline.status-#{$status} {
+      border-color: nb-theme(select-options-list-outline-#{$status}-border-color);
+    }
   }
 
   @each $size in nb-get-sizes() {

diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss
@@ -34,6 +34,14 @@
     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;

diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss
@@ -58,6 +58,6 @@ nb-icon {
   @include nb-component-animation(transform);
 }
 
-.select-button.open nb-icon {
+:host(.open) nb-icon {
   transform: translateY(-50%) rotate(180deg);
 }
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -141,6 +141,9 @@ export class NbSelectLabelComponent {
  * select-min-width:
  * select-options-list-max-height:
  * select-options-list-shadow:
+ * select-options-list-border-color:
+ * select-options-list-border-style:
+ * select-options-list-border-width:
  * select-outline-width:
  * select-outline-color:
  * select-text-font-family:
@@ -178,12 +181,14 @@ export class NbSelectLabelComponent {
  * select-outline-border-color:
  * select-outline-border-style:
  * select-outline-border-width:
+ * select-outline-icon-color:
  * select-outline-text-color:
  * select-outline-placeholder-text-color:
  * select-outline-focus-border-color:
  * select-outline-hover-border-color:
  * select-outline-disabled-background-color:
  * select-outline-disabled-border-color:
+ * select-outline-disabled-icon-color:
  * select-outline-disabled-text-color:
  * select-outline-tiny-padding:
  * select-outline-small-padding:
@@ -215,21 +220,37 @@ export class NbSelectLabelComponent {
  * select-option-outline-medium-padding:
  * select-option-outline-large-padding:
  * select-option-outline-giant-padding:
+ * select-outline-adjacent-border-color:
+ * select-outline-adjacent-border-style:
+ * select-outline-adjacent-border-width:
+ * select-outline-primary-adjacent-border-color:
+ * select-outline-success-adjacent-border-color:
+ * select-outline-info-adjacent-border-color:
+ * select-outline-warning-adjacent-border-color:
+ * select-outline-danger-adjacent-border-color:
  * select-group-option-outline-tiny-start-padding:
  * select-group-option-outline-small-start-padding:
  * select-group-option-outline-medium-start-padding:
  * select-group-option-outline-large-start-padding:
  * select-group-option-outline-giant-start-padding:
+ * select-options-list-outline-border-color:
+ * select-options-list-outline-primary-border-color:
+ * select-options-list-outline-success-border-color:
+ * select-options-list-outline-info-border-color:
+ * select-options-list-outline-warning-border-color:
+ * select-options-list-outline-danger-border-color:
  * select-filled-background-color:
  * select-filled-border-color:
  * select-filled-border-style:
  * select-filled-border-width:
+ * select-filled-icon-color:
  * select-filled-text-color:
  * select-filled-placeholder-text-color:
  * select-filled-focus-border-color:
  * select-filled-hover-border-color:
  * select-filled-disabled-background-color:
  * select-filled-disabled-border-color:
+ * select-filled-disabled-icon-color:
  * select-filled-disabled-text-color:
  * select-filled-tiny-padding:
  * select-filled-small-padding:
@@ -238,6 +259,7 @@ export class NbSelectLabelComponent {
  * select-filled-giant-padding:
  * select-filled-primary-background-color:
  * select-filled-primary-border-color:
+ * select-filled-primary-icon-color:
  * select-filled-primary-text-color:
  * select-filled-primary-placeholder-text-color:
  * select-filled-primary-focus-background-color:
@@ -246,9 +268,11 @@ export class NbSelectLabelComponent {
  * select-filled-primary-hover-border-color:
  * select-filled-primary-disabled-background-color:
  * select-filled-primary-disabled-border-color:
+ * select-filled-primary-disabled-icon-color:
  * select-filled-primary-disabled-text-color:
  * select-filled-success-background-color:
  * select-filled-success-border-color:
+ * select-filled-success-icon-color:
  * select-filled-success-text-color:
  * select-filled-success-placeholder-text-color:
  * select-filled-success-focus-background-color:
@@ -257,9 +281,11 @@ export class NbSelectLabelComponent {
  * select-filled-success-hover-border-color:
  * select-filled-success-disabled-background-color:
  * select-filled-success-disabled-border-color:
+ * select-filled-success-disabled-icon-color:
  * select-filled-success-disabled-text-color:
  * select-filled-info-background-color:
  * select-filled-info-border-color:
+ * select-filled-info-icon-color:
  * select-filled-info-text-color:
  * select-filled-info-placeholder-text-color:
  * select-filled-info-focus-background-color:
@@ -268,9 +294,11 @@ export class NbSelectLabelComponent {
  * select-filled-info-hover-border-color:
  * select-filled-info-disabled-background-color:
  * select-filled-info-disabled-border-color:
+ * select-filled-info-disabled-icon-color:
  * select-filled-info-disabled-text-color:
  * select-filled-warning-background-color:
  * select-filled-warning-border-color:
+ * select-filled-warning-icon-color:
  * select-filled-warning-text-color:
  * select-filled-warning-placeholder-text-color:
  * select-filled-warning-focus-background-color:
@@ -279,9 +307,11 @@ export class NbSelectLabelComponent {
  * select-filled-warning-hover-border-color:
  * select-filled-warning-disabled-background-color:
  * select-filled-warning-disabled-border-color:
+ * select-filled-warning-disabled-icon-color:
  * select-filled-warning-disabled-text-color:
  * select-filled-danger-background-color:
  * select-filled-danger-border-color:
+ * select-filled-danger-icon-color:
  * select-filled-danger-text-color:
  * select-filled-danger-placeholder-text-color:
  * select-filled-danger-focus-background-color:
@@ -290,6 +320,7 @@ export class NbSelectLabelComponent {
  * select-filled-danger-hover-border-color:
  * select-filled-danger-disabled-background-color:
  * select-filled-danger-disabled-border-color:
+ * select-filled-danger-disabled-icon-color:
  * select-filled-danger-disabled-text-color:
  * select-option-filled-tiny-padding:
  * select-group-option-filled-tiny-padding-start:
@@ -301,15 +332,23 @@ export class NbSelectLabelComponent {
  * select-group-option-filled-large-padding-start:
  * select-option-filled-giant-padding:
  * select-group-option-filled-giant-padding-start:
+ * select-options-list-filled-border-color:
+ * select-options-list-filled-primary-border-color:
+ * select-options-list-filled-success-border-color:
+ * select-options-list-filled-info-border-color:
+ * select-options-list-filled-warning-border-color:
+ * select-options-list-filled-danger-border-color:
  * select-hero-background-color:
  * select-hero-border-color:
  * select-hero-border-style:
  * select-hero-border-width:
+ * select-hero-icon-color:
  * select-hero-text-color:
  * select-hero-placeholder-text-color:
  * select-hero-focus-border-color:
  * select-hero-hover-border-color:
  * select-hero-disabled-background-color:
+ * select-hero-disabled-icon-color:
  * select-hero-disabled-text-color:
  * select-hero-tiny-padding:
  * select-hero-small-padding:
@@ -318,53 +357,63 @@ export class NbSelectLabelComponent {
  * select-hero-giant-padding:
  * select-hero-primary-left-background-color:
  * select-hero-primary-right-background-color:
+ * select-hero-primary-icon-color:
  * select-hero-primary-text-color:
  * select-hero-primary-placeholder-text-color:
  * select-hero-primary-focus-left-background-color:
  * select-hero-primary-focus-right-background-color:
  * select-hero-primary-hover-left-background-color:
  * select-hero-primary-hover-right-background-color:
  * select-hero-primary-disabled-background-color:
+ * select-hero-primary-disabled-icon-color:
  * select-hero-primary-disabled-text-color:
  * select-hero-success-left-background-color:
  * select-hero-success-right-background-color:
+ * select-hero-success-icon-color:
  * select-hero-success-text-color:
  * select-hero-success-placeholder-text-color:
  * select-hero-success-focus-left-background-color:
  * select-hero-success-focus-right-background-color:
  * select-hero-success-hover-left-background-color:
  * select-hero-success-hover-right-background-color:
  * select-hero-success-disabled-background-color:
+ * select-hero-success-disabled-icon-color:
  * select-hero-success-disabled-text-color:
  * select-hero-info-left-background-color:
  * select-hero-info-right-background-color:
+ * select-hero-info-icon-color:
  * select-hero-info-text-color:
  * select-hero-info-placeholder-text-color:
  * select-hero-info-focus-left-background-color:
  * select-hero-info-focus-right-background-color:
  * select-hero-info-hover-left-background-color:
  * select-hero-info-hover-right-background-color:
  * select-hero-info-disabled-background-color:
+ * select-hero-info-disabled-icon-color:
  * select-hero-info-disabled-text-color:
  * select-hero-warning-left-background-color:
  * select-hero-warning-right-background-color:
+ * select-hero-warning-icon-color:
  * select-hero-warning-text-color:
  * select-hero-warning-placeholder-text-color:
  * select-hero-warning-focus-left-background-color:
  * select-hero-warning-focus-right-background-color:
  * select-hero-warning-hover-left-background-color:
  * select-hero-warning-hover-right-background-color:
  * select-hero-warning-disabled-background-color:
+ * select-hero-warning-disabled-icon-color:
  * select-hero-warning-disabled-text-color:
  * select-hero-danger-left-background-color:
  * select-hero-danger-right-background-color:
+ * select-hero-danger-icon-color:
  * select-hero-danger-text-color:
  * select-hero-danger-placeholder-text-color:
  * select-hero-danger-focus-left-background-color:
  * select-hero-danger-focus-right-background-color:
  * select-hero-danger-hover-left-background-color:
  * select-hero-danger-hover-right-background-color:
  * select-hero-danger-disabled-background-color:
+ * select-hero-danger-disabled-icon-color:
  * select-hero-danger-disabled-text-color:
  * select-option-hero-tiny-padding:
  * select-group-option-hero-tiny-padding-start:
@@ -376,6 +425,12 @@ export class NbSelectLabelComponent {
  * select-group-option-hero-large-padding-start:
  * select-option-hero-giant-padding:
  * select-group-option-hero-giant-padding-start:
+ * select-options-list-hero-border-color:
+ * select-options-list-hero-primary-border-color:
+ * select-options-list-hero-success-border-color:
+ * select-options-list-hero-info-border-color:
+ * select-options-list-hero-warning-border-color:
+ * select-options-list-hero-danger-border-color:
  * */
 @Component({
   selector: 'nb-select',