nocms-admin 0.0.1

data/app/assets/javascripts/no_cms/admin/libraries/store.min.js

@@ -0,0 +1,2 @@
+/* Copyright (c) 2010-2013 Marcus Westin */
+(function(e){function o(){try{return r in e&&e[r]}catch(t){return!1}}var t={},n=e.document,r="localStorage",i="script",s;t.disabled=!1,t.set=function(e,t){},t.get=function(e){},t.remove=function(e){},t.clear=function(){},t.transact=function(e,n,r){var i=t.get(e);r==null&&(r=n,n=null),typeof i=="undefined"&&(i=n||{}),r(i),t.set(e,i)},t.getAll=function(){},t.forEach=function(){},t.serialize=function(e){return JSON.stringify(e)},t.deserialize=function(e){if(typeof e!="string")return undefined;try{return JSON.parse(e)}catch(t){return e||undefined}};if(o())s=e[r],t.set=function(e,n){return n===undefined?t.remove(e):(s.setItem(e,t.serialize(n)),n)},t.get=function(e){return t.deserialize(s.getItem(e))},t.remove=function(e){s.removeItem(e)},t.clear=function(){s.clear()},t.getAll=function(){var e={};return t.forEach(function(t,n){e[t]=n}),e},t.forEach=function(e){for(var n=0;n<s.length;n++){var r=s.key(n);e(r,t.get(r))}};else if(n.documentElement.addBehavior){var u,a;try{a=new ActiveXObject("htmlfile"),a.open(),a.write("<"+i+">document.w=window</"+i+'><iframe src="/favicon.ico"></iframe>'),a.close(),u=a.w.frames[0].document,s=u.createElement("div")}catch(f){s=n.createElement("div"),u=n.body}function l(e){return function(){var n=Array.prototype.slice.call(arguments,0);n.unshift(s),u.appendChild(s),s.addBehavior("#default#userData"),s.load(r);var i=e.apply(t,n);return u.removeChild(s),i}}var c=new RegExp("[!\"#$%&'()*+,/\\\\:;<=>?@[\\]^`{|}~]","g");function h(e){return e.replace(/^d/,"___$&").replace(c,"___")}t.set=l(function(e,n,i){return n=h(n),i===undefined?t.remove(n):(e.setAttribute(n,t.serialize(i)),e.save(r),i)}),t.get=l(function(e,n){return n=h(n),t.deserialize(e.getAttribute(n))}),t.remove=l(function(e,t){t=h(t),e.removeAttribute(t),e.save(r)}),t.clear=l(function(e){var t=e.XMLDocument.documentElement.attributes;e.load(r);for(var n=0,i;i=t[n];n++)e.removeAttribute(i.name);e.save(r)}),t.getAll=function(e){var n={};return t.forEach(function(e,t){n[e]=t}),n},t.forEach=l(function(e,n){var r=e.XMLDocument.documentElement.attributes;for(var i=0,s;s=r[i];++i)n(s.name,t.deserialize(e.getAttribute(s.name)))})}try{var p="__storejs__";t.set(p,p),t.get(p)!=p&&(t.disabled=!0),t.remove(p)}catch(f){t.disabled=!0}t.enabled=!t.disabled,typeof module!="undefined"&&module.exports&&this.module!==module?module.exports=t:typeof define=="function"&&define.amd?define(t):e.store=t})(Function("return this")())

data/app/assets/javascripts/no_cms/admin/logger.js

@@ -0,0 +1,48 @@
+NoCMS.Admin.Logger = function() {
+  this.log_messages_container = $('#log-bar');
+  this.clear_log_messages_link = this.log_messages_container.find('#js-clear-log');
+  this.store_log_messages_key = 'no_cms_admin_logger_messages';
+  this.log_messages = store.get(this.store_log_messages_key);
+
+  that = this;
+
+  if(typeof(this.log_messages) == 'undefined'){
+    this.log_messages = [];
+  }
+
+  this.displayAllMessages();
+
+  this.clear_log_messages_link.on('click', function(){
+    that.clearMessages(true);
+  })
+}
+
+
+
+
+NoCMS.Admin.Logger.prototype.addMessage = function(type, message) {
+  this.log_messages.unshift({'type': type, 'message': message, 'time': new Date()})
+  store.set(this.store_log_messages_key, this.log_messages);
+  this.displayMessage(0);
+}
+
+NoCMS.Admin.Logger.prototype.displayAllMessages = function() {
+  this.clearMessages(false);
+  for(var i = this.log_messages.length-1; i >= 0; i--) {
+    this.displayMessage(i);
+  }
+}
+
+NoCMS.Admin.Logger.prototype.clearMessages = function(clear_from_store) {
+  this.log_messages_container.find('.msg').remove();
+  if(clear_from_store) {
+    this.log_messages = [];
+    store.set(this.store_log_messages_key, this.log_messages);
+  }
+
+};
+
+NoCMS.Admin.Logger.prototype.displayMessage = function(message_index) {
+  var message = this.log_messages[message_index];
+  this.log_messages_container.prepend('<p class="msg '+message.type+'"><time>'+message.time+'</time>'+message.message+'</p>');
+}

