Skip to content

Commit

Permalink
refactor(tabs): update Sass variable naming to be more consistent
Browse files Browse the repository at this point in the history 
Added comments on each Sass variable.

references #5651 references #7455
  • Loading branch information
@brandyscarney
brandyscarney committed Jul 29, 2016
1 parent 4dc53a2 commit af01841
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 80 deletions.
66 changes: 41 additions & 25 deletions src/components/tabs/tabs.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,61 +4,78 @@
// iOS Tabs
// --------------------------------------------------

$tabbar-ios-background: $toolbar-ios-background !default;
$tabbar-ios-item-padding: 0 2px !default;
$tabbar-ios-item-font-size: 10px !default;
$tabbar-ios-item-icon-size: 30px !default;
$tabbar-ios-height: 49px !default;
// Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-ios-border: 1px solid $toolbar-ios-border-color !default;

$tab-button-ios-max-width: 240px !default;
$tab-button-ios-active-color: $toolbar-ios-active-color !default;
$tab-button-ios-inactive-color: $toolbar-ios-inactive-color !default;
// Background color of the tabbar
$tabs-ios-background: $toolbar-ios-background !default;

// Padding on the tab button
$tabs-ios-tab-padding: 0 2px !default;

// Max width of the tab button
$tabs-ios-tab-max-width: 240px !default;

// Min height of the tab button
$tabs-ios-tab-min-height: 49px !default;

// Text color of the inactive tab button
$tabs-ios-tab-color: $toolbar-ios-inactive-color !default;

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

// Font size of the tab button text
$tabs-ios-tab-font-size: 10px !default;

// Size of the tab button icon
$tabs-ios-tab-icon-size: 30px !default;


ion-tabbar {
justify-content: center;

border-top: 1px solid $toolbar-ios-border-color;
background: $tabbar-ios-background;
border-top: $tabs-ios-border;
background: $tabs-ios-background;
}

ion-tabs[tabsPlacement=top] ion-tabbar {
border-top: 0;
border-bottom: 1px solid $toolbar-ios-border-color;
border-bottom: $tabs-ios-border;
}

.tab-button {
padding: $tabbar-ios-item-padding;
padding: $tabs-ios-tab-padding;

max-width: $tab-button-ios-max-width;
min-height: $tabbar-ios-height;
max-width: $tabs-ios-tab-max-width;
min-height: $tabs-ios-tab-min-height;

color: $tab-button-ios-inactive-color;
color: $tabs-ios-tab-color;
}

.tab-button:hover:not(.disable-hover),
.tab-button[aria-selected=true] {
color: $tab-button-ios-active-color;
color: $tabs-ios-tab-color-active;
}

.tab-button-text {
margin-top: 0;
margin-bottom: 0;

min-height: $tabbar-ios-item-font-size + 1;
min-height: $tabs-ios-tab-font-size + 1;

font-size: $tabbar-ios-item-font-size;
font-size: $tabs-ios-tab-font-size;
}

.has-title-only .tab-button-text {
font-size: $tabbar-ios-item-font-size + 2;
font-size: $tabs-ios-tab-font-size + 2;
}

