Bug 1489718 - Insert form widgets for approval flag requests instead of free-form comment text

2 files changed, 61 insertions, 4 deletions

diff --git a/skins/standard/attachment.css b/skins/standard/attachment.css
index cec2d49e1..008bc7031 100644
--- a/skins/standard/attachment.css
+++ b/skins/standard/attachment.css
@@ -133,10 +133,6 @@ table.attachment_info td {
     display: block;
 }
 
-#smallCommentFrame, #attachment_flags {
-    float: left;
-}
-
 #smallCommentFrame {
     margin-right: 1.5em;
 }
diff --git a/skins/standard/global.css b/skins/standard/global.css
index e7028f892..81a420077 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -1110,6 +1110,67 @@ select, select[multiple] {
     font-size: 12px;
 }
 
+.buttons.toggle[role="radiogroup"] {
+  display: inline-flex;
+}
+
+.buttons.toggle[role="radiogroup"] .item {
+  display: flex;
+}
+
+.buttons.toggle[role="radiogroup"] input[type="radio"] {
+  position: absolute;
+  left: -99999px;
+}
+
+.buttons.toggle[role="radiogroup"] label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  border: 1px solid #B2B2B2;
+  padding: 4px 12px;
+  min-width: 1em;
+  min-height: 1em;
+  background-color: #FFF;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.buttons.toggle[role="radiogroup"] .item:first-child label {
+  border-radius: 4px 0 0 4px;
+}
+
+.buttons.toggle[role="radiogroup"] .item:last-child label {
+  border-radius: 0 4px 4px 0;
+}
+
+.buttons.toggle[role="radiogroup"] .item:not(:first-child) label {
+  margin-left: -1px;
+  border-left-color: #D2D2D2;
+}
+
+.buttons.toggle[role="radiogroup"] .item:not(:last-child) label {
+  border-right-color: #D2D2D2;
+}
+
+.buttons.toggle[role="radiogroup"] input[type="radio"]:checked + label {
+  z-index: 2;
+  border-color: #B2B2B2;
+  color: #111;
+  background-color: #DDD;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2);
+}
+
+.buttons.toggle[role="radiogroup"] input[type="radio"]:focus + label {
+  z-index: 2;
+  border-color: #42A4E0;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2), 0 0 0 2px rgba(73, 173, 227, .4);
+}
+
 hr {
     border: none;
     height: 1px;