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

tabs / hairlines

Browse Source
This commit is contained in:
Adam Bradley
2015-04-07 11:59:13 -05:00
parent 83ec010d2f
commit 2e9da98d41
11 changed files with 105 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/action-menu/extensions/ios.scss
View File

@ -41,23 +41,7 @@ $action-menu-ios-button-font-size: 2rem !default;
background: $action-menu-ios-background-color;
font-weight: 400;
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $action-menu-ios-border-color;
content: '';
}
@include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border);
}
.action-menu-label {

19
src/components/alert/extensions/ios.scss
View File

@ -5,6 +5,7 @@
$alert-ios-min-height: 80px !default;
$alert-ios-content-margin: 15px !default;
$alert-ios-background-color: #e8e8e8 !default;
$alert-ios-border-color: #b5b5b5 !default;
$alert-ios-border-radius: 15px !default;
$alert-ios-button-color: #007aff !default;
$alert-ios-button-font-size: 2rem !default;
@ -28,23 +29,7 @@ $alert-ios-button-font-size: 2rem !default;
padding: 0 $alert-ios-content-margin $alert-ios-content-margin;
min-height: $alert-ios-min-height;
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: #b5b5b5;
content: '';
}
@include hairline(bottom, $alert-ios-border-color);
}
.alert-actions {

4
src/components/app/ionic.scss
View File

@ -45,6 +45,7 @@
// iOS Components
@import
"../toolbar/extensions/ios",
"../action-menu/extensions/ios",
"../alert/extensions/ios",
"../button/extensions/ios",
@ -55,7 +56,7 @@
"../radio/extensions/ios",
"../search-bar/extensions/ios",
"../switch/extensions/ios",
"../toolbar/extensions/ios";
"../tabs/extensions/ios";
// Material Design Components
@ -64,6 +65,7 @@
"../button/extensions/android",
"../list/extensions/android",
"../item/extensions/android",
"../tabs/extensions/android",
"../toolbar/extensions/android";

45
src/components/app/mixins/_util.scss
View File

@ -64,3 +64,48 @@
$url: url-encode($svg);
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
}
// Hairline
// --------------------------------------------------
@mixin hairline($placement, $line-color, $z-index: 999) {
@if $placement == top {
&:before {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0%);
background-color: $line-color;
content: '';
}
} @else if $placement == bottom {
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0%);
background-color: $line-color;
content: '';
}
}
}

19
src/components/item/extensions/ios.scss
View File

@ -28,24 +28,7 @@ $item-ios-border-color: $list-ios-border-color !default;
.item-content {
min-height: $item-ios-min-height;
padding: 0;
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $item-ios-border-color;
content: '';
}
@include hairline(bottom, $item-ios-border-color, $z-index-list-border);
}
.item:last-of-type .item-content:after {

36
src/components/list/extensions/ios.scss
View File

@ -16,40 +16,12 @@ $list-ios-footer-color: #8f8f94 !default;
.view-ios {
.list:before {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $list-ios-border-color;
content: '';
.list {
@include hairline(top, $list-ios-border-color, $z-index-list-border);
}
.item:last-of-type:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $list-ios-border-color;
content: '';
.item:last-of-type {
@include hairline(bottom, $list-ios-border-color, $z-index-list-border);
}
.list-header {

20
src/components/search-bar/extensions/ios.scss
View File

@ -13,25 +13,7 @@ $search-bar-ios-background-size: 13px 13px !default;
.search-bar-ios {
padding: $search-bar-ios-padding;
background: $search-bar-ios-background-color;
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-list-border;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0);
background-color: $list-ios-border-color;
content: '';
}
@include hairline(bottom, $search-bar-ios-border-color);
.search-bar-input {
height: $search-bar-ios-input-height;

14
src/components/tabs/extensions/android.scss Normal file
View File

@ -0,0 +1,14 @@
// Android Toolbar
// --------------------------------------------------
$tab-bar-android-item-padding: 4px 10px !default;
.tabs-android {
.tab-bar-item {
padding: $tab-bar-item-padding;
}
}

28
src/components/tabs/extensions/ios.scss Normal file
View File

@ -0,0 +1,28 @@
// iOS Toolbar
// --------------------------------------------------
$tab-bar-ios-item-padding: 3px 10px !default;
$tab-bar-ios-item-font-size: 11px !default;
$tab-bar-ios-item-icon-size: 28px !default;
.tabs-ios {
.tab-bar-item {
padding: $tab-bar-ios-item-padding;
}
.tab-bar-item-text {
font-size: $tab-bar-ios-item-font-size;
}
.tab-bar-item-icon {
font-size: $tab-bar-ios-item-icon-size;
}
> .tab-bar.toolbar-bottom {
@include hairline(top, $toolbar-ios-border-color);
}
}

4
src/components/tabs/tabs.js
View File

@ -9,7 +9,9 @@ import {IonicComponent} from 'ionic2/config/component'
})
@Template({
inline: `
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="toolbar tab-bar"
[class.toolbar-top]="placement=='top'"
[class.toolbar-bottom]="placement=='bottom'">
<div class="tab-bar-container">
<a *for="#tab of tabs"
class="tab-bar-item"

23
src/components/toolbar/extensions/ios.scss
View File

@ -45,27 +45,10 @@ $toolbar-ios-button-background-color: transparent !default;
background: $toolbar-ios-button-background-color;
}
// toolbar top, border bottom (default)
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index-toolbar-border;
display: block;
// toolbar on top, border on bottom (default)
@include hairline(bottom, $toolbar-ios-border-color);
width: 100%;
height: 1px;
background-color: $toolbar-ios-border-color;
@include transform-origin(50%, 100%);
content: '';
}
// toolbar bottom, border top
// toolbar on bottom, border on top
&.toolbar-bottom:after {
top: 0;
bottom: auto;