Skip to content

Commit c356d2c

Browse files
ID25ID25
committed
Move up picker button
1 parent e1aef7f commit c356d2c

File tree

1 file changed

+287
-1
lines changed

1 file changed

+287
-1
lines changed

‎app/assets/stylesheets/rails_emoji_picker.scss

Lines changed: 287 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,288 @@
11
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
2-
.nano{position:relative;width:100%;height:100%;overflow:hidden}.nano>.nano-content{position:absolute;overflow:scroll;overflow-x:hidden;top:0;right:0;bottom:0;left:0}.nano>.nano-content:focus{outline:thin dotted}.nano>.nano-content::-webkit-scrollbar{display:none}.has-scrollbar>.nano-content::-webkit-scrollbar{display:block}.nano>.nano-pane{background:rgba(0,0,0,0.25);position:absolute;width:10px;right:0;top:0;bottom:0;visibility:hidden\9;opacity:.01;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.nano>.nano-pane>.nano-slider{background:#444;background:rgba(0,0,0,0.5);position:relative;margin:0 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.nano:hover>.nano-pane,.nano-pane.active,.nano-pane.flashed{visibility:visible\9;opacity:0.99}span.emoji{display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:baseline;*vertical-align:auto;*zoom:1;*display:inline;width:1em;height:1em;background-size:1em;background-repeat:no-repeat;text-indent:-9999px}span.emoji-sizer{line-height:0.81em;font-size:1em;margin:-2px 0}span.emoji-outer{display:-moz-inline-box;display:inline-block;*display:inline;height:1em;width:1em}span.emoji-inner{display:-moz-inline-box;display:inline-block;text-indent:-9999px;width:100%;height:100%;vertical-align:baseline;*vertical-align:auto;*zoom:1}img.emoji{width:1em;height:1em}.emoji-wysiwyg-editor:empty:before{content:attr(placeholder);color:#9aa2ab}.emoji-picker-container{position:relative}.emoji-picker-icon{position:absolute;right:33px;bottom:19px;font-size:20px;opacity:0.7;z-index:100;transition:none;color:#296762;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.emoji-picker-icon.parent-has-scroll{right:28px}.emoji-picker-icon:hover{opacity:1}.emoji-wysiwyg-editor:empty:before{content:attr(placeholder);color:#9aa2ab}.emoji-wysiwyg-editor:active:before,.emoji-wysiwyg-editor:focus:before{content:none}.emoji-wysiwyg-editor{padding:6px;padding-right:35px;margin-bottom:0px;min-height:40px;height:30px;max-height:284px;overflow:auto;-moz-appearance:textfield-multiline;-webkit-appearance:textarea;resize:both;line-height:17px;border:1px solid #d2dbe3;border-radius:2px;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;-webkit-user-select:text;word-wrap:break-word}.emoji-wysiwyg-editor.parent-has-scroll{padding-right:40px}.emoji-wysiwyg-editor.single-line-editor{min-height:35px;height:inherit}.emoji-wysiwyg-editor img{width:20px;height:20px;vertical-align:middle;margin:-3px 0 0 0}.emoji-menu{position:absolute;z-index:999;width:225px;overflow:hidden;border:1px #dfdfdf solid;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;overflow:hidden;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1)}.emoji-items-wrap1{background:#ffffff;padding:5px 2px 5px 5px}.emoji-items-wrap1 .emoji-menu-tabs{width:100%;margin-bottom:8px;margin-top:3px}.emoji-items-wrap1 .emoji-menu-tabs td{text-align:center;color:white;line-height:0}.emoji-menu-tabs .emoji-menu-tab{display:inline-block;width:24px;height:29px;background:url(/img/IconsetSmiles.png) no-repeat;background-size:42px 350px;border:0}.is_1x .emoji-menu-tabs .emoji-menu-tab{background-image:url(/img/IconsetSmiles_1x.png)}.emoji-menu-tabs .icon-recent{background-position:-9px -306px}.emoji-menu-tabs .icon-recent-selected{background-position:-9px -277px}.emoji-menu-tabs .icon-smile{background-position:-9px -34px}.emoji-menu-tabs .icon-smile-selected{background-position:-9px -5px}.emoji-menu-tabs .icon-flower{background-position:-9px -145px}.emoji-menu-tabs .icon-flower-selected{background-position:-9px -118px}.emoji-menu-tabs .icon-bell{background-position:-9px -89px}.emoji-menu-tabs .icon-bell-selected{background-position:-9px -61px}.emoji-menu-tabs .icon-car{background-position:-9px -196px}.emoji-menu-tabs .icon-car-selected{background-position:-9px -170px}.emoji-menu-tabs .icon-grid{background-position:-9px -248px}.emoji-menu-tabs .icon-grid-selected{background-position:-9px -222px}.emoji-menu-tabs .icon-smile,.emoji-menu-tabs .icon-flower,.emoji-menu-tabs .icon-bell,.emoji-menu-tabs .icon-car,.emoji-menu-tabs .icon-grid{opacity:0.7}.emoji-menu-tabs .icon-smile:hover,.emoji-menu-tabs .icon-flower:hover,.emoji-menu-tabs .icon-bell:hover,.emoji-menu-tabs .icon-car:hover,.emoji-menu-tabs .icon-grid:hover{opacity:1}.emoji-menu .emoji-items-wrap{position:relative;height:174px}.emoji-menu .emoji-items{padding-right:8px;outline:0 !important}.emoji-menu img{width:20px;height:20px;vertical-align:middle;border:0 none}.emoji-menu .emoji-items a{margin:-1px 0 0 -1px;padding:5px;display:block;float:left;border-radius:2px;border:0}.emoji-menu .emoji-items a:hover{background-color:#edf2f5}.emoji-menu:after{content:' ';display:block;clear:left}.emoji-menu a .label{display:none}
2+
.nano {
3+
position: relative;
4+
width: 100%;
5+
height: 100%;
6+
overflow: hidden;
7+
}
8+
.nano>.nano-content {
9+
position: absolute;
10+
overflow: scroll;
11+
overflow-x: hidden;
12+
top: 0;
13+
right: 0;
14+
bottom: 0;
15+
left: 0;
16+
}
17+
.nano>.nano-content:focus {
18+
outline: thin dotted;
19+
}
20+
.nano>.nano-content::-webkit-scrollbar {
21+
display: none;
22+
}
23+
.has-scrollbar>.nano-content::-webkit-scrollbar {
24+
display: block;
25+
}
26+
.nano>.nano-pane {
27+
background: rgba(0,0,0,0.25);
28+
position: absolute;
29+
width: 10px;
30+
right: 0;
31+
top: 0;
32+
bottom: 0;
33+
visibility: hidden\9;
34+
opacity: 0.01;
35+
-webkit-transition: 0.2s;
36+
-moz-transition: 0.2s;
37+
-o-transition: 0.2s;
38+
transition: 0.2s;
39+
-moz-border-radius: 5px;
40+
-webkit-border-radius: 5px;
41+
border-radius: 5px;
42+
}
43+
.nano>.nano-pane>.nano-slider {
44+
background: #444;
45+
background: rgba(0,0,0,0.5);
46+
position: relative;
47+
margin: 0 1px;
48+
-moz-border-radius: 3px;
49+
-webkit-border-radius: 3px;
50+
border-radius: 3px;
51+
}
52+
.nano:hover>.nano-pane,
53+
.nano-pane.active,
54+
.nano-pane.flashed {
55+
visibility: visible\9;
56+
opacity: 0.99;
57+
}
58+
span.emoji {
59+
display: -moz-inline-box;
60+
-moz-box-orient: vertical;
61+
display: inline-block;
62+
vertical-align: baseline;
63+
*vertical-align: auto;
64+
*zoom: 1;
65+
*display: inline;
66+
width: 1em;
67+
height: 1em;
68+
background-size: 1em;
69+
background-repeat: no-repeat;
70+
text-indent: -9999px;
71+
}
72+
span.emoji-sizer {
73+
line-height: 0.81em;
74+
font-size: 1em;
75+
margin: -2px 0;
76+
}
77+
span.emoji-outer {
78+
display: -moz-inline-box;
79+
display: inline-block;
80+
*display: inline;
81+
height: 1em;
82+
width: 1em;
83+
}
84+
span.emoji-inner {
85+
display: -moz-inline-box;
86+
display: inline-block;
87+
text-indent: -9999px;
88+
width: 100%;
89+
height: 100%;
90+
vertical-align: baseline;
91+
*vertical-align: auto;
92+
*zoom: 1;
93+
}
94+
img.emoji {
95+
width: 1em;
96+
height: 1em;
97+
}
98+
.emoji-wysiwyg-editor:empty:before {
99+
content: attr(placeholder);
100+
color: #9aa2ab;
101+
}
102+
.emoji-picker-container {
103+
position: relative;
104+
}
105+
.emoji-picker-icon {
106+
position: absolute;
107+
right: 20px;
108+
bottom: 44px;
109+
font-size: 20px;
110+
opacity: 0.7;
111+
z-index: 100;
112+
transition: none;
113+
color: #296762;
114+
-moz-user-select: none;
115+
-khtml-user-select: none;
116+
-webkit-user-select: none;
117+
-o-user-select: none;
118+
user-select: none;
119+
}
120+
.emoji-picker-icon.parent-has-scroll {
121+
right: 28px;
122+
}
123+
.emoji-picker-icon:hover {
124+
opacity: 1;
125+
}
126+
.emoji-wysiwyg-editor:empty:before {
127+
content: attr(placeholder);
128+
color: #9aa2ab;
129+
}
130+
.emoji-wysiwyg-editor:active:before,
131+
.emoji-wysiwyg-editor:focus:before {
132+
content: none;
133+
}
134+
.emoji-wysiwyg-editor {
135+
padding: 6px 35px 6px 6px;
136+
margin-bottom: 0;
137+
min-height: 40px;
138+
height: 30px;
139+
max-height: 284px;
140+
overflow: auto;
141+
-moz-appearance: textfield-multiline;
142+
-webkit-appearance: textarea;
143+
resize: both;
144+
line-height: 17px;
145+
border: 1px solid #d2dbe3;
146+
border-radius: 2px;
147+
-webkit-box-shadow: none;
148+
box-shadow: none;
149+
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
150+
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
151+
-webkit-user-select: text;
152+
word-wrap: break-word;
153+
}
154+
.emoji-wysiwyg-editor.parent-has-scroll {
155+
padding-right: 40px;
156+
}
157+
.emoji-wysiwyg-editor.single-line-editor {
158+
min-height: 35px;
159+
height: inherit;
160+
}
161+
.emoji-wysiwyg-editor img {
162+
width: 20px;
163+
height: 20px;
164+
vertical-align: middle;
165+
margin: -3px 0 0;
166+
}
167+
.emoji-menu {
168+
position: absolute;
169+
z-index: 999;
170+
width: 225px;
171+
overflow: hidden;
172+
border: 1px #dfdfdf solid;
173+
-webkit-border-radius: 3px;
174+
-moz-border-radius: 3px;
175+
border-radius: 3px;
176+
overflow: hidden;
177+
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
178+
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
179+
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
180+
}
181+
.emoji-items-wrap1 {
182+
background: #ffffff;
183+
padding: 5px 2px 5px 5px;
184+
}
185+
.emoji-items-wrap1 .emoji-menu-tabs {
186+
width: 100%;
187+
margin-bottom: 8px;
188+
margin-top: 3px;
189+
}
190+
.emoji-items-wrap1 .emoji-menu-tabs td {
191+
text-align: center;
192+
color: white;
193+
line-height: 0;
194+
}
195+
.emoji-menu-tabs .emoji-menu-tab {
196+
display: inline-block;
197+
width: 24px;
198+
height: 29px;
199+
background: url(/img/IconsetSmiles.png) no-repeat;
200+
background-size: 42px 350px;
201+
border: 0;
202+
}
203+
.is_1x .emoji-menu-tabs .emoji-menu-tab {
204+
background-image: url(/img/IconsetSmiles_1x.png);
205+
}
206+
.emoji-menu-tabs .icon-recent {
207+
background-position: -9px -306px;
208+
}
209+
.emoji-menu-tabs .icon-recent-selected {
210+
background-position: -9px -277px;
211+
}
212+
.emoji-menu-tabs .icon-smile {
213+
background-position: -9px -34px;
214+
}
215+
.emoji-menu-tabs .icon-smile-selected {
216+
background-position: -9px -5px;
217+
}
218+
.emoji-menu-tabs .icon-flower {
219+
background-position: -9px -145px;
220+
}
221+
.emoji-menu-tabs .icon-flower-selected {
222+
background-position: -9px -118px;
223+
}
224+
.emoji-menu-tabs .icon-bell {
225+
background-position: -9px -89px;
226+
}
227+
.emoji-menu-tabs .icon-bell-selected {
228+
background-position: -9px -61px;
229+
}
230+
.emoji-menu-tabs .icon-car {
231+
background-position: -9px -196px;
232+
}
233+
.emoji-menu-tabs .icon-car-selected {
234+
background-position: -9px -170px;
235+
}
236+
.emoji-menu-tabs .icon-grid {
237+
background-position: -9px -248px;
238+
}
239+
.emoji-menu-tabs .icon-grid-selected {
240+
background-position: -9px -222px;
241+
}
242+
.emoji-menu-tabs .icon-smile,
243+
.emoji-menu-tabs .icon-flower,
244+
.emoji-menu-tabs .icon-bell,
245+
.emoji-menu-tabs .icon-car,
246+
.emoji-menu-tabs .icon-grid {
247+
opacity: 0.7;
248+
}
249+
.emoji-menu-tabs .icon-smile:hover,
250+
.emoji-menu-tabs .icon-flower:hover,
251+
.emoji-menu-tabs .icon-bell:hover,
252+
.emoji-menu-tabs .icon-car:hover,
253+
.emoji-menu-tabs .icon-grid:hover {
254+
opacity: 1;
255+
}
256+
.emoji-menu .emoji-items-wrap {
257+
position: relative;
258+
height: 174px;
259+
}
260+
.emoji-menu .emoji-items {
261+
padding-right: 8px;
262+
outline: 0 !important;
263+
}
264+
.emoji-menu img {
265+
width: 20px;
266+
height: 20px;
267+
vertical-align: middle;
268+
border: 0 none;
269+
}
270+
.emoji-menu .emoji-items a {
271+
margin: -1px 0 0 -1px;
272+
padding: 5px;
273+
display: block;
274+
float: left;
275+
border-radius: 2px;
276+
border: 0;
277+
}
278+
.emoji-menu .emoji-items a:hover {
279+
background-color: #edf2f5;
280+
}
281+
.emoji-menu:after {
282+
content: ' ';
283+
display: block;
284+
clear: left;
285+
}
286+
.emoji-menu a .label {
287+
display: none;
288+
}

0 commit comments

Comments
 (0)