mercury-rails 0.1.0

data/app/assets/stylesheets/mercury/statusbar.scss

@@ -0,0 +1,23 @@
+/*
+ * Statusbar
+ *----------------------------------------------------------------------------*/
+.mercury-statusbar {
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  z-index: 10020;
+  bottom: 0;
+  width: 100%;
+  height: 23px;
+  cursor: default;
+  padding: 0 10px;
+  background: #E2E1E2;
+  border-top: 1px solid #727272;
+  font-family: Helvetica, Tahoma, Arial, sans-serif;
+  font-size: 8.5pt;
+  line-height: 23px;
+  color: #222;
+}

data/app/assets/stylesheets/mercury/toolbar.scss

@@ -0,0 +1,417 @@
+/*
+ * Toolbar
+ *----------------------------------------------------------------------------*/
+.mercury-toolbar-container {
+  user-select: none;
+  position: absolute;
+  z-index: 10010;
+  top: 0;
+  width: 100%;
+  border-bottom: 1px solid #E2E1E2;
+}
+.mercury-toolbar {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(226,225,226)));
+  background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(226,225,226) 100%);
+  border-bottom: 1px solid #727272;
+  cursor: default;
+}
+.mercury-toolbar-button-container {
+  float: left;
+}
+.mercury-toolbar-expander {
+  position: absolute;
+  display: none;
+  right: 0;
+  border-left: 1px solid #727272;
+}
+.mercury-button,
+.mercury-button-group,
+.mercury-separator,
+.mercury-line-separator {
+  display: block;
+  float: left;
+}
+.mercury-separator,
+.mercury-line-separator {
+  width: 1px;
+  border: 0;
+  margin: 0;
+}
+.mercury-line-separator {
+  width: 1px;
+  background: #727272;
+}
+.mercury-button em {
+  display: block;
+  font-style: normal;
+}
+.mercury-expander {
+  padding: 5px 0;
+  border-radius: 4px;
+  -moz-border-radius: 4px;
+  .mercury-expander-button {
+    cursor: default;
+    white-space: nowrap;
+    padding: 0 20px 0 10px;
+    &:hover {
+      background: #CCC;
+    }
+    em {
+      display: inline-block;
+      float: left;
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+      -webkit-background-size: 100% 100%;
+      -moz-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    span {
+      display: inline-block;
+      line-height: 20px;
+    }
+  }
+}
+.disabled .mercury-button,
+.mercury-button.disabled {
+  opacity: 0.33;
+}
+/*
+ * Toolbar: Primary Toolbar
+ *----------------------------------------------------------------------------*/
+.mercury-primary-toolbar {
+  position: relative;
+  height: 58px;
+  overflow: hidden;
+  text-shadow: #EEE 0 1px 0;
+  .mercury-button {
+    display: inline-block;
+    height: 58px;
+    margin-bottom: 20px;
+    min-width: 55px;
+    text-align: center;
+    white-space: nowrap;
+    text-decoration: none;
+    font-family: Helvetica, Tahoma, Arial, sans-serif;
+    &.pressed {
+      background: url(/assets/mercury/toolbar/primary/_pressed.png) no-repeat top center;
+    }
+    em {
+      margin: 0 -5px;
+      height: 15px;
+      padding-top: 41px;
+      background-repeat: no-repeat;
+      background-position: 50% 7px;
+      font-size: 8.5pt;
+      line-height: 15px;
+      color: #222;
+    }
+    &.active {
+      em {
+        background-position: 51% 8px;
+      }
+    }
+  }
+  .mercury-separator,
+  .mercury-line-separator {
+    display: inline-block;
+    width: 1px;
+    height: 50px;
+    margin: 5px 20px 28px;
+  }
+  .mercury-toolbar-button-container {
+    white-space: nowrap;
+    padding-right: 10px;
+  }
+  .mercury-toolbar-expander {
+    width: 12px;
+    height: 58px;
+    background: rgba(0, 0, 0, .2) url(/assets/mercury/toolbar/primary/_expander.png) no-repeat center 90%;
+  }
+}
+/* default buttons */
+.mercury-primary-toolbar .mercury-save-button em,
+.mercury-expander-button[data-button=save] em             { background-image: url(/assets/mercury/toolbar/primary/save.png) }
+.mercury-primary-toolbar .mercury-preview-button em,
+.mercury-expander-button[data-button=preview] em          { background-image: url(/assets/mercury/toolbar/primary/preview.png) }
+.mercury-primary-toolbar .mercury-undo-button em,
+.mercury-expander-button[data-button=undo] em             { background-image: url(/assets/mercury/toolbar/primary/undo.png) }
+.mercury-primary-toolbar .mercury-redo-button em,
+.mercury-expander-button[data-button=redo] em             { background-image: url(/assets/mercury/toolbar/primary/redo.png) }
+.mercury-primary-toolbar .mercury-insertlink-button em,
+.mercury-expander-button[data-button=insertlink] em       { background-image: url(/assets/mercury/toolbar/primary/insertlink.png) }
+.mercury-primary-toolbar .mercury-insertmedia-button em,
+.mercury-expander-button[data-button=insertmedia] em      { background-image: url(/assets/mercury/toolbar/primary/insertmedia.png) }
+.mercury-primary-toolbar .mercury-inserttable-button em,
+.mercury-expander-button[data-button=inserttable] em      { background-image: url(/assets/mercury/toolbar/primary/inserttable.png) }
+.mercury-primary-toolbar .mercury-insertcharacter-button em,
+.mercury-expander-button[data-button=insertcharacter] em  { background-image: url(/assets/mercury/toolbar/primary/insertcharacter.png) }
+.mercury-primary-toolbar .mercury-objectspanel-button em,
+.mercury-expander-button[data-button=objectspanel] em     { background-image: url(/assets/mercury/toolbar/primary/objectspanel.png) }
+.mercury-primary-toolbar .mercury-historypanel-button em,
+.mercury-expander-button[data-button=historypanel] em     { background-image: url(/assets/mercury/toolbar/primary/historypanel.png) }
+.mercury-primary-toolbar .mercury-notespanel-button em,
+.mercury-expander-button[data-button=notespanel] em       { background-image: url(/assets/mercury/toolbar/primary/notespanel.png) }
+.mercury-primary-toolbar .mercury-todospanel-button em,
+.mercury-expander-button[data-button=todospanel] em       { background-image: url(/assets/mercury/toolbar/primary/todospanel.png) }
+.mercury-primary-toolbar .mercury-notespanel-button em,
+.mercury-expander-button[data-button=notespanel] em       { background-image: url(/assets/mercury/toolbar/primary/notespanel.png) }
+.mercury-primary-toolbar .mercury-todospanel-button em,
+.mercury-expander-button[data-button=todospanel] em       { background-image: url(/assets/mercury/toolbar/primary/todospanel.png) }
+/*
+ * Toolbar: Editable Region Toolbar
+ *----------------------------------------------------------------------------*/
+.mercury-editable-toolbar {
+  padding: 3px 13px 1px 10px;
+  border-top: 1px solid #E2E1E2;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(210,210,209)));
+  background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(210,210,209) 100%);
+  &:after {
+    content: '\00a0';
+    display: block;
+    visibility: hidden;
+    clear: both;
+    height: 0;
+  }
+  .mercury-separator,
+  .mercury-line-separator {
+    height: 18px;
+    padding: 0;
+    margin: 0 7px 2px;
+  }
+  .mercury-separator {
+    margin: 0 3px 2px;
+  }
+  .mercury-button-group {
+    white-space: nowrap;
+    .mercury-button:first-child {
+      width: 23px;
+    }
+  }
+  .mercury-button {
+    width: 22px;
+    height: 18px;
+    margin: 0 0 2px;
+    background-image: url(/assets/mercury/toolbar/editable/buttons.png);
+    em {
+      background-image: url(/assets/mercury/toolbar/editable/buttons.png);
+      display: none;
+    }
+  }
+  .mercury-button-palette {
+    width: 23px;
+    background-position: 0 -36px;
+  }
+  .mercury-button-select {
+    width: auto !important;
+    overflow: hidden;
+    padding-left: 6px;
+    background-position: -24px -36px;
+    em {
+      display: block;
+      padding-right: 15px;
+      background-position: right -36px;
+      cursor: pointer;
+      white-space: nowrap;
+      font-style: normal;
+      font-family: Helvetica, Tahoma, Arial, sans-serif;
+      font-size: 8.5pt;
+      line-height: 19px;
+      color: #222;
+    }
+  }
+  /* default buttons */
+  .mercury-bold-button                       { background-position: 0 0 }
+  .mercury-bold-button.active                { background-position: 0 -18px }
+  .mercury-italic-button                     { background-position: -23px 0 }
+  .mercury-italic-button.active              { background-position: -23px -18px }
+  .mercury-overline-button                   { background-position: -45px 0 }
+  .mercury-overline-button.active            { background-position: -45px -18px }
+  .mercury-strikethrough-button              { background-position: -67px 0 }
+  .mercury-strikethrough-button.active       { background-position: -67px -18px }
+  .mercury-underline-button                  { background-position: -89px 0 }
+  .mercury-underline-button.active           { background-position: -89px -18px }
+  .mercury-subscript-button                  { background-position: -112px 0 }
+  .mercury-subscript-button.active           { background-position: -112px -18px }
+  .mercury-superscript-button                { background-position: -135px 0 }
+  .mercury-superscript-button.active         { background-position: -135px -18px }
+  .mercury-justifyleft-button                { background-position: -158px 0 }
+  .mercury-justifyleft-button.active         { background-position: -158px -18px }
+  .mercury-justifycenter-button              { background-position: -181px 0 }
+  .mercury-justifycenter-button.active       { background-position: -181px -18px }
+  .mercury-justifyright-button               { background-position: -203px 0 }
+  .mercury-justifyright-button.active        { background-position: -203px -18px }
+  .mercury-justifyfull-button                { background-position: -225px 0 }
+  .mercury-justifyfull-button.active         { background-position: -225px -18px }
+  .mercury-insertunorderedlist-button        { background-position: -248px 0 }
+  .mercury-insertunorderedlist-button.active { background-position: -248px -18px }
+  .mercury-insertorderedlist-button          { background-position: -271px 0 }
+  .mercury-insertorderedlist-button.active   { background-position: -271px -18px }
+  .mercury-outdent-button                    { background-position: -294px 0 }
+  .mercury-outdent-button.active             { background-position: -294px -18px }
+  .mercury-indent-button                     { background-position: -317px 0 }
+  .mercury-indent-button.active              { background-position: -317px -18px }
+  .mercury-insertrowbefore-button            { background-position: -340px 0 }
+  .mercury-insertrowbefore-button.active     { background-position: -340px -18px }
+  .mercury-insertrowafter-button             { background-position: -363px 0 }
+  .mercury-insertrowafter-button.active      { background-position: -363px -18px }
+  .mercury-deleterow-button                  { background-position: -385px 0 }
+  .mercury-deleterow-button.active           { background-position: -385px -18px }
+  .mercury-insertcolumnbefore-button         { background-position: -407px 0 }
+  .mercury-insertcolumnbefore-button.active  { background-position: -407px -18px }
+  .mercury-insertcolumnafter-button          { background-position: -429px 0 }
+  .mercury-insertcolumnafter-button.active   { background-position: -429px -18px }
+  .mercury-deletecolumn-button               { background-position: -451px 0 }
+  .mercury-deletecolumn-button.active        { background-position: -451px -18px }
+  .mercury-increasecolspan-button            { background-position: -474px 0; width: 23px }
+  .mercury-increasecolspan-button.active     { background-position: -474px -18px }
+  .mercury-decreasecolspan-button            { background-position: -497px 0 }
+  .mercury-decreasecolspan-button.active     { background-position: -497px -18px }
+  .mercury-increaserowspan-button            { background-position: -520px 0 }
+  .mercury-increaserowspan-button.active     { background-position: -520px -18px }
+  .mercury-decreaserowspan-button            { background-position: -542px 0 }
+  .mercury-decreaserowspan-button.active     { background-position: -542px -18px }
+  .mercury-horizontalrule-button             { background-position: -564px 0 }
+  .mercury-horizontalrule-button.active      { background-position: -564px -18px }
+  .mercury-removeformatting-button           { background-position: -588px 0 }
+  .mercury-removeformatting-button.active    { background-position: -588px -18px }
+  .mercury-htmleditor-button                 { background-position: -612px 0 }
+  .mercury-htmleditor-button.active          { background-position: -612px -18px }
+}
+/*
+ * Toolbar: Markupable Region Toolbar
+ *----------------------------------------------------------------------------*/
+.mercury-markupable-toolbar {
+  padding: 3px 13px 1px 10px;
+  border-top: 1px solid #E2E1E2;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(210,210,209)));
+  background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(210,210,209) 100%);
+  &:after {
+    content: '\00a0';
+    display: block;
+    visibility: hidden;
+    clear: both;
+    height: 0;
+  }
+  .mercury-separator,
+  .mercury-line-separator {
+    height: 18px;
+    padding: 0;
+    margin: 0 7px 2px;
+  }
+  .mercury-separator {
+    margin: 0 3px 2px;
+  }
+  .mercury-button-group {
+    white-space: nowrap;
+    .mercury-button:first-child {
+      width: 23px;
+    }
+  }
+  .mercury-button {
+    width: 22px;
+    height: 18px;
+    margin: 0 0 2px;
+    background-image: url(/assets/mercury/toolbar/markupable/buttons.png);
+    em {
+      background-image: url(/assets/mercury/toolbar/markupable/buttons.png);
+      display: none;
+    }
+  }
+  .mercury-button-palette {
+    width: 23px;
+    background-position: 0 -36px;
+  }
+  .mercury-button-select {
+    width: auto !important;
+    overflow: hidden;
+    padding-left: 6px;
+    background-position: -24px -36px;
+    em {
+      display: block;
+      padding-right: 15px;
+      background-position: right -36px;
+      cursor: pointer;
+      white-space: nowrap;
+      font-style: normal;
+      font-family: Helvetica, Tahoma, Arial, sans-serif;
+      font-size: 8.5pt;
+      line-height: 19px;
+      color: #222;
+    }
+  }
+  /* default buttons */
+  .mercury-bold-button                       { background-position: 0 0 }
+  .mercury-bold-button.active                { background-position: 0 -18px }
+  .mercury-italic-button                     { background-position: -23px 0 }
+  .mercury-italic-button.active              { background-position: -23px -18px }
+  .mercury-subscript-button                  { background-position: -112px 0 }
+  .mercury-subscript-button.active           { background-position: -112px -18px }
+  .mercury-superscript-button                { background-position: -135px 0 }
+  .mercury-superscript-button.active         { background-position: -135px -18px }
+  .mercury-insertunorderedlist-button        { background-position: -248px 0 }
+  .mercury-insertunorderedlist-button.active { background-position: -248px -18px }
+  .mercury-insertorderedlist-button          { background-position: -271px 0 }
+  .mercury-insertorderedlist-button.active   { background-position: -271px -18px }
+  .mercury-outdent-button                    { background-position: -294px 0 }
+  .mercury-outdent-button.active             { background-position: -294px -18px }
+  .mercury-indent-button                     { background-position: -317px 0 }
+  .mercury-indent-button.active              { background-position: -317px -18px }
+  .mercury-horizontalrule-button             { background-position: -564px 0 }
+  .mercury-horizontalrule-button.active      { background-position: -564px -18px }
+}
+/*
+ * Toolbar: Snippetable Region Toolbar
+ *----------------------------------------------------------------------------*/
+.mercury-snippet-toolbar {
+  position: absolute;
+  top: 100px;
+  left: 15px;
+  border: 1px solid #727272;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
+  padding: 3px 7px 1px 7px;
+  &:after {
+    content: '\00a0';
+    display: block;
+    visibility: hidden;
+    clear: both;
+    height: 0;
+  }
+  .mercury-separator,
+  .mercury-line-separator {
+    height: 18px;
+    padding: 0;
+    margin: 0 7px 2px;
+  }
+  .mercury-separator {
+    margin: 0 3px 2px;
+  }
+  .mercury-button-group {
+    white-space: nowrap;
+    .mercury-button:first-child {
+      width: 23px;
+    }
+  }
+  .mercury-button {
+    width: 23px;
+    height: 18px;
+    margin: 0 0 2px;
+    background-image: url(/assets/mercury/toolbar/snippetable/buttons.png);
+    em {
+      background-image: url(/assets/mercury/toolbar/snippetable/buttons.png);
+      display: none;
+    }
+  }
+  /* default buttons */
+  .mercury-editsnippet-button                { background-position: -24px 0 }
+  .mercury-editsnippet-button.active         { background-position: -24px -18px }
+  .mercury-removesnippet-button              { background-position: -48px 0 }
+  .mercury-removesnippet-button.active       { background-position: -48px -18px }
+  .mercury-dragsnippet-button                { background-position: -72px 0 }
+  .mercury-dragsnippet-button.active         { background-position: -72px -18px }
+}

data/app/assets/stylesheets/mercury/tooltip.scss

@@ -0,0 +1,26 @@
+/*
+ * Tooltip
+ *----------------------------------------------------------------------------*/
+.mercury-tooltip {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  max-width: 400px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, .70);
+  padding: 2px 5px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+  font: normal normal normal 11px/normal Helvetica, Tahoma, Arial, sans-serif;
+  color: #EEE;
+  word-wrap: break-word;
+  a {
+    color: #EEE;
+    text-decoration: none;
+    &:hover {
+      color: #FFF;
+    }
+  }
+}