tribeca_cms 0.1.1

data/app/assets/stylesheets/locomotive.css

@@ -0,0 +1,16 @@
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require_self
+ *= require locomotive/blueprint/screen.css
+ *= require locomotive/jquery
+ *= require locomotive/font-awesome
+ *= require formtastic
+ *= require codemirror
+ *= require codemirror/themes/neat
+ *= require locomotive/toggle.css
+ *= require locomotive/liquid_mode.css
+ *= require_tree ./locomotive/shared
+ *= require_tree ./locomotive/backoffice
+*/

data/app/assets/stylesheets/locomotive/backoffice/_box.css.scss

@@ -0,0 +1,157 @@
+@import "compass/css3";
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "locomotive/shared/helpers";
+@import "buttons";
+
+@mixin box-header {
+  display: block;
+  padding: 0 0 0 20px;
+  margin: 0px;
+
+  line-height: 31px;
+  height: 31px;
+
+  border: 1px solid #ccced7;
+  border-bottom: 0;
+
+  @include border-top-radius(8px);
+  @include background-image(linear-gradient(#ebedf4, #d7dbe7));
+}
+
+@mixin box-body {
+  margin-bottom: 0;
+  padding: 0;
+
+  width: 918px;
+
+  border: 1px solid #ccced7;
+
+  @include border-bottom-radius(8px);
+  @include box-shadow(rgba(0, 0, 0, 0.4) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset);
+
+  background: #ebedf4;
+
+  p.no-items {
+    border: none;
+    padding: 0;
+    margin: 0;
+    background: none;
+
+    color: #bdbfc9;
+    font-weight: bold;
+    text-align: center;
+  }
+}
+
+@mixin box-inner-list {
+  margin: 0px;
+
+  .empty {
+    text-align: left;
+  }
+
+  li, .entry, .new-entry {
+    position: relative;
+    margin-bottom: 10px;
+    height: 30px;
+    line-height: 30px;
+
+    padding: 0 13px;
+
+    background: #fff;
+    @include border-radius(16px);
+    @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
+
+    em {
+      color: #757575;
+      font-size: 11px;
+      font-weight: normal;
+    }
+
+    span.handle {
+      display: none;
+      position: relative;
+      top: 3px;
+      margin-right: 5px;
+      cursor: move;
+    }
+
+    strong {
+      color: #17171D;
+      font-size: 14px;
+      font-weight: bold;
+
+      @include locomotive-link;
+    }
+
+    .editable {
+      @include editable;
+      padding-right: 6px;
+
+      &:hover {
+        background-image: none;
+      }
+    }
+
+    span.inline-errors {
+      margin-left: 10px;
+      padding: 2px 3px;
+
+      background: #FFE5E5;
+
+      color: #CE2525;
+      font-size: 13px;
+    }
+
+    div.more, span.actions {
+      position: absolute;
+      top: 0px;
+      right: 13px;
+
+      color: #8B8D9A;
+      font-size: 11px;
+
+      a.add {
+        @include gray-button;
+
+        padding-left: 10px;
+      }
+
+      a.remove {
+        @include icon-button;
+
+        margin: 0 0 0 5px;
+
+        &:hover {
+          background: #e72635;
+        }
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  } // li
+
+  &.sortable {
+    li {
+      span.handle {
+        display: inline-block;
+      }
+    }
+  }
+
+  > hr {
+    margin: 10px 0px;
+    height: 1px;
+    line-height: 1px;
+    border: 0px;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    background: transparent;
+  }
+
+  .new-entry {
+  }
+}

data/app/assets/stylesheets/locomotive/backoffice/_buttons.css.scss

@@ -0,0 +1,178 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+
+@mixin icon-button {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+
+  padding: 0px 0px;
+
+  border-radius: 50%;
+  background: #808080;
+
+  outline: none;
+  text-align: center;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: normal;
+  color: #fff;
+
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    i {
+      vertical-align: middle;
+    }
+  }
+
+  i {
+    height: 16px;
+    width: 16px;
+    line-height: 16px;
+    font-weight: normal;
+
+    @include single-text-shadow(#000, 0px, 0px, 0px);
+  }
+}
+
+@mixin black-button {
+  display: inline-block;
+
+  position: relative;
+
+  cursor: pointer;
+
+  border: 1px solid #000;
+  @include border-radius(5px);
+
+  line-height: 17px !important;
+
+  padding: 5px 10px 7px 10px;
+
+  @include background-image(linear-gradient(top, #474850, #1f2027));
+  @include box-shadow(rgba(0, 0, 0, 0.3) 1px 1px 0px 0px);
+
+  font-size: 12px;
+  color: #fff;
+  text-decoration: none;
+  @include text-shadow(rgba(0, 0, 0, 0.8), 0px, 1px, 0px);
+
+  &:hover {
+    @include background-image(linear-gradient(top, #575862, #2f303b));
+  }
+
+  &:active {
+    top: 1px;
+  }
+}
+
+@mixin light-button {
+  display: inline-block;
+
+  // font-family: "Lucida Grande";
+
+  position: relative;
+  cursor: pointer;
+  line-height: 12px;
+
+  padding: 8px 10px 10px 10px;
+
+  border: 0px;
+  border-top: 1px solid rgba(255, 255, 255, 0.6);
+  @include border-radius(5px);
+  @include background-image(linear-gradient(top, #ebedf4, #d2d6e1));
+  @include box-shadow(rgba(0, 0, 0, 0.3) 1px 1px 0px 0px);
+
+  font-size: 12px;
+  color: #6B6D7A;
+  text-decoration: none;
+  @include text-shadow(rgba(255, 255, 255, 0.8), 0px, 1px, 0px);
+
+  &:hover, &.hover {
+    @include background-image(linear-gradient(top, #fff, #d7dbe7));
+  }
+
+  &:active {
+    top: 1px;
+  }
+}
+
+@mixin red-button {
+  @include light-button;
+
+  @include background-image(linear-gradient(top, #EE5F5B, #C43C35));
+  @include box-shadow(rgba(0, 0, 0, 0.4) 1px 1px 0px 0px);
+
+  @include text-shadow(rgba(0, 0, 0, 0.7) 0px -1px 0px);
+  color: #fff;
+
+  &:hover, &.hover {
+    background: #C43C35;
+  }
+}
+
+@mixin gray-button {
+  position: relative;
+  padding: 2px 10px 3px 14px;
+
+  background-color: #ebedf4;
+  @include border-radius(10px);
+  @include box-shadow(rgba(0, 0, 0, 0.4) 1px 1px 0px 0px);
+
+  color: #8b8d9a;
+  text-decoration: none;
+  @include text-shadow(rgba(255, 255, 255, 0.8) 0px 1px 0px);
+  font-size: 11px;
+  margin-left: 10px;
+
+  outline: none;
+
+  i {
+    position: relative;
+    right: 5px;
+    font-size: 9px;
+  }
+
+  &:hover, &.hover {
+    text-decoration: none;
+    color: #333;
+  }
+
+  &:active, &.active {
+    top: 1px;
+  }
+}
+
+@mixin blue-button {
+  display: inline-block;
+
+  position: relative;
+
+  cursor: pointer;
+
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  border-bottom-color: rgba(0, 0, 0, 0.6);
+  @include border-radius(5px);
+
+  line-height: 19px !important;
+
+  padding: 0px 7px;
+
+  @include background-image(linear-gradient(top, #2abaf1, #228dda));
+  @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset);
+
+  font-size: 12px;
+  color: #fff;
+  text-decoration: none;
+  @include text-shadow(rgba(0, 0, 0, 0.8), 0px, 1px, 0px);
+
+  &:hover {
+    @include background-image(linear-gradient(top, #26a1e9, #0d6893));
+  }
+
+  &:active {
+    top: 1px;
+  }
+}

data/app/assets/stylesheets/locomotive/backoffice/application.css.scss

@@ -0,0 +1,332 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+@import "locomotive/shared/helpers";
+@import "buttons";
+@import "box";
+
+/* ___ boxes ___ */
+
+#wrapper #content > div.inner .box {
+  width: 918px;
+
+  padding: 0px;
+  margin-top: 20px;
+
+  background: transparent;
+
+  h3 {
+    @include box-header;
+  }
+
+  & > .inner {
+    @include box-body;
+
+    padding: 20px;
+    width: 876px;
+
+    ul {
+      @include box-inner-list;
+    }
+  }
+}
+
+/* ___ list ___ */
+
+ul.list {
+  background: #fff;
+  list-style: none;
+  margin: 0px 0 20px 0;
+
+  li.item {
+    position: relative;
+    height: 31px;
+    line-height: 31px;
+
+    background: #ebedf4;
+    @include border-radius(16px);
+    @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
+
+    margin-bottom: 10px;
+    clear: both;
+
+    a {
+      margin-left: 18px;
+      @include hover-link;
+
+      font-weight: bold;
+      font-size: 14px;
+      color: #1F82BC;
+      outline: none;
+    }
+
+    span.untranslated {
+      @include label;
+      background-color: #F89406;
+      top: -1px;
+      left: 5px;
+    }
+
+    div.more {
+      position: absolute;
+      top: 0px;
+      right: 15px;
+
+      font-size: 11px;
+      color: #8b8d9a;
+
+      height: 30px;
+      line-height: 30px;
+
+      a {
+        margin-left: 10px;
+      }
+
+      a.remove {
+        @include icon-button;
+
+        margin: 0 0 0 5px;
+
+        &:hover {
+          background: #e72635;
+        }
+      }
+    } // li div.more
+  } // ul.list li
+}
+
+#entries-list.list {
+
+  li.item {
+    a {
+      @include single-text-shadow(#fff, 1px, 1px, 1px);
+    }
+
+    span.handle {
+      display: none;
+    }
+
+  } // li.item
+
+  &.sortable {
+
+    li.item {
+      span.handle {
+        display: block;
+        position: absolute;
+        top: 5px;
+        left: 0px;
+
+        height: 22px;
+        width: 18px;
+        text-indent: -9999px;
+
+        background: transparent image-url("locomotive/list/item-left.png") no-repeat 0 0;
+
+        cursor: move;
+      }
+
+      a {
+        margin-left: 26px;
+      }
+    } // .sortable li.item
+
+  } // .list.sortable
+
+} // #entries-list.list
+
+#pages-list {
+  margin: 0px 0 20px 0;
+  background: #fff;
+
+  li.sep {
+    margin: 11px 0 10px 0;
+    height: 1px;
+    border-top: 1px dotted #bbbbbd;
+  }
+
+  li.page {
+    position: relative;
+
+    > .toggler {
+      position: absolute;
+      top: 0px;
+      left: -25px;
+      cursor: pointer;
+
+      color: #808080;
+      font-size: 20px;
+    }
+
+    .inner {
+      position: relative;
+      margin-bottom: 10px;
+      height: 30px;
+      line-height: 30px;
+      clear: both;
+
+      background: #ebedf4;
+      @include border-radius(16px);
+      @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
+
+      em {
+        display: block;
+        position: absolute;
+        top: 5px;
+        left: 0px;
+
+        height: 22px;
+        width: 18px;
+
+        background: transparent image-url("locomotive/list/item-left.png") no-repeat 0 0;
+      }
+
+      a {
+        @include hover-link;
+
+        margin-left: 26px;
+
+        color: #1f82bc;
+        font-size: 14px;
+        font-weight: bold;
+        @include single-text-shadow(#fff, 1px, 1px, 1px);
+      }
+
+      & > i {
+        vertical-align: middle;
+        font-size: 18px;
+        color: #b3b5c7;
+        @include single-text-shadow(#fff, 1px, 1px, 1px);
+      }
+
+      span.untranslated {
+        @include label;
+        background-color: #F89406;
+        top: -1px;
+        left: 5px;
+      }
+
+      span.response-type {
+        @include label;
+        top: -1px;
+        left: 5px;
+      }
+
+      .more {
+        position: absolute;
+        top: 0px;
+        right: 20px;
+
+        font-size: 11px;
+        color: #8b8d9a;
+
+        height: 30px;
+        line-height: 30px;
+
+        a.remove {
+          @include icon-button;
+
+          margin: 0 0 0 5px;
+
+          &:hover {
+            background: #e72635;
+          }
+        }
+      }
+    } // li .inner
+
+    &.index, &.not-found {
+      > .inner {
+        a {
+          margin-left: 20px;
+        }
+
+        .more {
+          // padding-top: 7px;
+        }
+      }
+    }
+
+    &.unpublished {
+      > .inner {
+        a {
+          font-style: italic;
+          font-weight: normal;
+        }
+      }
+    }
+
+  } // #pages-list li
+
+  ul {
+    margin: 10px 0 10px 40px;
+
+    li {
+      .more {
+        // padding-top: 3px !important;
+      }
+    }
+
+    &.folder {
+
+    } // ul.folder
+  } // ul
+} // #pages-list
+
+/* ___ Progress bar ___ */
+
+#progressbar-wrapper {
+  margin: 40px 0;
+  height: 30px;
+
+  #progressbar {
+    height: 100%;
+  }
+}
+
+/* ___ form notification ___ */
+
+#form-submit-notification {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  z-index: 9999;
+
+  > div {
+    padding: 5px 10px;
+
+    background-color: #fffbe5;
+    border-left: 4px solid #efe4a5;
+    border-bottom: 4px solid #efe4a5;
+
+    text-align: center;
+    @include single-text-shadow(rgba(255, 255, 255, 1), 0px, 1px, 0px);
+    font-weight: bold;
+    font-size: 12px;
+    color: #aa9a79;
+  }
+}
+
+/* ___ paragraph (for help for example) ___ */
+
+p span.code {
+  padding: 2px 3px;
+  background: #EBEDF4;
+
+  color: #8B8D9A;
+  @include single-text-shadow(#fff, 0px, 0px, 1px);
+}
+
+/* ___ dialog box to edit select options ___ */
+
+#edit-select-option-entries {
+  .placeholder {
+    @include tiny-buttons-group;
+    @include select-options-edit-style;
+
+    .list {
+      height: auto;
+    }
+  }
+}