1 files changed, 230 insertions, 0 deletions
diff --git a/shared/style/buttons.css b/shared/style/buttons.css
new file mode 100644
index 0000000..6c7eec9
--- /dev/null
+++ b/shared/style/buttons.css
@@ -0,0 +1,230 @@
+/* ----------------------------------
+ * Buttons
+ * ---------------------------------- */
+
+a[role="button"]::-moz-focus-inner,
+button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+button,
+a[role="button"] {
+  width: 100%;
+  height: 3.8rem;
+  margin: 0 0 1rem;
+  padding: 0 1.5rem;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom;
+  border: 0.1rem solid #a6a6a6;
+  border-radius: 0.2rem;
+  font: 500 1.6rem/3.8rem 'MozTT', Sans-serif;
+  color: #333;
+  text-align: center;
+  text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
+  text-decoration: none;
+  outline: none;
+}
+
+/* Press (default & recommend) */
+button:active,
+a[role="button"]:active,
+button.recommend:active,
+a.recommend[role="button"]:active  {
+  border-color: #008aaa;
+  background: #008aaa;
+  color: #333;
+}
+
+/* Recommend */
+button.recommend,
+a[role="button"].recommend {
+  background-image: url(buttons/images/ui/recommend.png);
+  background-color: #00caf2;
+  border-color: #008eab;
+}
+
+/* Danger */
+button.danger,
+a.danger[role="button"] {
+  background-image: url(buttons/images/ui/danger.png);
+  background-color: #b70404;
+  color: #fff;
+  text-shadow: none;
+  border-color: #820000;
+}
+
+/* Danger Press */
+button.danger:active,
+a[role="button"].danger:active {
+  background-image: url(buttons/images/ui/danger-press.png);
+  background-color: #890707;
+}
+
+/* Disabled (default & recommend) */
+button[disabled],
+a[role="button"][aria-disabled="true"],
+button[disabled].recommend,
+a[role="button"][aria-disabled="true"].recommend {
+  background: #e7e7e7;
+  border-color: #c7c7c7;
+  color: #c7c7c7;
+  text-shadow: none;
+  pointer-events: none;
+}
+
+/* Danger disabled */
+button[disabled].danger,
+a[role="button"][aria-disabled="true"].danger {
+  background: #c68484;
+  border-color: #a56464;
+  color: #a56464;
+  text-shadow: none;
+  pointer-events: none;
+}
+
+/* Disabled with dark background */
+.dark button[disabled],
+.dark a[role="button"][aria-disabled="true"] {
+  background: #5f5f5f;
+  color: #4d4d4d;
+  border-color: #4d4d4d;
+  text-shadow: none;
+  pointer-events: none;
+}
+
+
+/* ----------------------------------
+ * Buttons inside lists
+ * ---------------------------------- */
+
+li button,
+li a[role="button"] {
+  position: relative;
+  background: #e7e7e7;
+  text-align: left;
+  /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/
+  white-space: normal;
+  overflow: visible;
+}
+
+/* Hacking box-shadow */
+li button:after,
+li a[role="button"]:after {
+  content: "";
+  position: absolute;
+  bottom: -0.3rem;
+  left: 0;
+  right: 0;
+  height: 0.2rem;
+  background: url( buttons/images/ui/shadow.png) repeat-x left bottom;
+}
+
+/* Press */
+li a[role="button"]:active:after,
+li button:active:after {
+  opacity: 0;
+}
+
+/* Disabled */
+li button[disabled]:after,
+li a[role="button"][aria-disabled="true"]:after {
+  background: none;
+}
+
+/* Icons */
+li button.icon,
+li a[role="button"].icon {
+  padding-right: 3rem;
+}
+
+li button.icon:before,
+li a[role="button"].icon:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -1.5rem;
+  background: transparent no-repeat center center / 100% auto;
+  pointer-events: none;
+}
+
+li button.icon-view:before,
+li a[role="button"].icon-view:before {
+  background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0 / 1rem 9rem;
+}
+
+li button.icon-view:active:before,
+li a[role="button"].icon-view:active:before {
+  background-position: 1.6rem -3rem;
+}
+
+li button.icon-view:disabled:before,
+li a[role="button"][aria-disabled="true"].icon-view:before {
+  background-position: 1.6rem -6rem;
+}
+
+li button.icon-dialog:before,
+li a[role="button"].icon-dialog:before {
+  background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0 / 1rem 9rem;
+  top: 100%;
+  margin-top: -2.4rem;
+}
+
+li button.icon-dialog:active:before,
+li a[role="button"].icon-dialog:active:before {
+  background-position: 1.6rem -3rem;
+}
+
+li button.icon-dialog:disabled:before,
+li a[role="button"][aria-disabled="true"].icon-dialog:before {
+  background-position: 1.6rem -6rem;
+}
+
+
+/* ----------------------------------
+ * Buttons inside lists, compact mode
+ * ---------------------------------- */
+
+ul.compact,
+ol.compact {
+  margin-bottom: 1rem;
+}
+
+.compact > li button,
+.compact > li a[role="button"] {
+  margin: -0.1rem 0;
+  border-radius: 0;
+  background: #fff;
+}
+
+.compact > li:first-child button,
+.compact > li:first-child a[role="button"] {
+  border-radius: 0.3rem 0.3rem 0 0;
+}
+
+.compact > li:last-child button,
+.compact > li:last-child a[role="button"] {
+  border-radius: 0 0 0.3rem 0.3rem;
+}
+
+/* Pressed */
+.compact > li button:active,
+.compact > li a[role="button"]:active {
+  border-color: #008aaa;
+  background: #008aaa;
+}
+
+/* Disabled */
+.compact > li button[disabled],
+.compact > li a[role="button"][aria-disabled="true"] {
+  color: #a6a6a6;
+  border-color: #a6a6a6;
+}
+\ No newline at end of file