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;
overflow: hidden;
button,
[button] {
button {
display: block;
padding: 1px;
width: 100%;
@ -69,8 +68,7 @@ $action-menu-options-border-color: #d1d3d6 !default;
}
}
button.activated,
[button].activated {
button.activated {
box-shadow: none;
border-color: $action-menu-options-border-color;
color: $action-menu-options-text-color;
@ -94,12 +92,11 @@ $action-menu-options-border-color: #d1d3d6 !default;
background-color: #fff;
overflow: hidden;
button,
[button] {
button {
border-width: 1px 0px 0px 0px;
}
button:first-child:last-child,
[button]:first-child:last-child {
button:first-child:last-child {
border-width: 0;
}
}
@ -108,21 +105,6 @@ $action-menu-options-border-color: #d1d3d6 !default;
background: $action-menu-options-bg-color;
}
.action-menu-cancel {
button,
[button] {
.action-menu-cancel 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;
font-weight: 400;
@include hairline(bottom, $action-menu-ios-border-color);
border-bottom: 1px solid $action-menu-ios-border-color;
}
.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;
}
.action-menu-container icon {
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 0 10px 2px;
font-size: $action-menu-ios-icon-font-size;
}
.hairlines .action-menu[mode="ios"] {
.action-menu-title,
.action-menu-option {
border-bottom-width: 0.5px;
}
}

View File

@ -21,9 +21,4 @@
<button block clear stable>button[block]</button>
</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>

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 {ToolbarBase} from '../toolbar/toolbar';
@ -45,11 +45,16 @@ import {ViewItem} from '../view/view-item';
]
})
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);
this.app = app;
item.navbarView(this);
item && item.navbarView(this);
this.bbClass = config.setting('backButtonIcon');
this.bbDefault = config.setting('backButtonText');
@ -83,7 +88,7 @@ export class Navbar extends ToolbarBase {
}
})
class BackButton {
constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) {
constructor(@Parent() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
this.item = item;
navbar.backButtonElement(elementRef);
}
@ -91,7 +96,7 @@ class BackButton {
goBack(ev) {
ev.stopPropagation();
ev.preventDefault();
this.item.viewCtrl.pop();
this.item && this.item.viewCtrl.pop();
}
}
@ -132,7 +137,7 @@ class NavbarItem {
selector: 'template[navbar]'
})
export class NavbarTemplate {
constructor(item: ViewItem, protoViewRef: ProtoViewRef) {
item.addProtoViewRef('navbar', protoViewRef);
constructor(@Optional() item: ViewItem, protoViewRef: 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');
@ -14,4 +27,4 @@
importApp(ele[i].getAttribute('module'));
}
})();
})(document);