解决ionic中 Action Sheets 在安卓机中的样式
/**
* Action Sheets for Android
* --------------------------------------------------
*/
.platform-android .action-sheet-backdrop {
-webkit-transition: background-color 150ms ease-in-out;
transition: background-color 150ms ease-in-out;
position: fixed;
top: 0;
left: 0;
z-index: 11;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
} .platform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.4);
} .platform-android .action-sheet-wrapper {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 500px;
margin: auto;
} .platform-android .action-sheet-up {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} .platform-android .action-sheet {
margin-left: 8px;
margin-right: 8px;
width: auto;
z-index: 11;
overflow: hidden;
} .platform-android .action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 14px;
} .platform-android .action-sheet .button:hover {
color: #007aff;
} .platform-android .action-sheet .button.destructive {
color: #ff3b30;
} .platform-android .action-sheet .button.destructive:hover {
color: #ff3b30;
} .platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
box-shadow: none;
border-color: #d1d3d6;
color: #007aff;
background: #e4e5e7;
} .platform-android .action-sheet-has-icons .icon {
position: absolute;
left: 16px;
} .platform-android .action-sheet-title {
padding: 16px;
color: #8f8f8f;
text-align: center;
font-size: 13px;
} .platform-android .action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
} .platform-android .action-sheet-group .button {
border-width: 1px 0px 0px 0px;
} .platform-android .action-sheet-group .button:first-child:last-child {
border-width: 0;
} .platform-android .action-sheet-options {
background: #f1f2f3;
} .platform-android .action-sheet-cancel .button {
font-weight: 500;
} .platform-android .action-sheet-open {
pointer-events: none;
}
.platform-android .action-sheet-open.modal-open .modal {
pointer-events: none;
} .platform-android .action-sheet-open .action-sheet-backdrop {
pointer-events: auto;
} .platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
text-align: center;
} .platform-android .action-sheet-cancel {
display: block;
}
解决ionic中 Action Sheets 在安卓机中的样式的更多相关文章
- Ubuntu虚机中SVN连接出错,虚机本机可正常CO,CIN,解决方法
Ubuntu虚机中SVN连接出错,虚机本机可正常CO,CIN,外面机器无法正常连接. 解决: 虚机换个IP即可正常连接,原因不明,有可能为公司网管对该IP做了某些限制. PS:VMware中只需将网络 ...
- 我的小前端 (1)—— 安卓机和ios机的区别
没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 微信,支付宝和APP都会遇到这些问题 一.安卓机和ios机的区别 1.常用 <head> <me ...
- 【ionic】Mac IOS下真机调试
模拟调试不能保证真机一定没问题,所以真机调试是非常必要的一步 IOS设备 启用设备调试 在IOS设备中(Iphone,Ipad)中开始web检测器 设备->safari->高级->w ...
- 关于struts2中action请求会执行两次的问题
关于struts2中action请求会执行两次的问题 在struts2中发现,调用action中的方法,方法会被执行两次,后来发现调用的方法是get开头的,把它改为其他名称开头的后,就不会执行 ...
- 客户机中PLSQL DEV访问虚拟机中的ORCLE11g,错误百出!
客户机中PLSQL DEV访问虚拟机中的ORCLE11g,错误百出! 创建时间: 2017/10/14 18:44 作者: CNSIMO 标签: ORACLE 忙了一下午,只有两个字形容:麻烦! ...
- spring oauth2 ,spring security整合oauth2.0 JdbcTokenStore实现 解决url-pattern .do .action
参考以下两个文章: http://www.cnblogs.com/0201zcr/p/5328847.html http://wwwcomy.iteye.com/blog/2230265 web.xm ...
- ios真机中Text组件出现多余边框
问题 ios真机中Text组件出现多余边框(模拟器不会出现,真机会出现该问题). 原因 在ios启动页设置中,预设的尺寸要求与设置中图片尺寸不符合导致屏幕精度计算出现问题(启动屏分辨率错误设置会导致手 ...
- 微信JSSDK支付接口-安卓机无法正常调起接口
今天碰到个问题,是项目调起微信支付接口,苹果机都没有什么问题,但是安卓机的情况就是支付接口出现一下就消失了 试了将error反馈信息弹出来,也就是显示choosewxpay fail 找了半天不知道什 ...
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
随机推荐
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- Vue 项目实战系列 (三)
我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要 ...
- 怎么样刷新frameset的整个页面
<a href="main.html?a=2" target="_parent">? 设置a链接的target属性值为_parent即可
- 【Android Developers Training】 5. 序言:添加Action Bar
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 3. 构建一个简单UI
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 91. 解决云储存冲突
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- tomcat7的web.xml的xml片段与注解资源的发现处理逻辑
1.metadata-complete 属性 Servlet 3.0 的部署描述文件 web.xml 的顶层标签 <web-app> 有一个 metadata-complete 属性,该属 ...
- pdf.js在国际化的时候,显示不了中文的解决办法
在项目中使用了pdf实现在线预览功能,开始工具栏中一直都是英文的,在view.js中设置了也不起作用,偶然发现了问题所在 当我把网站发布到iis上的时候,用google浏览器的审查元素功能的审核发现j ...
- 6位密码框js
!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content=&quo ...
- h5 新增特性用法---持续更新
1.dataset <div class="box" data-title1="自定义属性" data-age="18" data-m ...