Skip to content

Commit 2ac750a

Browse files
sofishsofish
committed
Merge pull request aliceui#16 from yun77op/master
Sublime Text 2 的 Alice Solutions 插件
2 parents 1ffdf4e + 3efea63 commit 2ac750a

22 files changed

+417
-0
lines changed

‎plugins/Sublime_Text_2/Alice/CSS/sl-file.sublime-snippet‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 自定义 input[type=file]
5+
@ 用法: 添加 class .sl-file
6+
@ 例子：
7+
<span class="sl-file">
8+
<input type="button" value="点击选择图片" />
9+
<input type="file" exts="png|jpg|bmp" class=".sl-file-input" />
10+
</span>
11+
*/
12+
13+
/* 基础样式 */
14+
.sl-file{
15+
position:relative;
16+
display:inline-block;
17+
zoom:1;
18+
cursor:pointer;
19+
overflow:hidden;
20+
vertical-align:middle;
21+
}
22+
23+
/* 影响 .ui-input-file 的样式 */
24+
.sl-file .sl-file-input{
25+
position:absolute;
26+
right:0;
27+
top:0;
28+
_font-size:100px; /* overwrite*/
29+
_font-size:12px;
30+
_zoom:10; /* overwrite */
31+
height:100%;
32+
_height:auto;
33+
opacity:0;
34+
filter:alpha(opacity=0);
35+
-ms-filter:"alpha(opacity=0)";
36+
cursor:pointer;
37+
}$0]]></content>
38+
<tabTrigger>sl-file</tabTrigger>
39+
<scope>source.css</scope>
40+
<description>File</description>
41+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-floatcenter.sublime-snippet‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@名称: float center
5+
@用法：
6+
7+
1. 外框加上 .sl-floatcenter, 子元素加上 .sl-floatcenter-item，元素就可以自动根据父元素的宽度水平居中
8+
9+
2. 结构(例:3栏)：别忘记给每个栏加宽度
10+
<ul class="sl-floatcenter clearfix">
11+
<li class="sl-floatcenter-item">item1</li>
12+
<li class="sl-floatcenter-item">item2</li>
13+
<li class="sl-floatcenter-item">item3</li>
14+
</ul>
15+
16+
*/
17+
18+
.sl-floatcenter{
19+
display:block;text-align:center;
20+
21+
/* 解决间隙问题 */
22+
font-size:0;
23+
}
24+
.sl-floatcenter-item{
25+
display:inline-block;*display:inline;*zoom:1;
26+
27+
/* 解决不能水平对齐问题 */
28+
vertical-align:top;
29+
30+
/* 解决间隙问题后遗症解决 */
31+
font-size:13px;
32+
}
33+
34+
/* 让 chrome 支持 12px 以下的字体 */
35+
@media screen and (-webkit-min-device-pixel-ratio:0){
36+
.sl-floatcenter{-webkit-text-size-adjust:none;font-size:1px;}
37+
}$0]]></content>
38+
<tabTrigger>sl-floatcenter</tabTrigger>
39+
<scope>source.css</scope>
40+
<description>Float Center</description>
41+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-ime-disabled.sublime-snippet‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 禁用中文输入法
5+
@ 用法:
6+
在需要禁用的地方添加: .sl-ime-disabled;
7+
*/
8+
9+
.sl-ime-disabled{
10+
ime-mode:disabled!important;
11+
12+
}$0]]></content>
13+
<tabTrigger>sl-ime-disabled</tabTrigger>
14+
<scope>source.css</scope>
15+
<description>Ime Disabled</description>
16+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-outline.sublime-snippet‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 去除虚线框
5+
@ 描述: 去除作为焦点的按钮的虚线框
6+
@ 用法: 把css引入
7+
@ 例子: IE 需要在标签中添加 hidefocus 属性，值可以为空，如:
8+
9+
<input href="#" hidefocus value="alipay WD" type="button" />
10+
11+
<a /> 标签同理。
12+
*/
13+
14+
15+
/* hack for Firefox */
16+
input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{
17+
border : 0px;
18+
}
19+
20+
/* 不要随便去掉虚线框 */
21+
input[type=submit]:focus, input[type=button]:focus{
22+
outline : none;
23+
}$0]]></content>
24+
<tabTrigger>sl-outline</tabTrigger>
25+
<scope>source.css</scope>
26+
<description>Outline</description>
27+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-rc.sublime-snippet‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 1像素圆角
5+
@ 描述: 需要自己设置宽度，或者高度，否则会随内容自适应
6+
@ 用法:
7+
最外层：.sl-rc
8+
内容层：.sl-rc-cnt
9+
鼠标经过：.sl-rc-hover
10+
*/
11+
12+
/* base */
13+
.sl-rc{
14+
display:inline-block;vertical-align: middle;
15+
border-left:1px solid #ddd;border-right:1px solid #ddd; /* 可重设 */
16+
}
17+
18+
/*
19+
不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框
20+
这会引发 IE 的 1px 的黑边 bug
21+
Note: 一般不要把 input 作为.sl-rc-cnt 层
22+
*/
23+
.sl-rc-cnt{
24+
float:left;position: relative;
25+
border-top: 1px solid #ddd;border-bottom:1px solid #ddd; /* 可重设 */
26+
margin:-1px 0;
27+
}
28+
29+
/* HACK for ie6 7 */
30+
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{
31+
*display: inline;
32+
}
33+
34+
/* 鼠标经过 */
35+
.sl-rc-hover, .sl-rc-hover .sl-rc-cnt, .sl-rc:hover, .sl-rc:hover .sl-rc-cnt{
36+
border-color: #aaa; /* 可重设 */
37+
text-decoration: none;
38+
}$0]]></content>
39+
<tabTrigger>sl-rc</tabTrigger>
40+
<scope>source.css</scope>
41+
<description>Rounded Corner</description>
42+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-rotate.sublime-snippet‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 翻转90度
5+
@ 用法: 添加 .sl-rotate, 默认为顺时针旋转90度, 逆时针翻转需添加 .sl-rotate-90ccw
6+
@ 用法:
7+
8+
默认: <span class="sl-rotate sl-rotate-90">顺时针转一下</span>
9+
<span class="sl-rotate sl-rotate-90cw">顺时针转一下</span>
10+
<span class="sl-rotate sl-rotate-90ccw">逆时针转一下</span>
11+
12+
*/
13+
14+
.sl-rotate{
15+
zoom:1;
16+
}
17+
18+
/* for inline elements */
19+
span.sl-rotate, em.sl-rotate, cite.sl-rotate, strong.sl-rotate, abbr.sl-rotate, li.sl-rotate{
20+
display:inline-block;
21+
}
22+
23+
/* 逆时针 */
24+
.sl-rotate-90ccw{
25+
-webkit-transform: rotate(-90deg);
26+
-moz-transform: rotate(-90deg);
27+
-o-transform: rotae(-90deg);
28+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
29+
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
30+
transform: rotate(-90deg);
31+
}
32+
33+
/* 顺时针 */
34+
.sl-rotate-90cw, .sl-rotate-90{
35+
-webkit-transform: rotate(90deg);
36+
-moz-transform: rotate(90deg);
37+
-o-transform: rotate(90deg);
38+
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
39+
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
40+
transform: rotate(90deg);
41+
}$0]]></content>
42+
<tabTrigger>sl-rotate</tabTrigger>
43+
<scope>source.css</scope>
44+
<description>Rotate</description>
45+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-selectmask.sublime-snippet‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 解决 <select /> z-index 太高问题
5+
@ 描述: 浮层被 select 穿透，是最常见的 z-index bug
6+
@ 例子：
7+
<div id="dd3" class="sl-selectmask" style="background:#FF3366;">
8+
内容<br/>
9+
<!--[if lte IE 6.5]><iframe src="javascript:'';"></iframe><![endif]-->
10+
</div>
11+
*/
12+
13+
.sl-selectmask {
14+
position: absolute;
15+
left:0;
16+
top:0;
17+
z-index: 10;
18+
overflow: hidden;
19+
width: 33em;
20+
}
21+
.sl-selectmask iframe {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
z-index: -1;
26+
border:none;
27+
filter: mask();
28+
width: 3000px; /* for any big value */
29+
height: 3000px /* for any big value */
30+
}$0]]></content>
31+
<tabTrigger>sl-selectmask</tabTrigger>
32+
<scope>source.css</scope>
33+
<description>Select Mask</description>
34+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-shadow.sublime-snippet‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 投影 | drop shadow
5+
@ 用法: 添加 .sl-shadow
6+
@ 实例:
7+
8+
<div class="sl-shadow">
9+
<!-- your context to go -->
10+
</div><!-- .sl-shadow -->
11+
12+
*/
13+
14+
.sl-shadow{
15+
16+
/* modern web browsers */
17+
-moz-box-shadow:1px 3px 12px #bbb;
18+
-webkit-box-shadow:1px 3px 12px #bbb;
19+
box-shadow:1px 3px 12px #bbb;
20+
21+
/* 一定要设置background, 不然 ie 会显示在字体上 */
22+
background: #fff;
23+
24+
/* gte=ie8 */
25+
-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)";
26+
27+
/* lte=ie7 */
28+
*filter:
29+
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
30+
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
31+
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
32+
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
33+
}$0]]></content>
34+
<tabTrigger>sl-shadow</tabTrigger>
35+
<scope>source.css</scope>
36+
<description>Shadow</description>
37+
</snippet>

