tolaria 1.0.0

data/app/assets/stylesheets/admin/_root.scss

@@ -0,0 +1,63 @@
+html {
+  height: 100%;
+  margin-bottom: 1px;
+  background: $cEggshell;
+}
+
+body {
+
+  @include clearfix();
+  background-color: $cWhite;
+  font-family: $fHelvetica;
+  padding: 0 20px 0 20px;
+  width: 100%;
+
+  @include min-width($bpFull) {
+    background-color: $cEggshell;
+    background-image: linear-gradient(to right, $cEggshell 50%, #fff 50%);
+  }
+
+  &.-modal-open {
+    overflow: hidden;
+  }
+
+}
+
+:focus {
+  outline: 1px solid transparentize($cSapphire, 0.25);
+}
+
+*:hover,
+*:active {
+  outline: none !important;
+}
+
+.inner-align {
+  @include clearfix;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.application-container {
+  @include clearfix();
+  margin: 0 auto;
+  max-width: 1000px;
+  min-height: 100vh;
+  width: 100%;
+  @include min-width($bpFull) {
+    display: table;
+    height: 100vh;
+  }
+}
+
+.mobile-only {
+  @include min-width($bpFull) {
+    display: none !important;
+  }
+}
+
+.desktop-only {
+  @include max-width($bpFull) {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,4 @@
+// To override, create app/assets/admin/admin.scss in your parent app.
+// The actual manifest is stored in base.scss.
+
+@import "admin/base";

data/app/assets/stylesheets/admin/components/_blank_slate.scss

@@ -0,0 +1,44 @@
+.blank-slate {
+
+  @include clearfix;
+  display: block;
+  clear: both;
+  float: left;
+  width: 100%;
+  text-align: center;
+  padding: 10% 5% 12% 5%;
+  margin: 20px 0 20px 0;
+  border: 1px dashed $cGrey;
+  background: $cCoolGrey;
+  border-radius: 3px;
+
+  &-header {
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+  &-icons {
+
+    display: block;
+    margin: 0 0 25px 0;
+    text-align: center;
+
+    .icon {
+      font-size: 42px;
+      color: $cGrey;
+      width: 42px;
+      height: 42px;
+      text-align: center;
+      line-height: 1;
+    }
+
+  }
+
+  &-text {
+    margin: 10px auto 25px auto;
+    a {
+      color: $cSapphire;
+    }
+  }
+
+}

data/app/assets/stylesheets/admin/components/_buttons.scss

@@ -0,0 +1,82 @@
+.button {
+
+  -ms-appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 2px;
+  border: 1px solid black(0.5);
+  box-shadow: 0px 1px 0px white(0.25) inset, 0px 1px 0px black(0.15);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  height: 32px;
+  line-height: 30px;
+  padding: 0px 14px 0px 12px;
+  vertical-align: middle;
+  transition: background-color 100ms linear, border-color 100ms linear;
+  white-space: nowrap;
+
+  &.-small {
+    transition: none;
+    font-size: 12px;
+    line-height: 16px;
+    padding: 2px 9px 2px 9px;
+    height: auto;
+  }
+
+  .icon {
+    margin: 0 2px 0 0;
+  }
+
+  & {
+    color: $cPlum;
+    background-color: $cButtonNeutral;
+    text-shadow: 0px 1px 0px white(0.20);
+    &:hover, &:active {
+      background-color: $cButtonNeutralActive;
+    }
+  }
+
+  &.-primary {
+    color: $cWhite;
+    background-color: $cButtonPrimary;
+    text-shadow: 0px 1px 0px black(0.25);
+    &:hover, &:active {
+      background-color: $cButtonPrimaryActive;
+    }
+  }
+
+  &.-danger {
+    color: $cWhite;
+    background-color: $cButtonDanger;
+    text-shadow: 0px 1px 0px black(0.25);
+    &:hover, &:active {
+      background-color: $cButtonDangerActive;
+    }
+  }
+
+  &:disabled, &.disabled {
+    opacity: 0.75;
+    background: $cGrey;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+}
+
+// Currently convinced it is impossible to make <a> and <button>
+// look the same in Firefox without hacks like this.
+@-moz-document url-prefix() {
+  button.button {
+    line-height: 1;
+  }
+  .button.-small {
+    padding-top: 1px;
+    padding-bottom: 3px;
+  }
+}

data/app/assets/stylesheets/admin/components/_flash_message.scss

@@ -0,0 +1,64 @@
+.flash-message {
+
+  @include clearfix;
+  background: $cSapphire;
+  border-bottom: 1px solid $cPlum;
+  box-shadow: 0px 1px 0px white(0.2) inset;
+  color: $cWhite;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 21px;
+  margin: 0 -20px 0 -20px;
+  padding: 10px 20px;
+  text-shadow: 0;
+  position: relative;
+  z-index: 100000;
+
+  @include min-width($bpFull) {
+    padding: 12px 40px;
+  }
+
+  .icon {
+    float: left;
+    margin: 2px 5px 0 0;
+    @include min-width($bpFull) {
+      margin: 2px 0px 0 -24px;
+    }
+  }
+
+  p {
+    display: block;
+    max-width: 36em;
+    float: left;
+  }
+
+  button {
+    display: none;
+    @include min-width($bpFull) {
+      display: block;
+      transition: border-color 200ms linear, color 200ms linear;
+      color: white(0.8);
+      border: 1px solid white(0.8);
+      padding: 0 6px;
+      border-radius: 2px;
+      line-height: 21px;
+      font-size: 12px;
+      background: transparent;
+      font-weight: bold;
+      float: right;
+      margin: 0 0 -2px 0;
+    }
+  }
+
+  &:hover {
+    button {
+      border-color: white;
+      color: white;
+    }
+  }
+
+  &.-error {
+    background: $cRuby;
+  }
+
+}

data/app/assets/stylesheets/admin/components/_footer.scss

@@ -0,0 +1,9 @@
+.footer {
+  background: $cPlum;
+  border-top: 1px solid #000;
+  color: white(0.4);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0 -20px;
+  padding: 11px 5%;
+}

data/app/assets/stylesheets/admin/components/_header.scss

@@ -0,0 +1,107 @@
+.header-stripe {
+  background-image: asset-data-url("admin/columbia_banner.png");
+  background-position: -250px 0px;
+  background-repeat: repeat-x;
+  background-size: 100% 100%;
+  border-bottom: 1px solid black;
+  height: 3px;
+  margin: 0 -20px;
+  position: relative;
+  z-index: 100000;
+}
+
+@-moz-document url-prefix() {
+  .header-stripe {
+    margin-bottom: -1px;
+  }
+}
+
+.header {
+
+  @include clearfix;
+  background: $cPlum;
+  border-bottom: 2px solid black;
+  font-size: 14px;
+  text-shadow: $plumShadow;
+  margin: 0 -20px;
+  padding: 0 20px;
+  position: relative;
+  z-index: 100000;
+
+  &-menu-trigger {
+    color: #fff;
+    display: block;
+    line-height: 18px;
+    padding: 10px 0 10px 0;
+    float: left;
+    span {
+      padding: 5px 18px 5px 0;
+    }
+  }
+
+  &-app-title {
+    display: none;
+    @include min-width($bpFull) {
+      color: $cWhite;
+      display: block;
+      line-height: 18px;
+      padding: 10px 0 10px 0;
+      float: left;
+    }
+  }
+
+  &-user-controls {
+    display: table;
+    float: right;
+    li {
+      display: table-cell;
+      padding: 10px 0 10px 20px;
+      line-height: 18px;
+      vertical-align: middle;
+    }
+  }
+
+  &-help-link {
+    display: none;
+    @include min-width($bpFull) {
+      color: $cGrey;
+      display: inline-block;
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 14px;
+      &:hover, &:active, &:focus {
+        color: $cWhite;
+      }
+    }
+  }
+
+  &-user-profile {
+
+    color: $cGrey;
+
+    img {
+      float: left;
+      margin: 0 7px 0 0;
+      border: 1px solid $cGrey;
+      border-radius: 1px;
+    }
+
+    &:hover, &:active {
+      color: $cWhite;
+      img {
+        border-color: $cWhite;
+      }
+    }
+
+  }
+
+  &-user-signout {
+    background: 0;
+    color: $cGrey;
+    &:hover, &:active {
+      color: $cWhite;
+    }
+  }
+
+}

data/app/assets/stylesheets/admin/components/_index_table.scss

@@ -0,0 +1,120 @@
+// Make this table-cell auto-size to its content
+@mixin auto-size-column {
+  width: 1px;
+  white-space: nowrap;
+}
+
+.index-table-wrap {
+  @include clearfix;
+  float: left;
+  overflow-x: scroll;
+  width: 100%;
+  @include min-width($bpFull) {
+    overflow-x: visible;
+  }
+}
+
+.index-table {
+
+  min-width: 730px;
+  text-align: left;
+  width: 100%;
+
+  @include min-width($bpFull) {
+    min-width: 0;
+  }
+
+  .monospace {
+    font-size: 14px;
+  }
+
+  thead tr {
+    border-bottom: 1px solid $cGrey;
+  }
+
+  tbody tr {
+
+    font-size: 15px;
+    border-bottom: 1px dashed $cGrey;
+
+    &:nth-child(even) {
+      background-color: #fbfbfb;
+    }
+
+    &:hover, &:active,
+    &:focus {
+      background-color: transparentize($cButtonPrimary, 0.95) !important;
+    }
+
+  }
+
+}
+
+.index-th {
+
+  color: $cPlum;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 8px 8px 8px 8px;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  a {
+    color: $cPlum;
+    font-weight: bold;
+    &.desc, &.asc,
+    &:hover, &:active {
+      color: $cThreespotPink;
+    }
+  }
+
+  &:first-of-type {
+    @include auto-size-column;
+  }
+
+}
+
+.index-td {
+
+  border: 0;
+  margin: 0;
+  text-align: left;
+  vertical-align: middle;
+
+  &:first-of-type {
+    @include auto-size-column;
+  }
+
+  a {
+    @include clearfix;
+    color: $cPlum;
+    display: block;
+    padding: 11px 8px 11px 8px;
+    width: 100%;
+  }
+
+  img {
+    border-radius: 1px;
+    border: 1px solid $cPlum;
+    display: block;
+    float: left;
+    margin: -1px 7px 0 0;
+  }
+
+}
+
+@-moz-document url-prefix() {
+  .index-td {
+    a {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+}
+
+.actions-td {
+  @include auto-size-column;
+  .button {
+    margin: 0 0 0 8px;
+  }
+}