data/app/assets/javascripts/no_cms/admin/no_cms_admin.js

@@ -0,0 +1,2 @@
+var NoCMS = {};
+NoCMS.Admin = {};

data/app/assets/javascripts/no_cms/admin/ready.js

@@ -0,0 +1,65 @@
+
+
+$(document).ready(function() {
+
+  $('#log-bar').on('click', function(e) {
+    e.preventDefault();
+    $(this).toggleClass('expanded');
+  });
+
+  $('#js-collapse-to-minimun').on('click', function(e) {
+    e.preventDefault();
+    $('body').removeClass('col-2-only');
+    $('body').toggleClass('col-1-only');
+  });
+
+  $('#js-expand-col-2').on('click', function(e) {
+    e.preventDefault();
+    $('body').removeClass('col-1-only');
+    $('body').toggleClass('col-2-only');
+  });
+
+  // Mark current
+  $('aside#col-1, aside#col-2').on('click', 'a', function(e) {
+    $(this).closest('.content').find('li').removeClass('current');
+    $(this).parent().addClass('current');
+  });
+
+  // Add Class parent
+  $('aside#col-1 li > ul, aside#col-2 li > ul').each(function(){
+    $(this).parent().addClass('parent');
+  });
+
+  // Search button
+  $('#js-search').on('click', function(e) {
+    e.preventDefault();
+    $(this).toggleClass('active');
+    $('.search-bar').toggle();
+  });
+
+  // Filter button
+  $('#js-filter').on('click', function(e) {
+    e.preventDefault();
+    $(this).toggleClass('active');
+    $('.filter-bar').toggle();
+  });
+
+  // Go full-screen in content area
+  $('#js-go-full-screen').on('click', function(e) {
+    e.preventDefault();
+    $(this).toggleClass('active');
+    $('body').removeClass('col-1-only').toggleClass('go-full-screen');
+  });
+
+  // Show mini-options
+/*  $('aside#col-2 .content').on('mouseenter', 'a', function(e) {
+    e.preventDefault();
+    var
+      el = $(this),
+      h = el.height(),
+      t =
+    $('#mini-options').show();
+  });*/
+
+
+});

data/app/assets/stylesheets/no_cms/admin/application.css.scss

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * 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_tree .
+ */

data/app/assets/stylesheets/no_cms/admin/no_cms.css.scss