‎plugins/Sublime_Text_2/Alice/CSS/sl-wrap.sublime-snippet‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<snippet>
2+
<content><![CDATA[
3+
/*
4+
@ 名称: 投影 | drop shadow
5+
@ 用法: 添加 .sl-shadow
6+
@ 实例:
7+
8+
<div class="sl-shadow">
9+
<!-- your context to go -->
10+
</div><!-- .sl-shadow -->
11+
12+
*/
13+
14+
.sl-shadow{
15+
16+
/* modern web browsers */
17+
-moz-box-shadow:1px 3px 12px #bbb;
18+
-webkit-box-shadow:1px 3px 12px #bbb;
19+
box-shadow:1px 3px 12px #bbb;
20+
21+
/* 一定要设置background, 不然 ie 会显示在字体上 */
22+
background: #fff;
23+
24+
/* gte=ie8 */
25+
-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)";
26+
27+
/* lte=ie7 */
28+
*filter:
29+
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
30+
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
31+
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
32+
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
33+
}$0]]></content>
34+
<tabTrigger>sl-wrap</tabTrigger>
35+
<scope>source.css</scope>
36+
<description>Wrap</description>
37+
</snippet>

‎plugins/Sublime_Text_2/Alice/HTML/sl-file.sublime-snippet‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<span class="sl-file">
4+
<input type="button" value="${1:点击选择图片}" />
5+
<input type="file" exts="${2:png|jpg|bmp}" class=".sl-file-input" />
6+
</span>$0]]></content>
7+
<tabTrigger>sl-file</tabTrigger>
8+
<scope>source.html</scope>
9+
<description>File</description>
10+
</snippet>

0 commit comments

Comments
 (0)