javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +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;
-moz-box-orient: horizontal;
background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd;
color: #333333;
position: fixed;
@ -851,39 +852,56 @@ a.subdued‎ {
height: 49px;
border-style: solid;
border-top-width: 1px;
font-size: 16px; }
line-height: 49px;
background-size: 0; }
.tabs.tabs-default {
background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd;
color: #333333; }
.tabs.tabs-secondary {
background-color: whitesmoke;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
border-color: #bbbbbb;
color: #333333; }
.tabs.tabs-primary {
background-color: #4a87ee;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
border-color: #3b6dc2;
color: white; }
.tabs.tabs-success {
background-color: #66cc33;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
border-color: #5bb22f;
color: white; }
.tabs.tabs-info {
background-color: #43cee6;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
border-color: #3bb3c8;
color: white; }
.tabs.tabs-warning {
background-color: #f0b840;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
border-color: #d29f31;
color: white; }
.tabs.tabs-danger {
background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927;
color: white; }
.tabs.tabs-dark {
background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927;
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 {
top: 44px; }
@ -895,7 +913,6 @@ a.subdued‎ {
display: block;
overflow: hidden;
box-sizing: border-box;
padding-top: 4px;
width: 0;
height: 100%;
color: inherit;
@ -909,33 +926,29 @@ a.subdued‎ {
opacity: 0.7; }
.tabs-icon-top .tab-item,
.tabs-icon-right .tab-item,
.tabs-icon-bottom .tab-item,
.tabs-icon-left .tab-item {
position: relative;
padding-top: 0;
font-size: 10px; }
.tabs-icon-bottom .tab-item {
font-size: 10px;
line-height: 14px; }
.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 {
display: block;
margin: 1px auto -3px auto;
margin: 0 auto;
height: 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 */
/* Active state for tab */
.tab-item.active, .tab-item:active {
@ -955,13 +968,6 @@ a.subdued‎ {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.menu {
position: absolute;
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.
*/
/* Icon for tab */
/* Navigational tab */
/* Active state for tab */
/* Label for tab */
/**
* Modals are independent windows that slide in from off-screen.
*/
@ -1756,6 +1754,7 @@
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd;
color: #333333;
position: fixed;
@ -1767,39 +1766,56 @@
height: 49px;
border-style: solid;
border-top-width: 1px;
font-size: 16px; }
line-height: 49px;
background-size: 0; }
.ionic .tabs.tabs-default {
background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd;
color: #333333; }
.ionic .tabs.tabs-secondary {
background-color: whitesmoke;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
border-color: #bbbbbb;
color: #333333; }
.ionic .tabs.tabs-primary {
background-color: #4a87ee;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
border-color: #3b6dc2;
color: white; }
.ionic .tabs.tabs-success {
background-color: #66cc33;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
border-color: #5bb22f;
color: white; }
.ionic .tabs.tabs-info {
background-color: #43cee6;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
border-color: #3bb3c8;
color: white; }
.ionic .tabs.tabs-warning {
background-color: #f0b840;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
border-color: #d29f31;
color: white; }
.ionic .tabs.tabs-danger {
background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927;
color: white; }
.ionic .tabs.tabs-dark {
background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927;
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 {
top: 44px; }
.ionic .tab-item {
@ -1809,7 +1825,6 @@
display: block;
overflow: hidden;
box-sizing: border-box;
padding-top: 4px;
width: 0;
height: 100%;
color: inherit;
@ -1822,28 +1837,25 @@
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
opacity: 0.7; }
.ionic .tabs-icon-top .tab-item,
.ionic .tabs-icon-right .tab-item,
.ionic .tabs-icon-bottom .tab-item,
.ionic .tabs-icon-left .tab-item {
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 .tabs-icon-bottom .tab-item {
font-size: 10px;
line-height: 14px; }
.ionic .tab-item i {
display: block;
margin: 1px auto -3px auto;
margin: 0 auto;
height: 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 {
opacity: 1; }
.ionic .tab-item.active.tab-item-default, .ionic .tab-item:active.tab-item-default {
@ -1860,11 +1872,6 @@
color: #f0b840; }
.ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
color: #444444; }
.ionic .tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.ionic .menu {
position: absolute;
top: 0;

68
dist/css/ionic.css vendored
View File

@ -2209,6 +2209,7 @@ a.subdued‎ {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd;
color: #333333;
position: fixed;
@ -2220,39 +2221,56 @@ a.subdued‎ {
height: 49px;
border-style: solid;
border-top-width: 1px;
font-size: 16px; }
line-height: 49px;
background-size: 0; }
.tabs.tabs-default {
background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd;
color: #333333; }
.tabs.tabs-secondary {
background-color: whitesmoke;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
border-color: #bbbbbb;
color: #333333; }
.tabs.tabs-primary {
background-color: #4a87ee;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
border-color: #3b6dc2;
color: white; }
.tabs.tabs-success {
background-color: #66cc33;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
border-color: #5bb22f;
color: white; }
.tabs.tabs-info {
background-color: #43cee6;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
border-color: #3bb3c8;
color: white; }
.tabs.tabs-warning {
background-color: #f0b840;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
border-color: #d29f31;
color: white; }
.tabs.tabs-danger {
background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927;
color: white; }
.tabs.tabs-dark {
background-color: #ef4e3a;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
border-color: #c73927;
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 {
top: 44px; }
@ -2264,7 +2282,6 @@ a.subdued‎ {
display: block;
overflow: hidden;
box-sizing: border-box;
padding-top: 4px;
width: 0;
height: 100%;
color: inherit;
@ -2278,33 +2295,29 @@ a.subdued‎ {
opacity: 0.7; }
.tabs-icon-top .tab-item,
.tabs-icon-right .tab-item,
.tabs-icon-bottom .tab-item,
.tabs-icon-left .tab-item {
position: relative;
padding-top: 0;
font-size: 10px; }
.tabs-icon-bottom .tab-item {
font-size: 10px;
line-height: 14px; }
.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 {
display: block;
margin: 1px auto -3px auto;
margin: 0 auto;
height: 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 */
/* Active state for tab */
.tab-item.active, .tab-item:active {
@ -2324,13 +2337,6 @@ a.subdued‎ {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.menu {
position: absolute;
top: 0;

1
scss/ionic/_mixins.scss
View File

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

71
scss/ionic/_tabs.scss
View File

@ -19,7 +19,7 @@
border-style: solid;
border-top-width: 1px;
font-size: 16px;
line-height: $tabs-height;
&.tabs-default {
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
@ -45,6 +45,20 @@
&.tabs-dark {
@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 {
@ -57,8 +71,6 @@
overflow: hidden;
box-sizing: border-box;
padding-top: 4px;
// Required to force box elements to be the same size;
width: 0;
height: 100%;
@ -72,44 +84,39 @@
white-space: nowrap;
font-weight: 400;
font-size: 14px;
font-size: $tabs-text-font-size;
font-family: $light-sans-font-family;
opacity: 0.7;
}
.tabs-icon-top .tab-item,
.tabs-icon-right .tab-item,
.tabs-icon-bottom .tab-item,
.tabs-icon-left .tab-item {
position: relative;
padding-top: 0;
font-size: 10px;
.tabs-icon-bottom .tab-item {
font-size: $tabs-text-with-icon-font-size;
line-height: $tabs-text-font-size;
}
.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 {
display: block;
margin: 1px auto -3px auto;
margin: 0 auto;
height: $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 */
@ -140,11 +147,3 @@
}
}
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px;
}

38
scss/ionic/_variables.scss
View File

@ -312,32 +312,34 @@ $bar-dark-border-color: $button-dark-border;
// Tabs
// -------------------------------
$tabs-height: 49px !default;
$tabs-icon-size: 32px !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-default-bg: $brand-default;
$tabs-default-border-color: $button-default-border;
$tabs-default-bg: $brand-default;
$tabs-default-border-color: $button-default-border;
$tabs-secondary-bg: $brand-secondary;
$tabs-secondary-border-color: $button-secondary-border;
$tabs-secondary-bg: $brand-secondary;
$tabs-secondary-border-color: $button-secondary-border;
$tabs-primary-bg: $brand-primary;
$tabs-primary-border-color: $button-primary-border;
$tabs-primary-bg: $brand-primary;
$tabs-primary-border-color: $button-primary-border;
$tabs-info-bg: $brand-info;
$tabs-info-border-color: $button-info-border;
$tabs-info-bg: $brand-info;
$tabs-info-border-color: $button-info-border;
$tabs-success-bg: $brand-success;
$tabs-success-border-color: $button-success-border;
$tabs-success-bg: $brand-success;
$tabs-success-border-color: $button-success-border;
$tabs-warning-bg: $brand-warning;
$tabs-warning-border-color: $button-warning-border;
$tabs-warning-bg: $brand-warning;
$tabs-warning-border-color: $button-warning-border;
$tabs-danger-bg: $brand-danger;
$tabs-danger-border-color: $button-danger-border;
$tabs-danger-bg: $brand-danger;
$tabs-danger-border-color: $button-danger-border;
$tabs-dark-bg: $brand-dark;
$tabs-dark-border-color: $button-dark-border;
$tabs-dark-bg: $brand-dark;
$tabs-dark-border-color: $button-dark-border;
// Lists

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

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

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

@ -28,7 +28,7 @@
</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="#">
<i class="icon-game-controller-a"></i>
</a>