@@ -0,0 +1,1281 @@
+/* -------------------------------------
+=Variables */
+
+$f_default_size: 13px;
+$f_default_line_height: 120%;
+$f_default_margin_bottom: 22px; /* fz * lh */
+$f_default_color: #333;
+
+$f_base: Arial, sans-serif;
+
+/* ==============================================
+GRID */
+
+$fg-column: 81px;    // Column Width
+$fg-gutter: 16px;    // Gutter Width
+$fg-max-columns: 12; // Total Columns For Main Container
+$fg-max-w: $fg-max-columns * $fg-column + ($fg-max-columns - 1) * $fg-gutter;
+$fg-min-w: 960px;
+
+/* ==============================================
+COLORs */
+
+$accent: #f05a28;
+$error: #ec3f28;
+
+/* Main BG color */
+$bg: #272c2f;
+
+/* ==============================================
+MIXINs */
+
+/* @include clearfix */
+@mixin clearfix {
+  &:after {
+    content:"";
+    display:table;
+    clear:both;
+  }
+}
+
+/* @extend %clearfix */
+%clearfix {
+  &:after {
+    content:"";
+    display:table;
+    clear:both;
+  }
+}
+
+.clearfix {
+  &:after {
+    content:"";
+    display:table;
+    clear:both;
+  }
+}
+
+
+* {
+  -moz-box-sizing:border-box;
+  -webkit-box-sizing:border-box;
+  box-sizing:border-box;
+  // background-repeat:no-repeat;
+}
+
+html {
+  height:100%;
+  background:#fff;
+}
+
+body {
+  height:100%;
+  min-height:100%;
+}
+
+.right {
+  float: right;
+}
+
+
+/* Common font-faces */
+/* 'Trebuchet MS', Trebuchet, Tahoma, Verdana, Arial, Helvetica, sans-serif; */
+/* Georgia, 'Times New Roman', Times, serif; */
+/* 'Courier New', Courier, monospace; */
+
+@font-face {
+  font-family: 'pragmataproregular';
+  src: font-url('no_cms/admin/fsd_-_pragmatapro-webfont.eot');
+  src: font-url('no_cms/admin/fsd_-_pragmatapro-webfont.eot?#iefix') format('embedded-opentype'),
+       font-url('no_cms/admin/fsd_-_pragmatapro-webfont.woff') format('woff'),
+       font-url('no_cms/admin/fsd_-_pragmatapro-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+$font_mono: 'pragmataproregular', 'Courier New', Courier, monospace;
+
+/* -------------------------------------
+=Initial */
+
+html {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-size: 100.01%;
+  color: $f_default_color;
+}
+
+/* -------------------------------------
+=Default text / type styles */
+
+/* General font sizes */
+
+body,
+ol, ul, li,
+address,
+blockquote, pre, code, kbd, samp, q,
+sub, sup, small,
+p, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-family: $f_base;
+  font-size:   $f_default_size;
+  line-height: $f_default_line_height;
+  text-align: left;
+  font-weight: 400;
+  color: $f_default_color;
+}
+
+dfn,
+em,
+i {
+  font-style: italic;
+  font-size: inherit;
+}
+
+strong,
+b {
+  font-weight: 700;
+  font-size: inherit;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+blockquote {
+  margin: 1em 40px;
+}
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+q {
+  quotes: none;
+}
+
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+small {
+  font-size: 14px;
+  line-height: 130%;
+  text-align: left;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+address {
+  font-style:normal !important;
+}
+
+footer address {
+  font-size: $f_default_size;
+  line-height: $f_default_line_height;
+}
+
+/* -------------------------------------
+=Forms feneral */
+
+button, input, select, textarea, fieldset, legend,
+label, select {
+  font-size: $f_default_size;
+  line-height: $f_default_line_height;
+  font-weight: 400;
+  text-align: left;
+}
+
+/* -------------------------------------
+=Listas */
+
+ul, ol, li {
+  list-style: none;
+}
+
+li {
+  font-size: 100%;
+  line-height: 160%;
+}
+
+dl, menu, ol, ul {
+  margin: 1em 0;
+}
+
+dd {
+  margin: 0 0 0 40px;
+}
+
+menu, ol, ul {
+  padding: 0 0 0 40px;
+}
+
+/* =ESTILOS POR DEFECTO */
+/* ul li { list-style: disc outside; }*/
+/* ol li { list-style: decimal outside; }*/
+
+/* -------------------------------------
+=Enlaces */
+
+a:focus { outline: thin dotted; }
+a:hover,
+a:active { outline: 0; }
+
+a, a:link,
+a:visited,
+a:hover,
+a:active {
+  font-weight: 400;
+  color: #00f;
+  outline: 0;
+  text-decoration:underline;
+}
+a:hover {
+  color: #f00;
+}
+
+footer address a,
+footer address a:link,
+footer address a:visited,
+footer address a:hover,
+footer address a:active {
+  font-weight: 400;
+  color: #00f;
+  text-decoration: underline;
+}
+
+footer address a:hover {
+  color: #f00;
+}
+
+/* ICONO AUTOMÁTICO EN LINKS DE DOWNLOAD */
+/* a[href$=".pdf"] { padding:0 20px 0 0; background:transparent url(/img/pdf.png) no-repeat center right; } */
+
+/* -------------------------------------
+=Tipografias del site */
+
+/* Convenciones
+
+Los tamños por defecto... variables generales, etc están en _tipografia_base.css.scss
+
+b -> bold
+m -> medium
+r -> regular
+l -> light
+u -> ultralight
+
+*/
+
+/* Common to all */
+._r100,._r66, ._r52, ._r46,
+._r42, ._r36, ._r34, ._r26,
+._r24, ._r22, ._r20, ._r18,
+._r16, ._r15, ._r14, ._r13
+ {
+  margin: 0 0 22px 0; /* fz x lh */
+
+  font-family: $f_base;
+  font-size:   $f_default_size;
+  line-height: $f_default_line_height;
+  font-weight: 400;
+  text-align: left;
+}
+
+._r46, ._l46,
+._r42, ._l42,
+._r36, ._l36,
+._r34, ._l34,
+._r26, ._l26 {
+  line-height: 120%;
+}
+
+._r100,._l100,
+._r66, ._l66,
+._r52, ._l52 {
+  line-height: 100%;
+}
+
+
+/* Font sizes  and margins */
+/* Mergin bottom equals font-size * line-height */
+._r100,._l100 {
+  font-size: 100px;
+  margin-bottom: 100px;
+}
+._r66, ._l66 {
+  font-size: 66px;
+  margin-bottom: 66px;
+}
+._r52, ._l52 {
+  font-size: 52px;
+  margin-bottom: 52px;
+}
+._r46, ._l46 {
+  font-size: 46px;
+}
+._r42, ._l42 {
+  font-size: 42px;
+}
+._r36, ._l36 {
+  font-size: 36px;
+}
+._r34, ._l34 {
+  font-size: 34px;
+}
+._r26, ._l26 {
+  font-size: 26px;
+}
+._r24, ._l24 {
+  font-size: 24px;
+}
+._r22, ._l22 {
+  font-size: 22px;
+}
+._r20, ._l20 {
+  font-size: 20px;
+}
+._r18, ._l18 {
+  font-size: 18px;
+}
+._r16, ._l16 {
+  font-size: 16px;
+}
+._r15, ._l15 {
+  font-size: 15px;
+}
+._r14, ._l14 {
+  font-size: 14px;
+}
+._r13, ._l13 {
+  font-size: 13px;
+}
+
+/* IE8 has problms asigning the font weight if fonts its no explicity specified */
+
+
+//
+// Default square buttons
+//
+
+/* Default dark buttons 44x44px */
+a.btn-square {
+  display: block;
+  float: left;
+  width: 44px;
+  height: 44px;
+
+  border-right: 1px solid $bg;
+  background-color: lighten($bg, 10%);
+  color: #ccc;
+
+  text-align: center;
+  text-decoration: none;
+  line-height: 40px;
+
+  &:hover {
+    background-color: desaturate(darken($accent, 20%), 20%);
+    color: #fff;
+  }
+
+  &.active {
+    // background-color: desaturate(darken($accent, 20%), 20%);
+    background-color: $accent;
+  }
+
+  &.accent {
+    background-color: desaturate(darken($accent, 20%), 20%);
+    &:hover {
+      background-color: $accent;
+    }
+  }
+
+  &.right {
+    float: right;
+    border-right: 0;
+    border-left: 1px solid $bg;
+  }
+
+  &.error {
+    // background-color: desaturate(darken($error, 20%), 20%);
+    &:hover {
+      background-color: $error;
+    }
+  }
+
+  &.ico-close {
+    background-image: image-url('no_cms/admin/ico-close.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+  &.ico-expand {
+    background-image: image-url('no_cms/admin/ico-expand.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+  &.ico-expand-dark {
+    background-image: image-url('no_cms/admin/ico-expand-dark.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+  &.ico-add {
+    background-image: image-url('no_cms/admin/ico-add.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+  &.ico-filter {
+    background-image: image-url('no_cms/admin/ico-filter.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+
+  &.ico-search {
+    background-image: image-url('no_cms/admin/ico-search.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+}
+
+input[type=reset].btn,
+input[type=submit].btn,
+a.btn {
+  width: auto;
+  min-height: 27px;
+  border: 0;
+  outline: 0;
+  padding: 6px 8px;
+  margin: 7px 1px 0 8px;
+  background-color: desaturate(darken($accent, 20%), 20%);
+
+  font-size: 12px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: #fff;
+
+  border-radius: 2px;
+
+  &.right {
+    margin-left: 0;
+    margin-right: 8px;
+  }
+
+  &:hover {
+    background-color: $accent;
+    color: #fff;
+  }
+}
+
+input[type=reset].btn {
+  background-color: lighten($bg, 40%);
+}
+
+$col_1_w: 15%;
+$col_2_w: 30%;
+
+$tool_bar_h: 44px;
+$content_area_padding: 20px;
+$log_bar_h: 18px;
+
+body {
+  margin: 0;
+  padding: 0 0 0 ($col_1_w+$col_2_w);
+  min-height: 100%;
+  background: darken($bg, 10%);
+
+  overflow-x: hidden;
+
+  /* Maximun space for edition */
+  &.go-full-screen {
+    #interface {
+      display: none;
+    }
+  }
+  /* Maximun space for edition */
+  &.col-1-only {
+    padding-left:($col_1_w);
+    #main-header {
+      width: ($col_1_w);
+    }
+    aside#col-2 {
+      display: none;
+    }
+    section#content-area {
+      .tool-bar {
+        width: (100 - $col_1_w);
+      }
+    }
+  }
+  /* Only first column active */
+  &.col-2-only {
+    aside#col-2 {
+      width: $col_1_w+$col_2_w;
+      left: 0;
+      > .tool-bar,
+      > .page-nav {
+        width: $col_1_w+$col_2_w;
+        left: 0;
+        .ico-expand {
+          background-color: $accent;
+        }
+      }
+    }
+    aside#col-1 {
+      display: none;
+    }
+  }
+}
+
+#main-header {
+  width: $col_1_w+$col_2_w;
+  height: $tool_bar_h;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: lighten($bg, 10%);
+  z-index: 3;
+
+  border-bottom: 2px solid darken($bg, 20%);
+  border-right: 2px solid darken($bg, 20%);
+  > .logo {
+    float: left;
+    overflow: hidden;
+    width: 94px;
+    height: 44px;
+    padding-left: 12px;
+    > a {
+      display: block;
+    }
+  }
+}
+
+#log-bar {
+  position: fixed;
+  width: 100%;
+  height: $log_bar_h;
+  padding: 2px 12px 16px 16px;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  cursor: pointer;
+
+  border-top: 1px solid $bg;
+  background-color: darken($bg, 10%);
+  overflow:hidden;
+
+  &.expanded {
+    height: 50%;
+    overflow: auto;
+  }
+
+  > span#js-clear-log {
+    display: block;
+    height: 24px;
+    padding: 4px 22px 0 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: image-url('no_cms/admin/ico-mini-delete.png') right center no-repeat;
+
+    font-weight: 400;
+    color: #fff;
+  }
+
+  > p {
+    margin: 0;
+    padding: 0;
+    color: lighten($bg, 30%);
+    font-weight: 700;
+    > time {
+      font-weight: 400;
+      &:after {
+        content: ' ››› '
+      }
+    }
+    &.warning {
+      $col: hsl( 40, saturation($accent), lightness($accent));
+      color: $col;
+    }
+    &.error {
+      $col: hsl( 0, saturation($accent), lightness($accent));
+      color: $col;
+    }
+  }
+}
+
+//
+// Toolbars default styles
+//
+
+.tool-bar {
+  position: fixed;
+  width: 100%;
+  height: $tool_bar_h;
+  margin-top: -44px;
+  margin-left: -1px;
+  z-index: 3;
+
+  background: lighten($bg, 10%);
+  border-bottom: 1px solid darken($bg, 10%);
+  color: lighten($bg, 20%);
+  overflow:hidden;
+}
+
+//
+// Page navigator
+//
+
+$pagenav_base_color: $accent;
+$pagenav_text_color: lighten($bg, 30%);
+
+.page-nav {
+  position: fixed;
+  width: 100%;
+  height: $tool_bar_h;
+  bottom:$log_bar_h;
+  margin-left: -1px;
+  border-top: 1px solid $bg;
+  border-left: 1px solid $bg;
+  z-index: 2;
+
+  background: darken($bg, 10%);
+  color: lighten($bg, 20%);
+  overflow:hidden;
+
+   p {
+    width: 100%;
+    display:inline-block;
+    padding:0;
+
+    text-align:center;
+    font-size: 0;
+    line-height: 28px; /* Same as height */
+
+    .prev,
+    .next,
+    a,
+    span {
+      display: inline-block;
+      height: 28px;
+      overflow: hidden;
+      padding: 0 5px;
+      margin: 7px 1px 0 0;
+
+      border-radius: 2px;
+
+      font-size: 14px;
+      text-decoration: none;
+      background: darken($bg, 10%);
+      color: $pagenav_text_color;
+    }
+    .current {
+      background: desaturate(darken($accent, 20%), 20%);
+      color: #fff;
+    }
+    a {
+      &:hover {
+        background-color: $accent;
+        color: #000;
+      }
+    }
+    .prev,
+    .next {
+      height: 42px;
+      width: 42px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-top: 0;
+      border-right: 1px solid $bg;
+      line-height: 40px;
+
+      border-radius: 0;
+      background: darken($bg, 10%) image-url('no_cms/admin/ico-prev.png') center center no-repeat;
+
+      &:hover {
+        background-color: $accent;
+        color: #000;
+      }
+    }
+    .next {
+      background: darken($bg, 10%) image-url('no_cms/admin/ico-next.png') center center no-repeat;
+      border-right: 0;
+      border-left: 1px solid $bg;
+      left: auto;
+      right: 1px;
+    }
+  }
+}
+
+
+//
+// Mini options on the page listing
+//
+
+.mo,
+#mini-options {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: $bg;
+  border: 1px solid lighten($bg, 20%);
+  border-left: 0;
+  border-top: 0;
+  border-right: 0;
+  z-index: 2;
+
+  opacity: 0;
+
+  /* Remove space between icons */
+  font-size: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  form {
+    display: inline;
+    > div {
+      display: inline;
+    }
+  }
+  input[type=submit],
+  button,
+  > a {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    float: right;
+    margin: 0;
+    padding: 0;
+    background-color: desaturate(darken($accent, 20%), 20%);
+
+    border: 0; /* input */
+    outline: 0;
+    border-left: 1px solid lighten($bg, 10%) !important;
+
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    &.active,
+    &:hover {
+      background-color: $accent;
+    }
+    &.ico-mini-show-hide {
+      background-image: image-url('no_cms/admin/ico-mini-show-hide.png');
+    }
+    &.ico-mini-move-up {
+      background-image: image-url('no_cms/admin/ico-mini-move-up.png');
+    }
+    &.ico-mini-move-down {
+      background-image: image-url('no_cms/admin/ico-mini-move-down.png');
+    }
+    &.ico-mini-delete {
+      background-image: image-url('no_cms/admin/ico-mini-delete.png');
+    }
+  }
+}
+
+//
+// Lang / local bar
+//
+
+.lang {
+  float: left;
+  text-align:center;
+  padding: 7px 0 0 8px;
+
+  font-size: 12px;
+  line-height: 28px; /* Same as height */
+  text-decoration: none;
+
+  > a {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    border: 0;
+    padding: 0 5px;
+    border-radius: 2px;
+
+    text-decoration: none;
+    line-height: 28px;
+    color: #fff;
+
+    &:hover {
+      background-color: $accent;
+      color: #fff !important;
+    }
+    &.current {
+      background-color: desaturate(darken($accent, 20%), 20%);
+      color: #fff !important;
+    }
+  }
+}
+
+//
+// Tooltip
+//
+
+a.info-tooltip {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  padding: 3px 0 0 0;
+
+  background: desaturate(darken($accent, 20%), 20%);
+  color: #fff;
+
+  font-family: $font_mono;
+  text-align: center;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 0.5em;
+
+  border-radius: 2px;
+
+  &:hover {
+    background: $accent;
+    color: #fdd;
+  }
+}
+
+a[data-tooltip]:link,
+a[data-tooltip]:visited {
+  position: relative;
+  text-decoration: none;
+}
+
+a[data-tooltip]:after {
+  content: attr(data-tooltip);
+  display: block;
+  width: 280px;
+  position: absolute;
+  left: 20px;
+  top: 0px;
+  padding: 15px;
+  border-radius: 2px;
+
+  background: #000;
+  color: white;
+
+  font-family: $f_base;
+  font-size:   $f_default_size;
+  font-weight: 400;
+  line-height: 1.2em;
+  text-align: left;
+
+  visibility: hidden;
+}
+
+a[data-tooltip]:hover:before,
+a[data-tooltip]:hover:after {
+  visibility: visible;
+}
+
+
+//
+// Columnas de la izquierda
+//
+
+aside#col-1 {
+  position: fixed;
+  width: $col_1_w;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  padding-top: $tool_bar_h;
+
+  // border-left:  2px solid darken($bg, 10%);
+  border-right: 2px solid darken($bg, 10%);
+
+  > .tool-bar {
+    width: $col_1_w;
+    border-right: 1px solid darken($bg, 10%);
+  }
+}
+
+aside#col-2 {
+  position: fixed;
+  width: $col_2_w;
+  left: $col_1_w;
+  bottom: 0;
+  z-index: 1;
+  padding-top: $tool_bar_h;
+
+  border-left:  1px solid $bg;
+  border-right: 2px solid darken($bg, 10%);
+
+  > .page-nav {
+    width: $col_2_w;
+  }
+  > .tool-bar {
+    width: $col_2_w;
+    border-right: 2px solid darken($bg, 10%);
+  }
+}
+
+aside#col-1,
+aside#col-2 {
+
+  top: $tool_bar_h;
+
+  > .content {
+    padding-bottom: $log_bar_h;
+    overflow-y: auto;
+    height: 100%;
+    background: darken($bg, 10%);
+
+    /* general to all levels level */
+    li {
+      position: relative;
+      line-height: 120%;
+      border-top: 1px solid lighten($bg, 10%);
+      &.parent {
+        > a {
+          border-left: 2px solid lighten($bg, 10%);
+        }
+      }
+      &.current {
+        > a {
+          border-left: 4px solid $accent;
+          color: #fff;
+          background: lighten($bg, 10%);
+        }
+        & > ul {
+          border-left: 2px dotted $accent;
+          > li:first-child {
+            border-top: 1px solid transparent;
+          }
+        }
+      }
+      &.oculto {
+        > a {
+          background: darken($bg, 10%) image-url('no_cms/admin/stripe_5d3ba7190e7de9a95d82d43dce2917b1.png') 0 0 repeat;
+        }
+      }
+      > ul {
+        border-left: 2px dotted lighten($bg, 10%);
+      }
+    }
+    a {
+      display: block;
+      padding: 12px 0 12px 12px;
+      border-left: 4px solid transparent;
+
+      text-decoration: none;
+      font-weight: 700;
+      color: lighten($bg, 40%);
+
+      &:hover {
+        color: lighten($bg, 70%);
+      }
+    }
+    /* First level only*/
+    > ul {
+      padding: 0 0 0 16px;
+      margin: 0;
+      background: $bg;
+      /* Second level and below */
+      > li:first-child {
+        border-top: 0;
+      }
+      ul {
+        margin: 0;
+        padding: 0 0 0 16px;
+        li {
+          a {
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+
+  > .page-nav + .content {
+    padding-bottom: ($tool_bar_h+$log_bar_h);
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;  /* for vertical scrollbars */
+    height: 0px; /* for horizontal scrollbars */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: darken($bg, 10%);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: lighten($bg, 20%);
+  }
+}
+
+
+//
+// Search bar / filter bar
+//
+.filter-bar,
+.search-bar {
+  display: none;
+  width: 100%;
+  min-height: $tool_bar_h;
+  overflow: hidden;
+
+  margin-left: -1px;
+  padding: 20px;
+
+  background: darken($bg, 10%);
+  border-bottom: 1px solid $bg;
+}
+
+.search-bar {
+  form {
+    position: relative;
+    display: block;
+    background: transparent;
+  }
+  input[type=text] {
+    width: 98%;
+    float: left;
+    margin: 0 36px 0 0;
+    padding: 8px;
+    border: 1px solid darken(#fff, 30%);
+    outline: 0;
+  }
+  input[type=submit] {
+    position: absolute;
+    right: 0;
+    width: 33px;
+    height: 33px;
+    margin: 0;
+    background: desaturate(darken($accent, 20%), 20%) image-url('no_cms/admin/ico-search-mini.png') center center no-repeat;
+  }
+}
+
+.filter-bar {
+
+}
+
+section#content-area {
+  position: relative;
+  min-height: 100%;
+  height: auto;
+  padding-bottom: $log_bar_h;
+  background: #fff;
+  .content {
+    padding-top: $tool_bar_h;
+    .row {
+      @include clearfix;
+      padding: ($content_area_padding - 3px) $content_area_padding ($content_area_padding - 8px) $content_area_padding;
+      border-bottom: 1px solid darken(#fff, 20%);
+      background: darken(#fff, 2%);
+      &:nth-of-type(even) {
+        background: darken(#fff, 6%);
+      }
+    }
+  }
+  .tool-bar {
+    width: 100 - ($col_1_w + $col_2_w);
+    margin-top: 0;
+    margin-left: 0;
+    background-color: darken(#fff, 10%);
+    border-bottom: 2px solid darken(#fff, 30%);
+    .btn-square {
+      background-color: darken(#fff, 10%);
+      border-right: 1px solid darken(#fff, 30%);
+      color: $bg;
+      &.active,
+      &:hover {
+        background-color: darken(#fff, 30%);
+      }
+      &.right {
+        border-right: 0;
+        border-left: 1px solid darken(#fff, 30%);
+        margin-right: 0;
+      }
+      &.ico-prev {
+        background-image: image-url('no_cms/admin/ico-prev-dark.png');
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+      &.ico-next {
+        background-image: image-url('no_cms/admin/ico-next-dark.png');
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+  .advanced {
+    max-height: $tool_bar_h;
+    padding: $content_area_padding;
+    background: darken(#fff, 10%);
+    border-top: 1px solid darken(#fff, 30%);
+    border-bottom: 1px solid darken(#fff, 30%);
+    > div {
+      display: none;
+    }
+  }
+  .lang {
+    > a {
+      color: #000;
+    }
+  }
+
+  //
+  // Warning error and info msg
+  //
+  .content {
+    .msg {
+      padding-top: 12px;
+      /* Colors are based on Accent color */
+      &.info {
+        $col: hsl( 190, saturation($accent), lightness($accent));
+        border-bottom: 1px solid darken($col, 20%);
+        border-left: 4px solid darken($col, 20%);
+        background-color: lighten($col, 25%);
+      }
+      &.warning {
+        $col: hsl( 40, saturation($accent), lightness($accent));
+        border-bottom: 1px solid darken($col, 20%);
+        border-left: 4px solid darken($col, 20%);
+        background-color: lighten($col, 25%);
+      }
+      &.error {
+        $col: hsl( 0, saturation($accent), lightness($accent));
+        border-bottom: 1px solid darken($col, 20%);
+        border-left: 4px solid darken($col, 20%);
+        background-color: lighten($col, 25%);
+      }
+    }
+  }
+}
+
+//
+// Form styles
+//
+label {
+  width: 100%;
+  padding: 0 16px 8px 0;
+  font-weight: 700;
+  color: $bg;
+}
+legend {
+  padding-right: 16px;
+  padding-bottom: 4px;
+  font-weight: 700;
+  color: $bg;
+}
+/* Los checkbox deben estar dentro de un fieldset */
+fieldset {
+  width: 100%;
+  float: left;
+  label {
+    width: auto;
+    font-weight: 400;
+    white-space:nowrap;
+  }
+}
+input[type=radio],
+input[type=checkbox] {
+
+}
+input[type=text],
+input[type=date],
+input[type=email],
+input[type=password],
+textarea {
+  width: 100%;
+  float: left;
+  margin-bottom: 8px;
+  padding: 8px;
+  border: 1px solid darken(#fff, 30%);
+  outline: 0;
+
+  font-family: $font_mono;
+  font-size: 18px;
+  line-height: 1em;
+
+  &:focus {
+    border: 1px solid desaturate(darken($accent, 20%), 20%);
+  }
+  &.half {
+    width: 48%;
+    margin-right: 8px;
+  }
+  &.third {
+    width: 31%;
+    margin-right: 8px;
+  }
+}
+input[type=text],
+input[type=date],
+input[type=email],
+input[type=password] {
+  height: 32px;
+  padding: 4px 8px 8px 8px;
+  line-height: 18px;
+}
+input[type=date] {
+  width: auto;
+}
+textarea {
+  float: left;
+  resize:vertical;
+}
+select {
+  float: left;
+  padding: 8px;
+  margin-right: 10px;
+  margin-bottom: 8px;
+  outline: 0;
+}
+
+//
+// Form styles de filter
+//
+#interface {
+  legend,
+  label {
+    color: #fff;
+    padding-bottom: 4px;
+  }
+  input[type=text] {
+    &.half {
+      width: 48%;
+      margin-left: 3.5%;
+      margin-right: 0;
+      &:first-of-type {
+        margin-left: 0;
+      }
+    }
+  }
+  .filter-bar {
+    .row {
+      @include clearfix;
+      padding: 0 0 4px 0;
+    }
+    input[type=reset].btn,
+    input[type=submit].btn {
+      margin: 8px 0 0 8px;
+    }
+  }
+}