Improving toggle button

Sergio Oliveira
1 parent fcc14ee1
Showing 2 changed files with 16 additions and 1 deletions Show diff stats
src/static/css/screen.css
src/super_archives/templates/superarchives/tags/display_message.html
@@ -247,6 +247,21 @@ ul.unstyled-list .glyphicon-chevron-right {
     font-weight: bold;
 }
  
+.toggle-reply {
+    height: 10px;
+    line-height: 3px;
+    padding: 0px 5px 14px;
+    vertical-align: middle;
+    font-size: 20px;
+    background-color: #bbb;
+    border-color: #aaa;
+}
+
+.toggle-reply:hover,
+.toggle-reply:focus {
+    background-color: #aaa;
+    border-color: #999;
+
 /* Converse JS */
  
 #chatpanel form#converse-login {
 {% for block in blocks %}
   {% if block.is_reply %}
-    <button class="btn btn-info btn-xs" onclick="$(this).next().toggle();">...</button>
+    <button class="btn btn-info btn-xs toggle-reply" onclick="$(this).next().toggle();">...</button>
     <div style="display: none; color: #707;">{% else %}<div>{% endif %}{{ block|safe|linebreaksbr }}</div>
 {% endfor %}
...	...	@@ -247,6 +247,21 @@ ul.unstyled-list .glyphicon-chevron-right {
247	247	font-weight: bold;
248	248	}
249	249
	250	+.toggle-reply {
	251	+ height: 10px;
	252	+ line-height: 3px;
	253	+ padding: 0px 5px 14px;
	254	+ vertical-align: middle;
	255	+ font-size: 20px;
	256	+ background-color: #bbb;
	257	+ border-color: #aaa;
	258	+}
	259	+
	260	+.toggle-reply:hover,
	261	+.toggle-reply:focus {
	262	+ background-color: #aaa;
	263	+ border-color: #999;
	264	+
250	265	/* Converse JS */
251	266
252	267	#chatpanel form#converse-login {
...	...
1	1	{% for block in blocks %}
2	2	{% if block.is_reply %}
3		- <button class="btn btn-info btn-xs" onclick="$(this).next().toggle();">...</button>
	3	+ <button class="btn btn-info btn-xs toggle-reply" onclick="$(this).next().toggle();">...</button>
4	4	<div style="display: none; color: #707;">{% else %}<div>{% endif %}{{ block\|safe\|linebreaksbr }}</div>
5	5	{% endfor %}
...	...