解决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(); 来实现,但是这样的缺点是不容易查看 ...
随机推荐
- 一周一个小demo — 前端后台的交互实例
这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...
- Caused by: java.lang.RuntimeException: by java.lang.OutOfMemoryError: PermGen space(tomcat 启动时提示内存溢出)
设置MaxPermSize大小TOMCAT_HOME/bin/catalina.bat 文件头加set JAVA_OPTS='-Xms512m -Xmx1024m -XX:MaxPermSize=51 ...
- 【转载】QT QTableView用法小结
原始日期: 2016-08-16 09:28 来源:http://blog.csdn.net/wang_lichun/article/details/7805253 QTableView常用于实现数据 ...
- 教你轻轻松松入门PHP
入门PHP不用愁,跟我来学一学. 1.我们想学习PHP,首先就要了解PHP,那PHP是什么呢? PHP("PHP: Hypertext Preprocessor",超文本预处理器的 ...
- Redis中的数据对象
redis对象 redis中有五种常用对象 我们所说的对象的类型大多是值的类型,键的类型大多是字符串对象,值得类型大概有以下几种,但是无论哪种都是基于redisObject实现的 redisObjec ...
- sql with as 用法(转载)
一.WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候, ...
- grid栅格布局
前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...
- isNaN() 函数用于检查其参数是否是非数字值。如果是非数字值则返回true
isNaN() 函数用于检查其参数是否是非数字值.如果是非数字值则返回true.document.write(isNaN(0)); falsedocument.write(isNaN("He ...
- 【hexo】如何在一个小时内搭载个人博客
版权申明:本文为博主原创文章,未经博主允许不得转载.如需转载,请私聊博主. 什么是hexo Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351. 前期准备 安装 ...
- 【Android Developers Training】 56. 更效率地加载大图片
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...