hairlines body css polyfill

This commit is contained in:
Adam Bradley
2015-07-24 14:46:26 -05:00
parent 526f43cd96
commit c8d03793a3
5 changed files with 42 additions and 51 deletions

View File

@ -52,8 +52,7 @@ $action-menu-options-border-color: #d1d3d6 !default;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
button, button {
[button] {
display: block; display: block;
padding: 1px; padding: 1px;
width: 100%; width: 100%;
@ -69,8 +68,7 @@ $action-menu-options-border-color: #d1d3d6 !default;
} }
} }
button.activated, button.activated {
[button].activated {
box-shadow: none; box-shadow: none;
border-color: $action-menu-options-border-color; border-color: $action-menu-options-border-color;
color: $action-menu-options-text-color; color: $action-menu-options-text-color;
@ -94,12 +92,11 @@ $action-menu-options-border-color: #d1d3d6 !default;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
button, button {
[button] {
border-width: 1px 0px 0px 0px; border-width: 1px 0px 0px 0px;
} }
button:first-child:last-child,
[button]:first-child:last-child { button:first-child:last-child {
border-width: 0; border-width: 0;
} }
} }
@ -108,21 +105,6 @@ $action-menu-options-border-color: #d1d3d6 !default;
background: $action-menu-options-bg-color; background: $action-menu-options-bg-color;
} }
.action-menu-cancel { .action-menu-cancel button {
button, font-weight: 500;
[button] {
font-weight: 500;
}
}
.action-menu-open {
pointer-events: none;
&.modal-open .modal {
pointer-events: none;
}
.action-menu-backdrop {
pointer-events: auto;
}
} }

View File

@ -57,7 +57,7 @@ $action-menu-ios-icon-font-size: 1.4em !default;
background: $action-menu-ios-background-color; background: $action-menu-ios-background-color;
font-weight: 400; font-weight: 400;
@include hairline(bottom, $action-menu-ios-border-color); border-bottom: 1px solid $action-menu-ios-border-color;
} }
.action-menu-title { .action-menu-title {
@ -86,15 +86,11 @@ $action-menu-ios-icon-font-size: 1.4em !default;
border-bottom-right-radius: $action-menu-ios-border-radius; border-bottom-right-radius: $action-menu-ios-border-radius;
} }
.action-menu-container icon { }
display: flex;
align-items: center; .hairlines .action-menu[mode="ios"] {
position: absolute; .action-menu-title,
top: 0; .action-menu-option {
left: 0; border-bottom-width: 0.5px;
height: 100%; }
padding: 0 10px 2px;
font-size: $action-menu-ios-icon-font-size;
}
} }

View File

@ -21,9 +21,4 @@
<button block clear stable>button[block]</button> <button block clear stable>button[block]</button>
</p> </p>
<p>
<a button block full danger>a[button][block][full][danger]</a>
<button block full clear danger>button[block][full][danger]</a>
</p>
</div> </div>

View File

@ -1,4 +1,4 @@
import {Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2'; import {Directive, View, Parent, Optional, ElementRef, forwardRef} from 'angular2/angular2';
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref'; import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
import {ToolbarBase} from '../toolbar/toolbar'; import {ToolbarBase} from '../toolbar/toolbar';
@ -45,11 +45,16 @@ import {ViewItem} from '../view/view-item';
] ]
}) })
export class Navbar extends ToolbarBase { export class Navbar extends ToolbarBase {
constructor(item: ViewItem, elementRef: ElementRef, config: IonicConfig, app: IonicApp) { constructor(
elementRef: ElementRef,
config: IonicConfig,
app: IonicApp,
@Optional() item: ViewItem
) {
super(elementRef, config); super(elementRef, config);
this.app = app; this.app = app;
item.navbarView(this); item && item.navbarView(this);
this.bbClass = config.setting('backButtonIcon'); this.bbClass = config.setting('backButtonIcon');
this.bbDefault = config.setting('backButtonText'); this.bbDefault = config.setting('backButtonText');
@ -83,7 +88,7 @@ export class Navbar extends ToolbarBase {
} }
}) })
class BackButton { class BackButton {
constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) { constructor(@Parent() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
this.item = item; this.item = item;
navbar.backButtonElement(elementRef); navbar.backButtonElement(elementRef);
} }
@ -91,7 +96,7 @@ class BackButton {
goBack(ev) { goBack(ev) {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
this.item.viewCtrl.pop(); this.item && this.item.viewCtrl.pop();
} }
} }
@ -132,7 +137,7 @@ class NavbarItem {
selector: 'template[navbar]' selector: 'template[navbar]'
}) })
export class NavbarTemplate { export class NavbarTemplate {
constructor(item: ViewItem, protoViewRef: ProtoViewRef) { constructor(@Optional() item: ViewItem, protoViewRef: ProtoViewRef) {
item.addProtoViewRef('navbar', protoViewRef); item && item.addProtoViewRef('navbar', protoViewRef);
} }
} }

View File

@ -1,5 +1,18 @@
(function(){ (function(document){
// hairline polyfill
if (window.devicePixelRatio >= 2) {
var harlineEle = document.createElement('div');
harlineEle.style.border = '.5px solid transparent';
document.body.appendChild(harlineEle);
if (harlineEle.offsetHeight == 1) {
document.body.classList.add('hairlines');
}
document.body.removeChild(harlineEle);
}
var ionicImport = System.import('ionic/components/app/app'); var ionicImport = System.import('ionic/components/app/app');
@ -14,4 +27,4 @@
importApp(ele[i].getAttribute('module')); importApp(ele[i].getAttribute('module'));
} }
})(); })(document);