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

action menu

Browse Source
This commit is contained in:
Adam Bradley
2015-07-21 10:47:07 -05:00
parent faa303356b
commit 3b8a5a503d
6 changed files with 62 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ionic/components/app/mixins/util.scss
View File

@@ -46,49 +46,64 @@
// --------------------------------------------------
@mixin hairline($placement, $line-color, $z-index: 999) {
// use $line-color: none to override existing hairline settings
// border-width: 1px will actually create 2 device pixels on retina
// this nifty trick sets an actual 1px border on hi-res displays
position: relative;
@if $placement == top {
&:before {
@if $line-color == none {
background-color: inherit;
border-top: none;
} @else {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
transform-origin: 50% 0%;
background-color: $line-color;
content: '';
border-top: 1px solid $line-color;
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
border: none;
background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
}
}
} @else if $placement == bottom {
&:after {
@if $line-color == none {
background-color: inherit;
border-bottom: none;
} @else {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
transform-origin: 50% 0%;
background-color: $line-color;
content: '';
border-bottom: 1px solid $line-color;
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
border: none;
background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
}
}