解决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(); 来实现,但是这样的缺点是不容易查看 ...
随机推荐
- DOM事件类型总结大全
unload:事件在用户退出页面时发生 window.onload = function(){ return "页面关闭!"; }; onblur:失去焦点发生变化 window. ...
- 【转载】图文详解 IntelliJ IDEA 15 创建普通 Java Web 项目
第 1 部分:新建一个 Java Web Application 项目 File -> New -> Project-,请选择 Java EE 这个模块下的 Web Application ...
- SQL VIEW(视图)
视图是可视化的表. SQL CREATE VIEW 语句 什么是视图? 在 SQL 中,视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个 ...
- SQLServer类型与Java类型转换问题解决
ResultSet 接口提供用于从当前行获取列值的获取 方法(getBoolean.getLong 等).可以使用列的索引编号或列的名称获取值.一般情况下,使用列索引较为高效.列从 1 开始编号.为了 ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- 流畅的python学习笔记:第五章
在python中一切都可以视作为对象,包括函数.我们来看个例子: def function_try(): '''it is funciton try doc''' print 'fun ...
- ASP.NET Core 源码学习之 Options[2]:IOptions
在上一篇中,介绍了一下Options的注册,而使用时只需要注入IOption即可: public ValuesController(IOptions<MyOptions> options) ...
- Index Scans 索引扫描
官方文档链接地址 http://docs.oracle.com/cd/E11882_01/server.112/e40540/indexiot.htm#CNCPT1170 Index Scans 在索 ...
- php中查询mysql如何在IN array中用
假如有一个数组 $arr = array(1,3,5,7,9)那么我在如何在php中使用mysqlWHERE id IN (1,3,5,7,9.......)$arr_string = join(', ...
- Kafka 源代码分析之Message
这里主要分析一下message的格式. 一条message的构成由以下部分组成 val CrcOffset = 0 //crc校验部分和字长 val CrcLength = 4 val MagicOf ...