tribeca_cms 0.1.1

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

@@ -0,0 +1,205 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+@import "locomotive/shared/helpers";
+@import "buttons";
+
+body {
+  background: #000 image-url("locomotive/background/body.png") repeat 0 0;
+  font-size: 12px;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+
+  ul {
+    list-style: none;
+    padding: 0px;
+  }
+
+  /* ___ Alignements ___ */
+
+  .tcenter { text-align: center; }
+  .tright { text-align: right; }
+  .tleft { text-align: left; }
+  .tjustify { text-align: justify; }
+  .fright { float: right; }
+
+  /* ___ Margins ___ */
+
+  .nomargin { margin: 0 !important; }
+  .mt30 { margin-top: 30px !important; }
+  .mt20 { margin-top: 20px !important; }
+  .mb20 { margin-bottom: 20px !important; }
+  .m20 { margin: 20px !important; }
+  .mt10 { margin-top: 10px !important; }
+  .ml10 { margin-left: 10px !important; }
+  .mr10 { margin-right: 10px !important; }
+  .mb10 { margin-bottom: 10px !important; }
+  .m10 { margin: 10px !important; }
+}
+
+#wrapper {
+  @include background-image(linear-gradient(top, rgba(102, 102, 115, 0.3), rgba(30, 30, 42, 0.3) 252px, rgba(30, 30, 42, 0.3)));
+  height: 100%;
+
+  > .container {
+    width: 966px;
+  }
+
+  #header {
+    position: relative;
+    padding-top: 20px;
+
+    h1 {
+      margin-bottom: 0px;
+      font-size: 100%;
+
+      a {
+        margin-left: 8px;
+
+        font-size: 24px;
+        font-weight: normal;
+        color: #f0f0f0;
+        @include single-text-shadow(#000, 1px, 1px, 1px);
+        text-decoration: none;
+      }
+    } // #header h1
+
+    #global-actions-bar {
+      position: absolute;
+      top: 75px;
+      right: 8px;
+
+      color: #8b8d9a;
+      font-size: 11px;
+      @include single-text-shadow(#000, 1px, 1px, 1px);
+
+      @include locomotive-link;
+
+      span {
+        font-size: 10px;
+        color: #999;
+        margin: 0 1px;
+      }
+    } // #header #global-actions-bar
+  } // #header
+
+  #content {
+    position: relative;
+    overflow: hidden;
+    z-index: 997;
+
+    top: -1px;
+    padding-bottom: 8px;
+
+    > div.inner {
+      position: relative;
+      margin: 0px 8px;
+      padding: 10px 15px 66px 15px;
+
+      // z-index: 100;
+
+      background: #fff;
+
+      @include box-shadow(rgba(0, 0, 0, 0.3) 0px 0px 6px 4px);
+      @include border-bottom-radius(4px);
+
+      min-height: 290px;
+
+      h2 {
+        @include locomotive-link;
+
+        padding-bottom: 10px;
+        border-bottom: 1px dotted #bbbbbd;
+
+        font-size: 21px;
+        font-weight: bold;
+        color: #1e1f26;
+
+        a.editable {
+          @include editable;
+        } // h2 a.editable
+      } // > div.inner h2
+
+      h3 {
+        padding: 7px 0 10px 20px;
+
+        font-size: 14px;
+        font-weight: bold;
+        color: #1e1f26;
+        @include single-text-shadow(#fff, 1px, 1px, 1px);
+      } // > div.inner h3
+
+      p {
+        color: #8b8d9a;
+        font-size: 13px;
+
+        @include locomotive-link;
+      } // > div.inner p
+    } // #content > div.inner
+
+    #local-actions-bar {
+      position: absolute;
+      top: 16px;
+      right: 15px;
+
+      a {
+        @include gray-button;
+      } // #local-actions-bar a
+    } // #content #local-actions-bar
+
+    #local-actions-bottom-bar {
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      height: 62px;
+      width: 950px;
+
+      background: #8b8d9a;
+      border-top: 1px solid #5f6069;
+      @include border-bottom-radius(3px);
+
+      p {
+        padding: 15px;
+        margin: 0px;
+
+        a {
+          position: relative;
+          top: 4px;
+
+          @include hover-link;
+          color: #fff;
+          font-size: 12px;
+
+          &.remove {
+            @include red-button;
+            top: 0px;
+          }
+        }
+      }
+
+      input[type=submit], button[type=submit] {
+        @include light-button;
+      }
+
+      .last p { text-align: right; }
+    } // #content #local-actions-bottom-bar
+  } // #content
+
+  #footer {
+    padding-top: 0;
+
+    p {
+      padding: 10px 8px 0 0;
+
+      font-size: 13px;
+      color: #E6E6E6;
+
+      @include locomotive-link;
+    }
+  } // #footer
+
+  /* ___ NoCoffee / Rails Tags ___ */
+
+  a#nocoffee { color: #b0b4c0 !important; text-decoration: none; line-height: 20px; padding-right: 20px; margin: 0 4px; background: transparent image-url("locomotive/nocoffee.png") no-repeat right 0px; }
+
+} // #wrapper

