From 633f1a8e1735b0ae1a6d5952240b67bbbf94f684 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 26 Nov 2019 17:22:08 +0300 Subject: [PATCH 1/4] refactor(select): add options list overlay offset --- src/framework/theme/components/select/select.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index ee228a5ca6..85a66aaf0d 100644 --- 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 implements AfterViewInit, AfterContentInit, On overlayPosition: NbPosition = '' as NbPosition; protected ref: NbOverlayRef; + protected optionsOverlayOffset = 8; protected triggerStrategy: NbTriggerStrategy; @@ -990,7 +991,7 @@ export class NbSelectComponent implements AfterViewInit, AfterContentInit, On return this.positionBuilder .connectedTo(this.button) .position(NbPosition.BOTTOM) - .offset(0) + .offset(this.optionsOverlayOffset) .adjustment(NbAdjustment.VERTICAL); } From f617ecd562ff502efcd162e8deb5ba06b1694769 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 26 Nov 2019 17:23:22 +0300 Subject: [PATCH 2/4] refactor(select): Eva style --- .../select/_select.component.theme.scss | 50 ++++---- .../components/select/option.component.ts | 1 + .../components/select/select.component.scss | 9 -- .../theme/styles/themes/_mapping.scss | 109 +++++++++--------- 4 files changed, 87 insertions(+), 82 deletions(-) diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index c401c5c303..3f625cc3c1 100644 --- 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); @@ -93,19 +86,9 @@ } @each $shape in nb-get-shapes() { - nb-select.shape-#{$shape} .select-button { - border-radius: nb-theme(select-#{$shape}-border-radius); - } - + nb-select.shape-#{$shape} .select-button, .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); - } + border-radius: nb-theme(select-#{$shape}-border-radius); } } @@ -120,6 +103,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 +115,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 index 7f10af072d..c009941648 100644 --- 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 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 index 88b719a33d..4c1c47dc13 100644 --- 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/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss index ed2acde777..4edd1b8fe3 100644 --- a/src/framework/theme/styles/themes/_mapping.scss +++ b/src/framework/theme/styles/themes/_mapping.scss @@ -1742,9 +1742,10 @@ $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, @@ -1753,12 +1754,16 @@ $eva-mapping: ( 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 +1809,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 +1829,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 +1843,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 +1857,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 +1871,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 +1885,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 +1942,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 +2075,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 +2198,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, From 0b44a7c62a085615984b0d7687d6e97465632873 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 27 Nov 2019 15:26:42 +0300 Subject: [PATCH 3/4] feat(select): add icon offset theme property --- src/framework/theme/components/select/_select-filled.scss | 2 ++ src/framework/theme/components/select/_select-hero.scss | 2 ++ src/framework/theme/components/select/_select-outline.scss | 2 ++ src/framework/theme/styles/themes/_mapping.scss | 1 + 4 files changed, 7 insertions(+) diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss index 1d6adb1af6..ff3537dd00 100644 --- 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 index 9003c6837a..2f3382a5c0 100644 --- 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 index e94526010f..7cacf09ccf 100644 --- 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/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss index 4edd1b8fe3..58e40a9cef 100644 --- a/src/framework/theme/styles/themes/_mapping.scss +++ b/src/framework/theme/styles/themes/_mapping.scss @@ -1748,6 +1748,7 @@ $eva-mapping: ( 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, From e6b6d207a84e5cc5f6d8939c023871beb4adc814 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 28 Nov 2019 11:54:41 +0300 Subject: [PATCH 4/4] refactor(options list): constant border radius --- .../theme/components/select/_select.component.theme.scss | 7 +++++-- src/framework/theme/components/select/select.component.ts | 1 - 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 3f625cc3c1..5a0e45470a 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -86,12 +86,15 @@ } @each $shape in nb-get-shapes() { - nb-select.shape-#{$shape} .select-button, - .options-list-container.shape-#{$shape} { + nb-select.shape-#{$shape} .select-button { border-radius: nb-theme(select-#{$shape}-border-radius); } } + .options-list-container { + border-radius: nb-theme(select-rectangle-border-radius); + } + nb-option-group, nb-option { background-color: nb-theme(select-option-background-color); diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 85a66aaf0d..848fbf6b30 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -787,7 +787,6 @@ export class NbSelectComponent implements AfterViewInit, AfterContentInit, On const classes = [ `appearance-${this.appearance}`, `size-${this.size}`, - `shape-${this.shape}`, `status-${this.status}`, this.overlayPosition, ];