javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

tab icon updates

Browse Source
This commit is contained in:
Adam Bradley
2013-10-31 15:00:04 -05:00
parent 2fc88c2346
commit ca3bbb24ab
8 changed files with 171 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
dist/css/ionic-ios7.css vendored
View File

@ -840,6 +840,7 @@ a.subdued‎ {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -moz-box-orient: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
color: #333333; color: #333333;
position: fixed; position: fixed;
@ -851,39 +852,56 @@ a.subdued‎ {
height: 49px; height: 49px;
border-style: solid; border-style: solid;
border-top-width: 1px; border-top-width: 1px;
font-size: 16px; } line-height: 49px;
background-size: 0; }
.tabs.tabs-default { .tabs.tabs-default {
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
color: #333333; } color: #333333; }
.tabs.tabs-secondary { .tabs.tabs-secondary {
background-color: whitesmoke; background-color: whitesmoke;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
border-color: #bbbbbb; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.tabs.tabs-primary { .tabs.tabs-primary {
background-color: #4a87ee; background-color: #4a87ee;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
border-color: #3b6dc2; border-color: #3b6dc2;
color: white; } color: white; }
.tabs.tabs-success { .tabs.tabs-success {
background-color: #66cc33; background-color: #66cc33;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
border-color: #5bb22f; border-color: #5bb22f;
color: white; } color: white; }
.tabs.tabs-info { .tabs.tabs-info {
background-color: #43cee6; background-color: #43cee6;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
border-color: #3bb3c8; border-color: #3bb3c8;
color: white; } color: white; }
.tabs.tabs-warning { .tabs.tabs-warning {
background-color: #f0b840; background-color: #f0b840;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
border-color: #d29f31; border-color: #d29f31;
color: white; } color: white; }
.tabs.tabs-danger { .tabs.tabs-danger {
background-color: #ef4e3a; background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
.tabs.tabs-dark { .tabs.tabs-dark {
background-color: #ef4e3a; background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.tabs {
padding-top: 2px;
border-top: none !important;
border-bottom: none !important;
background-position: top;
background-size: 100% 1px;
background-repeat: no-repeat; } }
.tabs-top { .tabs-top {
top: 44px; } top: 44px; }
@ -895,7 +913,6 @@ a.subdued‎ {
display: block; display: block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding-top: 4px;
width: 0; width: 0;
height: 100%; height: 100%;
color: inherit; color: inherit;
@ -909,33 +926,29 @@ a.subdued‎ {
opacity: 0.7; } opacity: 0.7; }
.tabs-icon-top .tab-item, .tabs-icon-top .tab-item,
.tabs-icon-right .tab-item, .tabs-icon-bottom .tab-item {
.tabs-icon-bottom .tab-item, font-size: 10px;
.tabs-icon-left .tab-item { line-height: 14px; }
position: relative;
padding-top: 0;
font-size: 10px; }
.tabs-icon-left .tab-item i {
position: absolute;
left: 4px;
display: flex;
height: 100%;
align-items: center; }
.tabs-icon-right .tab-item i {
position: absolute;
right: 4px;
display: flex;
height: 100%;
align-items: center; }
/* Icon for tab */
.tab-item i { .tab-item i {
display: block; display: block;
margin: 1px auto -3px auto; margin: 0 auto;
height: 32px;
font-size: 32px; } font-size: 32px; }
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
font-size: 10px; }
.tabs-icon-left .tab-item i,
.tabs-icon-right .tab-item i {
font-size: 24px;
display: inline-block;
vertical-align: top;
line-height: 49px; }
.tabs-icon-only i {
line-height: inherit; }
/* Navigational tab */ /* Navigational tab */
/* Active state for tab */ /* Active state for tab */
.tab-item.active, .tab-item:active { .tab-item.active, .tab-item:active {
@ -955,13 +968,6 @@ a.subdued‎ {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.menu { .menu {
position: absolute; position: absolute;
top: 0; top: 0;

63
dist/css/ionic-scoped.css vendored
View File

@ -136,10 +136,8 @@
* *
* A navigation bar with any number of tab items supported. * A navigation bar with any number of tab items supported.
*/ */
/* Icon for tab */
/* Navigational tab */ /* Navigational tab */
/* Active state for tab */ /* Active state for tab */
/* Label for tab */
/** /**
* Modals are independent windows that slide in from off-screen. * Modals are independent windows that slide in from off-screen.
*/ */
@ -1756,6 +1754,7 @@
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -moz-box-orient: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
color: #333333; color: #333333;
position: fixed; position: fixed;
@ -1767,39 +1766,56 @@
height: 49px; height: 49px;
border-style: solid; border-style: solid;
border-top-width: 1px; border-top-width: 1px;
font-size: 16px; } line-height: 49px;
background-size: 0; }
.ionic .tabs.tabs-default { .ionic .tabs.tabs-default {
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
color: #333333; } color: #333333; }
.ionic .tabs.tabs-secondary { .ionic .tabs.tabs-secondary {
background-color: whitesmoke; background-color: whitesmoke;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
border-color: #bbbbbb; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.ionic .tabs.tabs-primary { .ionic .tabs.tabs-primary {
background-color: #4a87ee; background-color: #4a87ee;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
border-color: #3b6dc2; border-color: #3b6dc2;
color: white; } color: white; }
.ionic .tabs.tabs-success { .ionic .tabs.tabs-success {
background-color: #66cc33; background-color: #66cc33;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
border-color: #5bb22f; border-color: #5bb22f;
color: white; } color: white; }
.ionic .tabs.tabs-info { .ionic .tabs.tabs-info {
background-color: #43cee6; background-color: #43cee6;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
border-color: #3bb3c8; border-color: #3bb3c8;
color: white; } color: white; }
.ionic .tabs.tabs-warning { .ionic .tabs.tabs-warning {
background-color: #f0b840; background-color: #f0b840;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
border-color: #d29f31; border-color: #d29f31;
color: white; } color: white; }
.ionic .tabs.tabs-danger { .ionic .tabs.tabs-danger {
background-color: #ef4e3a; background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
.ionic .tabs.tabs-dark { .ionic .tabs.tabs-dark {
background-color: #ef4e3a; background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .tabs {
padding-top: 2px;
border-top: none !important;
border-bottom: none !important;
background-position: top;
background-size: 100% 1px;
background-repeat: no-repeat; } }
.ionic .tabs-top { .ionic .tabs-top {
top: 44px; } top: 44px; }
.ionic .tab-item { .ionic .tab-item {
@ -1809,7 +1825,6 @@
display: block; display: block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding-top: 4px;
width: 0; width: 0;
height: 100%; height: 100%;
color: inherit; color: inherit;
@ -1822,28 +1837,25 @@
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
opacity: 0.7; } opacity: 0.7; }
.ionic .tabs-icon-top .tab-item, .ionic .tabs-icon-top .tab-item,
.ionic .tabs-icon-right .tab-item, .ionic .tabs-icon-bottom .tab-item {
.ionic .tabs-icon-bottom .tab-item, font-size: 10px;
.ionic .tabs-icon-left .tab-item { line-height: 14px; }
position: relative;
padding-top: 0;
font-size: 10px; }
.ionic .tabs-icon-left .tab-item i {
position: absolute;
left: 4px;
display: flex;
height: 100%;
align-items: center; }
.ionic .tabs-icon-right .tab-item i {
position: absolute;
right: 4px;
display: flex;
height: 100%;
align-items: center; }
.ionic .tab-item i { .ionic .tab-item i {
display: block; display: block;
margin: 1px auto -3px auto; margin: 0 auto;
height: 32px;
font-size: 32px; } font-size: 32px; }
.ionic .tabs-icon-left .tab-item,
.ionic .tabs-icon-right .tab-item {
font-size: 10px; }
.ionic .tabs-icon-left .tab-item i,
.ionic .tabs-icon-right .tab-item i {
font-size: 24px;
display: inline-block;
vertical-align: top;
line-height: 49px; }
.ionic .tabs-icon-only i {
line-height: inherit; }
.ionic .tab-item.active, .ionic .tab-item:active { .ionic .tab-item.active, .ionic .tab-item:active {
opacity: 1; } opacity: 1; }
.ionic .tab-item.active.tab-item-default, .ionic .tab-item:active.tab-item-default { .ionic .tab-item.active.tab-item-default, .ionic .tab-item:active.tab-item-default {
@ -1860,11 +1872,6 @@
color: #f0b840; } color: #f0b840; }
.ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark { .ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.ionic .tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.ionic .menu { .ionic .menu {
position: absolute; position: absolute;
top: 0; top: 0;

68
dist/css/ionic.css vendored
View File

@ -2209,6 +2209,7 @@ a.subdued‎ {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -moz-box-orient: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
color: #333333; color: #333333;
position: fixed; position: fixed;
@ -2220,39 +2221,56 @@ a.subdued‎ {
height: 49px; height: 49px;
border-style: solid; border-style: solid;
border-top-width: 1px; border-top-width: 1px;
font-size: 16px; } line-height: 49px;
background-size: 0; }
.tabs.tabs-default { .tabs.tabs-default {
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
color: #333333; } color: #333333; }
.tabs.tabs-secondary { .tabs.tabs-secondary {
background-color: whitesmoke; background-color: whitesmoke;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
border-color: #bbbbbb; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.tabs.tabs-primary { .tabs.tabs-primary {
background-color: #4a87ee; background-color: #4a87ee;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
border-color: #3b6dc2; border-color: #3b6dc2;
color: white; } color: white; }
.tabs.tabs-success { .tabs.tabs-success {
background-color: #66cc33; background-color: #66cc33;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
border-color: #5bb22f; border-color: #5bb22f;
color: white; } color: white; }
.tabs.tabs-info { .tabs.tabs-info {
background-color: #43cee6; background-color: #43cee6;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
border-color: #3bb3c8; border-color: #3bb3c8;
color: white; } color: white; }
.tabs.tabs-warning { .tabs.tabs-warning {
background-color: #f0b840; background-color: #f0b840;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
border-color: #d29f31; border-color: #d29f31;
color: white; } color: white; }
.tabs.tabs-danger { .tabs.tabs-danger {
background-color: #ef4e3a; background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
.tabs.tabs-dark { .tabs.tabs-dark {
background-color: #ef4e3a; background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927; border-color: #c73927;
color: white; } color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.tabs {
padding-top: 2px;
border-top: none !important;
border-bottom: none !important;
background-position: top;
background-size: 100% 1px;
background-repeat: no-repeat; } }
.tabs-top { .tabs-top {
top: 44px; } top: 44px; }
@ -2264,7 +2282,6 @@ a.subdued‎ {
display: block; display: block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding-top: 4px;
width: 0; width: 0;
height: 100%; height: 100%;
color: inherit; color: inherit;
@ -2278,33 +2295,29 @@ a.subdued‎ {
opacity: 0.7; } opacity: 0.7; }
.tabs-icon-top .tab-item, .tabs-icon-top .tab-item,
.tabs-icon-right .tab-item, .tabs-icon-bottom .tab-item {
.tabs-icon-bottom .tab-item, font-size: 10px;
.tabs-icon-left .tab-item { line-height: 14px; }
position: relative;
padding-top: 0;
font-size: 10px; }
.tabs-icon-left .tab-item i {
position: absolute;
left: 4px;
display: flex;
height: 100%;
align-items: center; }
.tabs-icon-right .tab-item i {
position: absolute;
right: 4px;
display: flex;
height: 100%;
align-items: center; }
/* Icon for tab */
.tab-item i { .tab-item i {
display: block; display: block;
margin: 1px auto -3px auto; margin: 0 auto;
height: 32px;
font-size: 32px; } font-size: 32px; }
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
font-size: 10px; }
.tabs-icon-left .tab-item i,
.tabs-icon-right .tab-item i {
font-size: 24px;
display: inline-block;
vertical-align: top;
line-height: 49px; }
.tabs-icon-only i {
line-height: inherit; }
/* Navigational tab */ /* Navigational tab */
/* Active state for tab */ /* Active state for tab */
.tab-item.active, .tab-item:active { .tab-item.active, .tab-item:active {
@ -2324,13 +2337,6 @@ a.subdued‎ {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.menu { .menu {
position: absolute; position: absolute;
top: 0; top: 0;

1
scss/ionic/_mixins.scss
View File

@ -91,6 +91,7 @@
@mixin tab-style($bgColor, $borderColor, $color) { @mixin tab-style($bgColor, $borderColor, $color) {
background-color: $bgColor; background-color: $bgColor;
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
border-color: $borderColor; border-color: $borderColor;
color: $color; color: $color;
} }

71
scss/ionic/_tabs.scss
View File

@ -19,7 +19,7 @@
border-style: solid; border-style: solid;
border-top-width: 1px; border-top-width: 1px;
font-size: 16px; line-height: $tabs-height;
&.tabs-default { &.tabs-default {
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark); @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
@ -45,6 +45,20 @@
&.tabs-dark { &.tabs-dark {
@include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white); @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
} }
background-size: 0;
@media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
padding-top: 2px;
border-top: none !important;
border-bottom: none !important;
background-position: top;
background-size: 100% 1px;
background-repeat: no-repeat;
}
} }
.tabs-top { .tabs-top {
@ -57,8 +71,6 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
padding-top: 4px;
// Required to force box elements to be the same size; // Required to force box elements to be the same size;
width: 0; width: 0;
height: 100%; height: 100%;
@ -72,44 +84,39 @@
white-space: nowrap; white-space: nowrap;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: $tabs-text-font-size;
font-family: $light-sans-font-family; font-family: $light-sans-font-family;
opacity: 0.7; opacity: 0.7;
} }
.tabs-icon-top .tab-item, .tabs-icon-top .tab-item,
.tabs-icon-right .tab-item, .tabs-icon-bottom .tab-item {
.tabs-icon-bottom .tab-item, font-size: $tabs-text-with-icon-font-size;
.tabs-icon-left .tab-item { line-height: $tabs-text-font-size;
position: relative;
padding-top: 0;
font-size: 10px;
} }
.tabs-icon-left .tab-item i {
position: absolute;
left: 4px;
display: flex;
height: 100%;
align-items: center;
}
.tabs-icon-right .tab-item i {
position: absolute;
right: 4px;
display: flex;
height: 100%;
align-items: center;
}
/* Icon for tab */
.tab-item i { .tab-item i {
display: block; display: block;
margin: 1px auto -3px auto; margin: 0 auto;
height: $tabs-icon-size;
font-size: $tabs-icon-size; font-size: $tabs-icon-size;
} }
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
font-size: $tabs-text-with-icon-font-size;
i {
font-size: $tabs-icon-size - 8;
display: inline-block;
vertical-align: top;
line-height: $tabs-height;
}
}
.tabs-icon-only i {
line-height: inherit;
}
/* Navigational tab */ /* Navigational tab */
@ -140,11 +147,3 @@
} }
} }
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px;
}

2
scss/ionic/_variables.scss
View File

@ -313,6 +313,8 @@ $bar-dark-border-color: $button-dark-border;
// ------------------------------- // -------------------------------
$tabs-height: 49px !default; $tabs-height: 49px !default;
$tabs-text-font-size: 14px !default;
$tabs-text-with-icon-font-size: 10px !default;
$tabs-icon-size: 32px !default; $tabs-icon-size: 32px !default;
$tabs-default-bg: $brand-default; $tabs-default-bg: $brand-default;

10
test/tab-bars-icons-right.html
View File

@ -30,24 +30,24 @@
<nav id="tab-bar" class="tabs tabs-icon-right tabs-default"> <nav id="tab-bar" class="tabs tabs-icon-right tabs-default">
<a class="tab-item tab-item-danger" href="#"> <a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
Fun Fun
<i class="icon-game-controller-a"></i>
</a> </a>
<a class="tab-item tab-item-danger"> <a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
Security Security
<i class="icon-locked"></i>
</a> </a>
<a class="tab-item tab-item-danger"> <a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
Simple Simple
<i class="icon-heart"></i>
</a> </a>
<a class="tab-item tab-item-danger"> <a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
Light Light
<i class="icon-leaf"></i>
</a> </a>
<a class="tab-item tab-item-danger"> <a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
Clean Clean
<i class="icon-waterdrop"></i>
</a> </a>
</nav> </nav>

2
test/tab-bars-only-icons.html
View File

@ -28,7 +28,7 @@
</main> </main>
<nav id="tab-bar" class="tabs tabs-default"> <nav id="tab-bar" class="tabs tabs-icon-only tabs-default">
<a class="tab-item tab-item-danger" href="#"> <a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i> <i class="icon-game-controller-a"></i>
</a> </a>