Editor Menubar Example: Improve high contrast support and refactor Javascript

examples/menubar/css/menubar-editor.css

@@ -0,0 +1,179 @@
+ul[role="menubar"] {
+  margin: 0;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding: 7px;
+  font-size: 110%;
+  list-style: none;
+  background-color: #eee;
+  border: #eee solid 1px;
+  border-radius: 5px;
+}
+
+ul[role="menubar"] li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul[role="menubar"] > li {
+  display: inline;
+  position: relative;
+}
+
+ul[role="menubar"] > li > [role="menuitem"]::after {
+  content: url('../images/down-arrow-brown.png');
+  padding-left: 0.25em;
+}
+
+ul[role="menubar"] ul[role="menu"] {
+  display: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+}
+
+ul[role="menubar"] ul[role="group"] {
+  margin: 0;
+  padding: 0;
+}
+
+ul[role="menubar"] li[aria-disabled="true"] {
+  color: #666;
+  text-decoration: line-through;
+}
+
+ul[role="menubar"] [role="menuitem"],
+ul[role="menubar"] [role="menuitemcheckbox"],
+ul[role="menubar"] [role="menuitemradio"],
+ul[role="menubar"] [role="separator"] {
+  padding: 6px;
+  background-color: #eee;
+  border: 0px solid #eee;
+  border-radius: 5px;
+  color: black;
+}
+
+ul[role="menubar"] [role="menu"] [role="menuitem"],
+ul[role="menubar"] [role="menu"] [role="menuitemcheckbox"],
+ul[role="menubar"] [role="menu"] [role="menuitemradio"],
+ul[role="menubar"] [role="menu"] [role="separator"] {
+  padding-left: 27px;
+  width: 8em;
+}
+
+ul[role="menubar"] [role="separator"] {
+  padding-top: 3px;
+  background-image: url('../images/separator.png');
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
+ul[role="menubar"] [role="menuitem"][aria-expanded="true"] {
+  padding: 4px;
+  border: 2px dashed #034575;
+}
+
+ul[role="menubar"] [role="menu"] [aria-checked='true'] {
+  padding: 6px;
+  padding-left: 10px;
+  padding-right: 18px;
+}
+
+ul[role="menubar"]  [role="menu"] [aria-checked='true']::before {
+  content: url('../images/dot-brown.png');
+  padding-right: 5px;
+}
+
+/* focus and hover styling */
+
+ul[role="menubar"].focus {
+  padding: 6px;
+  border: #034575 solid 2px;
+}
+
+ul[role="menubar"].focus.item {
+  padding: 5px;
+  border: #034575 solid 3px;
+}
+
+ul[role="menubar"].focus [role="menu"] {
+  padding: 8px 5px;
+  border: 1px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
+}
+
+ul[role="menubar"].focus [role="menu"].item  {
+  padding: 6px 3px;
+  border: 3px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
+}
+
+ul[role="menubar"] [role="menuitem"]:focus,
+ul[role="menubar"] [role="menuitemcheckbox"]:focus,
+ul[role="menubar"] [role="menuitemradio"]:focus {
+  padding: 2px;
+  border: 4px dotted #034575;
+  outline: none;
+}
+
+
+ul[role="menubar"] [role="menuitem"]:hover,
+ul[role="menubar"] [role="menuitemcheckbox"]:hover,
+ul[role="menubar"] [role="menuitemradio"]:hover {
+  padding: 4px;
+  border: 2px solid #034575;
+}
+
+ul[role="menubar"] [role="menu"] [role="menuitem"]:focus,
+ul[role="menubar"] [role="menu"] [role="menuitemcheckbox"]:focus,
+ul[role="menubar"] [role="menu"] [role="menuitemradio"]:focus {
+  padding-left: 23px;
+}
+
+ul[role="menubar"] [role="menu"] [role="menuitem"][aria-checked='true']:focus,
+ul[role="menubar"] [role="menu"] [role="menuitemcheckbox"][aria-checked='true']:focus,
+ul[role="menubar"] [role="menu"] [role="menuitemradio"][aria-checked='true']:focus {
+  padding-left: 6px;
+  padding-right: 18px;
+}
+
+ul[role="menubar"] [role="menu"] [role="menuitem"]:hover,
+ul[role="menubar"] [role="menu"] [role="menuitemcheckbox"]:hover,
+ul[role="menubar"] [role="menu"] [role="menuitemradio"]:hover {
+  padding-left: 25px;
+}
+
+
+ul[role="menubar"] [role="menu"] [role="menuitem"][aria-checked='true']:hover,
+ul[role="menubar"] [role="menu"] [role="menuitemcheckbox"][aria-checked='true']:hover,
+ul[role="menubar"] [role="menu"] [role="menuitemradio"][aria-checked='true']:hover {
+  padding-left: 8px;
+  padding-right: 18px;
+}
+
+/*
+* Text area styles
+*/
+.italic {
+  font-style: italic;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+#textarea1 {
+  padding: 0.5em;
+  border: 1px solid black;
+  height: 400px;
+  width: 70%;
+  font-size: medium;
+  font-family: sans-serif;
+}