aura 0.0.1.pre10

data/app/css/admin/chrome.scss

@@ -0,0 +1,208 @@
+/*
+ *
+ * Layout
+ *
+ */
+
+body {
+  #content { width: auto; min-width: 500px; }
+}
+
+/*
+ * The top bar
+ */
+
+#top {
+  height: $top-height; line-height: $top-height; overflow: hidden; 
+  background: $top-color; color: #ddd; padding: 0 10px;
+  @include gradient($top-hicolor, $top-color);
+
+  h3 {
+    position: absolute; top: 7px; left: 5px;
+    margin: 0; padding: 0; float: left;
+    width: 165px; position: relative;
+    a { color: #eee; padding: 0; display: block; float: left; font-size: 12pt; text-shadow: 0 0 4px $blue-glow-70; }
+    -webkit-transition-property: top, left;
+    -webkit-transition-duration: 0.2s, 0.2s;
+  }
+
+  h3 a.view {
+    display: block;
+    position: absolute; top: -1px; right: 0;
+    @include gradient(#eee, #d0d0d0); @include border-radius(10px);
+    padding: 0 10px; line-height: 20px; height: 18px; overflow: hidden; 
+    font-size: 8pt;  font-weight: bold; color: #333;
+    text-shadow: 1px 1px 0 $hilite50;
+    margin: (($top-height - 16px)/2) 0px;
+    text-transform: uppercase; 
+
+    &:hover {
+      text-decoration: none; @include gradient(#fafafa, #d9d9d9);
+      @include shadow(inset 0 0 3px $blue, 0 0 4px $blue);
+      color: $blue * 0.6;
+    }
+  }
+}
+
+body.no-sidebar #top {
+  h3 { top: -1px; }
+}
+
+#aux {
+  float: right; font-size: 8pt; color: #888;
+
+  h4 {
+    float: left; font-weight: normal; font-size: 1em;
+    margin: 0; padding: 0; margin-right: 20px;
+    a { color: white; }
+    a:hover { color: white; text-decoration: underline; }
+  }
+  strong { color: #ccc; font-weight: normal; }
+  ul { @include horiz-list; float: left; }
+  a {
+    color: $blue; font-weight: normal;
+    &:hover { color: $blue * 1.1; }
+  }
+}
+
+/*
+ * Tabs
+ */
+
+#tabs {
+  position: absolute; top: ($top-height - $tab-height); left: 200px;
+  z-index: 1;
+  ul { @include horiz-list; }
+  a, span {
+    @include border-top-radius(2px);
+    font-size: $small;
+    display: block; 
+    padding: 0 30px 0 10px; margin-right: 5px;  
+    color: #ddd; text-shadow: 1px 1px 0 $shadow20; 
+    @include gradient(#666, #555);
+    height: $tab-height; line-height: $tab-height; 
+    @include shadow(inset 0 1px 0 #7a7a7a);
+    &:hover { text-decoration: none; }
+  }
+  a:hover { @include gradient(#6a6a6a, #606060); color: #eee; }
+
+  li.active a, li.active span,
+  a.active, span.active {
+    cursor: default;
+    background: white; color: $grey; text-shadow: 1px 1px 0 $shadow10;
+    @include shadow(inset 0 1px 1px $blue-glow-40);
+  }
+}
+
+/*
+ * Title
+ */
+
+#title {
+  @include gradient(#fff, #f7f7f7);
+  border-bottom: solid 1px #ccc; 
+  margin: 0;
+  padding: 10px; text-align: left; @include clearfix;
+  @include shadow(2px 0 4px $shadow10, inset 0 -1px 0 $hilite30, inset 0 -1px 2px $blue-glow-20);
+  height: $title-height + 10px; overflow: hidden;
+
+  .title-c { float: left; }
+  h1, input {
+    color: $blue; font-size: 17pt;
+    height: $title-height - 10px;
+    line-height: $title-height - 10px; margin: 0;
+    font-family: $reset-heading-font;
+    text-shadow: 1px 1px 0 $hilite50;
+  }
+
+  h1 em {
+   font-weight: normal; color: #aaa; font-style: normal;
+   &:before { content: '/'; color: #ddd; margin-right: 8px; }
+  }
+
+  input {
+    width: 500px;
+    @include border-radius(4px);
+    margin: -5px;
+    background: transparent; padding: 5px; border: 0; font-weight: bold; cursor: text;
+    &:focus { outline: 0; }
+  }
+
+  &:hover input,
+  input:focus { background: fade-out($blue-glow-20, 0.08); @include shadow(1px 1px 0 fade-out($blue, 0.7)); }
+}
+
+body.fixed-layout {
+  overflow: hidden;
+
+  #nav, #title, #area { @include box-sizing(border-box); }
+  #nav { position: absolute; left: 0; top: $top-height; width: 200px; }
+  #title { position: absolute; }
+  #area { position: absolute; }
+}
+
+/*
+ * Toolbar
+ */
+
+#toolbar {
+  position: absolute; right: 10px; top: 10px; 
+  color: $grey;
+  height: $title-height - 10px;
+  line-height: $title-height - 10px;
+  ul { @include horiz-list; }
+  a {
+    margin-left: 10px; 
+
+    @include button;
+    @include button-metal;
+    &:hover { text-decoration: none; }
+    &:hover { @include glow; }
+    &:active { @include button-black; }
+  }
+
+  a.blue { @include button-blue; }
+  a.black { @include button-black; }
+}
+
+/*
+ * Area
+ */
+
+#area {
+  background: #eee; padding: 10px;
+  overflow-y: auto; overflow-x: hidden;
+  //@include shadow(2px -2px 2px $blue-glow-70);
+}
+#area.full #content { margin: -10px -10px 0 -10px; }
+
+#content {
+  margin: 0 auto;
+}
+
+/*
+ * Flash message
+ */
+
+#flash {
+  @include border-bottom-radius(4px);
+  @include gradient(fade-out($blue, 0.2), fade-out($blue * 1.2, 0.8));
+  margin: -11px -10px 10px -10px;
+  padding: 5px 10px; text-align: center;
+  @include shadow(0 0 4px fade-out(#adf, 0.1), inset 0 -1px 0 $hilite30, inset 0 2px 4px $shadow10);
+  color: white; text-shadow: 1px 1px 0 $shadow20;
+  border-bottom: solid 1px $blue * 1.1;
+
+  ul { @include non-list; }
+}
+
+/* Errors */
+#content .validation-errors {
+  @include gradient(#fee, #fee * 0.95);
+  margin: -10px -10px 20px -10px; padding: 10px;
+  border-bottom: solid 1px #fee * 0.9;
+  @include shadow(inset 0 1px 0 #fee*1.05, 0 2px 3px $shadow05);
+  text-shadow: 1px 1px 0 $hilite30; 
+  h3 { margin: 0; padding: 0; color: #855; }
+  ul { @include non-list; }
+}

data/app/css/admin/common.scss

@@ -0,0 +1,78 @@
+.align-center { text-align: center; }
+
+/*
+ * Containers
+ */
+
+div.split {
+  display: table; width: 100%;
+  >.left, >.right { display: table-cell; width: 50%; vertical-align: top; }
+  >.left { padding-right: 10px; }
+}
+
+div.split-70-30 {
+  @extend div.split;
+  >.left { width: 70%; }
+  >.right { width: 30%; }
+}
+
+div.split-250-side {
+  @extend div.split;
+  >.left { width: auto; }
+  >.right { width: 250px; }
+}
+
+#content div.split > div > :first-child { &, >* { margin-top: 0px; } }
+#content div.split > div > :last-child { &, >* { margin-bottom: 0px; } }
+
+div.slim { margin: 0 auto; min-width: 500px; width: 70%; }
+div.slim.fixed { margin: 0 auto; width: 500px; }
+div.micro { margin: 0 auto; width: 350px; }
+div.dialog {
+  margin: 40px auto; width: 500px; padding: 40px 10px;
+  background: white; @include border-radius(4px); text-align: center; 
+  @include gradient(#fff, #f0f0f0); font-size: 11pt;
+  @include shadow(0 0 4px $shadow10, 0 -2px 2px $blue-glow-10, 0 2px 2px $blue-glow-10);
+
+  #content & p.submit {
+    @include shadow(none);
+    background: transparent; text-align: center;
+    border: 0;
+  }
+}
+
+img.icon, span.icon {
+  vertical-align: middle; 
+  display: inline-block; width: 16px; height: 16px; margin-right: 5px;  
+}
+
+button, a.button {
+  @include button; @include button-metal;
+  &.black { @include button-black; }
+  &.blue { @include button-blue; }
+  &.small { @include button-small; }
+  &.micro { @include button-micro; }
+}
+
+/* Table */
+section.items table,
+section.table table {
+  width: 100%;
+
+  tr:last-child td { padding-bottom: 0; }
+  tr:first-child td { border-top: 0; padding-top: 0; }
+  td { padding: 10px 5px; border-top: dotted 1px #ddd; }
+  td:first-child { padding-left: 0; }
+  td:last-child { padding-right: 0; }
+  td.actions { width: 150px; text-align: right; }
+}
+
+td ul.actions { list-style-type: none; margin: 0; padding: 0; float: right; font-size: 8pt; line-height: 16px;
+  li { margin: 0; padding: 0; float: left; }
+  a { background: #ddd; color: #333; display: block; float: left; padding: 1px 9px; }
+  a { text-shadow: 1px 1px 0 $hilite30; @include shadow(1px 1px 0 $shadow20); }
+  a { border-left: solid 1px $hilite40; border-right: solid 1px $shadow10; }
+  li:first-child a { @include border-left-radius(8px); border-left: 0; }
+  li:last-child a { @include border-right-radius(8px); border-right: 0; }
+  a:hover { text-decoration: none; background: #888; color: white; text-shadow: 1px 1px 0 $shadow20; }
+}

data/app/css/admin/forms.scss

@@ -0,0 +1,342 @@
+/* Forms */
+form:not(.bypass) {
+
+  fieldset { margin: 10px 0 20px 0; border: 0; }
+
+  h3.legend {
+    @include border-radius(4px); 
+    @include gradient($slate-blue, saturate($slate-blue * 0.9, 10%));
+    @include shadow(0 1px 0 $shadow20, 0 0 1px $shadow40, inset 0 1px 0 $hilite20);
+    text-align: center;
+    padding: 5px 10px; margin: 10px 0;
+    font-size: 1.2em; color: $grey;
+    text-shadow: 1px 1px 0 $hilite40;
+  }
+
+  p.description {
+    color: $grey; text-shadow: 1px 1px 0 $hilite20; padding: 10px 10px;
+  }
+
+  p { margin: 10px 0; position: relative; }
+  p:first-child { margin-top: 0; }
+  p:last-child { margin-bottom: 0; border-bottom: 0; }
+
+  .label, label {
+    display: block; font-weight: bold;
+    line-height: 24px; color: #777;
+  }
+
+  .mock, textarea, input { @include input; @include box-sizing(border-box); width: 100%; }
+  textarea, .mock.textarea { height: 220px; }
+
+  // Mock controls for the form builder
+  .mock {
+    display: block;
+    background: $sidebar-color url(/images/admin/mock-bg.png);
+    &, &:hover { border: solid 1px #bbb !important; }
+  }
+  .mock:active {
+    background-color: $sidebar-color * 0.95;
+  }
+
+  p.long {
+    .mock.textarea,
+    textarea { height: 150px; }
+  }
+
+  /* "Hola! You are:" */
+  h2.greeting {
+    font-size: 13pt; text-align: center;
+    color: $slate; text-shadow: 1px 1px 0 $hilite20; 
+    margin: 0;
+  }
+
+  label.checkbox {
+    display: inline-block;
+    input { display: inline !important; width: auto !important; height: auto !important; }
+    span { display: inline; font-weight: normal; margin-left: 5px; }
+  }
+  p.submit {
+    @extend .message;
+    height: 35px; line-height: 35px; padding: 5px 15px 5px 10px;
+    margin: 20px 0;
+    & { text-align: left; @include clearfix; }
+    button { @include button; @include button-black; }
+    .right { float: right; }
+  }
+
+  /* Inline validation */
+  p.compact.error,
+  p.error {
+    input, &.focus input, input:focus {
+      border-color: $red;
+      @include shadow(0 0 3px $red,
+                      inset 0 0 5px fade-out($red, 0.6));
+    }
+  }
+
+  p .notice {
+    @include border-top-left-radius(8px);
+    height: 20px; line-height: 20px; overflow: hidden;
+    padding: 0 10px 0 24px; 
+    position: absolute; bottom: 0px; right: 0px;
+    color: white; text-shadow: 1px 1px 0 $shadow20;
+  }
+
+  p .notice {
+    @include shadow(0 0 3px $green);
+    background: $green url(/images/admin_icons/generic.png) 5px center no-repeat;
+  }
+
+  p.error .notice {
+    @include shadow(0 0 3px $red);
+    background: $red*0.8 url(/images/admin_icons/generic.png) 5px center no-repeat;
+  }
+
+  /* Overrides! :) */
+
+  /* No label */
+  p.no-label {
+    label { display: none; }
+  }
+
+  p.hide { display: none; }
+
+  p.center {
+    input, label { text-align: center; }
+  }
+
+  /* Title fields */
+  p.title {
+    input { font-size: 14pt; height: 45px; }
+  }
+
+  /* Compact fields: like slug, password, etc */
+  p.compact {
+    @include input;
+    @include clearfix;
+
+    height: auto;
+    min-height: $input-height;
+    line-height: $input-height;
+    background: rgba(0, 0, 0, 0.02);
+    padding: 0; width: 100%;
+
+    label {
+      float: left; width: 30%;
+      @include box-sizing(border-box);
+      padding: 0 10px; overflow: hidden;
+      line-height: $input-height;
+    }
+
+    select {
+      vertical-align: baseline;
+      min-width: 250px;
+    }
+
+    input, textarea {
+      &, &:hover, &:focus {
+        @include shadow(0); border: 0;
+        border-left: solid 1px #ddd;
+      }
+      float: left; width: 70%;
+    }
+
+    &.focus {
+      @include input-focus; background: #f6f6f6;
+      label {
+        text-shadow: 1px 1px 0 $hilite50;
+        background: fade-out($blue, 0.9); color: $blue * 0.7;
+      }
+    }
+  }
+
+  p.compact-top {
+    @extend p.compact;
+    margin-bottom: 0;
+    &, input {
+      @include border-bottom-radius(0);
+      @include border-top-radius(4px);
+    }
+  }
+
+  p.compact-bottom {
+    @extend p.compact;
+    margin-top: 0;
+    &, input {
+      border-top: 0;
+      @include border-top-radius(0);
+      @include border-bottom-radius(4px);
+    }
+  }
+
+  p.compact-middle {
+    @extend p.compact;
+    margin-top: 0; margin-bottom: 0;
+    &, input {
+      border-top: 0;
+      @include border-top-radius(0);
+      @include border-bottom-radius(0);
+    }
+  }
+}
+
+//
+// Wysiwyg
+//
+
+p.html label {
+  padding-left: 5px; }
+
+p.html textarea {
+  padding: 15px;
+  border-top: 0;
+  @include shadow(none);
+}
+
+div.wysiwyg {
+  @include input-base;
+  padding: 0;
+  overflow: hidden;
+  width: 100% !important;
+
+  // Edit HTML field
+  textarea {
+    visibility: visible;
+    margin-bottom: -8px;
+    padding: 15px;
+    padding-bottom: 0;
+  }
+
+  iframe { border: 0; @include shadow(none); }
+
+  ul.toolbar, div.toolbar-two {
+    height: 20px; overflow: hidden;
+    font-size: 8pt; color: #888; line-height: 20px;
+    padding: 5px 4px 4px 4px;
+    border-bottom: solid 1px #e2e2e2;
+    @include gradient(#f7f7f7, #f4f4f4);
+    @include shadow(inset 0 1px 0 $hilite50);
+    @include border-top-radius(4px);
+
+    li, li.active {
+      @include border-radius(2px);
+      border: solid 1px transparent;
+      margin: 0 3px; }
+
+    li.active {
+      background-color: $blue-glow-20;
+      @include shadow(0 0 4px $blue-glow-20); }
+
+    li:active {
+      background-color: $blue-glow-40; }
+
+    & { opacity: 0.9; }
+    li { opacity: 0.2; }
+    li:not(.bold):not(.italic):not(.underline):not(.justifyLeft):not(.justifyCenter):not(.justifyRight):not(.justifyFull) { opacity: 0; }
+  }
+
+  div.toolbar-two {
+    span, a {
+      margin: 0 5px; }
+  }
+
+  iframe { margin: 0; width: 100% !important; }
+
+  textarea, textarea:focus, textarea:hover {
+    border: 0; @include shadow(none); background: transparent;
+  }
+}
+
+html:not(.webkit) p div.wysiwyg,
+p.focus div.wysiwyg {
+  background: white;
+
+  ul.toolbar { opacity: 1; }
+  ul.toolbar li { opacity: 0.9 !important; }
+  ul.toolbar li.separator { opacity: 0.4 !important; }
+  &, li, a { @extend .animate-opacity; }
+
+}
+
+p.html.focus {
+  @include border-radius(4px);
+  @include input-focus;
+  padding-bottom: 0;
+
+  textarea { @include shadow(none); }
+
+  label {
+    @include background(linear-gradient(top, #fafafa, #f0f0f0));
+    @include border-top-radius(2px);
+  }
+}
+
+body.js-on #area.editable-title p.main-title { display: none; }
+
+
+.form-builder {
+  @include clearfix;
+  background: #f8f8f8;
+  border: solid 1px #ddd;
+  @include border-radius(4px);
+  padding: 0 10px;
+  h2 {
+    width: 27%; float: right; font-size: 1em;
+    margin-left: 3%;
+    color: $slate;
+    strong, em { display: block; }
+    strong { font-size: 10pt; }
+    em { color: #999; font-weight: normal; font-style: normal; font-size: $small; }
+  }
+  fieldset { width: 70%; float: left; }
+
+
+  p { position: relative; }
+  p .mock { cursor: move; }
+  p .toolbar {
+    position: absolute; bottom: 0px; right: 38%;
+    background: #333; padding: 2px;
+    @include border-top-radius(6px);
+    color: #ddd;
+    font-size: $small;
+    a { color: $blue; font-weight: normal; }
+    a:hover { text-decoration: none; }
+    span, a { padding: 0 5px; }
+
+    a.options, a.delete {
+      display: inline-block; width: 16px; text-indent: -9999px;
+      background: url(/images/admin_icons/settings.png) center -1px no-repeat;
+      &:hover { background-color: $blue; @include shadow(0 0 4px $blue-glow-70); }
+    }
+
+    a.delete {
+      background-image: url(/images/admin_icons/generic.png);
+      background-position: center 1px;
+    }
+  }
+
+  p .toolbar { display: none; }
+  p:hover .toolbar { display: block; }
+
+  input.label {
+    padding: 0 3px; height: 22px; background: transparent;
+    border: solid 1px transparent; @include shadow(none);
+    cursor: text;
+    margin-bottom: 3px;
+
+    &:hover {
+      @include shadow(none);
+    }
+    &:focus {
+      background: white; @include shadow(inset 0 2px 2px $shadow10);
+      border-color: #ccc;
+    }
+  }
+
+  p:hover input.label {
+    background: $hilite40;
+    border: solid 1px #ddd;
+    &:focus { background: white; border-color: #ccc; }
+  }
+}