data/app/assets/stylesheets/locomotive/backoffice/menu.css

@@ -0,0 +1,8 @@
+/*
+ * 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 ./menu/sub.css
+ *= require ./menu/main.css
+ *= require ./menu/default.css
+*/

data/app/assets/stylesheets/locomotive/backoffice/menu/_colors.css.scss

@@ -0,0 +1,125 @@
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+@import "compass/css3/text-shadow";
+
+// MAIN MENU ENTRY
+
+@mixin locomotive-menu-entry($color_top, $color_bottom: $color_top) {
+  $color_bottom: $color_top !default;
+
+  z-index: 995;
+
+  a {
+    @include background-image(linear-gradient($color_top, $color_bottom));
+
+    span, i {
+      color: #fff;
+      @include single-text-shadow(transparent, 0px, 0px, 0px);
+    }
+  }
+
+  div.right span {
+    @include background-image(linear-gradient(top right, $color_top, $color_bottom 29px));
+  }
+
+  div.left span {
+    @include background-image(linear-gradient(top left, $color_top, $color_bottom 29px));
+  }
+
+  div.shadow {
+    display: none;
+  }
+}
+
+@mixin locomotive-black-entry {
+  @include locomotive-menu-entry(#45454a, #55565c);
+}
+
+@mixin locomotive-blue-entry {
+  @include locomotive-menu-entry(#1f80ba, #398bbb);
+}
+
+@mixin locomotive-green-entry {
+  @include locomotive-menu-entry(#46b398);
+}
+
+@mixin locomotive-orange-entry {
+  @include locomotive-menu-entry(#ec8901);
+}
+
+@mixin locomotive-red-entry {
+  @include locomotive-menu-entry(#ec525b);
+}
+
+// SUB MENU
+
+@mixin locomotive-black-submenu {
+  @include box-shadow(rgba(0, 0, 0, 0.3) 0px -1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 4px 6px 4px, rgba(255, 255, 255, 0.2) 0 1px 0 0 inset);
+  @include background-image(linear-gradient(#3f3f45, #23242b));
+
+  & > ul > li > a, & > .actions .button {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+    @include box-shadow(rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
+    @include background-image(linear-gradient(#303138, #1e1e24));
+
+    &.on, &:active {
+      border: 1px solid rgba(0, 0, 0, 0.4);
+      border-top: 1px solid rgba(0, 0, 0, 0.6);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      @include background-image(linear-gradient(#1e1e24, #212229));
+      @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
+    }
+  }
+
+  & > .actions {
+    .button:hover {
+      border: 1px solid rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+
+@mixin locomotive-blue-submenu {
+  @include background-image(linear-gradient(#2478ac, #1c5d86));
+  & > ul > li > a, & > .actions .button {
+    @include background-image(linear-gradient(#1f6ea1, #135179));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#13496c, #175b88));
+    }
+  }
+}
+
+@mixin locomotive-green-submenu {
+  @include background-image(linear-gradient(#2e9a7d, #2e9a7d)); // TODO (#2e9a7d)
+  & > ul > li > a, & > .actions .button {
+    @include background-image(linear-gradient(#258c70, #13604b));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#195e4b, #166d55));
+    }
+  }
+}
+
+@mixin locomotive-orange-submenu {
+  @include background-image(linear-gradient(#ed8102, #ed8102)); // TODO (#ed8102)
+  & > ul > li > a, & > .actions .button {
+    @include background-image(linear-gradient(#e07a02, #a25804));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#965201, #9d5603));
+    }
+  }
+}
+
+@mixin locomotive-red-submenu {
+  @include background-image(linear-gradient(#d23c45, #d23c45)); // TODO (#d23c45)
+  & > ul > li > a, & > .actions .button {
+    @include background-image(linear-gradient(#b63e45, #89272d));
+
+    &.on, &:active {
+      @include background-image(linear-gradient(#7b292e, #972e35));
+    }
+  }
+}

data/app/assets/stylesheets/locomotive/backoffice/menu/_helpers.css.scss

@@ -0,0 +1,6 @@
+@mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
+  display: $display;
+  position: absolute;
+  #{$vside}: $vvalue;
+  #{$hside}: $hvalue;
+}

data/app/assets/stylesheets/locomotive/backoffice/menu/default.css.scss

@@ -0,0 +1,32 @@
+@import "colors";
+
+#menu {
+  li.contents { }
+  li.settings { }
+}
+
+body.contents {
+  #menu li.contents {
+    @include locomotive-black-entry;
+
+    // @include locomotive_blue_menu;
+    // @include locomotive_green_menu;
+  }
+
+  #submenu {
+    @include locomotive-black-submenu;
+  }
+}
+
+body.settings {
+  #menu li.settings {
+    @include locomotive-blue-entry;
+    // @include locomotive_black_menu;
+    // @include locomotive-orange-entry;
+  }
+
+  #submenu {
+    @include locomotive-blue-submenu;
+    // @include locomotive-orange-submenu;
+  }
+}

data/app/assets/stylesheets/locomotive/backoffice/menu/main.css.scss

@@ -0,0 +1,127 @@
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
+@import "compass/css3/transform-legacy";
+
+#menu {
+  padding: 0;
+  margin: 20px 8px 0 2px;
+  list-style: none;
+
+  li.entry {
+    float: left;
+    position: relative;
+    padding: 6px 6px 0 6px;
+    height: 29px;
+    line-height: 29px;
+    overflow: hidden;
+
+    a {
+      display: block;
+      float: left;
+
+      position: relative;
+      z-index: 1;
+
+      padding: 0 7px;
+
+      line-height: 29px;
+
+      @include border-top-left-radius(2px);
+      @include border-top-right-radius(2px);
+
+      background: #bcc8cb;
+      @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px, rgba(255, 255, 255, 0.2) 0 1px 0 0 inset);
+
+      font-size: 13px;
+      text-decoration: none;
+
+      span, i {
+        text-decoration: none;
+        color: #787A89;
+        @include single-text-shadow(rgba(255, 255, 255, 0.4), 1px, 1px, 1px);
+      }
+    }
+
+    div.left, div.right {
+      float: left;
+
+      width: 34px;
+      height: 29px;
+
+      overflow: hidden;
+
+      position: relative;
+      top: 0px;
+      right: 0px;
+
+      z-index: 100;
+
+      span {
+        display: block;
+        position: relative;
+
+        width:  41px;
+        height: 41px;
+      }
+    }
+
+    div.right {
+      span {
+        top: 9px;
+        right: 20px;
+
+        background: #bcc8cb;
+        @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px, rgba(255, 255, 255, 0.5) 0 0 1px 0 inset);
+        @include rotate(-45deg);
+      }
+    }
+
+    div.left {
+      span {
+        top: 9px;
+        left: 14px;
+
+        background: #bcc8cb;
+        @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px 0px, rgba(255, 255, 255, 0.5) 0 0 1px 0 inset);
+        @include rotate(45deg);
+      }
+    }
+
+    div.shadow {
+      display: none; // TODO
+
+      position: absolute;
+      height: 8px;
+      bottom: -8px;
+      right: 0px;
+      width: 100%;
+      z-index: 995;
+
+      div {
+        @include box-shadow(rgba(0, 0, 0, 0.4) 0px 0px 10px 0px);
+        height: 8px;
+        margin: 0 13px 0 0;
+      }
+    }
+
+    &:first-child {
+      z-index: 990;
+      a {
+        @include border-top-left-radius(4px);
+        padding-left: 10px;
+      }
+      div.left {
+        display: none;
+      }
+      div.shadow { // TODO
+        left: 6px;
+      }
+    }
+
+    @for $i from 1 through 5 {
+      &.entry-#{$i} { left: -42px * $i; z-index: 990 - $i; }
+    }
+  }
+}