snippet sl-file
/*
@ 名称: 自定义 input[type=file]
@ 用法: 添加 class .sl-file
@ 例子：
<span class="sl-file">
<input type="button" value="点击选择图片" />
<input type="file" exts="png|jpg|bmp" class=".sl-file-input" />
</span>
*/
/* 基础样式 */
.sl-file{
position:relative;
display:inline-block;
zoom:1;
cursor:pointer;
overflow:hidden;
vertical-align:middle;
}
/* 影响 .ui-input-file 的样式 */
.sl-file .sl-file-input{
position:absolute;
right:0;
top:0;
_font-size:100px; /* overwrite*/
_font-size:12px;
_zoom:10; /* overwrite */
height:100%;
_height:auto;
opacity:0;
filter:alpha(opacity=0);
-ms-filter:"alpha(opacity=0)";
cursor:pointer;
}
snippet sl-floatcenter
/*
@名称: float center
@用法：
1. 外框加上 .sl-floatcenter, 子元素加上 .sl-floatcenter-item，元素就可以自动根据父元素的宽度水平居中
2. 结构(例:3栏)：别忘记给每个栏加宽度
<ul class="sl-floatcenter clearfix">
<li class="sl-floatcenter-item">item1</li>
<li class="sl-floatcenter-item">item2</li>
<li class="sl-floatcenter-item">item3</li>
</ul>
*/
.sl-floatcenter{
display:block;text-align:center;
/* 解决间隙问题 */
font-size:0;
}
.sl-floatcenter-item{
display:inline-block;*display:inline;*zoom:1;
/* 解决不能水平对齐问题 */
vertical-align:top;
/* 解决间隙问题后遗症解决 */
font-size:13px;
}
/* 让 chrome 支持 12px 以下的字体 */
@media screen and (-webkit-min-device-pixel-ratio:0){
.sl-floatcenter{-webkit-text-size-adjust:none;font-size:1px;}
}
snippet sl-ime-disabled
/*
@ 名称: 禁用中文输入法
@ 用法:
在需要禁用的地方添加: .sl-ime-disabled;
*/
.sl-ime-disabled{
ime-mode:disabled!important;
}
snippet sl-outline
/*
@ 名称: 去除虚线框
@ 描述: 去除作为焦点的按钮的虚线框
@ 用法: 把css引入
@ 例子: IE 需要在标签中添加 hidefocus 属性，值可以为空，如:
<input href="#" hidefocus value="alipay WD" type="button" />
<a /> 标签同理。
*/
/* hack for Firefox */
input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{
border : 0px;
}
/* 不要随便去掉虚线框 */
input[type=submit]:focus, input[type=button]:focus{
outline : none;
}
snippet sl-rc
/*
@ 名称: 1像素圆角
@ 描述: 需要自己设置宽度，或者高度，否则会随内容自适应
@ 用法:
最外层：.sl-rc
内容层：.sl-rc-cnt
鼠标经过：.sl-rc-hover
*/
/* base */
.sl-rc{
display:inline-block;vertical-align: middle;
border-left:1px solid #ddd;border-right:1px solid #ddd; /* 可重设 */
}
/*
不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框
这会引发 IE 的 1px 的黑边 bug
Note: 一般不要把 input 作为.sl-rc-cnt 层
*/
.sl-rc-cnt{
float:left;position: relative;
border-top: 1px solid #ddd;border-bottom:1px solid #ddd; /* 可重设 */
margin:-1px 0;
}
/* HACK for ie6 7 */
div.sl-rc, p.sl-rc, h2.sl-rc, h3.sl-rc, h4.sl-rc, h5.sl-rc, h6.sl-rc, ul.sl-rc, ol.sl-rc{
*display: inline;
}
/* 鼠标经过 */
.sl-rc-hover, .sl-rc-hover .sl-rc-cnt, .sl-rc:hover, .sl-rc:hover .sl-rc-cnt{
border-color: #aaa; /* 可重设 */
text-decoration: none;
}
snippet sl-rotate
/*
@ 名称: 翻转90度
@ 用法: 添加 .sl-rotate, 默认为顺时针旋转90度, 逆时针翻转需添加 .sl-rotate-90ccw
@ 用法:
默认: <span class="sl-rotate sl-rotate-90">顺时针转一下</span>
<span class="sl-rotate sl-rotate-90cw">顺时针转一下</span>
<span class="sl-rotate sl-rotate-90ccw">逆时针转一下</span>
*/
.sl-rotate{
zoom:1;
}
/* for inline elements */
span.sl-rotate, em.sl-rotate, cite.sl-rotate, strong.sl-rotate, abbr.sl-rotate, li.sl-rotate{
display:inline-block;
}
/* 逆时针 */
.sl-rotate-90ccw{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotae(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
transform: rotate(-90deg);
}
/* 顺时针 */
.sl-rotate-90cw, .sl-rotate-90{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
transform: rotate(90deg);
}
snippet sl-selectmask
/*
@ 名称: 解决 <select /> z-index 太高问题
@ 描述: 浮层被 select 穿透，是最常见的 z-index bug
@ 例子：
<div id="dd3" class="sl-selectmask" style="background:#FF3366;">
内容<br/>
<!--[if lte IE 6.5]><iframe src="javascript:';"></iframe><![endif]-->
</div>
*/
.sl-selectmask {
position: absolute;
left:0;
top:0;
z-index: 10;
overflow: hidden;
width: 33em;
}
.sl-selectmask iframe {
position: absolute;
top: 0;
left: 0;
z-index: -1;
border:none;
filter: mask();
width: 3000px; /* for any big value */
height: 3000px /* for any big value */
}
snippet sl-shadow
/*
@ 名称: 投影 | drop shadow
@ 用法: 添加 .sl-shadow
@ 实例:
<div class="sl-shadow">
<!-- your context to go -->
</div><!-- .sl-shadow -->
*/
.sl-shadow{
/* modern web browsers */
-moz-box-shadow:1px 3px 12px #bbb;
-webkit-box-shadow:1px 3px 12px #bbb;
box-shadow:1px 3px 12px #bbb;
/* 一定要设置background, 不然 ie 会显示在字体上 */
background: #fff;
/* gte=ie8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";
/* lte=ie7 */
*filter:
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
}
snippet sl-wrap
/*
@ 名称: 强制换行
@ 用法:
* 一般块级元素用：.sl-wrap
* table标签中需添加：.sl-wrap-table
@ 例子:
<p class="sl-wrap">…</p>
<table class="sl-wrap sl-wrap-table"></table>
*/
/* 一般 block-level 元素 */
.sl-wrap, .sl-wrap td, .sl-wrap th{
word-wrap:break-word;word-break:break-all;
}
/* table */
.sl-wrap-table{
table-layout:fixed;
}
