Skip to content

Commit

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

NbTabset theme properties prefix changed to 'tabset'.

Following properties were renamed:
tabs-font-family -> tabset-tab-text-font-family
tabs-font-size -> tabset-tab-text-font-size
tabs-content-font-family -> tabset-content-text-font-family
tabs-content-font-size -> tabset-content-text-font-size
tabs-active-bg -> tabset-tab-selected-background-color
tabs-padding -> tabset-tab-padding
tabs-content-padding -> tabset-content-padding
tabs-header-bg -> tabset-tab-background-color
tabs-separator -> tabset-divider-color
tabs-fg -> tabset-tab-text-color
tabs-fg-disabled -> tabset-tab-disabled-text-color
tabs-fg-text -> tabset-content-text-color
tabs-fg-heading -> tabset-tab-selected-text-color, tabset-tab-focus-text-color, tabset-tab-hover-text-color
tabs-bg -> tabset-content-background-color
tabs-selected -> tabset-tab-underline-color
tabs-icon-only-max-width -> tabset-tab-text-hide-breakpoint

Following properties were removed:
tabs-active-font-weight
tabs-selected-second-color
tabs-selected-degrees

NbRouteTabset theme properties prefix changed to 'route-tabset'.

Following properties were renamed:
route-tabs-font-family -> route-tabset-tab-text-font-family
route-tabs-font-size -> route-tabset-tab-text-font-size
route-tabs-active-bg -> route-tabset-tab-selected-background-color
route-tabs-active-font-weight ->
route-tabs-padding -> route-tabset-tab-padding
route-tabs-header-bg -> route-tabset-tab-background-color
route-tabs-separator -> route-tabset-divider-color
route-tabs-fg -> route-tabset-tab-text-color
route-tabs-fg-disabled -> route-tabset-tab-disabled-text-color
route-tabs-fg-heading -> route-tabset-tab-selected-text-color, route-tabset-tab-focus-text-color,
route-tabset-tab-hover-text-color
route-tabs-selected -> route-tabset-tab-underline-color
route-tabs-icon-only-max-width -> route-tabset-tab-text-hide-breakpoint

'route-tabs-bg' property was unused and removed.
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent 2d05714 commit 25f30c5
Show file tree
Hide file tree
Showing 7 changed files with 274 additions and 159 deletions.
113 changes: 69 additions & 44 deletions src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,88 @@

nb-route-tabset {
@include nb-scrollbars(
nb-theme(scrollbar-fg),
nb-theme(scrollbar-bg),
nb-theme(scrollbar-width));
nb-theme(route-tabset-scrollbar-color),
nb-theme(route-tabset-scrollbar-background-color),
nb-theme(route-tabset-scrollbar-width));

background-color: nb-theme(route-tabset-background-color);
border-radius: nb-theme(route-tabset-border-radius);
box-shadow: nb-theme(route-tabset-shadow);

.route-tabset {
font-family: nb-theme(route-tabs-font-family);
font-size: nb-theme(route-tabs-font-size);
border-bottom: nb-theme(route-tabset-divider-width) solid nb-theme(route-tabset-divider-color);
}

