mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
hairlines body css polyfill
This commit is contained in:
@ -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,
|
|
||||||
[button] {
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.action-menu-open {
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
&.modal-open .modal {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-menu-backdrop {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -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;
|
|
||||||
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
Reference in New Issue
Block a user