.tab-button-icon {
min-width: $tabbar-ios-item-icon-size + 5;
height: $tabbar-ios-item-icon-size;
min-width: $tabs-ios-tab-icon-size + 5;
height: $tabs-ios-tab-icon-size;

font-size: $tabbar-ios-item-icon-size;
font-size: $tabs-ios-tab-icon-size;

&::before {
vertical-align: top;
Expand All @@ -83,7 +100,7 @@ ion-tabs[tabsPlacement=top] ion-tabbar {

[tabsLayout=icon-hide] .tab-button,
.tab-button.has-title-only {
min-height: $tabbar-ios-height - 8;
min-height: $tabs-ios-height - 8;

.tab-button-text {
margin: 2px 0;
Expand All @@ -95,7 +112,7 @@ ion-tabs[tabsPlacement=top] ion-tabbar {

[tabsLayout=title-hide] .tab-button,
.tab-button.icon-only {
min-height: $tabbar-ios-height - 8;
min-height: $tabs-ios-height - 8;
}

&.hairlines ion-tabs {
Expand Down Expand Up @@ -137,6 +154,5 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {

@include tabbar-ios($color-name, $color-base, $color-contrast);
}
83 changes: 54 additions & 29 deletions src/components/tabs/tabs.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,52 +4,77 @@
// Material Design Tabs
// --------------------------------------------------

$tabbar-md-background: $toolbar-md-background !default;
$tabbar-md-item-padding: 8px 0 10px 0 !default;
$tabbar-md-item-font-size: 1.4rem !default;
$tabbar-md-item-font-weight: normal !default;
$tabbar-md-item-icon-size: 2.4rem !default;
$tabbar-md-item-height: 5.6rem !default;

$tab-button-md-active-color: $toolbar-md-active-color !default;
$tab-button-md-active-font-size: 1.5rem !default;
$tab-button-md-active-padding-top: 6px !default;
$tab-button-md-inactive-opacity: .7 !default;
$tab-button-md-inactive-color: rgba($toolbar-md-inactive-color, $tab-button-md-inactive-opacity) !default;
$tab-button-md-text-transform: none !default;
$tab-button-md-text-margin: 6px 0 !default;
// Background color of the tabbar
$tabs-md-background: $toolbar-md-background !default;

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

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

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

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

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

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

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

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

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

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

// Text transformation for the tab button text
$tabs-md-tab-text-transform: none !default;

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


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

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

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

font-size: $tabbar-md-item-font-size;
font-weight: $tabbar-md-item-font-weight;
color: $tab-button-md-inactive-color;
font-size: $tabs-md-tab-font-size;
font-weight: $tabs-md-tab-font-weight;
color: $tabs-md-tab-color;

&[aria-selected=true] {
color: $tab-button-md-active-color;
font-size: $tab-button-md-active-font-size;
padding-top: $tab-button-md-active-padding-top;
padding: $tabs-md-tab-padding-active;

font-size: $tabs-md-tab-font-size-active;
color: $tabs-md-tab-color-active;
}
}

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

text-transform: $tab-button-md-text-transform;
text-transform: $tabs-md-tab-text-transform;
}

.tab-button-icon {
min-width: $tabbar-md-item-icon-size + 5;
min-width: $tabs-md-tab-icon-size + 5;

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

[tabsLayout=icon-top] {
Expand Down Expand Up @@ -99,7 +124,7 @@ ion-tabbar {
width: 1px;
height: 2px;

background: $tab-button-md-active-color;
background: $tabs-md-tab-color-active;
transform: translateZ(0);
transform-origin: 0 0;

Expand All @@ -124,7 +149,7 @@ ion-tabbar {
background-color: $color-base;

.tab-button {
color: rgba($color-contrast, $tab-button-md-inactive-opacity);
color: rgba($color-contrast, $tabs-md-tab-opacity);
}

.tab-button:hover:not(.disable-hover),
Expand Down
75 changes: 49 additions & 26 deletions src/components/tabs/tabs.wp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,66 @@
// Windows Tabs
// --------------------------------------------------

$tabbar-wp-background: $toolbar-wp-background !default;
$tabbar-wp-item-padding: 12px 10px 5px 10px !default;
$tabbar-wp-item-font-size: 1.2rem !default;
$tabbar-wp-item-font-weight: normal !default;
$tabbar-wp-item-icon-size: 2.4rem !default;
$tabbar-wp-item-height: 4.8rem !default;
// Background color of the tabbar
$tabs-wp-background: $toolbar-wp-background !default;

$tab-button-wp-active-color: $toolbar-wp-active-color !default;
$tab-button-wp-inactive-opacity: .7 !default;
$tab-button-wp-inactive-color: rgba($toolbar-wp-inactive-color, $tab-button-wp-inactive-opacity) !default;
// Padding on the tab button
$tabs-wp-tab-padding: 12px 10px 5px 10px !default;

// Min height of the tab button
$tabs-wp-tab-min-height: 4.8rem !default;

// Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-wp-tab-border: 2px solid transparent !default;

// Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-wp-tab-border-color-active: $tabs-wp-tab-color-active !default;

// Font size of the tab button text
$tabs-wp-tab-font-size: 1.2rem !default;

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

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

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

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

// Background of the tab button when pressed
$tabs-wp-tab-background-activated: rgba(0, 0, 0, .1) !default;

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

$tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;

ion-tabbar {
background: $tabbar-wp-background;
background: $tabs-wp-background;
}


.tab-button {
padding: $tabbar-wp-item-padding;
padding: $tabs-wp-tab-padding;

min-height: $tabbar-wp-item-height;
min-height: $tabs-wp-tab-min-height;

border-bottom: 2px solid transparent;
border-bottom: $tabs-wp-tab-border;
border-radius: 0;
font-size: $tabbar-wp-item-font-size;
font-weight: $tabbar-wp-item-font-weight;
color: $tab-button-wp-inactive-color;
font-size: $tabs-wp-tab-font-size;
font-weight: $tabs-wp-tab-font-weight;
color: $tabs-wp-tab-color;
box-shadow: none;

&[aria-selected=true] {
border-bottom-color: $tab-button-wp-active-color;
color: $tab-button-wp-active-color;
border-bottom-color: $tabs-wp-tab-border-color-active;
color: $tabs-wp-tab-color-active;
}

&.activated {
background: $tab-button-wp-background-activated;
background: $tabs-wp-tab-background-activated;
}
}

Expand All @@ -50,9 +73,9 @@ ion-tabbar {
}

.tab-button-icon {
min-width: $tabbar-wp-item-icon-size;
min-width: $tabs-wp-tab-icon-size;

font-size: $tabbar-wp-item-icon-size;
font-size: $tabs-wp-tab-icon-size;
}

[tabsLayout=icon-bottom] .tab-button {
Expand All @@ -77,11 +100,11 @@ ion-tabbar {
}

[tabsPlacement=bottom] .tab-button {
border-top: 2px solid transparent;
border-top: $tabs-wp-tab-border;
border-bottom-width: 0;

&[aria-selected=true] {
border-top-color: $tab-button-wp-active-color;
border-top-color: $tabs-wp-tab-border-color-active;
}
}

Expand All @@ -97,7 +120,7 @@ ion-tabbar {
background-color: $color-base;

.tab-button {
color: rgba($color-contrast, $tab-button-wp-inactive-opacity);
color: rgba($color-contrast, $tabs-wp-tab-opacity);
}

.tab-button:hover:not(.disable-hover),
Expand Down

0 comments on commit af01841

Please sign in to comment.