Skip to content

Commit

Permalink
fix(tabs): update UI to match material design spec
Browse files Browse the repository at this point in the history
  • Loading branch information
@brandyscarney
brandyscarney committed Nov 18, 2016
1 parent 7bbfb7e commit e7275f2
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 46 deletions.
123 changes: 80 additions & 43 deletions src/components/tabs/tabs.md.scss
View file
Expand Up @@ -4,70 +4,85 @@
// --------------------------------------------------

/// @prop - Background color of the tabbar
$tabs-md-background: $toolbar-md-background !default;
$tabs-md-background: $toolbar-md-background !default;

/// @prop - Padding on the tab button
$tabs-md-tab-padding: 8px 0 10px 0 !default;
$tabs-md-tab-padding: 0 !default;

/// @prop - Min height of the tab button
$tabs-md-tab-min-height: 5.6rem !default;
$tabs-md-tab-min-height: 5.6rem !default;

/// @prop - Font size of the inactive tab button text
$tabs-md-tab-font-size: 1.2rem !default;
$tabs-md-tab-font-size: 1.2rem !default;

/// @prop - Font weight of the tab button text
$tabs-md-tab-font-weight: normal !default;
$tabs-md-tab-font-weight: normal !default;

/// @prop - Opacity of the inactive tab button
$tabs-md-tab-opacity: .7 !default;
$tabs-md-tab-opacity: .7 !default;

/// @prop - Text color of the inactive tab button
$tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default;
$tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default;

/// @prop - Padding of the active tab button
$tabs-md-tab-padding-active: 6px 0 10px 0 !default;
$tabs-md-tab-padding-active: 0 !default;

/// @prop - Font size of the active tab button text
$tabs-md-tab-font-size-active: 1.4rem !default;
$tabs-md-tab-font-size-active: 1.4rem !default;

/// @prop - Text color of the active tab button
$tabs-md-tab-color-active: $toolbar-md-active-color !default;
$tabs-md-tab-color-active: $toolbar-md-active-color !default;

/// @prop - Margin on the tab button text
$tabs-md-tab-text-margin: 6px 0 !default;
$tabs-md-tab-text-margin: 0 !default;

/// @prop - Capitalization of the tab button text
$tabs-md-tab-text-capitalization: none !default;

/// @prop - Transform for the tab button text
$tabs-md-tab-text-transform: scale($tabs-md-tab-font-size / $tabs-md-tab-font-size-active) !default;
$tabs-md-tab-text-capitalization: none !default;

/// @prop - Transform origin for the tab button text
$tabs-md-tab-text-transform-origin: bottom center !default;

/// @prop - Margin on the active tab button text
$tabs-md-tab-text-margin-active: 7px 0 !default;
$tabs-md-tab-text-transform-origin: 50% 80% !default;

/// @prop - Transform for the active tab button text
$tabs-md-tab-text-transform-active: scale(1) !default;
$tabs-md-tab-text-transform-active: scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) !default;

/// @prop - Text transition for the tab button text
$tabs-md-tab-text-transition: transform 200ms ease-in-out !default;
$tabs-md-tab-text-transition: transform .3s ease-in-out !default;

/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only
$tabs-md-tab-icon-transform-active: translate3d(0, -2px, 0) !default;

/// @prop - Transform for the active tab button icon when the layout is icon-right
$tabs-md-tab-icon-right-transform-active: translate3d(2px, 0, 0) !default;

/// @prop - Transform for the active tab button icon when the layout is icon-bottom
$tabs-md-tab-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;

/// @prop - Transform for the active tab button icon when the layout is icon-left
$tabs-md-tab-icon-left-transform-active: translate3d(-2px, 0, 0) !default;

/// @prop - Transform origin for the tab button text
$tabs-md-tab-icon-transform-origin: 50% 150% !default;

/// @prop - Text transition for the tab button icon
$tabs-md-tab-icon-transition: transform .3s ease-in-out !default;

/// @prop - Size of the tab button icon
$tabs-md-tab-icon-size: 2.4rem !default;
$tabs-md-tab-icon-size: 2.4rem !default;


.tabs-md .tabbar {
background: $tabs-md-background;
}


// Material Design Tab Button
// --------------------------------------------------

.tabs-md .tab-button {
padding: $tabs-md-tab-padding;

min-height: $tabs-md-tab-min-height;

font-size: $tabs-md-tab-font-size-active;
font-weight: $tabs-md-tab-font-weight;
color: $tabs-md-tab-color;
}
Expand All @@ -78,56 +93,78 @@ $tabs-md-tab-icon-size: 2.4rem !default;
color: $tabs-md-tab-color-active;
}


// Material Design Tab Button Text
// --------------------------------------------------

.tabs-md .tab-button-text {
margin: $tabs-md-tab-text-margin;

font-size: $tabs-md-tab-font-size;

text-transform: $tabs-md-tab-text-capitalization;
transform: $tabs-md-tab-text-transform;
transform-origin: $tabs-md-tab-text-transform-origin;

transition: $tabs-md-tab-text-transition;
}

.tabs-md .tab-button[aria-selected=true] .tab-button-text {
margin: $tabs-md-tab-text-margin-active;

transform: $tabs-md-tab-text-transform-active;
transition: $tabs-md-tab-text-transition;
}

.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
margin-top: 4px;
margin-bottom: 0;
}

.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
margin-top: 0;
}


// Material Design Tab Button Icon
// --------------------------------------------------

.tabs-md .tab-button-icon {
min-width: $tabs-md-tab-icon-size + 5;
margin-top: 1px;

min-width: $tabs-md-tab-icon-size;

font-size: $tabs-md-tab-icon-size;
}

.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
margin-bottom: 0;
transform-origin: $tabs-md-tab-icon-transform-origin;
transition: $tabs-md-tab-icon-transition;
}

.tabs-md[tabsLayout=icon-bottom] .tab-button {
padding-top: 8px;
padding-bottom: 8px;
// Tab layout: icon-top, icon-only, title-only
.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-transform-active;
}

.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
margin-top: 0;
// Tab layout: icon-right
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-right-transform-active;
}

.tabs-md[tabsLayout=icon-right] .tab-button,
.tabs-md[tabsLayout=icon-left] .tab-button {
padding-bottom: 10px;
// Tab layout: icon-bottom
.tabs-md[tabsLayout=icon-bottom] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-bottom-transform-active;
}

.tabs-md[tabsLayout=icon-right] .tab-button ion-icon,
.tabs-md[tabsLayout=icon-left] .tab-button ion-icon {
min-width: 24px;
// Tab layout: icon-left
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-left-transform-active;
}


// Material Design Tab with Icon or Title only
// --------------------------------------------------

.tabs-md[tabsLayout=icon-hide] .tab-button,
.tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only {
padding: 6px 10px;
padding: 0 10px;
}


Expand Down
6 changes: 3 additions & 3 deletions src/components/tabs/test/tab-bar-scenarios/main.html
View file
Expand Up @@ -18,9 +18,9 @@

<!-- Icons on top of text -->
<ion-tabs no-navbar selectedIndex="2">
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
<ion-tab tabTitle="Location" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>


Expand Down

0 comments on commit e7275f2

Please sign in to comment.