padding: 0 nb-theme(route-tabs-padding);
border-bottom: 1px solid nb-theme(route-tabs-separator);
.tab-link {
background-color: nb-theme(route-tabset-tab-background-color);
cursor: pointer;
padding: nb-theme(route-tabset-tab-padding);
color: nb-theme(route-tabset-tab-text-color);
font-family: nb-theme(route-tabset-tab-text-font-family);
font-size: nb-theme(route-tabset-tab-text-font-size);
font-weight: nb-theme(route-tabset-tab-text-font-weight);
line-height: nb-theme(route-tabset-tab-text-line-height);
text-transform: nb-theme(route-tabset-tab-text-transform);

.route-tab {
background: nb-theme(route-tabs-header-bg);
min-width: nb-theme(route-tabs-header-min-width);
cursor: pointer;
a {
padding: nb-theme(route-tabs-padding);
color: nb-theme(route-tabs-fg);
&::before {
background-color: nb-theme(route-tabset-tab-underline-color);
height: nb-theme(route-tabset-tab-underline-width);
}
}

&:hover {
color: nb-theme(route-tabs-fg-heading);
}
.route-tab {
min-width: nb-theme(route-tabs-header-min-width);
}

&::before {
background: nb-theme(route-tabs-selected);
}
.route-tab.active {
.tab-link {
background-color: nb-theme(tabset-tab-active-background-color);
color: nb-theme(tabset-tab-active-text-color);
&::before {
background-color: nb-theme(tabset-tab-active-underline-color);
}
}
}

&.active {
background: nb-theme(route-tabs-active-bg);

a {
font-weight: nb-theme(route-tabs-active-font-weight);
color: nb-theme(route-tabs-fg-heading);
}
.route-tab:focus {
.tab-link {
background-color: nb-theme(route-tabset-tab-focus-background-color);
color: nb-theme(route-tabset-tab-focus-text-color);
&::before {
background-color: nb-theme(route-tabset-tab-focus-underline-color);
}
}
}

&.responsive {
@media screen and (max-width: nb-theme(route-tabs-icon-only-max-width)) {
a span {
display: none;
}
}
.route-tab:hover {
.tab-link {
background-color: nb-theme(route-tabset-tab-hover-background-color);
color: nb-theme(route-tabset-tab-hover-text-color);
&::before {
background-color: nb-theme(route-tabset-tab-hover-underline-color);
}
}
}

.route-tab.disabled {
cursor: default;
pointer-events: none;

.tab-link {
background-color: nb-theme(route-tabset-tab-disabled-background-color);
color: nb-theme(route-tabset-tab-disabled-text-color);
cursor: default;
pointer-events: none;
&::before {
background-color: nb-theme(route-tabset-tab-disabled-underline-color);
}
}
}

&.disabled {
pointer-events: none;
cursor: default;
a {
color: nb-theme(route-tabs-fg-disabled);
cursor: default;
pointer-events: none;
&:hover {
color: nb-theme(route-tabs-fg-disabled);
}
}
.route-tab.responsive {
@media screen and (max-width: nb-theme(route-tabs-icon-only-max-width)) {
.tab-text {
display: none;
}
}
}
Expand Down
4 changes: 1 addition & 3 deletions src/framework/theme/components/route-tabset/route-tabset.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
.route-tab {
margin-bottom: -1px;
text-align: center;
padding: 0;

&.active a::before {
display: block;
Expand All @@ -26,18 +27,15 @@
display: inline-block;

&::before {
display: none;
position: absolute;
content: '';
width: 100%;
height: 6px;
border-radius: 3px;
bottom: -2px;
left: 0;
}

nb-icon {
font-size: 1.5rem;
vertical-align: middle;
}

Expand Down
8 changes: 4 additions & 4 deletions src/framework/theme/components/route-tabset/route-tabset.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ import { convertToBoolProperty } from '../helpers';
[class.responsive]="tab.responsive"
class="route-tab disabled"
tabindex="-1">
<a tabindex="-1">
<a tabindex="-1" class="tab-link">
<nb-icon *ngIf="tab.icon" [icon]="tab.icon"></nb-icon>
<span *ngIf="tab.title">{{ tab.title }}</span>
<span *ngIf="tab.title" class="tab-text">{{ tab.title }}</span>
</a>
</li>
Expand All @@ -81,9 +81,9 @@ import { convertToBoolProperty } from '../helpers';
[class.responsive]="tab.responsive"
tabindex="0"
class="route-tab">
<a tabindex="-1">
<a tabindex="-1" class="tab-link">
<nb-icon *ngIf="tab.icon" [icon]="tab.icon"></nb-icon>
<span *ngIf="tab.title">{{ tab.title }}</span>
<span *ngIf="tab.title" class="tab-text">{{ tab.title }}</span>
</a>
</li>
</ng-template>
Expand Down
123 changes: 73 additions & 50 deletions src/framework/theme/components/tabset/_tabset.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,74 +7,97 @@
@mixin nb-tabset-theme() {

nb-tabset {
// TODO: move to global mixin
@include nb-scrollbars(
nb-theme(scrollbar-fg),
nb-theme(scrollbar-bg),
nb-theme(scrollbar-width));
nb-theme(tabset-scrollbar-color),
nb-theme(tabset-scrollbar-background-color),
nb-theme(tabset-scrollbar-width));

.tabset {
font-family: nb-theme(tabs-font-family);
font-size: nb-theme(tabs-font-size);

padding: 0 nb-theme(tabs-padding);
border-bottom: 1px solid nb-theme(tabs-separator);
background-color: nb-theme(tabset-background-color);
border-radius: nb-theme(tabset-border-radius);
box-shadow: nb-theme(tabset-shadow);

.tab {
background: nb-theme(tabs-header-bg);
cursor: pointer;
.tabset {
border-bottom: nb-theme(tabset-divider-width) solid nb-theme(tabset-divider-color);
}

a {
padding: nb-theme(tabs-padding);
color: nb-theme(tabs-fg);
.tab-link {
background-color: nb-theme(tabset-tab-background-color);
cursor: pointer;
padding: nb-theme(tabset-tab-padding);
color: nb-theme(tabset-tab-text-color);
font-family: nb-theme(tabset-tab-text-font-family);
font-size: nb-theme(tabset-tab-text-font-size);
font-weight: nb-theme(tabset-tab-text-font-weight);
line-height: nb-theme(tabset-tab-text-line-height);
text-transform: nb-theme(tabset-tab-text-transform);

&:hover {
color: nb-theme(tabs-fg-heading);
}
&::before {
background-color: nb-theme(tabset-tab-underline-color);
height: nb-theme(tabset-tab-underline-width);
}
}

&::before {
background: nb-theme(tabs-selected);
}
.tab.active {
.tab-link {
background-color: nb-theme(tabset-tab-active-background-color);
color: nb-theme(tabset-tab-active-text-color);
&::before {
background-color: nb-theme(tabset-tab-active-underline-color);
}
}
}

&.active {
background: nb-theme(tabs-active-bg);
.tab:focus {
.tab-link {
background-color: nb-theme(tabset-tab-focus-background-color);
color: nb-theme(tabset-tab-focus-text-color);
&::before {
background-color: nb-theme(tabset-tab-focus-underline-color);
}
}
}

a {
font-weight: nb-theme(tabs-active-font-weight);
color: nb-theme(tabs-fg-heading);
}
.tab:hover {
.tab-link {
color: nb-theme(tabset-tab-hover-text-color);
background-color: nb-theme(tabset-tab-hover-background-color);
&::before {
background-color: nb-theme(tabset-tab-hover-underline-color);
}
}
}

.tab.disabled {
cursor: default;
pointer-events: none;

&.responsive {
@media screen and (max-width: nb-theme(tabs-icon-only-max-width)) {
a span {
display: none;
}
}
.tab-link {
background-color: nb-theme(tabset-tab-disabled-background-color);
color: nb-theme(tabset-tab-disabled-text-color);
cursor: default;
pointer-events: none;
&::before {
background-color: nb-theme(tabset-tab-disabled-underline-color);
}
}
}

&.disabled {
cursor: default;
pointer-events: none;
a {
color: nb-theme(tabs-fg-disabled);
cursor: default;
pointer-events: none;
&:hover {
color: nb-theme(tabs-fg-disabled);
}
}
.tab.responsive {
@media screen and (max-width: nb-theme(tabset-tab-text-hide-breakpoint)) {
.tab-text {
display: none;
}
}
}

nb-tab {
font-family: nb-theme(tabs-content-font-family);
font-size: nb-theme(tabs-content-font-size);
color: nb-theme(tabs-fg-text);
background-color: nb-theme(tabs-bg);
padding: nb-theme(tabs-content-padding);
background-color: nb-theme(tabset-content-background-color);
color: nb-theme(tabset-content-text-color);
font-family: nb-theme(tabset-content-text-font-family);
font-size: nb-theme(tabset-content-text-font-size);
font-weight: nb-theme(tabset-content-text-font-weight);
line-height: nb-theme(tabset-content-text-line-height);
padding: nb-theme(tabset-content-padding);
}
}
}
8 changes: 3 additions & 5 deletions src/framework/theme/components/tabset/tabset.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;

.tab {
margin-bottom: -1px;
Expand All @@ -45,22 +46,19 @@
text-decoration: none;

&::before {
display: none;
position: absolute;
content: '';
width: 100%;
height: 6px;
border-radius: 3px;
bottom: -2px;
left: 0;
}

i {
font-size: 1.5rem;
nb-icon {
vertical-align: middle;
}

i + span {
nb-icon + span {
@include nb-ltr(margin-left, 0.5rem);
@include nb-rtl(margin-right, 0.5rem);
}
Expand Down
Loading

0 comments on commit 25f30c5

Please sign in to comment.