Skip to content

Commit

Permalink
feat(select): Eva style (#1391)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:

Arrow selector and element changed to svg icon.

NbSelectComponent 'isOpened' getter renamed to 'isOpen'.

NbOptionComponent and NbOptionGroupComponent 'disabledClass' getter
renamed to 'disabledAttribute'.

Following theme properties were renamed:
select-border-width -> select-[appearance]-border-width
select-max-height -> select-options-list-max-height
select-bg -> select-[appearance]-background-color
select-option-disabled-bg -> select-option-[appearance]-disabled-background-color
select-option-padding -> select-option-[appearance]-[size]-padding

Following theme properties removed:
select-checkmark-color
select-checkbox-color
select-option-disabled-opacity
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent 95fd46d commit 53fb3a6
Show file tree
Hide file tree
Showing 49 changed files with 1,600 additions and 633 deletions.
14 changes: 10 additions & 4 deletions src/app/playground-components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
},
],
},
{
Expand Down
66 changes: 66 additions & 0 deletions src/framework/theme/components/select/_select-filled.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
77 changes: 77 additions & 0 deletions src/framework/theme/components/select/_select-hero.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
55 changes: 55 additions & 0 deletions src/framework/theme/components/select/_select-outline.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
Loading

0 comments on commit 53fb3a6

Please sign in to comment.