Improved: dialog button focus/active states.

ckeditor · Nov 14, 2012 · 66ffc54 · 66ffc54
1 parent 762b75e
commit 66ffc54
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/skins/moono/dialog.css b/skins/moono/dialog.css
@@ -610,6 +610,17 @@ a.cke_dialog_ui_button:hover
 	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fff2f2f2', endColorstr='#ffcccccc');
 }
 
+/* 	:focus/:active styles for dialog buttons: regular and footer. */
+a.cke_dialog_ui_button:focus,
+a.cke_dialog_ui_button:active
+{
+	border-color: #969696;
+	outline: none;
+	-moz-box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
+	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
+	box-shadow: 0 0 6px rgba(0,0,0,.4) inset;
+}
+
 .cke_hc a.cke_dialog_ui_button:hover,
 .cke_hc a.cke_dialog_ui_button:focus,
 .cke_hc a.cke_dialog_ui_button:active
@@ -684,6 +695,31 @@ span.cke_dialog_ui_button
 	cursor: pointer;
 }
 
+/* 	:focus/:active styles for dialog footer buttons (ok & cancel) */
+a.cke_dialog_ui_button_ok:focus,
+a.cke_dialog_ui_button_ok:active,
+a.cke_dialog_ui_button_cancel:focus,
+a.cke_dialog_ui_button_cancel:active
+{
+	border-width: 2px;
+	padding: 2px 0;
+}
+
+a.cke_dialog_ui_button_ok:focus,
+a.cke_dialog_ui_button_ok:active
+{
+	border-color: #568C0A;
+}
+
+/* 	:focus/:active styles for dialog footer buttons (ok & cancel) spans */
+a.cke_dialog_ui_button_ok:focus span,
+a.cke_dialog_ui_button_ok:active span,
+a.cke_dialog_ui_button_cancel:focus span,
+a.cke_dialog_ui_button_cancel:active span
+{
+	padding: 0 11px;	/* Thick button border must be compensated. */
+}
+
 /* A special container that holds the footer buttons. */
 .cke_dialog_footer_buttons
 {

diff --git a/skins/moono/dialog_ie8.css b/skins/moono/dialog_ie8.css
@@ -13,3 +13,12 @@ This file contains styles to used by Internet Explorer 8 only.
 /* Base it on dialog_ie.css, overriding it with styles defined in this file. */
 @import url("dialog_ie.css");
 
+/* 	Without the following, IE8 cannot compensate footer button thick borders
+	on :focus/:active. */
+a.cke_dialog_ui_button_ok:focus span,
+a.cke_dialog_ui_button_ok:active span,
+a.cke_dialog_ui_button_cancel:focus span,
+a.cke_dialog_ui_button_cancel:active span
+{
+	display: block;
+}